/* PDF Accessibility. Design notes: docs/DESIGN.md
   A proofing desk: cool paper, ink, a blue pencil for actions and a
   highlighter that marks the figure on its page. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f5f6f9;
  --surface: #ffffff;
  --sunken: #ebedf2;
  --ink: #151b2c;
  --ink-2: #47506a;
  --ink-3: #636c85;
  --line: #d5d9e3;
  --line-strong: #9aa2b6;
  --pencil: #2456d6;
  --pencil-ink: #ffffff;
  --pencil-soft: #e6edfd;
  --marker: #ffd84a;
  --ok: #17663f;      --ok-soft: #e2f3ea;
  --warn: #8a4a00;    --warn-soft: #fdf0d9;
  --bad: #a3271b;     --bad-soft: #fbe6e3;
  --quiet: #47506a;   --quiet-soft: #e8eaf0;
  --shadow: 0 1px 2px rgba(21, 27, 44, .06), 0 8px 24px -12px rgba(21, 27, 44, .22);
  --r-s: 4px; --r-m: 8px; --r-l: 14px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --t-xs: .8125rem; --t-s: .875rem; --t-m: 1rem; --t-l: 1.1875rem; --t-xl: 1.5rem; --t-2xl: 2.125rem; --t-3xl: 2.75rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark: 1; } }
:root[data-theme="dark"] { --dark: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f131c; --surface: #171c28; --sunken: #0b0e15; --ink: #e9ecf4; --ink-2: #b4bbcc; --ink-3: #98a0b5;
    --line: #2b3243; --line-strong: #56607a; --pencil: #8fb0ff; --pencil-ink: #0b1226; --pencil-soft: #1c2947;
    --marker: #ffd84a; --ok: #6fd3a0; --ok-soft: #14301f; --warn: #f2bd6b; --warn-soft: #33260f;
    --bad: #ff9d90; --bad-soft: #3a1815; --quiet: #b4bbcc; --quiet-soft: #232a3a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f131c; --surface: #171c28; --sunken: #0b0e15; --ink: #e9ecf4; --ink-2: #b4bbcc; --ink-3: #98a0b5;
  --line: #2b3243; --line-strong: #56607a; --pencil: #8fb0ff; --pencil-ink: #0b1226; --pencil-soft: #1c2947;
  --marker: #ffd84a; --ok: #6fd3a0; --ok-soft: #14301f; --warn: #f2bd6b; --warn-soft: #33260f;
  --bad: #ff9d90; --bad-soft: #3a1815; --quiet: #b4bbcc; --quiet-soft: #232a3a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 400 var(--t-m)/1.55 var(--sans); font-feature-settings: "cv11", "ss03";
  display: flex; flex-direction: column;
}
main { flex: 1; min-height: 0; }
main:focus, main:focus-visible { outline: none; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0; font-weight: 650; }
p { margin: 0 0 var(--s4); }
a { color: var(--pencil); text-underline-offset: .18em; }
code { font: .9em var(--mono); background: var(--sunken); padding: .1em .35em; border-radius: var(--r-s); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--pencil); outline-offset: 2px; border-radius: var(--r-s); }
.skip { position: absolute; left: var(--s4); top: -4rem; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s4); border-radius: var(--r-m); z-index: 50; }
.skip:focus { top: var(--s2); }

/* ---------- top bar */
.topbar { display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s5); height: 3.5rem; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand-mark { width: 1.35rem; height: 1.35rem; border-radius: 5px; background: var(--pencil); position: relative; }
.brand-mark::before { content: ""; position: absolute; inset: 4px 4px 9px; border: 1.6px solid var(--pencil-ink); border-radius: 1.5px; }
.brand-mark::after { content: ""; position: absolute; left: 4px; bottom: 4px; width: 9px; height: 2.4px; border-radius: 2px; background: var(--marker); }
.crumb { color: var(--ink-2); font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding-left: var(--s4); border-left: 1px solid var(--line); }
.topnav { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex: none; }
.topnav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-s); padding: var(--s2) var(--s3); border-radius: var(--r-m); }
.topnav a:hover, .topnav a[aria-current] { color: var(--ink); background: var(--sunken); }

