/* ==========================================================================
   AI Code Detector

   Design direction: an editorial "engineering ledger" — paper ground, ruled
   separators, a restrained two-accent palette, mono-forward labelling. It
   deliberately avoids the gradient / glassmorphism / pill-button aesthetic,
   because the detector itself flags over-tidy uniformity as a tell.

   Structure
     1. Fonts            self-hosted, no third-party requests
     2. Tokens           one place for every colour, size and step
     3. Base & utilities
     4. Layout           masthead, tabs, workbench
     5. Panels & editor
     6. Controls
     7. Verdict & findings
     8. Gallery
     9. Heuristics table
    10. Footer
    11. Responsive, motion, print
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Fonts — vendored under assets/fonts (SIL OFL 1.1). Kept local so the
   "no network calls" claim on the masthead is literally true.

   Three faces, each with one job:
     Source Serif 4   titles — the editorial voice
     Inter            interface and prose
     JetBrains Mono   code and numerals ONLY

   That last rule matters. Wide-tracked uppercase monospace applied to every
   label is its own visual cliché; here mono means "this is literally code or
   a figure", so it stays meaningful.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Source Serif 4 web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/source-serif-600-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: 'Source Serif 4 web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/source-serif-600-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;
}

@font-face {
    font-family: 'Inter var';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('assets/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 var';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('assets/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;
}

@font-face {
    font-family: 'JetBrains Mono var';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/jetbrains-mono-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: 'JetBrains Mono var';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/jetbrains-mono-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;
}

/* -------------------------------------------------------------------------
   2. Tokens

   Colours are declared once with light-dark(). The plain value on the line
   above each pair is the fallback for engines without light-dark() support —
   they get the light palette, which is the design's primary mode.
   ------------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* --- surfaces ------------------------------------------------------- */
    --paper:       #f7f4ed;
    --paper:       light-dark(#f7f4ed, #100e0b);
    --surface:     #fffdf8;
    --surface:     light-dark(#fffdf8, #171410);
    --surface-2:   #f1ecdf;
    --surface-2:   light-dark(#f1ecdf, #1e1a15);
    --surface-3:   #e6dfce;
    --surface-3:   light-dark(#e6dfce, #272219);

    /* --- text ----------------------------------------------------------- */
    /* Three tiers, and three is the ceiling: every one of these is used for
       real text, so each has to clear WCAG AA (4.5:1) against every surface
       it can land on — including the tinted hover states. A fourth, fainter
       grey was tried and removed; at 4.5:1 it was visually indistinguishable
       from --ink-3, so it bought a token and no hierarchy. Quiet text is
       differentiated by size, weight and italics instead.
       Verified by scripts/contrast-audit.mjs. */
    --ink:         #17130d;
    --ink:         light-dark(#17130d, #f2ece0);
    --ink-2:       #3d372c;
    --ink-2:       light-dark(#3d372c, #d1c9b9);
    --ink-3:       #6d6557;   /* AA floor: 4.88 light / 5.56 dark */
    --ink-3:       light-dark(#6d6557, #9a9182);

    /* --- rules ---------------------------------------------------------- */
    /* Decorative separators. These are exempt from WCAG 1.4.11 — they carry
       no information and identify no control — so they stay as delicate as
       the ledger look wants. */
    --rule:        #ddd6c6;
    --rule:        light-dark(#ddd6c6, #2c2822);
    --rule-2:      #c6bda8;
    --rule-2:      light-dark(#c6bda8, #3d382f);
    --rule-hard:   #17130d;
    --rule-hard:   light-dark(#17130d, #4b4539);

    /* The boundary of an interactive control is a different job: for a text
       input or a combobox it IS the thing that says "you can act here", so
       WCAG 1.4.11 wants 3:1 against the surface behind it. Kept as its own
       token rather than darkening --rule-2, which would coarsen every
       hairline on the page. Applied to all controls, not just the ones that
       strictly need it, so control borders read as one consistent weight.
       Solved for 3.2:1 rather than exactly 3.0 so rounding to an integer hex
       triplet cannot land it under the bar. Floor: 3.21 light / 3.21 dark. */
    --control-border: #807a6d;
    --control-border: light-dark(#807a6d, #747069);

    /* --- signal colours ------------------------------------------------- */
    --ai:          #9b3a1b;
    --ai:          light-dark(#9b3a1b, #e58a5f);
    --ai-line:     #c15731;
    --ai-line:     light-dark(#c15731, #c96a3d);
    --ai-tint:     #fbeade;
    --ai-tint:     light-dark(#fbeade, #251610);

    --human:       #2b5636;
    --human:       light-dark(#2b5636, #7fbc92);
    --human-line:  #4a7a56;
    --human-line:  light-dark(#4a7a56, #4e8b62);
    --human-tint:  #e3ecdc;
    --human-tint:  light-dark(#e3ecdc, #141f17);

    --warn:        #855400;
    --warn:        light-dark(#855400, #d8ad4a);
    --warn-line:   #b98a1c;
    --warn-line:   light-dark(#b98a1c, #9e7b23);
    --warn-tint:   #f9edcc;
    --warn-tint:   light-dark(#f9edcc, #221c11);

    /* --- code wells ----------------------------------------------------- */
    --code-bg:     #191510;
    --code-bg:     light-dark(#191510, #0b0a08);
    --code-fg:     #ece5d6;
    --code-fg:     light-dark(#ece5d6, #e6dfd0);
    /* The code well is dark in both themes, so this needs no light-dark()
       split — one value clears 4.5:1 against both wells (4.84 worst case). */
    --code-dim:    #8b8375;
    --code-rule:   rgba(236, 229, 214, 0.09);
    --code-hl:     rgba(193, 87, 49, 0.30);
    --code-hl:     light-dark(rgba(193, 87, 49, 0.30), rgba(229, 138, 95, 0.22));

    --focus:       #c15731;
    --focus:       light-dark(#c15731, #e58a5f);

    /* --- type ----------------------------------------------------------- */
    --font-serif:  'Source Serif 4 web', ui-serif, Georgia, 'Times New Roman', serif;
    --font-sans:   'Inter var', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:   'JetBrains Mono var', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --fs-micro:    0.6875rem;   /* 11px — badges, tone tags             */
    --fs-tiny:     0.75rem;     /* 12px — labels, meta, figures         */
    --fs-small:    0.8125rem;   /* 13px — code, evidence, chips         */
    --fs-base:     0.875rem;    /* 14px — interface copy                */
    --fs-body:     0.9375rem;   /* 15px — prose                         */
    --fs-lead:     1.125rem;    /* 18px — section titles                */
    --fs-title:    2.125rem;    /* 34px — page title                    */
    --fs-metric:   2.5rem;      /* 40px — the score                     */

    --lh-tight:    1.15;
    --lh-snug:     1.35;
    --lh-base:     1.55;

    --tracking-label: 0.01em;

    /* --- space ---------------------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.75rem;
    --sp-7: 2.5rem;
    --sp-8: 4rem;

    /* --- misc ----------------------------------------------------------- */
    --radius:      3px;
    --code-fs:     0.8125rem;
    --code-lh:     1.6;
    --code-pad:    0.8rem;
    --gutter-w:    3rem;
    --editor-h:    clamp(300px, 44vh, 520px);
    --page-max:    1320px;
    --tempo:       0.14s;
}

:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark']  { color-scheme: dark; }

/* -------------------------------------------------------------------------
   3. Base & utilities
   ------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv05' 1, 'ss03' 1;
}

h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.015em; }

p { margin: 0; }

a {
    color: var(--ai);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover { color: var(--ink); }

::selection { background: var(--ai-tint); color: var(--ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.hidden { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-4);
    z-index: 10;
    transform: translateY(-250%);
    padding: var(--sp-2) var(--sp-3);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
}

.skip-link:focus-visible { transform: translateY(0); color: var(--paper); }

/* The workhorse label: sans, sentence case, quiet. No uppercase, no wide
   tracking, no monospace — those three together are the stamp that made this
   read as machine-generated. */
.eyebrow,
.panel-title,
.filters-label,
.thresholds-label,
.findings-heading,
.annotations-heading,
.stat dt {
    font-family: var(--font-sans);
    font-size: var(--fs-tiny);
    font-weight: 550;
    letter-spacing: var(--tracking-label);
    text-transform: none;
    color: var(--ink-3);
}

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */

.page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--sp-7) var(--sp-5) var(--sp-8);
}

/* --- masthead ---------------------------------------------------------- */

.masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-6);
    align-items: end;
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--rule-hard);
}

.masthead-main { min-width: 0; }

.masthead .eyebrow { display: block; margin-bottom: var(--sp-2); }

.masthead h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fs-title);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: -0.012em;
}

.lede {
    margin-top: var(--sp-3);
    max-width: 64ch;
    color: var(--ink-2);
}

.masthead-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-4);
}

.masthead-tools { display: flex; gap: var(--sp-2); }

/* --- stat strip -------------------------------------------------------- */

.stats {
    display: flex;
    margin: 0;
    border: 1px solid var(--rule);
    background: var(--surface);
}

.stat {
    padding: var(--sp-2) var(--sp-4);
    text-align: center;
    border-left: 1px solid var(--rule);
}

.stat:first-child { border-left: 0; }

.stat dt { display: block; font-size: var(--fs-micro); }

.stat dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-tight);
    color: var(--ink);
}

/* --- tabs -------------------------------------------------------------- */

.tabs {
    margin: var(--sp-5) 0 var(--sp-5);
    border-bottom: 1px solid var(--rule);
}

.tablist { display: flex; gap: var(--sp-1); }

.tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    transition: color var(--tempo), border-color var(--tempo);
}

.tab:hover { color: var(--ink); }

.tab[aria-selected='true'] {
    color: var(--ink);
    font-weight: 650;
    border-bottom-color: var(--ai-line);
}

.tab-count {
    display: inline-block;
    margin-left: var(--sp-1);
    padding: 0 0.3em;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    background: var(--surface-2);
    border-radius: 2px;
}

.tab[aria-selected='true'] .tab-count { color: var(--paper); background: var(--ink); }

.tab-panel:focus-visible { outline-offset: 6px; }

/* --- section intros ---------------------------------------------------- */

.section-intro {
    max-width: 76ch;
    margin-bottom: var(--sp-5);
}

.section-title {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-serif);
    font-size: var(--fs-lead);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.section-intro p { color: var(--ink-2); font-size: var(--fs-base); }

/* --- workbench --------------------------------------------------------- */

.workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-5);
}

/* A long unbroken code line must never widen the column it sits in. */
.workbench-input,
.workbench-result { min-width: 0; }

@media (min-width: 1080px) {
    /* Room to actually read the code: the evidence column is the long one, so
       the editor gets as much height as the viewport can spare. */
    :root { --editor-h: clamp(360px, 62vh, 680px); }

    .workbench { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }

    /* The evidence column is usually far taller than the editor. Pinning the
       editor keeps the code, the Analyze button and the highlight target in
       view while you read down the findings. */
    .workbench-input {
        position: sticky;
        top: var(--sp-4);
    }
}

/* -------------------------------------------------------------------------
   5. Panels & editor
   ------------------------------------------------------------------------- */

.panel {
    display: block;
    background: var(--surface);
    border: 1px solid var(--rule);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 2.75rem;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--rule);
}

.panel-title { margin: 0; }

/* --- editor ------------------------------------------------------------ */

.editor {
    display: grid;
    grid-template-columns: var(--gutter-w) minmax(0, 1fr);
    height: var(--editor-h);
    overflow: hidden;
    background: var(--code-bg);
    color: var(--code-fg);
    font-family: var(--font-mono);
    font-size: var(--code-fs);
    line-height: var(--code-lh);
}

.editor-gutter {
    padding: var(--code-pad) var(--sp-2) var(--code-pad) 0;
    overflow: hidden;
    color: var(--code-dim);
    text-align: right;
    white-space: pre;
    background: rgba(255, 255, 255, 0.022);
    border-right: 1px solid var(--code-rule);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.editor-stage { position: relative; overflow: hidden; }

.editor-input,
.editor-overlay {
    padding: var(--code-pad) var(--sp-4) var(--code-pad) var(--sp-3);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    tab-size: 4;
}

.editor-input {
    appearance: none;
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    outline-offset: -2px;
    resize: none;
    overflow: auto;
    color: var(--code-fg);
    caret-color: var(--ai-line);
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--code-dim) transparent;
}

.editor-input::placeholder { color: var(--code-dim); }

.editor-input::selection { background: rgba(193, 87, 49, 0.4); }

.editor-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    color: transparent;
    pointer-events: none;
}

.editor-overlay .ovl-line {
    display: block;
    min-height: calc(var(--code-fs) * var(--code-lh));
    margin: 0 calc(-1 * var(--sp-4)) 0 calc(-1 * var(--sp-3));
    padding: 0 var(--sp-4) 0 var(--sp-3);
}

.editor-overlay .ovl-line.is-hl {
    background: var(--code-hl);
    box-shadow: inset 2px 0 0 var(--ai-line);
}

/* --- editor toolbar ---------------------------------------------------- */

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3);
    border-top: 1px solid var(--rule);
}

.toolbar-actions { display: flex; gap: var(--sp-2); }

.toolbar-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-tiny);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* A drawn rule, not a middot glyph. A separator character in a rule-weight
   colour is text as far as WCAG 1.4.3 is concerned, and it failed at 1.6:1;
   as an actual 1px border it is decoration and exempt. */
.toolbar-sep {
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background: var(--rule-2);
}

kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.1em 0.35em;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-align: center;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--rule-2);
    border-bottom-width: 2px;
    border-radius: var(--radius);
}

.kbd-hint { display: inline-flex; align-items: center; gap: 0.25em; }

/* -------------------------------------------------------------------------
   6. Controls
   ------------------------------------------------------------------------- */

.btn {
    appearance: none;
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--tempo), border-color var(--tempo), color var(--tempo);
}

