/* base.css — The Cryptic Word, colour edition.
 * Tokens, type, chrome (masthead / nav / foot / app bar) and every shared
 * component: buttons, chips, pills, segmented controls, switches, inputs,
 * menus, dialogs, toasts, bands, plates, cutting cards, parse trees, grid
 * thumbnails, bars, tables, empty/loading/fail states.
 *
 * Components read --accent (section colour) from their nearest ancestor; the
 * router sets it on <body>.
 *
 * Contrast rules the tokens below exist to keep:
 *  - A label on a coloured fill is whichever of white or ink reads better on
 *    THAT fill (--on-of, computed per element from --tone / --accent / --band),
 *    so a view can set any section or subject colour and the label follows.
 *  - Small tone-coloured text on paper (kickers and the like) is inked down in
 *    the morning edition and lifted in the evening one (--tx-mix / --tx-amt).
 *  - The grid is printed matter: like the art plates it keeps its paper in the
 *    evening edition (see "printed grid" below).
 */

/* ================================================================ tokens */
:root {
  color-scheme: light;
  /* Morning edition */
  --paper:#f6f1e6; --paper-2:#efe7d6; --paper-3:#e5dac3; --card:#fffcf5;
  --ink:#16140f; --ink-2:#3a352c; --muted:#6c6457; --rule:#16140f; --hair:#d4c8b0;
  --cell:#fffdf8; --block:#16140f; --cell-line:#16140f;
  --hl:#ffe27a; --hl-cursor:#ffb938;
  /* --ok and --rev are a shade deeper than the first draft (#138a4b, #d9480f)
     so a white label on them, and --rev as text on --rev-bg, pass AA. */
  --ok:#117f45; --ok-bg:#cfeedd; --ok-ink:#0d5f35;
  --rev:#b53a0c; --rev-bg:#ffe1cf;
  --bad:#c8102e;

  /* Button / section colours */
  --c-red:#d7263d; --c-blue:#1d5fd1; --c-yellow:#f5b700; --c-green:#1f9d55;
  --c-orange:#ec6a12; --c-purple:#6b3fb8; --c-teal:#0e8f8f; --c-pink:#d6337a; --c-ink:#16140f;
  --c-front: var(--c-ink);
  /* Progress (DESIGN §15): every other tone was taken, so it borrows the
     astronomy subject’s navy, whose white label and kickers were measured
     in §10 for both editions. */
  --c-navy:#23307a;

  /* Subject colours (sport a shade deeper than #2e8b3d: neither white nor ink
     reached 4.5:1 on the original) */
  --t-history:#9a5b2e; --t-geography:#0e8f8f; --t-science:#5b4bd6; --t-literature:#8e1b3f;
  --t-music:#d6337a; --t-cinema:#b8860b; --t-mythology:#7a3fb5; --t-food:#e0701a;
  --t-sport:#2a8238; --t-astronomy:#23307a; --t-nature:#5f8f2a; --t-art:#c2185b;
  /* The six later subjects, as given: white labels on the five dark ones
     (6.9:1 or better), an ink label on games (4.7:1), kickers 5.4:1 or better. */
  --t-potter:#a4262c; --t-lotr:#35594a; --t-shakespeare:#4b2c6f; --t-sea:#0f5c99;
  --t-detective:#3d3d3d; --t-games:#c46a00;

  /* Print furniture */
  --btn-line: var(--ink);          /* button border + hard print shadow */
  --btn-rim: var(--ink);           /* border of neutral (paper-coloured) controls */
  --drop-rim: transparent;         /* 1px outline round a hard shadow (evening only) */
  --bar-track: var(--paper-3);
  --btn-ink-bg:#16140f; --btn-ink-fg:#ffffff;

  /* Label on a coloured fill: `color: color(from <fill> var(--on-of))` gives
     white or ink, whichever has the higher WCAG contrast with that fill.
     0.1947 is the luminance at which the two tie; the clamp floors are ink
     (#16140f) in linear sRGB. Tokens only — substituted where they are used. */
  --lum-k: (0.1947 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 9999;
  --on-of: srgb-linear clamp(0.0080, var(--lum-k), 1) clamp(0.0070, var(--lum-k), 1) clamp(0.0048, var(--lum-k), 1);
  /* Tone-coloured small text on paper: mixed this far towards --tx-mix. */
  --tx-mix: #16140f; --tx-amt: 34%;
  --plate-bg:#f3ead3;
  --dot: rgba(22,20,15,.16);       /* halftone dot */
  --pop-shadow: 0 18px 44px rgba(22,20,15,.18);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Type */
  --f-mast: "UnifrakturMaguntia", "Old English Text MT", "Canterbury", Georgia, serif;
  --f-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;
  --f-label: "Oswald", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-grid: "Libre Franklin", "Franklin Gothic Medium", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --pad-x: clamp(16px, 3vw, 56px);
  --gap: clamp(18px, 2vw, 36px);
  --radius: 10px;
  --accent: var(--c-front);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#13110d; --paper-2:#1c1914; --paper-3:#25211a; --card:#1f1b15;
    --ink:#f1ead9; --ink-2:#cfc6b2; --muted:#9a907c; --rule:#f1ead9; --hair:#3a342a;
    --cell:#2a251d; --block:#050403; --cell-line:#0b0a08;
    --hl:#6d5a12; --hl-cursor:#a8740c;
    --ok:#3ccf82; --ok-bg:#153b27; --ok-ink:#8ff0b8;
    --rev:#ff8a4c; --rev-bg:#4a2410;
    --bad:#ff5a6e;
    --c-red:#e8455a; --c-blue:#3b7bea; --c-yellow:#ffc61a; --c-green:#2fb56a;
    --c-orange:#f7822e; --c-purple:#855ad2; --c-teal:#17a8a8; --c-pink:#e5508f; --c-ink:#16140f;
    --c-front: var(--ink);
    --c-navy:#5669d2;
    --t-history:#c27a48; --t-geography:#1fb0b0; --t-science:#7d6ff0; --t-literature:#c7426c;
    --t-music:#e8599a; --t-cinema:#d9a62a; --t-mythology:#a06ad9; --t-food:#f08c3c;
    --t-sport:#45b057; --t-astronomy:#5669d2; --t-nature:#86b84a; --t-art:#e04a86;
    /* The six later subjects, lifted for dark paper: each takes an ink label
       (5.3:1 or better), kickers read at 5.6:1 or better and the bare colour
       at 4.6:1. Detective's charcoal becomes a silver: at #3d3d3d it would
       all but vanish into the page. */
    --t-potter:#e35f62; --t-lotr:#6aa088; --t-shakespeare:#a67fbd; --t-sea:#4d93d1;
    --t-detective:#a3a3a3; --t-games:#e5902a;
    --btn-line:#000; --btn-ink-bg:#f1ead9; --btn-ink-fg:#13110d;
    --btn-rim:#5a5245; --drop-rim:#4a4336; --bar-track:#2e2921;
    --tx-mix:#f1ead9; --tx-amt:20%;
    --dot: rgba(0,0,0,.28);
    --pop-shadow: 0 18px 44px rgba(0,0,0,.55);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#13110d; --paper-2:#1c1914; --paper-3:#25211a; --card:#1f1b15;
  --ink:#f1ead9; --ink-2:#cfc6b2; --muted:#9a907c; --rule:#f1ead9; --hair:#3a342a;
  --cell:#2a251d; --block:#050403; --cell-line:#0b0a08;
  --hl:#6d5a12; --hl-cursor:#a8740c;
  --ok:#3ccf82; --ok-bg:#153b27; --ok-ink:#8ff0b8;
  --rev:#ff8a4c; --rev-bg:#4a2410;
  --bad:#ff5a6e;
  --c-red:#e8455a; --c-blue:#3b7bea; --c-yellow:#ffc61a; --c-green:#2fb56a;
  --c-orange:#f7822e; --c-purple:#855ad2; --c-teal:#17a8a8; --c-pink:#e5508f; --c-ink:#16140f;
  --c-front: var(--ink);
  --c-navy:#5669d2;
  --t-history:#c27a48; --t-geography:#1fb0b0; --t-science:#7d6ff0; --t-literature:#c7426c;
  --t-music:#e8599a; --t-cinema:#d9a62a; --t-mythology:#a06ad9; --t-food:#f08c3c;
  --t-sport:#45b057; --t-astronomy:#5669d2; --t-nature:#86b84a; --t-art:#e04a86;
  --t-potter:#e35f62; --t-lotr:#6aa088; --t-shakespeare:#a67fbd; --t-sea:#4d93d1;
  --t-detective:#a3a3a3; --t-games:#e5902a;
  --btn-line:#000; --btn-ink-bg:#f1ead9; --btn-ink-fg:#13110d;
  --btn-rim:#5a5245; --drop-rim:#4a4336; --bar-track:#2e2921;
  --tx-mix:#f1ead9; --tx-amt:20%;
  --dot: rgba(0,0,0,.28);
  --pop-shadow: 0 18px 44px rgba(0,0,0,.55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- printed grid. In the evening edition the page goes dark but the grid
   stays printed matter, the way the art plates keep their cream: a dark cell
   field against black squares and black rules could not be made to read (a
   white square and a black one were 1.35:1 apart). Inside a grid, and in the
   thumbnails and legend swatches that picture one, the morning grid tokens
   apply — every state keeps the contrast it has in the morning edition. The
   router stamps data-edition on <html> from the reader's choice. */
:root[data-edition="evening"] :is(.sv-grid, .st-grid, .st-sw, .gridthumb) {
  --ink:#16140f; --ink-2:#3a352c; --muted:#6c6457;
  --cell:#ece3cf; --block:#16140f; --cell-line:#16140f;
  --hl:#ffe27a; --hl-cursor:#ffb938;
  --ok:#117f45; --ok-bg:#cfeedd; --ok-ink:#0d5f35;
  --rev:#b53a0c; --rev-bg:#ffe1cf; --bad:#c8102e;
  --gt-cell:#ece3cf; --gt-line:#b9ae96; --gt-block:#16140f;
}
/* Revealed letters in the current word keep the revealed hue on the printed
   grid (an evening-only lighter letter was tuned for a dark cell). */
:root[data-edition="evening"] .sv-grid .sv-c.is-rev:is(.is-word, .is-cur) .sv-ch { color: inherit; }
/* On dark paper the grid's ink frame, and any black squares along its edge,
   would melt into the page and the grid would lose its square outline. A
   narrow newsprint margin round it (a clipping laid on the desk) keeps the
   edge; it is painted outside the grid, so no sizing changes. */
:root[data-edition="evening"] .sv-grid { position: relative; --mat-b: var(--gb, 3px); }
:root[data-edition="evening"] .st-grid { position: relative; --mat-b: 3px; }
:root[data-edition="evening"] :is(.sv-grid, .st-grid)::after {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(-1 * (var(--mat-b) + 4px));
  border: 4px solid #ece3cf;
}

/* ================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.1; margin: 0; font-weight: 800; }
p { margin: 0 0 .8em; }
code, kbd { font-family: var(--f-grid); font-size: .88em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; text-align: center;
  border: 1.5px solid var(--btn-rim); border-radius: 6px; background: var(--card);
  box-shadow: 1.5px 1.5px 0 var(--btn-line), 1.5px 1.5px 0 1px var(--drop-rim); font-weight: 700;
}
::selection { background: var(--hl); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
a:not(.btn):not(.nav-item):not(.pill):focus-visible,
summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  box-shadow: 0 0 0 2px var(--ink);
  border-radius: 3px;
}
#view:focus, #app-view:focus, [tabindex="-1"]:focus { outline: none; box-shadow: none; }

.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;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 3000;
  background: var(--c-yellow); color: #16140f; padding: 10px 16px;
  border: 2px solid #16140f; border-radius: var(--radius); box-shadow: 3px 3px 0 #16140f;
  font: 600 14px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; }
#capture {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; border: 0; padding: 0; margin: 0; font-size: 16px; background: transparent; color: transparent;
}
.noscript { padding: 40px var(--pad-x); font: italic 20px var(--f-body); }

/* ============================================================= type kit */
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font: 600 12.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent), var(--tx-mix) var(--tx-amt));
}
.kicker::before { content: ""; width: 10px; height: 10px; background: var(--accent); flex: none; }
.kicker.plain::before { display: none; }
.headline { font-family: var(--f-head); font-weight: 900; line-height: 1.02; letter-spacing: -.012em; margin: 0; }
.deck { font-family: var(--f-body); font-style: italic; color: var(--muted); font-size: clamp(18px, 1.35vw, 23px); line-height: 1.4; margin: 0; }
.label { font: 600 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.figure { font: 900 clamp(34px, 3vw, 56px)/1 var(--f-head); font-variant-numeric: lining-nums tabular-nums; }
.num, .tabular { font-family: var(--f-grid); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.byline { font: italic 15px var(--f-body); color: var(--muted); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 18px 0; }
.rule-thick { border: 0; border-top: 4px solid var(--rule); margin: 22px 0; }
.rule-hair { border: 0; border-top: 1px solid var(--hair); margin: 14px 0; }
.prose { max-width: 75ch; font-size: 18px; line-height: 1.6; }
.prose p { margin: 0 0 1em; }

/* ================================================================ chrome */
/* ---- masthead */
#masthead { padding: 0 var(--pad-x); background: transparent; }
.mast-title {
  margin: 0; font-family: var(--f-mast); font-weight: 400; line-height: .95;
  text-align: center; white-space: nowrap; letter-spacing: .005em;
}
.mast-title a { color: var(--ink); text-decoration: none; }
.mast-title a:hover { color: var(--ink); }

.mast-full { padding-top: clamp(10px, 1.2vw, 20px); }
.mast-toprule { border-top: 1px solid var(--rule); }
.mast-full .mast-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(12px, 2vw, 40px);
  padding: clamp(12px, 1.3vw, 22px) 0 clamp(12px, 1.2vw, 20px);
}
.mast-full { --ear-w: clamp(210px, 15vw, 300px); --ear-gap: clamp(16px, 2vw, 40px); }
.mast-full .mast-row { column-gap: var(--ear-gap); }
/* The title takes whatever the two ears leave. The divisor is from the old,
   longer nameplate (~9.6em); "The Cryptic Word" is ~7.4em, so it keeps the
   same type size and simply sits narrower. */
.mast-full .mast-title {
  font-size: clamp(40px, calc((100vw - 2 * var(--pad-x) - 2 * var(--ear-w) - 2 * var(--ear-gap) - 16px) / 9.6), 112px);
}

.ear { min-width: 0; display: flex; }
.ear-left { justify-self: start; align-items: center; gap: 12px; border: 1px solid var(--rule); padding: 8px 16px 8px 8px; min-height: 84px; width: var(--ear-w); background: var(--card); }
/* The streak ear is a link to Progress (§15) but stays an ear: no fill, no
   print shadow; its label underlines on hover so it says where it goes. */
.ear-left-link { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; color: inherit; text-decoration: none; }
.ear-left-link:hover .ear-k, .ear-left-link:focus-visible .ear-k { color: var(--ink); text-decoration: underline; text-decoration-color: var(--c-navy); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ear-right { justify-self: end; }
.ear-owl { width: 64px; height: 64px; flex: none; background: var(--plate-bg); border: 1px solid var(--rule); overflow: hidden; }
.ear-owl img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ear-text { display: flex; flex-direction: column; min-width: 0; }
.ear-k { display: block; font: 600 11px/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ear-big { display: block; font: 800 22px/1.1 var(--f-head); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ear-sub { display: inline-flex; align-items: center; gap: 6px; font: italic 15px/1.3 var(--f-body); color: var(--muted); }
.ear-link {
  --ear: var(--c-blue);
  display: flex; flex-direction: column; justify-content: center; min-height: 84px; width: var(--ear-w);
  padding: 10px 18px; text-decoration: none; color: #fff; background: var(--ear);
  border: 2px solid var(--btn-line); box-shadow: 4px 4px 0 var(--btn-line), 4px 4px 0 1px var(--drop-rim);
  transition: transform .1s ease, box-shadow .1s ease;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.5px);
  background-size: 7px 7px;
}
.ear-link:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-line), 5px 5px 0 1px var(--drop-rim); color: #fff; }
.ear-link.ear-blank:hover { transform: none; }
.ear-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--btn-line), 1px 1px 0 1px var(--drop-rim); }
.ear-link .ear-k, .ear-link .ear-sub, .ear-link .ear-big { color: inherit; }
.ear-link .ear-k { opacity: .9; }
.ear-link .ear-sub { font-style: normal; font: 600 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.ear-link .icon { width: 14px; height: 14px; }
.ear-blank { background: var(--paper-2); color: var(--muted); box-shadow: none; border: 1px solid var(--hair); }
.ear-blank .ear-k, .ear-blank .ear-big { color: var(--muted); }

.dateline {
  position: relative; margin-top: 6px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 7px 2px;
  font: 600 12.5px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);
}
.dateline::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 3px; background: var(--rule); }
.dateline b { color: var(--ink); font-weight: 700; }
.dl-date { text-align: center; }