/* ---------- buttons, fields */
.btn {
  font: 550 var(--t-s)/1 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  padding: .6rem .9rem; border-radius: var(--r-m); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; white-space: nowrap; transition: background .12s var(--ease), border-color .12s var(--ease), transform .08s var(--ease);
  min-height: 2.4rem;
}
.btn:hover { background: var(--sunken); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--pencil); color: var(--pencil-ink); border-color: var(--pencil); }
.btn.primary:hover { filter: brightness(1.08); background: var(--pencil); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--sunken); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.big { font-size: var(--t-m); padding: .9rem 1.3rem; min-height: 3rem; width: 100%; justify-content: center; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }
kbd { font: 500 .75rem/1 var(--mono); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: .15rem .35rem; color: var(--ink-2); background: var(--surface); }
.btn.primary kbd { color: inherit; background: transparent; border-color: currentColor; opacity: .8; }

.field { margin-bottom: var(--s4); }
.field label, .label { display: block; font-weight: 600; font-size: var(--t-s); margin-bottom: var(--s1); }
input[type="text"], input[type="password"], input[type="search"], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-m); padding: .6rem .7rem;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--pencil); }
.help, .fine { color: var(--ink-3); font-size: var(--t-xs); margin: var(--s1) 0 0; }
.field-error { color: var(--bad); font-size: var(--t-s); font-weight: 550; margin: var(--s2) 0; }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-s); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--pencil); flex: none; }

.notice { border-radius: var(--r-m); padding: var(--s3) var(--s4); font-size: var(--t-s); margin-bottom: var(--s4); border-left: 4px solid; }
.notice ul { margin: var(--s1) 0 0; padding-left: 1.1rem; }
.notice.info { background: var(--pencil-soft); border-color: var(--pencil); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn); }
.notice.error { background: var(--bad-soft); border-color: var(--bad); }

