:root {
  --tracker-red: #b00000;
  --tracker-ink: #0b0b0b;
  --tracker-paper: #f3f0e8;
  --tracker-panel: #fffef9;
  --tracker-muted: #615d55;
  --tracker-rule: #aaa499;
  --tracker-yellow: #ffd400;
  --tracker-green: #176426;
  --tracker-amber: #8b5500;
  --tracker-blue: #14456b;
}

body { background-color: var(--tracker-paper); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.tracker-header {
  color: white;
  background: #111;
  border-top: 8px solid var(--tracker-red);
  border-bottom: 4px solid var(--tracker-red);
}

.tracker-header .masthead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 5vw, 64px);
  align-items: center;
  min-height: 150px;
  padding-block: 26px;
}

.tracker-brand {
  display: inline-flex;
  border: 3px solid white;
  box-shadow: 6px 6px 0 var(--tracker-red);
  transform: skew(-4deg);
  font: 900 clamp(32px, 5vw, 58px)/.9 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: -.045em;
}

a.tracker-brand { color: white; text-decoration: none; }
.tracker-brand span,
.tracker-brand b { padding: .14em .12em .09em; }
.tracker-brand b { background: var(--tracker-red); }

.tracker-title {
  margin: 14px 0 4px;
  font: 800 clamp(13px, 1.6vw, 17px)/1.2 Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.dek { margin: 0; color: #d2d2d2; font: 700 15px/1.45 Arial, sans-serif; }
.tracker-main { padding-block: clamp(26px, 5vw, 58px); }

/* ---------- the score ---------- */

.scoreboard {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 4px solid var(--tracker-ink);
}

.headline strong {
  display: block;
  color: var(--tracker-red);
  font: 900 clamp(86px, 17vw, 190px)/.82 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: -.05em;
}

.headline-label {
  margin: 10px 0 0;
  font: 700 clamp(16px, 2vw, 21px)/1.28 "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.headline-label b { color: var(--tracker-red); }

.headline-sub {
  margin: 8px 0 0;
  color: var(--tracker-muted);
  font: 400 13px/1.5 Georgia, serif;
}

.side-figures {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 2px solid var(--tracker-ink);
}

.side-figures > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--tracker-rule);
}

.side-figures dt {
  font: 800 11px/1.3 Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.side-figures dd {
  grid-row: span 2;
  margin: 0;
  font: 900 clamp(30px, 4vw, 44px)/1 "Arial Narrow", Arial, sans-serif;
}

.side-figures p {
  grid-column: 1;
  margin: 0;
  color: var(--tracker-muted);
  font: 400 12px/1.4 Georgia, serif;
}

/* ---------- lag chart ---------- */

.lag { padding: 26px 0; border-bottom: 4px solid var(--tracker-ink); }

.lag h2,
.ledger-heading h2,
.methodology h2 {
  margin: 0;
  font: 900 clamp(20px, 2.6vw, 29px)/1.1 "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.section-note {
  max-width: 62ch;
  margin: 6px 0 18px;
  color: var(--tracker-muted);
  font: 400 14px/1.55 Georgia, serif;
}

.lag-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }

.lag-row {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr 34px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 3px 6px;
  margin-left: -6px;
  border: 2px solid transparent;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .08s ease, border-color .08s ease;
}

.lag-row:hover:not(:disabled) { border-color: var(--tracker-rule); background: var(--tracker-panel); }
.lag-row:disabled { cursor: default; opacity: .45; }
.lag-row.is-active { border-color: var(--tracker-ink); background: var(--tracker-panel); }
.lag-row.is-active .lag-label { text-decoration: underline; text-underline-offset: 3px; }

.lag-label { font: 700 12px/1.3 Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; }

/* Two readings of one clock: the thicker bar is what came true, the thinner
   one underneath is what is still pending. They share a scale, because the
   gap between them is the finding. */
.lag-tracks { display: grid; gap: 2px; }

.lag-track {
  background: repeating-linear-gradient(90deg, #e4e0d6 0 1px, transparent 1px 10px);
  border-bottom: 1px solid var(--tracker-rule);
}

.track-hit { height: 18px; }
.track-wait { height: 9px; }

/* No background here: the two fills own their colour, and an element+class
   selector would out-specify the single class that sets it. */
.lag-track b { display: block; height: 100%; min-width: 2px; }
.lag-track b.is-empty { min-width: 0; }
.fill-hit { background: var(--tracker-green); }
.fill-wait { background: var(--tracker-amber); }

.lag-count {
  display: grid;
  gap: 2px;
  font: 900 14px/1 "Arial Narrow", Arial, sans-serif;
  text-align: right;
}

.count-hit { color: var(--tracker-green); }
.count-wait { color: var(--tracker-amber); font-size: 12px; }

.lag-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--tracker-muted);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lag-legend .key { width: 14px; height: 10px; }
.lag-legend .key-hit { background: var(--tracker-green); }
.lag-legend .key-wait { background: var(--tracker-amber); margin-left: 10px; }

/* ---------- verdict stamps ---------- */

.verdict-bar { padding: 22px 0 4px; }

.stamps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.stamp {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 2px solid var(--tracker-ink);
  background: var(--tracker-panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}

.stamp b { font: 900 30px/1 "Arial Narrow", Arial, sans-serif; }
.stamp span { font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.stamp:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tracker-rule); }
.stamp.is-active { color: white; background: var(--tracker-ink); box-shadow: 4px 4px 0 var(--tracker-red); }

.stamp-hit b { color: var(--tracker-green); }
.stamp-miss b { color: var(--tracker-red); }
.stamp-waiting b { color: var(--tracker-amber); }
.stamp-unfalsifiable b { color: var(--tracker-blue); }
.stamp.is-active b { color: var(--tracker-yellow); }

/* ---------- filters ---------- */

.ledger { padding-top: 30px; }

.ledger-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--tracker-ink);
}

