/* chat-drift-sentinel dashboard v2 — one narrative page per scenario.
   Light theme (client-facing), hand-written, no CDN, no external fonts.
   Badge policy: only problems get color (red = stop/stale, amber = watch);
   healthy states stay quiet, and chart ink is neutral so that red and amber
   never compete with decoration. Mobile-first single column at <=520px. */
:root {
  color-scheme: light;

  /* surfaces and ink: one warm neutral family, four steps each */
  --surface-page: #faf9f7;
  --surface-card: #ffffff;
  --surface-sunken: #f4f3f0;
  --line: #e7e5e0;
  --line-strong: #d6d3cc;
  --text-primary: #171614;
  --text-secondary: #55534e;
  --text-muted: #8b8880;

  /* status color, reserved for severity: nothing decorative may use these */
  --red-bg: #fbe8e7; --red-fg: #a8231f;
  --amber-bg: #fbf0d8; --amber-fg: #7d5410;

  /* structural color: what KIND of block this is, never how bad it is.
     accent  = structure and metadata (section labels, nav, identifiers)
     instruct= what the reader should do next
     example = a transcript or sample, never an instruction */
  --accent: #0d6d78; --accent-bg: #ecf4f5; --accent-line: #bcd8db;
  --instruct: #2f5b8e; --instruct-bg: #eef3f9; --instruct-line: #c3d3e8;
  --example: #a35d0c; --example-bg: #fdf6ec; --example-line: #ecdcc3;

  /* direction of travel: conventional good / flat / bad */
  --good: #1a7a55; --good-bg: #e9f3ee;
  --flat: #8b8880;

  /* chart ink: neutral by policy. Series are told apart by weight and
     dash pattern (mirrored in the legend), not by hue. */
  --ink-1: #171614;   /* the measurement being argued for */
  --ink-2: #6f6b63;   /* comparator */
  --ink-3: #a5a199;   /* truth overlay / annotation */
  --band: rgba(23, 22, 20, 0.09);

  /* one type scale, seven steps, used everywhere */
  --t-hero: 3.5rem;
  --t-h1: 1.75rem;
  --t-h2: 1.1875rem;
  --t-h3: 0.9375rem;
  --t-base: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;
  --t-eyebrow: 0.6875rem;

  /* one spacing scale */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;

  --radius: 10px;
  --measure: 92ch;
  --page: 1080px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Navy Ledger identity: additive tokens for the hero band and the story
     ledger rows only. Deliberately NOT a replacement for --accent (teal,
     the packet's own three-way structural color) or any severity token —
     this is chrome, not a re-theme of the whole page. */
  --nl-ink: #1d3557;
  --nl-gold: #b8863b;
  --nl-sky: #7fa8cc;
  --nl-rule: #d9e4f0;
  --nl-soft: #f5f8fb;
  --nl-warm: #fbf6ec;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--t-base)/1.6 var(--sans);
  padding: 0;
}
a { color: var(--text-primary); text-decoration-color: var(--line-strong);
  text-underline-offset: 2px; }
a:hover { color: var(--text-primary); text-decoration-color: var(--text-muted); }

main { max-width: var(--page); margin: 0 auto; padding: 0 var(--s5) var(--s8); }

/* ---------------- Blue Camel site bar: the way back out --------------
   Visitors land here from an outbound link with no other route to the
   business. Hard coded hex, not the dashboard tokens, and on purpose: this
   is bluecamelconsulting.com chrome (ink #1d3557, gold #b8863b) sitting
   above the demo's own bar, so the two read as site and tool rather than as
   two mastheads. It scrolls away; the demo bar below it stays sticky. */
.sitebar { background: #1d3557; }
.sitebar .inner {
  max-width: var(--page); margin: 0 auto;
  padding: 0.5rem var(--s5);
  display: flex; align-items: center; gap: var(--s2) var(--s5);
  flex-wrap: wrap;
}
.sitebar .mark {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: #ffffff; text-decoration: none;
  font: 600 var(--t-xs)/1.6 var(--sans);
  text-transform: uppercase; letter-spacing: 0.09em; white-space: nowrap;
}
.sitebar .mark::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: #b8863b; transform: rotate(45deg);
}
.sitebar .mark:hover { color: #ffffff; text-decoration: underline; }
.sitebar nav {
  margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
}
.sitebar nav a {
  color: #cfe0f2; text-decoration: none; white-space: nowrap;
  font: 400 var(--t-xs)/1.6 var(--sans);
}
.sitebar nav a:hover { color: #ffffff; text-decoration: underline; }

/* ---------------- top bar: wayfinding, quiet ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(29, 53, 87, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(217, 228, 240, 0.25);
}
.topbar .inner {
  max-width: var(--page); margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex; align-items: center; gap: var(--s4);
}
.topbar .brand { font-size: var(--t-sm); font-weight: 600;
  min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.topbar .brand span { color: var(--accent); font-weight: 400;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.02em; }
.topbar .brand span { color: var(--text-muted); font-weight: 400; }
.topbar nav { margin-left: auto; display: flex; gap: var(--s1);
  align-items: center; flex: none; }
.topbar nav a {
  font: 500 var(--t-xs)/1 var(--mono); letter-spacing: 0.02em;
  color: var(--text-secondary); text-decoration: none;
  padding: 0.5rem 0.55rem; border-radius: 6px; min-width: 2.1rem;
  text-align: center;
}
.topbar nav a:hover { background: var(--surface-sunken); }
.topbar nav a[aria-current="page"] {
  background: var(--text-primary); color: var(--surface-card);
}
.topbar nav a.wide { min-width: 0; }

/* ---------------- page head ---------------- */
header.page {
  max-width: var(--page); margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s5);
}
header.page h1 {
  font-size: var(--t-h1); line-height: 1.2; font-weight: 600;
  letter-spacing: -0.015em; max-width: 46ch;
}
header.page .code {
  font: var(--t-xs)/1.5 var(--mono); color: var(--text-muted);
  margin-top: var(--s3); letter-spacing: 0.01em;
}
header.page .blurb {
  margin-top: var(--s4); max-width: var(--measure);
  font-size: 1.0625rem; color: var(--text-secondary); text-wrap: pretty;
}
header.page .lookfor {
  margin-top: var(--s4); max-width: var(--measure);
  font-size: var(--t-sm); color: var(--text-muted); text-wrap: pretty;
}
header.page .lookfor b { color: var(--text-secondary); font-weight: 600; }

/* ---------------- direction of travel ---------------- */
/* A delta is an arrow plus a number: shape carries the direction, colour
   carries whether it is good news. Never colour alone. */
.delta { display: inline-flex; align-items: center; gap: 0.25rem;
  font: 600 var(--t-xs)/1 var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.delta.good { color: var(--good); }
.delta.bad { color: var(--red-fg); }
.delta.warn { color: var(--amber-fg); }
.delta.flat { color: var(--flat); }
.delta svg { flex: none; display: block; }
.pm { color: var(--text-muted); font: var(--t-xs)/1.4 var(--mono);
  white-space: nowrap; }

/* ---------------- small multiples ---------------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); margin-top: var(--s5); }
.tile { border: 1px solid var(--line); border-radius: 8px;
  padding: var(--s4); background: var(--surface-page); min-width: 0; }
.tile.bad { border-color: #ecccca; background: #fdf5f4; }
.tile.warn { border-color: #e9dcbd; background: #fdfaf2; }
.tile .tname { font-size: var(--t-sm); font-weight: 600; }
.tile .tid { font: var(--t-eyebrow)/1.6 var(--mono); color: var(--text-muted); }
.tile .tnum { display: flex; align-items: baseline; gap: 0.5rem;
  margin-top: var(--s2); flex-wrap: wrap; }
.tile .tnum .n { font-size: 1.75rem; font-weight: 600; line-height: 1.05;
  font-variant-numeric: tabular-nums; }
.tile .tspark { margin: var(--s3) 0 var(--s2); }
.tile .tspark svg, .tile .tshare svg { width: 100%; height: auto;
  display: block; }
.tile .tfoot { display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--text-muted); flex-wrap: wrap; }
.tile .tfoot .traffic { display: inline-flex; align-items: center;
  gap: 0.3rem; background: var(--accent-bg); color: var(--accent);
  border-radius: 4px; padding: 0.1rem 0.35rem;
  font: 600 var(--t-eyebrow)/1.6 var(--mono); letter-spacing: 0.04em; }
.tile .status { margin-top: var(--s3); }
.ratelist { margin-top: var(--s3); display: grid; gap: 0.35rem; }
.ratelist .rl { display: grid; grid-template-columns: 1fr auto;
  gap: var(--s2); align-items: baseline;
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); }
.ratelist .rl:last-child { border-bottom: 0; }
.ratelist .k { font-size: var(--t-xs); color: var(--text-secondary); }
.ratelist .v { font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; display: inline-flex;
  align-items: baseline; gap: 0.35rem; }
.ratelist .v.over { color: var(--red-fg); }
.ratelist .v.muted { font-weight: 400; font-size: var(--t-xs); }

/* element strip on the health card */
.elstrip { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s4); margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line); }
.elstrip .ek { font: 600 var(--t-eyebrow)/1.4 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); }
/* flex-wrap: the "cannot bound yet" muted label and its badge are two
   strings for the same state; unwrapped they force the narrow mobile
   column wider than the viewport instead of dropping the badge to its own
   line. */
