@import url('../tokens/colors.css');
@import url('../tokens/typography.css');
@import url('../tokens/spacing.css');

:root {
  --report-page-w: 800px;
  --report-page-h: 675px;
  --report-pad: 60px;
  --report-grad: var(--gradient);
  --report-grad-h: var(--gradient-horizontal);
  /* Phase C: re-alias the legacy --report-* token family onto the
     canonical sim/assess/multi surface tokens. Two of these shift
     visible value:
       --report-ink     was #475569 slate     → now #1B2230 (darker, editorial)
       --report-border  was #475569 slate     → now #E2E8F0 (light hairline)
     The other two preserve their existing values but now share a
     single source of truth with the canvas surfaces:
       --report-bg-page = --surface-canvas (#FAFCFE)
       --report-white   = --surface-card   (#FFFFFF) */
  --report-ink: var(--navy);
  --report-ink-60: var(--ink-2);
  --report-ink-35: var(--gray-mid);
  --report-ink-10: #E5E5E5;
  /* Three-tier ink ladder aliases — same canonical source. */
  --report-ink-2: var(--ink-2);
  --report-ink-3: var(--gray-mid);
  --report-border: var(--gray-light);
  --report-bg-page: var(--off-white);
  --report-white: var(--white);
  /* Christine: shared page-background gradient — single source so every
     report type uses the identical white→soft-gray fade. Solid white for
     the first 300px, fading to a 60% gray-light by 600px. Simulation
     reports show it via .report-paginated; the card-stack reports
     (research / framework / assessment / board) reuse this same token so
     the soft gray is guaranteed identical. Print resets to flat white. */
  --report-page-gradient: linear-gradient(180deg, var(--report-white) 300px, var(--gray-white) 600px);
  /* Pale blue-gray card fill — matches T2a "From the conversation" callout. */
  --report-bg-card: #F7F9FC;
  /* Performance trio aligned to the score-system colors so every
     bullet/dot/tag tied to good/ok/bad picks up the new palette
     automatically. */
  --report-green: #3FDBB4; /* good  → teal */
  --report-amber: #FFC872; /* ok    → amber */
  --report-red:   #FF6AC6; /* bad   → pink */
  --bg-subtle: var(--gray-background);
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xs: 4px;
  --radius-full: 9999px;
  --spacing-7: 1.75rem;
  --card-heading-size: 14px;
  --card-heading-weight: 600;
  --card-heading-spacing: 1.1px;
  --card-heading-color: var(--report-ink);
  /* Uppercase eyebrow/micro-label recipe (e.g. "HONEST VIEW" callout
     labels) — black at 700 weight, distinct from the regular
     --card-heading-* recipe above (600 weight, not always uppercase).
     Christine, 4 July 2026. */
  --uppercase-label-size: var(--text-xs);
  --uppercase-label-weight: 700;
  --uppercase-label-spacing: 0.06em;
  --uppercase-label-color: var(--black);
  /* Canonical stat-value size shared by .mi-stat-card-value,
     .mi-stat-callout-value, and .mi-capital-amount. One token so
     bumping it stays in lockstep across all three card families.
     Christine 2026-05-27: 30px → 24px. */
  --card-value-size: 24px;
  --card-value-weight: 500;

  /* ── Dot-plot TIER mode dot sizing ────────────────────────────
     When a dot-plot's rows carry a `share` (% of items in that tier),
     the dot diameter encodes share: the dominant tier renders at
     --rpt-dot-max, the rest scale down toward --rpt-dot-min. Sized so
     the largest dot still clears the 28px track. Christine 2026-05-31. */
  --rpt-dot-min: 10px;
  --rpt-dot-max: 26px;

  /* ── Card-title recipe ────────────────────────────────────────
     CANONICAL TOKENS for every "labelled card / labelled block"
     heading on a report (KPI/OKR objective titles, list-of-dicts
     card titles, From/Priority field labels, prose-block labels).
     Change ONCE here, and every report inherits.
     Consumed by the grouped rule in components.css.
  ─────────────────────────────────────────────────────────── */
  /* Standardised on paragraph-heading (15px / 500) per Christine
     May 27 2026 — every labelled card / labelled block heading
     (OKR objective, fw-item-title, From/Priority field labels,
     prose-block labels) reads at the same paragraph-heading size
     across all 92 reports. */
  --card-title-size:   var(--paragraph-heading-size);
  --card-title-weight: var(--paragraph-heading-weight);
  --card-title-lh:     var(--paragraph-heading-lh);
  --card-title-color:  var(--paragraph-heading-color);

  /* ── Paragraph-heading recipe ─────────────────────────────────
     CANONICAL TOKENS for the small "paragraph heading" labels
     used inside cards (e.g. OKR objective title, KR column
     header row). Smaller and tighter than --card-title so they
     read as sub-section labels, not card titles.
  ─────────────────────────────────────────────────────────── */
  --paragraph-heading-size:   15px;
  --paragraph-heading-weight: var(--font-weight-medium);  /* 500 */
  --paragraph-heading-lh:     1.4;
  --paragraph-heading-color:  var(--report-ink);

  /* ── Footer-prose recipe ──────────────────────────────────────
     CANONICAL TOKENS for the body copy inside every
     bottom-of-report accordion: About, Sources, Frameworks,
     Methodology, Honesty Statement. One size/weight/color set
     so the four sections read as one family.
     Consumed by .rubric-section__intro and .fw-framework-* .
  ─────────────────────────────────────────────────────────── */
  --footer-body-size:        var(--t-small);            /* 14px */
  --footer-body-weight:      var(--font-weight-light);  /* 300 */
  --footer-body-lh:          1.6;
  --footer-body-color:       var(--report-ink);
  --footer-body-strong-wt:   var(--font-weight-medium); /* 500 — bold lead-ins */
  --footer-body-strong-color: var(--report-ink);

  /* ── Card-subhead recipe ──────────────────────────────────────
     CANONICAL TOKENS for the descriptor line directly beneath a
     card title (the "why" under an OKR objective, the source line
     under a KPI title, etc.). One recipe so every subhead under
     a .fw-card-heading reads the same across all 92 reports.
  ─────────────────────────────────────────────────────────── */
  --card-subhead-size:        var(--t-small);            /* 14px */
  --card-subhead-weight:      var(--font-weight-light);  /* 300 */
  --card-subhead-style:       italic;
  --card-subhead-lh:          1.5;
  --card-subhead-color:       var(--gray-dark);
  --card-subhead-margin-top:  0;

  /* ── Heatmap hue ──────────────────────────────────────────────
     Canonical base color for every .mi-heatmap intensity ladder
     and legend. Change ONCE here and every heatmap on every
     report (multi-rater, performance, distribution, etc.) updates.
  ─────────────────────────────────────────────────────────── */
  --heatmap-hue: var(--cyan); /* tracks the cyan token (was hardcoded #3bc0ff, the old cyan) */
  --bar-ramp-hue: var(--cyan); /* magnitude-bar gradient hue — see .bar-ramp-* in charts.css */
  --t-heading: 16px;
  --t-heading-wt: 500;
  --t-heading-lh: 1.3;
  --t-heading-color: var(--report-ink);
  --t-heading-wt-bold: 600;
  --card-source-size: 14px;
  --card-source-weight: 300;
  --card-source-color: var(--report-ink);
  --t-caption: 14px;
  --t-small: 14px;
  --text-sm: var(--t-body);
  --overline: 14px;
  --t-lead: 16px;
  --t-body: 15px;
  --t-body-lh: 1.8;
  --t-lead-lh: 1.6;
  --t-body-wt: 300;
  /* ── Chart / component name-text tokens ─────────────────────
     All entity names, row labels, and card titles use these.
     Default: 16px medium black.  Highlighted: 16px medium pink.
  ─────────────────────────────────────────────────────────── */
  --chart-name-size:     var(--t-heading);              /* 16px */
  --chart-name-wt:       var(--font-weight-light);      /* 300 — non-hl is lighter; weight carries highlight */
  --chart-name-color:    var(--report-ink);             /* black */
  --chart-name-hl-wt:    var(--font-weight-semibold);   /* 600 — 300-weight delta vs non-hl */
  --chart-name-hl-color: var(--report-ink);             /* ink — pink retired; weight carries highlight */
  --chart-label-col:     350px;                          /* fixed left label column — shared by hbar + two-bar so both align */

  /* ── Chart / component value-text tokens ──────────────────
     All stats inside/outside bars, data figures, amounts.
     Default: 16px light black.  Highlighted: 16px semibold black (no color shift).
  ─────────────────────────────────────────────────────────── */
  --chart-val-size:      var(--t-heading);              /* 16px */
  --chart-val-wt:        var(--font-weight-light);      /* 300 */
  --chart-val-color:     var(--report-ink);             /* black */
  --chart-val-hl-wt:     var(--font-weight-semibold);   /* 600 — preserves delta */
  --chart-val-hl-color:  var(--report-ink);             /* ink — pink retired */

  /* ── Chart heading tokens (eyebrows, figure titles) ────────
     Small structural headings inside chart containers.
  ─────────────────────────────────────────────────────────── */
  --chart-heading-size: var(--t-heading);              /* 16px */
  --chart-heading-wt:   var(--t-heading-wt);           /* 500  */
  --chart-heading-color: var(--report-ink);

  /* ── Chart metadata / byline tokens ───────────────────────
     Source lines, status labels, date bylines. Kept at 14px.
  ─────────────────────────────────────────────────────────── */
  --chart-meta-size:    var(--t-small);                /* 14px — ticks, source lines, bylines */
  --chart-meta-weight:  var(--font-weight-light);      /* 300  — all metadata text */
  --t-card:             var(--t-lead);                 /* 16px — all text in K and S card components */

  /* ── Chart gridlines ──────────────────────────────────────
     ONE source of truth for every chart's gridlines/axes (line,
     slope, bubble, dot-plot, radar, positioning matrix). A clear
     step darker than --report-border (the faint table hairline) so
     gridlines read without competing with the data. Tune this single
     value to lighten/darken all chart gridlines at once.
     Was: line/slope/bubble used --report-border; radar used ink @20%;
     assessment-radar used a raw rgba(0,0,0,0.15). (Christine, 31 May 2026.) */
  --chart-gridline: color-mix(in srgb, var(--report-ink) 28%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

.report-paginated *,
.report-paginated *::before,
.report-paginated *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Report pages only: ensure the body background matches the gradient
   end-colour so no white strip shows below short content. */
body { background-color: var(--gray-white); }

.report-paginated {
  font-family: var(--font-family);
  /* Christine: report page background = the shared white→soft-gray page
     gradient (see --report-page-gradient). Reset to flat white for
     print/PDF download — see @media print below. */
  background: var(--report-page-gradient);
  background-attachment: scroll;
  color: var(--report-ink);
  -webkit-font-smoothing: antialiased;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-wt);
}

/* Christine: keep the gradient on-screen only — PDF/print download renders
   on flat white (the PDF pipeline emulates print media + printBackground). */
@media print {
  :root { --navy: #000000; }
  .report-paginated {
    background: var(--report-white);
    background-attachment: scroll;
  }
}

.report-paginated a {
  text-decoration: none;
  color: inherit;
}

.report-paginated strong {
  color: var(--report-ink);
  font-weight: var(--font-weight-semibold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   REPORT CONTAINER — continuous scroll engine
   ═══════════════════════════════════════════════════════════════════════════ */

.report-container { width: 100%; font-size: var(--t-body); line-height: var(--t-body-lh); font-weight: var(--t-body-wt); background-color: var(--gray-white); }

.mi-section {
  padding: 0;
  max-width: 800px;
  margin: 72px auto 0;
  position: relative;
}

#p2.mi-section { padding-top: 0; }
#p2.mi-section + .mi-divider { display: none; }

.mi-divider {
  display: block;
  width: 100%;
  max-width: 800px;
  height: 2px;
  background: var(--report-ink-35);
  margin: 48px auto;
}

/* Mobile: hide the section divider entirely. The figure blocks
   surrounding section breaks already provide a strong horizontal
   border, so the extra .mi-divider creates a visible double-line
   on phones. Matches existing print behavior which also hides
   .mi-divider. */
@media (max-width: 600px) {
  .mi-divider {
    display: none;
  }
}

.mi-sources-section {
  padding: 50px 0 80px;
  width: 100%;
  max-width: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mi-sources-section > * {
  width: 100%;
  max-width: 800px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE SHELL (paginated engine — keep for other products)
   ═══════════════════════════════════════════════════════════════════════════ */

.page-wrap {
  display: block;
}

.page-label { display: none; }

.page {
  width: 100%;
  background: var(--report-white);
}

.page-inner {
  /* Flat 50px side padding across the board so every report family
     (assessment, facilitator, framework, research, snapshot,
     business-plan) matches the .sim-v2 container chrome — no
     viewport-dependent clamps, content fills the available width.
     The mobile @media block at the bottom of this file still
     tightens the top padding from 50px to 24px on phones. */
  padding: 50px 50px 0;
  border-bottom: none;
}

.page-inner::after {
  content: '';
  display: block;
  width: 600px;
  height: 2px;
  background: var(--report-ink-35);
  margin: 50px auto 0;
}

.page-inner.no-divider::after { display: none; }

.page-inner > .page-content {
  max-width: 100%;
  margin: 0 auto;
}

.page-header { display: none; }
.page-content { overflow: visible; }

.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 10px;
}

.conf {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--report-ink);
}

.conf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-nav { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.section-eyebrow,
.mi-eyebrow {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--report-ink);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: block;
}

.section-title,
.mi-title {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--report-ink);
  margin-bottom: var(--spacing-4);
  max-width: 90%;
}

.section-heading {
  font-weight: var(--font-weight-semibold);
  font-size: 24px;
  line-height: 1.3;
  color: var(--report-ink);
  margin-bottom: var(--spacing-4);
}

.section-label {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--report-ink);
  margin-bottom: 12px;
  display: block;
}

.eyebrow {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--cyan);
  margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BODY COPY
   ═══════════════════════════════════════════════════════════════════════════ */

.lead {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-wt);
  color: var(--report-ink);
  margin-bottom: 16px;
}

.body,
.mi-body {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-wt);
  color: var(--report-ink);
  margin-bottom: var(--spacing-4);
}