/* ---------- upload page */
.upload-page { max-width: 68rem; margin: 0 auto; padding: var(--s8) var(--s5) var(--s7); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.upload-intro h1 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; max-width: 16ch; }
.lede { font-size: var(--t-l); color: var(--ink-2); margin: var(--s5) 0 var(--s6); max-width: 46ch; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 var(--s5); max-width: 48ch; }
.steps li { counter-increment: s; position: relative; padding: var(--s3) 0 var(--s3) 2.6rem; border-top: 1px solid var(--line); color: var(--ink-2); }
.steps li strong { color: var(--ink); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: var(--s3); width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font: 650 var(--t-s)/1 var(--sans); color: var(--ink); }
.upload-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s5); box-shadow: var(--shadow); }
.drop { border: 2px dashed var(--line-strong); border-radius: var(--r-m); background: var(--paper); transition: border-color .15s var(--ease), background .15s var(--ease); margin-bottom: var(--s4); }
.drop:focus-within { border-color: var(--pencil); outline: 3px solid var(--pencil); outline-offset: 2px; }
.drop.over { border-color: var(--pencil); background: var(--pencil-soft); border-style: solid; }
.drop-label { display: block; text-align: center; padding: var(--s7) var(--s4); cursor: pointer; }
.drop-title { display: block; font-size: var(--t-xl); font-weight: 650; letter-spacing: -.02em; }
.drop-sub { display: block; color: var(--ink-2); font-size: var(--t-s); margin-top: var(--s2); }
.linklike { color: var(--pencil); text-decoration: underline; text-underline-offset: .18em; }
.drop.has-file .drop-label { display: none; }
.file-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.file-list .file-chosen { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.file-list .file-chosen:last-child { border-bottom: 0; }
.drop.has-file .file-list { border-top: 0; }
/* batch page */
.batch-list { list-style: none; margin: var(--s5) 0; padding: 0; }
.batch-item { display: flex; gap: var(--s3); align-items: center; padding: var(--s4) 0; border-top: 1px solid var(--line); }
.batch-item:last-child { border-bottom: 1px solid var(--line); }
.batch-item .dot { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.batch-item.busy .dot { border-color: var(--pencil); background: var(--pencil); animation: pulse 1.4s ease-in-out infinite; }
.batch-item.review .dot { border-color: var(--warn); background: var(--warn); }
.batch-item.done .dot { border-color: var(--ok); background: var(--ok); }
.batch-item.failed .dot { border-color: var(--bad); background: var(--bad); }
.batch-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.batch-name { font-weight: 600; overflow-wrap: anywhere; }
.batch-state { font-size: var(--t-s); color: var(--ink-2); }
.batch-item.failed .batch-state { color: var(--bad); }
.batch-actions { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 40rem) { .batch-item { flex-wrap: wrap; } .batch-actions { width: 100%; justify-content: flex-start; padding-left: calc(.7rem + var(--s3)); } }
.file-chosen { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4); }
.file-name { font-weight: 600; word-break: break-word; }
.file-size { color: var(--ink-3); font: var(--t-s) var(--mono); margin-left: var(--s3); }
.modes { border: 0; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.modes legend { font-weight: 600; font-size: var(--t-s); margin-bottom: var(--s2); padding: 0; }
.mode-option { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; font-size: var(--t-s); }
.mode-option:has(input:checked) { border-color: var(--pencil); background: var(--pencil-soft); }
.mode-option input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--pencil); flex: none; }
.mode-option strong { display: block; }
.mode-option .help { display: block; margin: var(--s1) 0 0; }
.skip-review { margin-bottom: var(--s5); }
.skip-review label { font-weight: 600; cursor: pointer; }
.skip-review .help { margin: var(--s1) 0 0; }
.options { margin-bottom: var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.options summary { cursor: pointer; font-weight: 600; font-size: var(--t-s); padding: var(--s3) 0; }
.options[open] { padding-bottom: var(--s4); }
.bar { height: 6px; background: var(--sunken); border-radius: 99px; overflow: hidden; margin-top: var(--s3); }
.bar-fill { height: 100%; width: 0; background: var(--pencil); border-radius: 99px; transition: width .25s var(--ease); }

.narrow { max-width: 30rem; margin: var(--s8) auto; padding: 0 var(--s5); }
.narrow h1 { font-size: var(--t-2xl); margin-bottom: var(--s4); }
.prose { max-width: 42rem; margin: var(--s7) auto var(--s8); padding: 0 var(--s5); }
.prose h1 { font-size: var(--t-3xl); letter-spacing: -.03em; margin-bottom: var(--s5); }
.prose h2 { font-size: var(--t-xl); margin: var(--s7) 0 var(--s3); }
.prose li { margin-bottom: var(--s2); }

/* ---------- accounts */
.account .sub { color: var(--ink-2); margin-bottom: var(--s5); }
.account .login .btn.primary { width: 100%; justify-content: center; }
.btn.google { width: 100%; justify-content: center; gap: var(--s3); background: var(--surface, var(--paper)); border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.btn.google:hover { background: var(--sunken); }
.g-mark { font-weight: 800; font-size: 1.1em; color: var(--pencil); }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); font-size: var(--t-s); margin: var(--s5) 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.switch { margin-top: var(--s5); font-size: var(--t-s); color: var(--ink-2); }
.who { font-size: var(--t-s); color: var(--ink-2); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-note a { font-weight: 600; }
.history-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.history-head h1 { margin: 0; }
.history-list { list-style: none; margin: var(--s4) 0; padding: 0; }
.history-item { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-top: 1px solid var(--line); }
.history-item:last-child { border-bottom: 1px solid var(--line); }
.history-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.history-name { font-weight: 600; overflow-wrap: anywhere; }
.history-meta { font-size: var(--t-s); color: var(--ink-2); }
.history-status { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.history-item.s-done .history-status { color: var(--ok); }
.history-item.s-awaiting_review .history-status { color: var(--warn); }
.history-item.s-failed .history-status { color: var(--bad); }
.history-actions { display: flex; gap: var(--s2); align-items: center; }
.history .empty { padding: var(--s6) 0; color: var(--ink-2); }
@media (max-width: 40rem) {
  .history-item { flex-wrap: wrap; }
  .history-actions { width: 100%; }
  .who { display: none; }
}

/* ---------- admin console */
.admin { max-width: 76rem; margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
.admin h1 { font-size: var(--t-2xl); letter-spacing: -.025em; margin: 0 0 var(--s5); }
.admin h2 { font-size: var(--t-l); margin: 0 0 var(--s3); }
.admin .sub { color: var(--ink-2); margin: var(--s2) 0 var(--s4); }
.admin-nav { display: flex; gap: var(--s1); flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.admin-nav a { padding: var(--s2) var(--s3); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--t-s); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.admin-nav a:hover { color: var(--ink); }
.admin-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--pencil); }
.admin-section { margin-bottom: var(--s7); }
.admin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s6); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s3); margin: 0; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3) var(--s4); }
.tile dt { font-size: var(--t-s); color: var(--ink-2); margin-bottom: var(--s1); }
.tile dd { margin: 0; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile dd .unit { display: block; font-size: var(--t-s); font-weight: 500; color: var(--ink-2); }
.tile dd.ok { color: var(--ok); font-size: var(--t-s); } .tile dd.warn { color: var(--warn); font-size: var(--t-s); } .tile dd.bad { color: var(--bad); font-size: var(--t-s); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
table.data th, table.data td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--sunken); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data tbody th { font-weight: 600; overflow-wrap: anywhere; min-width: 10rem; }
table.data .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td.bad { color: var(--bad); font-weight: 600; }
.muted { color: var(--ink-2); font-weight: 400; } .small { font-size: .85em; }
.err { color: var(--bad); font-weight: 400; }
.tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; background: var(--pencil-soft); color: var(--ink); margin-right: var(--s1); vertical-align: middle; }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.plain-list { list-style: none; margin: 0; padding: 0; font-size: var(--t-s); }
.plain-list li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.admin .empty { color: var(--ink-2); font-size: var(--t-s); text-align: left; padding: 0; margin: 0; }
.admin-search { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s2); }
.admin-search label:not(.sr-only) { font-weight: 600; font-size: var(--t-s); }
.admin-search input[type=search] { flex: 1; min-width: 14rem; max-width: 28rem; }
.admin-search select { width: auto; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s3) var(--s5); margin: 0 0 var(--s6); }
.facts dt { font-size: var(--t-s); color: var(--ink-2); } .facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.admin-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.filters a { font-size: var(--t-s); padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); text-decoration: none; }
.filters a[aria-current] { background: var(--pencil-soft); border-color: var(--pencil); color: var(--ink); font-weight: 600; }
.btn.small { padding: var(--s1) var(--s2); font-size: var(--t-s); }