.mast-compact { padding-top: 10px; }
.mast-compact .mast-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 4px 0 10px; border-bottom: 1px solid var(--rule);
}
.mast-compact .mast-title { font-size: clamp(30px, 3vw, 44px); }
.mast-side { font: 600 12px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mast-who { text-align: right; }
.mast-who b { color: var(--ink); }
.mast-who-link { color: inherit; text-decoration: none; }
.mast-who-link:hover b, .mast-who-link:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }

/* ---- section nav */
#nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--pad-x);
}
body[data-chrome="paper"] #nav { box-shadow: 0 1px 0 var(--rule); }
.nav-inner { display: flex; align-items: center; min-width: 0; }
.nav-list {
  display: flex; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0;
  gap: clamp(2px, 1.2vw, 30px);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav-list::-webkit-scrollbar { display: none; }
/* When the list scrolls (phones), the side with more sections fades out so
   the cut-off reads as "there is more this way". core.js sets data-more. */
.nav-list[data-more] {
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.nav-list[data-more~="left"] { --fade-l: 30px; }
.nav-list[data-more~="right"] { --fade-r: 40px; }
.nav-list > li { flex: none; }
.nav-list > li:first-child { margin-left: auto; }
.nav-list > li:last-child { margin-right: auto; }
.nav-item {
  --sec: var(--ink);
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 8px;
  font: 600 14px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav-item::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 4px;
  background: var(--sec); transform: scaleX(0); transform-origin: left center;
  transition: transform .18s ease;
}
.nav-item:hover, .nav-item.is-active { color: var(--ink); }
.nav-item:hover::after, .nav-item.is-active::after { transform: scaleX(1); }
.nav-item.is-active { font-weight: 700; }
.nav-item:focus-visible { outline-offset: -3px; }
/* Ten sections: between 1100 and 1279px the list would run 51px over and
   scroll on a desktop, so the items close up a little there instead. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav-list { gap: 4px; }
  .nav-item { padding: 0 6px; letter-spacing: .1em; }
}
.nav-dot { width: 9px; height: 9px; background: var(--sec); flex: none; border-radius: 2px; }

/* ---- views */
#view { display: block; padding: clamp(18px, 2vw, 34px) var(--pad-x) 0; min-height: 55vh; }
#app-view {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper);
}
body[data-chrome="app"] { overflow: hidden; }
body[data-chrome="app"] { background-image: none; }

/* ---- footer */
#foot { padding: 0 var(--pad-x) 36px; margin-top: clamp(40px, 5vw, 80px); }
.foot-rule { border-top: 6px solid var(--rule); box-shadow: 0 4px 0 -3px var(--rule); height: 5px; }
.foot-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 18px 0 8px;
  font: 600 13px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
}
.foot-nav a { --sec: var(--ink); color: var(--ink-2); text-decoration: none; padding-bottom: 5px; border-bottom: 3px solid var(--sec); }
.foot-nav a:hover { color: var(--ink); }
.foot-mark { text-align: center; margin: 14px 0 0; font-family: var(--f-mast); font-size: 30px; line-height: 1; }
.foot-mark a { text-decoration: none; color: var(--ink); }
.foot-account { text-align: center; margin: 10px 0 0; font: 500 12px/1.4 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.foot-account a { color: inherit; }

/* ---- app bar */
.appbar {
  --bar: var(--accent);
  flex: none; position: relative; z-index: 20;
  height: 56px; display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px);
  padding: 0 clamp(10px, 1.4vw, 22px);
  background: var(--paper);
  border-bottom: 4px solid var(--bar);
}
.appbar-logo {
  font-family: var(--f-mast); font-size: 25px; line-height: 1; color: var(--ink);
  text-decoration: none; white-space: nowrap; flex: none;
}
.appbar-logo:hover { color: var(--ink); }
.logo-short { display: none; }
.appbar-left { display: flex; align-items: center; gap: 8px; }
.appbar-titles {
  display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1;
  border-left: 1px solid var(--hair); padding-left: clamp(10px, 1.2vw, 18px); height: 38px;
}
.appbar-kicker { font: 700 11.5px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase; color: color-mix(in srgb, var(--bar), var(--tx-mix) var(--tx-amt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-title { font: 800 20px/1.15 var(--f-head); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

/* ---- save status (CC.saveStatus): one pill for every save path. Quiet while
   all is well; a failure turns it into a button that says what happened and
   tries again when pressed. The words go on phones, where the icon and the
   title carry it. */
.savestatus {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; flex: none;
  border: 1.5px solid var(--hair); border-radius: 999px; background: var(--card);
  font: 600 12px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; user-select: none;
}
.savestatus-ico { display: inline-flex; }
.savestatus .icon { width: 15px; height: 15px; flex: none; }
.savestatus[data-state="saved"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--hair)); }
.savestatus[data-state="saving"] .icon { animation: cc-turn 1.2s linear infinite; }
.savestatus[data-state="retry"] { color: var(--ink); border-color: var(--rev); background: var(--rev-bg); cursor: pointer; }
.savestatus[data-state="offline"] { color: var(--ink); border: 1.5px dashed var(--ink-2); background: var(--paper-2); cursor: pointer; }
.savestatus[data-state="error"] { background: var(--c-red); color: #fff; border: 2px solid var(--btn-line); cursor: pointer; }
.savestatus[role="button"]:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
@media (max-width: 699px) {
  .savestatus { padding: 0 8px; }
  .savestatus .savestatus-text { display: none; }
}

/* ============================================================== buttons */
.btn {
  --tone: var(--btn-ink-bg); --on: var(--btn-ink-fg);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 40px; padding: 0 18px; margin: 0;
  font: 600 14px/1 var(--f-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--on); background-color: var(--tone);
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  border: 2px solid var(--btn-line); border-radius: var(--radius);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim);
  text-decoration: none; white-space: nowrap; user-select: none; -webkit-user-select: none;
  cursor: pointer; vertical-align: middle; flex: none;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 4px 4px 0 var(--btn-line), 4px 4px 0 1px var(--drop-rim); color: var(--on); filter: saturate(1.08) brightness(1.04); }
.btn:active { transform: translate(2px, 2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.16), 1px 1px 0 var(--btn-line), 1px 1px 0 1px var(--drop-rim); }
.btn:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; filter: none;
}
.btn .icon { width: 1.2em; height: 1.2em; flex: none; }
.btn-label { display: inline-block; }

.btn-red    { --tone: var(--c-red);    --on: #fff; }
.btn-blue   { --tone: var(--c-blue);   --on: #fff; }
.btn-yellow { --tone: var(--c-yellow); --on: #16140f; }
.btn-green  { --tone: var(--c-green);  --on: #16140f; }
.btn-orange { --tone: var(--c-orange); --on: #16140f; }
.btn-purple { --tone: var(--c-purple); --on: #fff; }
.btn-teal   { --tone: var(--c-teal);   --on: #16140f; }
.btn-pink   { --tone: var(--c-pink);   --on: #fff; }
.btn-navy   { --tone: var(--c-navy);   --on: #fff; }
.btn-ink    { --tone: var(--btn-ink-bg); --on: var(--btn-ink-fg); }
.btn-accent { --tone: var(--accent);   --on: #fff; }
.btn-ghost  {
  --tone: var(--card); --on: var(--ink); border-color: var(--btn-rim);
  background-image: none; box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim);
}
.btn-ghost:hover { background-color: var(--paper-2); box-shadow: 4px 4px 0 var(--btn-line), 4px 4px 0 1px var(--drop-rim); filter: none; }
.btn-ghost:active { box-shadow: 1px 1px 0 var(--btn-line), 1px 1px 0 1px var(--drop-rim); }
:root[data-theme="dark"] .btn-ghost { --tone: var(--paper-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-ghost { --tone: var(--paper-3); } }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.16), 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim); }
.btn-sm:hover { box-shadow: inset 0 -2px 0 rgba(0,0,0,.16), 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); }
.btn-sm.btn-ghost { box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim); }
.btn-sm.btn-ghost:hover { box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); }
.btn-md { height: 40px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 17px; border-radius: 12px; gap: .6em; }
.btn-xl { height: 64px; padding: 0 32px; font-size: 20px; border-radius: 14px; }
.btn-icon { padding: 0; width: 40px; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 52px; }
.btn-icon .icon { width: 20px; height: 20px; }
.btn-icon.btn-sm .icon { width: 17px; height: 17px; }
.btn-menu { color: var(--ink); }
.btn.is-open { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--btn-line), 1px 1px 0 1px var(--drop-rim); }
.btn-badge {
  position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--c-yellow); color: #16140f; border: 2px solid var(--btn-line);
  font: 700 12px/1 var(--f-grid); letter-spacing: 0;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.btn-block { width: 100%; }
/* A text-weight link that still looks like it does something. */
.more-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--accent); padding-bottom: 4px;
}
.more-link .icon { width: 15px; height: 15px; transition: transform .15s; }
.more-link:hover .icon { transform: translateX(3px); }

/* ============================================= chips, pills, segmented */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.chip {
  --tone: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: 999px;
  font: 600 12.5px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--btn-rim);
  white-space: nowrap; text-decoration: none;
}
.chip .icon { width: 14px; height: 14px; }
.chip-sm { height: 24px; padding: 0 9px; font-size: 11px; }
button.chip, a.chip { cursor: pointer; transition: background-color .12s, transform .08s, box-shadow .08s; box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim); }
button.chip:hover, a.chip:hover { background: var(--paper-2); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); }
button.chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--btn-line), 1px 1px 0 1px var(--drop-rim); }
.chip[aria-pressed="true"], .chip.is-on, .chip[aria-selected="true"] {
  background: var(--tone); color: #fff; border-color: var(--btn-line);
}
.chip-count { font-family: var(--f-grid); font-weight: 700; font-size: .95em; opacity: .75; letter-spacing: 0; }
.chip-accent { background: color-mix(in srgb, var(--accent) 16%, var(--card)); border-color: var(--accent); color: var(--ink); }
.chip-ok    { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); }
.chip-rev   { background: var(--rev-bg); border-color: var(--rev); color: var(--rev); }
.chip-prog  { background: color-mix(in srgb, var(--hl) 70%, var(--card)); border-color: var(--hl-cursor); color: var(--ink); }
.chip-theme { background: color-mix(in srgb, var(--c-pink) 14%, var(--card)); border-color: var(--c-pink); }
.chip-red { --tone: var(--c-red); } .chip-blue { --tone: var(--c-blue); } .chip-green { --tone: var(--c-green); }
.chip-orange { --tone: var(--c-orange); } .chip-purple { --tone: var(--c-purple); } .chip-teal { --tone: var(--c-teal); }
.chip-pink { --tone: var(--c-pink); } .chip-yellow { --tone: var(--c-yellow); } .chip-navy { --tone: var(--c-navy); }
/* Tags for rules: checked / by eye / convention */
.tag { --tone: var(--c-blue); display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 11px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--tone); border: 1.5px solid var(--btn-line); white-space: nowrap; }
.tag-checked { --tone: var(--c-green); color: #16140f; }
.tag-by-eye { --tone: var(--c-orange); color: #16140f; }
.tag-convention { --tone: var(--c-blue); }

/* Pill tabs (Settings tab strip and the like). */
.pills { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pill {
  --tone: var(--accent);
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 999px; border: 2px solid var(--btn-rim); background: var(--card); color: var(--ink);
  font: 600 14px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim); cursor: pointer; white-space: nowrap;
  transition: transform .08s, box-shadow .08s, background-color .12s;
}
.pill .icon { width: 17px; height: 17px; }
.pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); background: var(--paper-2); color: var(--ink); }
.pill[aria-selected="true"], .pill.is-active, .pill[aria-current="page"] {
  background: var(--tone); color: #fff; border-color: var(--btn-line); box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim);
}
.pill-red { --tone: var(--c-red); } .pill-blue { --tone: var(--c-blue); } .pill-green { --tone: var(--c-green); }
.pill-orange { --tone: var(--c-orange); } .pill-purple { --tone: var(--c-purple); } .pill-teal { --tone: var(--c-teal); }
.pill-pink { --tone: var(--c-pink); } .pill-yellow { --tone: var(--c-yellow); } .pill-navy { --tone: var(--c-navy); }
.pill-yellow[aria-selected="true"], .pill-yellow.is-active { color: #16140f; }

/* Segmented control. */
.seg {
  display: inline-flex; border: 2px solid var(--btn-rim); border-radius: 12px; overflow: hidden;
  background: var(--card); box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim);
}
.seg > button, .seg > a {
  --tone: var(--accent);
  border: 0; border-right: 2px solid var(--btn-rim); background: transparent; color: var(--ink);
  padding: 0 18px; min-height: 42px; display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.seg > :last-child { border-right: 0; }
.seg > button:hover { background: var(--paper-2); }
.seg > [aria-pressed="true"], .seg > [aria-checked="true"], .seg > .is-active { background: var(--tone); color: #fff; }
.seg > button:focus-visible { outline-offset: -5px; }

/* Switches: <label class="switch"><input type="checkbox" role="switch"><span class="switch-ui"></span><span class="switch-text"><b>…</b><small>…</small></span></label> */
.switch { position: relative; display: flex; align-items: flex-start; gap: 16px; cursor: pointer; padding: 12px 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.switch-ui {
  --tone: var(--c-green);
  flex: none; position: relative; width: 60px; height: 34px; border-radius: 999px;
  background: var(--paper-3); border: 2px solid var(--btn-rim); box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim);
  transition: background-color .15s ease;
}
.switch-ui::before {
  content: "✕"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font: 700 12px/1 var(--f-grid); color: var(--muted);
}
.switch-ui::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--btn-rim); transition: transform .16s cubic-bezier(.3,.9,.4,1.2);
}
.switch input:checked + .switch-ui { background: var(--tone); }
.switch input:checked + .switch-ui::before { content: "✓"; left: 10px; right: auto; color: #fff; font-size: 14px; }
.switch input:checked + .switch-ui::after { transform: translateX(26px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.switch input:disabled + .switch-ui { opacity: .45; }
.switch-text { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.switch-text b { font: 600 18px/1.3 var(--f-body); }
.switch-text small { font: italic 15.5px/1.4 var(--f-body); color: var(--muted); }

/* Inputs. */
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 9px 13px;
  font: 17px/1.3 var(--f-body); color: var(--ink); background: var(--card);
  border: 2px solid var(--btn-rim); border-radius: var(--radius);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.05);
  transition: box-shadow .12s;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--c-yellow); outline-offset: 1px; }
.input::placeholder, .textarea::placeholder { color: var(--muted); font-style: italic; }
.input-caps { font-family: var(--f-grid); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font: 600 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.field-hint { font: italic 14.5px/1.4 var(--f-body); color: var(--muted); }
.field-error { font: 500 14.5px/1.4 var(--f-body); color: var(--bad); }
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search .input { padding-left: 40px; }

/* =============================================================== menus */
.menu {
  position: fixed; z-index: 1000; top: 0; left: 0;
  min-width: 250px; max-width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto;
  overscroll-behavior: contain;  /* scrolling a long menu never scrolls its anchor away (which would shut it) */
  background: var(--card); color: var(--ink);
  border: 2px solid var(--btn-rim); border-radius: 12px; padding: 6px;
  box-shadow: 4px 4px 0 var(--btn-line), 4px 4px 0 1px var(--drop-rim), var(--pop-shadow);
  opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease;
}
.menu.is-above { transform: translateY(4px); }
.menu.is-open { opacity: 1; transform: none; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 7px 10px 7px 7px; margin: 0; border: 0; border-radius: 9px; background: none;
  font: 500 16.5px/1.25 var(--f-body); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover, .menu-item:focus { background: var(--paper-2); outline: none; color: var(--ink); }
.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--c-yellow); }
.menu-icon {
  --tone: var(--ink-2);
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--hair);
}
.menu-icon:empty { background: transparent; border-color: transparent; }
.menu-icon .icon { width: 18px; height: 18px; }
.menu-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.menu-label { display: block; }
.menu-hint { display: block; font: italic 14px/1.3 var(--f-body); color: var(--muted); margin-top: 1px; }
.menu-done { color: var(--ok); display: inline-flex; flex: none; }
.menu-done .icon { width: 18px; height: 18px; }
.menu-item.is-done .menu-label { color: var(--muted); }
.menu-item.is-disabled { cursor: default; }
.menu-item.is-disabled:hover { background: none; }
.menu-item.is-disabled:not(.is-done) { opacity: .5; }
.menu-sep { height: 1px; background: var(--hair); margin: 6px 6px; }
.menu-head { padding: 8px 10px 4px; font: 600 11px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
/* Coloured icon tiles by tone — the menu reads at a glance. */
.menu-item[class*="menu-tone-"] .menu-icon { background: var(--tone); color: #fff; border-color: var(--btn-line); }
.menu-tone-red .menu-icon    { --tone: var(--c-red); }
.menu-tone-blue .menu-icon   { --tone: var(--c-blue); }
.menu-tone-green .menu-icon  { --tone: var(--c-green); }
.menu-tone-orange .menu-icon { --tone: var(--c-orange); }
.menu-tone-purple .menu-icon { --tone: var(--c-purple); }
.menu-tone-teal .menu-icon   { --tone: var(--c-teal); }
.menu-tone-pink .menu-icon   { --tone: var(--c-pink); }
.menu-tone-yellow .menu-icon { --tone: var(--c-yellow); }
.menu-item.menu-tone-yellow .menu-icon { color: #16140f; }
.menu-tone-red .menu-label { color: color-mix(in srgb, var(--c-red), var(--tx-mix) var(--tx-amt)); font-weight: 600; }
.menu-item.is-disabled .menu-icon { filter: grayscale(.6); }

/* ============================================================= dialogs */
.dialog {
  padding: 0; border: 2px solid var(--btn-rim); border-radius: 14px;
  background: var(--card); color: var(--ink);
  width: calc(100vw - 32px); max-width: 520px; max-height: calc(100dvh - 32px);
  box-shadow: 6px 6px 0 var(--btn-line), 6px 6px 0 1px var(--drop-rim), var(--pop-shadow);
  overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .16s ease, transform .16s ease;
}
.dialog.is-open { opacity: 1; transform: none; }
.dialog::backdrop { background: rgba(22,20,15,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.dialog-wide { max-width: min(960px, calc(100vw - 32px)); }
.dialog-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 36px); }
.dialog-stripe { height: 10px; flex: none; background: var(--accent); border-bottom: 2px solid var(--btn-line);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.5px); background-size: 6px 6px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 18px 4px 24px; flex: none; }
.dialog-head .kicker { margin-bottom: 4px; }
.dialog-title { font: 800 clamp(22px, 2vw, 28px)/1.15 var(--f-head); margin: 0 0 6px; }
.dialog-body { padding: 20px 24px 8px; overflow: auto; }
.dialog-modal .dialog-body { padding: 8px 24px 24px; }
.dialog-text { font: 17.5px/1.5 var(--f-body); color: var(--ink-2); }
.dialog-text p:last-child { margin-bottom: 0; }
.dialog-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px 14px; padding: 16px 24px 22px; }
.dialog-x {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border: 2px solid var(--btn-rim); border-radius: 10px; background: var(--card); color: var(--ink);
  box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim); cursor: pointer;
}
.dialog-x:hover { background: var(--paper-2); }
.dialog-x .icon { width: 18px; height: 18px; }