.body:last-child { margin-bottom: 0; }

.standfirst,
.rpt-standfirst {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin-bottom: var(--spacing-6);
}

.content-columns {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

.content-main {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  flex: 1;
}

/* Unified to --spacing-4 (16px) to match the rest of the body copy. Was: 14px. Christine, 1 June 2026. */
.content-main p { margin-bottom: var(--spacing-4); }
.content-main p:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   INLINE SOURCE CITATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.src {
  font-size: 14px;
  color: var(--report-ink);
  vertical-align: baseline;
  font-weight: 400;
  letter-spacing: 0;
  line-height: inherit;
  margin-left: 0.5em;
}

.standfirst .src, .lead .src { font-size: var(--t-body); }

.chart-source {
  font-size: var(--t-small);
  color: var(--report-ink);
  font-style: italic;
  margin-top: 8px;
  line-height: 1.5;
}

.para-chart-source {
  font-size: var(--t-small);
  color: var(--report-ink);
  line-height: 1.3;
  margin-top: 0;
  padding-top: 10px;
}

.para-chart-source .src {
  font-size: 14px;
  font-weight: 300;
  vertical-align: baseline;
  line-height: inherit;
}

.rpt-para-figure-source {
  font-size: var(--t-small);
  color: var(--report-ink);
  line-height: 1.5;
  margin-top: 12px;
}

/* Inline synth-source tag. Inherits font-size, weight, color, and
   font-style from its parent so it sits naturally inside any prose
   context (body, italic quote, label, etc.). Only spacing + baseline
   alignment are owned here. ── */
.mi-src {
  vertical-align: baseline;
  line-height: inherit;
  margin-left: 0.5em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   REPORT META LINE
   ═══════════════════════════════════════════════════════════════════════════ */

.report-meta-line,
.rpt-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--report-ink);
  padding-bottom: 30px;
}

