/* ============================================================================
   Trump Scorecard - dark editorial home ("Year One, in full")
   All rules scoped under .x-root so base styles in style.css stay untouched.
   Loaded only on index.html (data-page="home").
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/css/fonts/space-grotesk.woff2?v=20260616") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* The home page is the dark-locked editorial layout. Kill the base body
   gradient overlay so the flow-field canvas is the only background actor. */
html[data-page="home"] body::before { display: none !important; }
html[data-page="home"] body { background: #08080a; }

/* ---- Fixed flow-field canvas + aurora layer (behind all content) -------- */
#x-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.x-root {
  position: relative;
  z-index: 1;
  --field: #dc2626;            /* per-chapter accent, overridden inline */
  --ink: #f4f4f6;
  --dim: #b6b9c2;
  --faint: #969aa6;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --panel: rgba(20, 20, 26, 0.74);
  --panel-solid: #15151a;
  --accent: #dc2626;
  --grade-a: #22c55e;
  --grade-b: #84cc16;
  --grade-c: #eab308;
  --grade-d: #f97316;
  --grade-f: #ef4444;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
}

.x-display {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

/* ---- Layout shell ------------------------------------------------------- */
.x-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2.4rem);
}

.x-chapter {
  position: relative;
  padding: clamp(4.5rem, 12vh, 9rem) 0;
  overflow: clip;
}
.x-chapter + .x-chapter { border-top: 1px solid var(--line); }

/* Rhythm: deep (near-black, lets the canvas read) vs elevated (panel + aurora) */
.tone-deep { background: transparent; }
.tone-elev { background: linear-gradient(180deg, rgba(18,18,23,0.55), rgba(10,10,12,0.75)); }
.tone-elev::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 18% 28%, color-mix(in srgb, var(--field) 26%, transparent), transparent 70%),
    radial-gradient(34% 42% at 82% 68%, color-mix(in srgb, var(--field) 18%, transparent), transparent 72%),
    radial-gradient(30% 40% at 60% 12%, color-mix(in srgb, var(--field) 12%, transparent), transparent 75%);
  opacity: 0.55;
  animation: x-aurora 26s ease-in-out infinite alternate;
}
@keyframes x-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); opacity: 0.42; }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.06); opacity: 0.6; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.03); opacity: 0.5; }
}

/* ---- Kicker / headings / copy ------------------------------------------ */
.x-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--field) 72%, #ffffff 28%);
  margin: 0 0 1.1rem;
}
.x-kicker .x-kicker-no {
  font-family: "Space Grotesk", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--field);
}
.x-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.x-h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  margin: 0 0 1rem;
  max-width: 16ch;
}
.x-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--dim);
  max-width: 46ch;
  margin: 0 0 1.4rem;
}
.x-lede strong { color: var(--ink); font-weight: 600; }
.x-note { font-size: 0.95rem; color: var(--dim); line-height: 1.55; max-width: 48ch; }

.x-source {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--faint);
}
.x-source a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.x-source a:hover { color: var(--dim); }

/* Two-column chapter grid, alternating sides */
.x-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.x-chapter.alt .x-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.x-chapter.alt .x-grid .x-col-text { order: 2; }
.x-chapter.alt .x-grid .x-col-figure { order: 1; }

/* ============================ HERO ====================================== */
.x-hero {
  position: relative;
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5rem);
}
.x-hero-kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
}
.x-hero-kicker b { color: var(--accent); font-weight: 700; }
.x-h1 {
  font-size: clamp(2.7rem, 8.5vw, 6.6rem);
  margin: 1.4rem 0 1.2rem;
  letter-spacing: -0.035em;
}
.x-h1 .x-em { color: var(--accent); }
.x-hero-sub {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  color: var(--dim);
  max-width: 40ch;
}
.x-hero-sub strong { color: var(--ink); font-weight: 600; }

.x-scrollcue {
  margin-top: 3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.x-scrollcue span {
  width: 18px; height: 28px; border: 1px solid var(--line-strong); border-radius: 10px;
  position: relative;
}
.x-scrollcue span::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px;
  margin-left: -1.5px; background: var(--faint); border-radius: 2px;
  animation: x-scroll 1.8s var(--ease) infinite;
}
@keyframes x-scroll { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }

