/**
 * Read Achilles — Trend Indicators board styles.
 *
 * Dark navy/gold theme. Mobile-first, no horizontal scroll at 320px,
 * WCAG AA contrast, 44px touch targets, reduced-motion support.
 *
 * Palette: --bg #0B0F17 · --card #131c2c · --gold #D29922 · --ink #F5F5F7
 *          --muted #8E95A2 · --green #3FB950 · --brick #C97070
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
.trends-page, .tr-board, [data-trends-module], #panel-trends {
  /* Dark-only board: native form controls render dark. */
  color-scheme: dark;
  --tr-bg: #0B0F17;
  --tr-card: #131c2c;
  --tr-panel: #101724;
  --tr-line: rgba(255, 255, 255, 0.09);
  --tr-gold: #D29922;
  --tr-gold-ink: #14100a;
  --tr-gold-dim: rgba(210, 153, 34, 0.14);
  --tr-ink: #F5F5F7;
  --tr-muted: #8E95A2;
  --tr-green: #3FB950;
  --tr-brick: #C97070;
  --tr-amber: #E8A33D;
  --tr-radius: 14px;
  --tr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tr-serif: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------ */
/* Page-level base (landing, drop, ledger)                             */
/* ------------------------------------------------------------------ */
.trends-page {
  font-family: var(--tr-font);
  background: var(--tr-bg);
  color: var(--tr-ink);
  line-height: 1.55;
}
.trends-page .dim { color: var(--tr-muted); }

/* Homepage tab panel reuses the trends landing design */
#panel-trends {
  font-family: var(--tr-font);
  color: var(--tr-ink);
  line-height: 1.55;
}
#panel-trends .dim { color: var(--tr-muted); }
#panel-trends .landing-hero h2 {
  font-family: var(--tr-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--tr-ink);
}
@media (min-width: 640px) { #panel-trends .landing-hero h2 { font-size: 52px; } }
#panel-trends .trends-signup {
  text-align: center;
  padding: 28px 20px;
  border-top: 1px solid var(--tr-line);
  margin-top: 8px;
}
#panel-trends .trends-signup h2 {
  font-family: var(--tr-serif);
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--tr-ink);
}