.elstrip .ev { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.2rem 0.45rem; margin-top: 0.2rem; }
.elstrip .ev .n { font-size: 1.375rem; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.elstrip .ev .n.muted { font-size: var(--t-sm); font-weight: 400; }

/* ---------------- section rhythm ---------------- */
section.block { margin-top: var(--s8); scroll-margin-top: 4.5rem; }
section.block > .eyebrow {
  font: 600 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--nl-gold); margin-bottom: var(--s3);
}
section.block > h2 {
  font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.35; color: var(--nl-ink);
}
section.block > .caption {
  color: var(--text-secondary); font-size: var(--t-sm);
  max-width: var(--measure); margin-top: var(--s2);
}
h3.sub {
  font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.005em;
  margin: var(--s6) 0 var(--s2); color: var(--nl-ink);
}
h3.sub:first-of-type { margin-top: var(--s5); }

/* ---------------- info tips (tap targets, not hover) ------------------- */
button.info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface-card);
  color: var(--text-muted); font: 700 0.7rem/1 var(--sans);
  font-style: italic; cursor: pointer; vertical-align: 0.05em;
  margin-left: 0.4rem; padding: 0; flex: none;
}
/* 44px tap target without a 44px box */
button.info::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
button.info:hover { border-color: var(--text-muted); color: var(--text-secondary); }
button.info[aria-expanded="true"] {
  background: var(--text-primary); color: var(--surface-card);
  border-color: var(--text-primary);
}
.tipbox {
  display: none; background: var(--surface-sunken);
  border-left: 2px solid var(--line-strong);
  border-radius: 0 6px 6px 0; padding: var(--s3) var(--s4);
  margin: var(--s3) 0 0; font-size: var(--t-sm);
  color: var(--text-secondary); max-width: var(--measure);
  text-wrap: pretty;
}
.tipbox.open { display: block; }

