/* ============================================================================
   Reset and base elements
   --------------------------------------------------------------------------
   Box model, document defaults and the handful of bare-element rules. Nothing
   here knows about a component; everything here applies to the whole page.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
}
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
img { max-width: 100%; }

/* The theme is written to <html data-theme> by theme.js before first paint, so
   there is no flash of the wrong palette. Transitioning the swap would make the
   flash into a fade, which is worse; only interactive elements animate. */
::selection { background: var(--brand-soft); color: var(--brand-on-soft); }

/* The open list of a select, for the reason ::selection is here: it is a surface the platform draws
   under every select, so it is one list for all of them. A bare `select` in a component sheet would
   also make ControlsNoComponentSheetStyles pass on every select a partial ever draws.

   Where `appearance: base-select` is supported the list is CSS's, drawn as the .dropdown-panel is:
   one raised box, one shadow, the same rows, and <optgroup label> and <hr> become the titled
   sections and the lines components-dropdown.css draws. Elsewhere the platform draws it from the
   option's two colours, which a dark palette needs or it gets light text on the system's white.

   Measured in Chrome 152 on 2026-09-10. A base-select lays out as a box, so it is exactly the height
   of the text input beside it, 24.0 and 33.33 at the two sizes, where the platform's was 0.67px
   taller. And a select sized to its content, .w-auto with no min-width, is as wide as the chosen
   option rather than the widest one, so it changes width when the choice does.

   `appearance` is decided here and nowhere else. The component sheets draw the arrow with
   --select-arrow and never set it: a component rule is as specific as the selector below and loads
   later, so an `appearance: none` there undoes base-select without a sound. The platform's
   ::picker-icon goes, or every select would carry two arrows. */
option { background: var(--surface-raised); color: var(--text); }
select:not([multiple], [size]) { appearance: none; }
@supports (appearance: base-select) {
    select:not([multiple], [size]),
    ::picker(select) { appearance: base-select; }
    select::picker-icon { display: none; }
    ::picker(select) {
        margin: var(--space-2) 0;
        padding: var(--space-2) 0;
        border: var(--border-width) solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-raised);
        color: var(--text);
        box-shadow: var(--shadow-lg);
    }
    select option {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
        font-weight: var(--weight-normal);
        letter-spacing: normal;
        text-transform: none;
        color: var(--text-body);
    }
    select option::checkmark { display: none; }
    select option:hover,
    select option:focus-visible { background: var(--surface-hover); outline: none; }
    select option:checked { background: var(--brand-soft); color: var(--brand-on-soft); }
    /* The group's own styles reach only its label: every option above resets what it would inherit. */
    select optgroup {
        padding-top: var(--space-2);
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--text-subtle);
    }
    select hr {
        margin: var(--space-2) 0;
        border: 0;
        border-top: var(--border-width) solid var(--border-subtle);
    }
}