/*
 * Utilities. Deliberately few: MudBlazor already ships spacing, display and flex utilities, and
 * duplicating them here would create two answers to the same question. What lives here is only
 * what MudBlazor has no equivalent for.
 */
@layer spec.utilities {
    /* Figures that must align in a column. Fira Mono plus tabular figures — the design system's
       third face, and the only one whose digits hold a decimal column. */
    .tabular-nums {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    /* An uppercase, tracked micro-label — the design system's h6 treatment, used for group and
       section labels throughout the mockup. At 9.5px it is the smallest text in the app, so it
       takes neutral-700: §3.8 reserves neutral-600 for 12px and up, or for marks that are not
       text at all. */
    .spec-kicker {
        font-family: var(--font-heading);
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        line-height: 1;
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .text-muted {
        color: var(--color-neutral-700);
    }

    /* Wide content that must scroll inside its own box rather than widening the page. */
    .scroll-x {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }
}