.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }

.btn-primary {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}

.btn-primary:hover {
    color: var(--paper);
    background: var(--ai);
    border-color: var(--ai);
}

.btn-quiet {
    padding: 0.2rem 0.45rem;
    font-size: var(--fs-tiny);
    font-weight: 500;
    color: var(--ink-3);
    background: transparent;
    border-color: transparent;
}

.btn-quiet:hover { color: var(--ink); background: var(--surface-2); border-color: var(--rule); }

/* --- icon buttons (theme toggle, source link) -------------------------- */

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35rem 0.6rem;
    font-family: var(--font-sans);
    font-size: var(--fs-tiny);
    font-weight: 550;
    color: var(--ink-2);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--tempo), border-color var(--tempo), color var(--tempo);
}

.icon-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--rule-2); }

.icon-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.icon-btn svg.icon-filled { fill: currentColor; stroke: none; }

/* Below ~400px the masthead tools drop to icons only. */
@media (max-width: 400px) {
    .icon-btn-label { display: none; }
    .icon-btn { padding: 0.4rem 0.5rem; }
}

.icon-sun { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .icon-sun  { display: block; }
    :root:not([data-theme='light']) .icon-moon { display: none; }
}

:root[data-theme='dark'] .icon-sun  { display: block; }
:root[data-theme='dark'] .icon-moon { display: none; }