.result-count { margin: 0; color: var(--tracker-muted); font: 700 12px/1.3 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px 0 22px;
}

.filters label { display: grid; gap: 4px; }
.filters span { font: 800 10px/1.3 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.filter-search { flex: 1 1 240px; }

.filters input,
.filters select {
  padding: 8px 10px;
  border: 2px solid var(--tracker-ink);
  background: var(--tracker-panel);
  font: 400 14px/1.3 Georgia, serif;
  width: 100%;
}

.clear-button,
.show-more {
  padding: 9px 16px;
  border: 2px solid var(--tracker-ink);
  background: var(--tracker-ink);
  color: white;
  font: 800 11px/1.3 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.clear-button:hover, .show-more:hover { background: var(--tracker-red); border-color: var(--tracker-red); }
.show-more { display: block; width: 100%; margin-top: 22px; }
.show-more[hidden], [hidden] { display: none; }

/* ---------- cards ---------- */

.prediction-list { display: grid; gap: 16px; }

.card {
  padding: 18px 20px 16px;
  background: var(--tracker-panel);
  border: 1px solid var(--tracker-rule);
  border-left: 8px solid var(--tracker-rule);
}

.card-hit { border-left-color: var(--tracker-green); }
.card-miss { border-left-color: var(--tracker-red); }
.card-waiting { border-left-color: var(--tracker-amber); }
.card-unfalsifiable { border-left-color: var(--tracker-blue); }

.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.card-stamp {
  padding: 3px 9px 2px;
  border: 2px solid currentColor;
  transform: rotate(-1.5deg);
  font: 900 12px/1.25 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .1em;
}

.card-stamp.stamp-hit { color: var(--tracker-green); }
.card-stamp.stamp-miss { color: var(--tracker-red); }
.card-stamp.stamp-waiting { color: var(--tracker-amber); }
.card-stamp.stamp-unfalsifiable { color: var(--tracker-blue); }

.card-meta { flex: 1 1 220px; margin: 0; color: var(--tracker-muted); font: 400 12px/1.45 Georgia, serif; }

.card-topic {
  padding: 3px 9px 2px;
  border: 1px solid var(--tracker-rule);
  background: none;
  color: var(--tracker-muted);
  font: 700 10px/1.4 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .1s ease, border-color .1s ease;
}

.card-topic::before { content: "#"; opacity: .55; margin-right: 2px; }
.card-topic:hover { color: var(--tracker-ink); border-color: var(--tracker-ink); }

/* Not a control: it names this card, and nothing else in the corpus. */
.card-raw-topic {
  align-self: center;
  color: var(--tracker-muted);
  font: italic 400 12px/1.4 Georgia, serif;
}

.card-badge {
  padding: 3px 8px 2px;
  background: var(--tracker-ink);
  color: var(--tracker-yellow);
  font: 800 10px/1.4 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-badge.is-late { background: var(--tracker-red); color: white; }

.card h3 {
  margin: 10px 0 0;
  font: 700 clamp(17px, 2vw, 21px)/1.25 "Arial Narrow", Arial, sans-serif;
  letter-spacing: -.005em;
}

.card-verdict { margin: 8px 0 0; font: 400 15px/1.55 Georgia, serif; }

.card-catch {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--tracker-yellow);
  background: #fdf8e2;
  font: 400 14px/1.5 Georgia, serif;
}

.card-catch b { font: 800 10px/1.4 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--tracker-rule);
}

.card-foot summary,
.card-link {
  font: 700 11px/1.4 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--tracker-ink);
}

