/* ===========================================================================
   Theme — Report 2026-25, "Africa Ascendant"

   Aesthetic: dawn horizon. The report spans 1500 to 2500, so the page reads as
   a time arrow from night to morning: the masthead is a sky graded in
   horizontal bands from deep indigo through violet and terracotta to an amber
   horizon line (the first banded-sky masthead in the series, distinct from
   14's water strata), and every h2 sits on a short indigo-to-amber rule.
   Africa is always amber, the rest of the world indigo, the diaspora teal
   and mixed ancestry terracotta, in every chart and tile.
   Sora for display, Albert Sans for text, Victor Mono for figures.

   Loaded after report.css; report.js reads these tokens for chart colours,
   and charts.js reads the --c-* tokens so no hex lives in the script.
   =========================================================================== */

:root {
  --bg: #f8f5f0;
  --bg-card: #fffdf9;
  --bg-accent: #f1ebe2;
  --bg-dark: #1b1f3d;
  --bg-dark-2: #12152c;

  --text: #191b2e;
  --text-secondary: #3d4058;
  --text-muted: #6b6d82;
  --text-inverse: #f8f5f0;

  --primary: #1f2a5c;
  --primary-light: #b45a2c;
  --accent: #e0962a;
  --accent-light: #f2c27a;

  --border: #e4ddd2;
  --border-light: #eee8df;
  --rule: #d6cdbf;

  --c-africa: #e0962a;
  --c-africa-dark: #b36f12;
  --c-rest: #3e4a86;
  --c-diaspora: #23877f;
  --c-mixed: #c0552e;
  --c-muted: #a8a7b4;

  --chart-blue: #3e4a86;
  --chart-blue-light: #8f98c9;
  --chart-gold: #e0962a;
  --chart-red: #c0552e;
  --chart-teal: #23877f;
  --chart-gray: #9a99a8;
  --chart-orange: #d97a3a;
  --chart-purple: #6c4f9a;

  --serif: "Sora", -apple-system, BlinkMacSystemFont, "system-ui", sans-serif;
  --sans: "Albert Sans", -apple-system, BlinkMacSystemFont, "system-ui", "Segoe UI", sans-serif;
  --mono: "Victor Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --dawn: linear-gradient(90deg, #1f2a5c, #4b3b7a 30%, #b45a2c 65%, #e0962a);

  --max-width: 1200px;
}

body { font-size: 1.02rem; line-height: 1.66; }

::selection { background: rgba(224, 150, 42, 0.25); }
:where(a, button, [tabindex], input, select):focus-visible { outline: 2px solid var(--c-africa); outline-offset: 2px; }

a { color: var(--primary-light); }
a:hover { color: var(--primary); }

.progress__bar { background: var(--dawn); }
.skip-link { background: var(--primary); }

/* --- masthead: a dawn sky in bands --------------------------------------------- */

