/* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. */
/* SPDX-License-Identifier: BSD-3-Clause */
/* Scope: The design system to the binding Variant B ({K0029}) — tokens, base, layout, components; light-only ({K0001}). */

@layer reset, tokens, base, layout, components, utilities;

/* Metric-matched fallback ({K0054}: earns the last self-inflicted layout
   shift on slow font loads) — computed from the shipped Oxanium tables. */
@font-face {
    font-family: 'Oxanium Fallback';
    src: local('Arial');
    size-adjust: 119.84%;
    ascent-override: 65.92%;
    descent-override: 17.52%;
    line-gap-override: 20.86%;
}

/* Cross-document crossfade — the chrome stays, the text changes; never
   for reduced-motion readers, Firefox degrades to instant navigation. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/press-start-2p.woff2') format('woff2');
}

@font-face {
    font-family: 'Oxanium';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/oxanium.woff2') format('woff2');
}

@layer reset {
    * {
        box-sizing: border-box;
        margin: 0;
    }
}

@layer tokens {
    :root {
        color-scheme: light;
        --unit: 0.5rem;
        --accent: oklch(68% 0.18 35);
        --accent-strong: oklch(50% 0.17 35);
        /* Large-text-only orange ({K0060}): 3.11:1 on --bg — clears the WCAG
           large-text bar (>= 24 px) with margin; never for body-size text. */
        --accent-large: oklch(67% 0.19 35);
        --bg: oklch(98.5% 0.004 80);
        --surface: oklch(100% 0 0);
        --text: oklch(20% 0 0);
        --muted: oklch(52% 0 0);
        --border: oklch(90% 0 0);
        --ok: oklch(60% 0.16 145);
        --ok-strong: oklch(50% 0.16 145);
        --mark-green: oklch(69% 0.185 142);
        --font-body: 'Oxanium', 'Oxanium Fallback', system-ui, sans-serif;
        --font-mark: 'Press Start 2P', monospace;
        --font-data: ui-monospace, monospace;
    }

    @media (prefers-contrast: more) {
        :root {
            --muted: oklch(35% 0 0);
            --border: oklch(55% 0 0);
            --accent: var(--accent-strong);
            --accent-large: var(--accent-strong);
            --ok: var(--ok-strong);
        }
    }
}

@layer base {
    body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-body);
        font-weight: 350;
        line-height: 1.75;
    }

    h1 {
        text-wrap: balance;
        font-size: 2.2rem;
        font-weight: 750;
        line-height: 1.15;
        letter-spacing: -0.015em;
        max-width: 16ch;
        margin-bottom: calc(var(--unit) * 5);
    }

    p,
    li,
    blockquote,
    figcaption {
        text-wrap: pretty;
        hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
    }

    h1,
    h2,
    h3 {
        hyphens: manual;
    }

    h1 em {
        font-style: normal;
        border-bottom: 4px solid var(--accent);
    }

    h2 {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent-strong);
        margin: calc(var(--unit) * 12) 0 calc(var(--unit) * 4);
    }

    p + p {
        margin-top: calc(var(--unit) * 2.5);
    }

    a {
        color: var(--text);
    }

    blockquote {
        font-size: 1.25rem;
        font-weight: 450;
        line-height: 1.5;
        max-width: 44ch;
        margin: calc(var(--unit) * 6) 0;
    }

    blockquote::before {
        content: "– ";
        color: var(--accent);
    }

    address {
        font-style: normal;
        line-height: 1.75;
    }

    :focus-visible {
        outline: 2px solid var(--accent-strong);
        outline-offset: 2px;
    }

    @media (min-width: 45rem) {
        h1 {
            font-size: 3rem;
        }
    }
}

