/* Readiness Signal: approved v2 layout, restyled as "a calm instrument with character".
   Layout values follow the design's L table: narrow < 640px, wide >= 980px, medium otherwise.
   Colour is categorical only: four mechanism hues, a navy/indigo brand, and the brand green as
   emphasis (the logo's cap, the masthead bars' crossings, the active nav mark, link-hover underlines). Nothing is red, amber or green as an
   item or status colour, and no colour means severity, rating or safety. */

:root {
  /* Brand */
  --navy: #0B1F44;
  --indigo-deep: #1E1B4B;
  --indigo-brand: #312E81;
  --green: #1FD16A;
  --grad-brand: linear-gradient(115deg, #0B1F44 0%, #142A5C 50%, #1E1B4B 100%);
  --grad-btn: linear-gradient(135deg, #0B1F44 0%, #262775 100%);
  --grad-btn-hover: linear-gradient(135deg, #12295A 0%, #312E81 100%);
  --grad-accent: linear-gradient(90deg, #0B1F44 0%, #3730A3 100%);

  /* Neutrals */
  --ink: #0E1B36;
  --muted: #4B5568;
  --rule: #E3E6F0;
  --rule-soft: #ECEEF5;
  --rule-input: #C5CDD9;
  --rule-link: #B6BFCD;
  --rule-dash: #8792A6;
  --rule-navy: #C3CADE;
  --page: #F4F5FA;
  --hover: #F6F7FC;
  --open: #F7F8FC;
  --chip: #EEF0FA;
  --navy-tint: #EEF1F8;
  --quiet: #F7F8FC;
  --mast-muted: #C9D3E6;
  --btn-hover: #14305F;
  --active-bg: #EEF0FA;

  /* Shape and depth */
  --r-card: 16px;
  --r-panel: 12px;
  --r-control: 10px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px -18px rgba(15, 23, 42, .18);
  --shadow-card-hi: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 34px -18px rgba(15, 23, 42, .28);
  --shadow-pop: 0 2px 6px rgba(15, 23, 42, .06), 0 20px 44px -14px rgba(15, 23, 42, .30);
  --shadow-lift: 0 1px 2px rgba(15, 23, 42, .10), 0 8px 18px -8px rgba(30, 27, 75, .50);
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Mechanism hue (set per mechanism below; this neutral is never shown for a valid item) */
  --m-text: #0B1F44;
  --m-fill: #0B1F44;
  --m-tint: #EEF0FA;
  --m-edge: #D5DAEA;
  --m-line: #A9B2CC;
  --m-wash: #FAFBFD;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* L table: medium defaults */
  --hpad: 24px;
  --nav-gap: 32px;
  --main-pad: 24px 24px 40px;
  --card-head: 16px 24px;
  --card-x: 24px;
  --sec-pad: 22px 24px 18px;
  --row-pad: 16px 24px;
  --body-pad: 6px 24px 26px;
  --line-cols: 168px minmax(0, 1fr) 20px;
  --line-areas: 'mech claim tog' 'mech meta tog';
  --body-cols: 168px minmax(0, 1fr);
  --body-areas: 'disp read' 'disp act' 'disp src' 'disp foot';
  --body-areas-thr: 'disp read' 'disp act' 'disp thr' 'disp src' 'disp foot';
  --read-cols: 128px minmax(0, 1fr);
  --src-cols: 190px minmax(0, 1fr);
  --empty-cols: minmax(0, 1fr);
  --claim-size: 17px;
  --pop-wrap: relative;
  --pop-r: auto;
  --pop-w: 300px;
  --search-w: 240px;
  --about-pad: 44px 48px 52px;
  --about-h: 44px;
  --about-cols: minmax(0, 1fr);
  --mech-cols: repeat(2, minmax(0, 1fr));
}

/* Mechanism hues: categorical, never a rating. Each text shade passes 4.5:1 on white, on its
   own tint and on its wash. awareness_only carries the same saturation and weight as the rest.
   awareness_only is a blue-leaning indigo (OKLCH hue ~269) rather than the brand's own indigo
   (~277): it stays clear of the navy-to-indigo brand accents and of PRAF violet (~293), and its
   lighter fill keeps it apart from violet under red-green colour-vision deficiency too. */
[data-mech="candidate_issue"] {
  --m-text: #115E59; --m-fill: #0B7268; --m-tint: #F0FDFA; --m-edge: #A3E7DD; --m-line: #2FA294; --m-wash: #F5FCFB;
}
[data-mech="kri_kpi"] {
  --m-text: #0E7490; --m-fill: #0891B2; --m-tint: #EEFBFE; --m-edge: #A5F3FC; --m-line: #0EA5C6; --m-wash: #F6FFFF;
}
[data-mech="praf_coverage"] {
  --m-text: #6D28D9; --m-fill: #7C3AED; --m-tint: #F5F3FF; --m-edge: #DDD6FE; --m-line: #A384F9; --m-wash: #FAF9FF;
}
[data-mech="awareness_only"] {
  --m-text: #2F4AC0; --m-fill: #5C7CFA; --m-tint: #E9F0FF; --m-edge: #C3D0FF; --m-line: #7A93FA; --m-wash: #F1F5FF;
}

@media (min-width: 980px) {
  :root {
    --line-cols: 184px minmax(0, 1fr) 250px 20px;
    --line-areas: 'mech claim meta tog';
    --body-cols: 184px minmax(0, 1.1fr) minmax(0, 1fr);
    --body-areas: 'disp read act' 'disp src src' 'disp foot foot';
    --body-areas-thr: 'disp read act' 'disp thr thr' 'disp src src' 'disp foot foot';
    --empty-cols: minmax(0, 1.2fr) minmax(0, 1fr);
    --about-cols: 240px minmax(0, 1fr);
  }
}

@media (max-width: 639.98px) {
  :root {
    --hpad: 14px;
    --nav-gap: 22px;
    --main-pad: 16px 10px 32px;
    --card-head: 14px 16px;
    --card-x: 16px;
    --sec-pad: 16px 16px 14px;
    --row-pad: 16px 16px;
    --body-pad: 4px 16px 22px;
    --line-cols: minmax(0, 1fr) 20px;
    --line-areas: 'mech tog' 'claim claim' 'meta meta';
    --body-cols: minmax(0, 1fr);
    --body-areas: 'disp' 'read' 'act' 'src' 'foot';
    --body-areas-thr: 'disp' 'read' 'act' 'thr' 'src' 'foot';
    --read-cols: minmax(0, 1fr);
    --src-cols: minmax(0, 1fr);
    --pop-wrap: static;
    --pop-r: 0;
    --pop-w: auto;
    --search-w: 100%;
    --about-pad: 24px 18px 32px;
    --about-h: 32px;
    --mech-cols: minmax(0, 1fr);
    --r-card: 14px;
  }
}

/* ---------------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
a { color: var(--navy); }
a:hover { color: var(--navy); text-decoration-color: var(--green); }
button, input { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }

.rs {
  min-height: 100vh;
  background: var(--page);
  font-family: var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rs.printing { background: #fff; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.mast :focus-visible { outline-color: #fff; }
.opt:focus-visible { outline-offset: -2px; }
/* Full-width rows draw a rounded ring just inside their edge, so it never meets the clipped
   corner of the card (16px, 14px on phones) and matches the rounded surfaces. */
.row:focus-visible, .lt:focus-visible, .ask:focus-visible, .reg:focus-visible {
  outline-offset: -4px; border-radius: 12px;
}
/* Item rows sit beside the 4px mechanism bar (.item::before), so the ring clears it. */
.item > .row:focus-visible { outline-offset: -6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: off screen until focused from the keyboard. */
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 50; padding: 8px 14px;
  background: #fff; color: var(--navy); font-size: 13px; font-weight: 600; border: 2px solid var(--navy);
  border-radius: var(--r-control);
}
.skip:focus { top: 8px; }
.skip:focus-visible { outline: none; }
main[tabindex="-1"]:focus { outline: none; }
/* The static boot line (index.html) is for "script did not run"; with scripting off,
   the noscript message says it instead. */
@media (scripting: none) { .boot { display: none; } }

/* Shared type */
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); }
/* Page titles carry a short rounded brand flourish (navy to deep indigo; never a status). */
.h1::after, .about-h::after {
  content: ''; display: block; width: 40px; height: 4px; margin-top: 9px;
  border-radius: var(--r-pill); background: var(--grad-accent);
}
.h-23 { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--navy); }
.h-22 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); }
.h-21 { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--navy); }
.h-19 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--navy); }
.sub-13 { font-size: 13px; color: var(--muted); }
.small-link {
  font-size: 13px; font-weight: 500; text-underline-offset: 3px; text-decoration-color: var(--rule-link);
}
.small-link:hover { text-decoration-color: var(--green); }
.count { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* Mechanism tag: a pill in the mechanism tint with the label in the mechanism text shade. */
/* Sized to sit inside the design's 168px mechanism column (medium) with room to spare. */
/* The radius is half the one-line tag height, so it reads as a pill; if user text-spacing or a
   wider fallback font makes the label wrap (WCAG 1.4.12), the tag becomes a rounded box and no
   text is clipped. */
.mech {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  justify-self: start; align-self: start;
  padding: 4px 9px; border-radius: 11px;
  background: var(--m-tint); box-shadow: inset 0 0 0 1px var(--m-edge);
}
.mech-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
  color: var(--m-text); min-width: 0;
}