/* ---------------- the hero: trustworthiness health card ---------------- */
.card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s6);
}
section.hero { margin-top: var(--s6); }
section.hero .card { border-color: var(--line-strong); padding: var(--s7) var(--s6); }
.hero-head { display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; }
.hero-head .eyebrow {
  font: 600 var(--t-eyebrow)/1 var(--mono); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
}
.hero-score {
  display: flex; align-items: flex-end; gap: var(--s5);
  flex-wrap: wrap; margin-top: var(--s4);
}
.hero-score .big {
  font-size: var(--t-hero); font-weight: 600; line-height: 0.92;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hero-score .of { color: var(--text-muted); font-size: var(--t-sm);
  margin-left: 0.4rem; letter-spacing: 0; }
.hero-aside { display: flex; gap: var(--s5); padding-bottom: 0.35rem; }
.hero-aside .k { font: var(--t-eyebrow)/1 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); }
.hero-aside .v { font-size: 1.25rem; font-weight: 600; margin-top: 0.3rem;
  font-variant-numeric: tabular-nums; }
.hero-aside .v.bad { color: var(--red-fg); }
.hero-aside .v.warn { color: var(--amber-fg); }
.verdict {
  margin-top: var(--s4); font-size: 1.125rem; line-height: 1.5;
  color: var(--text-primary); text-wrap: pretty;
}
.verdict b { font-weight: 600; }
.hero-rule { border: 0; border-top: 1px solid var(--line);
  margin: var(--s6) 0 0; }

/* ---------------- tables: rules, not boxes ---------------- */
.wrap { overflow-x: auto; }
table.hc, table.grid {
  border-collapse: collapse; width: 100%;
  font-size: var(--t-sm); margin: var(--s2) 0 0;
}
table.hc th, table.grid th {
  font: 600 var(--t-eyebrow)/1.3 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); background: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 var(--s3) var(--s2) 0; text-align: left; white-space: nowrap;
}
table.hc td, table.grid td {
  border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s3) var(--s3) 0; text-align: left;
  vertical-align: top; white-space: nowrap;
}
table.hc tr:last-child td, table.grid tr:last-child td { border-bottom: 0; }
table.hc td:last-child, table.grid td:last-child,
table.hc th:last-child, table.grid th:last-child { padding-right: 0; }
td.name, th.name { white-space: normal; }
td.seg, .segname { font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: -0.01em; color: var(--text-muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.total { font-weight: 600; }
/* status color is a mark on the number, never a filled cell */
td.red { color: var(--red-fg); font-weight: 600;
  box-shadow: inset -2px 0 0 var(--red-fg); }
td.amber { color: var(--amber-fg); font-weight: 600;
  box-shadow: inset -2px 0 0 var(--amber-fg); }
.muted, td.muted { color: var(--text-muted); font-weight: 400;
  font-size: var(--t-xs); }
.footnote {
  color: var(--text-muted); font-size: var(--t-xs); line-height: 1.55;
  max-width: var(--measure); margin-top: var(--s3); text-wrap: pretty;
}
.ci { display: block; color: var(--text-muted); font-size: var(--t-xs);
  font-weight: 400; margin-top: 0.1rem; }


/* ---------------- badges: only problems get one ---------------- */
.flag {
  display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px;
  font: 600 var(--t-eyebrow)/1.5 var(--mono); letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.flag.red { background: var(--red-bg); color: var(--red-fg); }
.flag.amber { background: var(--amber-bg); color: var(--amber-fg); }
.quiet { color: var(--text-muted); font-size: var(--t-xs); }

/* ---------------- charts ---------------- */
.chartwrap { width: 100%; margin-top: var(--s3); }
.chartwrap svg { width: 100%; height: auto; display: block; }
svg text { font: 10.5px var(--mono); fill: var(--text-muted); }
svg .axis { stroke: var(--line-strong); stroke-width: 1; }
svg .gridline { stroke: var(--line); stroke-width: 1; }
.legend {
  display: flex; gap: var(--s4); font-size: var(--t-xs);
  color: var(--text-secondary); margin-top: var(--s4); flex-wrap: wrap;
}
.legend span.item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend svg { flex: none; }
.scrollnote { display: none; font: var(--t-xs)/1 var(--mono);
  color: var(--text-muted); margin-top: var(--s2); }

/* ---------------- timeline ---------------- */
ul.timeline { list-style: none; padding: 0; margin-top: var(--s4); }
ul.timeline li {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s4);
  padding: var(--s3) 0; border-top: 1px solid var(--line);
  font-size: var(--t-sm); align-items: baseline;
}
ul.timeline li:first-child { border-top: 0; }
ul.timeline .day {
  font: var(--t-xs)/1.6 var(--mono); color: var(--text-muted);
  white-space: nowrap;
}
ul.timeline .what { color: var(--text-secondary); text-wrap: pretty; }
ul.timeline .what b { color: var(--text-primary); font-weight: 600; }
.allquiet { color: var(--text-muted); font-size: var(--t-sm);
  margin-top: var(--s4); }

/* ---------------- hand-off packet ---------------- */
/* Structural color does the work here: teal names the artifact, blue is the
   instruction, warm is a transcript. Severity stays red and amber. */
.tag { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 4px;
  font: 600 var(--t-eyebrow)/1.5 var(--mono); letter-spacing: 0.07em;
  text-transform: uppercase; white-space: nowrap; }
.tag.accent { background: var(--accent-bg); color: var(--accent); }
.tag.instruct { background: var(--instruct-bg); color: var(--instruct); }
.tag.example { background: var(--example-bg); color: var(--example); }
.tag.red { background: var(--red-bg); color: var(--red-fg); }
.tag.amber { background: var(--amber-bg); color: var(--amber-fg); }
.tag.plain { background: var(--surface-sunken); color: var(--text-secondary); }

.packet { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-card); overflow: hidden; margin-top: var(--s4); }
.packet-head { display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; background: var(--accent-bg);
  border-bottom: 1px solid var(--accent-line); padding: var(--s3) var(--s5);
  font: var(--t-xs)/1.6 var(--mono); color: var(--accent); }
.packet-head .id { color: var(--text-primary); font-weight: 600; }
.packet-head .right { margin-left: auto; }
.packet-body { padding: var(--s5); }
.headline { font-size: 1.125rem; line-height: 1.5; max-width: 74ch;
  text-wrap: pretty; }
.headline b { font-weight: 600; }
.headline .quiet { display: block; margin-top: var(--s2); }

.callout { border-left: 3px solid var(--instruct);
  background: var(--instruct-bg); border-radius: 0 8px 8px 0;
  padding: var(--s4) var(--s5); margin-top: var(--s5); }
.callout > .lbl { font: 600 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--instruct); }
.callout ol { margin: var(--s3) 0 0; padding-left: 1.2rem;
  font-size: var(--t-sm); color: var(--text-secondary);
  display: grid; gap: var(--s2); max-width: 80ch; }