@layer layout {
    .nav {
        display: flex;
        flex-wrap: wrap;
        row-gap: calc(var(--unit) * 1);
        justify-content: space-between;
        align-items: baseline;
        padding: calc(var(--unit) * 3) calc(var(--unit) * 5);
    }

    .nav-links {
        color: var(--muted);
        font-size: 0.85rem;
    }

    /* 2.5.8: wrapped nav lines need >= 24 px pitch so undersized targets
       keep the spacing exception by construction. */
    .nav-links,
    .footer-nav {
        line-height: 1.85;
    }

    .nav-links a {
        color: var(--muted);
        text-decoration: none;
    }

    .nav-links a:hover {
        color: var(--accent-strong);
    }

    .wrap {
        max-width: 640px;
        margin: 0 auto;
        padding: calc(var(--unit) * 12) calc(var(--unit) * 4);
    }

    .footer {
        margin-top: calc(var(--unit) * 14);
        padding: calc(var(--unit) * 5);
        text-align: center;
        color: var(--muted);
        font-size: 0.82rem;
        letter-spacing: 0.04em;
    }
}

@layer components {
    .mark {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--unit) * 1.25);
        color: inherit;
        text-decoration: none;
        font-family: var(--font-mark);
        /* 24 px: the WCAG large-text threshold — the em below may carry
           --accent-large only at this size ({K0060}). */
        font-size: 1.5rem;
        letter-spacing: 0.05em;
    }

    .mark-logo {
        height: 1.5rem;
        width: auto;
    }

    .mark-logo .cursor {
        animation: cursor-blink 1.2s steps(1) infinite;
    }

    @keyframes cursor-blink {
        50% {
            opacity: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mark-logo .cursor {
            animation: none;
        }
    }

    .mark em {
        color: var(--accent-large);
        font-style: normal;
        border: 0;
    }

    .eyebrow {
        color: var(--muted);
        font-size: 0.78rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        margin-bottom: calc(var(--unit) * 4);
    }

    .eyebrow b {
        color: var(--accent-strong);
    }

    .lede {
        font-size: 1.2rem;
        font-weight: 350;
        max-width: 52ch;
        margin-bottom: calc(var(--unit) * 2);
    }

    .diagram-figure {
        margin: calc(var(--unit) * 5) 0;
    }

    .diagram {
        width: 100%;
        height: auto;
        display: block;
    }

    .person-head {
        display: flex;
        gap: calc(var(--unit) * 3);
        align-items: center;
        margin-bottom: calc(var(--unit) * 4);
    }

    .avatar-frame {
        flex-shrink: 0;
        padding: 5px;
        background: linear-gradient(
            to right,
            var(--accent) 0%,
            var(--accent) 30%,
            transparent 30%,
            transparent 70%,
            var(--accent) 70%,
            var(--accent) 100%
        );
    }

    .avatar {
        display: block;
        width: 75px;
        height: 75px;
    }

    .person-role {
        color: var(--muted);
        font-size: 0.92rem;
    }

    .steps {
        border-top: 1px solid var(--border);
        margin: calc(var(--unit) * 4) 0;
        padding-left: calc(var(--unit) * 5);
    }

    .steps li {
        padding: calc(var(--unit) * 3.5) 0 calc(var(--unit) * 3.5) calc(var(--unit) * 1.5);
        border-bottom: 1px solid var(--border);
    }

    .steps li::marker {
        font-family: ui-monospace, monospace;
        font-weight: 600;
        color: var(--accent-strong);
    }

    .steps h2 {
        font-size: 1.05rem;
        font-weight: 650;
        margin-bottom: calc(var(--unit) * 1);
    }

    .doc {
        border: 1px solid var(--border);
        background: var(--surface);
        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
        margin: calc(var(--unit) * 4) 0;
    }

    .doc details {
        border-bottom: 1px solid var(--border);
        padding: calc(var(--unit) * 2) 0;
    }

    .doc details:last-child {
        border-bottom: none;
    }

    .doc summary {
        font-family: ui-monospace, monospace;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* summary must keep display: list-item — any other display removes
       the disclosure marker entirely. Safari <= 18.3 styles it via the
       legacy pseudo below instead of ::marker. */
    .doc summary::marker {
        color: var(--accent-strong);
    }

    .doc summary::-webkit-details-marker {
        color: var(--accent-strong);
    }

    .doc details p {
        margin-top: calc(var(--unit) * 1.5);
        font-size: 0.92rem;
        color: var(--muted);
    }

    .signs {
        margin: calc(var(--unit) * 3) 0 calc(var(--unit) * 4);
        padding-left: calc(var(--unit) * 4);
    }

    .signs li {
        margin-bottom: calc(var(--unit) * 1.5);
    }

    .signs li::marker {
        color: var(--accent-strong);
    }

    .row h3 a {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: var(--border);
        text-underline-offset: 0.2em;
    }

    .row h3 a:hover {
        color: var(--accent-strong);
    }

    .footer-nav {
        margin-bottom: calc(var(--unit) * 1.5);
    }

    .footer-nav a {
        color: var(--muted);
        text-decoration: none;
    }

    .footer-nav a:hover {
        color: var(--accent-strong);
    }

    .footer-line {
        margin: calc(var(--unit) * 2) 0;
    }

    .powered {
        font-family: var(--font-data);
        font-size: 0.72rem;
        color: var(--muted);
    }

    .pill {
        display: inline-block;
        border: 1px solid var(--border);
        border-radius: 2em;
        padding: 0 calc(var(--unit) * 1.5);
        margin-left: calc(var(--unit) * 0.5);
    }

    .list {
        border-top: 1px solid var(--border);
        margin-top: calc(var(--unit) * 4);
    }

    .row {
        display: grid;
        gap: calc(var(--unit) * 1.5);
        padding: calc(var(--unit) * 3.5) 0;
        border-bottom: 1px solid var(--border);
        align-items: baseline;
    }

    .row h3 {
        font-size: 1.05rem;
        font-weight: 650;
    }

    .row p {
        font-size: 0.92rem;
        color: var(--muted);
    }

    @media (min-width: 45rem) {
        .row {
            grid-template-columns: 1fr 2fr;
            gap: calc(var(--unit) * 3);
        }
    }

    .hud {
        display: flex;
        align-items: stretch;
        row-gap: calc(var(--unit) * 1);
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        gap: calc(var(--unit) * 4);
        padding: calc(var(--unit) * 1.5);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        position: sticky;
        top: 0;
        font-family: var(--font-data);
        font-size: 0.72rem;
        color: var(--muted);
    }

    /* 2.4.11 + owner ruling (2026-07-13): below 78rem the HUD wraps — it goes
       static (cannot obscure focus targets) and compact (screen estate is the
       dearest currency on a phone: tight rows, lean padding). */
    @media (max-width: 78rem) {
        .hud {
            position: static;
            justify-content: flex-start;
            row-gap: calc(var(--unit) * 0.5);
            padding: calc(var(--unit) * 1) calc(var(--unit) * 5);
        }
    }

    /* 2.4.11: every scroll-to target — anchors AND focusables — must clear
       the sticky HUD; below 78rem the HUD wraps and goes static instead. */
    .skip {
        position: absolute;
        inset-inline-start: calc(var(--unit) * 2);
        inset-block-start: calc(var(--unit) * 2);
        z-index: 10;
        padding: calc(var(--unit) * 1) calc(var(--unit) * 2);
        background: var(--surface);
        border: 2px solid var(--accent-strong);
        color: var(--text);
        transform: translateY(-200%);
    }

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

    [id],
    a,
    summary {
        scroll-margin-top: calc(var(--unit) * 8);
    }

    .stat {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: calc(var(--unit) * 0.75) calc(var(--unit) * 1.5);
        min-width: 5.5em;
    }

    .stat-wide {
        min-width: 8.5em;
    }

    .stat-label {
        display: block;
        width: 100%;
        text-align: center;
        letter-spacing: 0.08em;
        border-bottom: 1px solid var(--border);
        padding-bottom: calc(var(--unit) * 0.5);
        margin-bottom: calc(var(--unit) * 0.5);
    }

    .stat b {
        color: var(--text);
        font-weight: 600;
        white-space: nowrap;
    }

    .stat-proven {
        border-color: var(--ok);
    }

    .stat-proven .stat-label {
        border-bottom-color: var(--ok);
    }

    .stat-proven b {
        color: var(--ok-strong);
    }

    .stat-group,
    .hud-note {
        align-self: center;
    }

    .stat-group {
        letter-spacing: 0.08em;
    }
}

@layer utilities {
    .muted {
        color: var(--muted);
    }

    .fine {
        font-size: 0.82rem;
        color: var(--muted);
    }
}