.report-meta-info,
.rpt-meta-info {
  display: flex;
  align-items: center;
  color: var(--report-ink);
  text-decoration: none;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.15s;
}

.report-meta-info:hover,
.rpt-meta-info:hover { opacity: 0.7; }

.report-meta-arrow { font-size: var(--t-body); color: var(--report-ink); flex-shrink: 0; }

/* Step 5 — Cover meta line wraps on mobile.
   flex-shrink:0 on each item keeps the row rigid and causes overflow
   when the combined label string is wider than the phone screen.
   Desktop and iPad (≥ 768px) untouched. */
@media (max-width: 767px) {
  .report-meta-line,
  .rpt-meta-line {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .report-meta-info,
  .rpt-meta-info {
    flex-shrink: 1;
  }
}

.rpt-meta-sep { color: var(--report-border); }


/* ═══════════════════════════════════════════════════════════════════════════
   FIGURE CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-figure,
.rpt-para-figure {
  width: 100%;
  border-top: 1px solid var(--report-border);
  border-bottom: 1px solid var(--report-border);
  padding: 30px 0;
  break-inside: avoid;
}

.mi-figure-title,
.rpt-para-figure-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--report-ink);
  margin-bottom: 0;
  line-height: 1.3;
}

.mi-figure-sub,
.rpt-para-figure-sub {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  color: var(--report-ink);
  margin-bottom: 20px;
}

.mi-gap-note,
.gap-note {
  background: var(--report-bg-page);
  border-radius: 5px;
  padding: 12px 16px;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--report-ink);
  margin-top: 8px;
}

.mi-conflict-note {
  font-size: var(--t-body);
  color: var(--report-ink);
  font-style: italic;
  margin-top: 8px;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.stat-cards,
.mi-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.stat-card,
.mi-stat-card {
  min-height: 96px;
  /* Canonical "soft bubble" card chrome: gray-bubble fill + a 3px white
     border so adjacent tinted segments are separated by a clean white
     gutter even on an off-white canvas. */
  background: var(--gray-white);
  border-radius: 8px;
  padding: 16px 18px;
  border: 3px solid var(--report-white);
}