/* ---- Hero verdict ring + stat row -------------------------------------- */
.x-verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.x-gradering { position: relative; width: 150px; height: 150px; flex: none; }
.x-gradering svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.x-gradering .x-grade {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 3.2rem; color: var(--grade-d); letter-spacing: -0.02em;
}
.x-gradering .x-grade small { font-size: 0.8rem; }
.x-verdict-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.x-stat .x-stat-num {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.x-stat .x-stat-lab { margin-top: 0.45rem; font-size: 0.78rem; color: var(--dim); line-height: 1.35; }
.x-stat.bad .x-stat-num { color: #f87171; }

/* ============================ INDEX (ToC) =============================== */
.x-index { padding: clamp(3rem, 7vh, 5rem) 0; }
.x-index-head { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.6rem; }
.x-index-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 0; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
.x-index-list li { border-top: 1px solid var(--line); }
.x-index-list a {
  display: flex; align-items: baseline; gap: 1rem; padding: 0.95rem 0.4rem;
  color: var(--ink); text-decoration: none; transition: color 0.25s, padding 0.25s var(--ease);
}
.x-index-list a:hover { color: var(--idx, var(--accent)); padding-left: 0.9rem; }
.x-index-no {
  font-family: "Space Grotesk", monospace; font-variant-numeric: tabular-nums;
  font-size: 0.85rem; color: var(--idx, var(--accent)); min-width: 2.4ch; font-weight: 600;
}
.x-index-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idx, var(--accent)); align-self: center; flex: none; }
.x-index-title { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 500; }
.x-index-meta { font-size: 0.78rem; color: var(--faint); align-self: center; }

/* ============================ CHARTS =================================== */
.x-figure {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.x-figure-title { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 0 0 1.2rem; }

/* Big count-up number */
.x-bignum {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(3rem, 9vw, 6rem); line-height: 0.95; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--field);
}
.x-bignum-sub { margin-top: 0.6rem; font-size: 0.95rem; color: var(--dim); }