.masthead {
  position: relative;
  color: var(--text-inverse);
  border-bottom: 0;
  padding: 3.2rem var(--gutter) 3rem;
  background:
    linear-gradient(180deg,
      #12152c 0%, #12152c 14%,
      #1b1f3d 14%, #1b1f3d 30%,
      #262a55 30%, #262a55 46%,
      #3a3466 46%, #3a3466 60%,
      #5b3f6e 60%, #5b3f6e 72%,
      #8a4a57 72%, #8a4a57 82%,
      #b45a2c 82%, #b45a2c 91%,
      #d17a28 91%, #d17a28 97%,
      #e0962a 97%, #e0962a 100%);
}
.masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #f6d38c;
  box-shadow: 0 0 18px 4px rgba(246, 211, 140, 0.55);
}
.masthead .overline {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent-light);
  margin-bottom: 1rem;
}
.masthead .overline::before { content: "HYBRID DASHBOARD · 1500–2500 · "; color: #fff; }
.masthead h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 14ch;
  color: #fff;
}
.masthead .subtitle { color: #e6dfef; font-weight: 400; max-width: 62ch; }
.masthead .strapline {
  font-family: var(--sans);
  font-style: normal;
  font-size: 1.04rem;
  color: #fbeedd;
  border-left: 3px solid var(--accent);
  max-width: 76ch;
}
.masthead .meta-row {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-shadow: 0 1px 2px rgba(18, 21, 44, 0.45);
  font-family: var(--mono);
  font-size: 0.76rem;
}
.masthead .meta-row strong {
  color: #fff;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

/* --- nav --------------------------------------------------------------------- */

.sticky-nav { background: rgba(248, 245, 240, 0.96); border-bottom: 1px solid var(--border); }
.nav-inner a { color: var(--text-muted); font-family: var(--mono); font-size: 0.74rem; }
.nav-inner a:hover { color: var(--text); }
.nav-inner a.is-active { color: var(--primary); border-bottom-color: var(--c-africa); }

/* --- headings ---------------------------------------------------------------------- */

section > h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  letter-spacing: -0.03em;
  color: var(--primary);
  border-bottom: 0;
  padding-bottom: 0.7rem;
  background:
    var(--dawn) 0 100% / 180px 5px no-repeat,
    linear-gradient(var(--border), var(--border)) 0 calc(100% - 2px) / 100% 1px no-repeat;
}
section > .section-dek { font-style: normal; color: var(--text-muted); font-size: 1.05rem; max-width: none; }
.abstract h2, .endmatter h2 { background: none; }

.section-rule { border-top: 1px solid var(--border-light); margin: 2.6rem 0 2.8rem; }

/* --- generated blocks ------------------------------------------------------------ */

.abstract { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--c-africa); }
.abstract h2 { color: var(--primary); font-family: var(--mono); letter-spacing: 0.14em; }
.endmatter .kw { background: var(--bg-accent); border-color: var(--border); font-family: var(--mono); font-size: 0.7rem; }
.endmatter dt { font-family: var(--mono); font-size: 0.66rem; }

/* --- KPI board ----------------------------------------------------------------------- */

.kpi-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 1.6rem 0; }
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.05rem 0.85rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-top: 4px solid var(--k, var(--c-muted));
}
.kpi--africa { --k: var(--c-africa); }
.kpi--rest { --k: var(--c-rest); }
.kpi--diaspora { --k: var(--c-diaspora); }
.kpi--mixed { --k: var(--c-mixed); }
.kpi-value { font-family: var(--serif); font-weight: 700; font-size: clamp(1.55rem, 2.9vw, 2.1rem); letter-spacing: -0.035em; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi--africa .kpi-value { color: var(--c-africa-dark); }
.kpi--diaspora .kpi-value { color: var(--c-diaspora); }
.kpi--mixed .kpi-value { color: var(--c-mixed); }
.kpi--rest .kpi-value { color: var(--c-rest); }
.kpi-label { font-size: 0.85rem; line-height: 1.42; color: var(--text-secondary); margin-top: 0.45rem; flex: 1; }
.kpi-source { font-family: var(--mono); font-size: 0.64rem; color: var(--text-muted); margin-top: 0.6rem; border-top: 1px solid var(--border-light); padding-top: 0.4rem; }

/* --- readout ------------------------------------------------------------------------- */

.readout {
  background: linear-gradient(135deg, #1b1f3d, #2b2a55);
  border-radius: 12px;
  padding: 1.15rem 1.4rem 0.45rem;
  margin: 1.6rem 0;
  position: relative;
  overflow: hidden;
}
.readout::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--dawn); }
.readout-title { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-light); margin: 0 0 0.4rem !important; }
.readout p { color: #dcdcec; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.readout strong { color: #fff; }

/* --- panels ---------------------------------------------------------------------------- */

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.2rem 0; }
.dash-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem 0.9rem; min-width: 0; }
.panel--wide { grid-column: 1 / -1; }
.panel--hero { margin: 1.2rem 0; padding: 1.1rem 1.2rem 1rem; }
.panel-head { border-bottom: 1px solid var(--border-light); margin-bottom: 0.75rem; padding-bottom: 0.55rem; }
.panel-title { font-family: var(--serif); font-weight: 600; font-size: 1rem; letter-spacing: -0.015em; color: var(--text); margin: 0 !important; }
.panel-meta { font-family: var(--mono); font-size: 0.68rem; color: var(--text-muted); margin: 0.2rem 0 0.4rem !important; }
.panel-note { font-size: 0.83rem; line-height: 1.5; color: var(--text-muted); margin: 0.6rem 0 0 !important; text-align: left !important; }
.panel canvas { max-width: 100%; }
.panel .chart-frame { height: 300px; }
.panel .chart-frame--tall { height: 380px; }
.panel .chart-frame--short { height: 250px; }