.stat-card-label,
.mi-stat-card-label {
  font-size: var(--card-heading-size);
  font-weight: var(--card-heading-weight);
  letter-spacing: var(--card-heading-spacing);
  color: var(--card-heading-color);
  margin-bottom: 10px;
  line-height: 1.4;
  min-height: 40px;
}

.stat-card-value,
.mi-stat-card-value {
  font-size: 30px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--report-ink);
}

.stat-card-value.grad,
.mi-stat-card-value.grad {
  background: var(--report-grad-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card-value em {
  font-size: var(--card-source-size);
  font-weight: var(--card-source-weight);
  color: var(--card-source-color);
  -webkit-text-fill-color: var(--card-source-color);
  font-style: normal;
  display: block;
  margin-top: 4px;
}

.mi-stat-card-note {
  font-size: var(--card-source-size);
  font-weight: var(--card-source-weight);
  color: var(--card-source-color);
  -webkit-text-fill-color: var(--card-source-color);
  line-height: 1.4;
  margin-top: 4px;
}

.stat-card.hl,
.mi-stat-card.hl {
  background: var(--gray-white);
  border: none;
}

.stat-card.hl .stat-card-label,
.mi-stat-card.hl .mi-stat-card-label { color: var(--report-ink); }

.stat-card.hl .stat-card-value,
.mi-stat-card.hl .mi-stat-card-value {
  color: var(--report-ink);
  -webkit-text-fill-color: var(--report-ink);
  background: none;
}

.stat-card.hl .mi-stat-card-note,
.mi-stat-card.hl .mi-stat-card-note { color: var(--card-source-color); font-weight: var(--card-source-weight); }

.stat-card.hl .stat-card-value em,
.mi-stat-card.hl .mi-stat-card-value em {
  color: var(--card-source-color);
  -webkit-text-fill-color: var(--card-source-color);
  font-weight: var(--card-source-weight);
}

/* Single full-width hero stat for the research report entry. Left block holds
   the label + a cyan value; a dark vertical divider separates the source note
   on the right. Reuses the canonical .mi-stat-card-label / -value typography.
   Christine 29 May 2026. */
.mi-stat-hero {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
}
.mi-stat-hero-head {
  flex: 0 0 auto;
}
.mi-stat-hero .mi-stat-card-label {
  min-height: 0;
  margin-bottom: var(--space-1-5);
}
.mi-stat-hero .mi-stat-card-value {
  color: var(--cyan);
}
.mi-stat-hero-note {
  flex: 1 1 auto;
  padding-left: var(--space-6);
  border-left: 3px solid var(--navy);
  font-size: var(--card-source-size);
  font-weight: var(--card-source-weight);
  color: var(--card-source-color);
  line-height: var(--lh-body);
}

.stat-cards-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-cards-col .stat-cards { width: 100%; }

.stat-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

.stat-kv-item {
  padding: 12px 14px;
  background: var(--report-white);
  border-radius: 8px;
  border: 1px solid var(--report-border);
}

.stat-kv-label {
  font-size: var(--card-heading-size);
  font-weight: var(--card-heading-weight);
  letter-spacing: var(--card-heading-spacing);
  color: var(--card-heading-color);
  margin-bottom: 4px;
}

.stat-kv-value {
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--report-ink);
  line-height: 1.1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BAR CHARTS
   ═══════════════════════════════════════════════════════════════════════════ */

.ct-name { font-size: var(--t-small); font-weight: var(--font-weight-semibold); color: var(--report-ink); padding-top: 10px; padding-bottom: 4px; }
.ct-note { font-size: var(--t-small); color: var(--report-ink); font-weight: 400; }
.ct-barrow { display: flex; align-items: center; gap: 8px; }
.ct-bar { flex: 1; height: 8px; background: var(--report-bg-page); border-radius: 4px; overflow: hidden; }
.ct-val { font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--report-ink); white-space: nowrap; padding-left: 8px; flex-shrink: 0; min-width: 90px; text-align: right; }
.ct-val.hl { color: var(--cyan); font-size: var(--t-body); }
.bar-fill { height: 100%; border-radius: 4px; background: var(--report-ink-35); }
.bar-fill.grad { background: var(--report-grad-h); border: none; }
.bar-fill.dim { background: var(--gray-light); opacity: 0.5; }
.ci-item { margin-top: 10px; }


/* ═══════════════════════════════════════════════════════════════════════════
   KEY FINDINGS
   ═══════════════════════════════════════════════════════════════════════════ */

.key-findings,
.mi-key-findings {
  list-style: none;
  padding: 0 0 20px;
  margin: 0;
  counter-reset: findings;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.key-findings li,
.mi-key-findings li {
  counter-increment: findings;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  padding: var(--spacing-3) 0;
}

.key-findings li + li,
.mi-key-findings li + li {
  border-top: 1px solid var(--report-border);
}

.key-findings li:first-child p { max-width: 75%; }

.key-findings li::before,
.mi-key-findings li::before {
  content: counter(findings) ".";
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--report-ink);
  margin-right: 2px;
  align-self: start;
  line-height: var(--t-body-lh);
}

.key-findings li p,
.mi-key-findings li p {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin: 0;
}

.key-findings li p em,
.mi-key-findings li p em {
  font-style: italic;
  color: var(--report-ink);
}

@media print {
  .key-findings,
  .mi-key-findings {
    border: 1px solid var(--report-border);
    border-radius: 4px;
    padding: var(--spacing-3) var(--spacing-4);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CALLOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.callout { background: var(--report-bg-page); border-radius: 6px; padding: 14px 18px; margin: 14px 0; }
.callout strong { font-size: var(--t-body); font-weight: 600; letter-spacing: 1.2px; color: var(--report-ink); display: block; margin-bottom: 6px; }
.callout p { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); }
.callout > strong { font-size: var(--t-body); font-weight: 600; letter-spacing: 1.2px; color: var(--report-ink); display: block; margin-bottom: 6px; }
.callout > strong + *, .callout > strong ~ p { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); }
.callout.analyst { background: var(--report-ink); }
.callout.analyst strong { color: rgba(255,255,255,0.45); }
.callout.analyst p { color: rgba(255,255,255,0.88); }

.callout-stat {
  background: var(--report-bg-page);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.callout-stat-number {
  font-size: 30px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--report-ink);
  letter-spacing: -1px;
}

.callout-stat-label {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: 1.5;
  margin-top: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DEAL LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.deal-list { display: flex; flex-direction: column; }
.deal-item { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--report-border); }
.deal-item:last-child { border-bottom: none; }
.deal-year { font-size: var(--t-heading); font-weight: var(--t-heading-wt); color: var(--t-heading-color); padding-right: 5px; }
.deal-title { font-size: var(--t-heading); font-weight: var(--t-heading-wt); color: var(--t-heading-color); margin-bottom: 4px; }
.deal-body { font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); margin-bottom: 4px; }
.deal-type { font-size: var(--t-heading); font-weight: var(--t-heading-wt); letter-spacing: .5px; color: var(--t-heading-color); }
.deal-amt { font-size: var(--t-heading); font-weight: var(--t-heading-wt); color: var(--t-heading-color); text-align: right; padding-top: 2px; line-height: var(--t-body-lh); word-break: break-word; }