.callout ol b { color: var(--text-primary); font-weight: 600; }
.callout ol code { font: var(--t-xs) var(--mono); }

.exgroup { margin-top: var(--s5); }
.exgroup .exhead { display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; font-size: var(--t-xs); color: var(--text-muted); }
.ex { border: 1px solid var(--line); border-radius: 8px; padding: var(--s4);
  margin-top: var(--s3); }
.ex.live { background: var(--example-bg); border-color: var(--example-line); }
.ex.control { background: var(--surface-page); }
.ex .q { font-weight: 600; font-size: var(--t-sm); }
.ex .a { color: var(--text-secondary); font-size: var(--t-sm);
  margin-top: 0.2rem; max-width: 82ch; text-wrap: pretty; }
.ex .meta { display: flex; gap: var(--s3); align-items: center;
  flex-wrap: wrap; margin-top: var(--s3);
  font: var(--t-xs)/1.6 var(--mono); color: var(--text-muted); }
.ex .why { font-size: var(--t-sm); color: var(--text-secondary);
  margin-top: var(--s2); max-width: 82ch; text-wrap: pretty; }
.ex .rationale { font-size: var(--t-sm); font-style: italic;
  color: var(--text-secondary); margin-top: var(--s2); max-width: 82ch;
  text-wrap: pretty; border-left: 2px solid var(--line); padding-left: var(--s3); }
.ex .rationale b { font-style: normal; color: var(--text-muted);
  font-weight: 600; margin-right: 0.3em; }
.docs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.docs code { font: var(--t-xs)/1.6 var(--mono);
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.2rem 0.45rem; color: var(--text-secondary); }
.stats { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s5);
  padding-top: var(--s4); border-top: 1px solid var(--line); }
.stats .k { font: var(--t-eyebrow)/1 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); }
.stats .v { font-size: 1.0625rem; font-weight: 600; margin-top: 0.3rem;
  font-variant-numeric: tabular-nums; }
.stats .v small { font-weight: 400; color: var(--text-muted);
  font-size: var(--t-xs); }
.dlrow { display: flex; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s5); }
button.dl {
  border: 1px solid var(--line-strong); background: var(--surface-card);
  color: var(--text-primary); padding: 0.6rem 0.9rem; border-radius: 8px;
  cursor: pointer; font: 500 var(--t-sm)/1 var(--sans); min-height: 44px;
}
button.dl:hover { background: var(--surface-sunken); }

/* ---------------- footer ---------------- */
footer {
  border-top: 1px solid var(--line); background: var(--surface-page);
  margin-top: var(--s8);
}
footer > div {
  max-width: var(--page); margin: 0 auto; padding: var(--s5);
  font: var(--t-xs)/1.6 var(--mono); color: var(--text-muted);
  max-width: var(--page);
}

/* ---------------- hub hero: the watched work, then the summary ------- */
/* Two columns on desktop, mockup first; one column on narrow screens with
   the mockup still first, because the drawing is the thing that explains
   the page fastest. CSS only, no images, no script. */
/* Navy Ledger hero band: full-bleed navy, centered content column via a
   calc() padding trick rather than an inner wrapper div, since the template
   has no such wrapper. --page is redefined to 100% under the 520px query,
   which collapses this to plain edge padding on mobile — no overflow risk. */
header.page.hero-hub {
  max-width: none; width: 100%; margin: 0;
  padding-top: var(--s7); padding-bottom: var(--s7);
  padding-left: max(var(--s5), calc(50% - var(--page) / 2));
  padding-right: max(var(--s5), calc(50% - var(--page) / 2));
  background: var(--nl-ink);
}
header.page.hero-hub .eyebrow {
  font: 600 var(--t-eyebrow)/1 var(--mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--nl-gold);
}
header.page.hero-hub h1 {
  font-family: var(--serif); color: #ffffff; max-width: 22ch;
  margin-top: var(--s3); font-size: clamp(1.75rem, 1.1rem + 3vw, 2.75rem);
}
/* The one disclosure on the page. It sits under the h1, above the fold, and
   is deliberately the only place the demo says any of this. On-navy, so it
   is plain light text rather than a boxed callout. */