/* ------------------------------------------------------------------ */
/* Personal strip                                                      */
/* ------------------------------------------------------------------ */
[data-trends-personal-strip] {
  font-family: var(--tr-font);
  background: var(--tr-panel, #101724);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 22px;
  color: var(--tr-ink, #F5F5F7);
  font-size: 15px;
  line-height: 1.5;
}
[data-trends-personal-strip] b { color: var(--tr-gold, #D29922); font-weight: 700; }
.tr-strip-next { color: var(--tr-muted, #8E95A2); font-size: 13.5px; display: block; margin-top: 2px; }

/* ---- Personal strip: 3-cell grid (static + JS render share this) ---- */
.strip-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .strip-grid { grid-template-columns: repeat(3, 1fr); }
}
.strip-k {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-muted, #8E95A2);
  margin-bottom: 2px;
}
.strip-v { font-size: 15px; color: var(--tr-ink, #F5F5F7); }
.strip-v a { color: var(--tr-gold, #D29922); font-weight: 700; }

/* No-JS guidance (shown when JavaScript is disabled). */
.noscript-note {
  background: #1a2333;
  border: 1px solid rgba(210, 153, 34, 0.5);
  border-radius: 10px;
  color: var(--tr-ink, #F5F5F7);
  font-size: 14px;
  margin: 12px auto;
  max-width: 1100px;
  padding: 12px 16px;
}

/* Live picks-close countdown inside each interactive module. */
.tr-countdown {
  font-size: 13.5px;
  color: var(--tr-muted);
  margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
}
.tr-reset-btn { margin-top: 12px; }

/* Horizontal-scroll wrappers: tables scroll instead of breaking layout. */
.ledger-table-wrap,
.scenario-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ledger-table { min-width: 620px; }
.scenario-table { min-width: 480px; }

/* ------------------------------------------------------------------ */
/* Module card                                                         */
/* ------------------------------------------------------------------ */
.tr-mod {
  font-family: var(--tr-font);
  /* Tracks 1+2: the module is a plain wrapper now — Card A / Card B carry
     the surfaces (gold solid / dashed slate), separated by a 24px gap. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 22px;
  color: var(--tr-ink);
  line-height: 1.55;
  min-width: 0; /* no horizontal scroll at 320px */
}

/* ---- Card A — the official record + vote (solid, gold border) ---- */
.tr-card-a {
  background: var(--tr-card);
  border: 2px solid var(--tr-gold);
  border-radius: var(--tr-radius);
  padding: 20px 18px;
}
@media (min-width: 640px) {
  .tr-card-a { padding: 26px; }
}

/* ---- Card B — the optional sandbox (recessed well, dashed slate) ---- */
.tr-card-b {
  margin-top: 24px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed rgba(142, 149, 162, 0.6);
  border-radius: var(--tr-radius);
  padding: 20px 18px;
}
@media (min-width: 640px) {
  .tr-card-b { padding: 22px 26px; }
}

/* ---- Further reading (McKinsey) — after Card B, plain block, NOT a card.
   Deliberately no gold border (Card A) and no dashed border (Card B), so it
   cannot be mistaken for the sealed record or the sandbox. ---- */
.tr-further-reading {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(142, 149, 162, 0.45);
}
.tr-further-reading .tr-fr-heading {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--tr-ink);
}
.tr-further-reading .tr-fr-explainer,
.tr-further-reading .tr-fr-disclaimer,
.tr-further-reading .tr-fr-honesty {
  font-size: 13.5px;
  color: var(--tr-muted);
  margin: 0 0 8px;
}
.tr-further-reading .tr-fr-disclaimer { font-style: italic; }
.tr-further-reading .tr-fr-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.tr-further-reading .tr-fr-list li { margin: 0 0 16px; }
.tr-further-reading .tr-fr-list li:last-child { margin-bottom: 0; }
.tr-further-reading .tr-fr-list a {
  font-weight: 600;
  color: var(--tr-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tr-further-reading .tr-fr-date {
  font-size: 13px;
  color: var(--tr-muted);
}
.tr-further-reading .tr-fr-list li p {
  font-size: 14px;
  margin: 4px 0 0;
  color: var(--tr-ink);
}
.tr-further-reading .tr-fr-list .tr-fr-frame {
  color: var(--tr-muted);
}

.tr-locked-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--tr-gold);
  border: 1.5px solid var(--tr-gold);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 0 10px;
  background: var(--tr-gold-dim);
}

.tr-meta-line {
  font-size: 13.5px;
  color: var(--tr-muted);
  margin: 0 0 16px;
}
.tr-meta-line b { color: var(--tr-ink); font-weight: 600; }

/* ---- Grading strip — always visible, never collapsed ---- */
.tr-grading-strip {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--tr-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
}
.tr-grading-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
  color: var(--tr-ink);
}
.tr-grading-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.tr-grade-pill {
  display: inline-block;
  font-size: 13.5px;
  border: 1px solid var(--tr-line);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.03);
}
.tr-grade-pill strong { letter-spacing: 0.06em; }
.tr-grade-accurate strong { color: var(--tr-green); }
.tr-grade-partial strong { color: var(--tr-amber); }
.tr-grade-wrong strong { color: var(--tr-brick); }

/* ---- Card B header ---- */
.tr-card-b-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #E8C97A;
  border: 1px dashed rgba(232, 201, 122, 0.6);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 10px;
}
.tr-card-b-instr { font-size: 14.5px; margin: 0 0 8px; }
.tr-card-b-disamb {
  font-size: 13px;
  color: var(--tr-muted);
  margin: 0 0 12px;
  font-weight: 600;
}

/* ---- No-JS banner (static fallback, spec §10.1) ---- */
.tr-nojs-banner {
  font-size: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(210, 153, 34, 0.6);
  border-radius: 10px;
  background: rgba(210, 153, 34, 0.06);
  margin: 16px 0;
}

.tr-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tr-gold);
  font-weight: 700;
}
.tr-headline {
  font-family: var(--tr-serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.25;
  color: var(--tr-ink);
}
@media (min-width: 640px) { .tr-headline { font-size: 30px; } }

.tr-claim { margin: 0 0 12px; font-size: 15.5px; }
/* H13: per-call editorial note (e.g. why a Quick Call has no picks buffer). */
.call-note { margin: 0 0 12px; font-size: 14px; color: var(--tr-muted); font-style: italic; }
.tr-claim-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tr-gold);
  border: 1px solid var(--tr-gold);
  border-radius: 999px;
  padding: 2px 10px;
  margin-right: 8px;
  vertical-align: 1px;
}

.tr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--tr-muted);
}
.tr-meta b { color: var(--tr-ink); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Concur / Object                                                     */
/* ------------------------------------------------------------------ */
.tr-pick-group { margin: 0 0 6px; }
.tr-pick-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tr-muted);
  margin: 0 0 8px;
}
.tr-pick-row { display: flex; gap: 10px; }
.tr-pick-btn {
  flex: 1 1 0;
  min-height: 48px;
  border-radius: 10px;
  border: 1.5px solid var(--tr-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--tr-ink);
  font-family: var(--tr-font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 12px;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
.tr-pick-btn:hover { border-color: rgba(210, 153, 34, 0.6); }
.tr-pick-btn:active { transform: scale(0.985); }
.tr-pick-btn[aria-pressed="true"] {
  border-color: var(--tr-gold);
  background: var(--tr-gold-dim);
  color: var(--tr-ink);
  box-shadow: inset 0 0 0 1px var(--tr-gold);
}
.tr-pick-btn[data-pick="concur"][aria-pressed="true"] { border-left: 4px solid var(--tr-green); }
.tr-pick-btn[data-pick="object"][aria-pressed="true"] { border-left: 4px solid var(--tr-brick); }
.tr-pick-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.tr-pick-note { font-size: 13px; color: var(--tr-muted); margin: 8px 0 0; min-height: 1.2em; }
.tr-pick-note.tr-attn { color: var(--tr-amber); font-weight: 600; }
/* Post-vote status pill (spec §2.2). */
.tr-pick-note.tr-status-pill {
  font-weight: 700;
  color: var(--tr-ink);
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid var(--tr-green);
  border-radius: 8px;
  padding: 8px 12px;
}
.tr-pick-sub { font-size: 13px; color: var(--tr-muted); margin: 6px 0 0; }

/* ------------------------------------------------------------------ */
/* Controls                                                            */
/* ------------------------------------------------------------------ */
.tr-controls {
  margin-top: 14px;
  border-top: 1px solid var(--tr-line);
  padding-top: 14px;
  display: grid;
  gap: 16px;
}
.tr-control label.tr-control-label,
.tr-checklist legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tr-ink);
  margin-bottom: 4px;
  padding: 0;
}
.tr-control output {
  font-variant-numeric: tabular-nums;
  color: var(--tr-gold);
  font-weight: 700;
  white-space: nowrap;
}