/* ---- signing in (CC.askSignIn, CC.signInPanel, CC.signInChip). A guest
   meets these when they try to check something: the paper's own dialog and
   buttons, the owl's plate in the corner, and the ways in as the account
   pages offer them — Google (on the paper's quiet button, with Google's own
   G), then Sign in, then Create an account. "Keep exploring" is the quiet
   way back, set like a label, so nobody takes it for the main button. */
.dialog-signin { max-width: 540px; }
.signin-body { padding-top: 22px; }
.signin-owl {
  float: right; width: 92px; aspect-ratio: 1; margin: 2px 0 12px 18px; overflow: hidden;
  background: var(--plate-bg); border: 1px solid var(--rule); transform: rotate(2deg);
  box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim);
}
.signin-owl img { display: block; width: 100%; height: 100%; object-fit: cover; }
.signin-acts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px 0 4px; }
.signin-acts > .btn { width: 100%; min-width: 0; }
.signin-acts > .signin-google, .signin-acts > .btn:only-child, .signin-acts > .signin-google + .btn:last-child { grid-column: 1 / -1; }
.btn .g-mark { width: 1.3em; height: 1.3em; }
.signin-foot { justify-content: center; padding: 8px 24px 18px; }
.signin-keep {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; cursor: pointer;
  min-height: 36px; padding: 6px 12px;
  font: 600 13px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-decoration: underline 2px; text-decoration-color: var(--hair); text-underline-offset: 6px;
}
.signin-keep:hover { color: var(--ink); text-decoration-color: currentColor; }
.signin-keep:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; border-radius: 4px; }

