/* Case App: the public site's navy world at working volume (DESIGN.md). Navy bar, pale ground, white sheets; blue only
   for the primary action, the stage in progress, progress, focus and selection. Gloock names pages and sets the numbers
   that matter; Hanken Grotesk does all the work. Square corners throughout. Rule priority: impeccable + Vercel guidelines
   first, the deck style second (Lincoln, 2026-10-04). */

@font-face { font-family: "Gloock"; src: url("/static/fonts/Gloock-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Libre Bodoni"; src: url("/static/fonts/LibreBodoni-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; size-adjust: 90%; ascent-override: 97.5%; descent-override: 22.5%; line-gap-override: 0%; }
/* while the italic loads, layout uses this Georgia italic scaled to the same metrics (measured on the public site), so nothing shifts */
@font-face { font-family: "Bodoni Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia"); font-style: italic; font-weight: 400; size-adjust: 84.5%; ascent-override: 103.8%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk"; src: url("/static/fonts/HankenGrotesk-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/static/fonts/HankenGrotesk-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* the site's pinned four, plus tints and greys for text, rules, fields and hover */
  --navy: #0B1F3A;
  --navy-deep: #071530;
  --blue: #2F54EB;
  --blue-deep: #2443C7;
  --blue-hi: #9DB8FF;
  --black: #0A0A0A;
  --white: #FFFFFF;
  --mist: #C3CEE2;
  --muted: #4A5A73;        /* secondary text, 7:1 on white */
  --ink-soft: #26324A;     /* running text */
  --rule: #E3E8F0;
  --pale: #F2F5FA;         /* the ground */
  --wash: #E7EDF9;         /* hover, selected, provenance, table heads */
  --field: #7F8DA6;        /* control borders, 3.35:1 on white */
  --placeholder: #63718A;  /* 4.9:1 on white */
  --error: #B42318;
  /* role names the stylesheet uses throughout */
  --ink: var(--navy); --text: var(--ink-soft); --line: var(--rule); --paper: var(--pale); --panel: var(--white);
  --tint: var(--wash); --accent: var(--blue); --accent-ink: var(--blue-deep); --danger: var(--error);
  --display: "Gloock", Georgia, serif;
  --italic: "Libre Bodoni", "Bodoni Fallback", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* code, logs, prompts and pasted codes only */
  /* fixed rem type scale (Operate: no fluid headings) */
  --fs-display: 2.5rem; --fs-headline: 1.75rem; --fs-title: 1.375rem; --fs-figure: 1.5rem; --fs-sub: 1.125rem;
  --fs-read: 1.0625rem; --fs-body: 1rem; --fs-control: .9375rem; --fs-small: .875rem; --fs-label: .75rem;
  /* spacing scale */
  --sp-2xs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;
  --pad-sheet: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* the site's one curve */
  --shadow: 0 1px 0 rgb(11 31 58 / .04), 0 14px 30px -20px rgb(11 31 58 / .35);   /* sheets on the ground */
  --shadow-over: 0 24px 60px -24px rgb(11 31 58 / .5);                              /* overlays */
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--text); font: 400 var(--fs-body)/1.55 var(--body); font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgb(47 84 235 / .15); }
main { max-width: 1040px; margin: 0 auto; padding: 40px var(--sp-lg) 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: rgb(47 84 235 / .22); color: var(--ink); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: var(--sp-md); top: var(--sp-sm); background: var(--panel); padding: var(--sp-xs) var(--sp-sm); z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* top bar: navy, the Gloock wordmark beside a three-course tower */
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--sp-lg); background: var(--navy); color: var(--white); }
.topbar :focus-visible { outline-color: var(--blue-hi); }
.brand { display: inline-flex; gap: 10px; align-items: center; font: 400 1.3125rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; }
.brand-mark { width: 15px; height: 14px; background:
  linear-gradient(var(--white) 0 0) 50% 0 / 5px 4px no-repeat,
  linear-gradient(var(--mist) 0 0) 50% 5px / 10px 4px no-repeat,
  linear-gradient(var(--blue-hi) 0 0) 50% 10px / 15px 4px no-repeat; }
.topbar-note { font: 500 var(--fs-small)/1 var(--body); color: var(--mist); }

/* type: Gloock names, Hanken works; metadata sits below the title, never above it */
.meta { margin: 6px 0 0; font: 500 var(--fs-small) var(--body); color: var(--muted); }
h1, h2 { font-family: var(--display); font-weight: 400; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: var(--fs-headline); line-height: 1.15; letter-spacing: -.01em; }
h3 { margin: 0; font: 700 var(--fs-sub)/1.3 var(--body); color: var(--ink); text-wrap: balance; }
em { font-style: italic; }
h1 em, h2 em { font-family: var(--italic); }
.lede { margin: var(--sp-sm) 0 0; max-width: 60ch; color: var(--muted); font-size: var(--fs-sub); line-height: 1.5; }
@media (max-width: 640px) { h1 { font-size: 2rem; } }

.section-head { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.picker { position: relative; }
.picker > summary { list-style: none; display: flex; align-items: center; gap: 14px; min-width: 280px; min-height: 44px; padding: 0 14px; border: 1px solid var(--field); background: var(--panel); cursor: pointer; transition: border-color .2s var(--ease); }
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary:hover, .picker[open] > summary { border-color: var(--ink); }
.picker-label { font-weight: 600; color: var(--ink); }
.picker-meta { margin-left: auto; font: 500 var(--fs-small) var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.picker-caret { width: 12px; height: 8px; color: var(--ink); transition: transform .25s var(--ease); }
.picker[open] .picker-caret { transform: rotate(180deg); }
.picker-list { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: var(--sp-2xs) 0; list-style: none; background: var(--panel); border: 1px solid var(--ink); box-shadow: var(--shadow-over); transform-origin: top; animation: drop .22s var(--ease); max-height: min(70dvh, 560px); overflow: auto; overscroll-behavior: contain; }
.picker-list a { display: flex; justify-content: space-between; gap: var(--sp-sm); padding: 10px 14px; text-decoration: none; min-height: 44px; align-items: center; }
.picker-list a:hover, .picker-list a:focus-visible { background: var(--tint); outline-offset: -3px; }
.picker-list a[aria-current] { background: var(--tint); } .picker-list a[aria-current] .pl-name { color: var(--accent-ink); }
.pl-name { font-weight: 600; color: var(--ink); }
.pl-stage { font: 500 var(--fs-small) var(--body); color: var(--muted); }
.pl-new { width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: 600 var(--fs-control) var(--body); color: var(--accent-ink); cursor: pointer; }
.pl-new:hover { background: var(--tint); }
.picker-list li:last-child:has(.pl-new) { position: sticky; bottom: calc(-1 * var(--sp-2xs)); background: var(--panel); }   /* New Case stays in reach however many cases there are */

/* cases desk (the dashboard and every case page): your cases in a navy list, the chosen case open beside it */
main:has(> .desk) { max-width: none; padding: 0; display: block; }
.desk { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100dvh - 56px); }
.rail { background: var(--navy); color: var(--white); padding: 22px var(--sp-md) var(--sp-xl); display: grid; align-content: start; gap: var(--sp-2xs); }
.rail :focus-visible { outline-color: var(--blue-hi); }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding: 0 var(--sp-xs) 14px; margin-bottom: var(--sp-xs); border-bottom: 1px solid rgb(195 206 226 / .3); }
.rail-head h2 { color: var(--white); font-size: var(--fs-title); }
.rail-new { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: none; box-shadow: inset 0 0 0 1px var(--mist); color: var(--white);
  font: 600 var(--fs-small) var(--body); cursor: pointer; transition: background-color .2s var(--ease), transform .14s var(--ease); }