/* Horizontal ranked bars (11 metrics, predecessors) */
.x-bars { display: grid; gap: 0.7rem; }
.x-barrow { display: grid; grid-template-columns: 1.6rem minmax(8.5ch, 1.2fr) 2.2rem; align-items: center; gap: 0.7rem; }
.x-barrow .x-barlabel { font-size: 0.82rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-barrow .x-bartrack { position: relative; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.06); overflow: hidden; }
.x-barrow .x-barfill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px;
  background: var(--bar, var(--field)); transition: width 1.1s var(--ease);
}
.x-barrow .x-grade-chip {
  font-family: "Space Grotesk", monospace; font-weight: 700; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #0a0a0b; border-radius: 5px; padding: 0.05rem 0;
}
.x-barrow .x-barval { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--ink); text-align: right; }
.x-axis { display: flex; justify-content: space-between; margin-top: 0.8rem; font-size: 0.78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.x-axis-title { margin-top: 0.5rem; font-size: 0.72rem; color: var(--faint); text-align: center; letter-spacing: 0.04em; }

.gc-a { background: var(--grade-a); }
.gc-b { background: var(--grade-b); }
.gc-c { background: var(--grade-c); }
.gc-d { background: var(--grade-d); }
.gc-f { background: var(--grade-f); }
.x-bar-hi { outline: 1px solid color-mix(in srgb, var(--field) 60%, transparent); }
.x-barrow.is-self .x-barlabel { color: var(--ink); font-weight: 600; }

/* Segmented bar (kept vs broken) */
.x-seg { display: flex; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.x-seg-part { position: relative; display: grid; place-content: center; color: #0a0a0b; min-width: 0; transition: flex-grow 1.1s var(--ease); }
.x-seg-part .x-seg-n { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1; }
.x-seg-part .x-seg-l { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.x-seg-broken { background: #ef4444; }
.x-seg-kept { background: #22c55e; }
.x-seg-legend { display: flex; gap: 1.4rem; margin-top: 1rem; font-size: 0.82rem; color: var(--dim); flex-wrap: wrap; }
.x-seg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.45rem; vertical-align: middle; }

/* Donut */
.x-donut-wrap { display: flex; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; flex-wrap: wrap; }
.x-donut { position: relative; width: clamp(150px, 22vw, 200px); height: clamp(150px, 22vw, 200px); flex: none; }
.x-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.x-donut .x-donut-center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.x-donut .x-donut-pct {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 2.2rem; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--field);
}
.x-donut .x-donut-cap { font-size: 0.76rem; color: var(--dim); margin-top: 0.2rem; }
.x-donut-legend { display: grid; gap: 0.55rem; font-size: 0.85rem; color: var(--dim); }
.x-donut-legend div { display: flex; align-items: center; gap: 0.55rem; }
.x-donut-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* Compare bars (DOGE claimed vs verified, debt baseline vs now) */
.x-compare { display: grid; gap: 1.1rem; }
.x-cmprow .x-cmp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.x-cmprow .x-cmp-name { font-size: 0.82rem; color: var(--dim); }
.x-cmprow .x-cmp-val { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.x-cmprow .x-cmp-track { height: 22px; border-radius: 7px; background: rgba(255,255,255,0.06); overflow: hidden; }
.x-cmprow .x-cmp-fill { height: 100%; width: 0; border-radius: 7px; transition: width 1.2s var(--ease); }

/* Area chart (approval) */
.x-area svg { width: 100%; height: auto; display: block; overflow: visible; }
.x-area .x-area-path { transition: opacity 0.8s ease; }
.x-area .x-stroke { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.x-zero-label { font-size: 0.74rem; fill: var(--faint); }
.x-axis-x { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.78rem; color: var(--faint); }
.x-area-scale { margin-top: 0.45rem; font-size: 0.74rem; color: var(--faint); letter-spacing: 0.01em; }
.x-area-legend { display: flex; gap: 1.2rem; margin-top: 0.7rem; font-size: 0.82rem; flex-wrap: wrap; }
.x-area-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.x-area-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }

/* Debt tab: one honest, proportional bar, baseline plus a bright added delta */
.x-tab-track {
  position: relative; display: flex; height: 48px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
}
.x-tab-base { height: 100%; background: rgba(148, 163, 184, 0.34); }
.x-tab-add {
  height: 100%; width: 0; background: var(--field);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35), 0 0 22px color-mix(in srgb, var(--field) 60%, transparent);
  transition: width 1.3s var(--ease);
}
.x-tab-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; font-size: 0.82rem; }
.x-tab-base-lab { color: var(--dim); }
.x-tab-add-lab { color: color-mix(in srgb, var(--field) 80%, #ffffff 20%); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Days-since board */
.x-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; }
.x-board-cell { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; background: rgba(255,255,255,0.02); }
.x-board-num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 2rem; line-height: 1; color: #f87171; font-variant-numeric: tabular-nums; }
.x-board-lab { margin-top: 0.5rem; font-size: 0.8rem; color: var(--dim); line-height: 1.35; }

/* Iran special: timeline plus 60-day countdown */
.x-timeline-countdown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 0.58fr); gap: clamp(1rem, 3vw, 1.6rem); align-items: start; }
.x-vtimeline { position: relative; display: grid; gap: 0.75rem; }
.x-vtimeline::before {
  content: ""; position: absolute; left: 0.52rem; top: 0.55rem; bottom: 0.55rem;
  width: 1px; background: linear-gradient(var(--field), transparent);
}
.x-vtimeline-item { position: relative; padding-left: 1.55rem; }
.x-vtimeline-item::before {
  content: ""; position: absolute; left: 0.17rem; top: 0.35rem;
  width: 0.72rem; height: 0.72rem; border-radius: 50%;
  background: var(--field); box-shadow: 0 0 0 5px color-mix(in srgb, var(--field) 15%, transparent);
}
.x-vtimeline-item time {
  display: block; font-family: "Space Grotesk", monospace; font-size: 0.82rem;
  color: var(--field); font-variant-numeric: tabular-nums;
}
.x-vtimeline-item strong { display: block; margin-top: 0.1rem; color: var(--ink); }
.x-vtimeline-item span { display: block; margin-top: 0.18rem; font-size: 0.82rem; line-height: 1.35; color: var(--dim); }
.x-countdown-card { border: 1px solid var(--line); border-radius: 16px; padding: 1rem; background: rgba(255,255,255,0.03); }
.x-ring { position: relative; width: clamp(140px, 18vw, 180px); height: clamp(140px, 18vw, 180px); margin: 0 auto 0.9rem; }
.x-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.x-ring-progress { transition: stroke-dasharray 1.2s var(--ease); }
.x-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.x-ring-num { font-family: "Space Grotesk", sans-serif; font-size: clamp(2.3rem, 6vw, 3.3rem); font-weight: 700; line-height: 0.9; color: var(--field); font-variant-numeric: tabular-nums; }
.x-ring-cap { margin-top: 0.35rem; font-size: 0.72rem; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }
.x-ring-label { margin: 0 0 0.45rem; font-weight: 700; color: var(--ink); text-align: center; }

/* Iran special: bill chart */
.x-cost-stack { display: grid; gap: 1.15rem; }
.x-cost-seg { height: 76px; }
.x-cost-seg .x-seg-part { min-width: 0; padding: 0 0.45rem; overflow: hidden; }
.x-cost-seg .x-seg-l { line-height: 1.05; }
.x-spark { border-top: 1px solid var(--line); padding-top: 1rem; }
.x-spark svg { display: block; width: 100%; height: 92px; overflow: visible; }
.x-spark-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin-top: 0.6rem; }
.x-spark-labels span { font-size: 0.72rem; line-height: 1.25; color: var(--dim); }
.x-spark-labels strong { color: var(--ink); font-weight: 600; }
.x-money-stack { display: grid; gap: 0.75rem; }
.x-money-row { border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem; background: rgba(255,255,255,0.025); }
.x-money-top { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--dim); }
.x-money-top strong { font-family: "Space Grotesk", sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.x-money-track { height: 13px; margin-top: 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.x-money-fill { height: 100%; border-radius: 999px; transition: width 1.1s var(--ease); }
.x-money-row p { margin: 0.5rem 0 0; color: var(--faint); font-size: 0.76rem; line-height: 1.35; }

/* Iran special: estimates, quotes, claims and verdict */
.x-estimates, .x-quote-grid, .x-claim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 0.8rem; }
.x-estimate-card, .x-quote-card, .x-claim-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
  background: rgba(255,255,255,0.025);
}
.x-estimate-tag, .x-claim-label {
  display: inline-flex; margin: 0 0 0.55rem; color: color-mix(in srgb, var(--field) 80%, #ffffff 20%);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.x-count-num {
  font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 0.95; font-weight: 700; color: #f87171; font-variant-numeric: tabular-nums;
}
.x-quote-card blockquote { margin: 0; color: var(--ink); font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; line-height: 1.14; letter-spacing: -0.015em; }
.x-quote-card p:last-child, .x-claim-card p:last-child { margin: 0.75rem 0 0; color: var(--dim); font-size: 0.82rem; line-height: 1.42; }
.x-claim-card h3 { margin: 0 0 0.85rem; font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.x-verdict-final { margin-top: 0; }
.x-verdict-line {
  margin: 0 0 1rem; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.08; color: var(--ink); letter-spacing: -0.02em;
}

/* CTA grid (to live trackers) */
.x-cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; margin-top: 1.8rem; }
.x-cta {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--line); border-radius: 14px; text-decoration: none;
  background: var(--panel); color: var(--ink); transition: border-color 0.25s, transform 0.25s var(--ease), background 0.25s;
}
.x-cta:hover { border-color: color-mix(in srgb, var(--field) 55%, transparent); transform: translateY(-3px); background: rgba(28,28,34,0.7); }
.x-cta .x-cta-emoji { font-size: 1.3rem; }
.x-cta .x-cta-title { font-weight: 600; }
.x-cta .x-cta-blurb { font-size: 0.83rem; color: var(--dim); line-height: 1.4; }
.x-cta.featured { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.x-btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
  padding: 0.8rem 1.4rem; border-radius: 999px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: #ffffff !important; border: 1px solid transparent;
  transition: transform 0.2s var(--ease), filter 0.2s;
}
.x-root .x-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ============================ Reveal system ============================= */
/* Hiding is gated behind html.x-js so a no-JS / noscript render shows everything. */
html.x-js .x-reveal { opacity: 0; transform: translateY(22px); }
.x-reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
html.x-js .x-reveal.x-in { opacity: 1; transform: none; }