/* Range slider: 44px touch target, gold accent, custom webkit thumb. */
.tr-control input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--tr-gold);
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.tr-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tr-ink);
  border: 3px solid var(--tr-gold);
  margin-top: -11px;
  cursor: grab;
}
.tr-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--tr-gold) 0%, var(--tr-gold) var(--tr-fill, 50%), rgba(255,255,255,0.14) var(--tr-fill, 50%));
}
.tr-control input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tr-ink);
  border: 3px solid var(--tr-gold);
  cursor: grab;
}
.tr-control input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}
.tr-control input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--tr-gold);
}
.tr-control input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }
.tr-scale {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tr-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Checklist */
.tr-checklist { border: 0; margin: 0; padding: 0; min-width: 0; }
.tr-checklist legend { margin-bottom: 8px; }
.tr-check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 480px) { .tr-check-grid { grid-template-columns: 1fr 1fr; } }
.tr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--tr-line);
  border-radius: 10px;
  font-size: 14.5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
}
.tr-check:has(input:checked) {
  border-color: var(--tr-gold);
  background: var(--tr-gold-dim);
}
.tr-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--tr-gold);
  flex: none;
  cursor: pointer;
}
.tr-check input[type="checkbox"]:disabled + span { opacity: 0.5; }

/* Toggle switch */
.tr-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}
.tr-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.tr-toggle-ui {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid var(--tr-line);
  transition: background 120ms ease;
}
.tr-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tr-ink);
  transition: left 120ms ease;
}
.tr-toggle input:checked + .tr-toggle-ui { background: var(--tr-gold); border-color: var(--tr-gold); }
.tr-toggle input:checked + .tr-toggle-ui::after { left: 25px; }
.tr-toggle input:focus-visible + .tr-toggle-ui {
  outline: 2px solid var(--tr-gold);
  outline-offset: 3px;
}
.tr-toggle input:disabled ~ .tr-toggle-text { opacity: 0.5; }

