/* typotron web — the one stylesheet.  Tokens on :root (light), dark under prefers-color-scheme and
 * [data-theme]; every colour is a token, never defined only in a media block.  See docs/UI_DESIGN.md. */

/* ================================================================================== tokens */
/* The ACCSTACK scheme (accstack.org site.css): paper, ink, muted, line, card, one accent and its soft tint, light on
 * :root and dark under prefers-color-scheme / [data-theme].  The app's older token names stay as aliases of these,
 * so src/*.js (cssVar('--panel'), the inline var(--bar), var(--accent-bg) … in the SVGs) keeps working. */
:root {
  color-scheme: light;
  --paper: #fbfaf7;           /* page */
  --ink: #17181a;             /* text, primary buttons, filled bars and cells */
  --muted: #6b6f76;
  --line: #e2e0da;            /* borders */
  --card: #ffffff;            /* panels */
  --accent:#4f46e5;          /* links, selected states, the hand, the one colour */
  --accent-soft:#e8e7fb;     /* selected backgrounds, highlights */

  /* aliases: the names the rules below and the JS use */
  --panel: var(--card);
  --panel-2: #f4f3ef;         /* table heads, hovers, quiet fills */
  --ink-2: var(--muted);
  --ink-3: #9a9ea5;
  --rule: var(--line);
  --rule-2: #edebe6;
  --accent-ink: var(--paper); /* text on a solid accent (hover states only) */
  --accent-bg: var(--accent-soft);
  --loser: #b45309;           /* L, losers, ties, the no-verdict: the one semantic hue kept inside the data */
  --loser-bg: #fbf1e3;
  --fatal: var(--accent);     /* the fatal !, errors */
  --fatal-bg: var(--accent-soft);
  --bar: var(--ink);          /* HG weight bars, harmony, progress: filled = ink */
  --bar-bg: #efeeea;
  --select: var(--accent-soft);
  --code-bg: #f1f0eb;
  --shadow: 0 1px 2px rgba(23, 24, 26, 0.05), 0 6px 20px rgba(23, 24, 26, 0.05);
  --focus: var(--accent);

  --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  /* 1.2 scale from 13px */
  --fs-0: 13px;
  --fs-1: 15.6px;
  --fs-2: 18.7px;
  --fs-3: 22.5px;
  --fs-4: 27px;
  --fs-5: 32.4px;
  --fs-xs: 11.5px;
  --fs-cell: 14px;
  --fs-verdict: 28px;

  --radius: 10px;
  --radius-s: 6px;
  --gap: 12px;
  --pad: 14px;
  --mast-h: 64px;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121316; --ink: #ecebe6; --muted: #a3a7ad; --line: #2c2e33; --card: #1a1b1f;
    --accent:#818cf8; --accent-soft:#23234f;
    --panel-2: #202127; --ink-3: #777b83; --rule-2: #24262b;
    --loser: #f59e0b; --loser-bg: #3a2a10;
    --bar-bg: #26272c; --code-bg: #202126;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121316; --ink: #ecebe6; --muted: #a3a7ad; --line: #2c2e33; --card: #1a1b1f;
  --accent:#818cf8; --accent-soft:#23234f;
  --panel-2: #202127; --ink-3: #777b83; --rule-2: #24262b;
  --loser: #f59e0b; --loser-bg: #3a2a10;
  --bar-bg: #26272c; --code-bg: #202126;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ================================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-0) / 1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0 0 0.6em; }
code, kbd, pre, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-xs); }
.link { color: var(--accent); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--select); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--panel); color: var(--ink); padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius-s); z-index: 100; }
.skip:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* while the theme flips (app.js sets this for two frames) nothing transitions, so the page changes as one
   piece instead of every panel, chip and card fading at its own pace */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* ================================================================================== ACCSTACK strip */
/* the thin site bar above the app's own header: the wordmark (Bricolage Grotesque 800, ST in the accent) and the
   site nav; the current app's link carries aria-current.  On a narrow screen the nav wraps; nothing overflows. */
.acc-strip { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; min-height: 44px; padding: 6px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.acc-mark { font-family: "Bricolage Grotesque", var(--font-display); font-weight: 800; font-optical-sizing: auto; font-size: 1.2rem; line-height: 1; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; flex: none; }
.acc-mark .acc-a { color: var(--ink); }
.acc-mark .acc-s { color: var(--accent); }
.acc-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9rem; min-width: 0; }
.acc-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.acc-nav a[aria-current] { color: var(--ink); font-weight: 500; }
.acc-nav a:hover { color: var(--accent); }
@media (max-width: 480px) { .acc-nav { gap: 2px 12px; font-size: 0.85rem; } }

/* ================================================================================== masthead */
.masthead {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  min-height: var(--mast-h);
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  position: relative;                 /* the phone menu (.mast-more) drops down from the strip */
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1 1 24rem; }   /* the wordmark line, the claim under it; the claim wraps before the tools do */
.wordmark { font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.02em; }
.wordmark-link { color: var(--ink); text-decoration: none; }
.wordmark-sub { margin-left: 0.55em; color: var(--ink-2); font-family: var(--font-body); font-size: var(--fs-0); font-weight: 400; letter-spacing: 0; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }   /* the subtitle: "an exact typology calculator", a button that opens the exact dialog */
.wordmark-sub:hover, .wordmark-sub:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.wordmark-hand { color: var(--accent); font-family: var(--font-body); font-weight: 400; margin-right: 0.18em; font-size: 0.85em; vertical-align: 0.04em; }   /* the pointing hand: the one glyph every tableau carries */
.claim { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 110ch; }
.mast-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
/* Theme and ? are ordinary strip buttons on a wide screen (the group is transparent to the layout; the ⋯ button is
   gone); under 900 px the ⋯ button folds them into one dropdown (see the phone rules below) */
.mast-more { display: contents; }
.mast-more-btn { display: none; font-weight: 700; letter-spacing: 0.05em; padding-inline: 8px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
  background: var(--panel-2); color: var(--ink-2);
}
.badge-exact { border-color: var(--accent); color: var(--ink); background: var(--accent-bg); }
.badge-what { border-color: var(--accent); color: var(--ink); background: var(--accent-bg); text-decoration: none; }