/* ═══════════════════════════════════════════════════════════════════════════
   POWER / REG / TECH CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.power-list { display: flex; flex-direction: column; gap: 10px; }
/* Legacy power-item rules — superseded by the canonical recipe in
   components.css (May 27 2026: gray-light fill, orange border on lead).
   Kept as no-ops so older selectors still resolve. */
.power-item { border-radius: 6px; }
.power-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #ffffff; }
.power-name { font-size: var(--t-heading); font-weight: var(--t-heading-wt); color: var(--report-ink); }
.power-lev { font-size: var(--t-body); font-weight: 600; letter-spacing: .5px; white-space: nowrap; }
.power-lev.hi { color: var(--report-red); }
.power-lev.md { color: var(--report-amber); }
.power-lev.lo { color: var(--report-green); }
.power-body { padding: 10px 14px; font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); }

/* May 14 2026 — split-card look. Outer wrap is unstyled; each item is
   its own bordered card with --report-bg-card fill, a 24px gap between
   cards, and a divider line between head and body. */
.reg-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.reg-item { border: 1px solid var(--report-border); border-radius: var(--radius-sm); background: transparent; overflow: hidden; }
.reg-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: var(--gray-white); border-bottom: 0; }
.reg-name { font-size: var(--t-heading); font-weight: var(--t-heading-wt); color: var(--t-heading-color); line-height: var(--t-heading-lh); }
.reg-status { font-size: var(--t-heading); font-weight: var(--t-heading-wt); white-space: nowrap; color: var(--t-heading-color); }
.reg-item.hl .reg-name { color: inherit; font-weight: inherit; }
.reg-item.hl .reg-status { color: var(--cyan); font-weight: var(--t-heading-wt-bold); }
.reg-status.active { color: var(--cyan); }
.reg-body { padding: 14px 18px; }
/* NOTE: this .reg-text rule is DEAD — components.css redefines .reg-text later in
   the cascade (margin:0 + a grey divider row, an intentional regulation-card
   design). Left at its legacy 20px; regulation rows are NOT narrative prose, so
   they're out of the body-paragraph spacing unification. Christine, 1 June 2026. */
.reg-text { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); font-weight: var(--t-body-wt); margin-bottom: 20px; }
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-kv-key { font-size: var(--t-heading); font-weight: var(--t-heading-wt); color: var(--t-heading-color); line-height: var(--t-heading-lh); margin-bottom: 2px; }
.reg-kv-val { font-size: var(--card-source-size); color: var(--report-ink); font-weight: var(--card-source-weight); line-height: 1.5; }

.tech-list { display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; }
.tech-item { display: grid; grid-template-columns: 2px 1fr; gap: 12px; }
.tech-bar { background: var(--report-border); border-radius: 2px; }
.tech-bar.active { background: var(--report-ink); }
.tech-title { font-size: var(--paragraph-heading-size); font-weight: var(--paragraph-heading-weight); color: var(--paragraph-heading-color); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: var(--paragraph-heading-lh); }
.tech-tag { font-size: var(--t-body); font-weight: var(--t-body-wt); letter-spacing: .5px; color: var(--report-ink); }
.tech-body { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); font-weight: var(--t-body-wt); margin-bottom: 12px; }
.tech-body:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   INTEL GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.intel-grid,
.mi-intel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.intel-item,
.mi-intel-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
}

.intel-num { font-size: var(--t-body); font-weight: var(--t-body-wt); color: var(--report-ink); padding-top: 0; letter-spacing: 0.04em; }

.intel-text { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); font-weight: var(--t-body-wt); }

.intel-text strong { font-weight: var(--t-heading-wt-bold); }


/* ═══════════════════════════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-size: var(--t-heading); font-weight: var(--t-heading-wt); letter-spacing: 0.5px; color: var(--report-ink); padding: 7px 10px; background: var(--gray-white); border-bottom: none; text-align: left; }
.data-table thead + tbody tr:first-child td { border-top: none; }
.data-table td { font-size: var(--t-body); color: var(--report-ink); padding: 8px 10px; border-bottom: 1px solid var(--report-border); vertical-align: top; }
.data-table td:first-child { color: var(--report-ink); }
.data-table tr:last-child td { border-bottom: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   SOURCES
   ═══════════════════════════════════════════════════════════════════════════ */

.method-block { margin-bottom: 16px; }

.source-item { font-size: var(--t-small); line-height: 1.65; color: var(--report-ink); padding: 6px 0; border-bottom: 1px solid var(--report-border); }
.source-item:last-child { border-bottom: none; }
.source-item em { color: var(--report-ink); font-style: italic; font-weight: var(--font-weight-light); }


/* ═══════════════════════════════════════════════════════════════════════════
   SCORECARD MATRIX
   ═══════════════════════════════════════════════════════════════════════════ */

.scorecard { width: 100%; border-collapse: collapse; }
/* First (entity) column hugs its content — width:1% + nowrap collapses it to the
   widest entity/descriptor line, so the dimension columns absorb the remainder. */
.scorecard th:first-child,
.scorecard td:first-child { width: 1%; white-space: nowrap; }
/* Header-row divider unified to gray-dark 1px across all component/table header
   rows (Christine, 1 June 2026). Was: border-bottom 1.5px var(--report-ink). */
