/* ============================================================
   SHELLS Design-System — Utility Classes
   Feingranulare Helper-Klassen, die wiederkehrende Inline-Style-
   Patterns in Templates ersetzen (STYLE_GUIDE §4.6).
   Additive Klassen — keine Semantik, rein visuelle Utilities.
   ============================================================ */

/* ─── Typography ─── */
.text-xs   { font-size: 0.85rem; }
.text-sm   { font-size: 0.9rem; }
.text-base { font-size: 1rem; }

.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-muted  { color: var(--textcolor-50contrast); }
.text-strong { color: var(--textcolor-80contrast); }

/* ─── Spacing — margin/padding (Token-basiert) ─── */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.mr-xs { margin-right: var(--spacing-xs); }

.pl-lg { padding-left: 1.25rem; }

/* ─── Display / Layout ─── */
.is-hidden   { display: none !important; }   /* Utility soll Component-display-Regeln (z. B. .tnsel-next-module { display: flex }) sicher überschreiben — nur wer das Element zeigen will, entfernt die Klasse oder setzt einen Inline-style. */
.w-full      { width: 100%; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* ─── Component-spezifisch (high-frequency Patterns) ─── */

/* Step-Header (26× in lab_introduction) */
.step-header {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

/* Hint-Text (16× in lab_introduction) */
.hint-text {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
    color: var(--textcolor-50contrast);
}

/* Kompakter Data-Table-Input (20× in lab_introduction) */
.data-input-sm {
    width: 100px;
    padding: 0.3rem;
    border: var(--border-thin) solid var(--gray-300);
    border-radius: var(--radius-sm);
    text-align: center;
}

/* SVG Inline Icon Alignment (4× in _tensile_test_elearning) */
.svg-icon-inline {
    margin-right: var(--spacing-xs);
    vertical-align: -2px;
}