.badge-exact::before { content: "="; font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.badge-ok { border-color: var(--accent); color: var(--ink); background: var(--accent-bg); }
.badge-bad { border-color: var(--fatal); color: var(--fatal); background: var(--fatal-bg); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: var(--fs-xs); font-family: var(--font-mono); white-space: nowrap;
  background: var(--panel-2); color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill-loading { color: var(--muted); border-color: var(--line); background: var(--panel-2); }
.pill-loading::before { animation: pulse 1.2s ease-in-out infinite; }
.pill-ready { color: var(--ink); border-color: var(--accent); background: var(--accent-bg); }
.pill-ready::before { background: var(--accent); }
.pill-busy { color: var(--ink); border-color: var(--ink); background: var(--bar-bg); }
.pill-busy::before { animation: pulse 0.9s ease-in-out infinite; }
.pill-error { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ================================================================================== buttons and inputs */
.btn {
  font: inherit; font-weight: 500; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-s);
  padding: 6px 12px; cursor: pointer; line-height: 1.3;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--ink-3); background: var(--panel-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 9px; font-size: var(--fs-xs); }
a.btn { display: inline-block; text-decoration: none; }   /* the Tutorial link in the masthead */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.help-btn kbd { font-size: var(--fs-0); font-weight: 600; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; background: var(--panel-2); font-size: var(--fs-xs); text-align: center; }

input.input, select.input, textarea.input {   /* element-qualified: the tableau's th.input / td.input cells share the class name and must not get a form control's width: 100% (typotron#5) */
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 6px 8px; width: 100%; max-width: 100%;
}
textarea.input { resize: vertical; line-height: 1.4; }
input.input.mono, textarea.mono { font-family: var(--font-mono); font-size: var(--fs-0); }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; }

/* segmented radios */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-s); overflow: hidden; background: var(--paper); }
.seg-item { position: relative; cursor: pointer; }
.seg-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg-item span { display: block; padding: 4px 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); border-right: 1px solid var(--rule); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg-item:last-child span { border-right: 0; }
.seg-item input:checked + span { background: var(--accent-soft); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.seg-item input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip:hover { border-color: var(--ink-3); }
.chip:has(input:checked) { background: var(--accent-bg); border-color: var(--accent); color: var(--ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.chip:has(input:checked) .chip-count { color: inherit; }
.chip-len { min-width: 2.2em; justify-content: center; font-family: var(--font-mono); }

/* menu (details) */
.menu { position: relative; }
.menu summary { list-style: none; display: inline-block; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--panel-2); }
.menu-body { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 280px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

/* the engine banner (web/src/app.js): the engine could not start, or is slow to arrive from the CDN */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: var(--gap) 16px 0; padding: 8px 12px; border: 1px solid var(--fatal); border-left-width: 4px; border-radius: var(--radius-s); background: var(--fatal-bg); color: var(--ink); font-size: var(--fs-0); }
.banner.banner-slow { border-color: var(--muted); background: var(--panel-2); }
/* the once-only notice of the JavaScript engine (no WebAssembly; web/src/app.js showJsBanner): informational, not an error */
.banner.banner-js { border-color: var(--line); border-left-color: var(--ink); background: var(--panel-2); }
.banner.banner-js .banner-text { line-height: 1.4; }
.banner.banner-js #engine-retry { display: none; }
.verdict-volumes-unavailable { font-size: var(--fs-xs); }
.typ-js-notice { margin: 4px 0 0; }
.banner-text { flex: 1 1 40ch; min-width: 0; }
.banner-text code { font-size: var(--fs-xs); }
.banner-actions { display: inline-flex; gap: 6px; flex: none; }

/* ================================================================================== workbench */
.workbench {
  --col-problem: minmax(232px, 16rem);      /* the side panes stay narrow: the tableau is the widest thing on the screen */
  --col-verdict: minmax(272px, 20rem);
  --rail-w: 44px;
  --panes-min: 300px;                       /* the panes row never shrinks below this: on a short viewport (or a zoomed-in page) the page scrolls instead of the panes collapsing under the open Typology drawer (typotron#6) */
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: var(--col-problem) minmax(0, 1fr) var(--col-verdict);
  grid-template-rows: minmax(var(--panes-min), 1fr) auto;
  grid-template-areas: "problem tableau verdict" "drawer drawer drawer";
  gap: var(--gap);
  padding: var(--gap) 16px;
}
/* a collapsed side pane is a rail: 44 px, the title and a one-line summary written upwards, click to open */
.workbench.problem-rail { --col-problem: var(--rail-w); }
.workbench.verdict-rail { --col-verdict: var(--rail-w); }
.pane.collapsed > .pane-head, .pane.collapsed > .pane-body, .pane.collapsed > .pane-notice, .pane.collapsed > .input-strip { display: none; }
.pane-rail {
  display: none; flex: 1 1 auto; min-height: 0; width: 100%;
  flex-direction: column; align-items: center; gap: 10px; padding: 10px 0;
  font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.pane.collapsed > .pane-rail { display: flex; }
.pane-rail:hover { background: var(--panel-2); }
.pane-rail:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.rail-title { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: var(--fs-2); font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.rail-summary { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); line-height: 1; max-height: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-summary:empty { display: none; }
/* the chevrons: a pane's toggle points at the edge it folds to; the rail's points the other way */
.chev-x { display: inline-block; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transition: transform var(--dur) var(--ease); }
.pane-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--radius-s); cursor: pointer; color: var(--ink-2); }
.pane-toggle:hover { border-color: var(--rule); background: var(--panel-2); }
.pane-problem .pane-toggle .chev-x, .pane-verdict .pane-rail .chev-x { transform: rotate(135deg); margin-left: 3px; }      /* ‹ */
.pane-verdict .pane-toggle .chev-x, .pane-problem .pane-rail .chev-x { transform: rotate(-45deg); margin-right: 3px; }     /* › */
.pane-problem .pane-head { flex-wrap: nowrap; }
.pane-problem .pane-head .pane-tools:empty { display: none; }
.pane-verdict .pane-head { gap: 6px 8px; }
.pane-verdict .pane-tools { flex: 1 1 auto; justify-content: flex-end; gap: 6px; }
.pane-verdict .seg-item span { padding: 4px 8px; }
.pane-problem { grid-area: problem; }
.pane-tableau { grid-area: tableau; }
.pane-verdict { grid-area: verdict; }
.drawer { grid-area: drawer; }

.pane {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  box-shadow: var(--shadow);
}
.pane-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; min-height: 48px; padding: 8px var(--pad); border-bottom: 1px solid var(--rule); }
/* the Tableaux head: the tools sit beside the title and wrap in two rows, so the first tableau starts higher */
.pane-tableau .pane-head { align-items: flex-start; }
.pane-tableau .pane-title { padding-top: 5px; }
.pane-tableau .pane-tools { flex: 1 1 14em; justify-content: flex-start; row-gap: 6px; }
#tableau-tools .tb-tools { display: contents; }
.pane-title { font-size: var(--fs-2); font-weight: 700; }
.pane-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pane-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--pad); }   /* position: the containing block of sr-only helpers, so they never stretch the page */
.pane-notice { margin: 0; padding: 8px var(--pad); font-size: var(--fs-xs); border-bottom: 1px solid var(--rule); background: var(--panel-2); color: var(--ink-2); }
.pane-notice-error { background: var(--fatal-bg); color: var(--fatal); }