.card-link { text-underline-offset: 3px; }

.card-quote, .card-receipts { flex: 0 0 auto; }
.card-quote[open], .card-receipts[open] { flex: 1 1 100%; }

.card-quote blockquote {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--tracker-rule);
  color: var(--tracker-muted);
  font: italic 400 14px/1.55 Georgia, serif;
}

.receipt-body { display: grid; gap: 12px; margin-top: 10px; }
.receipt-body figure { margin: 0; padding: 10px 12px; background: #f7f4ea; border: 1px solid var(--tracker-rule); }
.receipt-body blockquote { margin: 0 0 6px; font: 400 13px/1.55 Georgia, serif; }
.receipt-body figcaption { display: grid; gap: 2px; font: 400 11px/1.4 Arial, sans-serif; }
.receipt-body figcaption span { color: var(--tracker-muted); }

.card-contested {
  flex: 1 1 100%;
  margin: 0;
  padding: 7px 10px;
  background: #fdf1f1;
  border-left: 3px solid var(--tracker-red);
  font: 400 13px/1.45 Georgia, serif;
}

/* The masthead boast. It is the headline now, the way the war cry is on the
   podcast: a white lead-in, the claim itself in yellow underneath, and the
   tracker's own name demoted to the line below. Rotating, and the way into
   the whole list. The markup keeps a written-in claim as the fallback for a
   reader whose snapshot or scripting never arrives. */
.boast {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.boast.is-turning { opacity: 0; transform: translateY(.16em); }
.boast:focus-visible { outline: 2px solid var(--tracker-yellow); outline-offset: 6px; }

.boast-lead {
  display: block;
  color: white;
  font: 900 clamp(14px, 1.8vw, 23px)/1.1 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  /* One line, always: a wrap here moves everything under it. */
  overflow: hidden;
  white-space: nowrap;
}

.boast-quote {
  display: block;
  color: var(--tracker-yellow);
  font: 900 clamp(22px, 3.3vw, 42px)/1.02 "Arial Narrow", Arial, sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
  /* No height here on purpose. The masthead must not move as the quotes turn
     over, and how many lines one needs depends on a fluid column and a
     clamped font size, so app.js measures the tallest in the rotation and
     pins the box to it. Until that runs the box holds the one short claim
     written into the markup. */
  overflow: hidden;
}

.boast-who {
  display: block;
  margin-top: 6px;
  color: #b3ada0;
  font: 400 11px/1.4 Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
  white-space: nowrap;
}
.boast-who::after { content: " · see every one"; color: var(--tracker-yellow); }
.boast:hover .boast-quote,
.boast:focus-visible .boast-quote,
.boast:hover .boast-who::after {
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .1em;
}

/* ---------- the machine note ---------- */

.machine-note {
  margin-top: 30px;
  padding: 20px clamp(16px, 3vw, 26px);
  border: 3px solid var(--tracker-ink);
  border-left-width: 10px;
  background: var(--tracker-panel);
}

.machine-note h2 {
  margin: 0 0 10px;
  font: 900 clamp(18px, 2.4vw, 26px)/1.1 "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.machine-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px 30px;
}
.machine-body p { margin: 0; font: 400 14px/1.6 Georgia, serif; }
.machine-body b { font-weight: 700; }

/* ---------- every accuracy claim ---------- */

.boasts {
  width: min(760px, calc(100vw - 28px));
  max-height: min(84vh, 920px);
  padding: 0;
  border: 3px solid var(--tracker-ink);
  background: var(--tracker-panel);
  color: var(--tracker-ink);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .32);
}
.boasts[open] { display: flex; flex-direction: column; }
.boasts::backdrop { background: rgba(9, 9, 9, .74); }

.boasts-dismiss { position: absolute; top: 10px; right: 12px; margin: 0; }
.boasts-dismiss button {
  width: 34px; height: 34px;
  border: 2px solid var(--tracker-rule);
  background: none;
  color: var(--tracker-ink);
  font: 700 20px/1 Arial, sans-serif;
  cursor: pointer;
}
.boasts-dismiss button:hover { border-color: var(--tracker-ink); background: var(--tracker-paper); }

.boasts h2 {
  margin: 22px clamp(18px, 4vw, 28px) 0;
  padding-right: 44px;
  font: 900 clamp(20px, 2.6vw, 29px)/1.1 "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.boasts-note {
  margin: 8px clamp(18px, 4vw, 28px) 0;
  max-width: 62ch;
  color: var(--tracker-muted);
  font: 400 14px/1.55 Georgia, serif;
}

.boasts-body {
  overflow-y: auto;
  display: grid;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 28px) 26px;
}