/* ------------------------------------------------------------------ */
/* Chart + hypothetical result                                         */
/* ------------------------------------------------------------------ */
.tr-chart { margin-top: 16px; }
.tr-chart-hint {
  font-size: 14px;
  font-weight: 600;
  color: #E8C97A;
  margin: 0 0 10px;
}
.tr-line-wrap {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--tr-line);
  border-radius: 10px;
  padding: 6px 4px 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.tr-line-wrap svg { display: block; width: 100%; height: auto; }
.tr-line-cap {
  font-size: 13px;
  color: var(--tr-muted);
  margin: 0 2px 10px;
}

.tr-result {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  border: 1px solid var(--tr-line);
  background: rgba(255, 255, 255, 0.02);
}
.tr-result-grade {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 3px 10px;
  margin-right: 8px;
  vertical-align: 1px;
}
.tr-result[data-grade="ACCURATE"] .tr-result-grade { background: rgba(63,185,80,0.16); color: var(--tr-green); border: 1px solid var(--tr-green); }
.tr-result[data-grade="PARTIAL"] .tr-result-grade { background: rgba(232,163,61,0.14); color: var(--tr-amber); border: 1px solid var(--tr-amber); }
.tr-result[data-grade="WRONG"] .tr-result-grade { background: rgba(201,112,112,0.14); color: var(--tr-brick); border: 1px solid var(--tr-brick); }
.tr-sim-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.tr-sim-sub { margin: 0; }
.tr-sim-score {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--tr-ink);
}
.tr-sim-legend {
  font-size: 13px;
  color: var(--tr-muted);
  margin: 8px 0 0;
}
.tr-result-sub {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--tr-muted);
}
.tr-result[data-grade="ACCURATE"] { border-left: 4px solid var(--tr-green); }
.tr-result[data-grade="PARTIAL"] { border-left: 4px solid var(--tr-amber); }
.tr-result[data-grade="WRONG"] { border-left: 4px solid var(--tr-brick); }
.tr-result-error { color: var(--tr-muted); font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Persistent Scenario Bar (spec §4) + Record bar (§7) + Share bar (§6)   */
/* ------------------------------------------------------------------ */
.tr-scen-bar {
  margin-top: 16px;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--tr-line);
  background: rgba(255, 255, 255, 0.02);
}
.tr-scen-bar.tr-scen-drift {
  border-color: var(--tr-amber);
  background: rgba(232, 163, 61, 0.08);
}
.tr-scen-bar.tr-scen-saved {
  border-color: var(--tr-green);
  background: rgba(63, 185, 80, 0.08);
}
.tr-scen-text { margin: 0 0 10px; font-size: 14px; }
.tr-scen-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tr-scen-primary {
  min-height: 44px;
  border-radius: 10px;
  border: 0;
  background: var(--tr-gold);
  color: var(--tr-gold-ink);
  font-family: var(--tr-font);
  font-weight: 800;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14.5px;
}
.tr-scen-bar.tr-scen-drift .tr-scen-primary { background: var(--tr-amber); }
.tr-scen-primary:disabled {
  opacity: 0.6;
  cursor: default;
  background: rgba(255, 255, 255, 0.08);
  color: var(--tr-muted);
}
.tr-scen-secondary {
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--tr-gold);
  font-family: var(--tr-font);
  font-weight: 700;
  cursor: pointer;
  padding: 10px 8px;
  font-size: 14px;
  text-decoration: underline;
}