/* The same offer inline (Progress, the Canvas board, a page that needs an
   account): a card with the dialog's stripe, so the two read as one thing. */
.signin-panel {
  --pad: clamp(20px, 2.6vw, 34px);
  position: relative; display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 36px); align-items: center;
  max-width: 920px; margin: 0 auto; padding: calc(var(--pad) + 10px) var(--pad) var(--pad);
  background: var(--card); color: var(--ink); border: 2px solid var(--btn-rim); border-radius: 14px; overflow: hidden;
  box-shadow: 6px 6px 0 var(--btn-line), 6px 6px 0 1px var(--drop-rim);
}
.signin-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: var(--accent); border-bottom: 2px solid var(--btn-line);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.5px); background-size: 6px 6px;
}
.signin-panel.is-compact { grid-template-columns: minmax(0, 1fr); max-width: none; }
.signin-panel-art { background: var(--plate-bg); border: 1px solid var(--rule); aspect-ratio: 1; overflow: hidden; transform: rotate(-1.2deg); }
.signin-panel-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.signin-panel-title { font: 800 clamp(26px, 2.6vw, 40px)/1.08 var(--f-head); margin: 0 0 10px; }
.signin-panel.is-compact .signin-panel-title { font-size: clamp(22px, 1.9vw, 28px); }
.signin-fail .signin-panel-title { font: 900 clamp(32px, 3.6vw, 56px)/1.02 var(--f-head); }
.signin-panel-body { font: 17.5px/1.5 var(--f-body); color: var(--ink-2); margin: 0 0 18px; max-width: 60ch; }
.signin-panel-body p { margin: 0 0 8px; }