header.page .disclosure {
  margin-top: var(--s4); max-width: var(--measure);
  font-size: var(--t-sm); color: var(--text-secondary); text-wrap: pretty;
}
header.page.hero-hub .disclosure { color: var(--nl-rule); }
header.page.hero-hub .code { color: var(--nl-sky); }
header.page.hero-hub .hh-copy .blurb { color: var(--nl-rule); }
header.page.hero-hub .phone-frame {
  box-shadow: 0 26px 60px rgba(16, 30, 50, 0.35);
  border-color: rgba(255, 255, 255, 0.18);
}
header.page.hero-hub .hh-cta {
  background: var(--nl-gold); color: var(--nl-ink); font-weight: 700;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 1.3rem;
}
header.page.hero-hub .hh-cta:hover { background: #cf9c4c; color: var(--nl-ink); }
.hh-grid { display: grid; gap: var(--s6); align-items: start;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.hh-grid { margin-top: var(--s5); }
.hh-copy .blurb { margin-top: var(--s4); max-width: 62ch;
  font-size: 1.0625rem; color: var(--text-secondary); text-wrap: pretty; }
.hh-copy .blurb:first-child { margin-top: 0; }
.hh-cta { display: inline-block; margin-top: var(--s5);
  background: var(--text-primary); color: var(--surface-card);
  padding: 0.7rem 1.3rem; border-radius: 6px; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; }
.hh-cta:hover { background: var(--accent); color: var(--surface-card); }

/* the phone. It deliberately hangs out of the navy band by --phone-hang;
   the first content section after the hero must reserve that same distance
   (see the .hero-hub + main rule below) or the caption lands on the stories
   heading. One token, used in both places, keeps the two in step. */
:root { --phone-hang: 140px; }
.phone { margin: 0; }
header.page.hero-hub .phone {
  margin-bottom: calc(-1 * var(--phone-hang)); position: relative; z-index: 2; }
header.page.hero-hub { padding-bottom: var(--s6); }
header.page.hero-hub + main > section.block:first-child {
  margin-top: calc(var(--phone-hang) + var(--s6)); }
/* the caption hangs below the navy band, so it sits on the page surface:
   muted dark text, not the on-navy sky blue. */
header.page.hero-hub .phone figcaption { color: var(--text-muted); }
.phone-frame {
  border: 1px solid var(--line-strong); border-radius: 22px;
  background: var(--surface-card); padding: var(--s2);
  box-shadow: 0 1px 2px rgba(23, 22, 20, 0.05),
              0 12px 28px rgba(23, 22, 20, 0.07);
}
.phone-bar { display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-bottom: 1px solid var(--line); }
.phone-bar b { font-size: var(--t-sm); font-weight: 600; }
.phone-bar span { font: var(--t-eyebrow)/1.5 var(--mono);
  color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.phone-log { padding: var(--s4) var(--s3) var(--s4);
  display: grid; gap: var(--s3); background: var(--surface-page);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.bub { font-size: var(--t-sm); line-height: 1.5; padding: var(--s3) var(--s4);
  border-radius: 14px; max-width: 92%; text-wrap: pretty; }
.bub.user { justify-self: end; background: var(--instruct-bg);
  border: 1px solid var(--instruct-line); color: var(--text-primary);
  border-bottom-right-radius: 5px; }
.bub.bot { justify-self: start; background: var(--surface-card);
  border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bub .cite { display: block; margin-top: var(--s2);
  font: var(--t-eyebrow)/1.5 var(--mono); color: var(--accent);
  background: var(--accent-bg); border: 1px solid var(--accent-line);
  border-radius: 4px; padding: 0.2rem 0.4rem; }
.bub.pend { display: inline-flex; gap: 4px; align-items: center;
  padding: var(--s3) var(--s4); }
.bub.pend i { width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-muted); display: block; opacity: 0.55; }
.grade { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding-left: var(--s2); }
.grade em { font: 600 var(--t-eyebrow)/1.5 var(--mono); font-style: normal;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.grade span { font: 600 var(--t-eyebrow)/1.5 var(--mono);
  letter-spacing: 0.04em; color: var(--good); background: var(--good-bg);
  border-radius: 4px; padding: 0.2rem 0.45rem; }
.phone figcaption { margin-top: var(--s3); font-size: var(--t-xs);
  line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }

@media (max-width: 860px) {
  /* Single column: the copy sits in the row below the phone, so the hang
     would pull it up into the caption. No hang on narrow screens; the
     stories-section clearance follows the token automatically. */
  :root { --phone-hang: 0px; }
  .hh-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .phone { max-width: 340px; }
}

/* ---------------- hub ---------------- */
ul.hub { list-style: none; padding: 0; margin-top: var(--s5);
  display: grid; gap: var(--s3); }
ul.hub li { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-card); }
ul.hub a {
  display: block; padding: var(--s4) var(--s5); text-decoration: none;
}
ul.hub .row { display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; }
ul.hub .title { font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.01em; }
ul.hub .note { color: var(--accent); font: var(--t-xs)/1.6 var(--mono);
  margin-left: auto; }
ul.hub .stakes { display: block; margin-top: var(--s3);
  color: var(--text-secondary); font-size: var(--t-sm);
  text-wrap: pretty; }
ul.hub .impact { display: flex; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); align-items: center; }
ul.hub .impact em { font: 600 var(--t-eyebrow)/1.5 var(--mono);
  letter-spacing: 0.07em; text-transform: uppercase; font-style: normal;
  color: var(--text-muted); margin-right: var(--s1); }
ul.hub .impact span { font: 600 var(--t-eyebrow)/1.5 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber-fg); background: var(--amber-bg);
  padding: 0.2rem 0.45rem; border-radius: 4px; }
ul.hub li:hover { border-color: var(--accent-line);
  background: var(--accent-bg); }

/* -------- one page, six collapsible stories --------------------------- */
/* Every story opens in place. The old build gave each scenario its own page
   with its own masthead, so opening one read as leaving the company you had
   been reading about. */
/* minmax(0, 1fr), not the "auto" default: an implicit grid track sizes to
   the min-content of its widest item unless told it can shrink below that,
   and a dense chart's SVG (min-width: 560px, meant to scroll only inside its
   own .chartwrap.dense) was leaking that width all the way up through this
   grid, stretching the whole page past the viewport on mobile instead of
   staying contained in the chart's own horizontal scroll. */
/* gold-ruled ledger rows: the pill stack that used to be a card grid is now
   a flat rule-divided table. Same markup as before (row/stakes/impact are
   still siblings inside <summary>) — this is chrome only, laid out via CSS
   grid rather than added wrapper elements. minmax(0, ...) throughout: an
   "auto" or plain "1fr" track sizes to its widest child's min-content and
   leaked the page past the viewport at 390px before (cds PR #22). */
.stories { display: block; margin-top: var(--s5);
  border-top: 2px solid var(--nl-gold); border-bottom: 2px solid var(--nl-gold); }
details.story { border: 0; border-bottom: 1px solid var(--nl-rule);
  border-radius: 0; background: none; position: relative; }
details.story::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amber-fg, #9a651c); opacity: 1;
}
details.story[data-scenario="S0"]::before { background: var(--good, #2f755e); }
details.story:hover, details.story[open] { background: var(--nl-soft); }
/* All three tracks are fr-based on purpose: every summary is its own grid,
   and an auto track sizes to that row's own tag run, so the columns drifted
   row to row. Equal-width grids with identical fr tracks resolve identically,
   which is what lines the table up. */
details.story > summary { display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
  align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 3px);
  cursor: pointer; list-style: none; }
details.story > summary::-webkit-details-marker { display: none; }
details.story > summary::marker { content: ""; }
details.story .row { display: flex; flex-direction: column; gap: 0.15rem;
  min-width: 0; }
details.story .title { font-family: var(--serif); font-size: 1.1875rem;
  font-weight: 600; letter-spacing: -0.005em; color: var(--nl-ink); }
details.story .note { color: var(--text-muted); font: var(--t-xs)/1.4 var(--mono);
  margin-left: 0; }
details.story .stakes { display: block; margin-top: 0; min-width: 0;
  color: var(--text-secondary); font-size: var(--t-sm); text-wrap: pretty; }
details.story .impact { display: flex; gap: 0.35rem; flex-wrap: wrap;
  margin-top: 0; align-items: center; justify-content: flex-end;
  min-width: 0; }
details.story .impact em { font: 600 var(--t-eyebrow)/1.5 var(--mono);
  letter-spacing: 0.07em; text-transform: uppercase; font-style: normal;
  color: var(--text-muted); margin-right: var(--s1); }
/* the tone pill: watch (amber) by default, good (green) for the quiet
   baseline month — the only two tones the underlying data actually
   distinguishes (stakes_impact: ["Baseline"] vs everything else). */
details.story .impact span { font: 600 var(--t-eyebrow)/1.5 var(--mono);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--amber-fg); background: var(--amber-bg);
  padding: 0.2rem 0.55rem; border-radius: 999px; }
details.story[data-scenario="S0"] .impact span:not(.hint) {
  color: var(--good); background: var(--good-bg); }
details.story .impact span.hint { color: var(--text-muted);
  background: var(--nl-soft); border-radius: 999px; }
details.story[open] .impact span.hint { display: none; }
@media (max-width: 660px) {
  details.story > summary { grid-template-columns: minmax(0, 1fr);
    row-gap: 0.4rem; padding-left: var(--s5); }
  details.story .impact { justify-content: flex-start; }
}

.story-body { border-top: 1px solid var(--line);
  padding: 0 var(--s5) var(--s6); }
.story-head .code { font: var(--t-xs)/1.5 var(--mono); color: var(--text-muted);
  margin-top: var(--s5); letter-spacing: 0.01em; }
.story-head .blurb { margin-top: var(--s4); max-width: var(--measure);
  font-size: 1.0625rem; color: var(--text-secondary); text-wrap: pretty; }
.story-head .lookfor { margin-top: var(--s4); max-width: var(--measure);
  font-size: var(--t-sm); color: var(--text-muted); text-wrap: pretty; }
.story-head .lookfor b { color: var(--text-secondary); font-weight: 600; }
.story-main section.block:first-child { margin-top: var(--s6); }
.story-loading { margin-top: var(--s5); font: var(--t-xs)/1.5 var(--mono);
  color: var(--text-muted); }
.story-foot { margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--line); font: var(--t-xs)/1.6 var(--mono);
  color: var(--text-muted); }