.rail-new svg { width: 12px; height: 12px; }
.rail-new:hover { background: rgb(255 255 255 / .08); transform: scale(1.025); } .rail-new:active { transform: scale(.97); }
.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail-list a { display: grid; gap: 6px; padding: var(--sp-sm) var(--sp-sm) 13px; text-decoration: none; transition: background-color .2s var(--ease); }
.rail-list a:hover { background: rgb(255 255 255 / .06); }
.rail-list a[aria-current] { background: var(--accent); }
.rail-list strong { font: 600 var(--fs-control)/1.25 var(--body); overflow-wrap: anywhere; }
.rail-list span:not(.pips) { font: 500 var(--fs-small)/1.35 var(--body); color: var(--mist); }
.rail-list a[aria-current] span:not(.pips) { color: var(--white); }
.rail-empty { margin: var(--sp-sm) var(--sp-xs); color: var(--mist); font-size: var(--fs-small); }
.pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 2px; }
.pips i { height: 5px; background: rgb(195 206 226 / .25); } .pips .is-done { background: var(--mist); } .pips .is-now { background: var(--blue-hi); }
a[aria-current] .pips i { background: rgb(255 255 255 / .3); } a[aria-current] .pips .is-done { background: var(--white); } a[aria-current] .pips .is-now { background: var(--blue-hi); }
.pane { padding: var(--sp-xl) 40px var(--sp-3xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); align-content: start; max-width: 1120px; }
.pane > .picker { display: none; }
.pane-head .case-title { font: 400 var(--fs-display)/1.08 var(--display); letter-spacing: -.015em; }
.pane-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-lg); align-items: stretch; }
.pane-sheet { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--pad-sheet); display: grid; gap: var(--sp-md); align-content: start; }
.pane-sheet h2 { font-size: var(--fs-title); line-height: 1.2; padding-bottom: var(--sp-sm); border-bottom: 2px solid var(--ink); }
.pane-sheet .btn-primary { justify-self: start; }
.pane-acts { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.pane-sheet .meter-row { margin: -6px 0 0; }
.pane-what { margin: 0; max-width: 60ch; }
.deck-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
.deck-strip a { display: block; }
.deck-strip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: transform .2s var(--ease); }
.deck-strip a:hover img { transform: translateY(-2px); }
.stage-rows { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.stage-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); padding: 11px 0; border-bottom: 1px solid var(--line); }
.stage-rows li:first-child { padding-top: 0; }
.stage-rows a { display: inline-flex; gap: 10px; align-items: baseline; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease); }
.stage-rows a:hover { text-decoration-color: currentColor; }
.sr-n { min-width: 1ch; font: 400 var(--fs-read) var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-rows li > span { font-size: var(--fs-small); color: var(--muted); text-align: right; }
.stage-rows .is-done .sr-n { color: var(--ink); }
.stage-rows .is-now .sr-n, .stage-rows .is-now > span, .stage-rows .is-next > span { color: var(--accent-ink); font-weight: 600; }
.stage-rows .is-ahead a { color: var(--muted); font-weight: 500; }
.pane-empty { display: grid; gap: var(--sp-md); justify-items: start; padding-top: var(--sp-2xl); max-width: 640px; }
@media (max-width: 960px) { .pane-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .desk { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rail { display: none; }
  .pane { padding: var(--sp-md) var(--sp-md) var(--sp-2xl); }
  .pane > .picker { display: block; }
  .picker > summary { min-width: 0; }
  .pane .picker-list a { display: grid; justify-content: start; gap: 2px; }
  .pane > .tracker { display: none; }   /* the Stages list carries the same links; five full-width bars would push the work off screen */
  .pane-head .case-title { font-size: 2rem; }
}

/* stage tracker (the signature): done in navy, the stage in progress blue, the rest in wash */
.tracker { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; gap: var(--sp-2xs); }
.chev { position: relative; display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 0 22px 0 var(--sp-md); background: var(--tint); color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.chev:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.chev-n { font: 600 var(--fs-small) var(--body); font-variant-numeric: tabular-nums; opacity: .8; }
.chev a, .chev a:hover { text-decoration: none; }
.chev-t { font: 600 var(--fs-control)/1.15 var(--body); }
.chev.is-done { background: var(--ink); color: var(--white); }
.chev.is-now { background: var(--accent); color: var(--white); }

/* takeaway band */
.takeaway { display: flex; gap: 14px; align-items: center; padding: var(--sp-sm) var(--sp-md); background: var(--tint); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.takeaway-k { font: 600 var(--fs-small) var(--body); color: var(--muted); white-space: nowrap; }

/* buttons: one primary (blue), a ghost for secondary actions, text buttons for quiet ones */
.btn-primary, .btn-ghost { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; font: 600 var(--fs-control)/1.2 var(--body); text-decoration: none; border: 0; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--white); } .btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--field); } .btn-ghost:hover { background: var(--tint); border-color: var(--ink); }
.empty { padding: var(--sp-xl); border: 1px dashed var(--field); text-align: center; color: var(--muted); }

/* dialogs */
.sheet { border: 1px solid var(--ink); padding: 0; width: min(520px, 92vw); box-shadow: var(--shadow-over); }
.sheet[open] { animation: rise .25s var(--ease); }
.sheet::backdrop { background: rgb(7 21 48 / .55); }
.sheet-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: var(--pad-sheet); }
.sheet-form h2 { margin-bottom: var(--sp-xs); }
label { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
input { font: var(--fs-body) var(--body); min-height: 44px; padding: 0 var(--sp-sm); border: 1px solid var(--field); background: var(--panel); color: var(--ink); }
input:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.sheet-actions { display: flex; justify-content: flex-end; gap: var(--sp-xs); margin-top: var(--sp-sm); }

/* breadcrumbs (stage pages) */
.crumbs { display: flex; gap: var(--sp-xs); font: 500 var(--fs-small) var(--body); color: var(--muted); } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); }