/* Keep Your Permanent Verdict Record bar (spec §7). */
.tr-record-bar {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--tr-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
}
.tr-record-title { font-weight: 800; font-size: 14px; margin: 0 0 10px; }
.tr-record-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-record-why { font-size: 13px; color: var(--tr-muted); margin: 10px 0 0; }

.tr-btn-ghost {
  flex: 1 1 140px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--tr-line);
  background: transparent;
  color: var(--tr-ink);
  font-family: var(--tr-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.tr-btn-ghost:hover { border-color: var(--tr-gold); color: var(--tr-gold); }
.tr-btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

/* Module Share Bar (spec §6). */
.tr-share-bar .tr-btn-ghost, .tr-record-btns .tr-btn-ghost { flex: 0 1 auto; }
.tr-share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--tr-line);
}
.tr-share-label { font-weight: 700; font-size: 14px; }
.tr-share-note { font-size: 12px; color: var(--tr-muted); margin: 0; flex-basis: 100%; }

/* Social plain-language checklist (spec §5). */
.tr-social-sim-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.tr-social-sim-instr { font-size: 13.5px; color: var(--tr-muted); margin: 0 0 12px; }
.tr-social-group { font-size: 14px; font-weight: 700; margin: 14px 0 8px; }
.tr-chain-toggle {
  width: 100%;
  border: 1px solid var(--tr-line);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.tr-closed {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--tr-amber);
  background: rgba(232, 163, 61, 0.08);
  font-size: 14px;
  color: var(--tr-ink);
}
.tr-closed b { color: var(--tr-amber); }

/* ------------------------------------------------------------------ */
/* "How this is graded" receipt                                        */
/* ------------------------------------------------------------------ */
.tr-how {
  margin-top: 16px;
  border: 1px solid var(--tr-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.tr-how summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tr-gold);
  cursor: pointer;
  list-style: none;
}
.tr-how summary::-webkit-details-marker { display: none; }
.tr-how summary::before {
  content: "\25B6";
  font-size: 11px;
  margin-right: 10px;
  transition: transform 120ms ease;
}
.tr-how[open] summary::before { transform: rotate(90deg); }
.tr-how-body { padding: 4px 16px 16px; font-size: 14px; color: var(--tr-ink); }
.tr-how-body dl { margin: 0; display: grid; gap: 10px; }
.tr-how-body dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tr-muted);
}
.tr-how-body dd { margin: 2px 0 0; }
.tr-how-body code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--tr-gold);
  word-break: break-all;
}
.tr-how-body ul { margin: 4px 0 0; padding-left: 18px; }
.tr-how-body li { margin-bottom: 4px; }