.stat-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; border-left: 4px solid var(--k, var(--c-muted)); }
.stat-tile--africa { --k: var(--c-africa); }
.stat-tile--rest { --k: var(--c-rest); }
.stat-tile--diaspora { --k: var(--c-diaspora); }
.stat-tile--mixed { --k: var(--c-mixed); }
.stat-tile-value { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--text); margin: 0 !important; font-variant-numeric: tabular-nums; }
.stat-tile-label { font-size: 0.82rem; color: var(--text-muted); margin: 0.15rem 0 0 !important; text-align: left !important; line-height: 1.45; }

/* --- controls ---------------------------------------------------------------------------- */

.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 22px; margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-light); }
.slider { display: grid; gap: 3px; }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.slider label { font-family: var(--serif); font-weight: 600; font-size: 0.86rem; color: var(--text); }
.slider output { font-family: var(--mono); font-size: 0.8rem; color: var(--primary-light); white-space: nowrap; }
.slider .hint { font-size: 0.8rem; line-height: 1.35; color: var(--text-muted); margin: 0 !important; text-align: left !important; }
.slider input[type="range"] { width: 100%; accent-color: var(--c-africa); margin: 2px 0; }
.seg-wrap { display: grid; gap: 5px; }
.seg-wrap .seg-label { font-family: var(--serif); font-weight: 600; font-size: 0.86rem; color: var(--text); }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--bg); width: fit-content; }
.segmented button { font: inherit; font-family: var(--mono); font-size: 0.74rem; padding: 0.42rem 0.75rem; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--rule); }
.segmented button.is-on { background: var(--primary); color: #fff; }
.btn { font: inherit; font-family: var(--mono); font-size: 0.74rem; padding: 0.42rem 0.75rem; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; width: fit-content; }
.btn:hover { border-color: var(--c-africa); color: var(--c-africa-dark); }
.sim-note { font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted); margin: 0.4rem 0 0 !important; }

/* --- tables --------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
.ledger { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border-light); }
.ledger thead th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--rule); }
.ledger tbody th { font-family: var(--serif); font-weight: 600; color: var(--text); }
.ledger td { color: var(--text-secondary); }
.ledger td.num { font-family: var(--mono); color: var(--primary); white-space: nowrap; }

/* --- references, footer --------------------------------------------------------------------- */

.ref-list .ref-org { font-family: var(--mono); color: var(--primary-light); font-size: 0.68rem; }
.report-footer { border-top: 0; position: relative; padding-top: calc(3rem + 5px); }
.report-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--dawn); }
.footer-inner h3 { color: #fff; font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; }
.footer-inner a { color: var(--accent-light); }
.cite-box { border-left-color: var(--c-africa); }

/* --- responsive ------------------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .kpi-board, .dash-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid--three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .dash-grid, .dash-grid--four { grid-template-columns: minmax(0, 1fr); }
  .masthead { padding-top: 2.2rem; }
}
@media (max-width: 420px) {
  .kpi-board { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .controls { display: none; }
  .masthead, .masthead::after, .readout, .report-footer::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}