/*
 * Document-level chrome: the ground, the type base, focus, the skip link, the reconnect
 * overlay, print, and the one place motion is switched off. Nothing here knows about a feature.
 */
@layer spec.base {
    html {
        color-scheme: light;
    }

    html,
    body {
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
        font-weight: var(--weight-regular);
        background: var(--color-bg);
        color: var(--color-text);
    }

    /*
     * Headings are Barlow Condensed's stand-in — Fira Sans Condensed — over Fira Sans body.
     * That pairing is the design system's signature and it has to reach MudBlazor's own
     * typography classes, which is why the selector names them.
     */
    h1, h2, h3, h4, h5, h6,
    .mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
    .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
    }

    /*
     * Links are steel, and they carry an underline drawn from the light end of the accent ramp
     * rather than the browser's. The accent-to-ground pair is tuned to 3:1 — enough for chrome,
     * not for body copy — so link text takes the deep step.
     */
    a {
        color: var(--color-accent-700);
        text-decoration: none;
    }

    a:hover {
        color: var(--color-accent-900);
    }

    ::selection {
        background: var(--color-accent-200);
    }

    /*
     * One focus treatment for the whole app, authored once rather than restated on every
     * interactive component. Components override only the *colour*, and only when they sit on
     * a dark or accent fill, via --spec-focus-ring.
     */
    :focus {
        outline: none;
    }

    :focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 2px;
    }

    /* Inset instead of outset wherever the element is flush inside a container that would clip
       an outset ring. */
    .spec-rail__link:focus-visible,
    .spec-ladder__step:focus-visible,
    .segmented > :focus-visible,
    .report-catalog__item:focus-visible {
        outline-offset: calc(-1 * var(--spec-focus-width));
    }

    .skip-link {
        position: absolute;
        left: var(--sp-3);
        top: var(--sp-3);
        z-index: var(--z-skip-link);
        padding: var(--sp-2) var(--sp-3);
        background: var(--color-neutral-900);
        color: var(--spec-on-dark);
        text-decoration: none;
        transform: translateY(-8rem);
        transition: transform var(--dur-base) var(--ease-standard);
        touch-action: manipulation;
    }

    .skip-link:focus,
    .skip-link:focus-visible {
        transform: none;
    }

    #main-content {
        scroll-margin-top: var(--sp-8);
    }

    /*
     * Wide content scrolls inside its own box. Without this a single un-wrappable ledger row
     * makes the whole document scroll sideways, which on a tablet takes the sidebar with it.
     */
    .mud-table-container,
    .mud-table-container.mud-table-container {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        background: var(--scroll-shadow-on-surface);
        background-color: var(--spec-surface);
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* —— Blazor reconnect overlay —— */
    #components-reconnect-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--z-reconnect);
        background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
        align-items: center;
        justify-content: center;
    }

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }

    .reconnect-dialog {
        background: var(--spec-surface);
        border: 1px solid var(--color-divider);
        padding: var(--sp-6) var(--sp-8);
        max-width: 440px;
        width: 90%;
        text-align: center;
        font-family: var(--font-body);
        color: var(--spec-ink);
        box-shadow: var(--shadow-lg);
    }

    .reconnect-dialog p {
        margin: var(--sp-2) 0 0;
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }

    .reconnect-dialog [components-reconnect-show],
    .reconnect-dialog [components-reconnect-failed],
    .reconnect-dialog [components-reconnect-rejected] {
        display: none;
    }

    #components-reconnect-modal.components-reconnect-show .reconnect-dialog [components-reconnect-show] { display: block; }
    #components-reconnect-modal.components-reconnect-failed .reconnect-dialog [components-reconnect-failed] { display: block; }
    #components-reconnect-modal.components-reconnect-rejected .reconnect-dialog [components-reconnect-rejected] { display: block; }

    .reconnect-spinner {
        width: 32px;
        height: 32px;
        border: 2px solid var(--color-accent-200);
        border-top-color: var(--color-accent);
        border-radius: 50%;
        animation: spec-spin 0.9s linear infinite;
        margin: 0 auto var(--sp-3);
    }

    @keyframes spec-spin {
        to { transform: rotate(360deg); }
    }

    .reconnect-dialog a {
        color: var(--color-accent-700);
        text-decoration: underline;
        cursor: pointer;
    }

    /* —— Print —— */
    @media print {
        .spec-rail,
        .spec-study-head,
        .spec-ladder,
        .page-header,
        .desk-toolbar,
        .report-catalog,
        .skip-link,
        .mud-alert {
            display: none;
        }

        .report-preview {
            break-inside: avoid;
        }

        body {
            background: #fff;
        }
    }

    /*
     * Motion is switched off by zeroing the duration tokens rather than by restating a
     * transition list per component. Anything animating a token-driven duration is covered;
     * only transforms that are *positional* rather than animated need naming, and they are
     * named below.
     */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --dur-fast: 0s;
            --dur-base: 0s;
            --dur-slow: 0s;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.001ms;
            animation-iteration-count: 1;
            transition-duration: 0.001ms;
            scroll-behavior: auto;
        }

        /* The skip link's transform IS its hiding mechanism, not an animation — keep it, but
           make the off-screen state a real clip rather than a translation. */
        .skip-link:not(:focus):not(:focus-visible) {
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 1px;
            width: 1px;
            overflow: hidden;
            white-space: nowrap;
        }

        /* The MudBlazor tab slider is positioned by transform; zeroing it would stack every
           tab indicator at the origin. */
        .mud-tabs .mud-tab-slider {
            transition-duration: 0.001ms;
        }
    }
}