/* --- combobox ----------------------------------------------------------
   A native <select> renders its open list with the OS chrome — a blue
   highlight bar that ignores the whole palette. This is the ARIA
   combobox/listbox pattern instead, so the open state is ours.
   ---------------------------------------------------------------------- */

.combo {
    position: relative;
    z-index: 30;
}

.combo-button {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: 0.3rem 0.5rem 0.3rem 0.6rem;
    font: inherit;
    font-size: var(--fs-small);
    color: var(--ink-2);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--tempo), color var(--tempo);
}

.combo-button:hover { color: var(--ink); border-color: var(--ink-3); }

.combo-button[aria-expanded='true'] { color: var(--ink); border-color: var(--ink-3); }

.combo-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combo-caret {
    flex: none;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
    transition: transform var(--tempo);
}

.combo-button[aria-expanded='true'] .combo-caret { transform: rotate(180deg); }

.combo-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1;
    min-width: 100%;
    max-width: min(30rem, calc(100vw - 2 * var(--sp-5)));
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--sp-1);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 0 var(--rule) inset, 0 10px 24px -12px rgba(23, 19, 13, 0.35);
    scrollbar-width: thin;
}

.combo-list[hidden] { display: none; }

.combo-option {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 0.3rem 0.5rem;
    font-size: var(--fs-small);
    color: var(--ink-2);
    border-radius: 2px;
    border-left: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.combo-option.is-active {
    color: var(--ink);
    background: var(--surface-2);
    border-left-color: var(--ai-line);
}

.combo-option[aria-selected='true'] { font-weight: 600; color: var(--ink); }

.combo-option-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-option-meta {
    flex: none;
    font-size: var(--fs-micro);
    color: var(--ink-3);
}

.combo-option.is-active .combo-option-meta { color: var(--ink-3); }

/* --- thresholds -------------------------------------------------------- */

.thresholds {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.thresholds label {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--fs-tiny);
    color: var(--ink-3);
}

.thresholds input[type='number'] {
    width: 3.6rem;
    padding: 0.2rem 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
}

/* --- chips ------------------------------------------------------------- */

.chip {
    padding: 0.2rem 0.6rem;
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--tempo), color var(--tempo), border-color var(--tempo);
}