/* ---------- processing */
.stage { max-width: 44rem; margin: 0 auto; padding: var(--s8) var(--s5); }
.stage h1 { font-size: var(--t-2xl); letter-spacing: -.025em; margin-bottom: var(--s2); }
.stage .sub { color: var(--ink-2); margin-bottom: var(--s6); }
.stepper { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.stepper li { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--ink-3); }
.stepper li:last-child { border-bottom: 1px solid var(--line); }
.stepper .dot { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; transform: translateY(1px); }
.stepper li.done { color: var(--ink-2); }
.stepper li.done .dot { background: var(--ok); border-color: var(--ok); }
.stepper li.now { color: var(--ink); font-weight: 600; }
.stepper li.now .dot { border-color: var(--pencil); background: var(--pencil); animation: pulse 1.4s ease-in-out infinite; }
.stepper .count { margin-left: auto; font: var(--t-s) var(--mono); color: var(--ink-2); font-weight: 400; }
.stepper li { align-items: center; }
.stepper .step-text { display: flex; flex-direction: column; min-width: 0; }
.stepper .step-sum { font-size: var(--t-s); font-weight: 400; color: var(--ink-3); }
.stepper .step-more { margin-left: auto; padding: .25rem .6rem; min-height: 0; font-size: var(--t-s); font-weight: 400; }
.stepper .count + .step-more { margin-left: 0; }
.stepper li.skipped .dot { border-style: dashed; }
.stepper li.failed { color: var(--bad); }
.stepper li.failed .dot { background: var(--bad); border-color: var(--bad); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pencil) 22%, transparent); } }
.trickle { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--s2); }
.trickle .tile { aspect-ratio: 4/3; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; display: grid; place-items: center; }
.trickle img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.trickle .tile.wait { background: linear-gradient(100deg, var(--sunken) 40%, var(--surface) 50%, var(--sunken) 60%) 0 0/300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- review workbench */
.job-body main { display: flex; flex-direction: column; }
#job { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.loading { padding: var(--s7); color: var(--ink-3); }
.bench { flex: 1; min-height: 0; display: grid; grid-template-columns: 17rem minmax(0, 1fr) 25rem; grid-template-rows: auto minmax(0, 1fr); }
@media (min-width: 901px) { .job-body.reviewing { height: 100vh; overflow: hidden; } }
.benchbar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.benchbar .progress { display: flex; align-items: center; gap: var(--s3); min-width: 14rem; }
.benchbar .progress .bar { width: 9rem; margin: 0; }
.benchbar .progress .bar-fill { background: var(--ok); }
.benchbar .num { font: 600 var(--t-s) var(--mono); }
.benchbar .spacer { flex: 1; }
.benchbar .actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.rail { border-right: 1px solid var(--line); overflow-y: auto; background: var(--surface); }
.rail-head { position: sticky; top: 0; background: var(--surface); padding: var(--s3) var(--s3) var(--s2); border-bottom: 1px solid var(--line); z-index: 2; display: flex; gap: var(--s2); align-items: center; justify-content: space-between; }
.rail-head h2 { font-size: var(--t-s); }
.rail-head select { width: auto; padding: .3rem .5rem; font-size: var(--t-xs); }
.figlist { list-style: none; margin: 0; padding: var(--s2); }
.figitem { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: var(--s3); align-items: center; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-m); padding: var(--s2); cursor: pointer; color: inherit; font: inherit; }
.figitem:hover { background: var(--paper); }
.figitem[aria-current="true"] { background: var(--pencil-soft); border-color: var(--pencil); }
.figitem .thumb { width: 3.6rem; height: 2.8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; display: grid; place-items: center; }
.figitem .thumb img { width: 100%; height: 100%; object-fit: contain; }
.figitem .meta { font-size: var(--t-xs); color: var(--ink-2); display: block; margin-bottom: 2px; }
.figitem .snippet { font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 3px; }

