/* Venire — the visual design decided 2026-09-22 (reports/2026-09-22-visual-design-decided.html; research/style-register.md).
   Stone ground, Adobe Caslon text under a Domaine Display title (Linotype Didot until 2026-10-13; Bodoni Moda and Baskervville that afternoon), small-caps sections, iron rules. Colour by role: oxblood for the page's own furniture,
   zinc for the panel's voice, sienna / Prussian for direction on lean labels only. Never colour as emphasis. */
/* The title face, Domaine Display Regular (Klim Type Foundry; bought 2026-10-13: web and app licences for nobis.legal),
   and the text face, Adobe Caslon Pro (bought from Fontspring the same day: its web font licence, the files as Fontspring
   supplies them, which carry the Mac Roman characters and no OpenType features beyond ligatures, fractions and
   superscripts, so small caps are drawn by the browser and table figures are not tabular). Both are served from this
   origin, as is the code face, Source Code Pro (SIL Open Font License; Adobe's own file, unaltered, since its licence
   reserves the name "Source"), so the pages load no font from anyone else (the S8 review's row 17, closed).
   web/fonts/README.md says where each file came from and what its licence allows. The paths are relative, so the
   site's copy of this file (site/app.css) finds site/fonts/. */
@font-face { font-family: "Domaine Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/domaine-display-regular.woff2") format("woff2"); }
@font-face { font-family: "Adobe Caslon Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/adobe-caslon-pro-regular.woff2") format("woff2"); }
@font-face { font-family: "Adobe Caslon Pro"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/adobe-caslon-pro-italic.woff2") format("woff2"); }
@font-face { font-family: "Adobe Caslon Pro"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("fonts/adobe-caslon-pro-semibold.woff2") format("woff2"); }
@font-face { font-family: "Adobe Caslon Pro"; font-style: italic; font-weight: 600 700; font-display: swap;
  src: url("fonts/adobe-caslon-pro-semibold-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/source-code-pro-regular.woff2") format("woff2"); }
/* Level figures everywhere (set 2026-10-13 for Baskervville's old-style figures, which set a juror tag G01 as "Go1").
   Important, because any rule's font shorthand resets the property (a counter, a date, a table head did). Caslon's web
   files carry no figure features, so the rule asks nothing of them; it stays for any face that has them. */
*, *::before, *::after { font-variant-numeric: lining-nums !important; }
:root {
  --bg: #E8E4DC; --ink: #1E1E1C; --muted: #5F5D58; --line: #B9B4AA; --surface: #DFDAD1;
  --accent: #6E2A2A; --voice: #3F5F7C; --state: #8F4726; --defense: #2F4F7F; --mixed: #765912;
  --accent-ink: #FFFFFF;
  --band: #2A1917; --band-ink: #F3EDE3; --band-muted: #C2B5A6;   /* the front page's opening (026 S3, 2026-09-24) */
  --font-body: "Adobe Caslon Pro", Georgia, "Times New Roman", serif;
  --font-display: "Domaine Display", "Adobe Caslon Pro", Georgia, serif;
  --font-mono: "Source Code Pro", ui-monospace, Menlo, monospace;
  /* the older names, kept for rules that still use them */
  --card: transparent; --warn: #765912; --warnbg: transparent; --bad: #6E2A2A; --badbg: transparent; --ok: #2F4F7F; --okbg: transparent;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161616; --ink: #ECEAE4; --muted: #A5A29B; --line: #383838; --surface: #1E1E1E;
  --accent: #C9706B; --voice: #93B0CC; --state: #D9946B; --defense: #8FB0DC; --mixed: #D8B85A; --accent-ink: #161616;
  --warn: #D8B85A; --bad: #C9706B; --ok: #8FB0DC; --band: #231A18; --band-muted: #B8AC9C; } }
:root[data-theme="dark"] {
  --bg: #161616; --ink: #ECEAE4; --muted: #A5A29B; --line: #383838; --surface: #1E1E1E;
  --accent: #C9706B; --voice: #93B0CC; --state: #D9946B; --defense: #8FB0DC; --mixed: #D8B85A; --accent-ink: #161616;
  --warn: #D8B85A; --bad: #C9706B; --ok: #8FB0DC; --band: #231A18; --band-muted: #B8AC9C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { letter-spacing: .006em; } }
:root[data-theme="dark"] body { letter-spacing: .006em; }

* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.58 var(--font-body); color: var(--ink); background: var(--bg); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the shells (spec 026 S7, 2026-09-24). Signed in: a bar with the wordmark and its beta tag, Cases and Docs at the left,
   the account menu at the right, over the double iron rule. Signed out: the wordmark centred above one card, the site's links
   under it. One wordmark on both origins: the Didot, as the public bar sets it. */
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.brand .wordmark { font: 400 24px/1 var(--font-display); letter-spacing: .06em; white-space: nowrap; }   /* the name never splits */
/* the lockup (2026-10-11): Nobis by Venire Project, the two names in the same Didot at the same size, "by" small and quiet
   between them (S7.12) */
.brand .product { font: 400 24px/1 var(--font-display); letter-spacing: .06em; white-space: nowrap; }
.brand .by { font: italic 400 17px/1 var(--font-body); color: var(--muted); }
.beta-tag { font: 400 15px/1 var(--font-body); font-variant: small-caps; letter-spacing: .1em; color: var(--accent); }
#bar { background: var(--bg); }
body[data-layout="app"] #bar { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--ink); box-shadow: 0 3px 0 -2px var(--ink); }
.bar-in { max-width: 1000px; margin: 0 auto; padding: 12px 40px 10px; display: flex; align-items: center; gap: 32px; }
.bar-nav { display: flex; gap: 24px; flex: 1; }
.bar-nav a { color: var(--ink); text-decoration: none; font-size: 17px; padding: 4px 0 2px; border-bottom: 1px solid transparent; transition: border-color .12s ease, color .12s ease; }
.bar-nav a:hover { border-bottom-color: var(--line); }
.bar-nav a.on { color: var(--accent); border-bottom-color: var(--accent); }
body[data-layout="auth"] #bar { display: flex; justify-content: center; padding: 48px 16px 0; }
body[data-layout="auth"] main { padding-top: 24px; }
body[data-layout="auth"] #foot { text-align: center; }
.auth-links { display: flex; gap: 24px; justify-content: center; }
.auth-links a { color: var(--muted); text-decoration: none; } .auth-links a:hover { color: var(--ink); text-decoration: underline; }
main { max-width: 1000px; margin: 0 auto; padding: 32px 40px 64px; }
footer { max-width: 1000px; margin: 0 auto; padding: 0 40px 40px; color: var(--muted); font-size: 15px; }
@media (max-width: 820px) { .bar-in, main, footer { padding-left: 16px; padding-right: 16px; } .bar-in { gap: 16px; } .bar-nav { gap: 16px; } }
/* on a phone the name, Cases, Docs and the account menu need about 435 px on one line: the name takes the first line and
   the rest the line under it (2026-09-29: the name is Venire Project, longer than Venire) */
@media (max-width: 520px) { .bar-in { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; } .bar-in > .brand { grid-column: 1 / -1; justify-self: start; } }
/* the lockup is about 350 px at 24 px: below 420 px both names step down together, so neither shrinks alone */
@media (max-width: 420px) { .brand .wordmark, .brand .product { font-size: 20px; } .brand .by { font-size: 15px; } }
@media (max-width: 350px) { .brand .wordmark, .brand .product { font-size: 18px; letter-spacing: .04em; } .brand { gap: 6px; } }

/* the account menu (026 S7.3) */
.acct { position: relative; margin-left: auto; }
.acct-btn { border: 0; padding: 4px 0 2px; font: inherit; font-size: 17px; font-variant: normal; letter-spacing: 0; line-height: 1.2; background: none; border-bottom: 1px solid transparent; }
.acct-btn::after { content: " ▾"; font-size: .7em; color: var(--muted); }
.acct-btn:hover:not(:disabled), .acct-btn[aria-expanded="true"] { background: none; border-bottom-color: var(--line); }
.acct-btn.on { color: var(--accent); border-bottom-color: var(--accent); }
.menu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 248px; background: var(--bg); border: 1px solid var(--ink); padding: 8px 0; z-index: 10; opacity: 0; transition: opacity .15s ease; }
.menu.in { opacity: 1; }
.menu-who { padding: 4px 16px 12px; color: var(--muted); font-size: 15px; border-bottom: 1px solid var(--line); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a { display: block; padding: 8px 16px; color: var(--ink); text-decoration: none; }
.menu a:hover, .menu a:focus-visible { background: var(--surface); outline: none; }
.menu-theme { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px; margin: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.menu-theme .seg { margin: 0; } .menu-theme .seg button { min-width: 0; font-size: 14px; padding: 7px 8px 5px; }

/* feedback where the member acted (026 S7.8, S7.9): the toast and the page's own dialog */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 20; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 8px 14px; font-size: 15px; text-align: center; max-width: min(480px, calc(100vw - 32px)); opacity: 0; transition: opacity .15s ease; }   /* smaller and centred (the user's test run, 2026-10-29, item 9) */
.toast.in { opacity: 1; } .toast.bad { background: var(--bad); color: var(--accent-ink); }
dialog.dlg { border: 1px solid var(--ink); background: var(--bg); color: var(--ink); padding: 0; width: min(520px, calc(100vw - 32px)); opacity: 0; transition: opacity .15s ease; }
dialog.dlg.in { opacity: 1; }
dialog.dlg::backdrop { background: rgba(20, 20, 18, .45); }
.dlg h2 { border: 0; padding: 32px 32px 0; margin: 0 0 24px; font: 400 26px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; }
.dlg-body { padding: 0 32px; } .dlg-body .sub { margin-top: -16px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 16px; padding: 8px 32px 32px; }

/* the page head (026 S7.5), lists (S7.7), waiting (S7.10) */
.page-head { margin: 0 0 32px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; margin: 0 0 8px; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { color: var(--line); }
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.page-title h1 { margin: 0; } .page-title .acts { display: flex; gap: 8px; flex-wrap: wrap; }
table.list tr.link-row { cursor: pointer; transition: background-color .12s ease; }
table.list tr.link-row:hover, table.list tr.link-row:focus-within { background: var(--surface); }
table.list td a { text-decoration: none; } table.list tr.link-row:hover td a { text-decoration: underline; }
.empty { border-top: 1px solid var(--line); padding: 24px 0 0; } .empty p { margin: 0 0 16px; color: var(--muted); }
.loading { color: var(--muted); }

/* the levels: a Didot title, small-caps sections over an iron rule, a semibold sub-level */
h1 { font: 400 36px/1.15 var(--font-display); margin: 0 0 .5em; }
h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; border-top: 1px solid var(--ink); padding-top: 8px; margin: 2.4em 0 .6em; }
h3 { font-size: 1em; font-weight: 600; margin: 1.2em 0 .4em; }
h4 { font-size: 1em; font-weight: 400; font-style: italic; margin: 1em 0 .3em; }
p { margin: 0 0 1em; }

/* no cards: a block is set off by a rule above it */
.card { background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 14px 0 6px; margin: 18px 0; }
.card > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* forms: italic labels, underline-only inputs, small-caps rectangular buttons */
label { display: block; font-weight: 400; font-style: italic; margin: 14px 0 4px; font-size: 16px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { width: 100%; font: inherit; font-size: 16px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 5px 2px 4px; }
/* The typed text sat high above its rule: Caslon sits high in its line box, so the box's own line is tighter and the
   space above it larger (the user's test run, 2026-10-29, item 5). Every text, email, password and number box. */
input[type=text], input[type=email], input[type=password], input[type=number] { line-height: 1.2; padding: 9px 2px 3px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }   /* 2px since 2026-10-30: the hairline was hard to see (the release review, UX-20) */
textarea { min-height: 90px; resize: vertical; border: 1px solid var(--line); padding: 8px 10px; }
textarea:focus { border-color: var(--accent); box-shadow: none; }
select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0h10L5 6z' fill='%236E2A2A'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; }
/* the designed dropdown (web/listbox.js): a button in the field's own style and a list on the page's ground; the native select stays hidden beneath */
.sel { position: relative; }
.sel > .sel-btn { width: 100%; text-align: left; font: inherit; font-size: 16px; font-variant: normal; letter-spacing: 0; line-height: 1.4; padding: 5px 26px 4px 2px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: inherit; white-space: normal; }
.sel > .sel-btn::after { content: "▾"; position: absolute; right: 4px; top: 5px; font-size: .9em; color: var(--accent); }
.sel > .sel-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.sel ul { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 4px 0; list-style: none; background: var(--bg); border: 1px solid var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 3; display: none; max-height: 320px; overflow: auto; }
.sel.open ul { display: block; }
.sel li { padding: 6px 10px; cursor: pointer; font-size: 16px; }
.sel li:hover { background: var(--surface); }
.sel li[aria-selected="true"] { color: var(--accent); }
.sel li[aria-selected="true"]::before { content: "· "; }
/* Small caps have no descenders and the text face carries a deep descender space, so a symmetric pad sets the label high; 11/8 centres the ink (set for Caslon; checked with Baskervville 2026-10-13, and with Caslon again the same day) */
button { font: inherit; font-size: 16px; font-variant: small-caps; letter-spacing: .1em; line-height: 1; padding: 11px 16px 8px; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; cursor: pointer; white-space: nowrap; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Starting over with a new encryption key erases saved work (2026-10-19): the one destructive button, in the error colour. */
button.danger { border-color: var(--bad); color: var(--bad); } button.danger:hover:not(:disabled) { background: var(--bad); color: var(--accent-ink); }
details.change-email { margin: 4px 0 20px; } details.change-email > summary { cursor: pointer; color: var(--accent); }
/* Continue with Google (023 S2, 2026-10-12): Google's sign-in branding, the one button that leaves the app's small caps;
   a neutral fill, the G mark at the left, sentence case, its own colours by day and by night */
button.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px;
  font: 500 14px/1 Roboto, "Helvetica Neue", Arial, sans-serif; font-variant: normal; letter-spacing: .25px; border-radius: 4px;
  background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; }
button.google:hover:not(:disabled) { background: #F2F2F2; }
button.google img { width: 18px; height: 18px; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
  :root:not([data-theme="light"]) button.google:hover:not(:disabled) { background: #1E1F20; } }
:root[data-theme="dark"] button.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
:root[data-theme="dark"] button.google:hover:not(:disabled) { background: #1E1F20; }
p.or { text-align: center; color: var(--muted); margin: 16px 0 8px; }
button, .btn { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
button:hover:not(:disabled), .btn:hover { background: var(--surface); }
button.primary:hover:not(:disabled), .btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row { display: flex; gap: 20px; flex-wrap: wrap; align-items: end; } .row > * { flex: 1 1 160px; }
label.check { display: flex; align-items: center; gap: 8px; font-style: normal; margin-top: 12px; } label.check input { width: auto; margin: 0; }
.flagbtn { font-size: 13px; padding: 7px 10px 5px; margin-top: 6px; }

.muted { color: var(--muted); } .small { font-size: 15px; }
.note { padding: 6px 0 6px 12px; border-left: 2px solid var(--line); border-radius: 0; margin: 12px 0; font-size: 16px; background: transparent; }
.note a { overflow-wrap: anywhere; }   /* a long address in a note (the local server's sign-in link) wraps on a phone */
.note.warn { border-color: var(--warn); color: var(--ink); } .note.bad { border-color: var(--bad); color: var(--bad); } .note.ok { border-color: var(--ok); color: var(--ink); }
.mono { font-family: var(--font-mono); font-size: 13px; }
.progress { font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; max-height: 260px; overflow: auto; background: var(--surface); padding: 10px 12px; border-radius: 0; border-left: 2px solid var(--line); }
.key-display { font-family: var(--font-mono); background: var(--surface); padding: 6px 10px; border-radius: 0; display: inline-block; }

/* the panel: a juror is a row under a dotted hairline; the tag is the panel's voice */
.persona { border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; padding: 10px 0; margin: 0; background: transparent; }
.persona .who { font-weight: 600; } .persona .thumb { color: var(--muted); font-size: 15px; }
.card .who { font-weight: 600; }
a.tag { font-weight: 600; color: var(--voice); text-decoration: none; border-bottom: none; } a.tag:hover { border-bottom: 1px solid var(--voice); } a.cardlink { font-size: 13px; color: var(--muted); }

/* lean labels: small caps, no fills. Direction hues only — toward the State (sienna), toward the defense (Prussian), unsure (stone).
   The other chip families (stance, landed, reach, change, flag) read for or against the argument under test and take the same pair;
   a mixed or changed reading takes ochre. Never red/green. */
.lean { display: inline-block; font-variant: small-caps; letter-spacing: .06em; font-size: .85em; padding: 0; border-radius: 0; background: transparent; margin-left: 6px; color: var(--muted); }
.lean.defense, .lean.member, .lean.leaning_life, .lean.flag_fragile, .lean.flag_held, .lean.stance_holds, .lean.landed_helped, .lean.landed_reached, .lean.reach_reaches, .lean.change_same { color: var(--defense); }
.lean.prosecution, .lean.other, .lean.leaning_death, .lean.flag_opposite, .lean.stance_collapses, .lean.landed_hurt, .lean.landed_excuse, .lean.reach_never_touches { color: var(--state); }
.lean.flag_split, .lean.stance_erodes, .lean.landed_mixed, .lean.reach_circles, .lean.changed, .lean.change_changes { color: var(--mixed); }
.lean.parse_fail { color: var(--bad); } .lean.leaning_unsure, .lean.landed_discounted { color: var(--muted); }
.lean.mono { font-variant: normal; letter-spacing: 0; }

table { border-collapse: collapse; width: 100%; font-size: .92em; }
.table-scroll { overflow-x: auto; }   /* a table wider than a phone scrolls in its own box, not the page */
td, th { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
th { font-variant: small-caps; letter-spacing: .06em; font-weight: 400; border-bottom: 1px solid var(--ink); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums !important; }
table.key td { vertical-align: top; }
/* the models table: the notes keep a reading width, and the cost head wraps as the id does (at its parts, app.js), so it fits
   the settings column on a laptop and on a phone scrolls a short way instead of standing as a tower one word wide (2026-09-29) */
table.models td:last-child { min-width: 18em; } table.models th.num { white-space: normal; }
ul.quotes { list-style: none; padding-left: 0; margin: .4em 0; } ul.quotes li { font-style: italic; border-left: 1px solid var(--voice); padding-left: 1em; margin: .5em 0; }
.quote { font-style: italic; }
.terms { max-height: 380px; overflow: auto; border: 1px solid var(--line); padding: 12px 16px; background: transparent; border-radius: 0; font-size: 15px; }
.terms + .terms { margin-top: 16px; } .terms + .field.check { margin-top: 24px; }   /* the two documents and the attestation apart (the user's test run, 2026-10-29, item 2) */
.terms h1, .terms h2 { font: 600 15px/1.4 var(--font-body); border: 0; padding: 0; margin: 12px 0 4px; letter-spacing: 0; text-transform: none; }
ul.tight { margin: 4px 0; padding-left: 20px; } ul.tight li { margin: 3px 0; }
.footnote { color: var(--muted); font-size: 15px; border-top: 1px dotted var(--line); padding-top: 8px; margin-top: 16px; }
details.appendix, details.about { margin: 16px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 8px 0; }
details.appendix > summary { cursor: pointer; font-variant: small-caps; letter-spacing: .1em; font-size: 16px; font-weight: 400; } details.appendix > summary::before { content: "▸ "; color: var(--accent); } details[open].appendix > summary::before { content: "▾ "; }
details.about { color: var(--muted); font-size: 15px; } details.about > summary { cursor: pointer; } details.about > summary::before { content: "▸ "; color: var(--accent); } details[open].about > summary::before { content: "▾ "; }
.theme-test h3.seg-head { font-weight: 400; font-style: italic; margin: 12px 0 4px; }

/* compare view (spec 014 D3 item 7, 2026-09-05) */
li.added { color: var(--defense); } li.removed { color: var(--state); text-decoration: line-through; } tr.moved td { background: var(--surface); }

/* wording versus wording (spec 019 scope note, 2026-09-08) */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.two-col{grid-template-columns:1fr}}
tr.differs td{background:var(--surface)}

/* the loading screen (spec 011 waiting item, 2026-09-12): the room filling in; numbers from web/runtime/progress.js */
.room { border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 14px 0; margin: 18px 0; background: transparent; }
.room-title { margin-bottom: 4px; }
.room-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.room-doing { font-weight: 600; } .room-count { font-size: 15px; color: var(--muted); }
.room-phases { margin: 6px 0 0; padding-left: 18px; } .room-phases li { margin: 2px 0; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.seat { border: 1px solid var(--line); border-radius: 0; padding: 7px 9px; min-height: 52px; background: transparent; transition: background .4s, border-color .4s; }
.seat .who { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seat .what { font-size: 13px; color: var(--muted); }
.seat.waiting { color: var(--muted); border-style: dashed; } .seat.waiting .who { color: var(--muted); font-weight: 400; }
.seat.running { border-color: var(--accent); animation: seat-pulse 1.6s ease-in-out infinite; }
.seat.done { border-color: var(--ink); } .seat.done .what { color: var(--ink); }
.seat.done.partial { border-color: var(--warn); } .seat.done.partial .what { color: var(--warn); }
.seat.done.bad { border-color: var(--bad); } .seat.done.bad .what { color: var(--bad); }
@keyframes seat-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--surface); } }
.room.still .seat.running { animation: none; }
.room-analyst { margin-top: 12px; }
.room-analyst-bar { height: 6px; border-radius: 0; background: var(--surface); overflow: hidden; }
.room-analyst-bar .fill { height: 100%; background: var(--accent); width: 0; transition: width 1s linear; }
.room-analyst-bar.over .fill { background: var(--warn); width: 100% !important; }
.room-analyst-bar.unknown { background: repeating-linear-gradient(90deg, var(--surface) 0 8px, var(--line) 8px 16px); }
.room-analyst-text { margin-top: 6px; color: var(--muted); }
.room-text { margin-top: 12px; } .room-text.bad { color: var(--bad); }
.room-foot { margin-top: 6px; }
.seat.stopped { border-color: var(--line); color: var(--muted); } .seat.stopped .what { color: var(--muted); }

/* the report: the reading layout (spec 011, 2026-09-13; the same rules live in report.js REPORT_CSS for the exported file) */
.report-shell { display: grid; grid-template-columns: 180px minmax(0, 720px); gap: 48px; }
.report-article { font-size: 19px; line-height: 1.58; }
.report-article h2 { counter-increment: sec; margin: 3em 0 .6em; padding-bottom: 0; border-bottom: 0; }
.report-article, .report-article .tabpanel { counter-reset: sec; } .report-article h2::before { content: counter(sec, upper-roman) "  ·  "; color: var(--accent); }   /* numbered within each part, on screen and on paper alike */
.report-article h2:first-of-type { margin-top: 1.6em; }
.report-article .meta, .report-article .small, .report-article table, .report-article .thumb { font-size: .92em; }
[id] { scroll-margin-top: 12px; }
.toc { position: sticky; top: 12px; align-self: start; font-size: 14px; max-height: calc(100vh - 24px); overflow: auto; }
.toc-title { font-variant: small-caps; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px; font-size: 14px; font-weight: 400; }
.toc ol { list-style: none; margin: 0; padding: 0; } .toc a { display: block; padding: 3px 0 3px 10px; border-left: 1px solid var(--line); color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); border-left-color: var(--ink); } .toc-top { margin-top: 10px; font-size: 13px; }
.toc .toc-group { margin: 10px 0 2px; font-variant: small-caps; letter-spacing: .12em; color: var(--accent); font-size: 13px; }
.toc .toc-group:first-child { margin-top: 0; }
@media (max-width: 860px) { .report-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; } .toc { position: static; max-height: none; border-top: 1px solid var(--line); padding: 8px 0; } .toc ol { display: flex; flex-wrap: wrap; gap: 2px 10px; } .toc a { border-left: none; padding: 3px 0; } }
tr.hit td { background: var(--surface); } .persona.hit { box-shadow: -6px 0 0 -4px var(--accent); }
.masthead { border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px;; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
/* the stamp (spec 011, 2026-10-14): first in the markup, placed at the right across the masthead's three lines */
.masthead > * { grid-column: 1; } .masthead > .stamp { grid-column: 2; grid-row: 1 / span 3; width: 88px; height: 88px; color: var(--ink); display: block; }
/* on a phone the stamp stands beside the name alone (the two stacked) and the case takes the full width */
@media (max-width: 520px) { .masthead { column-gap: 12px; } .masthead > .stamp { grid-row: 1; width: 72px; height: 72px; }
  .masthead > h1, .masthead > .meta { grid-column: 1 / -1; } .masthead .brandline { flex-direction: column; align-items: flex-start; gap: 4px; } }
.masthead .brandline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.masthead .wordmark { font: 400 20px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.masthead .doc-kind { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; }
.masthead h1 { margin: 10px 0 4px; } .masthead .meta { margin: 0; color: var(--muted); font-size: .92em; }
.qbank .question { font-style: italic; margin: 6px 0; } .qbank .who .lean.mono { font-size: 12px; }
.print-foot { display: none; }
/* the report's tabs (spec 011, 2026-09-14; the same rules in report.js REPORT_CSS): four related panels a reader consults one at a
   time; the read is the default; print shows every panel in order with its name as a part heading */
.tabs { display: flex; flex-wrap: wrap; gap: 2px 18px; border-bottom: 1px solid var(--ink); margin: 18px 0 6px; padding: 0; }
.tabs [role="tab"] { font: inherit; font-size: 16px; font-variant: small-caps; letter-spacing: .1em; line-height: 1; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 2px 6px; cursor: pointer; border-radius: 0; }
.tabs [role="tab"]:hover { color: var(--ink); } .tabs [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabpanel > .tabname { display: none; }
.cross-section td.num, .cross-section th.num { text-align: right; }

/* Print / PDF (spec 011, open question closed 2026-09-02, built 2026-09-13; the design's paper version 2026-09-22): the report alone,
   the collapsed blocks opened by app.js on beforeprint. Black on white; the same faces and rules at paper sizes. */
@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; font-size: 11.5pt; line-height: 1.45; letter-spacing: 0; }
  header, footer, .toasts, .screen-only, button, .toc, a.cardlink, .card:not(.qbank):not(.report .card), .room, .progress { display: none !important; }
  main { max-width: none; padding: 0; } .report-shell { display: block; } .table-scroll { overflow: visible; } .report-article { font-size: 11.5pt; }
  a { color: #000; text-decoration: none; } a.tag { color: #000; }
  h1 { font-size: 22pt; } h2 { font-size: 9.5pt; border-top-color: #000; color: #000; break-after: avoid; page-break-after: avoid; } .report-article h2::before { color: #000; }
  .masthead { border-bottom-color: #000; } .masthead .doc-kind { color: #000; } .masthead .meta { color: #000; } .masthead > .stamp { width: 24mm; height: 24mm; color: #000; }
  details { display: block; border: none; padding: 0; } details > summary { display: none; }
  details.appendix, details.about { border: none; padding: 0; }
  .tabs { display: none !important; } .report-article .tabpanel[hidden] { display: block !important; }
  .tabpanel > .tabname { display: block; font-size: 9.5pt; letter-spacing: .14em; text-transform: uppercase; color: #000; margin: 18pt 0 -6pt; break-after: avoid; }
  .persona, .card, tr, .note { break-inside: avoid; page-break-inside: avoid; }
  table { font-size: 10pt; } th { border-bottom-color: #000; } td { border-bottom-color: #999; }
  .lean, .lean.defense, .lean.prosecution { color: #000; } ul.quotes li { border-left-color: #000; }
  .print-foot { display: block; margin-top: 24px; padding-top: 6px; border-top: 1px solid #000; font-size: 9.5pt; color: #000; }
}

.service-banner { max-width: 1000px; margin: 12px auto 0; font-weight: 600; padding: 0 40px; }
@media print { .service-banner { display: none; } }

/* ---- the spine (spec 026, 2026-09-22): checkpoint frames, the settings sub-nav, the run screen, the case foot ---- */
.btn { display: inline-block; font-size: 16px; font-variant: small-caps; letter-spacing: .1em; line-height: 1; padding: 11px 16px 8px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; white-space: nowrap; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.frame { max-width: 560px; margin: 32px auto; border: 0; background: var(--surface); }   /* a shade, not a box (user, 2026-09-24) */
.frame.wide { max-width: 720px; }
.frame > .body { padding: 32px; }
.frame .counter { font-variant: small-caps; letter-spacing: .1em; color: var(--muted); font-size: 15px; margin: 0 0 8px; }
body[data-layout="auth"] .frame { margin: 0 auto; }
.frame h1 { font-size: 30px; margin: 0 0 24px; }
.frame .lede { margin: -8px 0 24px; color: var(--muted); }
.frame > .foot { display: flex; justify-content: space-between; align-items: center; padding: 0 32px 32px; }
.foot-link { color: var(--muted); font-variant: small-caps; letter-spacing: .1em; text-decoration: none; }
.field { margin-bottom: 24px; } .field > label { margin: 0 0 8px; }
.field.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; } .field.check input { width: auto; margin-top: 6px; } .field.check label { margin: 0; font-style: normal; }
.consequence { border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; margin: 0 0 24px; }
.sub { color: var(--muted); font-size: 15px; margin: 0 0 24px; }
.connector { border-top: 1px solid var(--line); padding: 16px 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: start; }
.connector:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.connector h3 { margin: 0; font-size: 17px; font-weight: 600; grid-column: 1; }
.connector p { margin: 0; grid-column: 1; } .connector .terms-line { color: var(--muted); font-size: 15px; }
.connector > .acts { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; } .connector > .acts .sub { margin: 8px 0 0; }
.connector > .fields { grid-column: 1 / -1; padding-top: 8px; }
.seg { display: flex; margin-bottom: 8px; } .seg button { border-right-width: 0; min-width: 64px; } .seg button:last-child { border-right-width: 1px; } .seg button.on { background: var(--ink); color: var(--bg); }
.est { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 16px 0; margin: 32px 0 24px; }
.est h2 { border: 0; padding: 0; margin: 0 0 8px; } .est p { margin: 0 0 4px; font-size: 19px; } .est p.sub { font-size: 15px; margin: 4px 0 0; }
/* settings: the sections at the left, the section at the right (026 S7.6) */
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; position: sticky; top: 88px; }
.settings-nav a { display: block; padding: 8px 12px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; transition: background-color .12s ease, color .12s ease; }
.settings-nav a:hover { color: var(--ink); background: var(--surface); }
.settings-nav a.on { color: var(--ink); border-left-color: var(--accent); background: var(--surface); }
.settings-body > h1:first-child { margin-top: 4px; }
/* on a phone the one column is minmax(0, 1fr): 1fr cannot narrow below its widest table, and took the page with it (2026-09-29) */
@media (max-width: 720px) { .settings { grid-template-columns: minmax(0, 1fr); gap: 24px; } .settings-nav { flex-direction: row; overflow-x: auto; position: static; border-bottom: 1px solid var(--line); }
  .settings-nav a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; background: none; } .settings-nav a.on { border-bottom-color: var(--accent); background: none; } }
/* a checkpoint at the foot of a long page stays in view (026 S7.5) */
.case-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--ink); padding: 16px 0; margin: 48px 0 0; position: sticky; bottom: 0; background: var(--bg); z-index: 4; }
.frame details { margin-bottom: 24px; } .frame details > summary { font-variant: small-caps; letter-spacing: .08em; cursor: pointer; }
.term { border-bottom: 1px dotted var(--voice); position: relative; cursor: help; outline: none; }
.term .tip { display: none; position: absolute; left: 0; top: 1.5em; z-index: 3; width: 300px; background: var(--bg); border: 1px solid var(--ink); padding: 8px 12px; font-size: 15px; line-height: 1.4; color: var(--ink); font-variant: normal; letter-spacing: 0; }
.term:hover .tip, .term:focus .tip { display: block; }
@media (max-width: 720px) { .frame > .body, .frame > .foot { padding-left: 16px; padding-right: 16px; } .connector { grid-template-columns: 1fr; } .connector > .acts { grid-column: 1; grid-row: auto; text-align: left; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* two-step sign-in's setup (2026-10-29): the QR code on white whatever the theme, so every authenticator app reads it; the
   setup code selectable in one press, for a password manager */
.two-step .qr { display: block; width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 6px; margin: 8px 0 16px; }
.setup-code { font-size: 15px; letter-spacing: .04em; word-break: break-all; user-select: all; }
.factors { list-style: none; padding: 0; margin: 8px 0; }
.factors li { display: flex; gap: 12px; align-items: center; padding: 4px 0; }
/* the terms' two scroll boxes take keyboard focus (the release review, UX-03), shown as other focus is */
.terms:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

/* ---- The app in the site's look: A, the cloth (the user, 2026-10-30: "A, the cloth"; reports/2026-10-30-site-and-app-
   addresses-plan.html decision 6; spec 026 S3, S7). The site's ground (the stone, its grain, the lamplight from the upper
   left), its chapter colours by area (Cases and a case in slate, a run and its report in claret, Settings in teal, the
   signed-out screens in the base), each working page opening on a band of its area's cloth with the title in gilt, and
   the section heads in Domaine in the area's colour. No Daumier prints. Fields, tables, dialogs and the report keep their
   own surfaces. Scoped to body[data-layout], so the website, which loads this file for its tokens, is untouched. */
body[data-layout] { --c-slate: #34475C; --c-claret: #6B2C33; --c-teal: #2E4D50; --c-base: #2B2A28;
  --on-c: #F3EDE3; --on-c-muted: #D9D0C2; --gilt: #DCC38E; --c: var(--c-base); --c-ink: var(--c-base); --bg: #EEE8DC; }
body[data-area="cases"] { --c: var(--c-slate); --c-ink: var(--c-slate); }
body[data-area="run"] { --c: var(--c-claret); --c-ink: var(--c-claret); }
body[data-area="settings"] { --c: var(--c-teal); --c-ink: var(--c-teal); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-layout] { --bg: #161616; --c-ink: #C9C2B6; }
  :root:not([data-theme="light"]) body[data-area="cases"] { --c-ink: #8FA6BF; } :root:not([data-theme="light"]) body[data-area="run"] { --c-ink: #CF7F88; }
  :root:not([data-theme="light"]) body[data-area="settings"] { --c-ink: #86B0B2; } }
:root[data-theme="dark"] body[data-layout] { --bg: #161616; --c-ink: #C9C2B6; }
:root[data-theme="dark"] body[data-area="cases"] { --c-ink: #8FA6BF; } :root[data-theme="dark"] body[data-area="run"] { --c-ink: #CF7F88; }
:root[data-theme="dark"] body[data-area="settings"] { --c-ink: #86B0B2; }
/* the ground: warm light from the upper left, fixed to the window, and the paper grain (low at night), as the site's */
body[data-layout] { overflow-x: clip;   /* the band reaches the window's edges; nothing may scroll sideways for it */
  background-image: radial-gradient(1400px 900px at 18% -8%, rgba(255, 238, 205, .75), rgba(255, 238, 205, 0) 70%), url("grain.svg");
  background-attachment: fixed, scroll; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-layout] { background-image: radial-gradient(1400px 900px at 18% -8%, rgba(255, 196, 130, .08), rgba(255, 196, 130, 0) 70%), url("grain.svg"); } }
:root[data-theme="dark"] body[data-layout] { background-image: radial-gradient(1400px 900px at 18% -8%, rgba(255, 196, 130, .08), rgba(255, 196, 130, 0) 70%), url("grain.svg"); }
body[data-layout] #bar { background: transparent; }
body[data-layout="app"] #bar { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); }
body[data-layout="app"] .bar-nav a.on { color: var(--c-ink); border-bottom-color: var(--c-ink); }
/* the cloth: a working page's head is a band of the area's colour across the window, lit from above and darker at the
   foot, a woven grain; the title in gilt and everything else on it in the cloth's cream */
body[data-layout="app"] main { padding-top: 0; }
body[data-layout="app"] .page-head { position: relative; isolation: isolate; margin: 0 0 36px; padding: 40px 0 32px;
  --ink: var(--on-c); --muted: var(--on-c-muted); --line: rgba(243, 237, 227, .3); --surface: rgba(243, 237, 227, .08); color: var(--on-c); }
body[data-layout="app"] .page-head::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background-color: var(--c);
  background-image: radial-gradient(140% 110% at 16% 0%, rgba(255, 228, 184, .15), rgba(255, 228, 184, 0) 58%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .2)), url("linen.svg"); }
body[data-layout="app"] .page-head h1 { color: var(--gilt); font-size: 44px; margin-bottom: 0; }
body[data-layout="app"] .page-head .crumbs a { color: var(--on-c-muted); } body[data-layout="app"] .page-head .crumbs a:hover { color: var(--on-c); }
body[data-layout="app"] .page-head button, body[data-layout="app"] .page-head .btn { color: var(--on-c); border-color: var(--on-c-muted); background: transparent; }
body[data-layout="app"] .page-head button:hover:not(:disabled), body[data-layout="app"] .page-head .btn:hover { background: rgba(243, 237, 227, .1); }
body[data-layout="app"] .page-head button.primary, body[data-layout="app"] .page-head .btn.primary { border-color: var(--on-c); }
@media (max-width: 720px) { body[data-layout="app"] .page-head { padding: 28px 0 22px; margin-bottom: 24px; } body[data-layout="app"] .page-head h1 { font-size: 34px; } }
/* the section heads: Domaine in the area's colour, in place of the small capitals over a rule (the report, dialogs, the
   terms' boxes and the cost estimate keep their own) */
body[data-layout] main h2:not(.report-article h2, .dlg h2, .terms h2, .est h2) { font: 400 24px/1.2 var(--font-display); text-transform: none;
  letter-spacing: 0; color: var(--c-ink); border-top-color: var(--line); padding-top: 14px; }
/* the primary action in the area's colour */
body[data-layout] button.primary, body[data-layout] .btn.primary { background: var(--c); border-color: var(--c); color: var(--on-c); }
body[data-layout] button.primary:hover:not(:disabled), body[data-layout] .btn.primary:hover { background: color-mix(in srgb, var(--c) 85%, #000); }
/* at night the base cloth is too near the ground for a button: there, as on the site, the primary is cream */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-layout]:not([data-area]) :is(button.primary, .btn.primary) { background: var(--on-c); border-color: var(--on-c); color: #1E1E1C; }
  :root:not([data-theme="light"]) body[data-layout]:not([data-area]) :is(button.primary:hover:not(:disabled), .btn.primary:hover) { background: color-mix(in srgb, var(--on-c) 85%, #000); } }
:root[data-theme="dark"] body[data-layout]:not([data-area]) :is(button.primary, .btn.primary) { background: var(--on-c); border-color: var(--on-c); color: #1E1E1C; }
:root[data-theme="dark"] body[data-layout]:not([data-area]) :is(button.primary:hover:not(:disabled), .btn.primary:hover) { background: color-mix(in srgb, var(--on-c) 85%, #000); }
body[data-layout] .settings-nav a.on { border-left-color: var(--c-ink); }
@media (max-width: 720px) { body[data-layout] .settings-nav a.on { border-bottom-color: var(--c-ink); } }
/* the signed-out card: the base cloth as a rule along its top */
body[data-layout="auth"] main > *:first-child { border-top: 3px solid var(--c); }
@media print { body[data-layout] { background-image: none; } body[data-layout="app"] .page-head::before { display: none; }
  body[data-layout="app"] .page-head, body[data-layout="app"] .page-head h1 { color: #000; } }