.chip:hover { background: var(--surface-2); border-color: var(--ink-3); }

.chip.is-active {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}

/* -------------------------------------------------------------------------
   7. Verdict & findings
   ------------------------------------------------------------------------- */

/* At rest the two columns should read as a matched pair, so the verdict panel
   holds the editor's height and centres its placeholder inside it. */
.result-block {
    display: flex;
    flex-direction: column;
    min-height: var(--editor-h);
}

.empty-state {
    max-width: 54ch;
    margin: auto;
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
    color: var(--ink-3);
    font-size: var(--fs-base);
}

.empty-rule {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-tiny);
    font-style: italic;
    color: var(--ink-3);
}

.empty-rule::before,
.empty-rule::after {
    content: '';
    display: inline-block;
    width: 2rem;
    margin: 0 0.7em;
    border-top: 1px solid var(--rule);
    vertical-align: 0.3em;
}

/* --- verdict ----------------------------------------------------------- */

.verdict {
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--rule);
}

.verdict-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.verdict-score {
    font-family: var(--font-mono);
    font-size: var(--fs-metric);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.verdict-score .unit { font-size: 0.45em; font-weight: 500; color: var(--ink-3); }

.tag {
    display: inline-block;
    padding: 0.1em 0.45em;
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.005em;
    border: 1px solid currentColor;
    border-radius: 2px;
    white-space: nowrap;
}

/* Applied as tone-${verdict.tone} / tone-${signal tone} from script.js. */
.tone-ai    { color: var(--ai);    background: var(--ai-tint); }
.tone-mixed { color: var(--warn);  background: var(--warn-tint); }
.tone-human { color: var(--human); background: var(--human-tint); }

/* Figures set in prose take the sans with tabular numerals — monospace here
   would only add texture, not meaning. */
.verdict-note {
    margin-top: var(--sp-2);
    font-size: var(--fs-tiny);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* --- meter ------------------------------------------------------------- */

.meter { margin-top: var(--sp-4); }

.meter-track {
    position: relative;
    height: 7px;
    background: var(--surface-3);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
}

.meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: currentColor;
    transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.meter-fill.tone-ai    { color: var(--ai-line);    background: var(--ai-line); }
.meter-fill.tone-mixed { color: var(--warn-line);  background: var(--warn-line); }
.meter-fill.tone-human { color: var(--human-line); background: var(--human-line); }

.meter-tick {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: var(--ink);
    opacity: 0.4;
}

/* Threshold labels sit at their true percentage, not spread evenly. */
.meter-scale {
    position: relative;
    height: 1.1rem;
    margin-top: var(--sp-1);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.meter-mark {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.meter-mark--start { left: 0; transform: none; }
.meter-mark--end   { right: 0; left: auto; transform: none; }
.meter-mark--tick  { color: var(--ink-3); }

/* --- findings ---------------------------------------------------------- */

.findings { padding: 0 var(--sp-4) var(--sp-4); }

.findings-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-3);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--rule);
}

.findings-heading .count {
    font-size: var(--fs-tiny);
    font-weight: 550;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.finding {
    margin-bottom: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-2);
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: border-color var(--tempo);
}

.finding[data-tone='ai']    { border-left-color: var(--ai-line); }
.finding[data-tone='human'] { border-left-color: var(--human-line); }

.finding.is-lit { border-color: var(--rule-2); background: var(--surface-2); }

.finding > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-base);
}