@media (max-width: 520px) {
  details.story > summary { padding: var(--s4); }
  .story-body { padding: 0 var(--s4) var(--s5); }
}

/* ---------------- mobile: 390px, single column, no page scroll ------- */
@media (max-width: 520px) {
  :root { --t-hero: 3rem; --t-h1: 1.4375rem; --t-h2: 1.0625rem;
    --page: 100%; }
  main, header.page, .sitebar .inner, .topbar .inner, footer > div {
    padding-left: var(--s4); padding-right: var(--s4);
  }
  /* the wordmark takes the first row, the six links wrap under it */
  .sitebar nav { margin-left: 0; width: 100%; }
  header.page { padding-top: var(--s5); }
  section.block { margin-top: var(--s7); }
  section.hero .card, .card { padding: var(--s5) var(--s4); }
  .packet-body, .callout { padding: var(--s4); }
  .packet-head { padding: var(--s3) var(--s4); }
  .stats { gap: var(--s4); }
  .topbar .inner { flex-wrap: wrap; gap: var(--s2); }
  .topbar nav { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .hero-aside { gap: var(--s4); }

  /* the trust chart reflows to the column; dense charts keep a scroll */
  .chartwrap.dense { overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--s2); }
  .chartwrap.dense svg { min-width: 560px; }
  .chartwrap.dense + .scrollnote { display: block; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .elstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.hc, table.grid { font-size: var(--t-xs); }
  table.hc td, table.grid td { padding: var(--s3) var(--s2) var(--s3) 0; }
  /* the two surviving columns must fit the column, never scroll */
  table.hc td.name, table.hc td.seg, table.grid td.seg { max-width: 55vw;
    white-space: normal; overflow-wrap: anywhere; }
  table.hc td.muted, table.grid td.muted { white-space: normal; }
  ul.timeline li { grid-template-columns: 3.5rem 1fr; gap: var(--s3); }
  ul.hub .note { margin-left: 0; width: 100%; }
}

@media print {
  .sitebar, .topbar, button.info, button.dl { display: none; }
  body { background: #fff; }
  section.block { break-inside: avoid; }
}

/* ===================================================================== *
   Trustworthiness health card, v2 — dashboard context.

   Append to dashboard/style.css. Everything here is scoped to
   section.hero (the health card block) so no other section on the page
   changes. Pairs with the healthCardHTML() replacement in
   dashboard/healthcard-app.js.

   Policy held from the page: red and amber mean degraded and nothing
   else, healthy stays quiet, direction is an arrow plus its colour, no
   external requests, no emoji. New in v2: every cell carries a visible
   validity stamp, and the card wears the Blue Camel masthead so the
   dashboard hero and the printed deliverable read as one artifact.
 * ===================================================================== */
section.hero {
  /* brand ink, scoped: inside this card blue is the artifact's own colour,
     not the page's "instruction" blue. No instruction block lives here.
     Overriding --accent inside the card retints the two marks the shared
     renderer draws with it (the traffic chip and the share bar) without
     touching a single pixel outside section.hero. */
  --accent: #2f6690;
  --accent-bg: #eff4f8;
  --accent-line: #c4d5e2;
  --hc-accent: #2f6690;
  --hc-ink: #0f1419;
  --hc-ink2: #47535e;
  --hc-ink3: #78838e;
  --hc-rule: #e4e8ec;
  --hc-rule2: #c8d0d8;
  --hc-rule3: #eef1f4;
}
section.hero .card {
  border-color: var(--hc-rule2);
  border-radius: 4px;
  padding: var(--s5) var(--s6) var(--s5);
}

/* masthead: one heavy rule, one hairline. Annual-report device, and the
   same one the printed card opens with. */
section.hero .hc-mast {
  display: flex; align-items: baseline; gap: var(--s4);
  border-bottom: 2px solid var(--hc-ink); padding-bottom: var(--s2);
}
section.hero .hc-mast .brand {
  font: 600 var(--t-eyebrow)/1 var(--mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hc-ink);
}
section.hero .hc-mast .artifact {
  margin-left: auto; font: 600 var(--t-eyebrow)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hc-accent);
}
section.hero .hc-hair {
  border-top: 1px solid var(--hc-rule2); margin-top: 3px;
}
section.hero .hc-question {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  margin-top: var(--s4); max-width: 48ch;
}
section.hero .hc-meta {
  font: var(--t-eyebrow)/1.7 var(--mono); color: var(--hc-ink3);
  margin-top: var(--s1);
}

/* score band: score, launch, movement, month. Left to right is the
   reading order a buyer skimming for three seconds needs. */
section.hero .hero-score {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
  align-items: end; gap: var(--s6); margin-top: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--hc-rule);
}
section.hero .hero-score .big { letter-spacing: -0.035em; }
section.hero .hero-score .of { color: var(--hc-ink3); }
section.hero .hero-aside { gap: var(--s6); padding-bottom: 0.5rem; }
section.hero .hero-aside .k {
  font-weight: 600; letter-spacing: 0.11em; color: var(--hc-ink3);
}
section.hero .hero-aside .v {
  display: flex; align-items: center; gap: 0.3rem;
}
section.hero .hero-aside .q {
  font: var(--t-eyebrow)/1.4 var(--mono); color: var(--hc-ink3);
  margin-top: 0.15rem;
}
section.hero .hc-spark { justify-self: end; text-align: right; }
section.hero .hc-spark svg {
  display: block; width: 220px; height: 40px; margin-top: 0.4rem;
}
section.hero .hc-spark .k {
  font: 600 var(--t-eyebrow)/1 var(--mono); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--hc-ink3);
}
section.hero .hc-spark .q {
  font: var(--t-eyebrow)/1.4 var(--mono); color: var(--hc-ink3);
  margin-top: 0.2rem;
}
section.hero .verdict { color: var(--hc-ink2); margin-top: var(--s4); }
section.hero .verdict b { color: var(--hc-ink); }