/* motion: state changes on the one curve; the tracker fills in once; dialogs rise into place */
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: scaleY(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (max-width: 720px) {
  .tracker { grid-template-columns: 1fr; } .chev, .chev:first-child { clip-path: none; }
}

/* clickable stages */
.tracker.is-nav .chev { padding: 0; }
.tracker.is-nav .chev a { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 0 22px 0 var(--sp-md); text-decoration: none; color: inherit; transition: filter .2s var(--ease); }
.tracker.is-nav .chev:not(:first-child) a { padding-left: var(--sp-lg); }
.tracker.is-nav .chev a:hover { filter: brightness(1.12); }
.tracker.is-nav .chev a:focus-visible { outline-offset: -5px; outline-color: var(--white); }
.tracker.is-nav .chev:not(.is-done):not(.is-here) a:focus-visible { outline-color: var(--accent); }
.chev.is-here { background: var(--accent); color: var(--white); }

/* tabs: a segmented navigation bar (links, aria-current), never raw hyperlinks */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; margin-bottom: var(--sp-md); background: var(--line); width: fit-content; max-width: 100%; }
.tabs a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--panel); color: var(--muted); text-decoration: none;
  font: 600 var(--fs-control) var(--body); transition: color .2s var(--ease), background-color .2s var(--ease); }
.tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.tabs a:hover { color: var(--ink); background: var(--tint); }
.tabs a[aria-current="page"] { color: var(--ink); background: var(--panel); }
.tabs a[aria-current="page"]::after { transform: scaleX(1); }
.tabs a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* documents: a reading sheet */
.doc { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--sp-xl) clamp(20px, 4vw, 48px); margin-top: var(--sp-md); max-width: 100%; overflow-wrap: anywhere;
  font-size: var(--fs-read); line-height: 1.65; }
.doc > * { max-width: 72ch; }
.doc h1 { font-size: var(--fs-headline); margin: 0 0 var(--sp-md); }
.doc h2 { font-size: var(--fs-title); line-height: 1.2; margin: var(--sp-xl) 0 10px; padding-top: var(--sp-md); border-top: 1px solid var(--line); }
.doc h3 { margin: 22px 0 var(--sp-xs); }
.doc p, .doc li { color: var(--text); } .doc strong { color: var(--ink); }
.doc table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--sp-md) 0; font-size: var(--fs-small); line-height: 1.45; font-variant-numeric: tabular-nums; }
.doc th, .doc td { border: 1px solid var(--line); padding: var(--sp-xs) 10px; text-align: left; vertical-align: top; overflow-wrap: normal; min-width: 4ch; }
.doc th { background: var(--tint); color: var(--ink); font-weight: 700; }
.doc code { font: var(--fs-small) var(--mono); background: var(--tint); padding: 1px 4px; } .doc pre { background: var(--tint); padding: 14px; overflow-x: auto; } .doc pre code { padding: 0; }
.doc blockquote { margin: var(--sp-md) 0; padding: 10px var(--sp-md); background: var(--tint); color: var(--ink); }

/* stage documents, one part at a time (_docview.html): pages for every document, the issue map for Key issues */
.doc:has(> .dv) { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 0; font-size: inherit; line-height: inherit; }
.doc > .dv { max-width: none; }
main:has(.dv) { max-width: 1240px; }   /* stage pages use the full width: parts are laid out sideways */
.dv { display: grid; gap: var(--sp-md); }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--line); justify-self: start; }   /* a two-way view switch */
.seg button { min-height: 40px; padding: 0 var(--sp-md); border: 0; background: var(--panel); color: var(--muted); font: 600 var(--fs-small) var(--body); cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease); }
.seg button:hover { color: var(--ink); background: var(--tint); }
.seg button[aria-pressed="true"] { color: var(--ink); background: var(--panel); box-shadow: inset 0 -3px 0 var(--accent); }
.seg button:focus-visible { outline-offset: -3px; }
.dv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); align-items: start; }
.dv-mapcol { display: grid; gap: var(--sp-sm); }
.dv-map { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) 88px minmax(0, .9fr); grid-template-areas: "ih . sh" "il . sl";
  gap: var(--sp-sm) 0; padding: 22px var(--sp-lg) var(--sp-lg); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dv-colh { margin: 0; font: 600 var(--fs-small)/1.3 var(--body); color: var(--muted); }