/* No-JS chart fallbacks: a concise text summary lives inside each JS-rendered
   chart container. Hidden once JS is confirmed so it never flashes. */
.x-fallback { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--dim); }
html.x-js .x-fallback { display: none; }

/* ============================ A11y / focus ============================= */
.x-root a:focus-visible,
.x-root button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(8, 8, 10, 0.92);
  border-radius: 4px;
}
.x-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 0.7rem 1rem; border-radius: 0 0 8px 0;
}
.x-skip:focus { left: 0; }

/* ============================ Responsive =============================== */
@media (max-width: 860px) {
  .x-grid, .x-chapter.alt .x-grid { grid-template-columns: 1fr; gap: 2rem; }
  .x-chapter.alt .x-grid .x-col-text { order: 1; }
  .x-chapter.alt .x-grid .x-col-figure { order: 2; }
  .x-index-list { grid-template-columns: 1fr; }
  .x-index-meta { margin-left: auto; }
  .x-verdict { grid-template-columns: 1fr; text-align: left; }
  .x-verdict-stats { grid-template-columns: repeat(3, 1fr); }
  .x-h2 { max-width: none; }
  .x-lede { max-width: none; }
  /* Let metric labels wrap instead of truncating ("Ukraine day one"). */
  .x-barrow .x-barlabel { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  .x-timeline-countdown { grid-template-columns: 1fr; }
  .x-countdown-card { max-width: 320px; }
  .x-cost-seg { height: auto; min-height: 76px; flex-direction: column; }
  .x-cost-seg .x-seg-part { min-height: 58px; }
  .x-spark-labels { grid-template-columns: repeat(2, 1fr); }
  /* Drop backdrop-blur over the animated canvas on mobile (it janks on iOS);
     use a solid scrim so text stays readable. */
  .x-figure, .x-verdict {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: #15151b;
  }
}
@media (max-width: 480px) {
  .x-verdict-stats { grid-template-columns: 1fr; }
  .x-gradering { width: 120px; height: 120px; }
}

/* ============================ Reduced motion ========================== */
@media (prefers-reduced-motion: reduce) {
  html.x-js .x-reveal { opacity: 1; transform: none; }
  .x-reveal { transition: none; }
  .tone-elev::before { display: none; }
  .x-scrollcue span::after { animation: none; }
  .x-barrow .x-barfill,
  .x-cmprow .x-cmp-fill,
  .x-money-fill,
  .x-ring-progress,
  .x-seg-part { transition: none; }
  html { scroll-behavior: auto; }
}

/* ===================== Iran special: extra chart types ================= */
.x-tl-date { font-size: 1rem; color: var(--field); letter-spacing: 0.01em; }

/* Countdown ring (timeline) */
.x-countdown { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.8rem); flex-wrap: wrap; margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.x-countdown-ring { width: 128px; height: 128px; }
.x-countdown-ring .x-grade { color: var(--field); }
.x-cd-num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 2.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.x-countdown-meta { min-width: 12ch; flex: 1; }
.x-cd-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin: 0 0 0.3rem; }
.x-cd-sub { font-size: 0.98rem; color: var(--ink); margin: 0 0 0.35rem; font-weight: 600; line-height: 1.35; }
.x-cd-note { font-size: 0.85rem; color: var(--dim); margin: 0; line-height: 1.5; }