.empty { color: var(--ink-2); max-width: 46ch; padding: 6px 2px; }
.empty-title { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.empty.small { padding: 0; }
.empty.small p { margin: 0; font-size: var(--fs-xs); }

/* the input strip across the tableau pane */
.input-strip { flex: none; display: flex; gap: 4px; overflow-x: auto; padding: 8px var(--pad); border-bottom: 1px solid var(--rule); scrollbar-width: thin; mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.input-chip { flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.input-chip[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.input-chip:hover:not([aria-current="true"]) { border-color: var(--ink-3); }

/* the drawer */
.drawer { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px var(--pad) 6px 8px; }
.drawer-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 6px; border-radius: var(--radius-s); cursor: pointer; color: inherit; font: inherit; }
.drawer-toggle:hover { background: var(--panel-2); }
.chev { width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-135deg); margin: 0 2px 0 4px; transition: transform var(--dur) var(--ease); }
.drawer.open .chev { transform: rotate(45deg); margin-bottom: 4px; }
.drawer-summary { font-size: var(--fs-xs); }
.drawer-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drawer-body { position: relative; border-top: 1px solid var(--rule); padding: var(--pad); overflow: auto; height: min(42vh, 440px); }
.progress { display: inline-flex; align-items: center; gap: 8px; }
.progress progress { width: 160px; height: 8px; accent-color: var(--bar); }
.progress-text { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 599.98px) {
  /* a long head line ("volumes: 137 exact · 24 s") wraps instead of widening the page */
  .drawer-tools .progress { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .drawer-tools .progress-text { white-space: normal; overflow-wrap: anywhere; }
}

/* a short viewport (or a page zoomed in): the panes keep their floor height and the page scrolls; the drawer is sized
   by its content instead of being squeezed, so nothing overlaps (typotron#6, Joe's 1656x774 window zoomed to ~175 %) */
@media (max-height: 640px) and (min-width: 900px) {
  body { height: auto; min-height: 100%; }
  .workbench { flex: none; grid-template-rows: var(--panes-min) auto; }
}

/* one column under 900px */
@media (max-width: 899.98px) {
  .workbench { display: flex; flex-direction: column; flex: none; height: auto; padding: var(--gap) 16px 24px; }
  .pane { max-height: none; flex: none; }
  .pane-body { overflow: visible; max-height: none; }
  .pane-problem .pane-body { max-height: 80vh; overflow: auto; }
  .pane-tableau .pane-body { max-height: 85vh; overflow: auto; }   /* the stacked tableaux keep their own scroll */
  .drawer-body { height: auto; max-height: 70vh; }
  /* a collapsed pane in one column: its head stays (the toggle opens it again); the vertical rail is not used */
  .pane.collapsed > .pane-head { display: flex; }
  .pane.collapsed > .pane-rail { display: none; }
  .pane:not(.collapsed) .pane-toggle .chev-x { transform: rotate(-135deg); margin: 3px 0 0; }   /* ˄ : folds the body away */
  .pane.collapsed .pane-toggle .chev-x { transform: rotate(45deg); margin: 0 0 3px; }            /* ˅ : opens it again */
  .masthead { padding: 10px 16px; }
  .claim { display: none; }
  .wordmark { font-size: var(--fs-3); }
  .wordmark-sub { display: none; }
  /* the strip on a phone: wordmark, then = · pill · share · ⋯ on one row; Theme and ? live in the ⋯ menu */
  .badge-exact .badge-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .badge-exact { padding-inline: 8px; gap: 0; }
  .mast-more-btn { display: inline-flex; }
  .mast-more { display: none; position: absolute; right: 16px; top: calc(100% - 4px); z-index: 30; flex-direction: column; align-items: stretch; gap: 6px; min-width: 11em; padding: 8px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-s); box-shadow: var(--shadow); }
  .mast-more.open { display: flex; }
  .mast-more .btn { text-align: left; }
  .mast-more .help-btn { display: inline-flex; align-items: center; gap: 8px; }
  .mast-more .help-btn::after { content: "Keyboard shortcuts"; font-weight: 500; }
}
@media (max-width: 480px) {
  .mast-tools { width: 100%; }
  .menu-body { right: auto; left: 0; }
}

/* ================================================================================== the Problem pane */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rule); margin: -4px 0 12px; }   /* four tabs in a 260 px pane: the last wraps to a second row rather than clip */
.tab { font: inherit; font-weight: 500; color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px 8px; margin-bottom: -1px; cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabpanel { display: flex; flex-direction: column; gap: 14px; }
.tabpanel:focus-visible { outline-offset: -2px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 120px; }
.field-label, .field-label-row { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-label-row .small, .field-label-row .badge { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hint { color: var(--ink-2); font-size: var(--fs-xs); margin: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.load-row { padding-top: 4px; }
.load-status { font-size: var(--fs-xs); color: var(--ink-2); }
.load-status.loading { color: var(--muted); }
.error { background: var(--fatal-bg); color: var(--fatal); padding: 8px 10px; border-radius: var(--radius-s); white-space: pre-wrap; font-size: var(--fs-xs); margin: 0; }

/* the language gallery */
.gallery { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px; background: var(--paper); scrollbar-width: thin; }
.lang-card { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: var(--radius-s); border: 1px solid transparent; cursor: pointer; background: var(--panel); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lang-card:hover { border-color: var(--rule); }
.lang-card.selected, .lang-card:has(input:checked) { background: var(--accent-bg); border-color: var(--accent); }
.lang-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.lang-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lang-num { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-xs); flex: none; min-width: 2.2em; text-align: right; }
.lang-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lang-code { color: var(--ink-3); font-size: var(--fs-xs); flex: none; }
.tag { flex: none; margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-2); }
.tag-qs { border-color: var(--ink); color: var(--ink); }
.tag-qi { border-color: var(--muted); color: var(--muted); }
.lang-strips { display: flex; align-items: flex-end; gap: 10px; padding-left: 2.6em; flex-wrap: wrap; }
.strip { display: inline-block; vertical-align: bottom; }
.strip-primary { fill: var(--accent); }
.strip-secondary { fill: var(--ink-2); }
.strip-zero { fill: var(--rule); }
.strip-dim { opacity: 0.35; }
.selected .strip-zero, .lang-card:has(input:checked) .strip-zero { fill: var(--ink-3); opacity: 0.5; }

/* the typed pattern editor */
.pattern-status { font-size: var(--fs-xs); color: var(--ink-2); }
.pattern-status.ok { color: var(--accent); }
.pattern-status.warn { color: var(--loser); }
.pattern-lines { margin: 0; padding-left: 1.4em; font-size: var(--fs-xs); color: var(--loser); }
.pattern-lines code { color: var(--ink); }

/* file drop */
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 12px; border: 1.5px dashed var(--rule); border-radius: var(--radius-s); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-bg); }
.drop-text { color: var(--ink); }

/* language sets (src/sets.js, the Language sets tab and the gallery's StressTyp2 / this set toggle) */
.seg.seg-mini { align-self: flex-start; }
.seg.seg-mini .seg-item span { padding: 2px 7px; font-size: 10.5px; }
.set-active { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.set-head { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.set-release { margin: 0; }
.set-release-differs { color: var(--loser); }
.set-actions { gap: 8px; }
.set-save { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 12em; min-width: 0; flex-wrap: wrap; }
.set-save .input { flex: 1 1 8em; min-width: 6em; padding: 4px 8px; font-size: var(--fs-xs); }
.set-saved-row .input { flex: 1 1 10em; min-width: 6em; width: auto; padding: 4px 8px; font-size: var(--fs-xs); }
.set-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px; background: var(--paper); scrollbar-width: thin; }
.set-row { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-s); background: var(--panel); min-width: 0; }
.set-row:hover { border-color: var(--rule); }
.set-row.excluded { opacity: 0.55; }
.set-row.has-error { border-color: var(--fatal); }
.set-row-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.set-row-name { color: var(--ink); min-width: 0; }
.set-lang-name { font-weight: 500; overflow-wrap: anywhere; }
.set-lang-code { color: var(--ink-3); font-size: var(--fs-xs); text-decoration: none; }
.set-lang-code:hover { color: var(--accent); text-decoration: underline; }
.set-row-head .tag { margin-left: 0; }
.badge-edited { padding: 0 6px; font-size: 10.5px; border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.set-strings { padding: 4px 8px; }
.set-row-note { overflow-wrap: anywhere; }
.set-row-error { font-size: var(--fs-xs); }
.set-revert { align-self: flex-start; font-size: var(--fs-xs); }
/* round 2 (2026-09-25): freeze, add / remove, sort, lists, run on this list */
.set-save .btn { flex: none; }
.set-run { gap: 8px; }
.set-run-summary { font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.set-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--panel-2); font-size: var(--fs-xs); color: var(--ink-2); }
.set-notice #set-notice-text { flex: 1 1 12em; min-width: 0; color: var(--ink); }
.set-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-search { position: relative; flex: 1 1 14em; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.set-search .input { padding: 4px 8px; font-size: var(--fs-xs); }
.set-search-hits { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--panel); padding: 4px; max-height: 220px; overflow: auto; scrollbar-width: thin; }
.set-hit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 4px; font-size: var(--fs-xs); border-radius: 4px; }
.set-hit:hover { background: var(--panel-2); }
.set-hit-name { flex: 1 1 8em; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.set-hit .tag { margin-left: 0; }
.set-hit-add { margin-left: auto; }
.set-hit-none { margin: 0; padding: 2px 4px; }
.set-sort { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.set-sort .input { width: auto; padding: 4px 8px; font-size: var(--fs-xs); }
.set-freeze-btns { display: inline-flex; gap: 4px; margin-left: auto; }
.set-row-side { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.set-lock { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; color: var(--ink-3); border-color: transparent; }
.set-lock[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-3); background: var(--panel-2); }
.set-lock .lock-icon { display: block; }
.set-remove { padding: 2px 7px; color: var(--ink-3); border-color: transparent; font-size: var(--fs-1); line-height: 1; }
.set-remove:hover:not(:disabled) { color: var(--fatal); border-color: var(--fatal); background: var(--fatal-bg); }
.set-row.frozen { border-color: var(--rule); background: var(--panel-2); }
.set-row.frozen .set-strings { background: var(--panel); }
.set-row-tools { gap: 8px; }
.set-cov { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cov { flex: none; font-family: var(--font-mono); font-size: 10.5px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.cov-yes { border-color: var(--accent); color: var(--ink); background: var(--accent-bg); }
.cov-no { border-color: var(--loser); color: var(--loser); background: var(--loser-bg); }
.cov-mixed { border-color: var(--ink-3); color: var(--ink); }
.cov-partial { border-color: var(--loser); color: var(--loser); }
.cov-na { color: var(--ink-3); }
.set-list-empty { margin: 0; padding: 6px 8px; }
/* round 3 (2026-09-25): the three shared lists — Working, A, B — as pills (the catalog page's chips: a 999px
   radius; 'Working (n)'), a drop target while a pill is dragged over, the Copy… menu, Clear list, and the one-line
   note when the page is not at the origin both pages share.  Clarity fix (2026-09-25, both pages alike): the pill
   of the list being edited is FILLED (accent-soft, accent border, ink text), the others outlined; the 'Editing:
   <list>' line heads the language list in ink at weight 500; the Copy… confirm's Replace is outlined in the accent */
.list-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.list-strip-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.list-strip .linklike.small { font-size: var(--fs-xs); color: var(--ink-3); }
.list-pills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--ink-3); border-radius: 999px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; user-select: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.list-pill:hover { border-color: var(--ink); color: var(--ink); }
.list-pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.list-pill.over { border-style: dashed; border-color: var(--accent); background: var(--panel-2); }
.list-pill.dragging { opacity: 0.55; }
.list-pill[draggable="true"] { cursor: grab; }
.list-pill[draggable="true"]:active { cursor: grabbing; }
.list-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.list-pill-count { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.list-pill.active .list-pill-count { color: inherit; }
select.input.list-copy { width: auto; max-width: 100%; padding: 4px 8px; font-size: var(--fs-xs); }
.list-note { margin: 0; }
/* the Copy… menu's confirm: the copy named, Merge into <list> (primary), Replace <list> (outlined in the accent), Cancel */
.list-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 6px 10px; border: 1px solid var(--accent); border-radius: var(--radius-s); background: var(--panel-2); font-size: var(--fs-xs); color: var(--ink); }
.list-confirm-text { flex: 1 1 12em; min-width: 0; }
.btn.list-replace { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn.list-replace:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
/* 'Editing: <list>' at the head of the language list: ink, weight 500, the row's small caps undone */
.field-label-row .set-editing { font-size: var(--fs-0); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* examples */
.examples { display: flex; flex-direction: column; gap: 10px; }
.example { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 10px 12px; background: var(--paper); }
.example h3 { font-size: var(--fs-1); margin-bottom: 4px; }
.example p { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 8px; }

/* ================================================================================== tableaux (shared classes) */
.tablewrap { overflow-x: auto; }
table.tableau, table.comparative, table.typology { border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-cell); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tableau th, table.tableau td, table.comparative th, table.comparative td, table.typology th, table.typology td { border: 1px solid var(--rule); padding: 3px 8px; text-align: center; }
table.tableau th, table.comparative th, table.typology th { background: var(--panel-2); font-weight: 600; }
table.tableau th.input, table.tableau td.cand, table.comparative td.pair, table.comparative th.pair { text-align: left; }
table.tableau th.input { font-weight: 500; }
table.tableau td.cand { min-width: 10em; }
table.tableau tr.consistent td { background: var(--select); }
table.tableau tr.chosen td.cand { box-shadow: inset 0 0 0 2px var(--accent); }
table.tableau td.after { color: var(--ink-3); opacity: 0.55; }
table.tableau td.fatal { color: var(--fatal); font-weight: 700; }
table.tableau td.hand { width: 1.8em; color: var(--accent); font-size: var(--fs-1); padding: 0 4px; }
table.tableau tr.weights td { color: var(--bar); font-weight: 600; background: var(--bar-bg); }
table.tableau th.draggable { cursor: grab; }
table.tableau th.dragging { opacity: 0.5; }
table.tableau th.drop-before { box-shadow: inset 3px 0 0 var(--accent); }
table.tableau th.drop-after { box-shadow: inset -3px 0 0 var(--accent); }
table.tableau th.selected { outline: 2px solid var(--focus); outline-offset: -2px; }
table.tableau td.harmony { color: var(--bar); text-align: right; }
.hbar { display: inline-block; height: 8px; background: var(--bar); border-radius: 2px; vertical-align: middle; margin-right: 6px; }
table.comparative td.W { color: var(--accent); font-weight: 700; }
table.comparative td.L { color: var(--loser); font-weight: 700; }
table.comparative td.e { color: var(--ink-3); }
table.comparative td.pos { color: var(--accent); }
table.comparative td.neg { color: var(--loser); }
table.comparative td.sum { font-weight: 700; }
table.comparative tr.fusion td { background: var(--loser-bg); font-weight: 600; }
table.typology tr.lang { cursor: pointer; }
table.typology tr.lang:hover td { background: var(--select); }
table.typology td.witness { text-align: left; font-family: var(--font-body); font-size: var(--fs-xs); max-width: 46em; white-space: normal; }
table.typology td.yes { color: var(--accent); font-weight: 700; }
table.typology td.no { color: var(--ink-3); }
.tableau-caption { font-size: var(--fs-xs); color: var(--ink-2); margin: 0 0 6px; }
.tableau-block + .tableau-block { margin-top: 18px; }

/* ================================================================================== verdict (shared classes) */
.verdict-card { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 12px; background: var(--paper); }
.verdict-card h3 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.verdict-headline { font-family: var(--font-display); font-size: var(--fs-verdict); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 6px; }
.verdict-headline.ok { color: var(--accent); }
.verdict-headline.no { color: var(--loser); }
.verdict-sub { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 8px; }
.strata { list-style: none; padding: 8px 10px; margin: 6px 0; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.strata li { display: inline; }
.strata .gg { color: var(--ink-3); padding: 0 0.3em; }
table.weights { border-collapse: collapse; font-size: var(--fs-xs); width: 100%; }
table.weights td { padding: 2px 8px 2px 0; vertical-align: middle; }
table.weights td.name { font-family: var(--font-mono); white-space: nowrap; }
table.weights td.val { text-align: right; font-family: var(--font-mono); white-space: nowrap; color: var(--bar); font-weight: 600; }
table.weights td.track { width: 100%; }
.bar-track { display: block; width: 100%; height: 10px; background: var(--bar-bg); border-radius: 2px; overflow: hidden; }
.bar { display: block; height: 100%; background: var(--bar); border-radius: 2px; transition: width var(--dur) var(--ease); }
pre.cert { background: var(--code-bg); border-left: 3px solid var(--loser); padding: 8px 10px; border-radius: var(--radius-s); overflow-x: auto; font-size: var(--fs-xs); line-height: 1.4; margin: 6px 0; white-space: pre; }
pre.report { background: var(--code-bg); padding: 8px 10px; border-radius: var(--radius-s); overflow-x: auto; font-size: var(--fs-xs); line-height: 1.4; margin: 6px 0; }
details.fold { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px 10px; margin: 8px 0; }
details.fold summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-xs); }
.structs { columns: 2; column-gap: 20px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.structs div { break-inside: avoid; }
.hasse { max-width: 100%; height: auto; }
.verdict-card .hasse-band { fill: var(--panel) !important; }   /* the card is paper: the bands (inline var(--paper)) would vanish */

/* the Verdict pane (web/src/verdict.js): OT and HG cards, side by side when the pane is wide enough */
.verdict-summary { font-size: var(--fs-0); margin: 0 0 10px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: var(--radius-s); }
.verdict-summary p { margin: 0; }
.verdict-summary.neither { border-left-color: var(--loser); background: var(--loser-bg); }
/* both theories at a glance: two tiles side by side above the cards (which stack in a narrow pane) */
.verdict-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.verdict-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font: inherit; text-align: left; cursor: pointer; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); min-width: 0; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.verdict-tile:hover { border-color: var(--ink-3); background: var(--panel-2); }
.verdict-tile .tile-k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.verdict-tile .tile-v { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-1); line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.verdict-tile.ok .tile-v { color: var(--accent); }
.verdict-tile.no .tile-v { color: var(--loser); }
.verdict-tile.pending .tile-v { color: var(--ink-3); }
.verdict-tile.ok { border-color: var(--accent); }
.verdict-tile.no { border-color: var(--loser); }
/* one card per theory; with both theories the cards stack in the pane and sit side by side once the pane body is
   600 px wide (two readable cards of 290 px: the one-column layout from 640 px, or any wide Verdict pane) — never at
   the pane's three-column width of 272-320 px, where each card would be 140 px and the diagrams unreadable */
#verdict-body { container-type: inline-size; container-name: verdict; }
.verdict-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@container verdict (min-width: 600px) { .verdict-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.verdict-grid .verdict-card { margin-bottom: 0; min-width: 0; }
.verdict-card.is-solving { opacity: 0.55; transition: opacity var(--dur) var(--ease); }
.solving-tag { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--bar); }
.verdict-live { border-left: 3px solid var(--bar); background: var(--bar-bg); padding: 6px 8px; border-radius: var(--radius-s); font-size: var(--fs-xs); margin: 6px 0 8px; color: var(--ink); }
.verdict-live.miss { border-color: var(--loser); background: var(--loser-bg); }
.verdict-live .btn { margin-left: 4px; }
.linkbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.hasse-wrap, .weightbars-wrap { overflow-x: auto; margin: 6px 0; color: var(--ink); }
.hasse-info { min-height: 1.4em; margin: 0 0 6px; }
.hasse-legend { margin: 2px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hasse-legend .legend-badge { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; line-height: 1.4; background: var(--panel); }
.erc-list { margin: 2px 0 0; padding-left: 1.2em; }
.erc-list li { font-size: var(--fs-xs); }
.erc-w { color: var(--accent); font-weight: 600; }
.erc-l { color: var(--loser); }
.structs-grid { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; }
.struct { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-xs); background: none; border: 1px solid transparent; border-radius: var(--radius-s); padding: 2px 4px; color: var(--ink); cursor: pointer; }
.struct:hover { border-color: var(--rule); background: var(--panel); }
.struct-input { font-family: var(--font-mono); color: var(--ink-2); }
.verdict-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.report-fold pre.report { max-height: 320px; overflow: auto; white-space: pre; }
.cert-card { margin: 8px 0 10px; }
.tb-host { min-width: 0; }

/* ================================================================================== footer, toast, dialog */
.foot { flex: none; padding: 6px 16px 10px; color: var(--ink-3); font-size: var(--fs-xs); }
.foot p { margin: 0; }
.engine-detail { font-family: var(--font-mono); }

#toast-host { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 200; max-width: min(92vw, 520px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: var(--radius-s); background: var(--ink); color: var(--paper); box-shadow: var(--shadow); pointer-events: auto; animation: toast-in var(--dur) var(--ease); font-size: var(--fs-0); }
.toast-ok { border-left: 4px solid var(--accent); }
.toast-error { border-left: 4px solid var(--fatal); }
.toast-info { border-left: 4px solid var(--muted); }
.toast-out { opacity: 0; transition: opacity var(--dur) var(--ease); }
.toast-close { background: none; border: 0; color: inherit; font-size: var(--fs-2); line-height: 1; cursor: pointer; padding: 0 2px; opacity: 0.8; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dialog { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 16px 18px; width: min(92vw, 520px); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(23, 24, 26, 0.5); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dialog-title { font-size: var(--fs-3); }
.shortcuts { border-collapse: collapse; width: 100%; font-size: var(--fs-0); }
.shortcuts th { text-align: left; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rule); }
.shortcuts td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.shortcuts td.keys { white-space: nowrap; }
.shortcuts kbd + kbd { margin-left: 3px; }

/* =============================================================================================
   tableau workspace — web/src/tableau.js (mount(#tableau-pane)). Uses the tokens above; every colour
   is a token, so the dark scheme and [data-theme] apply. Class prefix tb-; the <table> keeps the
   `tableau` / `comparative` classes so the printed-tableau rules above still hold.
   ============================================================================================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tb-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tb-empty { color: var(--ink-2); max-width: 70ch; font-size: 14px; }
.tb-legend { margin: 4px 0 8px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.tb-legend .hand-glyph { color: var(--ink); }
.tb-empty p { margin: 0 0 8px; }

/* the input strip */
.tb-strip { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; position: sticky; top: 0; z-index: 4;
  background: var(--panel); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.tb-inputs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: thin; }
.tb-chip { flex: none; display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 9px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink); cursor: pointer; font: 12.5px/1.2 var(--font-mono, var(--mono, ui-monospace, monospace)); }
.tb-chip:hover { border-color: var(--accent); }
.tb-chip:focus-visible { outline: 2px solid var(--focus, var(--bar)); outline-offset: 1px; }
.tb-chip[aria-selected="true"] { background: var(--accent-bg); border-color: var(--accent); }
.tb-chip .chip-n { color: var(--ink-2); font-size: 11px; }
.tb-tools { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--ink-2); }
.tb-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.tb-seg-btn { border: 0; background: var(--paper); color: var(--ink); padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; border-radius: 0; }
.tb-seg-btn + .tb-seg-btn { border-left: 1px solid var(--rule); }
.tb-seg-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.tb-seg-btn:focus-visible { outline: 2px solid var(--focus, var(--bar)); outline-offset: -2px; }
.tb-check { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.tb-btn, .tb-select { font: inherit; font-size: 13px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; }
.tb-btn:hover { border-color: var(--accent); }

/* one tableau (sections far from the viewport are placeholders of the same height: tableau.js mounts and
   unmounts them as they come within 900px, so the DOM never holds more than a dozen tables) */
.tb-tableau { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px 10px; background: var(--panel); scroll-margin-top: 60px; min-width: 0; }
.tb-tableau.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.tb-tableau.miss .tb-sec-summary { color: var(--loser); }
.tb-sec-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.tb-sec-title { margin: 0; font-size: 15px; font-family: var(--font-mono, var(--mono, ui-monospace, monospace)); font-weight: 600; }
.tb-sec-title .tb-count { font-weight: 400; font-size: 12.5px; }
.tb-sec-summary { margin: 0; font-size: 13px; color: var(--ink-2); flex: 1 1 20em; }
.tb-filter { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; }
.tb-filter-in { font: 13px var(--font-mono, var(--mono, ui-monospace, monospace)); padding: 3px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); max-width: 100%; width: 14em; }
.tb-filter-n { font-size: 12.5px; }
.tb-wrap { min-width: 0; margin-top: 6px; }
.tb-scroll { overflow: auto; max-width: 100%; }
.tb-scroll.virtual { max-height: min(62vh, 640px); min-height: 240px; border: 1px solid var(--rule); border-radius: 6px; }

/* the table: separate borders so the sticky header keeps its rules while the body scrolls */
table.tb-table, table.tb-comp { border-collapse: separate; border-spacing: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); font-size: var(--fs-cell, 14px); white-space: nowrap; }
table.tb-table th, table.tb-table td, table.tb-comp th, table.tb-comp td { border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 2px 7px; text-align: center;
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace)); font-variant-numeric: tabular-nums; }
table.tb-table thead th, table.tb-comp thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2, var(--paper)); font-weight: 600; vertical-align: bottom; }
table.tb-table th.input, table.tb-comp th.pair { text-align: left; }
/* the hand and candidate columns stay put while a wide tableau scrolls sideways; so does the harmony column */
table.tb-table th.hand, table.tb-table td.hand { position: sticky; left: 0; width: 28px; min-width: 28px; max-width: 28px; background: var(--panel); z-index: 1; }
table.tb-table th.input, table.tb-table td.cand { position: sticky; left: 28px; background: var(--panel); z-index: 1; box-shadow: 1px 0 0 var(--rule), 6px 0 8px -6px rgba(23, 24, 26, 0.16); }
table.tb-table thead th.hand, table.tb-table thead th.input { z-index: 3; background: var(--panel-2, var(--paper)); }
table.tb-table th.hcol, table.tb-table td.hcell { position: sticky; right: 0; background: var(--panel); z-index: 1; box-shadow: -1px 0 0 var(--rule), -6px 0 8px -6px rgba(23, 24, 26, 0.16); }
table.tb-table thead th.hcol { z-index: 3; background: var(--panel-2, var(--paper)); }
.tb-scroll:focus-visible { outline: 2px solid var(--focus, var(--bar)); outline-offset: -2px; }
table.tb-table th.con { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; min-width: 3.2em; padding: 2px 5px 3px; }
table.tb-table th.con .con-name { display: block; font-size: 13px; }
table.tb-table th.con .con-rank { display: block; font-size: 10.5px; font-weight: 400; }
table.tb-table th.con:focus-visible { outline: 2px solid var(--focus, var(--bar)); outline-offset: -2px; }
table.tb-table th.con.dragging { opacity: 0.45; cursor: grabbing; }
table.tb-table th.con.drop-before { box-shadow: inset 3px 0 0 var(--accent); }
table.tb-table th.con.drop-after { box-shadow: inset -3px 0 0 var(--accent); }
table.tb-table th.con .w-ctl { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 2px; }
table.tb-table th.con .w-slider { width: 58px; margin: 0; accent-color: var(--bar); cursor: pointer; }
table.tb-table th.con .w-slider:focus-visible { outline: 2px solid var(--focus, var(--bar)); outline-offset: 2px; }
table.tb-table th.con .w-val { color: var(--bar); font-weight: 600; font-size: 12.5px; }
table.tb-table th.hcol { min-width: 9em; }
/* strata: a heavier rule closes a stratum, a dashed rule separates constraints tied within one */
table.tb-table.ot th.s-in, table.tb-table.ot td.s-in, table.tb-comp.ot th.s-in, table.tb-comp.ot td.s-in { border-right-style: dashed; }
table.tb-table.ot th.s-end, table.tb-table.ot td.s-end, table.tb-comp.ot th.s-end, table.tb-comp.ot td.s-end { border-right-width: 2px; border-right-color: var(--ink-2); }
/* rows */
table.tb-table tr.cand-row, table.tb-table tr.grp { height: var(--rh, auto); }
table.tb-table td.hand { width: 1.6em; color: var(--accent); font-size: 16px; padding-inline: 4px; }
table.tb-table tr.tie td.hand { color: var(--loser); }
table.tb-table td.cand { text-align: left; min-width: 9em; }
table.tb-table .cand-btn { font: inherit; background: none; border: 0; padding: 1px 4px; margin: 0; color: var(--ink); cursor: pointer; border-radius: 4px; text-align: left; }
/* a drawn row: the drawing is the candidate, the bracket string beside it is small and muted (the full string is in
   the button's title); the button wraps both so the whole thing is the click target and the chosen outline */