.chip { display: inline-flex; align-items: center; gap: .35rem; font: 600 .75rem/1 var(--sans); padding: .28rem .5rem; border-radius: 99px; white-space: nowrap; background: var(--quiet-soft); color: var(--quiet); }
.chip::before { content: ""; width: .5rem; height: .5rem; flex: none; background: currentColor; }
.chip.approved, .chip.existing { background: var(--ok-soft); color: var(--ok); }
.chip.approved::before, .chip.existing::before { border-radius: 50%; }
.chip.needs_attention { background: var(--warn-soft); color: var(--warn); }
.chip.needs_attention::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chip.ai_draft, .chip.edited { background: var(--pencil-soft); color: var(--pencil); }
.chip.ai_draft::before { background: none; border: 1.5px solid currentColor; border-radius: 50%; }
.chip.edited::before { transform: rotate(45deg); }
.chip.decorative::before { height: 2px; }
.chip.generating::before { border-radius: 50%; animation: pulse 1.2s infinite; }

.view { overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.figure-stage { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s5); display: grid; place-items: center; min-height: 16rem; }
.figure-stage img { max-height: min(58vh, 34rem); width: auto; background: #fff; box-shadow: var(--shadow); border-radius: 2px; }
.where { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
.pagewrap { position: relative; background: #fff; border: 1px solid var(--line); line-height: 0; }
.pagebtn { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; border-radius: var(--r-s); }
.hl { position: absolute; background: color-mix(in srgb, var(--marker) 45%, transparent); outline: 2px solid #c79a00; mix-blend-mode: multiply; pointer-events: none; }
.ctx { font-size: var(--t-s); color: var(--ink-2); }
.ctx h3 { font-size: var(--t-s); color: var(--ink); margin-bottom: var(--s1); }
.ctx details { border-top: 1px solid var(--line); padding: var(--s2) 0; }
.ctx summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.ctx p { margin: var(--s2) 0 0; max-width: 70ch; }
.ctx .cap { font-style: italic; }

.editor { border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.editor-head h2 { font-size: var(--t-l); }
.spoken label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: var(--t-s); margin-bottom: var(--s1); }
.spoken textarea { font-size: 1.125rem; line-height: 1.5; min-height: 9.5rem; padding: var(--s3) var(--s4); border-width: 1.5px; }
.counter { font: 500 var(--t-xs) var(--mono); color: var(--ink-3); }
.counter.soft { color: var(--warn); } .counter.hard { color: var(--bad); font-weight: 700; }
.hints { list-style: none; margin: var(--s2) 0 0; padding: 0; font-size: var(--t-xs); color: var(--warn); }
.hints li { padding-left: 1rem; position: relative; margin-bottom: 2px; }
.hints li::before { content: "!"; position: absolute; left: .2rem; font-weight: 700; }
.saved { font-size: var(--t-xs); color: var(--ink-3); min-height: 1.2em; }
.seg { display: flex; flex-wrap: wrap; gap: var(--s1); border: 0; padding: 0; margin: 0; }
.seg legend { font-weight: 600; font-size: var(--t-s); margin-bottom: var(--s1); padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-m); font-size: var(--t-s); font-weight: 550; }
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--pencil); outline-offset: 2px; }
.aibox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3) var(--s4); font-size: var(--t-s); }
.aibox dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); }
.aibox dt { color: var(--ink-3); } .aibox dd { margin: 0; }
.regen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.editor-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); position: sticky; bottom: calc(-1 * var(--s5)); background: var(--surface); padding-bottom: var(--s4); }
.editor-actions .btn.primary { flex: 1; justify-content: center; }
.decor-note { background: var(--quiet-soft); border-radius: var(--r-m); padding: var(--s4); font-size: var(--t-s); color: var(--ink-2); }
.shortcuts { font-size: var(--t-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.empty { padding: var(--s7) var(--s5); text-align: center; color: var(--ink-2); max-width: 36rem; margin: 0 auto; }
.empty h2 { color: var(--ink); font-size: var(--t-xl); margin-bottom: var(--s3); }

/* ---------- result */
.result { max-width: 60rem; margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); width: 100%; }
.result h1 { font-size: var(--t-2xl); letter-spacing: -.025em; }
.result .sub { color: var(--ink-2); margin: var(--s2) 0 var(--s6); }
.summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); margin-bottom: var(--s6); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s5); }
.card h2 { font-size: var(--t-l); margin-bottom: var(--s3); }
.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); align-items: center; margin: var(--s3) 0 var(--s4); }
.beforeafter .n { font: 700 var(--t-3xl)/1 var(--sans); letter-spacing: -.04em; }
.beforeafter .l { font-size: var(--t-s); color: var(--ink-2); }
.beforeafter .to { color: var(--ink-3); font-size: var(--t-s); }
.downloads { display: flex; flex-direction: column; gap: var(--s2); }
.downloads .row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 7.5rem; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); align-items: baseline; }
.checks .t { font-weight: 600; } .checks .d { color: var(--ink-2); font-size: var(--t-s); display: block; }
.checks .was { font-size: var(--t-xs); color: var(--ink-3); text-align: right; white-space: nowrap; }
.verdict { font: 650 var(--t-xs)/1 var(--sans); padding: .3rem .5rem; border-radius: var(--r-s); justify-self: start; }
.verdict.pass { background: var(--ok-soft); color: var(--ok); }
.verdict.fail { background: var(--bad-soft); color: var(--bad); }
.verdict.warn { background: var(--warn-soft); color: var(--warn); }
.result-foot { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); align-items: center; }
.result-foot .fine { margin: 0 0 0 auto; }