.finding > summary::-webkit-details-marker { display: none; }
.finding > summary::marker { content: ''; }

.finding-label { flex: 1 1 auto; min-width: 0; font-weight: 600; }

.finding-weight {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.finding-body { padding: 0 var(--sp-3) var(--sp-3); }

.finding-reason {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-base);
    color: var(--ink-2);
}

/* --- evidence ---------------------------------------------------------- */

.evidence {
    margin: 0;
    padding: var(--sp-2) 0 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.evidence-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    width: 100%;
    padding: 0.15rem var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-2);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background var(--tempo), color var(--tempo);
}

.evidence-row:hover { color: var(--ink); background: var(--ai-tint); }
.evidence-row[data-line='0'] { cursor: default; }
.evidence-row[data-line='0']:hover { background: none; color: var(--ink-2); }

.evidence-row .line-num {
    flex: none;
    min-width: 2.6em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.evidence-row .snippet {
    min-width: 0;
    overflow-wrap: anywhere;
}

.evidence-more { margin-top: var(--sp-1); }

/* --- unmatched drawer -------------------------------------------------- */

.unmatched {
    margin-top: var(--sp-4);
    border-top: 1px solid var(--rule);
}

.unmatched > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) 0 var(--sp-2);
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-tiny);
    font-weight: 550;
    color: var(--ink-3);
}