/* ------------------------------------------------------------------ */
/* Receipt dialog                                                      */
/* ------------------------------------------------------------------ */
.tr-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.72);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.tr-dialog {
  background: var(--tr-card, #131c2c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 20px;
  color: var(--tr-ink, #F5F5F7);
  font-family: var(--tr-font, inherit);
}
.tr-dialog h2 { font-size: 18px; margin: 0 0 10px; color: var(--tr-gold, #D29922); }
.tr-dialog pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.tr-dialog-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-dialog .tr-btn-ghost { flex: 1 1 140px; }
.tr-dialog-note { font-size: 13px; color: var(--tr-muted, #8E95A2); margin: 10px 0 0; }

/* ------------------------------------------------------------------ */
/* Engine-unavailable notice                                           */
/* ------------------------------------------------------------------ */
.tr-engine-down {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: var(--tr-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Focus, motion, contrast                                             */
/* ------------------------------------------------------------------ */
.tr-mod :focus-visible,
[data-trends-personal-strip] :focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .tr-mod *, .tr-dialog * {
    transition: none !important;
    animation: none !important;
  }
  .tr-how summary::before { transition: none; }
}

/* Forced-colors mode: keep markers distinguishable without color. */
@media (forced-colors: active) {
  .tr-pick-btn[aria-pressed="true"] { border: 3px solid Highlight; }
  .tr-result-grade { border: 1px solid currentColor; }
}
/* ================================================================== */
/* McKinsey-premium polish layer (2026-10-12)                              */
/* Restrained palette, generous whitespace, editorial typography.          */
/* ================================================================== */

/* Kicker: de-template (was 11px / 0.2em) */
.tr-kicker {
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* ---- Round-2 fixes: timeline, start strip, next board, step labels ---- */
.tr-timeline, .tr-start-strip, .tr-next-board {
  background: var(--tr-panel);
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius);
  padding: 20px 22px;
  margin: 0 0 28px;
}
.tr-timeline h2, .tr-next-board h2 {
  font-family: var(--tr-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--tr-ink);
}
.tr-timeline ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.tr-timeline li { color: var(--tr-muted); font-size: 14.5px; line-height: 1.5; }
.tr-timeline li strong { color: var(--tr-ink); }
.tr-start-strip p, .tr-next-board p { margin: 0; color: var(--tr-muted); font-size: 15px; line-height: 1.5; }
.tr-start-strip strong, .tr-next-board h2 { color: var(--tr-ink); }
.start-badge {
  display: inline-block;
  background: #D29922;
  color: #0B0F17;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.tr-step-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--tr-ink);
  margin: 0 0 12px;
}
.tr-pick-derisk {
  font-size: 13px;
  color: var(--tr-muted);
  margin: 4px 0 10px;
}
.rule-details { margin: 16px 0; }
.rule-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--tr-ink);
  font-size: 15px;
}
.rule-details .rule-card { margin-top: 10px; }

/* ---- Glossary strip (three words to know) ---- */
.tr-glossary {
  background: var(--tr-panel);
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius);
  padding: 20px 22px;
  margin: 0 0 28px;
}
.tr-glossary h2 {
  font-family: var(--tr-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--tr-ink);
}
.tr-glossary dl {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .tr-glossary dl { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.tr-glossary dt { font-weight: 700; color: var(--tr-ink); margin-bottom: 4px; }
.tr-glossary dd { margin: 0; color: var(--tr-muted); font-size: 14px; line-height: 1.5; }

/* ---- Onboarding strip ---- */
.how-strip {
  background: var(--tr-panel);
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius);
  padding: 20px 22px;
  margin: 0 0 28px;
}
.how-title {
  font-family: var(--tr-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--tr-ink);
}
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .how-steps { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.how-steps li { display: flex; gap: 12px; align-items: flex-start; }
.how-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tr-gold-dim);
  border: 1px solid var(--tr-gold);
  color: var(--tr-gold);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.how-t strong { display: block; font-size: 14.5px; color: var(--tr-ink); }
.how-t span span, .how-t > span:last-child {
  font-size: 13px;
  color: var(--tr-muted);
}

/* ---- Rule card (3 scannable rows) ---- */
.rule-card {
  border: 1px solid var(--tr-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  padding: 16px 18px;
  margin: 16px 0;
}
.rule-card h4 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tr-ink);
}
.rule-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--tr-line);
}
.rule-row:first-of-type { border-top: 0; padding-top: 0; }
.rule-chip {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 4px 10px;
  margin-top: 1px;
}
.rule-accurate .rule-chip { background: rgba(63,185,80,0.16); color: var(--tr-green); border: 1px solid var(--tr-green); }
.rule-partial .rule-chip { background: rgba(232,163,61,0.14); color: var(--tr-amber); border: 1px solid var(--tr-amber); }
.rule-wrong .rule-chip { background: rgba(201,112,112,0.14); color: var(--tr-brick); border: 1px solid var(--tr-brick); }
.rule-body { min-width: 0; }
.rule-cond { margin: 0; font-size: 14.5px; color: var(--tr-ink); }
.rule-cond code.cond {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--tr-line);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.rule-label { margin: 4px 0 0; font-size: 13px; }

/* ---- Call facts grid ---- */
.call-facts {
  display: grid;
  gap: 8px 24px;
  margin: 14px 0;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--tr-line);
  border-radius: 10px;
}
@media (min-width: 640px) { .call-facts { grid-template-columns: 1fr 1fr; } }
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact-k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-muted);
}
.fact-v { font-size: 14.5px; color: var(--tr-ink); font-variant-numeric: tabular-nums; }
.conf-meter {
  display: inline-block;
  width: 96px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  vertical-align: middle;
  margin-right: 8px;
  overflow: hidden;
}
.conf-fill {
  display: block;
  height: 100%;
  background: var(--tr-gold);
  border-radius: 4px;
}