/* The app bar's chip: the words on a desk, "Sign in" alone on a phone. */
.signin-chip-short { display: none; }

/* ============================================================== toasts */
#toasts {
  position: fixed; z-index: 1100; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--toast-bottom, 22px) + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 24px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
#toasts[popover] {
  inset: auto; left: 50%; right: auto; top: auto;
  bottom: calc(var(--toast-bottom, 22px) + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; overflow: visible; height: auto;
}
#toasts[popover]:not(:popover-open) { display: none; }
#toasts[popover]:popover-open { display: flex; }
.toast {
  --tone: var(--c-blue);
  /* Click-through: a toast often sits over the clue lists, and a message
     should never swallow the click meant for the clue beneath it. Only its ×
     takes a click. */
  pointer-events: none; display: flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 9px 9px 9px 10px; background: var(--card); color: var(--ink);
  border: 2px solid var(--btn-rim); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim), var(--pop-shadow);
  font: 500 16.5px/1.35 var(--f-body);
  opacity: 0; transform: translateY(12px); transition: opacity .18s ease, transform .18s ease;
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(6px); }
.toast-good { --tone: var(--c-green); }
.toast-bad  { --tone: var(--c-red); }
.toast-info { --tone: var(--c-blue); }
.toast-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--tone); color: #fff; border: 1.5px solid var(--btn-line); }
.toast-icon .icon { width: 17px; height: 17px; }
.toast-msg { flex: 1; min-width: 0; }
.toast-x { pointer-events: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; }
.toast-x:hover { background: var(--paper-2); color: var(--ink); }
.toast-x .icon { width: 16px; height: 16px; }

