@layer components {
    /* ---- surfaces -------------------------------------------------------- */
    .card {
        background: var(--surface-1);
        border: 1px solid var(--rule);
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-1);
    }

    .panel {
        background: var(--surface-1);
        border: 1px solid var(--rule);
        border-radius: var(--radius-3);
        padding: var(--space-5);
    }

    .section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
        margin-block-end: var(--space-4);
    }

    .section-head > :first-child { margin-inline-end: auto; }

    /* ---- pills ----------------------------------------------------------- */
    .pill {
        display: inline-flex;
        align-items: center;
        gap: .35em;
        padding: .2em .7em;
        border-radius: var(--radius-pill);
        font-size: var(--step--2);
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        background: var(--pending-bg);
        color: var(--pending);
        white-space: nowrap;
    }

    /* --won shares the palette with --nailed rather than getting a green of its own: both mean "the
       good outcome", and they cannot contradict each other, since a miss of zero can be tied but
       never beaten. */
    .pill--nailed,
    .pill--won { background: var(--nailed-bg); color: var(--nailed); }
    .pill--wayoff { background: var(--wayoff-bg); color: var(--wayoff); }
    .pill--push { background: var(--push-bg); color: var(--push); }
    .pill--noline { background: var(--noline-bg); color: var(--noline); }

    /* ---- buttons --------------------------------------------------------- */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5em;
        padding: var(--space-2) var(--space-4);
        min-block-size: 2.75rem;    /* comfortable touch target */
        border: 1px solid var(--rule);
        border-radius: var(--radius-2);
        background: var(--surface-1);
        color: var(--fg);
        font-weight: 650;
        text-decoration: none;
        cursor: pointer;
        transition: background var(--dur-1) var(--ease-out);
    }

    .btn:hover { background: var(--surface-2); }
    .btn:disabled { opacity: .5; cursor: not-allowed; }

    .btn--primary {
        background: var(--jeff);
        border-color: transparent;
        color: var(--on-brand);
    }

    .btn--primary:hover { background: color-mix(in oklch, var(--jeff) 88%, white); }

    .btn--quiet { background: none; border-color: transparent; color: var(--fg-muted); }
    .btn--quiet:hover { color: var(--fg); background: var(--surface-2); }

    /* ---- fields ---------------------------------------------------------- */
    .field {
        inline-size: 100%;
        padding: var(--space-2) var(--space-3);
        min-block-size: 2.75rem;
        background: var(--surface-1);
        color: var(--fg);
        border: 1px solid var(--rule);
        border-radius: var(--radius-2);
    }

    .field:focus-visible { border-color: var(--focus); }

    /* ---- tables ---------------------------------------------------------- */
    .table {
        inline-size: 100%;
        border-collapse: collapse;
        font-size: var(--step--1);
    }

    .table th,
    .table td {
        padding: var(--space-2) var(--space-3);
        text-align: end;
        border-block-end: 1px solid var(--rule);
        white-space: nowrap;
    }

    .table th:first-child,
    .table td:first-child {
        text-align: start;
        white-space: normal;
    }

    .table thead th {
        position: sticky;
        inset-block-start: 0;
        background: var(--surface-1);
        font-size: var(--step--2);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--fg-muted);
    }

    .table tbody tr:hover { background: var(--surface-2); }
    .table tr.is-current { background: var(--highlight-bg); }
    .table tfoot td { font-weight: 700; border-block-end: 0; }

    /* Sortable headers are links, not click handlers, which is what keeps the
       scoreboard static-rendered and output-cacheable. */
    .sort {
        display: inline-flex;
        align-items: center;
        gap: .3em;
        text-decoration: none;
        color: inherit;
    }

    .sort::after {
        content: '';
        inline-size: 0;
        block-size: 0;
        border-inline: .3em solid transparent;
        border-block-end: .35em solid currentColor;
        opacity: 0;
    }

    [aria-sort='ascending'] .sort::after { opacity: 1; }

    [aria-sort='descending'] .sort::after {
        opacity: 1;
        transform: rotate(180deg);
    }

    /* ============================================================================
       Compatibility shim for the scaffolded Identity pages.

       Those ~30 pages ship from the Blazor template using Bootstrap's class
       names. Bootstrap itself is gone, so rather than rewrite every one of them
       -- and re-do it on the next template regeneration -- the handful of class
       names they actually use are restated here against our own tokens.

       This is the complete set they reference; it is not a general grid system
       and should not grow into one. New pages use the components above.
       ============================================================================ */
    .form-floating { position: relative; }

    .form-floating > .form-control {
        inline-size: 100%;
        padding: 1.25rem var(--space-3) .4rem;
        min-block-size: 3.25rem;
        background: var(--surface-1);
        color: var(--fg);
        border: 1px solid var(--rule);
        border-radius: var(--radius-2);
    }

    .form-floating > .form-control:focus-visible { border-color: var(--focus); }

    .form-floating > label {
        position: absolute;
        inset-block-start: .35rem;
        inset-inline-start: var(--space-3);
        font-size: var(--step--2);
        color: var(--fg-muted);
        pointer-events: none;
    }

    .form-control { /* outside a floating wrapper */
        inline-size: 100%;
        padding: var(--space-2) var(--space-3);
        min-block-size: 2.75rem;
        background: var(--surface-1);
        color: var(--fg);
        border: 1px solid var(--rule);
        border-radius: var(--radius-2);
    }

    .form-label { display: block; font-weight: 600; margin-block-end: var(--space-1); }
    .form-check-input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--jeff); }
    .checkbox { display: flex; align-items: center; gap: var(--space-2); }

    .btn.btn-primary,
    button.btn-primary,
    a.btn-primary {
        background: var(--jeff);
        border: 1px solid transparent;
        border-radius: var(--radius-2);
        color: var(--on-brand);
        font-weight: 650;
        padding: var(--space-2) var(--space-4);
        min-block-size: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
    }

    .btn-lg { font-size: var(--step-1); min-block-size: 3rem; }
    .w-100 { inline-size: 100%; }
    .mb-3 { margin-block-end: var(--space-4); }
    .mx-auto { margin-inline: auto; }
    .d-flex { display: flex; }
    .flex-column { flex-direction: column; }

    .text-danger { color: var(--wayoff); font-size: var(--step--1); }

    .alert {
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-2);
        border: 1px solid var(--rule);
        background: var(--surface-2);
        margin-block-end: var(--space-4);
    }

    .alert-info { background: var(--pending-bg); border-color: var(--rule); }
    .alert-warning { background: var(--push-bg); border-color: var(--push); }
    .alert-danger { background: var(--wayoff-bg); border-color: var(--wayoff); }
    .alert-success { background: var(--nailed-bg); border-color: var(--nailed); }

    .recovery-code {
        font-family: ui-monospace, monospace;
        padding: var(--space-1) var(--space-2);
        background: var(--surface-2);
        border-radius: var(--radius-1);
    }

    /* The template's grid usage is only ever "a centred column", so it is
       implemented as exactly that rather than as twelve columns. */
    .row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);
    }

    [class*='col-'] { flex: 1 1 min(100%, 22rem); }

    .nav-pills {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        list-style: none;
        padding: 0;
    }

    .nav-item { list-style: none; }

    .nav-link {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-2);
        text-decoration: none;
        color: var(--fg-muted);
    }

    .nav-link:hover { background: var(--surface-2); color: var(--fg); }
    .nav-link.active { background: var(--surface-2); color: var(--fg); font-weight: 650; }
}

/* ---------------------------------------------------------------------------------------------
   A form waiting on its reCAPTCHA token.

   recaptcha.js sets data-busy while it mints one at submit time, and clears it only on the path
   that hands the form back. Without something visible here, a slow mint looks like a button that
   did nothing -- which is what makes people click it again.

   Deliberately no spinner: this is a whole-form state, and cursor plus dimming says "working"
   without needing an element to put it in. pointer-events stops the second click that a
   non-responding button invites; the button is separately disabled while the token is in flight,
   and this covers the rest of the form.
   --------------------------------------------------------------------------------------------- */
form[data-busy] {
    cursor: progress;
    opacity: 0.7;
}

form[data-busy] input,
form[data-busy] button {
    pointer-events: none;
}