.dv-colh-i { grid-area: ih; } .dv-colh-s { grid-area: sh; }
.dv-issues, .dv-syms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); position: relative; z-index: 1; }
.dv-issues { grid-area: il; align-content: start; } .dv-syms { grid-area: sl; align-content: space-around; }
.dv-issue { display: grid; gap: 6px; padding: 14px var(--sp-md); background: var(--navy); color: var(--white); text-decoration: none; transition: background-color .2s var(--ease), transform .14s var(--ease); }
.dv-issue:hover { background: var(--navy-deep); transform: scale(1.01); } .dv-issue:active { transform: scale(.99); }
.dv-issue:focus-visible { outline-color: var(--blue-hi); outline-offset: 3px; }
.dv-issue strong { font: 400 var(--fs-title)/1.2 var(--display); color: inherit; }
.dv-why { font: 500 var(--fs-small)/1.4 var(--body); color: var(--mist); }
.dv-drv { font: 600 var(--fs-small) var(--body); color: var(--blue-hi); }
.dv-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
.dv-chip { flex: none; padding: 3px var(--sp-xs); box-shadow: inset 0 0 0 1px var(--mist); font: 700 var(--fs-label)/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.dv-issue.is-sel { background: var(--accent); box-shadow: 0 0 0 3px var(--blue-hi); }
.dv-issue.is-sel .dv-why, .dv-issue.is-sel .dv-drv { color: var(--white); }
.dv-sym { display: grid; gap: var(--sp-2xs); padding: var(--sp-sm) 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); transition: box-shadow .2s var(--ease); }
.dv-sym em { font: 700 var(--fs-small) var(--body); font-style: normal; color: var(--muted); }
.dv-sym strong { font: 400 var(--fs-read)/1.3 var(--display); color: var(--ink); }
.dv-sym.is-hit { box-shadow: inset 0 0 0 2px var(--accent); }
.dv-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dv-wires > path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dv-wires > path.is-hit { stroke: var(--accent); stroke-width: 2.5; transition: stroke-dashoffset .25s var(--ease); }
.dv-tabs { margin: 0; padding: 0; background: none; gap: var(--sp-2xs); }
.dv-tabs a { border: 1px solid var(--line); }
.dv-page { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--sp-lg) var(--pad-sheet) var(--pad-sheet); font-size: var(--fs-read); line-height: 1.65; overflow-wrap: anywhere; }
.dv.is-paged .dv-page:not(.is-cur) { display: none; }
.dv-page-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2xs) var(--sp-md); padding-bottom: var(--sp-sm); margin-bottom: var(--sp-md); border-bottom: 2px solid var(--ink); }
.doc .dv-page-h h2 { margin: 0; padding: 0; border: 0; font-size: var(--fs-headline); }
.dv-page { line-height: 1.55; }
.dv-text ul, .dv-text ol { margin: var(--sp-2xs) 0 var(--sp-sm); padding-left: 20px; }
.dv-text li + li { margin-top: var(--sp-2xs); }
.dv-text p { margin: 0 0 var(--sp-xs); }
.dv-text a:not(.term) { color: var(--accent-ink); text-decoration-color: rgb(36 67 199 / .35); transition: text-decoration-color .2s var(--ease); }   /* a source or other web link: opens the site in a new tab */
.dv-text a:not(.term):hover { text-decoration-color: currentColor; }
.dv-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-md) 40px; align-items: start; margin-top: var(--sp-sm); }   /* words, then tables in the wider column */
.dv-col > :first-child { margin-top: 0; }
.dv-col + .dv-col { padding-left: 20px; margin-left: -20px; border-left: 1px solid var(--line); }   /* a rule between the columns */
.dv-verdict { margin: var(--sp-xs) 0 var(--sp-md) !important; padding: var(--sp-sm) var(--sp-md); background: var(--tint); border-top: 1px solid var(--ink); font: 400 var(--fs-read)/1.35 var(--display); color: var(--ink); }
.dv-verdict strong { font: 700 var(--fs-body)/1.2 var(--body); margin-right: var(--sp-xs); }
.dv-page-h .meta { margin: 0; }
.dv-reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); min-width: 0; }
.dv-text > :first-child { margin-top: 0; }
.dv-strip { display: flex; align-items: center; gap: var(--sp-xs); min-width: 0; }
.dv-strip ol { list-style: none; margin: 0; padding: 2px; display: flex; flex-wrap: nowrap; overflow-x: auto; flex: 1 1 auto; justify-content: flex-start; gap: var(--sp-2xs); min-width: 0; scrollbar-width: none; position: relative; }
.dv-strip ol[data-fade="r"] { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.dv-strip ol[data-fade="l"] { mask-image: linear-gradient(90deg, transparent, #000 40px); }
.dv-strip ol[data-fade="lr"] { mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.dv-strip ol a { display: inline-flex; align-items: center; white-space: nowrap; min-height: 40px; padding: 0 var(--sp-sm); background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font: 600 var(--fs-small) var(--body); text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease), transform .14s var(--ease); }
.dv-strip ol a:hover { color: var(--ink); border-color: var(--ink); transform: scale(1.025); }
.dv-strip ol a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.dv-step { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--field); color: var(--ink); transition: background-color .2s var(--ease), transform .14s var(--ease); }
.dv-step svg { width: 12px; height: 12px; }
.dv-step:hover { background: var(--tint); transform: scale(1.025); }
.dv-step[aria-disabled] { opacity: .4; pointer-events: none; }
@media (min-width: 721px) {   /* the arrows sit beside the page, centred on it and kept in view while a long page scrolls */
  .dv-reader { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: var(--sp-sm); }
  .dv-reader > .dv-page, .dv-strip > ol { grid-column: 2; }
  .dv-strip { display: contents; }
  .dv-step { grid-row: 1; align-self: center; height: 128px; position: sticky; top: calc(50vh - 64px); bottom: calc(50vh - 64px); }   /* tall bars beside the page */
  .dv-prev { grid-column: 1; } .dv-next { grid-column: 3; }
}
@media (hover: none) { .dv-keys { display: none; } }
@media (max-width: 900px) {
  .dv-cols { grid-template-columns: minmax(0, 1fr); }
  .dv-col + .dv-col { padding-left: 0; margin-left: 0; border-left: 0; padding-top: var(--sp-md); border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .dv-map { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ih" "il" "sh" "sl"; padding: 18px var(--sp-md) 20px; }
  .dv-colh-s { margin-top: var(--sp-sm); }
  .dv-wires { display: none; }
  .dv-strip ol { flex-wrap: nowrap; overflow-x: auto; justify-content: start; scrollbar-width: none; }
  .dv-strip ol a { white-space: nowrap; }
}

/* slides (Round 3): Present puts one slide at a time on the navy stage, with its pinned changes beside it and the deck
   in a strip below; All slides is the storyboard, one row per deck section. Present goes full screen. */
main:has([data-deck]) { max-width: 1336px; }   /* the slide is the hero: the stage gets the extra width */
.deck { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }   /* minmax: the 20-slide strip scrolls instead of widening the page */
.deck-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm) var(--sp-lg); flex-wrap: wrap; }
.deck-lead { display: flex; align-items: center; gap: var(--sp-md) var(--sp-lg); flex-wrap: wrap; }
.deck-meta { font: 600 var(--fs-small) var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.deck-count { margin: 0; display: grid; gap: 2px; }
.deck-parts { font: 500 var(--fs-small)/1.4 var(--body); color: var(--muted); }
.ico { width: 12px; height: 12px; flex: none; }
.btn-primary:has(.ico) { gap: 10px; }
.deck[data-view="all"] .band, .deck[data-view="present"] .board { display: none; }

.band, .stage-dlg { color: var(--white);
  background: radial-gradient(70% 70% at 12% 10%, rgb(157 184 255 / .12), transparent 70%),
              radial-gradient(60% 80% at 92% 80%, rgb(3 8 20 / .5), transparent 70%), var(--navy); }
.band { padding: var(--sp-lg) var(--sp-lg) var(--sp-md); }
.stage-grid { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px minmax(260px, 300px); grid-template-rows: auto auto 1fr;
  grid-template-areas: "prev mat next chg" ". cap . chg" "strip strip strip chg"; gap: var(--sp-sm) var(--sp-md); align-items: center; }
.arw-prev { grid-area: prev; } .arw-next { grid-area: next; } .mat { grid-area: mat; } .cap { grid-area: cap; align-self: start; } .chg { grid-area: chg; }
.strip { grid-area: strip; align-self: start; }
.arw { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 1px var(--mist); cursor: pointer; transition: background-color .2s var(--ease), transform .14s var(--ease); }
.arw svg { width: 12px; height: 12px; }
.arw:hover { background: rgb(255 255 255 / .08); transform: scale(1.025); }
.arw:active { transform: scale(.97); }
.arw:disabled { opacity: .3; cursor: default; transform: none; background: transparent; }
.band :focus-visible, .stage-dlg :focus-visible { outline-color: var(--blue-hi); }
.mat { position: relative; margin: 0; padding: 8px; background: var(--white); box-shadow: 0 0 0 1px rgb(10 10 10 / .6), 0 30px 60px -24px rgb(3 8 20 / .85); }
.mat img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.stage:has([data-chg]) .mat img { cursor: crosshair; }
.pins { position: absolute; inset: 8px; pointer-events: none; }
.pin { position: absolute; width: 28px; height: 28px; transform: translate(-50%, calc(-100% - 7px)); display: grid; place-items: center; padding: 0; border: 0;
  background: var(--blue); color: var(--white); font: 700 var(--fs-small)/1 var(--body); font-variant-numeric: tabular-nums; cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 2px var(--white), 0 6px 14px -6px rgb(3 8 20 / .8); transition: transform .14s var(--ease); animation: pin-in .22s var(--ease); }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -5px; border: solid transparent; border-width: 7px 5px 0; border-top-color: var(--blue); }
.pin:hover, .pin.is-hot { transform: translate(-50%, calc(-100% - 7px)) scale(1.15); }
@keyframes pin-in { from { opacity: 0; transform: translate(-50%, calc(-100% - 15px)); } }
.cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-xs) var(--sp-md); flex-wrap: wrap; margin: 0; font: 500 var(--fs-small) var(--body); color: var(--mist); }
.cap b { font: 400 var(--fs-sub) var(--display); color: var(--white); }
.chg { align-self: start; display: grid; gap: var(--sp-sm); padding: 18px 20px 20px; background: var(--panel); color: var(--text); }
.chg h3 { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font: 400 var(--fs-title)/1.2 var(--display); color: var(--ink); }
.chg form { display: grid; gap: var(--sp-sm); }
.chg :focus-visible { outline-color: var(--accent); }
.notes { list-style: none; margin: 0; padding: 0; display: grid; }
.notes:empty { display: none; }
.notes:not(:empty) + [data-pin-hint] { display: none; }   /* the pins show how it works */
.note-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.note-row:first-child { padding-top: 0; }
.pin-n { width: 28px; height: 28px; display: grid; place-items: center; background: var(--blue); color: var(--white); font: 700 var(--fs-small)/1 var(--body); font-variant-numeric: tabular-nums; }
.note-row textarea { min-height: 44px; }
.note-row.is-hot textarea { border-color: var(--ink); }
.note-foot { grid-column: 2; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-xs); font: 500 var(--fs-small)/1.35 var(--body); color: var(--muted); }
.note-foot span { overflow-wrap: anywhere; }
.note-foot .btn-text { flex: none; }
.chg-acts { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.chg-acts .btn-primary { flex: 1 1 auto; justify-content: center; }
.strip { list-style: none; margin: var(--sp-xs) 0 0; padding: 3px; display: flex; position: relative; gap: 10px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgb(195 206 226 / .45) transparent; }
.strip a { position: relative; flex: none; width: 118px; display: grid; gap: 4px; color: var(--mist); font: 600 var(--fs-label)/1.2 var(--body); text-decoration: none; font-variant-numeric: tabular-nums; }
.strip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--white); box-shadow: 0 0 0 1px rgb(195 206 226 / .35); opacity: .78;
  transition: opacity .2s var(--ease), box-shadow .2s var(--ease); }