.scorecard th { font-size: var(--t-small); font-weight: var(--t-heading-wt); letter-spacing: 0.5px; color: var(--report-ink); padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--gray-dark); }
/* Dimension headers rotated 90° (reading bottom→top) so the columns stay
   narrow — the pips don't need much width, freeing room for the entity column.
   Long names wrap into multiple vertical lines, capped via max-height. */
/* Dimension headings centred so the rotated label sits over its column of dots
   (the .sc-cell data cells are text-align:center). Christine, 1 June 2026.
   Was: text-align: left (briefly, earlier 1 June 2026); originally center. */
/* Equal width on every dimension column so the centred dot clusters line up
   consistently across columns. Under table-layout:auto the browser was handing
   wider two-line rotated headers (e.g. "Financing / credit") more surplus width,
   so some columns' dots read centred and others read left — ragged. An equal
   base width makes auto-layout expand them in lockstep → uniform columns.
   Christine, 1 June 2026. Was: no width (auto-distributed, uneven). */
.scorecard th.sc-dim,
.scorecard td.sc-cell { width: 64px; }
.scorecard th.sc-dim { vertical-align: bottom; text-align: center; padding: 6px 4px; }
.scorecard th.sc-dim span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 130px;
  white-space: normal;
  line-height: 1.25;
  /* Left-align the wrapped header lines (e.g. "Financing /" + "credit") so
     they share one edge instead of centre-justifying against each other
     (Christine, 1 June 2026). The th itself keeps text-align: center so the
     whole rotated strip stays centred in its column. Was: span inherited
     text-align: center from .sc-dim. */
  text-align: left;
}
.scorecard td { font-size: var(--t-body); padding: 8px 10px; border-bottom: 1px solid var(--report-border); vertical-align: top; color: var(--report-ink); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); }
/* Dimension data cells stay narrow + centred under the rotated headers. */
.scorecard td.sc-cell { text-align: center; padding: 8px 4px; }
.scorecard td.sc-cell .pip { display: inline-flex; }
.scorecard tr:last-child td { border-bottom: none; }
.scorecard .pip { display: inline-flex; gap: 2px; }
.scorecard .pip span { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-light); }

/* Per-row colour — each entity row carries a sequential kicker hue
   (kicker02→13), set on the row via data-k and consumed by the pips below. */
.scorecard tbody tr[data-k="2"]  { --sc-row: var(--kicker02); }
.scorecard tbody tr[data-k="3"]  { --sc-row: var(--kicker03); }
.scorecard tbody tr[data-k="4"]  { --sc-row: var(--kicker04); }
.scorecard tbody tr[data-k="5"]  { --sc-row: var(--kicker05); }
.scorecard tbody tr[data-k="6"]  { --sc-row: var(--kicker06); }
.scorecard tbody tr[data-k="7"]  { --sc-row: var(--kicker07); }
.scorecard tbody tr[data-k="8"]  { --sc-row: var(--kicker08); }
.scorecard tbody tr[data-k="9"]  { --sc-row: var(--kicker09); }
.scorecard tbody tr[data-k="10"] { --sc-row: var(--kicker10); }
.scorecard tbody tr[data-k="11"] { --sc-row: var(--kicker11); }
.scorecard tbody tr[data-k="12"] { --sc-row: var(--kicker12); }
.scorecard tbody tr[data-k="13"] { --sc-row: var(--kicker13); }

/* Filled pip = the row's kicker hue at full opacity (the lighter ramp was
   dropped — low-opacity tints read as washed-out). Non-filled stays gray-light. */
.scorecard .pip span.on { background: var(--sc-row, var(--ink-2)); opacity: 1; }

/* legacy — .row-rising pip colour, superseded by per-row --sc-row above.
   Kept for older report payloads / other consumers. */
.scorecard .row-rising .pip span.on { background: var(--cyan); }
/* legacy — .badge pill, no longer rendered in scorecard cells (the descriptor
   now renders as .sc-entity-desc under the entity name). Kept for consumers. */
.scorecard .badge { display: inline-block; font-size: var(--t-small); font-weight: 400; letter-spacing: 0.5px; padding: 6px 16px; border-radius: 8px; border: 1px solid var(--report-ink); line-height: 1.3; }
.scorecard .badge.high   { background: var(--report-bg-page); color: var(--report-ink); }
.scorecard .badge.med    { background: var(--report-bg-page); color: var(--report-ink); }
.scorecard .badge.low    { background: var(--report-bg-page); color: var(--report-ink); }
.scorecard .badge.rising { background: var(--report-white); color: var(--report-ink); }
.scorecard .row-rising .badge.rising { border: 1px solid var(--cyan); border-radius: var(--radius-full); }


/* ═══════════════════════════════════════════════════════════════════════════
   DONUT CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.donut-svg { display: block; }
.donut-legend { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--report-ink); }
.donut-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.donut-legend-label { flex: 1; }
.donut-legend-val { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--report-ink); font-size: var(--t-small); }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION ABOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.section-about { background: var(--report-bg-page); border-radius: 6px; padding: 12px 16px; margin-bottom: 24px; }
.section-about-label { font-size: var(--t-body); font-weight: 600; letter-spacing: 1.2px; color: var(--report-ink); margin-bottom: 4px; display: block; }
.section-about p { font-size: var(--t-body); line-height: 1.6; color: var(--report-ink); margin: 0; }

.section-chart-insight { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: start; }
.section-chart-insight.equal { grid-template-columns: 1fr 1fr; }
.section-chart-insight.chart-wide { grid-template-columns: 2fr 1fr; }
.section-chart-insight .sci-insight { display: flex; flex-direction: column; gap: 16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   MATRIX CELL CORNERS
   ═══════════════════════════════════════════════════════════════════════════ */