.unmatched > summary::-webkit-details-marker { display: none; }
.unmatched > summary::marker { content: ''; }
.unmatched > summary:hover { color: var(--ink); }

.unmatched > summary .caret {
    transition: transform var(--tempo);
    font-size: 0.9em;
}

.unmatched[open] > summary .caret { transform: rotate(90deg); }

.unmatched-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding: 0;
    list-style: none;
}

.unmatched-list li {
    padding: 0.1rem 0.45rem;
    font-size: var(--fs-small);
    color: var(--ink-3);
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

/* -------------------------------------------------------------------------
   8. Gallery
   ------------------------------------------------------------------------- */

.filters {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--rule);
}

.filters-label { margin-right: var(--sp-1); }

.gallery-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-4);
}

@media (min-width: 1000px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gallery-empty {
    padding: var(--sp-6);
    text-align: center;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px solid var(--rule);
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--rule);
}

.card-head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.card-badges {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.badge {
    padding: 0.1em 0.4em;
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.005em;
    white-space: nowrap;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

.badge-lang     { color: var(--ink-2); background: var(--surface-3); border-color: var(--rule-2); }
.badge-verbatim { color: var(--ai);    background: var(--ai-tint);   border-color: var(--ai-line); }

/* Two lines' worth of room so the code wells line up across a grid row even
   when one blurb is shorter than its neighbour. */
.card-blurb {
    min-height: 4.25rem;
    padding: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule);
}

/* --- code preview ------------------------------------------------------ */

.code-well {
    position: relative;
    margin: 0;
    background: var(--code-bg);
    color: var(--code-fg);
}

.code-well pre {
    margin: 0;
    padding: var(--code-pad) 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: var(--code-lh);
    scrollbar-width: thin;
    scrollbar-color: var(--code-dim) transparent;
}

.code-well.is-clipped pre {
    max-height: calc(16 * var(--fs-small) * var(--code-lh) + 2 * var(--code-pad));
    overflow-y: hidden;
}

.code-well.is-clipped::after {
    content: '';
    position: absolute;
    inset: auto 0 2.1rem 0;
    height: 3rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--code-bg));
}

.code-line {
    display: block;
    padding: 0 var(--sp-3);
    white-space: pre;
    transition: background var(--tempo);
}

.code-line.is-lit {
    background: var(--code-hl);
    box-shadow: inset 2px 0 0 var(--ai-line);
}

.code-line-num {
    display: inline-block;
    width: 2.4em;
    margin-right: var(--sp-3);
    text-align: right;
    color: var(--code-dim);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.code-expand {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--fs-tiny);
    font-weight: 550;
    color: var(--code-dim);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--code-rule);
    cursor: pointer;
}

.code-expand:hover { color: var(--code-fg); background: rgba(255, 255, 255, 0.035); }