/* ---------- dialogs, toasts */
dialog { border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s5); background: var(--surface); color: var(--ink); max-width: 30rem; width: calc(100% - 2rem); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(10, 13, 22, .55); }
dialog h2 { font-size: var(--t-l); margin-bottom: var(--s3); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
#pageview { max-width: min(60rem, calc(100% - 2rem)); padding: 0; height: calc(100% - 2rem); }
#pageview[open] { display: flex; flex-direction: column; }
.pageview-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); font-weight: 600; }
.pageview-scroll { overflow: auto; padding: var(--s4); background: var(--sunken); flex: 1; }
#steplog { max-width: min(52rem, calc(100% - 2rem)); padding: 0; height: min(40rem, calc(100% - 2rem)); }
#steplog[open] { display: flex; flex-direction: column; }
#steplog h2 { margin: 0; font-size: var(--t-l); }
.steplog-state { margin: 0; font-size: var(--t-s); font-weight: 400; color: var(--ink-2); }
.steplog-scroll { overflow: auto; flex: 1; background: var(--sunken); padding: var(--s3) var(--s4); overscroll-behavior: contain; }
.steplog-scroll:focus-visible { outline: 2px solid var(--pencil); outline-offset: -2px; }
.steplog-empty { color: var(--ink-3); font-size: var(--t-s); }
.steplog-list { list-style: none; margin: 0; padding: 0; font: var(--t-xs)/1.5 var(--mono); }
.steplog-list li { display: flex; gap: var(--s3); padding: .15rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.steplog-list li:last-child { border-bottom: 0; }
.steplog-list time { color: var(--ink-3); flex: none; }
.steplog-list .lv-warn { color: var(--warn); }
.steplog-list .lv-error { color: var(--bad); font-weight: 600; }
.toasts { position: fixed; right: var(--s4); bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s2); z-index: 40; max-width: 24rem; }
.toast { background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); border-radius: var(--r-m); font-size: var(--t-s); box-shadow: var(--shadow); display: flex; gap: var(--s3); align-items: center; animation: rise .18s var(--ease); }
.toast.error { background: var(--bad); color: #fff; }
:root[data-theme="dark"] .toast.error { color: #1b0704; }
.toast button { margin-left: auto; background: none; border: 1px solid currentColor; color: inherit; border-radius: var(--r-s); font: inherit; padding: .2rem .5rem; cursor: pointer; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- responsive */
@media (max-width: 1100px) {
  .bench { grid-template-columns: 13rem minmax(0, 1fr) 21rem; }
}
@media (max-width: 900px) {
  .upload-page { grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s6); }
  .upload-intro h1 { font-size: var(--t-2xl); }
  .bench { display: block; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; }
  .figlist { display: flex; overflow-x: auto; gap: var(--s2); }
  .figitem { grid-template-columns: 1fr; width: 8.5rem; flex: none; }
  .figitem .thumb { width: 100%; height: 4.5rem; }
  .editor { border-left: 0; border-top: 1px solid var(--line); }
  .editor-actions { position: static; }
  .summary { grid-template-columns: 1fr; }
  .checks li { grid-template-columns: 5rem minmax(0, 1fr); }
  .checks .was { display: none; }
  .crumb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .hl { outline: 3px solid Highlight; background: none; }
  .chip, .verdict { border: 1px solid CanvasText; }
}