/* parrot.css: the Parrot design system (WP12).
   Brand kit: Parrot Teal #0C8272 (fills, bars, logo), Ink #040A06, Cream #F1ECE7, Coral #F67B62, Night #0A1120.
   Text teal is darker on Cream (#0A6F61) and lighter on Night (#2BA894) so links pass WCAG AA.
   Coral is the logo's tongue only: the sticky header shows it on every page, so no rule here paints Coral
   (kit: at most one small spot per view). The live marker is teal.
   No inline styles anywhere (CSP style-src 'self'): widths come from SVG attributes, colours from classes.
   Themes: tokens on [data-theme] (any element, so panels can nest) + prefers-color-scheme for the page root.
   tests/test_wp12_design.py parses the three token blocks below and checks every text pair for AA. */

/* @tokens light */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #F1ECE7;
  --surface: #FBF8F5;
  --surface-2: #F6F2EE;
  --surface-3: #EAE3DC;
  --line: #E0D7CE;
  --line-2: #CBBFB3;
  --control-line: #877D71;
  --ink: #040A06;
  --ink-2: #2B332E;
  --muted: #585F5A;
  --link: #0A6F61;
  --teal: #0C8272;
  --bar: #0C8272;
  --track: #E0D7CE;
  --ring: #040A06;
  --focus: #0A6F61;
  --coral: #F67B62;
  --pos: #0A6F61;
  --neg: #B23A3A;
  --mkt: #8A5A00;
  --chip-bg: #FFFFFF;
  --mark-bg: #CDEBE3;
  --b-teal-bg: #D9EEE8; --b-teal-fg: #0A5F55;
  --b-warn-bg: #F5E6C8; --b-warn-fg: #6B4700;
  --b-neg-bg: #F6DFDC;  --b-neg-fg: #962E2E;
  --b-vio-bg: #E7E3F6;  --b-vio-fg: #4B3BA8;
  --c0: #E6DED5; --c1: #D2E9E2; --c2: #A6D6C9; --c3: #72BCAD; --c4: #3E9C8C; --c5: #0B7869; --c6: #0A5F55; --c7: #073E37;
  --t0: #585F5A; --t1: #040A06; --t2: #040A06; --t3: #040A06; --t4: #040A06; --t5: #FFFFFF; --t6: #FFFFFF; --t7: #FFFFFF;
  --hatch: rgba(88, 95, 90, .16);
  --shadow: 0 1px 2px rgba(40, 30, 20, .05), 0 8px 22px -18px rgba(40, 30, 20, .28);
  --shadow-lg: 0 28px 70px -30px rgba(40, 30, 20, .45);
  --backdrop: rgba(20, 16, 12, .42);
  --logo-light: inline-block; --logo-dark: none;
  --i-sun: none; --i-moon: inline;
}

/* @tokens dark */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1120;
  --surface: #101A2C;
  --surface-2: #142036;
  --surface-3: #1B2942;
  --line: #1F2B44;
  --line-2: #2F3E5C;
  --control-line: #64759A;
  --ink: #F1ECE7;
  --ink-2: #CDD3DC;
  --muted: #9AA5B6;
  --link: #2BA894;
  --teal: #0C8272;
  --bar: #2BA894;
  --track: #24324D;
  --ring: #F1ECE7;
  --focus: #2BA894;
  --coral: #F67B62;
  --pos: #2BA894;
  --neg: #F08A8A;
  --mkt: #E3B15A;
  --chip-bg: #F1ECE7;
  --mark-bg: #1D5249;
  --b-teal-bg: #133A35; --b-teal-fg: #6FD6C0;
  --b-warn-bg: #3A2D10; --b-warn-fg: #EDC676;
  --b-neg-bg: #3D1C24;  --b-neg-fg: #F5A3AB;
  --b-vio-bg: #262150;  --b-vio-fg: #BDB3FF;
  --c0: #16213A; --c1: #173A4C; --c2: #145247; --c3: #0F6457; --c4: #0B7365; --c5: #2BA894; --c6: #7FD0BC; --c7: #D3F1E6;
  --t0: #9AA5B6; --t1: #F1ECE7; --t2: #F1ECE7; --t3: #F1ECE7; --t4: #F1ECE7; --t5: #04140F; --t6: #04140F; --t7: #04140F;
  --hatch: rgba(154, 165, 182, .14);
  --shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px -18px rgba(0, 0, 0, .9);
  --shadow-lg: 0 28px 70px -28px rgba(0, 0, 0, .85);
  --backdrop: rgba(3, 6, 14, .66);
  --logo-light: none; --logo-dark: inline-block;
  --i-sun: inline; --i-moon: none;
}

