/* ─────────────────────────────────────────────────────────────────────────────
   Base: the faces, the reset, and the browser surfaces.

   The surfaces the browser draws — selection, caret, scrollbar, focus ring,
   marker, underline offset — ship with defaults belonging to no design system.
   They are themed here because they are the cheapest evidence a page was built
   rather than assembled.
   ──────────────────────────────────────────────────────────────────────────── */

/* Self-hosted. No network call for type: this app is used where there is none. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--rule) transparent;
}

body {
    margin: 0;
    background: var(--bench);
    color: var(--ink);
    font-family: var(--face-text);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Browser surfaces ─────────────────────────────────────────────────────── */

::selection { background: var(--spot); color: var(--stock-raised); }

:root { accent-color: var(--spot); caret-color: var(--spot); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--rule-ink); }
::-webkit-scrollbar-corner { background: transparent; }

/* One focus ring for the whole app: 2px of interactive ink, offset so it never
   touches the control it marks. Nothing in this app sets outline:none without
   putting this back. */
:focus-visible {
    outline: 2px solid var(--spot);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

a {
    color: var(--spot);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:hover { color: var(--spot-lift); }

ul, ol { padding-inline-start: 1.15rem; }
li::marker { color: var(--ink-3); }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--lh-tight); text-wrap: balance; }
p { margin: 0; }
p + p { margin-top: var(--s-3); }

/* Focus lands on the page heading after navigation (FocusOnNavigate). It must
   not draw a ring around a whole title. */
h1:focus, h2:focus { outline: none; }

img, svg { max-width: 100%; }
img { display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; }

/* Every measured value in this app is fixed-pitch and lining. Set once, here,
   so no component has to remember. */
.value {
    font-family: var(--face-value);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.01em;
}

/* ── The form register ────────────────────────────────────────────────────
   A field legend on a printed schedule: condensed, small, tracked, caps. Used
   to name a field or a column — never stamped above a heading as an eyebrow. */
.legend {
    font-size: var(--t-fine);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-2);
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* Utilities, deliberately few. The component language carries the layout. */
.u-row   { display: flex; align-items: center; gap: var(--s-3); }
.u-grow  { flex: 1 1 auto; min-width: 0; }
.u-spacer{ flex: 1 1 auto; }
.u-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-hide-sm { display: none; }
@media (min-width: 700px) { .u-hide-sm { display: revert; } }
.u-only-sm { }
@media (min-width: 700px) { .u-only-sm { display: none !important; } }

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