/* Section number badges: 1 solid filled, 2 double, 3 dashed; rounded, never a status. */
.badge {
  display: flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--serif); font-weight: 600; border-radius: 12px;
}
.badge-40 { width: 40px; height: 40px; font-size: 21px; }
.badge-36 { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; }
.badge-solid { background: var(--navy); background-image: var(--grad-btn); color: #fff; border: 2px solid var(--navy); }
.badge-double { background: #fff; color: var(--navy); border: 4px double var(--navy); }
.badge-dashed { background: #fff; color: var(--navy); border: 2px dashed var(--navy); }

.card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); overflow: hidden; overflow: clip;
}

/* Tinted card heads with a slim navy-to-indigo accent along the top, inset from the rounded
   corners with rounded ends. */
.sec-head, .month-head { position: relative; background: var(--navy-tint); }
.sec-head::before, .month-head::before {
  content: ''; position: absolute; top: 0; left: var(--card-x); right: var(--card-x); height: 3px;
  border-radius: 0 0 3px 3px; background: var(--grad-accent); pointer-events: none;
}

/* "Quiet signal": a flat line with one soft blip, above empty-state copy (decorative). */
.quiet-sig { display: block; width: 104px; height: 22px; flex: none; overflow: visible; }
.quiet-sig .q-line { fill: none; stroke: #B4BBD3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quiet-sig .q-blip { fill: none; stroke: #4A4F86; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quiet-sig .q-dot { fill: #4A4F86; }

/* ---------------------------------------------------------------------------- masthead */

.mast {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); background-image: var(--grad-brand); color: #fff;
}
/* The masthead's chatter as level bars across the empty right side of the nav row: traffic rises
   from the masthead's foot under a dashed bar laid on the nav row's top rule, and only the bursts
   that cross the bar light up above it, in the brand green, like the cap of the logo. It scrolls
   slowly and without end, with no pause control (the owner chose continuous motion, 2026-10-06);
   reduced motion stills it. It sits in the content column (owner, 2026-10-06): it ends where the
   cards below end and starts over their right-hand column, half the 20px .dash-grid gap past the
   middle, but never nearer the nav links than 440px. Under 640px the nav fills the row, so the
   bars are left out, and print leaves them out too. */
.mast-wave {
  position: absolute; z-index: -1; pointer-events: none;
  left: max(440px, 50% + 10px); right: var(--hpad); bottom: 0; height: 66px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.mast-wave svg { display: block; width: 100%; height: 100%; overflow: hidden; fill: none; }
.mw-dim { stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.mw-hot { stroke: var(--green); stroke-width: 2; }
.mw-bar { stroke: rgba(255, 255, 255, .38); stroke-width: 1; stroke-dasharray: 3 4; }
.mw-chatter { animation: mw-scroll 24s linear infinite; }
@keyframes mw-scroll { to { transform: translateX(-480px); } }
@media (max-width: 639.98px) { .mast-wave { display: none; } }
.mast-in {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 20px var(--hpad) 0;
  display: flex; flex-direction: column; gap: 16px;
}
.mast-top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px;
}
/* The logo, from the owner's brand set (2026-10-06): the mark beside the wordmark, the tagline under
   the wordmark. The wordmark (Source Serif 4 Bold) and the tagline (Urbanist) load with only the
   letters the logo uses, so nothing else may ask for those faces: a glyph outside the subset falls
   back to the next family. */
.brand {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
  column-gap: 10px; row-gap: 3px; min-width: 0; color: #fff; text-decoration: none; border-radius: 4px;
}
.brand:hover { color: #fff; }
.brand-mark { display: block; width: 78px; height: auto; margin-top: 4px; }
.bm-base { fill: #fff; }
.bm-cap { fill: var(--green); }
.brand-name {
  font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.005em;
  white-space: nowrap;
}
.brand-tag { grid-column: 2; font-family: 'Urbanist', var(--sans); font-size: 14px; line-height: 1.2; }
@media (max-width: 639.98px) {
  .brand { column-gap: 8px; row-gap: 3px; }
  .brand-mark { width: 60px; margin-top: 3px; }
  .brand-name { font-size: 26px; }
  .brand-tag { font-size: 13px; }
}
/* One quiet line (owner change 2026-10-06): when the data last changed, and when it next may. */
.mast-status {
  margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--mast-muted); font-variant-numeric: tabular-nums;
}
.ms-v { font-weight: 500; color: #fff; }
.ms-sep { color: rgba(255, 255, 255, .45); }
.nav {
  display: flex; gap: var(--nav-gap); border-top: 1px solid rgba(255, 255, 255, .13);
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
/* z-index 0 makes each link its own stacking context, so its underline (z-index -1) paints
   beneath the link's focus outline instead of covering the ring's lower edge. */
.nav a {
  position: relative; z-index: 0; padding: 12px 0 13px;
  font-size: 14px; font-weight: 500; color: var(--mast-muted); text-decoration: none; white-space: nowrap;
  transition: color .15s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: var(--r-pill); background: transparent; transition: background-color .15s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { background: rgba(255, 255, 255, .22); }
.nav a.on { font-weight: 600; color: #fff; }
.nav a.on::after { background: var(--green); }
.nav a:focus-visible { outline-offset: -2px; border-radius: 4px; }

/* ---------------------------------------------------------------------------- main + footer */

.main {
  max-width: 1200px; margin: 0 auto; padding: var(--main-pad);
  display: flex; flex-direction: column; gap: 20px;
}
.foot {
  max-width: 1200px; margin: 0 auto; padding: 4px var(--hpad) 40px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.foot::before {
  content: ''; display: block; width: 32px; height: 3px; margin-bottom: 12px;
  border-radius: var(--r-pill); background: var(--rule-navy);
}
.title-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
}
.title-row.start { justify-content: flex-start; }
.loading { font-size: 13px; color: var(--muted); }
.notice { padding: var(--sec-pad); display: flex; flex-direction: column; gap: 8px; }
.notice.quiet { background: var(--quiet); gap: 10px; }
.notice-t { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--navy); }
.notice-b { font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------------------------------------------------------------------------- dashboard */
/* Owner change 2026-10-06: a brief of four readings, then the panels behind it. Charts draw in
   the one navy ink: what an item asks is shown by fill (filled asks for action, open resolves as
   awareness only), by labels and by the mechanism tag, never by hue alone. Sizes and counts mean
   volume, never severity. */

.card-head {
  padding: var(--card-head); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px;
  background: var(--navy-tint);
}

.dash-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  grid-template-areas: 'latest' 'adds' 'threads' 'asks' 'reg' 'doms' 'bar';
}
@media (min-width: 980px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'latest adds' 'threads threads' 'asks reg' 'doms bar';
  }
}
.d-latest { grid-area: latest; }
.d-adds { grid-area: adds; }
.d-threads { grid-area: threads; }
.d-asks { grid-area: asks; }
.d-doms { grid-area: doms; }
.d-reg { grid-area: reg; }
.d-bar { grid-area: bar; }
.dcard { display: flex; flex-direction: column; }
.dcard-body { padding: 16px var(--card-x) 18px; display: flex; flex-direction: column; gap: 12px; }
.dcard-foot {
  margin-top: auto; padding: 12px var(--card-x); border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; color: var(--muted);
}
.dcard-note { padding: 0 var(--card-x) 14px; font-size: 12.5px; color: var(--muted); }
.dcard-body .dcard-note { padding: 0; }
.dash-none {
  padding: var(--row-pad); display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; line-height: 1.55; color: var(--muted); background: var(--quiet);
}
/* Whole-row buttons in the panels share one shape. */
.lt, .ask, .reg, .th-latest {
  text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.lt, .ask, .reg {
  width: 100%; background: #fff; padding: 14px var(--card-x);
  transition: background-color .15s var(--ease);
}
.lt:hover, .ask:hover, .reg:hover { background: var(--hover); }
.lt.ruled, .ask.ruled { border-top: 1px solid var(--rule-soft); }

/* Brief: four readings side by side on wide screens, two on medium, stacked on phones. */
.brief-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule-soft); }
@media (min-width: 640px) { .brief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .brief-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brief-cell { background: #fff; padding: 18px var(--card-x) 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.brief-cell > .kicker { color: var(--navy); }
.brief-cell > .kicker::before {
  content: ''; display: block; width: 24px; height: 3px; margin-bottom: 10px;
  border-radius: var(--r-pill); background: var(--grad-accent);
}
.brief-t { font-family: var(--serif); font-size: 17px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
/* A reading that leads with a number: the figure large, the words under it quieter. */
.brief-t.has-fig { font-size: 15.5px; line-height: 1.4; }
.brief-fig {
  display: block; margin-bottom: 6px;
  font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--navy);
}
.brief-of { font-size: 20px; font-weight: 500; color: var(--muted); }
.brief-s { font-size: 13.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.th-latest-k {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.th-claim {
  font-family: var(--serif); font-size: 15px; line-height: 1.42; color: var(--ink); text-wrap: pretty;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color .15s var(--ease);
}
.th-latest:hover .th-claim { text-decoration-color: var(--green); }

/* Latest additions */
.lt { display: flex; flex-direction: column; gap: 6px; }
.lt-meta, .ask-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.lt-claim { font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }

/* Additions by month: a unit chart, one square per item, stacked from the baseline. The month
   axis below uses the same flex track, so labels sit under their columns. */
.uc { display: flex; flex-direction: column; gap: 6px; }
.uc-cols {
  display: flex; align-items: flex-end; gap: 4px; min-height: 96px;
  padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.uc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; }
.u {
  display: block; flex: none; width: 16px; height: 16px; border-radius: 4px;
  background: var(--navy); border: 2px solid var(--navy);
}
.u.aw { background: #fff; }
a.u:hover { background: var(--indigo-brand); border-color: var(--indigo-brand); }
a.u.aw:hover { background: var(--active-bg); }
.mx { display: flex; gap: 4px; }
.mx-m {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  font-size: 11.5px; line-height: 1.25; color: var(--muted);
}
.mx-y { font-size: 10.5px; }
.lg-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg .u { width: 12px; height: 12px; border-radius: 3px; }
.secs {
  padding: 12px var(--card-x) 16px; border-top: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.secs-list { display: flex; flex-direction: column; gap: 7px; }
.secs-i { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.secs-t { color: var(--ink); }
.secs-n { font-weight: 600; color: var(--navy); }
.badge-22 { width: 24px; height: 24px; font-size: 12.5px; border-radius: 7px; }
.badge-22.badge-solid { border-width: 1px; }
.badge-22.badge-double { border-width: 3px; }
.badge-22.badge-dashed { border-width: 1.5px; }

/* Developing threads: each a timeline on the shared month axis. */
.th { padding: 16px var(--card-x) 14px; display: flex; flex-direction: column; gap: 8px; }
.th + .th { border-top: 1px solid var(--rule-soft); }
.th-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.th-n { font-size: 13px; color: var(--muted); }
.th-num { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); margin-right: 3px; }
.th-meta { font-size: 13px; color: var(--muted); }
.th-svg { display: block; width: 100%; height: 24px; overflow: visible; }
.th-grid { stroke: var(--rule-soft); stroke-width: 1; }
.th-span { stroke: var(--rule-navy); stroke-width: 2; stroke-linecap: round; }
.th-hit { stroke: transparent; stroke-width: 24; stroke-linecap: round; pointer-events: stroke; }
.th-ring { stroke: #fff; stroke-width: 14; stroke-linecap: round; pointer-events: none; }
.th-dot { stroke: var(--navy); stroke-width: 10; stroke-linecap: round; pointer-events: none; }
.th-hole { stroke: #fff; stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.th-svg a:hover .th-dot { stroke: var(--indigo-brand); }
/* Phones: smaller dots, so a run of close developments stays countable. */
@media (max-width: 639.98px) {
  .th-ring { stroke-width: 11; }
  .th-dot { stroke-width: 8; }
  .th-hole { stroke-width: 4; }
}
.th-latest { background: none; padding: 0; display: flex; flex-direction: column; gap: 6px; border-radius: 4px; }
.th-axis { padding: 0 var(--card-x) 14px; }

/* Questions to put to owners */
.ask { display: flex; flex-direction: column; gap: 6px; }
.ask-q { font-family: var(--serif); font-size: 16px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.ask-c { font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* Where the signal concentrates: dot area grows with the count; the hue never changes. */
.dm { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dm th, .dm td { padding: 0; font-weight: 400; }
.dm thead th { padding-bottom: 8px; font-size: 11.5px; color: var(--muted); text-align: center; }
.dm .dm-d {
  width: 104px; padding: 6px 8px 6px 0; text-align: left;
  font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--navy);
}
.dm .dm-r { width: 70px; padding-left: 8px; text-align: right; }
.dm thead .dm-r { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.dm tbody tr + tr > * { border-top: 1px solid var(--rule-soft); }
.dm-c { height: 32px; text-align: center; }
.dmd { display: inline-block; vertical-align: middle; border-radius: 50%; background: var(--navy); }
.dmd.s0 { width: 4px; height: 4px; background: var(--rule-input); }
.dmd.s1 { width: 7px; height: 7px; }
.dmd.s2 { width: 10px; height: 10px; }
.dmd.s3 { width: 12px; height: 12px; }
.dmd.s4 { width: 14px; height: 14px; }
.dm-n { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--navy); }
.dm-was { display: block; font-size: 11.5px; color: var(--muted); }
.dm-quiet .dm-d, .dm-quiet .dm-n { color: var(--muted); }
@media (max-width: 639.98px) {
  .dm .dm-d { width: 92px; font-size: 13px; }
  .dm .old { display: none; }
}

/* Regulatory direction */
.reg-list { list-style: none; margin: 0; padding: 0; }
.reg-list > li + li { border-top: 1px solid var(--rule-soft); }
.reg { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; }
.reg-when { padding-top: 2px; font-size: 12.5px; color: var(--muted); }
.reg-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reg-who { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.reg-c { font-family: var(--serif); font-size: 15px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
@media (max-width: 639.98px) { .reg { grid-template-columns: minmax(0, 1fr); } }

/* The bar: the funnel of the last 7 days, then each scheduled slot. */
.bar-body { gap: 16px; }
.funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 639.98px) { .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fn { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-panel); background: var(--navy-tint); min-width: 0; }
/* Big standalone values use proportional figures. */
.fn-v { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--navy); font-variant-numeric: proportional-nums; }
.fn-l { font-size: 12px; line-height: 1.35; color: var(--muted); }
.runs-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; }
.runs { border-collapse: collapse; }
.runs th, .runs td { padding: 4px 9px; text-align: center; font-weight: 400; }
.runs thead th { font-size: 11px; color: var(--muted); }
.runs tbody th { padding-left: 0; text-align: left; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.slot { position: relative; display: inline-block; vertical-align: middle; width: 12px; height: 12px; border-radius: 50%; }
.slot-published { background: var(--navy); }
.slot-silent { border: 2px solid var(--navy); }
.slot-failed { border-radius: 0; }
.slot-failed::before, .slot-failed::after {
  content: ''; position: absolute; left: 5px; top: -1px; width: 2px; height: 14px; border-radius: 1px;
  background: var(--navy); transform: rotate(45deg);
}
.slot-failed::after { transform: rotate(-45deg); }
.slot-missed { width: 10px; height: 2px; border-radius: 1px; background: var(--rule-dash); }
.slot-due { border: 2px dotted var(--rule-dash); }
.slot-later, .slot-off { width: 4px; height: 4px; background: var(--rule-input); }
.runs-key { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--muted); }
.runs-key li { display: flex; align-items: center; gap: 8px; }
.runs-key .slot { flex: none; }
.bar-note { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* One floating tooltip for chart marks (placed by app.js). */
.tip {
  position: absolute; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 8px 11px;
  background: var(--navy); color: #fff; border-radius: 8px; box-shadow: var(--shadow-pop);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45; white-space: pre-line; pointer-events: none;
}
.tip::first-line { font-weight: 600; }
.tip[hidden] { display: none; }

.arch-link {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  padding: 18px var(--card-x); background: #fff; border: 1px solid var(--rule); text-decoration: none;
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.arch-link:hover { border-color: var(--rule-navy); box-shadow: var(--shadow-card-hi); transform: translateY(-1px); }
.arch-link-t { display: flex; flex-direction: column; gap: 4px; }
.arch-link-h { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--navy); }
.arch-link-s { font-size: 13.5px; color: var(--muted); }
.arch-link-go {
  font-size: 13px; font-weight: 500; color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule-link);
}
.arch-link:hover .arch-link-go { text-decoration-color: var(--green); }

/* ---------------------------------------------------------------------------- carried over */
/* Owner change 2026-10-06: the dashboard's design on the other pages. The report opens with a
   brief of its window, the archive with a month navigator, an expanded item in a thread shows
   the thread, and the About page keys the charts. */

/* A brief of two readings (an empty report window) keeps to two columns. */
@media (min-width: 1100px) { .brief-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Archive navigator: squares fade outside the selection; a month's label picks that month. */
.arch-chart .uc-cols { min-height: 72px; }
.u.out { opacity: .22; }
a.u.out:hover { opacity: .5; }
.mx-btn {
  padding: 4px 0; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; line-height: 1.25; color: var(--muted);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.mx-btn > span[aria-hidden] { display: flex; flex-direction: column; align-items: center; }
.mx-btn:hover:not(:disabled) { color: var(--navy); background: var(--hover); }
.mx-btn[aria-pressed="true"] { color: var(--navy); font-weight: 600; background: var(--active-bg); }
.mx-btn:disabled { cursor: default; opacity: .55; }

/* Thread in an expanded item: the dashboard's timeline, this development haloed. */
.b-thr {
  grid-area: thr; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px 16px; border-radius: var(--r-panel); background: #fff; box-shadow: inset 0 0 0 1px var(--rule);
}
.thr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.thr-head > .kicker { color: var(--navy); }
.thr-meta { font-size: 12.5px; color: var(--muted); }
.thr-chart { display: flex; flex-direction: column; gap: 4px; }
.th-halo { stroke: var(--navy); stroke-opacity: .18; stroke-width: 24; stroke-linecap: round; pointer-events: none; }
.thr-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 639.98px) { .thr-nav { grid-template-columns: minmax(0, 1fr); } }
.thr-step {
  text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border-radius: var(--r-control); background: var(--navy-tint);
  transition: background-color .15s var(--ease);
}
.thr-step:hover { background: var(--active-bg); }
.thr-step-k {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.thr-step-c { font-family: var(--serif); font-size: 14.5px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.meta-thr { font-weight: 600; color: var(--navy); }

/* About: the brief's short accent over each section title, and the chart key. */
.about-sec > .h-19::before {
  content: ''; display: block; width: 24px; height: 3px; margin-bottom: 10px;
  border-radius: var(--r-pill); background: var(--grad-accent);
}
.lgd-list { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.lgd { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.lgd-k { display: flex; align-items: center; gap: 6px; }
.lgd-t { font-size: 14.5px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.lgd-thr { display: block; width: 64px; height: 16px; overflow: visible; }
.lgd-line { stroke: var(--rule-navy); stroke-width: 2; }
.lgd-dot { fill: var(--navy); stroke: #fff; stroke-width: 2; }
.lgd-dot.aw { fill: #fff; stroke: var(--navy); stroke-width: 2.5; }

/* ---------------------------------------------------------------------------- filter bar */

.fbar {
  position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--rule);
  box-shadow: 0 8px 20px -16px rgba(15, 23, 42, .28);
}
.scrim { position: fixed; inset: 0; z-index: 1; }
.fbar-in {
  max-width: 1200px; margin: 0 auto; padding: 10px var(--hpad); position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.fwrap { position: var(--pop-wrap); max-width: 100%; }
.fbtn {
  height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--rule-input); background: #fff; color: var(--navy);
  border-radius: var(--r-pill); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  white-space: nowrap; max-width: 100%;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.fbtn:hover { border-color: #9AA4C2; background: #FAFBFE; }
.fbtn.active { border-color: var(--navy); background: var(--active-bg); }
.fbtn.open { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(49, 46, 129, .12); }
.fbtn-l { color: var(--muted); flex: none; }
/* A long single selection ("Regulatory & Executive Trajectory") truncates rather than widening
   the bar past a 320px screen. */
.fbtn-v { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fbtn .chev-s { flex: none; }
/* Below the design's narrowest frame, a little less padding keeps that longest value whole. */
@media (max-width: 359.98px) {
  .fbtn { padding: 0 8px 0 10px; gap: 6px; }
}
.chev-s {
  width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); border-radius: 0 0 1px 0;
  transform: translateY(-2px) rotate(45deg);
}
.pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: var(--pop-r); width: var(--pop-w); z-index: 3;
  background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-pop);
  padding: 6px 0 0; display: flex; flex-direction: column; overflow: hidden;
  /* Never taller than the room below the sticky bar, so the date fields and Done stay on screen
     on short phones; the option list scrolls instead (app.js fitPopover scrolls the bar up to
     its stuck position if needed). */
  max-height: calc(100vh - var(--fbar-h, 0px) - 12px);
  max-height: calc(100dvh - var(--fbar-h, 0px) - 12px);
}
.pop-opts {
  display: flex; flex-direction: column; max-height: min(60vh, 520px); overflow-y: auto;
  flex: 0 1 auto; min-height: 72px; padding: 0 6px;
}
.pop-range, .pop-foot { flex: none; }
.opt {
  position: relative;
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 8px; background: #fff; border: 0; border-radius: 8px; text-align: left; cursor: pointer; font: inherit;
  transition: background-color .12s var(--ease);
}
.opt.ruled { margin-top: 1px; }
.opt.ruled::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: -1px; height: 1px; background: var(--rule-soft);
}
.opt:hover { background: #F1F3FA; }
.mark {
  width: 16px; height: 16px; border: 1.5px solid var(--navy); border-radius: 5px; display: flex; align-items: center;
  justify-content: center; background: #fff;
}
.mark > span { width: 8px; height: 8px; border-radius: 2px; background: transparent; }
.mark.round, .mark.round > span { border-radius: 50%; }
.opt.sel .mark > span { background: var(--navy); }
.opt-l { font-size: 13.5px; color: var(--navy); font-weight: 400; }
.opt.sel .opt-l { font-weight: 600; }
.opt-n { font-size: 12.5px; color: var(--muted); }
.pop-range {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 14px 10px 40px;
}
/* Text-entry fields: their border is the only thing marking the field once text replaces the
   placeholder, so it takes the darker rule (3.1:1 on white, WCAG 1.4.11) rather than #C5CDD9. */
.date-in, .search {
  height: 32px; border: 1px solid var(--rule-dash); border-radius: var(--r-control); padding: 0 8px;
  font-size: 13px; color: var(--navy); background: #fff;
}
/* iOS Safari zooms into any focused field under 16px and stays zoomed. */
@media (max-width: 639.98px) {
  .date-in, .search { font-size: 16px; }
}
.pop-range-to { font-size: 13px; color: var(--muted); }
.pop-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--rule-soft); margin-top: 4px;
}
.text-btn {
  background: none; border: 0; padding: 0; font-size: 13px; font-weight: 500; color: var(--navy);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left;
  text-decoration-color: var(--rule-link); border-radius: 3px;
}
.text-btn:hover { text-decoration-color: var(--green); }
/* Primary buttons: navy to indigo, a gentle lift on hover (none under reduced motion). */
.done-btn, .export-btn, .email-btn {
  border: 1px solid transparent; background: var(--navy); background-image: var(--grad-btn); color: #fff;
  font-size: 13px; font-weight: 500; border-radius: var(--r-control); cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.done-btn:hover, .export-btn:hover, .email-btn:hover {
  color: #fff; background-image: var(--grad-btn-hover); box-shadow: var(--shadow-lift); transform: translateY(-1px);
}
.done-btn:active, .export-btn:active, .email-btn:active { transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.done-btn { height: 30px; padding: 0 14px; }
.search { width: var(--search-w); padding: 0 10px; }
.clear-all {
  height: 32px; background: none; border: 0; padding: 0 4px; font-size: 13px; font-weight: 500; color: var(--navy);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-link);
  border-radius: 3px;
}
.clear-all:hover { text-decoration-color: var(--green); }
.fbar-right {
  margin-left: auto; display: flex; align-items: center; gap: 12px; position: var(--pop-wrap);
}
.toggle-all {
  height: 32px; background: none; border: 0; padding: 0 2px; font-size: 13px; font-weight: 500; color: var(--navy);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-link);
  white-space: nowrap; border-radius: 3px;
}
.toggle-all:hover { text-decoration-color: var(--green); }
.export-btn {
  height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.export-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(49, 46, 129, .16); }
.export-btn .chev-s { margin-left: 0; border-color: #fff; }
.export-pop {
  left: auto; right: 0; width: 340px; max-width: calc(100vw - 24px); padding: 16px; gap: 12px;
  overflow-y: auto;
}
/* Phones: the filter popovers span the screen and Export sits flush right, so the edges that
   meet the screen are square and borderless (placement itself is unchanged). */
@media (max-width: 639.98px) {
  .pop:not(.export-pop) { border-radius: 0 0 14px 14px; border-left: 0; border-right: 0; }
  .export-pop { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
}
.export-opt { flex: none; }
.export-sum { display: flex; flex-direction: column; gap: 4px; }
.export-sel { font-size: 13px; line-height: 1.5; color: var(--ink); }
.export-opt {
  text-align: left; padding: 12px; border: 1px solid var(--rule-input); background: #fff;
  border-radius: var(--r-control); cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.export-opt:hover { border-color: var(--navy); background: var(--hover); }
.export-opt-t { font-size: 14px; font-weight: 600; color: var(--navy); }
.export-opt-d { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ---------------------------------------------------------------------------- report / archive */

.print-meta {
  border-bottom: 2px solid var(--navy); padding-bottom: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink);
}
.summary { display: flex; flex-direction: column; gap: 14px; }
.list-sub { font-size: 13.5px; color: var(--muted); }

.sec-head {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: var(--sec-pad);
}
/* The header's lower edge echoes its badge: solid, double, dashed (soft navy). */
.sec-head-solid { border-bottom: 1px solid var(--rule-navy); }
.sec-head-double { border-bottom: 3px double var(--rule-navy); }
.sec-head-dashed { border-bottom: 1px dashed #A9B2CC; }
.sec-head-in { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sec-head-t, .month-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
}
.month-head { padding: var(--sec-pad); border-bottom: 1px solid var(--rule-navy); }
.entry { font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; max-width: 760px; }
.entry-k {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
  margin-right: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-navy); white-space: nowrap;
}

.item { position: relative; background: #fff; scroll-margin-top: calc(var(--fbar-h, 0px) + 16px); }
.group { scroll-margin-top: calc(var(--fbar-h, 0px) + 16px); }
.item.ruled { border-top: 1px solid var(--rule-soft); }
/* Left accent: a hint of the mechanism on hover, its full fill when open. */
.item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1;
  border-radius: 0 4px 4px 0; background: transparent; pointer-events: none;
  transition: background-color .15s var(--ease);
}
.item:hover::before { background: var(--m-line); }
.item.open { background: var(--m-wash); }
.item.open::before { background: var(--m-fill); }
.row {
  display: grid; grid-template-columns: var(--line-cols); grid-template-areas: var(--line-areas);
  gap: 6px 24px; padding: var(--row-pad); cursor: pointer; outline-offset: -2px;
  transition: background-color .15s var(--ease);
}
.row:hover { background: var(--hover); }
.item.open > .row:hover { background: var(--m-tint); }
.row-mech { grid-area: mech; margin-top: 1px; }
.row-claim {
  grid-area: claim; font-family: var(--serif); font-size: var(--claim-size); line-height: 1.35; font-weight: 500;
  color: var(--ink); text-wrap: pretty; min-width: 0;
}
.row-meta { grid-area: meta; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-size: 12px; font-weight: 500; color: var(--navy); background: var(--chip); padding: 2px 9px;
  border-radius: var(--r-pill); white-space: nowrap;
}
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 12px; color: var(--muted); }
.meta-sec { font-weight: 600; color: var(--navy); }
.meta-bf { font-weight: 600; color: var(--navy); }
.ticks { display: inline-flex; align-items: center; gap: 2px; }
.tick-set { display: inline-flex; align-items: center; gap: 2px; }
.tick-set > span { width: 3px; height: 10px; border-radius: 2px; background: var(--navy); }
.tick-n { margin-left: 5px; }
.row-tog { grid-area: tog; display: flex; justify-content: flex-end; padding-top: 7px; align-self: start; }
.chev {
  width: 9px; height: 9px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy);
  border-radius: 0 0 2px 0; transform: rotate(45deg); transition: transform .2s var(--ease);
}
.chev.up { transform: translateY(4px) rotate(-135deg); }

.body {
  display: grid; grid-template-columns: var(--body-cols); grid-template-areas: var(--body-areas);
  gap: 22px 24px; padding: var(--body-pad);
}
.body.has-thr { grid-template-areas: var(--body-areas-thr); }
.b-disp { grid-area: disp; display: flex; flex-direction: column; gap: 6px; }
.b-disp > .kicker { color: var(--m-text); }
.asks { font-size: 13.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
/* SPEC §7.2 "Update to: <earlier claim>", set like the asks line it follows. */
.upd { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.upd-link {
  color: var(--navy); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--rule-link); text-underline-offset: 3px;
}
a.upd-link:hover { color: var(--navy); text-decoration-color: var(--green); }
.upd-id { font-weight: 500; }
.b-read { grid-area: read; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.read-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.read-row {
  display: grid; grid-template-columns: var(--read-cols); gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.read-d { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--navy); padding-top: 2px; }
.read-t { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.no-read { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.b-act { grid-area: act; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Validation question: white, rounded, with a mechanism-coloured left accent. */
.panel {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-panel); padding: 14px 16px 14px 19px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 4px 0 0 var(--m-fill), 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px -16px rgba(15, 23, 42, .22);
}
/* Conditional issue language keeps its dashed edge, in the mechanism hue. Its left padding
   lines its text up with the validation panel above (1.5px + 18.5px = 1px + 19px). */
.panel.dashed {
  background: transparent; border: 1.5px dashed var(--m-line); gap: 8px; padding-left: 18.5px; box-shadow: none;
}
/* Awareness only: a confident resolution at full weight, in the indigo tint with an indigo accent. */
.panel.aware { gap: 8px; background: var(--m-tint); border-color: var(--m-edge); }
.panel-why { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m-text); }
.panel-q { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.panel-f { font-size: 12px; color: var(--muted); }
.panel-lead { font-size: 13px; line-height: 1.45; color: var(--muted); }
.panel-issue {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.5; font-style: italic; color: var(--ink); text-wrap: pretty;
}
.copy-btn {
  flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--rule-input); background: #fff; color: var(--navy);
  font-size: 12px; font-weight: 500; border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.copy-btn:hover { border-color: var(--m-fill); color: var(--m-text); }
.copy-btn.on { border-color: var(--m-edge); background: var(--m-tint); color: var(--m-text); }
/* "Copied": a small check in the mechanism text shade. */
.copy-mark {
  width: 5px; height: 9px; border: solid var(--m-text); border-width: 0 2px 2px 0; border-radius: 0 0 1px 0;
  transform: translateY(-1px) rotate(45deg);
}
.b-src { grid-area: src; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.src-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.corrob { font-size: 12.5px; font-weight: 500; color: var(--navy); }
.src-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.src-row {
  display: grid; grid-template-columns: var(--src-cols); gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.src-k { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.src-pub { font-size: 13px; font-weight: 600; color: var(--navy); }
.src-cls { font-size: 12px; color: var(--muted); }
.src-link {
  font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-link); text-underline-offset: 3px; text-wrap: pretty;
  overflow-wrap: anywhere;
}
a.src-link:hover { color: var(--ink); text-decoration-color: var(--green); }
.src-link.nolink { text-decoration: none; }
.b-foot {
  grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.perma { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.perma-link {
  font-size: 13px; font-weight: 500; color: var(--navy); text-underline-offset: 3px; text-decoration-color: var(--rule-link);
}
.perma-link:hover { text-decoration-color: var(--green); }
.email-btn {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; text-decoration: none;
}
.bf-note { flex-basis: 100%; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.empty {
  padding: var(--sec-pad); display: grid; grid-template-columns: var(--empty-cols); gap: 18px 40px;
  background: var(--quiet);
}
.empty-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.empty-l .quiet-sig { margin-bottom: 2px; }
.empty-l .text-btn { align-self: flex-start; }
.empty-t { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--navy); }
.empty-b { font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.empty-r {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 14px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-panel);
}
.last-btn {
  text-align: left; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px;
  display: flex; flex-direction: column; gap: 4px; font: inherit; color: inherit;
}
.last-when { font-size: 12.5px; color: var(--muted); }
.last-mech { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: var(--m-text); }
.last-claim {
  font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-link); text-underline-offset: 3px;
}
.last-btn:hover .last-claim { text-decoration-color: var(--green); }

/* ---------------------------------------------------------------------------- about */

.about {
  padding: var(--about-pad); display: flex; flex-direction: column; gap: 40px;
}
.about-lead { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.about-h {
  font-family: var(--serif); font-size: var(--about-h); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--navy); text-wrap: balance;
}
.about-h::after { width: 48px; margin-top: 14px; }
.about-p { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.about-sec {
  display: grid; grid-template-columns: var(--about-cols); gap: 10px 40px; border-top: 1px solid var(--rule); padding-top: 24px;
}
.prose {
  display: flex; flex-direction: column; gap: 12px; max-width: 680px; font-size: 15px; line-height: 1.6; color: var(--ink);
}
.prose p, .prose-p { text-wrap: pretty; }
.prose-p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.tests { display: flex; flex-direction: column; max-width: 680px; }
.test-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.test-row:first-child { padding-top: 0; border-top: 0; }
.test-row:last-child { padding-bottom: 0; }
.test-t { display: flex; flex-direction: column; gap: 3px; }
.test-h { font-size: 15px; font-weight: 600; color: var(--navy); }
.test-b { font-size: 14.5px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.about-col { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.mech-grid { display: grid; grid-template-columns: var(--mech-cols); gap: 10px; }
.mech-cell {
  background: var(--m-tint); border: 1px solid var(--m-edge); border-radius: var(--r-panel);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.mech-cell .mech { background: #fff; }
.mech-about { font-size: 14px; line-height: 1.5; color: var(--ink); }
.lives { display: flex; flex-direction: column; max-width: 680px; }
.live-row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0;
  border-top: 1px solid var(--rule-soft); text-decoration: none;
}
.live-row:first-child { padding-top: 0; border-top: 0; }
.live-row:last-child { padding-bottom: 0; }
.live-k {
  font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule-link);
}
.live-row:hover .live-k { text-decoration-color: var(--green); }
.live-v { font-size: 14.5px; line-height: 1.5; color: var(--ink); }

/* ---------------------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .done-btn:hover, .export-btn:hover, .email-btn:hover, .arch-link:hover { transform: none; }
}

/* ---------------------------------------------------------------------------- print */

@page { margin: 14mm 12mm; }

@media print {
  body, .rs { background: #fff; }
  .nav, .fbar, .copy-btn, .email-btn, .scrim, .skip, .row-tog, .mast-wave { display: none !important; }
  .mast-in { padding-bottom: 16px; }
  :focus-visible { outline: none; }
  .card, .arch-link, .panel { box-shadow: none !important; }
  .panel:not(.dashed) { border-left: 4px solid var(--m-fill); padding-left: 16px; }
  .item:hover::before { background: transparent; }
  .item.open::before { background: var(--m-fill); }
  /* Paper keeps the addresses: source URLs follow their headlines; the permalink prints in full. */
  a.src-link[href^="https:"]::after {
    content: " " attr(href); font-family: var(--sans); font-size: 11px; color: var(--muted);
    overflow-wrap: anywhere;
  }
  .perma-link { overflow-wrap: anywhere; }
  .row:hover { background: inherit; }
  .row { cursor: auto; }
  .item { break-inside: avoid; }
  .item.open { break-inside: auto; }
  .row, .panel, .read-row, .src-row, .sec-head, .month-head { break-inside: avoid; }
  .sec-head, .month-head { break-after: avoid; }
  a { text-decoration-color: var(--rule-link); }
}