.boasts-body h3 {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--tracker-rule);
  color: var(--tracker-red);
  font: 800 12px/1.3 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.boast-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.boast-list blockquote { margin: 0; font: 400 15px/1.5 Georgia, serif; }
.boast-list blockquote::before { content: "\201C"; }
.boast-list blockquote::after { content: "\201D"; }

.boast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin: 4px 0 0;
  font: 700 12px/1.4 Arial, sans-serif;
}
.boast-meta b { color: var(--tracker-red); }
.boast-meta a { color: var(--tracker-ink); }
.boast-meta span { color: var(--tracker-muted); font-weight: 400; }

/* ---------- methodology + footer ---------- */

.methodology { margin-top: 44px; padding-top: 24px; border-top: 4px solid var(--tracker-ink); }

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px 30px;
  margin-top: 16px;
}

.method-grid p { margin: 0; font: 400 14px/1.6 Georgia, serif; }
.method-grid b { font-weight: 700; }

.snapshot-time { margin-top: 20px; color: var(--tracker-muted); font: 400 12px/1.5 Georgia, serif; }

.error-box {
  padding: 14px 16px;
  border: 2px solid var(--tracker-red);
  background: #fdf1f1;
  font: 700 14px/1.5 Arial, sans-serif;
}

.tracker-footer {
  margin-top: 50px;
  padding: 22px 0;
  background: #111;
  color: #cfcfcf;
  border-top: 6px solid var(--tracker-red);
}

.tracker-footer .shell { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.tracker-footer span { font: 900 20px/1 Impact, "Arial Narrow Bold", sans-serif; color: white; }
.tracker-footer b { color: var(--tracker-red); }
.tracker-footer p { margin: 0; font: 400 12px/1.5 Georgia, serif; }
.tracker-footer a { color: var(--tracker-yellow); }

@media (max-width: 860px) {
  .scoreboard { grid-template-columns: 1fr; }
  /* Same hint, short enough to stay on the one line a phone column allows. */
  .boast-who::after { content: " · see all"; }
  .lag-row { grid-template-columns: minmax(80px, 110px) 1fr 30px; }
}

/* The boast is the headline now, and beside the logo it has a phone column
   barely wide enough for three words of it. Below this it gets the full one. */
@media (max-width: 620px) {
  .tracker-header .masthead { grid-template-columns: 1fr; gap: 20px; }
}