/* Quotes (who pushed him) */
.x-quotes { display: grid; gap: 1rem; }
.x-quote { margin: 0; border: 1px solid var(--line); border-left: 3px solid var(--field); border-radius: 12px; padding: 1.05rem 1.2rem; background: rgba(255, 255, 255, 0.02); }
.x-quote blockquote { margin: 0 0 0.6rem; font-size: 1.01rem; line-height: 1.5; color: var(--ink); }
.x-quote figcaption { font-size: 0.82rem; color: var(--faint); display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: baseline; }
.x-quote figcaption a { color: var(--field); text-decoration: none; font-weight: 600; }
.x-quote figcaption a:hover { text-decoration: underline; }

/* Claim vs receipt (the spin) */
.x-contrast { display: grid; gap: 1rem; }
.x-contrast-card { border: 1px solid var(--line); border-radius: 12px; padding: 1.05rem 1.2rem; background: rgba(255, 255, 255, 0.02); }
.x-contrast-claim, .x-contrast-real { margin: 0 0 0.6rem; font-size: 0.96rem; line-height: 1.5; }
.x-contrast-claim { color: var(--dim); font-style: italic; }
.x-contrast-real { color: var(--ink); }
.x-contrast-card > :last-child { margin-bottom: 0; }
.x-contrast-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.14rem 0.5rem; border-radius: 5px; margin-right: 0.55rem; vertical-align: 0.08em; background: rgba(248, 113, 113, 0.16); color: #f87171; }
.x-contrast-tag.good { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.x-contrast-src { margin: 0.4rem 0 0; font-size: 0.8rem; }
.x-contrast-src a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.x-contrast-src a:hover { color: var(--dim); }

/* Verdict reused inside a figure */
.x-figure .x-verdict-chart { border: none; background: transparent; padding: 0; margin: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.x-verdict-ring .x-grade { font-size: 3.4rem; color: var(--grade-f); }
.x-verdict-body { min-width: 0; }
.x-verdict-line { max-width: none; margin-top: 1rem; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .x-cd-arc { transition: none !important; }
}