.matrix-cell-corner { position: relative; padding: 14px 12px; background: var(--gray-background); text-align: center; }
.matrix-cell-corner::before, .matrix-cell-corner::after { content: ''; position: absolute; width: 4px; height: 4px; background: var(--report-ink-35); border-radius: 50%; }
.matrix-cell-corner::before { top: -2px; left: -2px; }
.matrix-cell-corner::after  { top: -2px; right: -2px; }
.matrix-cell-corner .cell-corner-bl, .matrix-cell-corner .cell-corner-br { position: absolute; width: 4px; height: 4px; background: var(--report-ink-35); border-radius: 50%; }
.matrix-cell-corner .cell-corner-bl { bottom: -2px; left: -2px; }
.matrix-cell-corner .cell-corner-br { bottom: -2px; right: -2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   CAPITAL BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.capital-bar-full { width: 100% !important; height: auto !important; border-radius: 6px !important; }
.capital-bar-full.open { width: 100% !important; border-radius: 6px 6px 0 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   COVER PAGE (paginated engine)
   ═══════════════════════════════════════════════════════════════════════════ */

.cover-bar { display: flex; align-items: center; gap: 18px; padding: 0 var(--report-pad) 0 0; height: 66px; border-bottom: none; flex-shrink: 0; }
.cover-bar-icon { width: 36px; height: 36px; flex-shrink: 0; margin-left: 15px; }
.cover-bar-label { font-size: var(--t-body); font-weight: 600; letter-spacing: 2px; color: var(--purple); }
.cover-gradient-area { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 var(--report-pad); }
.cover-gradient-content { text-align: right; max-width: 72%; }
.cover-kicker { font-size: var(--t-body); font-weight: 600; letter-spacing: 2.5px; color: rgba(255,255,255,0.75); margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 8px; display: inline-block; }
.cover-headline { font-size: 36px; font-weight: 700; line-height: 1.12; color: var(--white); letter-spacing: -0.5px; }
.cover-foot { display: flex; justify-content: flex-end; padding: 0 var(--report-pad) 52px; }
.cover-meta { text-align: right; font-size: var(--t-body); color: rgba(255,255,255,0.8); line-height: 1.9; }
.cover-meta strong { color: var(--white); display: block; font-size: var(--t-body); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  width: 100%;
  /* Hero now grows to fit its inner content rather than being locked
     to a fixed 300px banner. The wave background stays absolute and
     re-fills whatever height the content produces, so longer
     headlines/kickers no longer get cropped. A min-height keeps the
     visual presence on short content. */
  height: auto;
  min-height: 220px;
  overflow: hidden;
  background: var(--gradient-128);
}

.hero-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-wave svg { width: 100%; height: 100%; display: block; }

.hero-inner {
  /* Relative flow so the content dictates the hero's height. The
     wave layer behind it (.hero-wave) remains absolute and stretches
     to whatever this produces. */
  position: relative;
  inset: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px var(--report-pad);
  box-sizing: border-box;
}

.hero-content { max-width: 800px; margin: 0 auto; width: 100%; padding: 0; box-sizing: border-box; position: relative; }
.hero-brand { position: absolute; top: 20px; left: 20px; margin: 0; z-index: 3; }
.hero-logo { display: flex; align-items: center; opacity: 0.8; }
.hero-bottom { padding-top: 0; }

.hero-kicker {
  color: rgba(255,255,255,1); margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.35); display: inline-block;
}

.hero-headline { font-size: var(--t-body); font-weight: 600; line-height: 1.15; color: var(--report-white); max-width: 800px; }
.hero-headline-sub { font-size: 32px; font-weight: 600; opacity: 1; color: var(--report-white); display: block; margin-top: 4px; text-align: left; max-width: 80%; }
.hero-subtitle { font-size: var(--t-heading); font-weight: var(--t-heading-wt); letter-spacing: 1px; color: rgba(255,255,255,0.7); margin: 8px 0 0; }

.hero-meta { background: var(--white); padding: 10px var(--report-pad); display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--report-border); flex-wrap: wrap; }
.hero-meta-label, .hero-meta-name, .hero-meta-date { font-size: var(--t-body); font-weight: 600; color: var(--report-ink); }
.hero-meta-sep { font-size: var(--t-body); font-weight: 600; color: var(--report-border); }
.hero-meta-scope { font-size: var(--t-body); color: var(--report-ink); font-style: italic; }

/* ── Mobile-only hero overrides ───────────────────────────────────
   On phones the hero stops being a fixed-height banner and instead
   collapses to its natural content height with a 30px gap below it.
   The previously-absolute .hero-inner is promoted to normal flow so
   it dictates the hero's height; the wave background stays absolute
   (inset:0) and re-fills whatever new height the content produces.
   Width stays 100%. Desktop and PDF export are unaffected. */
