/**
 * @file
 * "1000 Beginnings — Transplants" data deck, served at /cure-1000-beginnings.
 *
 * HAND-AUTHORED. Unlike css/style.css and css/bootstrap.css in this directory,
 * gulp does NOT generate this file — `gulp styles` only compiles
 * scss/style.scss and node_modules/bootstrap/scss/bootstrap.scss. Edit this
 * file directly; there is no .scss source for it.
 *
 * It is deliberately NOT part of scss/style.scss and never loads alongside
 * Bootstrap. The deck is a standalone 16:9 letterboxed presentation with its
 * own reset (`html,body{overflow:hidden;height:100%}`) and its own token set,
 * so it is served as a complete HTML document that bypasses the site's
 * app-shell page.html.twig entirely. See docs/decisions/0006-*.md.
 *
 * Everything from the "Player chrome" rule upward is verbatim from the
 * organisers' supplied export, with the two @font-face data: URIs and the six
 * base64 images swapped for real asset files. Do not restyle it — it is a
 * designed artifact. Sankalp additions are fenced at the bottom.
 */

@font-face{ font-family:'Playfair Display Var'; src:url(../fonts/playfair-display-var.woff2) format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Karla Var'; src:url(../fonts/karla-var.woff2) format('woff2'); font-weight:300 800; font-style:normal; font-display:swap; }

:root{
  --font-display:'Playfair Display Var', Georgia, serif;
  --font-body:'Karla Var', system-ui, -apple-system, sans-serif;
  --radius-s:8px; --radius-m:14px; --radius-l:18px;

  --ink:#0F1F2E; --ink-soft:#42525F; --ink-faint:#6E7C86;
  --paper:#FBF3E6; --paper-raised:#FFFEFA; --paper-sunken:#F1E6D2; --line:#E3D5BC;
  --accent:#E98A2B; --accent-soft:#F8DDB4; --accent-ink:#6B3E12;
  --accent2:#4F6F53; --accent2-soft:#DCE5DA; --gold:#D9B45A; --sage:#A6B59A;
  --shadow:0 1px 2px rgba(15,31,46,0.06), 0 6px 18px -10px rgba(15,31,46,0.18);
  --letterbox:#0B141C;

  /* Validated categorical set (dataviz skill: fixed hue order, CVD all-pairs pass
     on this deck's own light/dark surfaces) — data-encoding colors, kept separate
     from the brand accent tokens above. */
  --cat-1:#2a78d6; /* Thalassemia */
  --cat-2:#1baf7a; /* Aplastic Anemia */
  --cat-3:#eda100; /* Sickle Cell Disease */
  --cat-4:#008300; /* Bone Marrow Failure */
  --cat-5:#e34948; /* Immune Deficiency */
  --cat-6:#eb6834; /* Other */
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#F5EEE1; --ink-soft:#CBD6D2; --ink-faint:#93A5A0;
    --paper:#101B26; --paper-raised:#17242F; --paper-sunken:#0B141C; --line:#2B3B47;
    --accent:#F0A24D; --accent-soft:#4A3216; --accent-ink:#FBE3C2;
    --accent2:#7FA184; --accent2-soft:#22332A; --gold:#E4C578; --sage:#8FA084;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 10px 24px -12px rgba(0,0,0,0.6);
    --letterbox:#000000;
    --cat-1:#3987e5; --cat-2:#199e70; --cat-3:#c98500; --cat-4:#008300; --cat-5:#e66767; --cat-6:#d95926;
  }
}
:root[data-theme="dark"]{
  --ink:#F5EEE1; --ink-soft:#CBD6D2; --ink-faint:#93A5A0;
  --paper:#101B26; --paper-raised:#17242F; --paper-sunken:#0B141C; --line:#2B3B47;
  --accent:#F0A24D; --accent-soft:#4A3216; --accent-ink:#FBE3C2;
  --accent2:#7FA184; --accent2-soft:#22332A; --gold:#E4C578; --sage:#8FA084;
  --letterbox:#000000;
  --cat-1:#3987e5; --cat-2:#199e70; --cat-3:#c98500; --cat-4:#008300; --cat-5:#e66767; --cat-6:#d95926;
}
:root[data-theme="light"]{
  --ink:#0F1F2E; --ink-soft:#42525F; --ink-faint:#6E7C86;
  --paper:#FBF3E6; --paper-raised:#FFFEFA; --paper-sunken:#F1E6D2; --line:#E3D5BC;
  --accent:#E98A2B; --accent-soft:#F8DDB4; --accent-ink:#6B3E12;
  --accent2:#4F6F53; --accent2-soft:#DCE5DA; --gold:#D9B45A; --sage:#A6B59A;
  --letterbox:#0B141C;
  --cat-1:#2a78d6; --cat-2:#1baf7a; --cat-3:#eda100; --cat-4:#008300; --cat-5:#e34948; --cat-6:#eb6834;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--letterbox); overflow:hidden; }
body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
.icon{ width:1em; height:1em; fill:currentColor; flex:none; }
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; margin:0; }
p{ margin:0; }

