/**
 * Purpose:    Small utility classes for spacing and layout that don't warrant
 *             a full component: .stack, .cluster, and similar.
 * Depends on: tokens.css
 * Used by:    Linked last, after components.css, in views/layout/app.php and
 *             views/layout/guest.php — loaded last on purpose so it CAN
 *             override component rules.
 * Note:       Kept deliberately small: anything that controls more than one
 *             spacing value or one text color belongs in components.css as a
 *             real component instead.
 */

/* ============================================================
   Layout utilities
   .stack and .cluster replace the old <br> spacers and inline-style flex
   layouts that used to sit in the markup.
   ============================================================ */

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.stack--xs { gap: var(--space-1); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-8); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.cluster--tight  { gap: var(--space-2); }
.cluster--loose  { gap: var(--space-4); }
.cluster--between { justify-content: space-between; }
.cluster--center  { justify-content: center; }
.cluster--end     { justify-content: flex-end; }

/* Formularzeile: Felder und der zugehoerige Button auf einer Grundlinie.
   flex-end statt center, damit der Button mit der Feldunterkante abschliesst
   und nicht mit der Feldmitte — die Label darueber sind unterschiedlich hoch. */
.cluster--form {
    align-items: flex-end;
    gap: var(--space-3);
}

/* Both set `gap` at equal (single-class) specificity — without this override,
   whichever rule sits later in the file wins regardless of class order in the
   markup, so .cluster--form.cluster--loose silently lost to plain
   .cluster--form here before. Explicit compound selector instead of relying
   on source order staying right forever. */
.cluster--form.cluster--loose {
    gap: var(--space-4);
}

.cluster--form .field {
    margin-bottom: 0;
}

.grow { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   Text-Utilities
   ============================================================ */

.text-muted  { color: var(--text-muted); }
.text-strong { color: var(--text-strong); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.mono        { font-family: var(--font-mono); }
.nowrap      { white-space: nowrap; }

/* ============================================================
   Sichtbarkeit
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.is-hidden {
    display: none !important;
}