/* ---- Picks-close countdown pill ---- */
.picks-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tr-gold-ink);
  background: var(--tr-gold);
  border-radius: 999px;
  padding: 8px 16px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.module-actions .picks-pill { margin-top: 10px; }
@media (min-width: 480px) {
  .module-actions .picks-pill { margin-top: 0; }
}

/* ---- Sealed badge ---- */
.sealed-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tr-gold);
  border: 1.5px solid var(--tr-gold);
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--tr-gold-dim);
}
.sealed-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tr-gold);
  color: var(--tr-gold-ink);
  font-size: 13px;
  font-weight: 800;
}
.sealed-details { margin-top: 12px; }
.sealed-details summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--tr-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sealed-details summary:hover { color: var(--tr-gold); }

/* ---- Source details disclosure ---- */
.source-details { margin-top: 14px; }
.source-details summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--tr-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.source-details summary:hover { color: var(--tr-gold); }
.source-details p { margin: 8px 0; font-size: 14px; }

/* ---- Landing page ---- */
.landing-hero {
  text-align: center;
  padding: 48px 20px 36px;
  max-width: 720px;
  margin: 0 auto;
}
.landing-hero h1 {
  font-family: var(--tr-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--tr-ink);
}
@media (min-width: 640px) { .landing-hero h1 { font-size: 52px; } }
.landing-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--tr-muted);
  margin: 0 0 28px;
}
.btn-gold {
  display: inline-block;
  background: var(--tr-gold);
  color: var(--tr-gold-ink);
  font-weight: 800;
  font-size: 16px;
  border-radius: 12px;
  padding: 14px 28px;
  text-decoration: none;
  margin: 0 8px 8px 0;
}
.btn-gold:hover { filter: brightness(1.08); }
.landing-drop { margin: 0 0 32px; }
.landing-drop h2 {
  font-family: var(--tr-serif);
  font-size: 26px;
  margin: 0 0 4px;
}
.landing-calls {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 640px) { .landing-calls { grid-template-columns: 1fr 1fr; } }
.landing-call {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius);
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color 120ms ease, transform 80ms ease;
}
.landing-call:hover { border-color: var(--tr-gold); transform: translateY(-1px); }
.landing-call-theme {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tr-gold);
}
.landing-call-head {
  font-family: var(--tr-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--tr-ink);
}
.landing-call-verdict { font-size: 13px; }
.landing-ledger-teaser {
  text-align: center;
  padding: 28px 20px;
  border-top: 1px solid var(--tr-line);
  margin-top: 8px;
}
.landing-ledger-teaser h2 { font-family: var(--tr-serif); font-size: 24px; margin: 0 0 8px; }