@media (max-width: 768px) {
  .hero {
    width: 100%;
    min-height: 0;
  }
  .hero-inner {
    padding: 24px 20px;
    margin-top: 30px;
  }
  /* Hide the Renatus wordmark SVG on the report cover for mobile
     only. The PDF/PNG export renders at desktop width so the logo
     still appears in downloads. */
  /* !important is required because the SVG ships with an inline
     style="display:block" attribute that would otherwise win. */
  .hero-brand .hero-logo svg { display: none !important; }
  .hero-subtitle { margin-top: 0; }
  /* Mobile TOC toggle: swap the three-line icon for three white
     dots. The button itself is already transparent from the base
     rule above. */
  .rpt-toc-hamburger .toc-icon-lines { display: none !important; }
  .rpt-toc-hamburger .toc-icon-dots { display: inline-block !important; }
  /* Pull the lead paragraph up by 20px on mobile so it sits
     tighter under the action bar / section heading. The reset
     on the adjacent-sibling rule prevents the same shift being
     applied to any follow-up standfirst paragraphs that come
     directly after the first one. */
  .rpt-standfirst { margin-top: -20px; }
  .rpt-standfirst + .rpt-standfirst { margin-top: 0; }

  /* Drop the desktop 60px L/R padding from .page-inner on phones so the
     report content respects the parent container's 24px gutter (set on
     .report-preview-body .report-container in report-preview.html and
     on .public-report-page in report-public.html) instead of stacking
     a second 60px gutter on top of it and squashing the body to a
     ~160px column. Top padding kept at 24px to preserve the breathing
     room above the action bar. */
  .page-inner { padding: 24px 0 0; }

  /* The ::after divider line is hardcoded at 600px — wider than any phone
     viewport, so it forces a horizontal scrollbar on every report section.
     Cap it to the available width on mobile. */
  .page-inner::after { width: min(600px, 100%); }

  /* Safety net: rigid multi-column grids in the report body are
     declared as `1fr 1fr` / `1fr 1fr 1fr` in layout.css with no
     mobile collapse, so on a phone they push their children past
     the viewport and force horizontal scroll. Force them into a
     single column at this breakpoint. */
  .two-col-r,
  .three-col,
  .intel-grid,
  .char-grid,
  .geo-three { grid-template-columns: 1fr !important; }

  /* Tables and any oversized media inside the report can still be
     wider than the phone — let them scroll inside their own row
     rather than blowing out the whole page. */
  .page-content table { display: block; max-width: 100%; overflow-x: auto; }
  .page-content img,
  .page-content svg,
  .page-content video { max-width: 100%; height: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .hero { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .hero-headline-sub { font-size: 26px; }
  .page-wrap { margin-bottom: 0; page-break-after: always; }
  .page-label { display: none; }
  .page { box-shadow: none; width: 100%; height: auto; }
  .report-cta-btn { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CTA PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.report-cta-page { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: var(--report-pad); }
.report-cta-page .eyebrow { margin-bottom: 16px; }
.report-cta-page .section-title { max-width: 70%; margin-bottom: 24px; }
.report-cta-page .body { max-width: 60%; margin-bottom: 32px; }
.report-cta-btn { display: inline-block; background: var(--report-ink); color: var(--white); padding: 12px 32px; border-radius: 999px; font-size: var(--t-body); font-weight: 600; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   FIXED TOC — Hamburger button + overlay panel
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-toc-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 0;
  text-align: right;
  pointer-events: none;
}

/* Back link — sits in the LEFT GUTTER outside the report column
   (page is wider than the report, so there's empty space on either
   side). The wrapper is sticky + zero-height so the link follows the
   top of the report without consuming vertical space. The link uses
   a negative `left` to slide outside the column into the gutter; on
   narrow viewports where there is no gutter, it falls back inside the
   column over the cover (white text). */
/* .rpt-back-wrapper / .rpt-back-link absolute-positioning rules
   removed — the Back button now lives inside the action bar
   (.rpt-action-btn#rpt-back-link) and inherits its row layout. */

.rpt-toc-hamburger {
  position: relative;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Christine: hamburger lines must be white so they read against
     the report's coloured cover/header. The icon SVGs use
     stroke="currentColor", so colour cascades through. */
  color: #ffffff;
  transition: background 0.2s;
  pointer-events: auto;
}
.rpt-toc-hamburger:hover {
  background: transparent;
}
/* Default: show three-line icon, hide three-dot icon. */
.rpt-toc-hamburger .toc-icon-dots { display: none; }
.rpt-toc-hamburger .toc-icon-lines { display: inline-block; }

.rpt-toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.rpt-toc-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.rpt-toc-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 280px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--report-white);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  transform: translateY(-8px) scale(0.97);
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
}
.rpt-toc-overlay.open .rpt-toc-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.rpt-toc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--report-border);
}
.rpt-toc-panel-title {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--report-ink);
}
.rpt-toc-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--report-ink);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rpt-toc-close:hover { color: var(--report-ink); }

.rpt-toc-nav {
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.rpt-toc-nav .rpt-sidebar-toc-item {
  display: block;
  padding: 4px 0;
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--report-ink);
  text-decoration: none;
  transition: background 0.15s;
}
.rpt-toc-nav .rpt-sidebar-toc-item:hover {
  background: var(--report-bg-page);
  color: var(--cyan);
}

@media print {
  .rpt-toc-hamburger,
  .rpt-toc-overlay,
  .rpt-action-bar { display: none !important; }
  .mi-eyebrow,
  .mi-title,
  .section-heading { break-after: avoid; }
  .sim-v2.rpt-card-stack { background: white !important; padding-top: 10px; padding-left: 0; padding-right: 0; }
  .sim-v2.rpt-card-stack .sv-cover { padding-left: 0 !important; }
  #p-cover { padding-left: 0 !important; padding-right: 0 !important; }
  .fw-report-intro-banner { margin-left: 0 !important; }
  :root {
    --report-border: color-mix(in srgb, var(--gray-mid) 80%, black);
    --chart-gridline: color-mix(in srgb, var(--report-ink) 45%, transparent);
  }
  .sim-v2.rpt-card-stack .sv-card,
  .sim-v2.rpt-card-stack .sv-footer,
  /* Intelligence-brief cards and back-matter accordions (about / sources /
     methodology / frameworks) use --sv-rule (gray-light) for their borders,
     which is barely visible in print. Darken them to match the section cards. */
  .sim-v2.rpt-card-stack .sv-intel-list--cards .sv-intel-item {
    border-color: var(--gray-dark);
  }
  /* About this report + Sources & Methodology need a clearly visible border
     in print — bump to report ink (dark navy). */
  .sim-v2 .rubric-section {
    border-color: var(--report-ink);
  }
}

/* Canonical "/100" suffix — used after the bold score number in every
   score recipe (rubric, abb, adb, sv-score). Global so it works in
   every report family regardless of .sim-v2 wrapper. ── */
.sv-score-suffix { color: var(--gray-mid); font-weight: 400; font-size: inherit; }

/* Canonical score recipe — wraps both halves of `score()` / `score_smart()`.
   15px across the board; number = 500, "/100" = 300. This is the ONLY
   place these weights live. !important is intentional: many host
   containers (.geo-tag, .power-lev, .cl-cell) set font-weight 600/700
   on the wrapper and would otherwise inherit through. */
.rpt-score                   { font-size: 15px !important; line-height: 1.2; white-space: nowrap; }
.rpt-score .rpt-score-n      { font-weight: 500 !important; color: var(--report-ink); }
.rpt-score .sv-score-suffix  { font-weight: 300 !important; font-size: 15px !important; color: var(--gray-mid); }

/* ── Responsive report side-padding ───────────────────────────────
   --report-pad (default 60px) is the single horizontal-padding token
   used by every report section, cover, hero, TOC and panel. At narrow
   widths 60px each side eats too much of the screen, so step it down.
   One token override here flows through the whole report layout. */
@media (max-width: 1024px) {
  :root { --report-pad: 36px; }
}
@media (max-width: 576px) {
  :root { --report-pad: 20px; }
}