.strip a:hover img { opacity: 1; }
.strip a[aria-current] { color: var(--white); }
.strip a[aria-current] img { opacity: 1; box-shadow: 0 0 0 3px var(--blue-hi); }
.strip a:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 2px; }
.badge { position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; background: var(--blue); color: var(--white);
  font: 700 var(--fs-label)/1 var(--body); font-variant-numeric: tabular-nums; }
.gallery .badge { top: 6px; right: 6px; height: 22px; }
.badge[hidden] { display: none; }

/* full screen: the slide alone on black; a click or the arrow keys move on, Esc ends it */
.mat:fullscreen, .mat.is-full { padding: 0; display: grid; place-items: center; background: var(--black); box-shadow: none; }
.mat.is-full { position: fixed; inset: 0; z-index: 60; }
.mat:fullscreen img, .mat.is-full img { width: min(100vw, calc(100vh * 16 / 9)); cursor: pointer; }
.mat:fullscreen .pins, .mat.is-full .pins { display: none; }

/* All slides: the storyboard by section; a slide opens on the stage, with its changes, in a dialog */
.board { display: grid; }
.sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-lg); padding: 18px 0 var(--sp-lg); border-top: 2px solid var(--ink); }
.sec h3 { margin: 0; font: 400 var(--fs-headline)/1.15 var(--display); color: var(--ink); }
.sec h3 small { display: block; margin-top: var(--sp-2xs); font: 500 var(--fs-small) var(--body); color: var(--muted); }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--sp-md); }
.gallery li { position: relative; display: grid; gap: var(--sp-xs); align-content: start; }
.gallery a { position: relative; display: block; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--white);
  box-shadow: 0 0 0 1px var(--line), 0 10px 20px -16px rgb(11 31 58 / .4); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.gallery a:hover img { transform: scale(1.025); box-shadow: 0 0 0 1px var(--ink), 0 14px 26px -16px rgb(11 31 58 / .45); }
.gallery p { margin: 0; font: 500 var(--fs-small)/1.35 var(--body); color: var(--text); }
.gallery p b { margin-right: var(--sp-2xs); color: var(--ink); font-variant-numeric: tabular-nums; }
.deck-bar + .gallery { margin-top: var(--sp-md); }   /* an earlier build, a test-set build: one grid under its bar */
.slide-n { position: absolute; left: 0; top: 0; padding: var(--sp-2xs) var(--sp-xs); background: var(--ink); color: var(--white); font: 700 var(--fs-small)/1.2 var(--body); font-variant-numeric: tabular-nums; }
.stage-dlg { width: min(1336px, 96vw); max-width: none; max-height: 96dvh; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain; box-shadow: var(--shadow-over); }
.stage-dlg[open] { display: grid; grid-template-columns: minmax(0, 1fr); animation: rise .25s var(--ease); }
.stage-dlg::backdrop { background: rgb(7 21 48 / .82); }
.stage-dlg .stage { padding: 0 var(--sp-lg) var(--sp-lg); }
.dlg-close { justify-self: end; margin: var(--sp-sm) var(--sp-sm) 0; background: transparent; color: var(--white); border-color: rgb(255 255 255 / .5); }
.dlg-close:hover { background: rgb(255 255 255 / .1); border-color: var(--white); }
@media (hover: none) { .cap-keys { display: none; } }
@media (max-width: 1100px) {
  .stage-grid { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: auto; grid-template-areas: "prev mat next" ". cap ." "strip strip strip" "chg chg chg"; }
}
@media (max-width: 720px) {
  .band { padding: var(--sp-sm); }
  .stage-dlg .stage { padding: 0 var(--sp-sm) var(--sp-sm); }
  .stage-grid { grid-template-areas: "mat mat mat" "prev cap next" "strip strip strip" "chg chg chg"; }
  .cap { align-self: center; }
  .cap { justify-content: center; text-align: center; }
  .cap-keys { display: none; }
  .sec { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
}
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; }
.lightbox::backdrop { background: rgb(7 21 48 / .82); }
.lightbox[open] { display: grid; gap: var(--sp-sm); justify-items: end; animation: rise .25s var(--ease); }
.lightbox img { max-width: 94vw; max-height: 82vh; background: var(--white); }
.lightbox .btn-ghost { background: transparent; color: var(--white); border-color: rgb(255 255 255 / .5); }
.lightbox .btn-ghost:hover { background: rgb(255 255 255 / .1); border-color: var(--white); }
.pager { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--sp-md); }
.pager a { font: 600 var(--fs-control) var(--body); text-decoration: none; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; } .pager a:hover { color: var(--accent-ink); }