/* --- annotations ------------------------------------------------------- */

.annotations-heading {
    margin: 0;
    padding: var(--sp-3) var(--sp-3) var(--sp-1);
    border-top: 1px solid var(--rule);
}

.annotations {
    margin: 0;
    padding: 0 var(--sp-2) var(--sp-3);
    list-style: none;
}

.annotation {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 0 var(--sp-3);
    padding: var(--sp-2);
    border-left: 2px solid transparent;
    border-radius: 0 2px 2px 0;
    font-size: var(--fs-base);
    transition: background var(--tempo), border-color var(--tempo);
}

.annotation:hover { background: var(--ai-tint); border-left-color: var(--ai-line); }

.annotation-range {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ai);
    font-variant-numeric: tabular-nums;
}

/* A heuristic id, so monospace earns its place here. */
.annotation-signal {
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--ink-3);
}

/* Marks an annotation whose tell the detector doesn't score. Sans, not mono:
   it's a label about the signal, not part of the signal's name. The range
   number loses its terracotta too, since nothing lit up in the analyzer. */
.annotation-unscored {
    margin-left: var(--sp-2);
    padding: 0 0.3em;
    border: 1px solid var(--rule-2);
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    white-space: nowrap;
}

.annotation.is-unscored .annotation-range { color: var(--ink-3); }

.annotation-why { grid-column: 2; color: var(--ink-2); }

.card-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding: var(--sp-3);
    border-top: 1px solid var(--rule);
}

/* -------------------------------------------------------------------------
   9. Heuristics table
   ------------------------------------------------------------------------- */

.docs-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--rule);
}

.doc-row {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--rule);
}

.doc-row:last-child { border-bottom: 0; }

@media (min-width: 760px) {
    .docs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-row:nth-child(odd) { border-right: 1px solid var(--rule); }
    .doc-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

.doc-row header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-1);
}

.doc-row h3 {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 650;
}

.doc-row .doc-weight {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

.doc-desc {
    font-size: var(--fs-base);
    color: var(--ink-2);
}

.doc-desc .tag { margin-right: 0.5em; vertical-align: 0.1em; }

.doc-id {
    display: inline-block;
    margin-top: var(--sp-2);
    padding: 0.05em 0.4em;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--ink-3);
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

/* -------------------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------------------- */

.page-foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-7);
    padding-top: var(--sp-4);
    font-size: var(--fs-tiny);
    color: var(--ink-3);
    border-top: 1px solid var(--rule);
}

/* -------------------------------------------------------------------------
   11. Responsive, motion, print
   ------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .masthead {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-4);
    }

    .masthead-side { align-items: stretch; }
    .masthead-tools { justify-content: flex-start; }
    .stats { width: 100%; }
    .stat { flex: 1; }
}

@media (max-width: 640px) {
    :root {
        --fs-title:  1.6rem;
        --fs-metric: 2rem;
        --editor-h:  clamp(260px, 50vh, 420px);
        --gutter-w:  2.4rem;
    }

    .page { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
    .tablist { overflow-x: auto; scrollbar-width: none; }
    .tab { white-space: nowrap; }
    .panel-head { flex-wrap: wrap; }
    .combo { flex: 1 1 12rem; }
    .combo-list { left: 0; right: 0; max-width: none; }
    .editor-toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-actions .btn { flex: 1; }
    .toolbar-meta { justify-content: space-between; }
    .toolbar-sep { display: none; }
    .card-blurb { min-height: 0; }
    .annotation { grid-template-columns: minmax(0, 1fr); }
    .annotation-signal, .annotation-why { grid-column: 1; }
    .page-foot { flex-direction: column; }
}

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

@media print {
    :root { color-scheme: light; }

    .tabs, .masthead-tools, .editor-toolbar, .filters, .skip-link,
    .card-foot, .code-expand { display: none !important; }

    .page { max-width: none; padding: 0; }
    .panel, .card, .docs-list { border-color: #999; break-inside: avoid; }
    .tab-panel[hidden] { display: none !important; }
    .workbench { display: block; }
    .workbench-input { position: static; margin-bottom: 1rem; }
    .finding { break-inside: avoid; }
    .unmatched { display: none; }
}