/* ========================================================= bands, heads */
.band {
  --band: var(--accent);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  min-height: clamp(180px, 16vw, 300px);
  margin: 0 0 clamp(20px, 2vw, 32px);
  background: var(--band); color: #fff;
  border-top: 4px solid var(--rule); border-bottom: 4px solid var(--rule);
}
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.24) 1.3px, transparent 1.7px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 95%);
  mask-image: linear-gradient(100deg, transparent 25%, #000 95%);
}
.band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: rgba(255,255,255,.35); pointer-events: none;
}
.band-on-light { color: #16140f; }
.band-text {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 1; min-width: 0;
  padding: clamp(20px, 2.4vw, 44px) clamp(18px, 3vw, 52px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.band-kicker { margin: 0; font: 700 13px/1.2 var(--f-label); letter-spacing: .18em; text-transform: uppercase; opacity: .92; display: flex; align-items: center; gap: 10px; }
.band-kicker::before { content: ""; width: 26px; height: 3px; background: currentColor; }
.band-title { margin: 0; font: 900 clamp(40px, 5.2vw, 96px)/.95 var(--f-head); letter-spacing: -.015em; text-wrap: balance; }
.band-deck { margin: 6px 0 0; font: italic 400 clamp(18px, 1.45vw, 25px)/1.35 var(--f-body); max-width: 62ch; opacity: .96; }
.band-extra { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.band-extra .bar { --bar: currentColor; background: rgba(0,0,0,.22); border-color: rgba(0,0,0,.35); width: min(360px, 60vw); }
.band-stat { font: 600 13px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; }
.band-stat b { font: 800 22px/1 var(--f-head); letter-spacing: 0; text-transform: none; margin-right: 6px; }
/* The art comes first in the markup so that on a phone it can float beside
   the headline; on wider screens it is placed in the second column. */
.band-art {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 20px clamp(18px, 3vw, 52px) 20px 0;
}
.band-plate {
  width: clamp(210px, 22vw, 420px); aspect-ratio: 3 / 2; flex: none; overflow: hidden;
  background: var(--plate-bg); border: 2px solid var(--btn-line); box-shadow: 6px 6px 0 var(--btn-line), 6px 6px 0 1px var(--drop-rim);
  transform: rotate(1.4deg);
  background-image: radial-gradient(rgba(27,25,20,.14) 1.1px, transparent 1.5px); background-size: 7px 7px;
}
.band-art-many .band-plate { width: clamp(150px, 13vw, 250px); }
.band-art-many .band-plate:nth-child(2) { transform: rotate(-2deg) translateY(10px); }
.band-art-many .band-plate:nth-child(3) { transform: rotate(2.4deg) translateY(-6px); }
.band-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sechead {
  --accent-line: var(--rule);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  border-top: 4px solid var(--rule); padding-top: 12px;
  margin: clamp(36px, 3.6vw, 60px) 0 clamp(16px, 1.6vw, 24px);
}
.sechead-title {
  margin: 0; display: flex; align-items: center; gap: 12px;
  font: 700 clamp(20px, 1.55vw, 27px)/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase;
}
.sechead-title::before { content: ""; width: 16px; height: 16px; background: var(--accent); flex: none; }
.sechead-deck { margin: 6px 0 0; font: italic 17.5px/1.4 var(--f-body); color: var(--muted); }

/* =============================================================== plates */
.plate { margin: 0; min-width: 0; }
.plate-frame {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid var(--rule); background-color: var(--plate-bg);
  background-image: radial-gradient(rgba(27,25,20,.13) 1.1px, transparent 1.5px);
  background-size: 7px 7px;
}
.plate-frame.is-square { aspect-ratio: 1; }
.plate-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate-photo { aspect-ratio: auto; background-image: none; }
.plate-photo img { height: auto; max-height: 360px; object-fit: contain; background: var(--paper-2); }
.plate-caption { margin-top: 6px; font: italic 14px/1.35 var(--f-body); color: var(--muted); }
.plate-caption a { color: var(--muted); }
.art-missing { visibility: hidden; }

/* ========================================================= cutting card */
.cutting {
  --cut: var(--ok);
  position: relative; background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: 5px 5px 0 var(--btn-line), 5px 5px 0 1px var(--drop-rim);
  transform: rotate(-0.6deg);
  padding: 22px clamp(18px, 1.6vw, 26px) 18px;
  text-align: left;
}
.cutting-revealed { --cut: var(--rev); }
.cutting-tape {
  position: absolute; top: -11px; left: 50%; width: 92px; height: 22px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: color-mix(in srgb, var(--c-yellow) 52%, transparent);
  border-left: 2px dotted rgba(0,0,0,.12); border-right: 2px dotted rgba(0,0,0,.12);
  pointer-events: none;
}
.cutting-x {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid var(--btn-rim); border-radius: 9px; background: var(--card); color: var(--ink);
  box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim); cursor: pointer;
}
.cutting-x:hover { background: var(--paper-2); }
.cutting-x .icon { width: 16px; height: 16px; }
.cutting-kicker {
  display: flex; align-items: center; gap: 8px; margin: 0 40px 8px 0;
  font: 700 12px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase; color: color-mix(in srgb, var(--cut), var(--tx-mix) var(--tx-amt));
}
.cutting-kicker::before { content: ""; width: 10px; height: 10px; background: var(--cut); flex: none; }
.cutting-head { margin: 0; font: 800 clamp(26px, 2vw, 36px)/1.05 var(--f-head); letter-spacing: .03em; overflow-wrap: anywhere; }
.cutting-enum { font: 600 .55em/1 var(--f-grid); color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.cutting-pos { margin: 6px 0 0; font: 600 12.5px/1.2 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cutting-gloss { margin: 8px 0 12px; font: 400 18.5px/1.45 var(--f-body); }
.cutting-plate { margin: 12px 0 4px; }
.cutting-sub {
  margin: 14px 0 5px; padding-top: 10px; border-top: 1px solid var(--hair);
  font: 700 11.5px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);
}
.cutting-ety { margin: 0; font: 16.5px/1.5 var(--f-body); color: var(--ink-2); }
.cutting-fact {
  margin-top: 14px; padding: 2px 14px 12px; border-left: 5px solid var(--c-yellow);
  background: color-mix(in srgb, var(--c-yellow) 16%, var(--card));
}
.cutting-fact .cutting-sub { border-top: 0; padding-top: 8px; margin-top: 0; }
.cutting-fact p { margin: 0; font: 16.5px/1.5 var(--f-body); }
.cutting-how { margin-top: 14px; border-top: 1px solid var(--hair); }
.cutting-how > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0 4px; cursor: pointer;
  font: 700 12.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.cutting-how > summary::-webkit-details-marker { display: none; }
.cutting-how > summary .icon { width: 18px; height: 18px; transition: transform .15s; }
.cutting-how[open] > summary .icon { transform: rotate(180deg); }
.cutting-how .parse { padding-top: 6px; }
.cutting-source { margin: 14px 0 0; font: italic 14.5px/1.4 var(--f-body); color: var(--muted); }
.cutting-compact { padding: 18px 18px 14px; }
.cutting-compact .cutting-head { font-size: clamp(24px, 1.7vw, 30px); }
.cutting-compact .cutting-gloss { font-size: 17px; }

/* ======================================================== parse / tree */
.parse { font: 16.5px/1.5 var(--f-body); color: var(--ink); }
.parse p { margin: 0 0 8px; }
.parse-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px !important; }
.parse-kind-blurb { font: italic 15px/1.35 var(--f-body); color: var(--muted); }
.parse-clue { font: italic 19px/1.6 var(--f-body); padding: 8px 12px; background: var(--paper-2); border-left: 4px solid var(--accent); }
.parse-enum { font-style: normal; color: var(--muted); font-family: var(--f-grid); font-size: .82em; }
.parse-line { margin: 0 0 8px; }
.parse-note { font-style: italic; color: var(--muted); }
.parse-none { font-style: italic; color: var(--muted); }
.def {
  text-decoration-line: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-skip-ink: none;
}
.def-whole { text-decoration-style: dashed; }
.pt-yield {
  display: inline-block; padding: 1px 7px; margin-right: 2px;
  font: 700 13.5px/1.45 var(--f-grid); letter-spacing: .14em; font-style: normal; white-space: nowrap;
  background: var(--card); border: 1.5px solid var(--btn-rim); border-radius: 5px;
  box-shadow: 1.5px 1.5px 0 var(--btn-line), 1.5px 1.5px 0 1px var(--drop-rim);
}

/* The clue, word by word: each role has its own mark, used the same way in
   the clue line, the key under it and the rows below. Definition: the
   section's colour, underlined. Indicator: a dotted underline. Wordplay: a
   highlighter wash. Link: greyed. */
.cw-seg { border-radius: 3px; transition: box-shadow .12s, background-color .12s; }
.cw-ind {
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2.5px;
  text-decoration-color: var(--ink-2); text-underline-offset: 4px; text-decoration-skip-ink: none;
}
.cw-wp { background: color-mix(in srgb, var(--hl) 62%, transparent); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cw-link { color: var(--muted); }
.cw-seg.is-lit { box-shadow: 0 0 0 2px var(--accent); background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.cw-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -2px 0 12px !important; font: 600 11px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cw-key-item { display: inline-flex; align-items: center; gap: 6px; }
.cw-swatch { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.cw-swatch-def { border-bottom: 3px solid var(--accent); height: 8px; }
.cw-swatch-ind { border-bottom: 2.5px dotted var(--ink-2); height: 8px; }
.cw-swatch-piece { background: color-mix(in srgb, var(--hl) 62%, transparent); }
.cw-swatch-link { border-bottom: 1.5px solid var(--muted); height: 7px; width: 14px; opacity: .7; }
.cw-read { font: 17.5px/1.6 var(--f-body); margin: 0 0 6px !important; }
.cw-caps {
  font: 700 .86em/1 var(--f-grid); letter-spacing: .06em; padding: 1px 4px 0; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 18%, var(--card)); border-radius: 3px;
}
.cw-h { margin: 16px 0 6px; font: 700 11.5px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.cw-words { list-style: none; margin: 0; padding: 0; }
.cw-w { padding: 8px 0 8px 12px; border-left: 3px solid var(--hair); margin: 0 0 6px; outline: none; }
.cw-w:hover, .cw-w:focus-visible { border-left-color: var(--accent); }
.cw-w-def { border-left-color: color-mix(in srgb, var(--accent) 55%, var(--hair)); }
.cw-w p { margin: 0 !important; }
.cw-w-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: italic 18px/1.4 var(--f-body); }
.cw-w-text { padding-top: 1px; }
.cw-w-text.cw-wp { padding: 0 3px; }
.cw-arrow { font: 600 15px/1 var(--f-grid); color: var(--muted); font-style: normal; }
.cw-w-note { margin-top: 3px !important; font: 16px/1.5 var(--f-body); color: var(--ink-2); }
.cw-w-kind { font: 700 10.5px/1 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--accent), var(--tx-mix) var(--tx-amt)); margin-right: 2px; }
.cw-w-link .cw-w-top { color: var(--muted); }
.cw-steps { list-style: none; margin: 0; padding: 0; counter-reset: cw-step; }
.cw-step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; line-height: 1.5; }
.cw-steps .cw-step::before {
  counter-increment: cw-step; content: counter(cw-step);
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; flex: none;
  font: 700 11px/1 var(--f-grid); border: 1.5px solid var(--btn-rim); border-radius: 50%; color: var(--muted);
}
.cw-steps .cw-step:only-child::before { display: none; }
.cw-step.is-last .cw-arrow + .pt-yield { background: color-mix(in srgb, var(--accent) 22%, var(--card)); border-color: var(--btn-line); }
.cw-src { font: italic 17px/1.4 var(--f-body); }
.cw-pick { font: 700 .95em/1 var(--f-grid); font-style: normal; letter-spacing: .04em; color: var(--ink); background: color-mix(in srgb, var(--hl) 62%, transparent); padding: 0 1px; border-radius: 2px; }
.cw-split .cw-in { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.cw-surface { font: italic 16.5px/1.55 var(--f-body); color: var(--ink-2); }

/* ====================================================== grid thumbnail */
.gridthumb { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.gt-cell { fill: var(--gt-cell, var(--cell)); }
.gt-block { fill: var(--gt-block, var(--block)); }
.gt-line { fill: none; stroke: var(--gt-line, var(--hair)); stroke-width: .06; }
.gt-fill { opacity: .92; }
.gt-frame { fill: none; stroke: var(--cell-line); stroke-width: .16; }
.gridthumb-empty .gt-cell { fill: var(--paper-2); }

/* ====================================================== bars, stats, tables */
.bar {
  --bar: var(--accent); --pct: 0%;
  position: relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--bar-track); border: 1.5px solid var(--btn-rim);
}
.bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--bar); border-right: 1.5px solid var(--btn-line); transition: width .4s ease; }
.bar[aria-valuenow="0"] .bar-fill { border-right: 0; }
.bar-thin { height: 7px; border-width: 1px; }

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-k { font: 600 11.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat-v { font: 900 clamp(34px, 3vw, 58px)/1 var(--f-head); font-variant-numeric: lining-nums; }
.stat-sub { font: italic 15px/1.35 var(--f-body); color: var(--muted); }

.table { width: 100%; border-collapse: collapse; font: 16px/1.4 var(--f-body); }
.table th {
  text-align: left; padding: 8px 12px 8px 0; border-bottom: 2px solid var(--rule);
  font: 600 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.table .num { text-align: right; font-family: var(--f-grid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num { text-align: right; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.table-wrap { overflow-x: auto; }

/* =============================================== empty, loading, fail */
.empty {
  display: flex; align-items: center; gap: 18px; padding: 18px;
  border: 1.5px dashed var(--hair); background: color-mix(in srgb, var(--card) 70%, transparent);
}
.empty-art { width: 92px; flex: none; }
.empty-art img { display: block; width: 100%; height: auto; }
.empty-title { font: 800 21px/1.2 var(--f-head); margin: 0 0 4px; }
.empty-body { font: italic 17px/1.45 var(--f-body); color: var(--muted); margin: 0 0 12px; }
.empty-body:last-child { margin-bottom: 0; }

.loading {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14vh 0;
  font: 600 14px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.loading-mark {
  width: 26px; height: 26px; flex: none; border: 2px solid var(--btn-line);
  background: conic-gradient(var(--c-green) 0 25%, var(--c-blue) 0 50%, var(--c-orange) 0 75%, var(--c-red) 0);
  animation: cc-turn 1.4s steps(4, end) infinite;
}
@keyframes cc-turn { to { transform: rotate(360deg); } }

.fail-wrap { padding: 6vh 0 4vh; }
.fail {
  display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 62ch); gap: clamp(20px, 3vw, 48px);
  align-items: center; justify-content: center;
}
.fail-art { background: var(--plate-bg); border: 1px solid var(--rule); aspect-ratio: 3 / 2; overflow: hidden; }
.fail-auth .fail-art { aspect-ratio: 1; }
.fail-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fail-title { font: 900 clamp(34px, 4vw, 64px)/1 var(--f-head); margin: 0 0 12px; }
.fail-body { font: italic 19px/1.5 var(--f-body); color: var(--ink-2); margin: 0 0 20px; }
#app-view > .fail-wrap { overflow: auto; flex: 1; padding: 6vh var(--pad-x); }

/* Placeholder panel ("being set in type") used while a screen is being built. */
.typeset { flex: 1; display: grid; place-items: center; padding: 6vh var(--pad-x); }
.typeset-card {
  max-width: 720px; width: 100%; background: var(--card); border: 1px solid var(--rule);
  box-shadow: 5px 5px 0 var(--btn-line), 5px 5px 0 1px var(--drop-rim); padding: clamp(22px, 3vw, 40px); transform: rotate(-0.4deg);
}
.typeset-card h1 { font: 900 clamp(32px, 3.4vw, 54px)/1.02 var(--f-head); margin: 4px 0 12px; }
.typeset-card p:not(.kicker) { font: italic 19px/1.5 var(--f-body); color: var(--ink-2); }

/* ============================================================ animation */
@keyframes cc-stamp {
  0% { transform: scale(1.35) rotate(-7deg); opacity: 0; }
  55% { transform: scale(.93) rotate(1deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes cc-shake {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}
@keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cc-cutting-in { from { opacity: 0; transform: translateY(18px) rotate(-3deg); } to { opacity: 1; transform: rotate(-0.6deg); } }
.anim-stamp { animation: cc-stamp .5s cubic-bezier(.2,.9,.3,1.25) both; }
.anim-shake { animation: cc-shake .45s both; }
.anim-rise { animation: cc-rise .35s ease both; }
.cutting.anim-in { animation: cc-cutting-in .4s cubic-bezier(.2,.9,.3,1.1) both; }

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

/* ===================================================== labels on fills */
/* Where relative colours are supported (all current engines), a label on a
   coloured fill is computed from the fill itself — white or ink, whichever
   has the higher contrast — so any section, subject or puzzle colour a view
   sets gets a legible label with no per-colour table to keep in step. The
   declarations above are the fallback. */
@supports (color: color(from red srgb-linear r g b)) {
  .btn-red, .btn-blue, .btn-yellow, .btn-green, .btn-orange, .btn-purple, .btn-teal, .btn-pink, .btn-navy, .btn-accent {
    --on: color(from var(--tone) var(--on-of));
  }
  .chip[aria-pressed="true"], .chip.is-on, .chip[aria-selected="true"],
  .pill[aria-selected="true"], .pill.is-active, .pill[aria-current="page"],
  .seg > [aria-pressed="true"], .seg > [aria-checked="true"], .seg > .is-active,
  .tag, .toast-icon, .menu-item[class*="menu-tone-"] .menu-icon,
  .switch input:checked + .switch-ui::before {
    color: color(from var(--tone) var(--on-of));
  }
  .band, .band-on-light { color: color(from var(--band) var(--on-of)); }
  .ear-link:not(.ear-blank), .ear-link:not(.ear-blank):hover { color: color(from var(--ear) var(--on-of)); }
}

/* ========================================================== responsive */
@media (max-width: 1099px) {
  .mast-full .mast-row { grid-template-columns: 1fr; }
  .ear { display: none; }
  .mast-full .mast-title { font-size: clamp(38px, 8.4vw, 84px); }
}
@media (max-width: 699px) {
  body { font-size: 16.5px; }
  /* One line on a phone too, sized to the width (as for the old ~9.6em
     nameplate, so the type keeps its size). */
  .mast-full .mast-title { font-size: min(60px, calc((100vw - 2 * var(--pad-x)) / 9.8)); line-height: 1; }
  .dateline { justify-content: center; font-size: 11px; letter-spacing: .12em; padding: 6px 0; }
  .dl-who { display: none; }
  .mast-compact .mast-row { grid-template-columns: 1fr; padding-bottom: 8px; }
  .mast-compact .mast-side { display: none; }
  .mast-compact .mast-title { font-size: clamp(26px, 8vw, 36px); }
  .nav-item { height: 46px; font-size: 13px; letter-spacing: .1em; padding: 0 6px; }
  #nav { padding: 0 6px; }
  .nav-list > li:first-child { margin-left: 0; }
  .nav-list > li:last-child { margin-right: 0; }
  .logo-long { display: none; }
  .logo-short { display: inline; font-size: 28px; }
  .appbar { gap: 10px; }
  .appbar-title { font-size: 17px; }
  /* A phone band is as short as its words: the plate floats beside the
     headline instead of stacking a screenful of art above it. */
  .band { display: block; min-height: 0; }
  .band-art { display: block; float: right; padding: 0; margin: 16px 16px 10px 14px; }
  .band-plate { width: min(34vw, 170px); box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); }
  .band-art-many .band-plate { width: min(34vw, 170px); }
  .band-art-many .band-plate:nth-child(n+2) { display: none; }
  .band-text { display: block; padding: 16px 18px 20px; }
  .band-title { margin-top: 8px; font-size: clamp(34px, 10.5vw, 52px); }
  .band-extra { clear: both; }
  .fail { grid-template-columns: 1fr; }
  .fail-art { max-width: 240px; }
  .empty { flex-direction: column; align-items: flex-start; }
  .btn-lg { height: 50px; padding: 0 20px; font-size: 16px; }
  .dialog { width: calc(100vw - 20px); }
  .dialog-foot .btn { flex: 1; }
  .table { font-size: 15px; }
  .signin-owl { width: 72px; margin-left: 14px; }
  .signin-acts { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; }
  .signin-panel { grid-template-columns: minmax(0, 1fr); }
  .signin-panel-art { width: 104px; }
  .signin-row > .btn { flex: 1 1 auto; }
  .signin-chip .btn-label { display: none; }
  .signin-chip .signin-chip-short { display: inline; }
}

/* ================================================================ print */
@media print {
  #nav, #foot, #toasts, .menu, .skip-link, #capture, .btn, .cutting-x { display: none !important; }
  body { background: #fff; color: #000; }
  .cutting { transform: none; box-shadow: none; }
}