/* hover/press feedback: a subtle grow on hover, a press-in on click (transform only, 140ms) */
.btn-primary, .btn-ghost, .tabs a, .picker > summary { transition: transform .14s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn-primary:hover, .btn-ghost:hover, .tabs a:hover { transform: scale(1.025); }
.picker > summary:hover { transform: scale(1.01); }
.btn-primary:active, .btn-ghost:active, .tabs a:active, .picker > summary:active { transform: scale(.97); }
.tracker.is-nav .chev { transition: transform .14s var(--ease); }
.tracker.is-nav .chev:hover { transform: scale(1.03); z-index: 1; }
.tracker.is-nav .chev:active { transform: scale(.98); }

/* continuity between stage pages: cross-document view transitions keep the tracker anchored */
@view-transition { navigation: auto; }
.tracker.is-nav { view-transition-name: stage-tracker; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* browser surfaces themed from the palette */
input, textarea { caret-color: var(--accent); }
html { scrollbar-color: var(--field) var(--paper); }

/* ---- stage workspace: inputs, runs, versions ---------------------------------------------------- */
.num { font-variant-numeric: tabular-nums; }
.hint { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.opt { font-weight: 500; color: var(--muted); margin-left: 6px; }
.field-error { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--danger); }
kbd { font: 600 var(--fs-label) var(--body); padding: 1px 5px; border: 1px solid var(--field); background: var(--panel); color: var(--ink); }
/* every text box grows downward with its content (field-sizing; app.js sizes it where that's unsupported) */
textarea { display: block; width: 100%; min-height: 92px; max-height: 50vh; padding: 10px var(--sp-sm); font: var(--fs-body)/1.5 var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--field);
  field-sizing: content; resize: none; overflow-y: auto; overflow-wrap: anywhere; transition: border-color .2s var(--ease); }  /* anywhere: a long unbroken string (a URL) wraps instead of widening the box */
textarea[rows="1"] { min-height: 46px; }
textarea:hover:not(:focus-visible), input:hover:not(:focus-visible):not([type="checkbox"]):not([type="radio"]) { border-color: var(--ink); }
textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
[aria-invalid="true"] { border-color: var(--danger); }
::placeholder { color: var(--placeholder); opacity: 1; }
button[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }
button[aria-busy="true"]::after { content: ""; width: 9px; height: 9px; margin-left: 10px; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* inputs: one sheet, two columns split by a rule */
.inputs, .fold { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--pad-sheet); display: grid; gap: var(--sp-lg); }
.inputs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* content can never widen a column */
.input-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.input-col:first-child { padding-right: var(--pad-sheet); } .input-col + .input-col { padding-left: var(--pad-sheet); border-left: 1px solid var(--line); }
.drop { position: relative; }
.file-in { position: absolute; inset: 0; opacity: 0; width: 1px; height: 1px; }
.drop-zone { display: grid; justify-items: center; gap: 6px; padding: var(--pad-sheet) var(--sp-md); text-align: center; border: 1px dashed var(--field); background: var(--paper);
  color: var(--text); font-weight: 400; font-size: var(--fs-control); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .14s var(--ease); }
.drop-zone svg { width: 26px; height: 26px; color: var(--accent); transition: transform .25s var(--ease); }
.drop-zone strong { color: var(--ink); }
.drop-zone:hover, .drop.is-over .drop-zone { border-color: var(--accent); background: var(--tint); }
.drop-zone:hover svg, .drop.is-over .drop-zone svg { transform: translateY(-3px); }
.drop.is-over .drop-zone { transform: scale(1.01); }
.drop:focus-within .drop-zone { outline: 3px solid var(--accent); outline-offset: 2px; }
.drop.is-busy .drop-zone { border-style: solid; border-color: var(--accent); }
.item-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.item-list li { display: flex; align-items: center; gap: var(--sp-sm); padding: 6px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.item-list li > a, .item-list li > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.item-list li > a { font-weight: 600; text-decoration: none; } .item-list li > a:hover { text-decoration: underline; }
.findings { counter-reset: f; } .findings li { counter-increment: f; align-items: baseline; }
.findings li::before { content: counter(f); flex: none; width: 22px; font: 700 var(--fs-small) var(--body); font-variant-numeric: tabular-nums; color: var(--ink); }
.item-meta { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.btn-text { min-height: 32px; padding: 0 6px; border: 0; background: none; font: 600 var(--fs-small) var(--body); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease), transform .14s var(--ease); }
.btn-text:hover { color: var(--ink); text-decoration-color: currentColor; transform: scale(1.025); }
.btn-text.is-armed, .btn-ghost.is-armed { color: var(--danger); border-color: var(--danger); }
.meta .btn-text { min-height: 0; padding: 0; font-size: inherit; }   /* sits in the line of text, like a word in it */
.add-row { display: flex; align-items: flex-start; gap: var(--sp-xs); min-width: 0; } .add-row textarea { flex: 1; min-width: 0; }
.run-bar { display: flex; align-items: center; gap: 20px; padding-top: var(--sp-lg); border-top: 2px solid var(--ink); }
.run-bar .hint { max-width: 56ch; }
.btn-lg { min-height: 56px; padding: 0 var(--sp-xl); font-size: var(--fs-read); flex: none; }

/* a run in progress: one progress meter (percent + plain label); the AI's steps are never shown to users */
.run { background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--shadow); padding: var(--pad-sheet); display: grid; gap: var(--sp-md); }
.run-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-md); flex-wrap: wrap; }
.meter { position: relative; height: 10px; background: var(--tint); overflow: hidden; }
.meter-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transition: transform .8s var(--ease); }
.meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-sm); margin: -6px 0 0; }
.meter-row [data-label] { font-weight: 600; color: var(--ink); }
.meter-pct { font: 400 var(--fs-figure)/1 var(--display); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.alert { display: grid; gap: var(--sp-2xs); padding: 14px 18px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--danger); color: var(--ink); }
.alert strong { color: var(--danger); }