/* ---- Ledger status pills ---- */
.status-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
}
.status-open {
  color: var(--tr-gold);
  border: 1.5px solid var(--tr-gold);
  background: transparent;
}
.status-graded {
  color: var(--tr-gold-ink);
  background: var(--tr-green);
  border: 1.5px solid var(--tr-green);
}
.ledger-table td.num, .ledger-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-table tbody tr + tr td { border-top: 1px solid var(--tr-line); }
.ledger-table { border-collapse: collapse; width: 100%; }
.ledger-table th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tr-line);
}
.ledger-table td { padding: 12px; font-size: 14.5px; vertical-align: top; }

/* ---- Module card premium rhythm ---- */
.trends-module { margin-bottom: 32px; }
.tr-mod > *:last-child { margin-bottom: 0; }
.scenario-table-wrap { margin-top: 20px; }
.scenario-table { border-collapse: collapse; width: 100%; }
.scenario-table th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tr-line);
}
.scenario-table td { padding: 11px 12px; font-size: 14px; border-top: 1px solid var(--tr-line); font-variant-numeric: tabular-nums; }
.scenario-table tbody tr:first-child td { border-top: 0; }
.scenario-table tr.desk-row td { border-left: 3px solid var(--tr-gold); background: rgba(210,153,34,0.06); }
.scenario-table caption { text-align: left; padding: 0 0 10px; }

/* ---- Methodology details ---- */
.trends-deepdive h2 { font-family: var(--tr-serif); font-size: 24px; margin: 0 0 12px; }
.deepdive { margin-bottom: 10px; border: 1px solid var(--tr-line); border-radius: 10px; background: rgba(0,0,0,0.14); }
.deepdive summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tr-ink);
  cursor: pointer;
  list-style: none;
}
.deepdive summary::-webkit-details-marker { display: none; }
.deepdive summary::before {
  content: "\25B6";
  font-size: 11px;
  margin-right: 12px;
  color: var(--tr-gold);
  transition: transform 120ms ease;
}
.deepdive[open] summary::before { transform: rotate(90deg); }

/* 360px breakpoint: tighten board padding on the narrowest phones. */
@media (max-width: 360px) {
  .tr-board { padding: 16px 12px; }
  .tr-module { padding: 16px 12px; }
  .tr-share-bar { gap: 8px; }
}

/* ---- Crowd Pulse Box (Track 3, spec §3) ---- */
.tr-crowd-pulse {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--tr-gold);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
  animation: tr-pulse-in 240ms ease-out;
}
@keyframes tr-pulse-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tr-crowd-pulse { animation: none; }
}
.tr-pulse-head { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; margin: 0 0 8px; }
.tr-pulse-copy { font-size: 14px; margin: 8px 0 0; }
.tr-pulse-counts { font-size: 14px; font-weight: 600; margin: 6px 0 0; color: var(--tr-ink); }
.tr-pulse-bar { display: flex; margin-top: 10px; border-radius: 8px; overflow: hidden; min-height: 34px; }
.tr-pulse-agree, .tr-pulse-disagree {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 700; padding: 6px 4px; white-space: nowrap; overflow: hidden;
}
.tr-pulse-agree { background: var(--tr-gold-dim); color: var(--tr-ink); }
.tr-pulse-disagree { background: rgba(255, 255, 255, 0.08); color: var(--tr-muted); }
.tr-pulse-progress { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 10px; }
.tr-pulse-progress-fill { height: 100%; background: var(--tr-gold); border-radius: 5px; }
.tr-pulse-progress-label { font-size: 13px; color: var(--tr-muted); margin: 6px 0 0; }
.tr-pulse-fallback { font-size: 14px; margin: 0; }
.tr-pulse-final { font-size: 14px; font-weight: 700; margin: 0; }
.tr-revote-btn {
  appearance: none; background: transparent; color: var(--tr-muted);
  border: 1px solid var(--tr-border, rgba(255, 255, 255, 0.18)); border-radius: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.tr-revote-btn:hover, .tr-revote-btn:focus-visible { color: var(--tr-ink); border-color: var(--tr-muted); }
.tr-revote-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- Portable receipt banner (Track 3, spec §9) ---- */
.tr-receipt-banner {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--tr-gold);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.tr-receipt-banner p { font-size: 14px; font-weight: 700; margin: 0; }