/* =========================================================================
   Analysis section — Tian2 editorial data visualization
   ONE data accent: mustard. Restrained categorical palette derived from
   Tian2 tokens (coral, mustard, ink, stone, mint, burnt) — never a rainbow.
   Flat fills, ink axes, Bebas Neue numerals, generous whitespace.
   ========================================================================= */

:root {
  /* data palette — used for multi-series charts, in this fixed order */
  --d-mustard: var(--mustard);
  --d-coral:   var(--coral);
  --d-ink:     var(--ink);
  --d-stone:   var(--stone);
  --d-mint:    var(--mint);
  --d-burnt:   var(--burnt);
  --d-muted:   var(--ink-3);
  --grid:      #D9CDB2;     /* faint ink-on-cream gridline */
}

/* ---------- layout ---------- */
.a-hero { padding-top: var(--space-6); }
.a-hero .headline { margin-bottom: var(--space-3); }

/* horizontal margin must stay `auto` so the .shell stays centered — using
   `0` here previously overrode .shell's `margin:0 auto` and left-pinned every
   section (only the hero, which doesn't set margin, stayed centered). */
.a-section { margin: var(--space-9) auto; }
.a-section:first-of-type { margin-top: var(--space-7); }

.a-eyebrow {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mustard);
  margin: 0 0 var(--space-2);
}
.a-eyebrow--ink { color: var(--ink-3); }

.a-title {
  font-family: var(--font-display-en);
  font-weight: 800;
  font-size: clamp(28px, 5vw, var(--fs-h2));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-3);
}
.a-title .zh {
  font-family: var(--font-serif-zh);
  font-weight: 700;
  font-size: 0.62em;
  margin-left: 0.4em;
  color: var(--ink-2);
}

.a-caption {
  font-family: var(--font-body-en);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 var(--space-5);
}
.a-note {
  font-family: var(--font-body-en);
  font-size: var(--fs-caption);
  color: var(--ink-3);
  font-style: italic;
  margin: var(--space-3) 0 0;
}

/* ---------- overview strip ---------- */
.a-overview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: var(--stroke) solid var(--ink);
  margin: var(--space-6) 0 var(--space-5);
}
.a-stat {
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--ink);
}
.a-stat:last-child { border-right: 0; }
.a-stat .num {
  font-family: var(--font-label);
  font-size: clamp(40px, 7vw, 64px);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.a-stat .lab {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard);
  margin: var(--space-2) 0 4px;
}
.a-stat .sub {
  font-family: var(--font-body-en);
  font-size: var(--fs-caption);
  color: var(--ink-2);
  line-height: 1.4;
}

/* ---------- chart shell ---------- */
.chart {
  margin: var(--space-5) 0;
}
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-body-en); fill: var(--ink); }
.chart .axis-line { stroke: var(--ink); stroke-width: 1.5; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .num-label {
  font-family: var(--font-label);
  letter-spacing: 0.04em;
  fill: var(--ink);
}
.chart .axis-label {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.chart .tick-label { font-size: 12px; fill: var(--ink-2); }

/* ---------- legend ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-3) 0 var(--space-4);
}
.legend .item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body-en);
  font-size: var(--fs-caption);
  color: var(--ink-2);
}
.legend .swatch {
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink);
  flex: 0 0 auto;
}

/* data palette swatches / fills */
.fill-0 { fill: var(--d-mustard); } .sw-0 { background: var(--d-mustard); }
.fill-1 { fill: var(--d-coral); }   .sw-1 { background: var(--d-coral); }
.fill-2 { fill: var(--d-stone); }   .sw-2 { background: var(--d-stone); }
.fill-3 { fill: var(--d-mint); }    .sw-3 { background: var(--d-mint); }
.fill-4 { fill: var(--d-burnt); }   .sw-4 { background: var(--d-burnt); }
.fill-5 { fill: var(--d-ink); }     .sw-5 { background: var(--d-ink); }
.fill-6 { fill: var(--d-muted); }   .sw-6 { background: var(--d-muted); }

/* ---------- horizontal bar leaderboard ---------- */
.hbar-row {
  display: grid;
  grid-template-columns: 220px 1fr 44px;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--grid);
}
.hbar-row .name {
  font-family: var(--font-body-en);
  font-size: var(--fs-small);
  color: var(--ink);
  text-align: right;
  line-height: 1.2;
}
.hbar-row .name .meta {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-body-en);
}
.hbar-track { background: transparent; height: 18px; position: relative; }
.hbar-fill {
  height: 18px;
  background: var(--mustard);
  border: 1.5px solid var(--ink);
}
.hbar-fill.overseas { background: var(--stone); }
.hbar-row .val {
  font-family: var(--font-label);
  font-size: 18px;
  color: var(--ink);
  text-align: left;
}

/* ---------- heatmap ---------- */
.heat-wrap { overflow-x: auto; }
.heatmap { border-collapse: collapse; width: 100%; min-width: 0; }
.heatmap th, .heatmap td {
  border: 1px solid var(--ink);
  text-align: center;
  font-family: var(--font-body-en);
  font-size: var(--fs-caption);
  padding: 0;
}
.heatmap thead th {
  font-family: var(--font-label);
  letter-spacing: 0.06em;
  font-size: 13px;
  padding: 6px 4px;
  background: var(--cream-2);
  text-transform: uppercase;
}
.heatmap td.dir {
  text-align: left;
  padding: 6px 10px;
  font-size: var(--fs-caption);
  white-space: nowrap;
}
.heatmap td.cell {
  width: 46px; height: 36px;
  font-family: var(--font-label);
  font-size: 15px;
  color: var(--ink);
}
.heatmap td.cell .v { position: relative; z-index: 1; }