table.tb-table .cand-btn.drawn { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; vertical-align: middle; }
table.tb-table .cand-btn.drawn .cand-label { font-size: 11px; color: var(--ink-2); font-weight: 400; letter-spacing: -0.01em; }
table.tb-table tr.optimum .cand-btn.drawn .cand-label, table.tb-table tr.chosen .cand-btn.drawn .cand-label { color: var(--ink); font-weight: 500; }
table.tb-table .cand-btn.drawn .draw, table.tb-table .cand-btn.drawn .pros { margin: 0; flex: none; }
table.tb-table .cand-btn:hover { background: var(--select); }
table.tb-table .cand-btn:focus-visible { outline: 2px solid var(--focus, var(--bar)); outline-offset: 1px; }
table.tb-table tr.consistent td { background: var(--accent-bg); }
table.tb-table tr.chosen td.cand .cand-btn { outline: 2px solid var(--accent); outline-offset: 0; font-weight: 600; }
table.tb-table tr.optimum td.cand .cand-label { font-weight: 600; }
table.tb-table tr.bounded .cand-label { color: var(--ink-2); }
table.tb-table .tag-bounded { font-size: 10.5px; margin-left: 6px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 5px; vertical-align: middle; font-family: var(--font-body, var(--font, system-ui, sans-serif)); }
table.tb-table td.after { color: var(--ink-2); opacity: 0.45; }
table.tb-table td.fatal { color: var(--fatal); font-weight: 700; }
table.tb-table tr.grp td { background: var(--code-bg); text-align: left; }
table.tb-table tr.grp td.grp-form { position: static; box-shadow: none; }      /* the wide spanning cell scrolls; its content is pinned instead */
table.tb-table tr.grp .grp-inner { position: sticky; left: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
table.tb-table tr.grp .grp-name { font-weight: 600; }
table.tb-table .grp-btn { font: inherit; background: none; border: 0; padding: 1px 4px; margin: 0; color: var(--ink); cursor: pointer; border-radius: 4px; text-align: left; }
table.tb-table .grp-btn:hover { background: var(--select); }
table.tb-table .grp-btn:focus-visible { outline: 2px solid var(--focus, var(--bar)); outline-offset: 1px; }
table.tb-table tr.grp.consistent .grp-btn { outline: 1px solid var(--accent); outline-offset: 0; }
table.tb-table .tag-tie { font-size: 10.5px; margin-left: 6px; border: 1px solid var(--loser); color: var(--loser); border-radius: 999px; padding: 0 5px; vertical-align: middle; font-family: var(--font-body, var(--font, system-ui, sans-serif)); font-weight: 600; }
table.tb-table tr.grp .grp-n { font-size: 12px; font-family: var(--font-body, var(--font, system-ui, sans-serif)); }
/* the target's overt-form row: a quiet tag; the hand ☞ is on the winning structure only */
table.tb-table .tag-target { font-size: 10.5px; margin-left: 6px; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 0 5px; vertical-align: middle; font-family: var(--font-body, var(--font, system-ui, sans-serif)); font-weight: 500; }
table.tb-table tr.grp.consistent td { background: var(--accent-bg); }
table.tb-table td.hcell { text-align: left; min-width: 9em; }
table.tb-table .hbar { display: inline-block; height: 8px; background: var(--bar); opacity: 0.3; border-radius: 2px; vertical-align: middle; margin-right: 6px; max-width: 5.5em; transition: width var(--dur, 180ms) ease-out, opacity var(--dur, 180ms) ease-out; }
table.tb-table td.best .hbar { opacity: 1; }
table.tb-table .hval { color: var(--ink-2); font-size: 12.5px; }
table.tb-table td.best .hval { color: var(--ink); font-weight: 600; }
table.tb-table tr.spacer td, table.tb-comp tr.spacer td { padding: 0; border: 0; }
table.tb-table td.tb-none { text-align: left; font-family: var(--font-body, var(--font, system-ui, sans-serif)); }
/* prosodic drawing */
.pros { vertical-align: middle; margin-left: 8px; overflow: visible; }
.pros .mark { font: 10px var(--font-mono, var(--mono, ui-monospace, monospace)); fill: var(--ink-2); text-anchor: middle; }
.pros .mark-primary { fill: var(--accent); font-weight: 700; }
.pros .syl { font: 11px var(--font-mono, var(--mono, ui-monospace, monospace)); fill: var(--ink); text-anchor: middle; }
.pros .syl-H, .pros .syl-S { font-weight: 700; }
.pros .syl-primary { fill: var(--accent); font-weight: 700; }
.pros .syl-secondary { fill: var(--ink-2); font-weight: 700; }
.pros .foot { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.pros .foot-1 { stroke: var(--bar); stroke-dasharray: 2 1.5; }
/* dragging */
.tb-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--accent); border-radius: 6px; padding: 3px 8px; font: 13px var(--font-mono, var(--mono, ui-monospace, monospace)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
body.tb-dragging, body.tb-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
/* comparative view */
.tb-comparative { margin-top: 6px; }
.tb-comp-cap, .tb-comp-verdict { font-size: 13px; color: var(--ink-2); margin: 8px 0 2px; }
.tb-comp-verdict { margin-top: 0; margin-bottom: 6px; }
.tb-comparative .lost { color: var(--fatal); font-weight: 600; }
.tb-comparative .won { color: var(--accent); font-weight: 600; }
table.tb-comp td.pair { text-align: left; }
table.tb-comp td.W { color: var(--accent); font-weight: 700; }
table.tb-comp td.L { color: var(--loser); font-weight: 700; }
table.tb-comp td.e { color: var(--ink-2); }
table.tb-comp td.decides { box-shadow: inset 0 0 0 2px currentColor; }
table.tb-comp tr.lost td.pair { color: var(--fatal); }
table.tb-comp tr.residual td.pair::before { content: "• "; color: var(--fatal); }
table.tb-comp tr.fusion td { border-top: 2px solid var(--fatal); font-weight: 700; background: var(--fatal-bg, var(--loser-bg)); }
/* RCD strata shading: every other stratum of the ranking is tinted so a row's deciding W reads at a glance */
table.tb-comp.ot th.s-alt, table.tb-comp.ot td.s-alt { background: var(--code-bg); }
table.tb-comp.ot tr.fusion td.s-alt { background: var(--fatal-bg, var(--loser-bg)); }
.tb-comp-verdict .tb-strata { font-family: var(--font-mono, var(--mono, ui-monospace, monospace)); color: var(--ink); }
table.tb-comp td.pos { color: var(--accent); }
table.tb-comp td.neg { color: var(--loser); }
table.tb-comp td.sum { font-weight: 700; }
table.tb-comp tr.lost td.sum { color: var(--fatal); }

@media (prefers-reduced-motion: reduce) {
  .tb-pane *, .tb-pane { transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 640px) {
  .pane-tableau .pane-tools { flex-basis: 100%; }
  .tb-strip { position: static; }
  .tb-scroll.virtual { max-height: 70vh; }
  table.tb-table td.cand { min-width: 8em; }
}

/* ================================================================================== drawings and diagrams
 * (web/src/draw.js, web/src/diagrams.js). Colours inside the SVGs are inline var(--…) / currentColor;
 * only the focus rings, the certificate card and the reduced-motion guard live here. */
.draw { vertical-align: middle; overflow: visible; }
.draw-large { display: block; }
.hasse-node:focus-visible > rect, .venn-region:focus-visible > .venn-hit, .venn-setname:focus-visible > text { outline: none; }
.hasse-node:focus-visible > rect { stroke: var(--focus) !important; stroke-width: 2.5 !important; }
.venn-region:focus-visible > .venn-hit { stroke: var(--focus) !important; stroke-width: 2.5; stroke-dasharray: 3 2; }
.venn-setname:focus-visible > text { text-decoration: underline; }
.wb-bar, .hasse-edge, .hasse-node rect { transition: stroke var(--dur, 200ms) var(--ease, ease), fill var(--dur, 200ms) var(--ease, ease), width 250ms var(--ease, ease); }
@media (prefers-reduced-motion: reduce) {
  .wb-bar, .hasse-edge, .hasse-node rect, .venn-shape { transition: none !important; }
}
.cert-card { border: 1px solid var(--rule); border-left: 3px solid var(--loser); border-radius: var(--radius-s, 6px); background: var(--panel); padding: 10px 12px; margin: 8px 0; }
.cert-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.cert-kind { font-family: var(--font-display, var(--font-body, system-ui, sans-serif)); font-weight: 700; font-size: var(--fs-2, 18px); color: var(--loser); letter-spacing: -0.01em; }
.cert-count { color: var(--ink-2); font-size: var(--fs-xs, 12px); }
.cert-check { font-size: var(--fs-xs, 12px); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--rule); }
.cert-check.ok { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.cert-check.bad { color: var(--fatal); border-color: var(--fatal); background: var(--fatal-bg, var(--error-bg)); }
table.cert-table { border-collapse: collapse; font-family: var(--font-mono, var(--mono, ui-monospace, monospace)); font-size: var(--fs-0, 13px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cert-card .tablewrap { scrollbar-width: thin; }
table.cert-table th, table.cert-table td { border: 1px solid var(--rule); padding: 3px 7px; text-align: center; }
table.cert-table th { background: var(--panel-2, var(--paper)); font-weight: 600; vertical-align: bottom; }
table.cert-table th.rot { padding: 6px 3px; }
table.cert-table th.rot span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 500; line-height: 1; max-height: 7em; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs, 12px); }
table.cert-table th.pair, table.cert-table td.pair, table.cert-table td.input { text-align: left; }
table.cert-table td.pair { white-space: normal; min-width: 9em; max-width: 13em; line-height: 1.3; }
table.cert-table td.input { color: var(--ink-2); font-size: var(--fs-xs, 12px); }
table.cert-table td.lam { font-weight: 700; color: var(--bar); }
table.cert-table td.W, table.cert-table td.pos { color: var(--accent); font-weight: 700; }
table.cert-table td.L, table.cert-table td.neg { color: var(--loser); font-weight: 700; }
table.cert-table td.e { color: var(--ink-3, var(--ink-2)); }
table.cert-table tfoot td { background: var(--loser-bg, var(--select)); font-weight: 700; border-top: 2px solid var(--loser); }
table.cert-table tfoot td.emph { color: var(--loser); }
table.cert-table tfoot td.fatal { color: var(--fatal); background: var(--fatal-bg, var(--error-bg)); }
.cert-words { margin: 8px 0 0; font-size: var(--fs-0, 13px); line-height: 1.5; max-width: 72ch; }

/* =============================================================================================
   typology drawer — web/src/typology.js (mountTypology → #typology-body) and the export menu —
   web/src/export.js (exportMenu). Tokens only; prefixes typ-, cmp-, export-. Dark scheme and
   [data-theme] follow from the tokens; motion is guarded below.
   ============================================================================================= */
.typ-run { margin-bottom: 8px; }
.typ-status { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.typ-bar { position: relative; height: 8px; width: 100%; max-width: 520px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; }
.typ-fill { display: block; height: 100%; width: 0; background: var(--bar); border-radius: 999px; transition: width var(--dur) var(--ease); }
.typ-bar.indeterminate .typ-fill { animation: typ-slide 1.2s ease-in-out infinite; }
@keyframes typ-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.typ-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.typ-status-text { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); }
.typ-history { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.typ-hist-bar { display: inline-block; width: 5px; background: var(--bar); border-radius: 1px 1px 0 0; opacity: 0.8; }
.typ-history .mono { font-family: var(--font-mono); }
.typ-error { margin: 0 0 10px; }

.typ-stats, .cmp-summary { margin: 0 0 10px; }
.chip.stat { cursor: default; gap: 6px; }
.chip.stat .stat-label { color: var(--ink-2); }
.chip.stat .stat-value { color: var(--ink); font-weight: 600; }
.chip.stat-ot .stat-value, .chip.stat-hg .stat-value, .chip.stat-codes .stat-value { color: var(--accent); }
.chip.stat-hgonly { border-color: var(--bar); }
.chip.stat-hgonly .stat-value { color: var(--bar); }
.chip.stat-set { border-color: var(--accent); }

.typ-toolbar { margin: 0 0 8px; }
.typ-toolbar .input { width: auto; }
.typ-filter { min-width: 16em; flex: 1 1 16em; max-width: 30em; }
.typ-verdict { flex: none; }
.typ-count { flex: none; }
.typ-downloads { margin-left: auto; display: inline-flex; gap: 4px; }
.typ-tablewrap { max-width: 100%; }
table.typ-table { font-size: var(--fs-xs); }
table.typ-table th, table.typ-table td { padding: 2px 6px; }
table.typ-table thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); vertical-align: bottom; }
table.typ-table th.typ-id, table.typ-table td.typ-id { position: sticky; left: 0; z-index: 3; background: var(--panel-2); }
table.typ-table thead th.typ-id { z-index: 4; }
table.typ-table td.typ-id { background: var(--panel); }
table.typ-table tr.lang:hover td.typ-id { background: var(--select); }
.typ-sort { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: 3px; align-items: baseline; white-space: nowrap; }
.typ-sort:hover { color: var(--accent); }
.typ-sort-mark { font-size: 9px; color: var(--accent); min-width: 0.8em; }
table.typ-table th.typ-in .typ-sort { font-weight: 500; }
.typ-load { font: inherit; font-family: var(--font-mono); font-weight: 600; color: var(--accent); background: none; border: 1px solid transparent; border-radius: 4px; padding: 0 6px; cursor: pointer; min-width: 2.4em; }
.typ-load:hover { border-color: var(--accent); background: var(--accent-bg); }
.typ-load::after { content: " →"; opacity: 0; transition: opacity var(--dur) var(--ease); }
tr.lang:hover .typ-load::after, .typ-load:focus-visible::after { opacity: 1; }
tr.lang.loaded td { background: var(--select); }
tr.lang.loaded .typ-load::after { opacity: 1; }
tr.lang.hg-only td.typ-verdict-col.yes { color: var(--bar); }
table.typ-table td.typ-lang { text-align: left; white-space: nowrap; max-width: 18em; overflow: hidden; text-overflow: ellipsis; }
.typ-code { font-family: var(--font-mono); font-weight: 600; }
.typ-code-name { font-family: var(--font-body); }
table.typ-table td.typ-form-cell { text-align: center; padding: 3px 6px; }
table.typ-table td.typ-form-cell .strip { display: inline-block; vertical-align: middle; }
.typ-form { font-family: var(--font-mono); }
table.typ-table td.typ-verdict-col { font-weight: 700; }
table.typ-table td.typ-verdict-col.no { color: var(--ink-3); font-weight: 400; }
table.typ-table td.typ-verdict-col.na { color: var(--ink-3); font-weight: 400; }
table.typ-table td.typ-witness { text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs); max-width: 34em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ranking volumes and weight shares (typotron.core.volume): the count or the share, a small tag beneath; ≈ marks an estimate */
table.typ-table td.typ-vol-col { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
table.typ-table th.typ-vol-col { text-align: right; }
.typ-vol .typ-vol-main { display: block; }
.typ-vol .typ-tag { display: block; font-size: 9px; line-height: 1.1; color: var(--ink-3); font-family: var(--font-body); }
.typ-vol.typ-approx .typ-vol-main { color: var(--ink-2); font-style: italic; }
.typ-vol.typ-none { color: var(--ink-3); }
.typ-legend { margin: 6px 0 0; }
.typ-voltools { display: inline-flex; gap: 4px; align-items: center; }
.typ-samples { width: auto; }
.chip.stat-sampled .stat-value { color: var(--ink-2); font-style: italic; }
.verdict-volumes { display: inline; }

/* compare panel */
.typ-compare { margin-top: 14px; }
.typ-compare > summary { font-size: var(--fs-0); color: var(--ink); }
.typ-compare-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); margin-right: 6px; }
.cmp-body { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.cmp-sets { margin: 0; }
.cmp-opts { align-items: flex-end; }
.cmp-opts .field { flex: 1 1 200px; }
.cmp-opts .cmp-field-short { flex: 0 1 8em; }
.cmp-opts .field .input { width: 100%; }
.cmp-positive { align-self: center; padding-bottom: 6px; }
.cmp-status { margin: 0; }
.cmp-results-tools { margin: 0 0 8px; }
.cmp-load-under { width: auto; }
.cmp-layout { display: grid; grid-template-columns: minmax(280px, 520px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cmp-venn { min-width: 0; }
.cmp-venn .venn { max-width: 100%; height: auto; color: var(--ink); }
.cmp-venn-cap { margin: 6px 0 0; max-width: 60ch; }
.cmp-regions { min-width: 0; overflow-x: auto; }
table.cmp-table { font-size: var(--fs-xs); white-space: normal; }
table.cmp-table td { text-align: left; vertical-align: top; }
table.cmp-table td.cmp-region-name { white-space: nowrap; font-weight: 600; }
table.cmp-table tr.cmp-region.hot td { background: var(--select); }
.cmp-member-list { display: flex; flex-wrap: wrap; gap: 4px; }
.chip.cmp-member { font-family: var(--font-mono); padding: 1px 7px; color: var(--ink); font-weight: 600; }
.chip.cmp-member:hover { border-color: var(--accent); background: var(--accent-bg); }
.chip.cmp-member .cmp-member-name { font-family: var(--font-body); font-weight: 400; color: var(--ink-2); }
.chip.cmp-member .cmp-member-strips { display: inline-flex; gap: 6px; align-items: flex-end; }
.cmp-member-forms { padding: 2px 7px; }

/* export menu */
.export-menu .menu-body { min-width: 320px; gap: 6px; }
.export-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.export-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.export-actions { display: inline-flex; gap: 4px; }
.export-note { margin: 2px 0 0; max-width: 40ch; }
.export-status { display: block; min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .typ-bar.indeterminate .typ-fill { animation: none; width: 100% !important; opacity: 0.5; }
  .typ-fill, .typ-load::after { transition: none !important; }
}
@media (max-width: 899.98px) {
  .cmp-layout { grid-template-columns: 1fr; }
  .typ-downloads { margin-left: 0; }
  .export-menu .menu-body { min-width: 260px; }
}

/* ---- the "= exact arithmetic" badge is a button; its dialog says how the verdict was computed (exact.js) */
button.badge-exact { font-family: inherit; line-height: inherit; cursor: pointer; }
button.badge-exact:hover { background: var(--accent); color: var(--accent-ink); }
button.badge-exact:hover::before { color: inherit; }
button.badge-exact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.linklike:hover { text-decoration-style: solid; }
.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.verdict-how { margin-top: 2px; }
.dialog-exact { width: min(92vw, 600px); }
.exact-body { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-0); }
.exact-part { display: flex; flex-direction: column; gap: 4px; }
.exact-part-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-weight: 600; }
.exact-part p { margin: 0; }
.exact-cmd-row { display: flex; align-items: flex-start; gap: 8px; }
.exact-cmd { flex: 1 1 auto; margin: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-2); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }

/* all lengths (typotron.core.certify) and the Word Stress Catalog overlay (web/dev/certify/PLAN.md section 6) */
table.typ-table td.typ-ext-col { text-align: left; white-space: nowrap; font-family: var(--font-body); }
table.typ-table th.typ-ext-col, table.typ-table th.typ-cat-col { text-align: left; }
.typ-ext .typ-ext-main { display: block; font-weight: 600; }
.typ-ext .typ-tag { display: block; font-size: 9px; line-height: 1.1; color: var(--ink-3); font-family: var(--font-mono); max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.typ-ext.typ-cert .typ-ext-main { color: var(--accent); }
.typ-ext.typ-diverge .typ-ext-main { color: var(--bar); }
.typ-ext.typ-verified .typ-ext-main, .typ-ext.typ-norule .typ-ext-main { color: var(--ink-2); font-weight: 500; }
.typ-ext.typ-tie .typ-ext-main { color: var(--loser); }
.typ-ext.typ-fail .typ-ext-main { color: var(--fatal); }
.typ-ext.typ-none { color: var(--ink-3); font-weight: 400; }
table.typ-table td.typ-cat-col { text-align: left; white-space: nowrap; font-family: var(--font-mono); max-width: 22em; overflow: hidden; text-overflow: ellipsis; }
table.typ-table td.typ-cat-col.typ-cat-open { cursor: pointer; }
table.typ-table td.typ-cat-col.typ-cat-open:hover, table.typ-table td.typ-cat-col.typ-cat-open:focus-visible { background: var(--accent-bg); outline: none; }
table.typ-table td.typ-cat-col.typ-none { color: var(--ink-3); }
.typ-cat-link { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px; }
.typ-cat-link:hover { text-decoration-style: solid; }
.typ-cat-more { color: var(--ink-2); font-size: var(--fs-xs); }
.typ-cat-name { font-family: var(--font-body); }
.typ-cat-mode { display: block; width: auto; max-width: 100%; font-weight: 400; font-size: 10.5px; padding: 0 2px; margin: 2px 0 0; }   /* under the label: beside it the header cell overflowed its column */
.typ-certtools { display: inline-flex; gap: 4px; align-items: center; }
.typ-cert-which, .typ-cert-n { width: auto; }
.chip.stat-ext .stat-value, .chip.stat-cat .stat-value { color: var(--ink); font-weight: 500; }
.typ-popover { position: fixed; z-index: 60; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: 8px 10px; overflow: auto; font-size: var(--fs-xs); }
.typ-popover:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.typ-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 2px; }
.typ-popover-head a { color: var(--accent); }
.typ-popover-close { font: inherit; font-size: 16px; line-height: 1; background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 0 4px; }
.typ-popover-close:hover { color: var(--ink); }
.typ-popover-sub { margin: 0 0 6px; }
.typ-popover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.typ-popover-list li { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; padding: 1px 0; border-top: 1px solid var(--rule-2, var(--rule)); }
.typ-popover-list li:first-child { border-top: 0; }
.typ-cat-glottolog { color: var(--ink-3); text-decoration: underline dotted; }
/* the all-lengths lines stand on their own lines under the volumes clause, one per witness (REVIEW_ui.md note 12) */
.verdict-certify { display: block; margin-top: 2px; }
.verdict-certify-line { display: block; }
@media (max-width: 600px) {
  .typ-popover { left: 8px !important; width: calc(100vw - 16px) !important; }
}

.beta{background:var(--ink);color:var(--paper);font-size:.95rem;padding:.55rem 0}.beta .wrap{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;max-width:1200px;margin:0 auto;padding:0 22px}.beta b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;background:#c8102e;color:#fff;padding:.15rem .5rem;border-radius:3px}.beta a{color:var(--paper);text-decoration:underline}
.acc-strip{border-bottom:3px solid var(--accent)}