/* ============================================================================
   Base. Reset, document defaults, type scale, focus ring, scrollbars and the
   page scaffold. Element selectors plus the layout wrappers every page sits in.
   ========================================================================== */
@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
    body {
        margin: 0;
        background: var(--surface-page);
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        line-height: 1.6;
        font-feature-settings: "cv11", "ss01", "ss03";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Two voices. Bricolage Grotesque for the big type (h1, h2), set heavy and
       tight so it reads as a shape; Inter for small headings, where Bricolage's
       quirks turn into noise. Tracking tightens as size grows. */
    h1, h2, h3, h4 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--text-primary);
        text-wrap: balance;
    }
    h1 { font-size: clamp(2.25rem, 5vw, var(--text-4xl)); line-height: 1.02; letter-spacing: -0.045em; }
    h2 { font-size: clamp(1.625rem, 3vw, var(--text-2xl)); line-height: 1.1; letter-spacing: -0.035em; }
    h3, h4 { font-family: var(--font-sans); font-weight: 600; }
    h3 { font-size: var(--text-lg); line-height: 1.35; letter-spacing: -0.015em; }
    h4 { font-size: var(--text-base); line-height: 1.4; letter-spacing: -0.01em; }

    p { margin: 0; }
    a { color: inherit; text-decoration: none; }
    p a, li a, .link { color: var(--accent-text); text-underline-offset: 3px; }
    /* In running text a link is underlined too, so it doesn't rely on colour alone (WCAG 1.4.1). */
    p a:not([class*="btn"]), li > a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; }
    p a:hover, li a:hover, .link:hover { text-decoration: underline; }
    img, svg { display: block; max-width: 100%; }
    button { font-family: inherit; cursor: pointer; color: inherit; }
    code, kbd { font-family: var(--font-mono); font-size: 0.875em; }
    :not(pre) > code {
        padding: 0.1em 0.35em; border-radius: 4px;
        background: var(--surface-3); border: 1px solid var(--border-subtle);
    }
    hr { border: 0; height: 1px; background: var(--border-subtle); margin: 0; }
    ::selection { background: var(--action-primary-soft); color: var(--text-primary); }

    :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
    /* Headings and <main> get focus on navigation (for screen readers), not from the user: no ring. */
    [tabindex="-1"]:focus, h1:focus, h2:focus { outline: none; }

    /* ---- Native controls ----------------------------------------------------
       Browsers draw checkboxes, date/month pickers, number spinners, select
       lists, file buttons and scrollbars themselves, in a light default unless
       told otherwise. color-scheme makes them follow the theme; accent-color
       makes every checked state the brand red. -------------------------- */
    :root { color-scheme: dark; }
    [data-theme="light"] { color-scheme: light; }
    body { accent-color: var(--action-primary-bg); }

    /* Checkboxes and radios are drawn here rather than by the browser, so they match the
       fields around them in both themes: a sunken box that fills red when checked. */
    input[type="checkbox"], input[type="radio"] {
        appearance: none; display: inline-grid; place-content: center;
        width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; vertical-align: -3px;
        background: var(--surface-sunken); border: 1.5px solid var(--border-strong); border-radius: 5px;
        transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
    }
    input[type="radio"] { border-radius: 50%; }
    input[type="checkbox"]::before {
        content: ""; width: 5px; height: 9px; margin-top: -2px;
        border: solid var(--action-primary-fg); border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0); transition: transform 0.12s var(--ease);
    }
    input[type="radio"]::before {
        content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--action-primary-fg);
        transform: scale(0); transition: transform 0.12s var(--ease);
    }
    input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--border-hover); }
    input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--action-primary-bg); border-color: var(--action-primary-bg); }
    input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
    input[type="radio"]:checked::before { transform: scale(1); }
    input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: 0.5; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { cursor: pointer; }

    select option { background: var(--surface-2); color: var(--text-primary); }
    input[type="number"] { font-variant-numeric: tabular-nums; }
    input, select, textarea { font: inherit; }
    textarea { resize: vertical; }

    ::file-selector-button {
        margin-right: var(--space-3); padding: 0.4rem 0.8rem; cursor: pointer;
        font: inherit; font-size: var(--text-sm); font-weight: 550; color: var(--text-primary);
        background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    }
    ::file-selector-button:hover { border-color: var(--border-hover); }

    /* Autofill would otherwise paint fields in the browser's yellow or blue. */
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
        -webkit-text-fill-color: var(--text-primary);
        -webkit-box-shadow: 0 0 0 100px var(--surface-sunken) inset;
        caret-color: var(--text-primary);
        transition: background-color 9999s;
    }

    details > summary { cursor: pointer; list-style: none; }
    details > summary::-webkit-details-marker { display: none; }
    details > summary::before {
        content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--space-2) 2px 0;
        border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg);
        transition: transform 0.15s var(--ease);
    }
    details[open] > summary::before { transform: rotate(45deg); }

    table { border-collapse: collapse; }
    blockquote { margin: 0; }
    small { font-size: 0.8125em; }
    mark { background: var(--action-primary-soft); color: var(--text-primary); border-radius: 2px; padding: 0 0.15em; }

    * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: padding-box; border-radius: 999px; border: 3px solid transparent; }
    *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }

    /* Small phones, down to 200px wide: tighter gutters, headings that fit, buttons that wrap. */
    @media (max-width: 400px) {
        .container { padding: 0 var(--space-3); }
        h1 { font-size: clamp(1.6rem, 10.5vw, 2.5rem) !important; letter-spacing: -0.035em !important; }
        h2 { font-size: clamp(1.25rem, 7.5vw, 1.9rem) !important; }
        h1, h2, h3, p, li { overflow-wrap: break-word; }
    }
    @media (max-width: 300px) {
        h1, h2, h3, p, li, a, strong, span, dd, dt, td { overflow-wrap: anywhere; }
    }

    /* Set by redskia.scrollLock while an overlay is open. */
    html.is-scroll-locked { overflow: hidden; padding-right: var(--scrollbar-gap, 0); }

    /* Printing (invoices, receipts): the document only, on paper colours. "Save as PDF" in the
       print dialog is how customers download them. */
    @media print {
        :root, [data-theme="light"], [data-theme="dark"] { color-scheme: light; }
        body { background: Canvas; color: CanvasText; }
        .site-header, .site-footer, .admin-dock, .admin-sidebar, .skip-link, .no-print { display: none !important; }
        a { color: inherit; text-decoration: none; }
    }

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

    /* ---- Layout scaffold ---------------------------------------------------- */
    .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-6); }
    .container-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); }
    .section { padding: var(--space-16) 0; }
    .measure { max-width: var(--measure); }

    @media (max-width: 640px) {
        .container, .container-narrow { padding: 0 var(--space-4); }
        .section { padding: var(--space-12) 0; }
    }

    /* Tiny screens, down to 200px: these come last so they win over the gutters above. Everything sized
       in rem shrinks with the root size, media never pushes past the edge, long text wraps. */
    img, video, canvas, iframe { max-width: 100%; }
    pre { max-width: 100%; overflow-x: auto; }
    @media (max-width: 400px) {
        .container, .container-narrow { padding: 0 var(--space-3); }
    }
    @media (max-width: 300px) {
        html { font-size: 14px; }
        .container, .container-narrow { padding: 0 var(--space-2); }
    }
}