/* versions: tabs + actions, the provenance band, inline Question/Retry panels (no modal) */
.doc-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
.doc-bar .tabs { min-width: 0; }
.doc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
.doc-bar .tabs { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.doc-bar .tabs a { flex: none; }
.doc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.btn-ghost[aria-expanded="true"] { border-color: var(--ink); background: var(--tint); }
.act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; background: var(--panel); border: 1px solid var(--ink); animation: drop .22s var(--ease); transform-origin: top; }
.act[hidden] { display: none; }
.act-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); flex-wrap: wrap; }
.prov { display: grid; gap: 6px; padding: 14px 18px; background: var(--tint); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.prov p { margin: 0; }
.prov-k { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.prov-q { font-weight: 600; color: var(--ink); }
.prov-a { display: grid; gap: var(--sp-xs); color: var(--text); max-width: 72ch; }
.doc-wrap .doc { margin-top: 0; }

/* inputs folded away once a version exists */
.fold { gap: 0; padding: 0; }
.fold > summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 60px; padding: 0 var(--pad-sheet); cursor: pointer; list-style: none; transition: background-color .2s var(--ease); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 8px; height: 8px; margin-left: var(--sp-2xs); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.fold[open] > summary::after { transform: rotate(225deg) translate(-2px, 0); }
.fold > summary:hover { background: var(--paper); }
.fold > summary:focus-visible { outline-offset: -3px; }
.fold-t { font: 400 var(--fs-title)/1.2 var(--display); color: var(--ink); }
.fold-hint { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.fold[open] .inputs-grid { padding: var(--sp-xs) var(--pad-sheet) var(--pad-sheet); border-top: 1px solid var(--line); padding-top: var(--sp-lg); }

@media (max-width: 720px) {
  :root { --pad-sheet: 20px; }
  .inputs-grid { grid-template-columns: minmax(0, 1fr); }
  .input-col:first-child { padding-right: 0; padding-bottom: var(--sp-lg); }
  .input-col + .input-col { padding-left: 0; padding-top: var(--sp-lg); border-left: 0; border-top: 1px solid var(--line); }
  .run-bar { flex-direction: column; align-items: stretch; } .btn-lg { justify-content: center; }
  .add-row { flex-direction: column; align-items: stretch; } .add-row .btn-primary { justify-content: center; } .doc-actions { width: 100%; } .doc-actions > * { flex: 1; justify-content: center; }
  .fold-hint { order: 2; margin-left: 0; width: 100%; padding-bottom: var(--sp-sm); }
  .fold > summary::after { order: 1; margin-left: auto; }   /* the chevron stays on the title row; the hint goes below */
  .deck-bar { flex-direction: column; align-items: stretch; } .deck-bar .doc-actions { flex-direction: column; }
}

/* solutions checklist, deck size, outline approval, slide plan and per-slide rebuild */
input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; margin: 3px 0 0; padding: 0; flex: none; accent-color: var(--accent); }
.check-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.check-list label { display: flex; gap: var(--sp-sm); align-items: flex-start; padding: 10px var(--sp-2xs); border-bottom: 1px solid var(--line);
  font-weight: 400; font-size: var(--fs-control); color: var(--text); cursor: pointer; transition: background-color .15s var(--ease); }
.check-list label:hover { background: var(--paper); }
.check-list label:has(input:checked) { background: var(--tint); }
.check-body { display: grid; gap: 2px; min-width: 0; }
.check-body strong { color: var(--ink); }
.opt-id { font: 700 var(--fs-small) var(--body); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.opt-what { font-size: var(--fs-small); color: var(--muted); }
.saved { min-height: 1.4em; }
.size-form { display: grid; gap: var(--sp-md); }
.num-field { display: grid; grid-template-columns: auto 96px; gap: var(--sp-2xs) 14px; align-items: center; }
.num-field .hint { grid-column: 1 / -1; }
.num-field input { width: 96px; font-variant-numeric: tabular-nums; }
.size-form .form-sub { margin-top: 14px; }   /* more space above a heading than below it */
.text-field { display: grid; gap: var(--sp-2xs); }
.text-field input { width: 100%; min-width: 0; }
.approved-tag { color: var(--accent-ink); }
.plan-list { margin: 0; padding: 0; list-style: none; columns: 2 280px; column-gap: var(--pad-sheet); font-size: var(--fs-control); }
.plan-list li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.plan-list .opt-id { display: inline-block; min-width: 44px; }

/* sign-in */
.signin { display: grid; place-items: start center; padding: clamp(32px, 10vh, 96px) var(--sp-md); }
.signin .sheet-form { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.topbar-end { display: flex; align-items: center; gap: var(--sp-md); }
.signout { font: 500 var(--fs-small)/1 var(--body); color: var(--white); opacity: .72; background: none; border: 0; padding: var(--sp-xs) 0; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: opacity .2s var(--ease), text-decoration-color .2s var(--ease); }
.signout:hover { opacity: 1; text-decoration-color: currentColor; }

/* Account: the user's own Claude account */
.account .sheet-form { width: min(520px, 100%); }
.account h1 { font-size: 2rem; }
.account-start { display: grid; justify-items: start; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.account-start .btn-text { padding: 0; text-align: left; }
.account-start .btn-primary { line-height: 1.25; padding-block: 10px; }
@media (max-width: 560px) {
  .topbar-note { display: none; }
  .account .sheet-actions { flex-direction: column-reverse; }   /* Proceed on top, full width */
  .account .sheet-actions .btn-primary, .account .sheet-actions .btn-ghost { width: 100%; justify-content: center; }
}
.account-steps { margin: 0; padding-left: 22px; display: grid; gap: var(--sp-sm); }
.account-steps li::marker { font: 400 var(--fs-read) var(--display); color: var(--ink); }
.account-code { display: grid; gap: var(--sp-xs); }
.account-code .btn-text { order: -1; }   /* shown first, but Enter submits Finish */
.account-code input { min-height: 44px; padding: 0 var(--sp-sm); border: 1px solid var(--field); font: 500 var(--fs-control) var(--mono); }

/* hover glossary: every use of a term in a document (the first fully underlined). Resting on one fades in a highlight;
   a moment later its card pops out of the word, above it or to its right (app.js places it). Phones show the card as
   a bottom sheet. */
.term { color: inherit; text-decoration: underline dotted rgb(47 84 235 / .6); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  padding: 1px 2px; margin: -1px -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: help;
  transition: background-color .15s ease-out, text-decoration-color .15s ease-out; }
.term.again { text-decoration-color: rgb(47 84 235 / .4); }   /* a later use: the same card, a quieter mark */
.term:hover { background-color: rgb(47 84 235 / .14); text-decoration-color: var(--accent); transition: background-color .4s var(--ease) .22s, text-decoration-color .4s var(--ease) .22s; }
.term[aria-expanded="true"] { background-color: rgb(47 84 235 / .14); text-decoration-color: var(--accent); }
.gloss-wait { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.gcard { position: fixed; inset: auto; margin: 0; width: min(400px, calc(100vw - 16px)); max-height: min(66vh, 500px); overflow: auto; overscroll-behavior: contain;
  padding: var(--sp-md) 18px 18px; background: var(--panel); color: var(--text); border: 1px solid var(--ink); font: var(--fs-small)/1.5 var(--body); overflow-wrap: normal;
  box-shadow: var(--shadow-over);
  opacity: 0; transform: scale(.94); filter: blur(2px);
  transition: opacity .14s ease-in, transform .14s ease-in, filter .14s ease-in, display .14s allow-discrete, overlay .14s allow-discrete; }
.gcard:popover-open { opacity: 1; transform: none; filter: none; transition-duration: .26s; transition-timing-function: var(--ease); }
@starting-style { .gcard:popover-open { opacity: 0; transform: scale(.94); filter: blur(2px); } }
.gcard:focus { outline: none; } .gcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-sm); margin-bottom: var(--sp-xs); }
.gcard .gc-term { margin: 0; font: 400 1.25rem/1.15 var(--display); color: var(--ink); }
.gc-term span { display: block; margin-top: 3px; font: italic 400 var(--fs-small)/1.3 var(--body); color: var(--muted); }
.gc-close { flex: none; width: 32px; height: 32px; margin: -6px -8px 0 0; display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease); }
.gc-close:hover { color: var(--ink); background: var(--tint); }
.gc-close svg { width: 14px; height: 14px; }
.gcard p, .g-body p { margin: 0 0 10px; }
.gc-lead { color: var(--ink); font-weight: 600; }
.gcard .gc-formula, .g-body .gc-formula { font: 500 var(--fs-small)/1.5 var(--body); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--tint); padding: var(--sp-xs) 10px; }
.gc-facts { margin: 14px 0 0; display: grid; gap: 10px; }
.gc-facts dt { font: 700 var(--fs-label)/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.gc-facts dd { margin: 3px 0 0; }
.gcard .gc-rel, .g-body .gc-rel { display: flex; flex-wrap: wrap; gap: 2px var(--sp-sm); margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.gc-rel span { color: var(--muted); font-weight: 600; }
.gc-rel a { color: var(--accent-ink); text-decoration-color: transparent; transition: text-decoration-color .2s var(--ease); }
.gc-rel a:hover { text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .gcard { inset: auto 0 0 0; width: 100%; max-height: 72vh; border-width: 1px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateY(24px); filter: none; }
  .gcard:popover-open { transform: none; }
  @starting-style { .gcard:popover-open { transform: translateY(24px); } }
}

/* Glossary page */
.signout[aria-current="page"] { opacity: 1; text-decoration-color: currentColor; }
.glossary { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 0 var(--pad-sheet) var(--pad-sheet); display: grid; grid-template-columns: minmax(0, 1fr); }
.g-tools { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: var(--sp-lg) 0 var(--sp-sm); background: var(--panel); border-bottom: 2px solid var(--ink); }
.g-search { position: relative; display: flex; gap: var(--sp-xs); }
.g-search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.g-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px 0 40px; border: 1px solid var(--field); background: var(--panel); color: var(--ink); font: 500 var(--fs-body) var(--body); transition: border-color .2s var(--ease); }
.g-search input:hover, .g-search input:focus { border-color: var(--ink); }
.g-search .btn-ghost { min-height: 48px; }
.g-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--sp-md); }
.g-count { margin: 0; font: 500 var(--fs-small) var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.g-letters { display: flex; flex-wrap: wrap; gap: 2px; margin-right: -6px; }
.g-letters a { min-width: 26px; height: 28px; display: grid; place-items: center; font: 600 var(--fs-small) var(--body); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.g-letters a:hover { background: var(--tint); color: var(--accent-ink); }
.g-empty { margin: var(--sp-lg) 0 0; color: var(--muted); }
.g-group h2 { font-size: var(--fs-title); padding: 26px var(--sp-xs) var(--sp-xs); border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.g-entry { border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.g-entry summary { list-style: none; display: grid; grid-template-columns: minmax(150px, 15rem) minmax(0, 1fr) 12px; gap: var(--sp-2xs) var(--sp-lg); align-items: baseline; padding: var(--sp-sm) var(--sp-xs); cursor: pointer; transition: background-color .2s var(--ease); }
.g-entry summary::-webkit-details-marker { display: none; }
.g-entry summary:hover, .g-entry:target summary, .g-entry[open] summary { background: var(--tint); }
.g-entry summary:focus-visible { outline-offset: -3px; }
.g-term { font: 400 var(--fs-read)/1.3 var(--display); color: var(--ink); }
.g-long { display: block; margin-top: 2px; font: italic 400 var(--fs-small)/1.3 var(--body); color: var(--muted); }
.g-plain { color: var(--text); font-size: var(--fs-control); max-width: 70ch; }
.g-caret { width: 12px; height: 8px; align-self: center; color: var(--muted); transition: transform .25s var(--ease); }
.g-entry[open] .g-caret { transform: rotate(180deg); }
.g-body { padding: 14px var(--sp-xs) 20px calc(15rem + 32px); max-width: calc(15rem + 32px + 70ch); font-size: var(--fs-control); animation: drop .22s var(--ease); transform-origin: top; }
@media (min-width: 721px) {   /* the terms scroll in their own box (Lincoln, 2026-10-16): the wheel over the list moves
     the terms only; anywhere else it moves the page, and the list keeps its place */
  main:has(.glossary) { padding-bottom: var(--sp-md); }
  .glossary { height: calc(100dvh - 2 * var(--sp-md)); grid-template-rows: auto minmax(0, 1fr); padding-bottom: 0; }
  .g-tools { position: static; }
  .g-list { overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-1 * var(--pad-sheet)); padding: 0 var(--pad-sheet) var(--pad-sheet); }
  .g-list:focus-visible { outline-offset: -3px; }
  .g-group h2, .g-entry { scroll-margin-top: 0; }
}
@media (max-width: 720px) {
  .g-tools { position: static; }   /* a sticky search bar would take a quarter of a phone screen */
  .g-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad-sheet)); padding: 0 10px; }
  .g-entry summary { grid-template-columns: minmax(0, 1fr) 12px; }
  .g-plain { grid-column: 1; } .g-caret { grid-row: 1; grid-column: 2; }
  .g-body { padding-left: var(--sp-xs); }
}