/* ---------- judge cards ---------- */
.judge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin: var(--space-5) 0;
}
.judge-card {
  border: var(--stroke) solid var(--ink);
  padding: var(--space-5);
  background: var(--bg-1);
}
.judge-card h3 {
  font-family: var(--font-display-en);
  font-weight: 700;
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-1);
}
.judge-card h3 .zh {
  font-family: var(--font-serif-zh);
  font-size: 0.6em;
  margin-left: 0.4em;
  color: var(--ink-2);
}
.judge-card .jl {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard);
  margin: var(--space-3) 0 4px;
}
.judge-card p { font-size: var(--fs-small); margin: 0 0 var(--space-2); }
.judge-card .revealed {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--grid);
}
.judge-card .revealed .tag {
  display: inline-block;
  font-family: var(--font-body-en);
  font-size: var(--fs-caption);
  border: 1.5px solid var(--ink);
  background: var(--cream-2);
  padding: 3px 9px;
  margin: 0 6px 6px 0;
  border-radius: var(--radius-2);
}
.judge-card .revealed .tag b {
  font-family: var(--font-label);
  font-weight: 400;
  margin-left: 5px;
  font-size: 15px;
}

/* ---------- takeaways closer ---------- */
.takeaways {
  border: var(--stroke) solid var(--ink);
  background: var(--mustard);
  padding: var(--space-6) var(--space-7);
  margin: var(--space-7) 0;
}
.takeaways h2 { margin-bottom: var(--space-4); }
.takeaways ol { margin: 0; padding-left: 1.4em; }
.takeaways li {
  font-family: var(--font-body-en);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.takeaways li b { font-weight: 700; }

/* ---------- show-data toggle + sr table ---------- */
.data-toggle {
  font-family: var(--font-body-en);
  font-size: var(--fs-caption);
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--ink-3);
  padding: 0 0 1px;
  cursor: pointer;
  margin-top: var(--space-2);
}
.data-toggle:hover { color: var(--coral); border-bottom-color: var(--coral); }
.data-table { margin: var(--space-3) 0; border-collapse: collapse; width: 100%; }
.data-table[hidden] { display: none; }
.data-table th, .data-table td {
  border: 1px solid var(--grid);
  padding: 5px 10px;
  font-family: var(--font-body-en);
  font-size: var(--fs-caption);
  text-align: right;
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table thead th { font-family: var(--font-label); letter-spacing: 0.06em; background: var(--cream-2); }

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

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .a-overview { grid-template-columns: repeat(2, 1fr); }
  .a-stat { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .a-stat:nth-child(even) { border-right: 0; }
  .judge-grid { grid-template-columns: 1fr; }
  .hbar-row { grid-template-columns: 130px 1fr 38px; gap: var(--space-2); }
  .hbar-row .name { font-size: var(--fs-caption); }
  .takeaways { padding: var(--space-5) var(--space-4); }
}
@media (max-width: 460px) {
  .a-overview { grid-template-columns: 1fr; }
  .a-stat { border-right: 0; }
  .a-stat:nth-child(even) { border-right: 0; }
}

/* =========================================================================
   CENTERED EDITORIAL LAYOUT
   The page reads as a centered column. Headlines, eyebrows, decks, captions
   and short intros are center-aligned; charts, tables, legends and card grids
   are horizontally centered in the column. Long multi-paragraph reading text
   (the lede, the judge-card bodies) stays in a centered block but keeps its
   internal text left-aligned for line-length readability.
   ========================================================================= */

/* hero — center the eyebrow, breadcrumb, headline, deck; lede block is
   centered but its prose reads left-aligned within a sensible measure. */
.a-hero { text-align: center; }
.a-hero .breadcrumbs,
.a-hero .eyebrow { justify-content: center; }
.a-hero .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0 6px; }
.a-hero .headline { text-align: center; }
.a-hero .deck { margin-left: auto; margin-right: auto; }
.a-hero .lede {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.a-hero .rule-thick { margin-left: auto; margin-right: auto; }

/* section chrome — center the eyebrow, title and short captions/notes */
.a-section { text-align: center; }
.a-eyebrow { text-align: center; }
.a-title { text-align: center; }
.a-caption,
.a-note {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* charts + svg centered in the column */
.chart { text-align: center; }
.chart svg { margin-left: auto; margin-right: auto; }

/* legends centered */
.legend { justify-content: center; }

/* tables centered with a sensible max width; cell text-align is set in the
   base rules above (left for first column, right for numbers) — preserve it */
.data-table,
.heatmap { margin-left: auto; margin-right: auto; }
.heat-wrap { display: flex; justify-content: center; }
.data-table { max-width: 760px; }

/* leaderboard + province bars: center the whole bar list as a block */
#leaderboard,
#provinces-chart {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* judge grid centered; card bodies read left-aligned (long-form) */
.judge-grid { justify-content: center; }
.judge-card { text-align: left; }
.judge-card h3 { text-align: center; }
.judge-card .jl { text-align: left; }
.judge-card p { text-align: left; }
.judge-card .revealed { text-align: center; }
.judge-card .revealed .jl { text-align: center; }

/* topics editorial reading block: heading centered, prose centered-short */
#topics-reading { text-align: center; }

/* takeaways closer: heading centered, list items read left-aligned */
.takeaways { text-align: center; }
.takeaways ol {
  display: inline-block;
  text-align: left;
  max-width: 70ch;
}
.takeaways li { text-align: left; }