/* element strip: score, movement, and how much of the corpus that
   number actually covers. */
section.hero .elstrip {
  border-top: 0; margin-top: var(--s5); padding-top: 0;
  gap: var(--s4) var(--s5);
}
section.hero .elstrip > div {
  border-top: 1px solid var(--hc-ink); padding-top: var(--s2);
}
section.hero .elstrip .ek { color: var(--hc-ink2); letter-spacing: 0.09em; }
section.hero .elstrip .ecover {
  font: var(--t-eyebrow)/1.5 var(--mono); color: var(--hc-ink3);
  margin-top: 0.15rem; letter-spacing: 0.02em;
}
section.hero .elstrip .ecover.part { color: var(--amber-fg); }

/* segment tiles: quiet borders, stamp row per tile */
section.hero .tiles { margin-top: var(--s5); }
section.hero .tile {
  border-radius: 4px; border-color: var(--hc-rule);
  background: var(--surface-card);
}
section.hero .tile.warn { border-color: #e9dcbd; background: #fdfaf2; }
section.hero .tile.bad { border-color: #ecccca; background: #fdf5f4; }
section.hero .tile .tname { letter-spacing: -0.005em; }
section.hero .tile .tid { color: var(--hc-ink3); }

/* validity marks: the mark IS the cell. A flagged cell becomes a band across
   the bottom of its tile; a current cell carries nothing at all, so the marks
   that appear are the only ones on the card. */
section.hero .tile { padding-bottom: 0; overflow: hidden; }
section.hero .band {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap;
  white-space: nowrap; width: calc(100% + 2rem); margin: 0 -1rem;
  padding: 0.22rem 1rem; font: 0.5625rem/1.7 var(--mono);
  letter-spacing: 0.05em; text-transform: uppercase;
}
/* which element, what its stamp says, what it would cost. Only the middle
   one is the validity mark, so only it wears the pill. */
section.hero .band .el { color: var(--hc-ink); font-weight: 600; flex: none; }
section.hero .band .state {
  color: var(--hc-ink); font-weight: 600; border-radius: 2px; flex: none;
  padding: 0 0.28rem; border: 1px solid rgba(15, 20, 25, 0.28);
  background: rgba(255, 255, 255, 0.6);
}
section.hero .band .cost { margin-left: auto; font-weight: 600;
  letter-spacing: 0; text-transform: none; }
section.hero .elstrip .ev .n.muted { white-space: nowrap; }
section.hero .band.inline { font-size: 0.5625rem; letter-spacing: 0.05em; }
section.hero .band.exp .el, section.hero .band.exp .cost { color: #fff; }
section.hero .band.exp .state {
  color: #fff; border-color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.14);
}
section.hero .band + .band { margin-top: 1px; }
section.hero .band.inline {
  display: inline-flex; width: auto; margin: 0; padding: 0.15rem 0.4rem;
  border-radius: 4px; font-weight: 600;
}
section.hero .band.wat {
  color: var(--amber-fg); background: var(--amber-bg);
  border-top: 1px solid #dcc38b;
}
section.hero .band.exp { color: #fff; background: var(--red-fg); }
section.hero .band.nb {
  color: var(--amber-fg); border-top: 1px solid #dcc38b;
  background: repeating-linear-gradient(135deg, #fff, #fff 4px,
    var(--amber-bg) 4px, var(--amber-bg) 8px);
}
section.hero .band.inline.wat, section.hero .band.inline.nb {
  border: 1px solid #dcc38b;
}
section.hero .hc-stamps {
  display: block; margin-top: var(--s3); padding-top: 0; border-top: 0;
}
section.hero .hc-stamps.none {
  font: var(--t-eyebrow)/1.6 var(--mono); color: var(--hc-ink3);
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.22rem 0 var(--s3);
}
section.hero .hc-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.1rem;
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hc-rule);
  font: var(--t-eyebrow)/1.5 var(--mono); color: var(--hc-ink3);
  letter-spacing: 0.02em;
}
section.hero .hc-legend .lb {
  font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--hc-ink2);
}
section.hero .hc-legend .it {
  display: inline-flex; align-items: center; gap: 0.35rem;
}
section.hero .footnote { max-width: 92ch; }
section.hero .hc-attrib {
  display: flex; flex-wrap: wrap; gap: 0.25rem var(--s6);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hc-rule); font: var(--t-xs)/1.5 var(--mono);
  color: var(--hc-ink2);
}
section.hero .hc-attrib span { white-space: nowrap; }
section.hero .hc-attrib .n {
  color: var(--hc-ink); font-weight: 600; margin-left: 0.35rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  section.hero .hero-score {
    grid-template-columns: minmax(0, 1fr); gap: var(--s4);
    align-items: start;
  }
  section.hero .hc-spark { justify-self: start; text-align: left; }
  section.hero .hc-spark svg { width: 100%; }
  section.hero .card { padding: var(--s5) var(--s4); }
}