.cast-wrap{ height:100vh; width:100vw; display:flex; align-items:center; justify-content:center; position:relative; }
.cast-frame{
  position:relative; width:100vw; height:56.25vw; max-height:100vh; max-width:177.78vh;
  overflow:hidden; box-shadow:0 0 80px rgba(0,0,0,0.45);
}

.stage{
  position:absolute; inset:0;
  background:var(--paper); color:var(--ink); overflow:hidden;
  font-size:clamp(12px, 1.35vw, 29px);
  display:flex; flex-direction:column;
  padding:1.15em 1.7em; gap:0.6em;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.9s ease;
}
.stage.active{ opacity:1; visibility:visible; pointer-events:auto; }
.stage::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 38% at 10% -5%, var(--accent-soft) 0%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 105% 108%, var(--accent2-soft) 0%, transparent 68%);
  opacity:0.55;
}
.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow); overflow:hidden; position:relative; }

/* ---------- Header ---------- */
.band-header{ flex:none; height:6.1em; display:flex; align-items:flex-start; justify-content:space-between; gap:1.2em; position:relative; z-index:1; }
.brand{ display:flex; align-items:flex-start; gap:0.75em; }
.centre-badge{
  flex:none; width:2.5em; height:2.5em; border-radius:0.6em; background:var(--accent);
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.05em;
  display:flex; align-items:center; justify-content:center; letter-spacing:0.02em;
  box-shadow:var(--shadow);
}
.centre-badge.all{ background:var(--accent2); }
.centre-name{ font-size:1.85em; font-weight:700; line-height:1.08; }
.centre-strapline{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:0.82em; color:var(--accent-ink); margin-top:0.18em; max-width:44ch; }
.centre-meta{ display:flex; gap:1.1em; margin-top:0.3em; flex-wrap:wrap; }
.centre-meta span{ font-size:0.58em; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:0.35em; }
.header-right{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; }
.logo-plate{ padding:0.35em 0.6em; border-radius:var(--radius-s); background:#FBF3E6; box-shadow:var(--shadow); }
.logo-mark{ height:3.1em; width:auto; display:block; }

/* ---------- KPI stats ---------- */
.band-stats{ flex:none; height:5.6em; display:grid; gap:0.55em; position:relative; z-index:1; }
.band-stats.cols-5{ grid-template-columns:repeat(5,1fr); }
.band-stats.cols-6{ grid-template-columns:repeat(6,1fr); }
.stat-tile{ padding:0.5em 0.65em; display:flex; flex-direction:column; justify-content:center; }
.stat-tile .stat-number{ font-family:var(--font-display); font-weight:700; font-size:1.62em; font-variant-numeric:tabular-nums; line-height:1; }
.stat-tile .stat-label{ margin-top:0.2em; font-size:0.55em; color:var(--ink-soft); font-weight:600; }

/* ---------- Main content grid (KPI + growth stages) ---------- */
.band-main{ flex:2.5; min-height:0; display:grid; grid-template-columns:1fr 1.7fr; gap:0.6em; position:relative; z-index:1; }
.band-main.split-even{ grid-template-columns:1fr 1fr; }
.panel{ padding:0.75em 1em; display:flex; flex-direction:column; min-height:0; }
.panel h3{ font-size:0.85em; font-weight:700; margin-bottom:0.4em; flex:none; }
.panel .sub{ font-size:0.55em; color:var(--ink-faint); font-weight:600; margin-bottom:0.5em; }

.mix-row{ display:flex; align-items:center; gap:0.6em; margin-bottom:0.42em; flex:none; }
.mix-row .sw{ width:0.85em; height:0.85em; border-radius:3px; flex:none; }
.mix-row .name{ flex:none; width:15ch; font-size:0.58em; font-weight:700; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mix-row .track{ flex:1; height:0.6em; background:var(--paper-sunken); border-radius:999px; overflow:hidden; }
.mix-row .fill{ height:100%; border-radius:999px; }
.mix-row .pct{ flex:none; width:4.5ch; text-align:right; font-size:0.58em; font-weight:700; font-variant-numeric:tabular-nums; }

.gender-bar{ display:flex; height:1.5em; border-radius:999px; overflow:hidden; border:1px solid var(--line); margin-top:auto; flex:none; }
.gender-bar span{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.56em; }
.gender-bar .m{ background:var(--cat-1); } .gender-bar .f{ background:var(--cat-6); }

.growth-panel{ position:relative; }
.growth-head{ display:flex; justify-content:space-between; align-items:baseline; flex:none; }
.growth-head .sub{ font-size:0.5em; color:var(--ink-faint); font-weight:600; margin:0; }
.growth-chart{ flex:1; min-height:0; position:relative; margin-top:0.3em; }
.growth-chart svg{ width:100%; height:100%; overflow:visible; }
.gline{ fill:none; stroke-width:3; transition:stroke-dashoffset 2s cubic-bezier(.22,.7,.34,1); }
.garea{ opacity:0.16; transition:opacity 1.4s ease; }
.gdot{ transition:opacity 0.6s ease 1.6s; }
.glabel{ font-family:var(--font-body); font-weight:700; font-variant-numeric:tabular-nums; }
.growth-legend{ flex:none; display:flex; gap:1.6em; margin-top:0.5em; flex-wrap:wrap; }
.growth-legend span{ display:inline-flex; align-items:center; gap:0.45em; font-size:0.62em; font-weight:700; color:var(--ink-soft); }
.growth-legend .sw{ width:1.5em; height:0.3em; border-radius:2px; }
.growth-legend b{ font-variant-numeric:tabular-nums; color:var(--ink); font-size:1.05em; }

/* ---------- Rosling bubble chart ---------- */
.bubble-stage-main{ flex:2.5; min-height:0; display:grid; grid-template-columns:1fr; gap:0.6em; position:relative; z-index:1; }
.bubble-panel{ padding:0.7em 1.1em 0.5em; }
.bubble-head{ display:flex; justify-content:space-between; align-items:baseline; flex:none; }
.bubble-head .sub{ font-size:0.52em; color:var(--ink-faint); font-weight:600; }
.bubble-area{ flex:1; min-height:0; position:relative; display:flex; gap:0.8em; margin-top:0.3em; }
.bubble-svg-wrap{ flex:1; min-height:0; position:relative; }
.bubble-svg-wrap svg{ width:100%; height:100%; overflow:visible; }
.axis-line{ stroke:var(--line); stroke-width:1.5; }
.grid-line{ stroke:var(--line); stroke-width:1; opacity:0.55; }
.axis-label{ font-size:11px; fill:var(--ink-faint); font-weight:700; font-family:var(--font-body); }
.axis-title{ font-size:12px; fill:var(--ink-soft); font-weight:700; font-family:var(--font-body); }
.bubble-year{ font-family:var(--font-display); font-weight:800; fill:var(--ink); opacity:0.16; }
.bub{ transition:cx 900ms cubic-bezier(.22,.7,.34,1), cy 900ms cubic-bezier(.22,.7,.34,1), r 900ms cubic-bezier(.22,.7,.34,1), opacity 500ms ease; stroke:var(--paper-raised); stroke-width:2; }
.bub-trail{ transition:cx 900ms linear, cy 900ms linear, opacity 500ms ease; stroke:none; }
.bub-label{ font-size:10.5px; font-weight:700; font-family:var(--font-body); fill:var(--ink); pointer-events:none; transition:opacity 400ms ease; }
.bubble-legend{ flex:none; width:11.5em; display:flex; flex-direction:column; justify-content:center; gap:0.55em; }
.bubble-legend .item{ display:flex; align-items:center; gap:0.5em; font-size:0.58em; font-weight:700; color:var(--ink-soft); }
.bubble-legend .sw{ width:0.9em; height:0.9em; border-radius:50%; flex:none; }
.bubble-controls{ flex:none; display:flex; align-items:center; gap:0.7em; margin-top:0.45em; }
.bubble-controls button{
  width:2.1em; height:2.1em; border-radius:50%; border:1px solid var(--line);
  background:var(--paper-sunken); color:var(--ink); cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.bubble-controls button:hover{ background:var(--accent-soft); }
.bubble-controls input[type=range]{ flex:1; accent-color:var(--accent); }
.bubble-controls .year-readout{ flex:none; width:3.6ch; font-family:var(--font-display); font-weight:800; font-size:1.1em; text-align:right; font-variant-numeric:tabular-nums; }
.bubble-caption{ font-size:0.5em; color:var(--ink-faint); font-weight:600; margin-top:0.35em; flex:none; }

/* ---------- Mosaic ---------- */
.mosaic-panel{ flex:2.5; min-height:0; padding:0.9em 1.3em; display:flex; flex-direction:column; }
.mosaic-callout{ flex:none; margin-bottom:0.5em; }
.mosaic-callout .n{ font-family:var(--font-display); font-weight:800; font-size:1.7em; color:var(--accent-ink); }
.mosaic-grid{
  flex:1; min-height:0; height:100%; overflow:hidden;
  display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(4,1fr); gap:0.32em;
}
.mosaic-grid img{
  width:100%; height:100%; min-height:0; object-fit:cover; border-radius:5px; box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.mosaic-note{ flex:none; margin-top:0.5em; font-size:0.46em; color:var(--ink-faint); font-weight:600; }

/* ---------- Funding / donut chart ---------- */
.fund-main{ flex:2.5; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0.6em; position:relative; z-index:1; }
.fund-panel{ padding:0.8em 1.1em; display:flex; flex-direction:column; min-height:0; }
.fund-panel h3{ font-size:0.85em; font-weight:700; flex:none; }
.fund-panel .sub{ font-size:0.52em; color:var(--ink-faint); font-weight:600; margin-top:0.15em; flex:none; }
.fund-body{ flex:1; min-height:0; display:flex; align-items:center; gap:1.1em; margin-top:0.4em; }
.donut-wrap{ position:relative; width:10.5em; height:10.5em; flex:none; }
.donut-wrap svg{ width:100%; height:100%; }
.donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.donut-center .amt{ font-family:var(--font-display); font-weight:800; font-size:1.05em; line-height:1.05; }
.donut-center .lbl{ font-size:0.44em; font-weight:700; color:var(--ink-soft); margin-top:0.22em; }
.fund-legend{ flex:1; display:flex; flex-direction:column; gap:0.55em; justify-content:center; }
.fund-legend .row{ display:flex; align-items:center; gap:0.55em; }
.fund-legend .sw{ width:0.85em; height:0.85em; border-radius:3px; flex:none; }
.fund-legend .name{ flex:1; font-size:0.56em; font-weight:700; color:var(--ink-soft); }
.fund-legend .val{ text-align:right; font-size:0.62em; font-weight:800; font-variant-numeric:tabular-nums; }
.fund-legend .val .pct{ font-size:0.75em; color:var(--ink-faint); font-weight:600; margin-left:0.35em; }
.partner-row{ flex:none; display:flex; gap:0.55em; align-items:stretch; margin-top:0.6em; flex-wrap:wrap; }
.partner-plate{ background:#FFFEFA; border:1px solid var(--line); border-radius:8px; padding:0.3em 0.65em; box-shadow:var(--shadow); display:flex; align-items:center; height:2.5em; }
.partner-plate img{ height:100%; width:auto; display:block; }
.partner-plate.text-badge{ font-family:var(--font-display); font-weight:800; font-size:0.64em; color:var(--ink); letter-spacing:0.02em; padding:0.3em 0.85em; flex-direction:column; align-items:flex-start; justify-content:center; }
.partner-plate.text-badge small{ display:block; font-family:var(--font-body); font-weight:600; font-size:0.5em; color:var(--ink-faint); letter-spacing:0.03em; margin-top:0.1em; }
.fund-scheme-note{ flex:none; margin-top:0.6em; font-size:0.5em; color:var(--ink-faint); font-weight:600; line-height:1.4; }
.fund-scheme-note b{ color:var(--ink-soft); }

/* ---------- Donor wall ---------- */
.donor-panel{ flex:2.5; min-height:0; padding:0.9em 1.4em; display:flex; flex-direction:column; }
.donor-panel .sub{ flex:none; font-size:0.55em; color:var(--ink-faint); font-weight:600; margin-bottom:0.5em; }
.donor-grid{ flex:1; min-height:0; overflow:hidden; column-count:3; column-gap:2.2em; font-size:0.6em; }
.donor-grid div{ break-inside:avoid; -webkit-column-break-inside:avoid; padding:0.32em 0; border-bottom:1px solid var(--line); font-weight:600; color:var(--ink-soft); }

/* ---------- Title stage ---------- */
.title-stage{ align-items:center; justify-content:center; text-align:center; gap:0.4em; }
.title-stage .campaign-logo{ height:4.6em; width:auto; margin-bottom:0.3em; }
.title-kicker{ font-size:0.7em; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent-ink); }
.title-h1{ font-size:3.4em; font-weight:800; letter-spacing:0.03em; }
.title-h1 b{ color:var(--accent-ink); }
.title-sub{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:1.1em; color:var(--ink-soft); margin-top:0.15em; max-width:30ch; }
.title-hero{ display:flex; gap:2.4em; margin-top:0.9em; }
.title-hero .item{ text-align:center; }
.title-hero .n{ font-family:var(--font-display); font-weight:800; font-size:2em; font-variant-numeric:tabular-nums; }
.title-hero .l{ font-size:0.55em; font-weight:700; color:var(--ink-soft); margin-top:0.15em; }
/* The as-of qualifier on the title stage. Deliberately quiet but legible —
   --ink-soft is the deck's own secondary text colour, not a greyed-out
   disclaimer treatment. See docs/DATA-DICTIONARY.md. */
/* max() rather than a plain em: .stage sizes everything from
   clamp(12px, 1.35vw, 29px), so on a phone in landscape (~844px, where the
   clamp floor bites) 0.5em resolves to 6px. That is fine for the export's
   decorative colophon and not fine for a clinical qualifier the data
   dictionary requires be readable. 11px is the floor; it still scales up. */
.title-asof{ font-size:max(11px, 0.5em); font-weight:600; color:var(--ink-soft); margin:0.9em 0 0; letter-spacing:0.01em; }
.band-footer__asof{ font-size:max(11px, 1em); }
.title-tags{ display:flex; gap:1.4em; margin-top:1.1em; }
.title-tags span{ font-size:0.55em; font-weight:700; color:var(--ink-soft); display:flex; align-items:center; gap:0.4em; }
.title-tags .dot{ width:0.6em; height:0.6em; border-radius:50%; }

/* ---------- Footer ---------- */
.band-footer{ flex:none; height:1.4em; display:flex; align-items:center; justify-content:space-between; font-size:0.48em; color:var(--ink-faint); font-weight:600; border-top:1px solid var(--line); padding-top:0.3em; position:relative; z-index:1; }

/* ---------- Player chrome ---------- */
.player-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:14px 20px; background:rgba(10,16,20,0.72); backdrop-filter:blur(6px);
  opacity:1; transition:opacity 0.5s ease;
}
.player-bar.idle{ opacity:0; pointer-events:none; }
.player-bar button{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08); color:#F5EEE1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; flex:none;
}
.player-bar button:hover{ background:rgba(255,255,255,0.18); }
.player-bar .icon{ width:16px; height:16px; }
.player-dots{ display:flex; gap:8px; align-items:center; }
.player-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.3); border:none; }
.player-dots button.on{ background:#F0A24D; width:22px; border-radius:5px; }
.player-label{ color:#F5EEE1; font-family:var(--font-body); font-size:12px; font-weight:700; min-width:15ch; text-align:center; }

/* ---------- Reduced motion ----------
   WCAG 2.2.2 is satisfied by the export's pause button, but the deck still
   starts moving on load. js/cure-deck.js does not start the 14s autoplay
   under this preference; this kills the slide cross-fade and the chart
   draw-on to match. */
@media (prefers-reduced-motion: reduce){
  /* Every transition in the export, killed by name rather than with a blanket
     `*{transition:none}` — the donut and the bubble plot both *position*
     themselves with stroke-dashoffset / cx / cy / r, so zeroing those
     properties (as opposed to their transitions) would draw the charts wrong,
     not just draw them instantly. */
  .stage,
  .player-bar,
  .gline, .garea, .gdot,
  .bub, .bub-trail, .bub-label{ transition:none; }
}