/* @tokens dark-media (must equal the dark block; the test checks) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A1120;
    --surface: #101A2C;
    --surface-2: #142036;
    --surface-3: #1B2942;
    --line: #1F2B44;
    --line-2: #2F3E5C;
  --control-line: #64759A;
    --ink: #F1ECE7;
    --ink-2: #CDD3DC;
    --muted: #9AA5B6;
    --link: #2BA894;
    --teal: #0C8272;
    --bar: #2BA894;
    --track: #24324D;
    --ring: #F1ECE7;
    --focus: #2BA894;
    --coral: #F67B62;
    --pos: #2BA894;
    --neg: #F08A8A;
    --mkt: #E3B15A;
    --chip-bg: #F1ECE7;
    --mark-bg: #1D5249;
    --b-teal-bg: #133A35; --b-teal-fg: #6FD6C0;
    --b-warn-bg: #3A2D10; --b-warn-fg: #EDC676;
    --b-neg-bg: #3D1C24;  --b-neg-fg: #F5A3AB;
    --b-vio-bg: #262150;  --b-vio-fg: #BDB3FF;
    --c0: #16213A; --c1: #173A4C; --c2: #145247; --c3: #0F6457; --c4: #0B7365; --c5: #2BA894; --c6: #7FD0BC; --c7: #D3F1E6;
    --t0: #9AA5B6; --t1: #F1ECE7; --t2: #F1ECE7; --t3: #F1ECE7; --t4: #F1ECE7; --t5: #04140F; --t6: #04140F; --t7: #04140F;
    --hatch: rgba(154, 165, 182, .14);
    --shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px -18px rgba(0, 0, 0, .9);
    --shadow-lg: 0 28px 70px -28px rgba(0, 0, 0, .85);
    --backdrop: rgba(3, 6, 14, .66);
    --logo-light: none; --logo-dark: inline-block;
    --i-sun: inline; --i-moon: none;
  }
}

/* ---------- type ---------- */
:root {
  --font-head: Poppins, "Avenir Next", Avenir, Montserrat, "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --wrap: 1280px;
  --head-h: 65px;                                                /* sticky site header: 64 px + its border */
  --gutter: 24px;
}
/* Poppins only if the visitor has it installed: no font download, no third-party request. */
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: local("Poppins SemiBold"), local("Poppins-SemiBold"); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: local("Poppins Bold"), local("Poppins-Bold"); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }   /* clear the sticky header */
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
[data-theme] { background: var(--bg); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p { margin: 0 0 .75em; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { vertical-align: middle; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: var(--r);
  background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
main { display: block; padding-bottom: 64px; }
.stack > * + * { margin-top: 16px; }
.section { margin-top: 32px; }
.section-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.section-h .sub { font-size: 13px; color: var(--muted); }

/* ---------- header ---------- */
.site-h {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-h .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { flex: none; display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-sm); }
.brand img { height: 40px; width: auto; }
.logo-light { display: var(--logo-light); }
.logo-dark { display: var(--logo-dark); }
.hub-nav { display: flex; align-items: center; gap: 2px; }
.hubs { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hubs a, .nav-more > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 550; white-space: nowrap; cursor: pointer;
}
.hubs a:hover, .nav-more > summary:hover { color: var(--ink); background: var(--surface-3); }
.hubs a[aria-current="page"] { color: var(--ink); background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--bar); }
.nav-more, .browse { position: relative; }
.nav-more > summary, .browse > summary { list-style: none; }
.nav-more > summary::-webkit-details-marker, .browse > summary::-webkit-details-marker, .menu > summary::-webkit-details-marker { display: none; }
.pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: 6px; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.pop a { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.pop a:hover, .pop a:focus-visible { background: var(--surface-3); color: var(--ink); }
.pop a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.site-h .search { flex: 1; max-width: 460px; margin-left: auto; }
.site-h .hub-nav + .h-tools { margin-left: auto; }        /* pages whose body has the one search box (home, search) */
.h-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.h-note { font-size: 13px; color: var(--muted); white-space: nowrap; margin-right: 4px; }   /* the home's 'Updated …' */
@media (max-width: 600px) { .h-note { display: none; } }
.browse { display: none; }
.browse > summary { display: inline-flex; align-items: center; gap: 6px; }
.browse .pop { width: 340px; }
.browse .pop ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* ---------- search (one box) ---------- */
.search {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 12px; margin: 0;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--control-line); color: var(--muted);
}
.search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--b-teal-bg); }
.search input {
  flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: none; color: var(--ink); font-size: 15px;
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search.big { min-height: 56px; padding: 0 8px 0 18px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.search.big input { height: 54px; font-size: 18px; }
.search .go { flex: none; }
.search-help { margin-top: 8px; font-size: 13px; color: var(--muted); }
.search-help > summary { display: inline-flex; align-items: center; min-height: 28px; cursor: pointer; color: var(--link); }
.search-help .help-in { margin-top: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.search-help code { padding: 1px 5px; border-radius: 5px; background: var(--surface-3); color: var(--ink); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
/* typeahead (hydrate.js builds it: role=listbox under the box) */
.ta {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 6px; list-style: none;
  max-height: min(60vh, 420px); overflow: auto; text-align: left;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.ta li { display: flex; align-items: baseline; gap: 8px; min-height: 36px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 14px; }
.ta li:hover, .ta li[aria-selected="true"] { background: var(--surface-3); }
.ta li[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--focus); }
.ta .ta-l { font-weight: 600; }
.ta .ta-s { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- breadcrumbs, page head ---------- */
.crumbs { margin: 18px 0 14px; font-size: 13px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.ent-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.ent-head .t { flex: 1; min-width: 0; }
.ent-head .t h1, .ent-head .t h2, .ent-head .t h3, .ent-head .t h4 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ent-head .tick { font: 700 1em/1.1 var(--font-mono); letter-spacing: .01em; }
.ent-head .full { font-family: var(--font-body); font-size: 17px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.ent-head .meta { margin-top: 6px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ent-head .meta b { color: var(--ink-2); font-weight: 600; }
.ent-head .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 550; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { color: var(--ink); border-color: var(--focus); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.btn.primary:hover { background: #0A6F61; border-color: #0A6F61; color: #FFFFFF; }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--focus); }
.i-sun { display: var(--i-sun); }
.i-moon { display: var(--i-moon); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: 99px;
  border: 1px solid var(--line-2); background: none; color: var(--ink-2); font-size: 13px; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pill:hover { color: var(--ink); border-color: var(--focus); }
.pill[aria-pressed="true"], .pill[aria-current="page"] { color: var(--ink); background: var(--b-teal-bg); border-color: var(--focus); }
.pill .n { color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.seg a { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: 7px; color: var(--ink-2); text-decoration: none; font-size: 13px; white-space: nowrap; }
.seg a:hover { color: var(--ink); background: var(--surface-3); }
.seg a[aria-current] { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; }
.seg .n { color: var(--muted); font-size: 12px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; user-select: none; font-size: 14px; color: var(--ink-2); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .track { position: relative; width: 32px; height: 20px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--control-line); transition: background .15s; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.toggle input:checked + .track { background: var(--b-teal-bg); border-color: var(--focus); }
.toggle input:checked + .track .knob { transform: translateX(12px); background: var(--bar); }
.toggle input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* menus (export): <details> disclosure, works without JS */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu .pop { min-width: 260px; }
.menu-h { margin: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.menu .pop a, .menu .pop button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px;
  border: 0; background: none; padding: 0 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink-2); text-align: left; text-decoration: none;
}
.menu .pop a:hover, .menu .pop button:hover, .menu .pop button:focus-visible { background: var(--surface-3); color: var(--ink); }
.menu .pop small { color: var(--muted); font-size: 12px; }
.menu .pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu .api { margin: 2px 10px 6px; font: 12px/1.45 var(--font-mono); color: var(--muted); word-break: break-all; }

/* ---------- badges, chips, pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; line-height: 1.6;
  background: var(--surface-3); color: var(--ink-2);
}
.badge.teal { background: var(--b-teal-bg); color: var(--b-teal-fg); }
.badge.warn { background: var(--b-warn-bg); color: var(--b-warn-fg); }
.badge.neg { background: var(--b-neg-bg); color: var(--b-neg-fg); }
.badge.vio { background: var(--b-vio-bg); color: var(--b-vio-fg); }
.badge.plain { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; }
.badge.outline { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 2px 10px 2px 3px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 550; text-decoration: none; white-space: nowrap;
}
a.chip:hover { border-color: var(--focus); }
.chip .sub { color: var(--muted); font-weight: 400; }
.chip.noicon { padding-left: 10px; }
.venue {
  display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px 0 6px; border-radius: 99px;
  border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; text-decoration: none;
}
.venue .v-ic { display: block; flex: none; width: 14px; height: 14px; border-radius: 4px; }   /* the venue's favicon */
.venue i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; font: 700 9px/1 var(--font-mono); font-style: normal; background: var(--surface-3); color: var(--ink); }
a.venue:hover { border-color: var(--focus); color: var(--ink); }
.state { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.state.pending { background: var(--b-warn-bg); color: var(--b-warn-fg); }
.state.by { background: var(--surface-3); color: var(--ink-2); }
.state.hist { background: var(--surface-3); color: var(--ink-2); }
.state svg { flex: none; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bar); box-shadow: 0 0 0 3px rgba(43, 168, 148, .28); }
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: pulse 2s ease-in-out infinite; }
}
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(43, 168, 148, 0); } }
.fresh { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--muted); }
.fresh a { color: var(--muted); }
.fresh a:hover { color: var(--ink); }
.fresh.stale { color: var(--b-warn-fg); }
.fresh .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bar); }
.fresh.stale .dot { background: var(--mkt); }
.notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r);
  font-size: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.notice svg { flex: none; margin-top: 2px; }
.notice.warn { background: var(--b-warn-bg); border-color: transparent; color: var(--b-warn-fg); }
.notice.teal { background: var(--b-teal-bg); border-color: transparent; color: var(--b-teal-fg); }
.notice b { color: inherit; }
.notice a { color: inherit; }

/* ---------- entity icon ---------- */
.ei { flex: none; display: inline-block; width: 24px; height: 24px; object-fit: contain; border-radius: 22%; }
.ei.circle { border-radius: 50%; object-fit: cover; }
.ei.chipped { background: var(--chip-bg); box-shadow: 0 0 0 1px var(--line); }
.ei.chipped.s20, .ei.chipped.s24 { padding: 3px; } .ei.chipped.s32 { padding: 4px; } .ei.chipped.s40 { padding: 5px; } .ei.chipped.s64 { padding: 8px; }
.ei.s20 { width: 20px; height: 20px; } .ei.s24 { width: 24px; height: 24px; }
.ei.s32 { width: 32px; height: 32px; } .ei.s40 { width: 40px; height: 40px; } .ei.s64 { width: 64px; height: 64px; }
.ei.init { display: inline-grid; place-items: center; color: #040A06; font: 700 11px/1 var(--font-head); letter-spacing: .02em; }
.ei.init.s32 { font-size: 13px; } .ei.init.s40 { font-size: 15px; } .ei.init.s64 { font-size: 22px; }
.tint-0 { background: #D3E6E2; } .tint-1 { background: #E3DDD5; } .tint-2 { background: #F6D9CF; }
.tint-3 { background: #D9E0E6; } .tint-4 { background: #E6E1D3; } .tint-5 { background: #DCE3DA; }

/* ---------- cards, stat tiles ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card.pad { padding: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0; }
.stat { padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.stat dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.stat dd { margin: 4px 0 0; }
.stat .v { display: block; font: 600 24px/1.15 var(--font-head); color: var(--ink); }
.stat .s { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.stat.lead { border-color: var(--focus); }

/* ---------- probability, rates, last-10 ---------- */
.prob { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.prob .pv { font: 700 15px/1 var(--font-body); min-width: 40px; text-align: right; color: var(--ink); }
.prob .pn { font-size: 12px; color: var(--muted); }
.prob.sm .pv { font-size: 12.5px; min-width: 32px; font-family: var(--font-mono); font-weight: 650; }
.pb { flex: none; display: block; overflow: visible; }
.pb .tr { fill: var(--track); }
.pb .fi { fill: var(--bar); }
.pb .mk { fill: var(--mkt); }
.pv.na { color: var(--muted); font-weight: 400; }
.rate { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.rate .v1 { font-size: 14px; font-weight: 600; color: var(--ink); }
.rate .v2 { font-size: 12px; color: var(--muted); }
.l10 { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.l10 i { display: block; width: 8px; height: 8px; border-radius: 50%; }
.l10 .y { background: var(--bar); }
.l10 .n { box-shadow: inset 0 0 0 1.5px var(--muted); }
.l10 .u { background: var(--hatch); }
.l10-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.spark { display: block; overflow: visible; }
.spark .up { stroke: var(--pos); fill: none; } .spark .dn { stroke: var(--neg); fill: none; } .spark .flat { stroke: var(--muted); fill: none; }
.spark circle.up { fill: var(--pos); stroke: none; } .spark circle.dn { fill: var(--neg); stroke: none; } .spark circle.flat { fill: var(--muted); stroke: none; }
.trend { display: inline-flex; align-items: center; gap: 6px; }
.ar.up { color: var(--pos); } .ar.dn { color: var(--neg); } .ar.flat { color: var(--muted); }

/* ---------- heat cells (History Wall) ---------- */
.b0 { background: var(--c0); color: var(--t0); } .b1 { background: var(--c1); color: var(--t1); }
.b2 { background: var(--c2); color: var(--t2); } .b3 { background: var(--c3); color: var(--t3); }
.b4 { background: var(--c4); color: var(--t4); } .b5 { background: var(--c5); color: var(--t5); }
.b6 { background: var(--c6); color: var(--t6); } .b7 { background: var(--c7); color: var(--t7); }
.nx { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 5px); color: var(--muted); }
.hit { box-shadow: inset 0 0 0 2px currentColor; }
/* 'not said on that settled listing' (settlement-only history): a ring in --muted (>= 4.5:1 on the card in both
   themes), not the near-invisible b0 fill, so 3 of 8 never reads as 3 cells */
.b0.ns { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--muted); }
[data-roving] [data-c] { cursor: pointer; }
[data-roving] [data-c].nx { cursor: default; }
[data-roving] [data-c]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; position: relative; z-index: 1; }

/* event tile: the home wall card (appearance + top words as mini heat rows) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.tile { position: relative; min-width: 0; padding: 14px 14px 12px; }
.tile-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tile-h .nm { min-width: 0; flex: 1; }
.tile-h .ttl { display: block; font: 600 15px/1.2 var(--font-head); color: var(--ink); text-decoration: none; }
.tile-h .ttl.tick { font-family: var(--font-mono); font-weight: 700; }
.tile-h a.ttl:hover { text-decoration: underline; }
.tile-h .sub { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-h .when { text-align: right; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.tile-h .when span { display: block; font-size: 12px; color: var(--muted); }
.tile-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 10px; }
.mini { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.mini th, .mini td { padding: 0; }
.mini thead th { position: relative; height: 16px; font: 11px/1 var(--font-mono); font-weight: 400; color: var(--muted); white-space: nowrap; }
.mini .ax { position: absolute; bottom: 4px; white-space: nowrap; }
.mini .ax.l { left: 0; }
.mini .ax.r { right: 0; }
.mini thead .ax-p { text-align: right; vertical-align: bottom; padding-bottom: 4px; white-space: normal; line-height: 1.15; }
.mini th[scope="row"] { text-align: left; font-size: 13px; font-weight: 400; color: var(--ink-2); padding-right: 6px; }
.mini .wl {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
  min-height: 24px; padding: 3px 0; line-height: 18px; color: var(--ink-2); text-decoration: none;
}
.mini a.wl:hover { color: var(--ink); text-decoration: underline; }
.mini .wl .th { margin-left: 3px; font: 11px var(--font-mono); color: var(--muted); }
.mini thead .ax-p .pn { font: 10.5px/1 var(--font-mono); color: var(--muted); }
.mini col.w { width: auto; }
.mini col.c { width: 18px; }
.mini col.p { width: 78px; }
.mini.wide-p col.p { width: 104px; }
.mini td.hc { position: relative; height: 24px; vertical-align: middle; font-size: 0; border-radius: 3px; }
.mini .hb { display: block; height: 17px; border-radius: 3px; }
.mini td.hc.nx { background: none; }                       /* the hatch is on the block */
.mini .hb.hit { box-shadow: inset 0 0 0 1.5px currentColor; }
.mini .mk-t { font: 11px/1.3 var(--font-mono); color: var(--muted); }
.show-mkt .mini .mk-t { display: block; }
.mini td.pc { text-align: right; padding-left: 4px; }
.prob.sm { gap: 5px; }
.prob.sm .pn { font: 10.5px/1 var(--font-mono); }

/* word table: the call / entity view (v4) */
/* Tables never scroll inside a box (Bernard 10/20): every row at full height, the page scrolls and the column heads
   stick under the site header. Sideways scrolling only where the table is wider than a narrow viewport. */
.tbl-wrap { position: relative; border-radius: var(--r-lg); }   /* positioned: sr-only text inside stays clipped */
table.wt { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 860px; font-size: 14px; }
.wt caption { text-align: left; padding: 12px 16px 0; font-size: 13px; color: var(--muted); caption-side: top; }
.wt th, .wt td { padding: 0 8px; text-align: left; vertical-align: middle; white-space: nowrap; }
.wt thead th { position: sticky; top: var(--head-h); }        /* .tall (older callers) no longer caps the height */
/* --head-h is the sticky site header's height per breakpoint (below): 65 px wide, ~111 px where it wraps to two
   rows (<= 720 px), 0 where it does not stick (landscape phones). */
.wt thead th {
  z-index: 3; background: var(--surface); height: 52px;
  border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.wt thead th.q { text-transform: none; letter-spacing: 0; text-align: center; padding: 0 2px; }
.wt thead th.q span { display: block; font: 650 12px/1.2 var(--font-mono); color: var(--ink-2); }
.wt thead th.q small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.wt thead th.q.latest span { color: var(--link); }
.wt thead th.q .qb { font-weight: 700; color: var(--ink-2); }
.wt thead th.q.latest .qb { color: var(--link); }
.wt thead th.q.yoy { background: var(--surface-2); }
.wt .ra { text-align: right; }
.wt tbody td, .wt tbody th { height: 50px; border-bottom: 1px solid var(--line); }
.wt tbody tr:last-child td, .wt tbody tr:last-child th { border-bottom: 0; }
.wt tbody tr:hover > * { background: var(--surface-2); }
.wt .wcol { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 210px; max-width: 280px; padding-left: 16px; box-shadow: 1px 0 0 var(--line); white-space: normal; font-weight: 400; }
.wt thead th.wcol { z-index: 4; }
.wname { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.25; }
a.wname:hover { color: var(--link); text-decoration: underline; }
.wsub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.wsub .badge { margin-right: 4px; }
.wt td.hc { position: relative; padding: 0 2px; text-align: center; }
.fc { display: grid; place-items: center; width: 42px; height: 32px; margin: 0 auto; border-radius: 7px; font: 650 13px/1 var(--font-mono); }
.fc.nx { font-weight: 400; }
.wt td.yoy { background: var(--surface-2); }
.mkt-only { display: none; }
.show-mkt .mkt-only { display: revert; }
th.mkt-only, td.mkt-only { color: var(--ink-2); }
.wt .mkt-c { font-size: 13px; color: var(--ink-2); }
.key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 2px 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.key li { display: inline-flex; align-items: center; gap: 6px; }
.key .k-cell { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.key .k-cell.hit { box-shadow: inset 0 0 0 1.5px currentColor; }
.key .k-cell.ns { box-shadow: inset 0 0 0 1.5px var(--muted); }
.key .k-bar rect { fill: var(--bar); }
.key .k-mkt { display: inline-block; width: 2px; height: 12px; background: var(--mkt); }

/* ---------- evidence (modal + inline panel) ---------- */
dialog.dlg {
  width: min(880px, calc(100vw - 32px)); max-height: min(88vh, 940px); padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
dialog.dlg[open] { display: flex; flex-direction: column; }
dialog.dlg::backdrop { background: var(--backdrop); }
.dlg .dlg-x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.dlg .dlg-body { overflow: auto; flex: 1; }
body.dlg-open { overflow: hidden; }
.ev { display: flex; flex-direction: column; min-height: 0; }
.ev-head { display: flex; gap: 14px; align-items: flex-start; padding: 20px 64px 12px 20px; }
.ev-head .t { flex: 1; min-width: 0; }
.ev-eyebrow { font-size: 13px; color: var(--muted); }
.ev-head h2, .ev-head h3, .ev-head h4 { margin: 2px 0 6px; font-size: 24px; }
.ev-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 14px; color: var(--muted); }
.ev-stats div { display: flex; gap: 6px; }
.ev-stats dt { font-weight: 400; }
.ev-stats dd { margin: 0; color: var(--ink); font-weight: 650; }
.ev-rule { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.ev-all { margin: 8px 0 0; font-size: 14px; }
.ev-all a { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-weight: 600; }
.strip { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
.strip.n4 { --n: 4; } .strip.n5 { --n: 5; } .strip.n6 { --n: 6; } .strip.n7 { --n: 7; } .strip.n8 { --n: 8; }
.strip.n9 { --n: 9; } .strip.n10 { --n: 10; } .strip.n11 { --n: 11; } .strip.n12 { --n: 12; }
.strip .sc { min-height: 44px; border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 3px; padding: 4px 0; text-decoration: none; }
.strip .sc span { font: 700 14px/1 var(--font-mono); }
.strip .sc small { font: 11px/1 var(--font-mono); }
.strip .sc[aria-pressed="true"], .strip .sc[aria-current="true"] { outline: 2px solid var(--focus); outline-offset: 2px; }
.strip .sc.nx { cursor: default; }
.ev-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ev-bar .sum { margin-right: auto; font-size: 14px; color: var(--ink-2); }
.ev-bar .sum b { color: var(--ink); }
.ev-panels { padding: 16px 20px 22px; }
.ev-panel + .ev-panel { margin-top: 18px; }
.ev-panel > h3, .ev-panel > h4, .ev-panel > h5 { font-size: 14px; margin-bottom: 8px; }
.quote {
  margin: 0 0 10px; padding: 12px 14px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
}
.quote.nc { border-style: dashed; }
.quote-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.quote-h .who { font-weight: 650; color: var(--ink); }
.quote-h .meta { font-size: 12px; color: var(--muted); }
.quote-h .go { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.quote blockquote { margin: 6px 0 0; font-size: 15px; line-height: 1.62; color: var(--ink-2); }
.quote blockquote p { margin: 0; }
mark { border-radius: 3px; padding: 0 2px; background: var(--mark-bg); color: var(--ink); }
mark.nc { background: none; color: inherit; box-shadow: inset 0 -2px 0 var(--b-vio-fg); }
.quote-f { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- clips (click-to-load facade; nothing third-party loads before a click) ---------- */
.clip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 8px; border-radius: 99px;
  background: var(--b-teal-bg); color: var(--b-teal-fg); border: 1px solid transparent;
  font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.clip:hover { border-color: var(--focus); }
.clip .t { font-family: var(--font-mono); font-weight: 600; }
.clip[aria-pressed="true"] { border-color: var(--focus); }
.clip-card { overflow: hidden; }
.clip-poster {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; width: 100%; aspect-ratio: 16 / 9;
  padding: 16px; border: 0; border-radius: 0; cursor: pointer; text-align: left; text-decoration: none;
  background: linear-gradient(160deg, #0F2A33 0%, #0A1120 70%); color: #F1ECE7;
}
.clip-poster .play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%; background: #0C8272; color: #FFFFFF; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
}
.clip-poster:hover .play, .clip-poster:focus-visible .play { background: #0A6F61; }
.clip-poster .cq { font-size: 15px; line-height: 1.45; color: #F1ECE7; }
.clip-poster .cm { font-size: 13px; color: #C9D2DD; }
.clip-card .clip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.clip-card .clip-meta b { color: var(--ink); }
.clip-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000000; }
.clip-dock {
  position: fixed; right: 16px; bottom: 16px; z-index: 85; width: min(400px, calc(100vw - 32px));
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); overflow: hidden;
}
.clip-dock .dock-h { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; font-size: 13px; color: var(--ink-2); }
.clip-dock .dock-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.clip-dock audio { display: block; width: calc(100% - 20px); margin: 0 10px 12px; }
.clip-note { font-size: 12px; color: var(--muted); }

.quote .clip-inline { margin-top: 10px; }
.quote .clip-inline iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); background: #000000; }
.quote .clip-inline audio { display: block; width: 100%; }

/* ---------- states ---------- */
.empty, .err { text-align: center; padding: 56px 16px; color: var(--muted); }
.empty svg, .err svg { color: var(--muted); }
.empty h2, .empty h3, .err h1, .err h2, .err h3 { margin: 12px 0 6px; color: var(--ink); font-size: 18px; }
.empty p, .err p { max-width: 520px; margin: 0 auto 14px; }
.err .code { font: 700 13px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.loading { padding: 8px 0; }
.sk { height: 18px; margin: 10px 0; border-radius: 8px; background: var(--surface-3); }
.sk.w80 { width: 80%; } .sk.w60 { width: 60%; } .sk.w40 { width: 40%; } .sk.tall { height: 72px; }
@media (prefers-reduced-motion: no-preference) {
  .sk { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
}
@keyframes sk { to { background-position: -200% 0; } }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; padding: 10px 16px; border-radius: var(--r);
  background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
}

/* ---------- day header, hub chips ---------- */
.day-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 28px 2px 12px; }
.day-h .rel { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--link); }
.day-h .sub { font-size: 13px; color: var(--muted); }
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* ---------- page-type primitives: week strip, role timeline, entity / game cards, live strip, results ---------- */
/* every sideways scroller is positioned, so sr-only text inside it stays clipped instead of widening the page */
.week ol { position: relative; display: flex; gap: 6px; margin: 0; padding: 2px 2px 6px; list-style: none; overflow-x: auto; }
.week a {
  display: grid; justify-items: center; gap: 1px; min-width: 64px; min-height: 44px; padding: 6px 10px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 12px;
}
.week a b { font: 600 13px/1.2 var(--font-head); color: var(--ink); }
.week a .n { font: 600 11px/1.2 var(--font-mono); color: var(--muted); }
.week a:hover { border-color: var(--focus); }
.week a[aria-current] { border-color: var(--focus); background: var(--b-teal-bg); box-shadow: inset 0 -2px 0 var(--bar); }
.role-tl { position: relative; margin: 0; padding: 0; list-style: none; }
.role-tl li { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 22px; }
.role-tl li::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.role-tl li:first-child::before { top: 50%; }
.role-tl li:last-child::before { bottom: 50%; }
.role-tl .rt-dot { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--muted); }
.role-tl li.cur .rt-dot { background: var(--bar); box-shadow: 0 0 0 3px var(--b-teal-bg); }
.role-tl .rt-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; color: var(--ink); }
.role-tl .rt-n a { color: var(--ink); text-decoration: none; }
.role-tl .rt-n a:hover { text-decoration: underline; }
.role-tl .rt-w { margin: 0; font-size: 13px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; margin: 0; padding: 0; list-style: none; }
.ent-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; min-width: 0; }
.ent-card .ec-t { min-width: 0; flex: 1; }
.ent-card .ec-n { font-size: 15px; }
.ent-card .ec-n a { color: var(--ink); text-decoration: none; }
.ent-card .ec-n a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }   /* whole card is the target */
.ent-card { position: relative; }
.ent-card .ec-n a:hover { text-decoration: underline; }
.ent-card .ec-s { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.ent-card .badges { margin: 6px 0 0; }
.ent-card .ec-st { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ent-card .ec-st div { display: flex; gap: 5px; }
.ent-card .ec-st dd { margin: 0; color: var(--ink); font-weight: 650; }
.wlist { margin: 8px 0 0; padding: 0; list-style: none; }
.wlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; border-top: 1px solid var(--line); font-size: 13px; }
.wlist li:first-child { border-top: 0; }
.wlist .wl-w { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.wlist .wl-w a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-2); text-decoration: none; }
.wlist .wl-w a:hover { color: var(--ink); text-decoration: underline; }
.game { padding: 14px; min-width: 0; }
.game .gm-m { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.gm-teams { margin: 0; padding: 0; list-style: none; }
.gm-teams li { display: flex; align-items: center; gap: 10px; min-height: 32px; font: 600 15px/1.2 var(--font-head); color: var(--ink); }
.gm-teams .gt-n a { color: var(--ink); text-decoration: none; }
.gm-teams .gt-n a:hover { text-decoration: underline; }
.gm-teams .gt-a { margin-left: auto; font: 650 12px var(--font-mono); color: var(--muted); }
.ls-row { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 12px; margin: 0; padding: 2px 2px 10px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.ls-c { padding: 12px 14px; min-width: 0; scroll-snap-align: start; }
.ls-c .ls-h { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--ink); }
.ls-c .ls-t a { color: var(--ink); text-decoration: none; }
.ls-c .ls-t a:hover { text-decoration: underline; }
.ls-c .ls-w { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.ls-c .venue { margin-top: 8px; }
.results { margin: 0; padding: 0; list-style: none; }
.results .rs { display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.results .rs-t { min-width: 0; flex: 1; }
.results .rs-n { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 15px/1.3 var(--font-body); }
.results .rs-n a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink); text-decoration: none; }
.results .rs-n a:hover { text-decoration: underline; }
.results .rs-m { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.results .rs-q { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ---------- footer ---------- */
.site-f { margin-top: 48px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 14px; color: var(--muted); }
.site-f .wrap { padding-top: 32px; padding-bottom: 32px; }
.f-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 24px; }
.f-grid h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; font-family: var(--font-body); }
.f-grid ul { list-style: none; margin: 0; padding: 0; }
.f-stack > nav + nav { margin-top: 20px; }                  /* 'Sister sites' under Agents */
.f-grid li a { display: inline-flex; align-items: center; min-height: 28px; color: var(--muted); text-decoration: none; }
.f-grid li a:hover { color: var(--ink); text-decoration: underline; }
.f-brand img { height: 36px; width: auto; }
.f-brand p { margin-top: 10px; max-width: 280px; }
.f-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.f-legal p { margin: 0 0 6px; }
.f-legal a { color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .site-h .hub-nav { display: none; }
  .browse { display: block; position: static; }            /* the sheet anchors to the sticky header */
  .browse .pop { left: auto; right: var(--gutter); top: 56px; width: min(340px, calc(100% - 2 * var(--gutter))); }
  .f-grid { grid-template-columns: 1fr 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  /* wider than the viewport: sideways scroll only. That makes the wrapper the heads' sticky container, so an offset
     of --head-h would push them down over the first rows: here they stay at the top of the table (top: 0) and
     scroll with the page (a scroll container that never scrolls vertically cannot stick under the nav). */
  .tbl-wrap { overflow-x: auto; }
  .tbl-wrap .wt thead th { top: 0; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  h1 { font-size: 24px; }
  .site-h .wrap { flex-wrap: wrap; gap: 8px 10px; min-height: 0; padding-top: 8px; padding-bottom: 10px; }
  .brand img { height: 36px; }
  .h-tools { margin-left: auto; }
  html { scroll-padding-top: 124px; }                     /* the header wraps to two rows here */
  :root { --head-h: 111px; }                              /* ...so sticky heads sit below both rows */
  .site-h .search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .ent-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .ent-head .meta, .ent-head .acts { grid-column: 1 / -1; }
  .ent-head .full { font-size: 15px; }
  .ent-head .ei.s64 { width: 48px; height: 48px; font-size: 18px; }
  table.wt { min-width: 640px; }
  .wt .wcol { min-width: 140px; max-width: 160px; padding-left: 12px; }
  .fc { width: 34px; height: 28px; font-size: 12px; border-radius: 6px; }
  .wt tbody td, .wt tbody th { height: auto; padding-top: 8px; padding-bottom: 8px; }
  dialog.dlg { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .ev-head { padding: 16px 56px 10px 16px; }
  .strip { padding: 0 16px 12px; gap: 3px; }
  .strip .sc small { display: none; }
  .ev-bar { padding: 10px 16px; }
  .ev-panels { padding: 14px 16px 20px; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .stat .v { font-size: 20px; }
}
@media (max-width: 380px) {
  .mini col.p, .mini.wide-p col.p { width: 66px; }
  .mini col.c { width: 14px; }
  .mini th[scope="row"] { font-size: 12.5px; }
  .mini .prob.sm { gap: 4px; }
  .mini .prob.sm .pb { display: none; }                   /* the number and n stay; the bar is decoration */
  .mini .prob.sm .pv { min-width: 30px; }
  .tile { padding: 12px 10px 10px; }
}
@media (max-height: 500px) {                               /* landscape phones: the header scrolls away */
  .site-h { position: static; }
  html { scroll-padding-top: 0; }
  :root { --head-h: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- launch review pass (lr/pages) ---------- */
a.badge { text-decoration: none; }
a.badge:hover { box-shadow: inset 0 0 0 1px currentColor; }
.ent-head .meta .role-l { display: inline; }
.f-report { margin-top: 10px !important; }
.f-report a { color: var(--ink-2); }

/* info pages (/about, /agents, /accuracy, /api, /sources, /terms …): a readable column, boxed code, real tables
   that scroll sideways inside their own box on phones (FV-01, A11Y-02) */
main.wrap > article { max-width: 760px; padding: 8px 0 48px; }
/* info pages (article.doc, lr/content): the prose keeps a reading measure, tables use the page width so /accuracy's
   7-column tables do not scroll inside their box on desktop */
main.wrap > article.doc { max-width: none; }
article.doc > p, article.doc > ul, article.doc > ol, article.doc > h2, article.doc > h3,
article.doc > blockquote { max-width: 75ch; }
article h1 { margin: 8px 0 12px; }
article h2 { margin: 32px 0 8px; }
article h3 { margin: 24px 0 6px; }
article p, article li { line-height: 1.6; }
article ul, article ol { padding-left: 1.3em; }
article pre {
  position: relative; max-width: 100%; overflow-x: auto; margin: 12px 0; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font: 13px/1.5 var(--font-mono);
}
article pre code { font-size: inherit; }
article :not(pre) > code { padding: 1px 5px; border-radius: 5px; background: var(--surface-3); color: var(--ink); overflow-wrap: anywhere; }
article .table-wrap { position: relative; max-width: 100%; overflow-x: auto; margin: 12px 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
article table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
article th, article td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
article thead th { font-size: 12px; font-weight: 650; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
article tbody tr:last-child > * { border-bottom: 0; }
article td[align="right"], article th[align="right"], article .ra { text-align: right; }
article blockquote { margin: 12px 0; padding: 4px 14px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
article .pre-wrap { position: relative; margin: 12px 0; }
article .pre-wrap pre { margin: 0; padding-right: 76px; }
article .copy-pre { position: absolute; top: 8px; right: 8px; }

/* Windows High Contrast / forced colours: heat blocks keep their fills, the search box a visible focus (A11Y-05) */
@media (forced-colors: active) {
  .mini .hb, .strip .sc, .key .k-cell, .fc, .l10 i, .pb rect { forced-color-adjust: none; }
  .search:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* phones: home cards keep whole words (DES-15) */
@media (max-width: 420px) {
  .mini .wl { overflow-wrap: normal; word-break: normal; hyphens: auto; }
  /* six history cells instead of eight, so the word column gets room (the two oldest step aside) */
  .mini.c8 colgroup col:nth-child(2), .mini.c8 colgroup col:nth-child(3) { visibility: collapse; }
}

/* ---------- T10 (V06 + UX-08): phones under 640 px ---------- */
/* Cards: the first 3 words (components.PHONE_WORDS), then '+N words →' (data-sm, generated: the link's text stays the
   one '+M more words'); wider screens: every row, '+M more words'.
   Walls (every table.wt: detail.wall_table, components.word_table): each row is a two-line grid, nothing scrolls
   sideways, so the newest cell (rightmost) and p are always in view. Line 1: the word, p in 17 px bold with its n.
   Line 2: a 14 px cell per appearance, oldest first, then '8/8', and All-time at the right (earnings; Markets on: the
   price). Trend and Scripted step aside (hidden under 1280 px already, detail.css). The head row sticks under the site
   header. `body … .wt.wt` outranks detail.css (loads later). Each :has() selector sits in a rule of its own, so a
   browser without :has() drops only that rule. */
.tile .more .w-sm { display: none; }
.tile .more .w-sm svg { flex: none; }
@media (max-width: 639.98px) {
  .mini tbody tr.fold { display: none; }
  .tile .more .w-lg { display: none; }
  .tile .more .w-sm { display: inline-flex; align-items: center; gap: 4px; }
  .tile .more .w-sm::before { content: attr(data-sm); }
  .tile .more.sm-only[hidden] { display: inline-flex !important; }      /* phones-only link (no '+M more words') */

  body .tbl-wrap.wall, body .tbl-wrap.wall:not(.fits) { overflow: visible; }
  body .tbl-wrap:has(> table.wt) { overflow: visible; }                 /* components.word_table */
  body .tbl-wrap table.wt.wt { display: block; width: 100%; min-width: 0; }
  body .tbl-wrap .wt.wt caption { display: block; padding: 12px 14px 4px; }
  body .tbl-wrap .wt.wt thead, body .tbl-wrap .wt.wt tbody { display: block; }
  body .tbl-wrap .wt.wt thead {
    position: sticky; top: var(--head-h); z-index: 3; background: var(--surface);
    border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  /* 16 tracks for the cells (8 calls or 10 occasions) and the rate, then the slack. Line 1 spans them all, the word
     padded clear of p (p is at most '>99% n=131+tx'), so a long strip never squeezes p (320 px, 10 cells) */
  body .tbl-wrap .wt.wt tr {
    display: grid; grid-template-columns: repeat(16, auto) minmax(0, 1fr); align-items: center;
    column-gap: 0; padding: 0 14px;
  }
  body .tbl-wrap .wt.wt th, body .tbl-wrap .wt.wt td {
    display: block; position: static; height: auto; min-width: 0; max-width: none; padding: 0;
    border: 0; background: none; box-shadow: none; white-space: nowrap;
  }
  body .tbl-wrap .wt.wt .mkt-only { display: none; }
  body .tbl-wrap .wt.wt tbody tr { row-gap: 6px; padding-top: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  body .tbl-wrap .wt.wt tbody tr:last-child { border-bottom: 0; }
  body .tbl-wrap .wt.wt tbody tr:hover { background: var(--surface-2); }
  body .tbl-wrap .wt.wt tbody tr:hover > * { background: none; }
  body .tbl-wrap .wt.wt tbody .wcol { grid-row: 1; grid-column: 1 / -1; padding-right: 110px; white-space: normal; }
  body .tbl-wrap .wt.wt .wname { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
  body .tbl-wrap .wt.wt .wsub { display: inline; margin: 0 0 0 6px; }
  body .tbl-wrap .wt.wt tbody .c-p { grid-row: 1; grid-column: 1 / -1; justify-self: end; }
  body .tbl-wrap .wt.wt td.hc { grid-row: 2; width: 14px; margin-right: 3px; }
  body .tbl-wrap .wt.wt td.hc .fc {
    width: 14px; height: 14px; margin: 0; border-radius: 3px; font-size: 0; line-height: 0;
  }
  /* no number at 14 px. Counted as said: filled, at least the b4 fill (>= 3:1 on the card in both themes), with the
     ring the key names. Not counted (N, 0, below the threshold): hollow, as .b0.ns on the cards. No call: hatched. */
  body .tbl-wrap .wt.wt td.hc .fc.hit { box-shadow: inset 0 0 0 1.5px currentColor; }
  body .tbl-wrap .wt.wt td.hc .fc.hit.b1, body .tbl-wrap .wt.wt td.hc .fc.hit.b2,
  body .tbl-wrap .wt.wt td.hc .fc.hit.b3 { background: var(--c4); color: var(--t4); }
  body .tbl-wrap .wt.wt td.hc .fc:not(.hit):not(.nx) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
  .key .k-cell.b0:not(.hit) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }   /* 'N: settled no' */
  /* the last-N rate: the first rate after the cells (detail.wall_table) or .c-last (components.word_table) */
  body .tbl-wrap .wt.wt .c-trend, body .tbl-wrap .wt.wt .c-scr, body .tbl-wrap .wt.wt .c-all,
  body .tbl-wrap .wt.wt td.ra:not(.c-p) { display: none; }
  body .tbl-wrap .wt.wt td.hc + td.ra:not(.c-p), body .tbl-wrap .wt.wt td.c-trend + td.ra:not(.c-p),
  body .tbl-wrap .wt.wt td.ra.c-last:not(.c-p) { display: block; grid-row: 2; padding-left: 6px; text-align: left; }
  /* All-time (earnings: the rate after Scripted; .c-all on components.word_table): line 2, under p */
  body .tbl-wrap .wt.wt td.c-scr + td.ra, body .tbl-wrap .wt.wt td.ra.c-all,
  body .tbl-wrap .wt.wt thead th.c-scr + th.ra, body .tbl-wrap .wt.wt thead th.ra.c-all {
    display: block; grid-row: 2; grid-column: -2 / -1; justify-self: end; padding-left: 8px; text-align: right;
  }
  body .tbl-wrap .wt.wt tbody .rate { display: inline; }
  body .tbl-wrap .wt.wt tbody .rate .v1 { font: 600 13px/1 var(--font-mono); color: var(--ink-2); }
  body .tbl-wrap .wt.wt tbody td.c-scr + td.ra .rate .v1, body .tbl-wrap .wt.wt tbody td.c-all .rate .v1 {
    font-size: 12px; font-weight: 500; color: var(--muted);
  }
  body .tbl-wrap .wt.wt tbody .rate .v2 { display: none; }
  body .tbl-wrap .wt.wt .c-p .prob { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
  body .tbl-wrap .wt.wt .c-p .prob .pb { display: none; }
  body .tbl-wrap .wt.wt .c-p .prob .pv { min-width: 0; font: 700 17px/1.1 var(--font-body); }
  body .tbl-wrap .wt.wt .c-p .prob .pn { min-width: 5em; font-size: 12px; text-align: left; overflow: visible; }
  body.show-mkt .tbl-wrap .wt.wt td.mkt-c { display: block; grid-row: 2; grid-column: -2 / -1; justify-self: end; font-size: 12.5px; }
  body.show-mkt .tbl-wrap .wt.wt td.c-scr + td.ra, body.show-mkt .tbl-wrap .wt.wt td.ra.c-all,
  body.show-mkt .tbl-wrap .wt.wt thead th.c-scr + th.ra, body.show-mkt .tbl-wrap .wt.wt thead th.ra.c-all { display: none; }

  /* head: 'Word … Probability', then the oldest and newest labels over the cells, 'Last N' and All-time */
  body .tbl-wrap .wt.wt thead tr { row-gap: 3px; padding-top: 9px; padding-bottom: 7px; }
  body .tbl-wrap .wt.wt thead th { display: none; height: auto; font-size: 11px; line-height: 1.2; }
  body .tbl-wrap .wt.wt thead th.wcol { display: block; grid-row: 1; grid-column: 1 / -1; }
  body .tbl-wrap .wt.wt thead th.c-p { display: block; grid-row: 1; grid-column: 1 / -1; justify-self: end; }
  body .tbl-wrap .wt.wt thead th.q {
    display: block; position: relative; top: auto; grid-row: 2; width: 14px; height: 13px; margin-right: 3px; overflow: visible;
  }
  /* column labels: visually hidden (screen readers keep them), except the oldest and the newest */
  body .tbl-wrap .wt.wt thead th.q > span, body .tbl-wrap .wt.wt thead th.q small {
    display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body .tbl-wrap .wt.wt thead th.wcol + th.q > span, body .tbl-wrap .wt.wt thead th.q.latest > span {
    top: 0; width: auto; height: auto; overflow: visible; clip-path: none; font: 600 10.5px/13px var(--font-mono);
    letter-spacing: 0; color: var(--muted);
  }
  body .tbl-wrap .wt.wt thead th.wcol + th.q > span { left: 0; }
  body .tbl-wrap .wt.wt thead th.q.latest > span { right: 0; left: auto; color: var(--link); }
  /* the oldest label only from 8 cells (133 px: two 'Sep 20 ’25' labels fit side by side); under 4 cells the newest
     label would hang past the card, so only 'Last N' shows */
  body .tbl-wrap .wt.wt thead tr:not(:has(> th.q ~ th.q ~ th.q ~ th.q ~ th.q ~ th.q ~ th.q ~ th.q)) > th.wcol + th.q:not(.latest) > span {
    width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  body .tbl-wrap .wt.wt thead tr:not(:has(> th.q ~ th.q ~ th.q ~ th.q)) > th.q.latest > span {
    width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  body.show-mkt .tbl-wrap .wt.wt thead th.mkt-only {
    display: block; grid-row: 2; grid-column: -2 / -1; justify-self: end; font-size: 10.5px; line-height: 13px;
  }
  body .tbl-wrap .wt.wt thead th.q + th.ra:not(.c-p), body .tbl-wrap .wt.wt thead th.c-trend + th.ra:not(.c-p),
  body .tbl-wrap .wt.wt thead th.ra.c-last:not(.c-p), body .tbl-wrap .wt.wt thead th.c-scr + th.ra,
  body .tbl-wrap .wt.wt thead th.ra.c-all {
    font-size: 10.5px; line-height: 13px; letter-spacing: .04em;
  }
  body .tbl-wrap .wt.wt thead th.q + th.ra:not(.c-p), body .tbl-wrap .wt.wt thead th.c-trend + th.ra:not(.c-p),
  body .tbl-wrap .wt.wt thead th.ra.c-last:not(.c-p) { display: block; grid-row: 2; padding-left: 6px; }
}
@media (max-width: 639.98px) and (max-height: 500px) {
  body .tbl-wrap .wt.wt thead { top: 0; }                  /* landscape phones: the site header scrolls away */
}