/* The dashboard is a light-theme page and stays one: the dark variant is
   OPT-IN, applied only when the host sets data-theme="dark" on <html> (the
   room-projector case). It is deliberately not a prefers-color-scheme block,
   which would flip the card while every section around it stayed light. The
   card keeps its identity either way: same rules, same marks, ink and paper
   swapped. */
html[data-theme="dark"] section.hero {
  --hc-ink: #f2f5f7; --hc-ink2: #b9c2ca; --hc-ink3: #8b959e;
  --hc-rule: #2b3238; --hc-rule2: #3d464e; --hc-rule3: #232a30;
  --hc-accent: #7fb0d3;
}
html[data-theme="dark"] section.hero .card {
  background: #141a1f; border-color: var(--hc-rule2); color: var(--hc-ink);
}
html[data-theme="dark"] section.hero .tile { background: #181f25; }
html[data-theme="dark"] section.hero .tile.warn {
  border-color: #4a3d22; background: #221d12;
}
html[data-theme="dark"] section.hero .tile.bad {
  border-color: #4d2b29; background: #241615;
}
html[data-theme="dark"] section.hero .band.wat {
  color: #e0b567; background: #2a2113; border-top-color: #4a3d22;
}
html[data-theme="dark"] section.hero .band.nb {
  color: #e0b567; border-top-color: #4a3d22;
  background: repeating-linear-gradient(135deg, #141a1f, #141a1f 4px,
    #241d10 4px, #241d10 8px);
}
html[data-theme="dark"] section.hero .band.exp { color: #fff; background: #8f1e1a; }
html[data-theme="dark"] section.hero .band .el,
html[data-theme="dark"] section.hero .band .state { color: var(--hc-ink); }
html[data-theme="dark"] section.hero .band .state {
  border-color: rgba(242, 245, 247, 0.35); background: rgba(0, 0, 0, 0.25);
}

.hh-cta:focus-visible, details.story > summary:focus-visible {
  outline: 2px solid var(--nl-sky, #7fa8cc); outline-offset: -2px;
}