/* ═══════════════════════════════════════════════════════════════════════════
   RENATUS REPORT — SHARED CARD & STRUCTURAL COMPONENTS
   File: static/css/report/components.css

   Shared library. Every card and structural component usable by any report.
   Naming convention: prefix describes the component, never the report slug.
   All values use design tokens — zero hardcoded colours or sizes.

   COMPONENT INDEX
   ───────────────────────────────────────────────────────────────────────────
   STAT PRIMITIVES
     .vcard                 Compact stat card (small text variant)
     .stat-cell             Enhanced stat card with shadow

   BAR PRIMITIVES
     .bar-*                 Generic bar component (market structure)
     .conc-*                Concentration bar (market share)

   CALLOUT PRIMITIVES
     .callout               Left-border callout
     .scope-note            Italic right-column context block

   HIGHLIGHT BOXES
     .verdict-box           Amber verdict highlight
     .wins-box              Dark-background highlight
     .verdict-label/.text   Report verdict (S3 variant)
     .the-move              Strategic recommendation callout

   CARD COMPONENTS (K1–K10)
     K1  .op-*              Operator cards (competitor profiles)
     K2  .geo-*             Geography cards (market-by-market)
     K3  .reg-*             Regulation cards (named regulations)
     K4  .tech-*            Tech/driver items (forces, pressures)
     K5  .deal-*            Deal list (capital events)
     K6  .ci-journey-*      Decision journey (vertical timeline)
     K7  .ci-gap-*          Unmet need cards
     K8  .fault-*           Fault/numbered items
     K9  .scenario-*        Scenario cards (bull/base/bear)
     K10 .power-*           Power/force items (Porter's Five Forces)

   SUPPLEMENTARY STRUCTURAL
     .char-*                Characteristic grid items
     .data-table            Data table (T1)
     .ci-driver-*           Purchase driver bars
     .intel-item            Intelligence brief item (legacy)

   COMPETITIVE LANDSCAPE SPECIFICS
     .cl-player-*           Competitor player rows
     .cl-rating-*           Customer rating rows
     .cl-battle-*           Battleground cards

   REPORT CHROME
     .rpt-*                 Report UI chrome (TOC, about, conf bar, etc)
     .source-item           Source list item

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


/* ───────────────────────────────────────────────────────────────────────────
   STAT PRIMITIVES
   ─────────────────────────────────────────────────────────────────────────── */

.vcard {
  padding: 11px 14px 11px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gray-background);
}

.vcard-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.5px;
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
}

.vcard-text {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--report-ink);
}

.stat-cell {
  border-radius: 10px;
  padding: var(--spacing-3) var(--spacing-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 72px;
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-light);
}

.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.stat-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.5px;
  color: var(--report-ink);
  line-height: 1.4;
  max-width: 75%;
}

.stat-value {
  font-size: 24px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.5px;
  color: var(--report-ink);
  margin-top: var(--spacing-2);
}

.stat-value.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ───────────────────────────────────────────────────────────────────────────
   BAR PRIMITIVES
   ─────────────────────────────────────────────────────────────────────────── */

.bar-list  { display: flex; flex-direction: column; gap: var(--spacing-3); }
.bar-item  { height: 52px; overflow: hidden; }

.bar-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  align-items: center;
}

.bar-name { font-size: var(--chart-name-size); font-weight: var(--chart-name-wt); color: var(--chart-name-color); }

.bar-val {
  font-size: var(--chart-val-size);
  font-weight: var(--chart-val-hl-wt);
  color: var(--chart-val-color);
  white-space: nowrap;
  width: 90px;
  text-align: right;
}

.bar-val.hl { color: var(--chart-val-hl-color); }

.bar-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: 2px;
}

.bar-row .bar-track { margin-bottom: 0; }

.bar-track {
  height: 12px;
  background: var(--gray-background);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bar-fill     { height: 100%; background: var(--gray-light); border-radius: var(--radius-sm); }
.bar-fill.grad { background: var(--gradient-horizontal); border-radius: var(--radius-sm); border: none; }
.bar-fill.dim  { background: var(--gray-light); border-radius: var(--radius-sm); }

.bar-note {
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: 2px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.ct-barrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.ct-barrow .ct-bar {
  flex: 1;
  height: 12px;
  background: var(--gray-background);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ct-val    { font-size: var(--chart-val-size); font-weight: var(--chart-val-hl-wt); color: var(--chart-val-color); white-space: nowrap; padding-left: var(--spacing-2); flex-shrink: 0; }
.ct-val.hl { color: var(--chart-val-hl-color); }

.ci-item         { margin-top: 10px; }
.ci-item:first-child { margin-top: var(--spacing-2); }

.chart-table { width: 100%; border-collapse: collapse; }
.chart-table td { padding: 0; vertical-align: top; }
.chart-table .ct-spacer { width: 28px; }


/* ───────────────────────────────────────────────────────────────────────────
   CONCENTRATION BARS
   ─────────────────────────────────────────────────────────────────────────── */

.conc-list { background: none; padding: 0; }

.conc-item { margin-bottom: 11px; height: 52px; overflow: hidden; }
.conc-item:last-child { margin-bottom: 0; }

.conc-head { display: flex; justify-content: space-between; margin-bottom: 3px; }

.conc-name { font-size: var(--chart-name-size); font-weight: var(--chart-name-wt); color: var(--chart-name-color); }

.conc-pct {
  font-size: var(--overline);
  font-weight: var(--chart-val-hl-wt);
  color: var(--chart-val-color);
  white-space: nowrap;
  width: 44px;
  text-align: right;
}

.conc-pct.hl { color: var(--chart-val-hl-color); }

.conc-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: 2px;
}

.conc-row .conc-track { margin-bottom: 0; }

.conc-track { height: 12px; background: var(--gray-background); border-radius: var(--radius-sm); overflow: hidden; }

.conc-fill     { height: 100%; border-radius: var(--radius-sm); background: var(--gray-light); }
.conc-fill.grad { background: var(--gradient-horizontal); border-radius: var(--radius-sm); }
.conc-fill.dim  { background: var(--gray-light); border-radius: var(--radius-sm); }

.conc-sub { font-size: var(--t-body); color: var(--report-ink); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ───────────────────────────────────────────────────────────────────────────
   CALLOUT PRIMITIVES
   ─────────────────────────────────────────────────────────────────────────── */

.callout {
  border-left: 3px solid var(--cyan);
  padding: 10px 14px;
  margin: 14px 0;
  background: var(--off-white);
}

.callout p { font-size: var(--t-body); line-height: 1.7; color: var(--report-ink); }

.callout.analyst {
  background: var(--off-white);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
}

.callout.analyst strong {
  color: var(--cyan);
  font-size: var(--t-body);
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
}

.callout.analyst p { color: var(--report-ink); font-size: var(--t-body); line-height: 1.6; margin: 0; }

.scope-note {
  font-size: var(--t-body);
  font-style: italic;
  line-height: 1.7;
  color: var(--report-ink);
  border-left: 2px solid var(--report-border);
  padding-left: 12px;
}


/* ───────────────────────────────────────────────────────────────────────────
   HIGHLIGHT BOXES
   ─────────────────────────────────────────────────────────────────────────── */

/* Verdict box — gray fill removed May 14 2026; sits on page bg, border only */
.verdict-box {
  background: transparent;
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  margin-bottom: 14px;
}

.verdict-box-label {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
}

.verdict-box-text {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: 1.7;
  color: var(--navy);
}

.verdict-box-text strong { color: var(--navy); font-weight: 500; font-style: normal; }

/* S3 verdict label/text (used in newer templates) */
.verdict-label {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
}

.verdict-text {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--navy);
}

/* Wins box (dark) */
.wins-box {
  background: var(--white);
  border: 1.5px solid var(--band-excellent);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 14px;
}

.wins-box-label {
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--band-excellent);
  margin-bottom: var(--spacing-2);
}

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

.wins-box-text strong { color: var(--report-ink); font-weight: 500; font-style: normal; }

/* The Move — strategic recommendation. Green (band-strong/mint) per
   May 14 2026 update; was blue (band-excellent). */
.the-move {
  background: var(--white);
  padding: 14px 18px;
  border: 1.5px solid var(--band-strong);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.the-move-label {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--band-strong);
  margin-bottom: var(--spacing-2);
}

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

/* Divider */
.divider { border: none; border-top: 1px solid var(--report-border); margin: 14px 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   K5 — DEAL LIST
   Capital events, M&A, funding rounds.
   ═══════════════════════════════════════════════════════════════════════════ */

/* One shared grid (not a grid per .deal-item) so the year column takes the
   width of the WIDEST year text and every middle column starts at the same x —
   left-aligned across all rows. .deal-item is display:contents so its 3 cells
   drop straight into the parent grid; row dividers + vertical padding move onto
   the cells. No column-gap, so the divider stays continuous — horizontal
   spacing comes from cell padding instead. Was: each .deal-item was its own
   "auto 1fr auto" grid with gap:24px, so a wider year ("2023–2024") shifted
   that row's middle column to the right. Christine, 1 June 2026. */
.deal-list {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
}

.deal-item { display: contents; }
.deal-item > * {
  padding: 10px 0;
  border-bottom: 1px solid var(--report-border);
}

.deal-item:last-child > * { border-bottom: none; }

/* Year + deal heading: medium (500). Convention — black headings bold to 500,
   never heavier; cyan headings may go heavier (Christine, 1 June 2026).
   Was: var(--font-weight-bold) (700, too heavy); originally
   var(--chart-val-wt)/var(--chart-name-wt) (300). */
/* padding-right is the year→middle column gap (the grid no longer supplies one).
   Was: 5px (the old per-item grid added a 24px gap). Christine, 1 June 2026. */
.deal-year  { font-size: var(--chart-val-size); font-weight: var(--font-weight-medium); line-height: var(--t-body-lh); color: var(--chart-val-color); padding-right: 24px; }
.deal-title { font-size: var(--chart-name-size); font-weight: var(--font-weight-medium); line-height: var(--t-body-lh); color: var(--chart-name-color); margin-bottom: 3px; }
.deal-body  { font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); }

.deal-amt {
  font-size: var(--chart-val-size);
  /* Bold the deal amounts (numbers on the right) per Christine, 31 May 2026.
     Was: font-weight: var(--chart-val-wt). */
  font-weight: var(--font-weight-bold);
  line-height: var(--t-body-lh);
  color: var(--chart-val-color);
  text-align: right;
  padding-top: 3px;
  /* middle→amount column gap (the grid no longer supplies one). Christine, 1 June 2026. */
  padding-left: 24px;
}

.deal-type {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  letter-spacing: 0.5px;
  /* Deal type labels (M&A / Raise / IPO) in cyan per Christine, 31 May 2026.
     Was: color: var(--t-heading-color). */
  color: var(--cyan);
}

/* K5 — Mobile: stack the three deal-item columns (year, title+body,
   amount) into one column. The desktop "auto 1fr auto" grid leaves
   the year and amount columns awkwardly compressed on phones, with
   the middle column wrapping into many short lines. Stacking gives
   each piece its own row at full width. */
@media (max-width: 600px) {
  /* Stack into one column. The desktop layout is now a shared grid with the
     cells living on .deal-list, so collapse back to plain blocks and put the
     divider + padding back on the item (one divider per deal, not per cell).
     Was: overrode the per-item grid to a single 1fr column. Christine, 1 June 2026. */
  .deal-list { display: block; }
  .deal-item {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--report-border);
  }
  .deal-item:last-child { border-bottom: none; }
  .deal-item > * { padding: 0; border-bottom: none; }
  .deal-year { padding-right: 0; }
  .deal-amt { text-align: left; padding-top: 0; padding-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   K1 — OPERATOR CARDS
   Rich competitor or operator profiles with key-value detail.
   ═══════════════════════════════════════════════════════════════════════════ */

/* K1 — Operator cards split into individually-bordered cards per design
   — May 14 2026. Outer wrapper border removed; each .op-card now owns
   its own full border + radius, separated by a 12px flex gap. */
/* Gap BETWEEN brand sections. The section's bottom divider now lives on the last
   .op-row (above the unboxed "real story" footer), so this gap separates one
   section's footer from the next section's cyan-underlined name and needs more
   breathing room than the 6px inter-row rhythm to read as a real section break
   (per Christine, 31 May 2026). Was: 20px, then 6px (sections read too close
   together); before that 16px, then 0, originally 24px. */
.op-list { display: flex; flex-direction: column; gap: 40px; border: 0; border-radius: 0; }

.op-card {
  /* Restyled to match the .data-table component — flat, no box; the cyan
     underline header carries the structure (per Christine, 31 May 2026).
     Was (boxed card, May 14 2026):
       border: 1px solid var(--report-border);
       border-radius: var(--radius-sm);
       overflow: hidden; */
  border: 0;
  border-radius: 0;
  background: transparent;
  /* The per-section divider now lives on the LAST .op-row (a border-BOTTOM on
     the data rows), NOT on the card — so it sits tight (~6px) under the last
     data row instead of below the empty/footer .op-truth box, which is what made
     it look far from the last value (per Christine, 31 May 2026).
     Was: border-bottom: 1px solid var(--report-border); */
  /* padding-bottom removed (was 10px). */
  padding-bottom: 0;
}
/* No card-level border to manage anymore — the section's bottom divider lives on
   the last .op-row. Kept as a harmless padding guard (per Christine, 31 May 2026). */
.op-card:last-child { padding-bottom: 0; }
/* .hl emphasis now comes from the .op-name.hl colour + bold .op-status.act,
   not from a box border (there is no box anymore — matches the flat
   data-table look). Was: .op-card.hl { border-color: var(--navy); } */

.op-head {
  display: flex;
  /* Name + status now sit together on the LEFT — the status is an inline bracketed
     qualifier of the name, like unmet-needs' segment (per Christine, 31 May 2026).
     Was: justify-content: space-between; align-items: center (status far right). */
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  /* Quiet gray-dark underline instead of cyan — repeated cyan rules read as
     disruptive stripes down a full report; the cyan accent moved onto the heading
     text instead (per Christine, 31 May 2026). Was: border-bottom 3px var(--cyan),
     then 3px var(--gray-dark) (line weight reduced to 1px per Christine, 31 May 2026). */
  border-bottom: 1px solid var(--gray-dark);
  background: transparent;
}

/* hl header no longer gets a grey fill — matches the flat data-table look.
   Was: .op-card.hl .op-head { background: var(--gray-white); } */

/* Non-hl name is now semibold (bold) too — per Christine 31 May 2026 she wants
   "Helios Grid" bold to match the leader. Was: var(--chart-name-wt) (300 light;
   weight used to carry the leader highlight). Both names are semibold now and
   the status text carries the leader/challenger distinction. */
/* Heading text is now cyan — the accent moved here from the (removed) cyan
   underline (per Christine, 31 May 2026). Was: color var(--chart-name-color). */
.op-name      { font-size: var(--chart-name-size); font-weight: var(--font-weight-semibold); color: var(--cyan); }
/* hl name stays cyan too (the leader is no longer carried by the name colour).
   Was: color var(--chart-name-hl-color). */
.op-name.hl   { color: var(--cyan); font-weight: var(--chart-name-hl-wt); }
/* Status is now an inline, light (300) bracketed qualifier next to the name
   (brackets come from the template), like unmet-needs' segment (per Christine,
   31 May 2026). Was: .op-status { font-weight: var(--font-weight-semibold) } +
   .op-status.act { color: var(--report-ink); font-weight: 700 } (bold leader). */
.op-status     { font-weight: var(--font-weight-light); color: var(--report-ink); }
/* Weighted-score badge — make-vs-buy only (suppressed for archetype/other uses
   by its absence in the data). Pushed to the far-right of the header row via
   margin-left:auto so it never crowds the name+status cluster on the left. */
.op-score {
  margin-left: auto;
  font-size: var(--t-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink-muted, var(--report-ink));
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.op-body {
  /* 10px horizontal aligns the body under the header column, like data-table
     th/td share a 10px inset (was 9px 12px). Bottom padding removed (was 9px)
     so the per-operator divider sits ~6px under the last row — the same gap as
     the inter-row dividers — instead of far below it (per Christine, 31 May 2026). */
  padding: 9px 10px 0;
  /* Two-column grid so the short Share / Position rows sit side-by-side;
     longer rows (Note) and the truth panel span both columns. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* column-gap collapsed to 0 (was 24px) so each row's bottom border meets
     edge-to-edge into one continuous divider; the visual column spacing is
     recreated with internal cell padding below. row-gap 0 (was 7px) — the
     row padding + divider now carry the rhythm (per Christine, 31 May 2026). */
  column-gap: 0;
  row-gap: 0;
}

/* Thin grey divider on every body row, like data-table rows; same token as
   .data-table td. Drawn as a BOTTOM border now (was a top border) so the LAST
   data row carries the section's closing divider tight under itself, and the
   empty/footer .op-truth that follows gets no line of its own (per Christine,
   31 May 2026). The side-by-side pair (nth-child 1 & 2) shares one grid row, so
   their two bottom borders meet edge-to-edge (column-gap is 0) into one unbroken
   line; every later row spans full width (nth-child(n+3)) so its line is full-
   width too — no seam gap, no trailing half-line.
   Was: border-top on every row except the first pair (nth-child 1 & 2). */
.op-row         { margin-bottom: 0; padding: 20px 0 6px; border-bottom: 1px solid var(--report-border); }
/* Side-by-side pair (cols 1 & 2): inset content to restore the ~24px column
   gap (column-gap is 0 so any later borders stay continuous). */
.op-row:nth-child(1) { padding-right: 12px; }
.op-row:nth-child(2) { padding-left: 12px; }
.op-row:nth-child(n+3),
.op-truth       { grid-column: 1 / -1; }

/* Report 440 only — Christine, 1 June 2026.
   Lay the operator-card body out as a 2×2 so Revenue (SEA) sits in the column to
   the RIGHT of Weakness, instead of Weakness + Revenue each spanning full width.
   Scoped by report id (attribute selector, NOT :has() — the PDF/Firecrawl path
   ignores :has()) because the default first-pair-only layout is correct for the
   many 3-row / 5-row / long-"Note" operator-cards in other reports; only this
   report's operators are uniformly four short rows (Primary market, How they win,
   Weakness, Revenue). The truth panel keeps its full-width 1/-1 below.
   Was: .op-row:nth-child(3) and (4) inherited the full-width 1/-1 above. */
.report-paginated[data-report-id="440"] .op-row:nth-child(3),
.report-paginated[data-report-id="440"] .op-row:nth-child(4) { grid-column: auto; }
/* Recreate the ~24px column gap on the second pair, mirroring the first pair's
   nth-child(1)/(2) insets (column-gap is 0 so dividers stay continuous). */
.report-paginated[data-report-id="440"] .op-row:nth-child(3) { padding-right: 12px; }
.report-paginated[data-report-id="440"] .op-row:nth-child(4) { padding-left: 12px; }

.op-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;
}

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

.op-truth {
  /* No border — the "real story" footer sits below the last data row's bottom
     divider, never boxed by a line of its own (per Christine, 31 May 2026). */
  border: 0;
  margin-top: 7px;
  padding-top: 7px;
}

.op-truth-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;
}

.op-truth-val { font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); font-style: italic; }

/* Make vs Buy — per-card criterion-score strip.
   Compact bars below the operator-card body showing the option's score profile
   against each decision-matrix criterion. Gated on op.score_bars in the template
   — inert for all other operator-card uses (archetypes, exec-search, etc.). */
.op-score-strip {
  margin-top: 20px;
  padding: 7px 10px 8px;
  border-top: 1px solid var(--report-border);
  display: grid;
  grid-template-columns: max-content 1fr auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;
}
.op-score-bar-row {
  display: contents;
}
.op-score-bar-label {
  font-size: var(--t-caption);
  color: var(--report-ink-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.op-score-bar-track {
  height: 6px;
  background: var(--report-border);
  border-radius: 3px;
  overflow: hidden;
}
.op-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--cyan) 5%,  var(--report-white)),
    color-mix(in srgb, var(--cyan) 70%, var(--report-white)));
}
.op-score-bar-fill[data-band="emerging"]   {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--band-emerging)   5%,  var(--report-white)),
    color-mix(in srgb, var(--band-emerging)   70%, var(--report-white)));
}
.op-score-bar-fill[data-band="developing"] {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--band-developing) 5%,  var(--report-white)),
    color-mix(in srgb, var(--band-developing) 70%, var(--report-white)));
}
.op-score-bar-fill[data-band="solid"]      {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--band-solid)      5%,  var(--report-white)),
    color-mix(in srgb, var(--band-solid)      70%, var(--report-white)));
}
.op-score-bar-fill[data-band="strong"]     {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--band-strong)     5%,  var(--report-white)),
    color-mix(in srgb, var(--band-strong)     70%, var(--report-white)));
}
.op-score-bar-fill[data-band="excellent"]  {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--band-excellent)  5%,  var(--report-white)),
    color-mix(in srgb, var(--band-excellent)  70%, var(--report-white)));
}
.op-score-bar-num {
  font-size: var(--t-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink-muted, var(--report-ink));
  text-align: right;
}


/* ═══════════════════════════════════════════════════════════════════════════
   K10 — POWER / FORCE ITEMS
   Porter's Five Forces, competitive pressure assessment.
   ═══════════════════════════════════════════════════════════════════════════ */

.power-list { display: flex; flex-direction: column; gap: 24px; }

/* K10 — canonical power-items recipe (May 27 2026).
   Non-lead items: --gray-light background, no border, no tint.
   Lead item (.hl OR contains .power-lev.hi): transparent background,
   1px --brand-orange border. The orange border is the ONLY chrome
   that signals the lead force; everything else is quiet gray. This
   standard applies across every report family — do not re-tint per
   theme. */
.power-item {
  /* Borders removed — power-items now match the flat card-family (op-card /
     unmet-needs): no card outline; identity via the cyan heading + gray-dark
     underline (Christine, 1 June 2026). Was: border 1px solid var(--gray-light). */
  border-radius: var(--radius-sm);
  background: transparent;
}

.power-item.hl,
.power-item:has(.power-lev.hi) {
  /* Lead force no longer carries a border either (flat family). Was:
     border 1px solid var(--gray-white). */
  background: transparent;
}

/* Themed-list tints are intentionally retired — leader signal is the
   orange border, all other forces sit in --gray-light. The .is-danger
   / .is-warning / .is-success classes are kept on .power-list for
   backwards-compatibility but no longer paint the cards. */

.power-head {
  display: flex;
  /* Name + level sit together on the LEFT — level is an inline bracketed
     qualifier of the name, like op-card/unmet-needs (Christine, 1 June 2026).
     Was: justify-content: space-between; align-items: center (level far right). */
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 9px 14px;
  /* Quiet 1px gray-dark underline under the heading (Christine, 1 June 2026).
     Was: border-bottom: 1px solid #ffffff (invisible white). */
  border-bottom: 1px solid var(--gray-dark);
}

/* Force names render as paragraph headings — same canonical recipe as
   ci-gap-name (unmet needs), so the heading ladder reads consistently
   across every card family. */
.power-name {
  font-size: var(--paragraph-heading-size);
  font-weight: var(--paragraph-heading-weight);
  line-height: var(--paragraph-heading-lh);
  /* Heading text now cyan — accent on the heading, like op-card (Christine,
     1 June 2026). Was: color var(--paragraph-heading-color). */
  color: var(--cyan);
}
.power-name.hl  { color: var(--cyan); font-weight: var(--paragraph-heading-weight); }
/* Level is now an inline, light bracketed qualifier next to the name (brackets
   come from the template), like op-card's status (Christine, 1 June 2026).
   Was: .power-lev { font-weight: 500 }. */
.power-lev      { font-weight: var(--font-weight-light); color: var(--report-ink); }
.power-lev.hi   { color: var(--report-ink); }
.power-lev.md   { color: var(--report-ink); }
.power-lev.lo   { color: var(--report-ink); }

.power-body { padding: 9px 14px; font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   K3 — REGULATION CARDS
   Named regulations with status, jurisdiction, and impact.
   ═══════════════════════════════════════════════════════════════════════════ */

/* K3 — each regulation is now its own standalone card. The list is a
   flex column with a gap; per-item border + radius + fill carry the
   card chrome. The old container border / inter-item divider have been
   removed in favour of the gap. */
/* 40px gap between regulation sections to match operator-cards (per Christine,
   31 May 2026). Was: 24px. */
.reg-list { display: flex; flex-direction: column; gap: 40px; margin-bottom: 0; }

.reg-item {
  /* No gray fill per Christine (May 27 2026) — head/body separation is
     carried by the divider line alone. Apply this everywhere these
     cards appear; do not reintroduce a tinted background. */
  /* No outline — cards read as a clean list, with the cyan name pill as the
     only accent and text aligned flush with the rest of the report.
     Christine 29 May 2026. */
  border: none;
  background: transparent;
}

.reg-head {
  /* Heading sits tighter to the body and gains a quiet gray-dark underline to
     align with op-card / data-table headers (Christine, 1 June 2026).
     Was: padding 12px 0; background transparent; border-bottom 0 (no underline,
     the cyan hugged the heading text as an inline pill). */
  padding: 6px 0;
  background: transparent;
  border-bottom: 1px solid var(--gray-dark);
}

/* Cyan heading TEXT (no pill) mirroring .op-name / .data-table th
   (Christine, 1 June 2026). Was: cyan pill — background var(--cyan), white
   semibold text, display inline-block, radius var(--radius-sm),
   padding var(--spacing-1) var(--spacing-2). */
.reg-name   {
  font-size: var(--chart-name-size);
  font-weight: var(--font-weight-semibold);
  color: var(--cyan);
  line-height: var(--t-heading-lh);
}
/* Descriptor is the inline "(status)" qualifier — black, light (300), brackets
   from the template, like .op-status (Christine, 1 June 2026).
   Was: semibold white. */
.reg-status { font-size: var(--chart-name-size); font-weight: var(--font-weight-light); white-space: nowrap; color: var(--report-ink); }
.reg-status.active       { color: var(--report-ink); }

/* Highlighted card matches the rest now that the pill is gone: cyan name,
   black light descriptor (Christine, 1 June 2026). Was: white semibold (the
   cyan-pill treatment). */
.reg-item.hl .reg-name   { color: var(--cyan); font-weight: var(--font-weight-semibold); }
.reg-item.hl .reg-status { color: var(--report-ink); font-weight: var(--font-weight-light); }

/* Bottom padding → 0 so the details row's bottom border closes the section right
   under it, mirroring op-body (per Christine, 31 May 2026). Was: padding 14px 0. */
/* Tighter top padding so the body sits closer under the heading (Christine,
   1 June 2026). Was: 9px 0 0. */
.reg-body { padding: 6px 0 0; }

.reg-text {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  font-weight: 300;
  /* Body text now reads as a row with a thin grey divider below it, matching the
     operator-cards inter-row dividers (per Christine, 31 May 2026).
     Was: margin-bottom: 20px (plain gap, no divider line). */
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--report-border);
}

/* Details row: only the divider above it (reg-text border-bottom) remains; the
   section-closing bottom border was removed per Christine (31 May 2026).
   Was: border-bottom: 1px solid var(--report-border); */
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 0; }

.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(--t-body);
  color: var(--report-ink);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
}


/* ═══════════════════════════════════════════════════════════════════════════
   K4 — TECH / DRIVER ITEMS
   Market forces, demand drivers, technology pressures.
   ═══════════════════════════════════════════════════════════════════════════ */

/* gap:0 — items separated by border-top dividers; display:block neutralises
   frame.css's grid/bar column. margin-bottom adds breathing room before
   whatever prose/section follows the chart. */
.tech-list { display: flex; flex-direction: column; gap: 0; border: none; border-radius: 0; background: transparent; margin-bottom: 30px; }

/* Border-top divider between items (no line above the first). */
.tech-item { display: block; padding: 16px 0; border-top: 1.5px solid var(--report-border); }
.tech-item:first-child { border-top: none; }
.tech-title.hl { color: var(--chart-name-hl-color); font-weight: var(--chart-name-hl-wt); }

.tech-bar        { background: var(--gray-light); border-radius: 2px; }
.tech-bar.active { background: var(--cyan); }

.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);
}
/* Cyan arrow bullet before the title. */
.tech-title::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  background: url("/static/images/icons/arrow.svg") no-repeat left center / contain;
}

.tech-tag {
  font-size: var(--t-xsmall, 11px);
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--report-ink-60);
  background: var(--gray-white);
  border: 1px solid var(--report-border);
  border-radius: 20px;
  padding: 2px 8px;
}
.tech-item.active .tech-tag {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 30%, transparent);
}

/* Severity-band pill (Christine, 6 Jul 2026; text kept navy 6 Jul 2026 pm):
   overrides the active/inactive scheme above when the driver's tag is a
   High/Medium/Low rating (see tech-driver.html) — every "High" pill reads
   the severity colour in its background/border, matching the banded bar
   chart above it. Text stays navy (var(--report-ink)) rather than also
   tinting to the band colour — the coloured wash + border is enough to
   read severity at a glance, and navy text keeps the pill label legible
   and consistent with every other pill on the report.
   Selectors repeat the .tech-item.active ancestor so specificity beats
   the active/inactive rule above regardless of source order — otherwise
   `active:true` drivers kept the old cyan pill even when their tag was
   banded, which is why some "High" pills stayed cyan while the bars
   (which never depended on `active`) were correctly banded. */
.tech-tag.band-excellent,  .tech-item.active .tech-tag.band-excellent  { color: var(--report-ink); background: var(--band-excellent-soft);  border-color: color-mix(in srgb, var(--band-excellent) 35%, transparent); }
.tech-tag.band-strong,     .tech-item.active .tech-tag.band-strong     { color: var(--report-ink); background: var(--band-strong-soft);     border-color: color-mix(in srgb, var(--band-strong) 35%, transparent); }
.tech-tag.band-solid,      .tech-item.active .tech-tag.band-solid      { color: var(--report-ink); background: var(--band-solid-soft);      border-color: color-mix(in srgb, var(--band-solid) 35%, transparent); }
.tech-tag.band-developing, .tech-item.active .tech-tag.band-developing { color: var(--report-ink); background: var(--band-developing-soft); border-color: color-mix(in srgb, var(--band-developing) 35%, transparent); }
.tech-tag.band-emerging,   .tech-item.active .tech-tag.band-emerging   { color: var(--report-ink); background: var(--band-emerging-soft);   border-color: color-mix(in srgb, var(--band-emerging) 35%, transparent); }
/* Body + monitor note indented to align under the title text, clearing the arrow. */
.tech-body { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); font-weight: 300; margin-bottom: 12px; margin-left: calc(0.9 * var(--paragraph-heading-size) + var(--spacing-2)); }
.tech-body:last-child { margin-bottom: 0; }
.tech-item .rpt-monitor-note { margin-left: calc(0.9 * var(--paragraph-heading-size) + var(--spacing-2)); }


/* ═══════════════════════════════════════════════════════════════════════════
   K8 — FAULT / NUMBERED ITEMS
   Numbered risks, findings, ranked observations.
   ═══════════════════════════════════════════════════════════════════════════ */

.fault-list { display: flex; flex-direction: column; gap: 0; }

.fault-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-4);
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--report-border);
}

.fault-item:last-child { border-bottom: none; }

.fault-num   {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Numbered circles unified to 24px across the gallery (matches .sv-intel-num,
     which also uses --spacing-6). Was: calc((--spacing-6 + --spacing-8) / 2) = 28px. */
  width: var(--spacing-6);
  height: var(--spacing-6);
  border-radius: var(--radius-full);
  font-size: var(--t-small);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  line-height: 1;
  flex-shrink: 0;
  background: var(--gray-mid);
}
/* Ranked-risk number badges — a DESCENDING ramp down the kicker ladder
   starting at PINK: #1 kicker13 (pink), #2 kicker12, … stepping one band
   per rank toward yellow (kicker01). Explicit nth-child(1..13) rather than
   a 5-item cycle, so a longer list (these risk lists can run 8-9 items) gets
   a DISTINCT colour per rank instead of repeating after five. 13 ranks span
   the whole pink→yellow ladder; anything beyond falls back to the default
   grey badge. Christine, 2 June 2026. Was: a 5-item cycle starting at cyan
   (#1 cyan / #2 kicker06 / #3 kicker07 / #4 kicker08 / #5 kicker09). */
.fault-item:nth-child(1)  .fault-num { background: var(--kicker13); }
.fault-item:nth-child(2)  .fault-num { background: var(--kicker12); }
.fault-item:nth-child(3)  .fault-num { background: var(--kicker11); }
.fault-item:nth-child(4)  .fault-num { background: var(--kicker10); }
.fault-item:nth-child(5)  .fault-num { background: var(--kicker09); }
.fault-item:nth-child(6)  .fault-num { background: var(--kicker08); }
.fault-item:nth-child(7)  .fault-num { background: var(--kicker07); }
.fault-item:nth-child(8)  .fault-num { background: var(--kicker06); }
.fault-item:nth-child(9)  .fault-num { background: var(--kicker05); }
.fault-item:nth-child(10) .fault-num { background: var(--kicker04); }
.fault-item:nth-child(11) .fault-num { background: var(--kicker03); }
.fault-item:nth-child(12) .fault-num { background: var(--kicker02); }
.fault-item:nth-child(13) .fault-num { background: var(--kicker01); }
.fault-title { font-size: var(--chart-name-size); font-weight: var(--font-weight-medium); color: var(--chart-name-color); margin-bottom: 3px; }
.fault-body  { font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   K9 — SCENARIO CARDS
   Bull / base / bear outlook with probability and bullet implications.
   ═══════════════════════════════════════════════════════════════════════════ */

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

.scenario-grid .scenario {
  min-width: 0;
}

/* Mobile: stack the scenario cards (Bull / Base / Bear) vertically
   instead of laying them out in a row, and drop the equal-height
   title min-height since stacked cards no longer need their titles
   to align across columns. */
@media (max-width: 600px) {
  .scenario-grid { grid-template-columns: 1fr; }
  .scenario-grid .scenario-title { min-height: 0; }
}

.scenario {
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: transparent;
}

/* Per-type coloured card OUTLINE. Type class is emitted on BOTH .scenario and
   .scenario-head in the template — direct class selectors, NO :has()
   (Firecrawl ignores it). Interior stays neutral; colour lives on the border. */
.scenario.bull { border-color: var(--green); }
.scenario.base { border-color: var(--cyan); }
.scenario.bear { border-color: var(--pink); }

/* Coloured type label + percentage — compound off .scenario-head.TYPE */
.scenario-head.bull .scenario-type,
.scenario-head.bull .scenario-prob { color: var(--green); }
.scenario-head.base .scenario-type,
.scenario-head.base .scenario-prob { color: var(--cyan); }
.scenario-head.bear .scenario-type,
.scenario-head.bear .scenario-prob { color: var(--pink); }

.scenario-head {
  padding: 0;
  background: transparent;
  border-bottom: none;
}

/* ── SCENARIO-CARD IDENTITY ─────────────────────────────────────────────────────
   Coloured type label + percentage on a NEUTRAL gray-bordered card.
   Type class is on .scenario-head — see compound selectors above.
   ───────────────────────────────────────────────────────────────────────────── */
.scenario-type {
  font-weight: 600;
  padding: var(--spacing-2) var(--spacing-3);
  text-transform: capitalize;
  color: var(--report-ink);
  border-bottom: 1px solid var(--report-border);
}

/* The highest-probability card gets NO highlight fill — identity is carried
   by the coloured type label and percentage, not a card tint. */
.scenario.scenario-hl { background: transparent; }
.scenario.scenario-hl .scenario-head { background: transparent; }

.scenario-title { font-size: var(--chart-name-size); font-weight: 400; color: var(--chart-name-color); line-height: var(--t-heading-lh); min-height: 3.9em; margin-bottom: 2px; padding: var(--spacing-2) var(--spacing-3) 0; }
.scenario-prob  { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--chart-val-color); line-height: var(--t-heading-lh); padding: 0 var(--spacing-3) var(--spacing-2); }
.scenario-prob-desc { font-weight: var(--t-body-wt); }

.scenario-body { padding: var(--spacing-2) var(--spacing-3); }

.scenario-ul { list-style: none; padding: 0; }

.scenario-ul li {
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--report-ink);
  padding: 3px 0 3px 10px;
  margin-bottom: 10px;
  position: relative;
}

.scenario-ul li:last-child { margin-bottom: 0; }

.scenario-ul li::before { content: '\203A'; position: absolute; left: 0; color: var(--report-ink); }

.scenario-prose {
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--report-ink);
  margin: 0 0 var(--spacing-3);
}
.scenario-prose + .scenario-ul { margin-top: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   K2 — GEOGRAPHY CARDS
   Market-by-market regional breakdown.
   ═══════════════════════════════════════════════════════════════════════════ */

.geo-hero {
  /* Outer border + grey card background removed per design — May 14
     2026. Item-divider lines (border-top on .geo-item) stay so the
     hero/items still read as a vertically-segmented list. */
  border: 0;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  background: transparent;
}

/* May 14 2026 — flush layout: zero left/right padding so geo content
   aligns with the surrounding section edges. Country names + stats
   are bolded (700) for stronger visual hierarchy. */
.geo-hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-1) var(--spacing-3);
  padding: 16px 0 0 0;
  background: transparent;
}

/* Black heading → medium (500), not heavier; the .hl variant is cyan so it may
   stay heavier (Christine, 1 June 2026). Was: .geo-name font-weight 700. */
.geo-hero-head .geo-name      { font-size: var(--chart-name-size); font-weight: var(--font-weight-medium); color: var(--chart-name-color); }
.geo-hero-head .geo-name.hl   { color: var(--cyan); font-weight: var(--font-weight-bold); } /* cyan → may stay heavier */
.geo-hero-tag            { font-size: var(--chart-val-size); font-weight: var(--font-weight-normal); font-style: italic; line-height: 1; color: var(--chart-val-hl-color); }
.geo-hero-body           { padding: 8px 0 var(--spacing-3) 0; font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); }

/* May 14 2026 — divider weight bumped from 0.75px → 1.5px and a
   matching divider added below the hero so the top card no longer
   floats unseparated from the list. */
/* Header-row divider: gray-dark 1px, consistent with every component/table
   header row (Christine, 1 June 2026). Was: 1.5px var(--report-border). */
.geo-hero { border-bottom: 1px solid var(--gray-dark); }

.geo-list { display: flex; flex-direction: column; border: 0; border-radius: 0; }

.geo-item {
  border-top: 1.5px solid var(--report-border);
  overflow: hidden;
  background: transparent;
  padding: 16px 0;
}
.geo-item:first-child {
  border-top: none;
}

.geo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-1) var(--spacing-3);
  padding: 16px 0 0 0;
  border-bottom: none;
}

.geo-name { font-size: var(--paragraph-heading-size); font-weight: var(--paragraph-heading-weight); color: var(--paragraph-heading-color); line-height: var(--paragraph-heading-lh); }
.geo-item > .geo-name::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: var(--spacing-2); background: url("/static/images/icons/arrow.svg") no-repeat left center / contain; vertical-align: baseline; }
.geo-tag  { font-size: var(--t-body); font-weight: var(--t-body-wt); font-style: normal; line-height: var(--t-body-lh); color: var(--report-ink); }
.geo-body { padding: 10px 0; font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); }

.geo-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-1) var(--spacing-2);
  margin-top: var(--spacing-2);
  margin-left: calc(0.9 * var(--paragraph-heading-size) + var(--spacing-2));
}
.geo-source {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--report-ink);
}


/* ═══════════════════════════════════════════════════════════════════════════
   K6 — DECISION JOURNEY (vertical timeline)
   Stage-by-stage customer buying process or process flow.
   ═══════════════════════════════════════════════════════════════════════════ */

.ci-journey { display: flex; flex-direction: column; gap: 0; }

.ci-journey-item {
  display: grid;
  /* Wider left (stage/duration) column so long stage names no longer overflow
     their 100px track into the spine and overlap the dots (the left cell carries
     min-width:130px). Wider spine track gives the dots left breathing room.
     Christine, 1 June 2026. Was: 100px 24px 1fr. */
  grid-template-columns: 150px 40px 1fr;
  gap: 0;
  position: relative;
}

.ci-journey-left {
  min-width: 130px;
  text-align: left;
  padding: var(--spacing-3) 20px var(--spacing-3) 0;
  margin-right: var(--spacing-3);
}

.ci-journey-stage {
  font-size: var(--chart-name-size);
  /* Stage name: medium (500) — black headings bold to 500, not heavier
     (Christine, 1 June 2026). Was: var(--font-weight-bold) (700); originally
     var(--chart-name-wt) (300). */
  font-weight: var(--font-weight-medium);
  color: var(--chart-name-color);
  line-height: var(--t-heading-lh);
}

/* Critical stages no longer highlighted — every stage renders identically
   per Christine, 31 May 2026. Was:
   .ci-journey-stage.critical { color: var(--band-excellent); font-weight: var(--chart-name-hl-wt); } */

.ci-journey-duration {
  font-size: var(--chart-meta-size);
  font-weight: var(--chart-meta-weight);
  color: var(--report-ink);
  margin-top: 2px;
}

.ci-journey-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--spacing-3);
  /* Left padding pushes the dots (and the connector line below them) clear of
     the stage column so the stage text never touches them. Christine, 1 June
     2026. Was: margin-left: 12px. */
  padding-left: var(--spacing-4);
  margin-left: 0;
}

.ci-journey-dot {
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--radius-full);
  background: var(--kicker05);
  border: none;
  flex-shrink: 0;
  z-index: 1;
}

/* Critical stages no longer enlarged/recoloured — all dots share one size and
   use their per-rank colour below, per Christine, 31 May 2026. Was:
   .ci-journey-dot.critical { width: var(--spacing-5); height: var(--spacing-5);
   background: var(--band-excellent); border: none; } */

/* Per-rank dot colours along the timeline — kicker03→kicker16 (14 ranks).
   Starts at kicker03 (Christine, 4 Jun 2026). Was: rank-1 = cyan (kicker05).
   Fallback (.ci-journey-dot base) stays cyan for any stage beyond rank-14. */
.ci-journey-dot.rank-1  { background: var(--kicker03); }
.ci-journey-dot.rank-2  { background: var(--kicker04); }
.ci-journey-dot.rank-3  { background: var(--cyan); }
.ci-journey-dot.rank-4  { background: var(--kicker06); }
.ci-journey-dot.rank-5  { background: var(--kicker07); }
.ci-journey-dot.rank-6  { background: var(--kicker08); }
.ci-journey-dot.rank-7  { background: var(--kicker09); }
.ci-journey-dot.rank-8  { background: var(--kicker10); }
.ci-journey-dot.rank-9  { background: var(--kicker11); }
.ci-journey-dot.rank-10 { background: var(--kicker12); }
.ci-journey-dot.rank-11 { background: var(--kicker13); }
.ci-journey-dot.rank-12 { background: var(--kicker14); }
.ci-journey-dot.rank-13 { background: var(--kicker15); }
.ci-journey-dot.rank-14 { background: var(--kicker16); }

/* launch_plan (GTM Strategy — The 12-week launch): ramp reversed so the
   final phase always lands on green, whatever the phase count — counted
   from the end via nth-last-of-type so it isn't tied to exactly 4 phases.
   Christine, 6 Jul 2026. */
#launch_plan .ci-journey-item:nth-last-of-type(1) .ci-journey-dot { background: var(--kicker03); }
#launch_plan .ci-journey-item:nth-last-of-type(2) .ci-journey-dot { background: var(--cyan); }
#launch_plan .ci-journey-item:nth-last-of-type(3) .ci-journey-dot { background: var(--kicker04); }
#launch_plan .ci-journey-item:nth-last-of-type(4) .ci-journey-dot { background: var(--kicker06); }

.ci-journey-line {
  flex: 1;
  width: 1px;
  background: var(--report-border);
  margin-top: 4px;
}

.ci-journey-right {
  padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-4);
}

.ci-journey-actor {
  font-size: var(--chart-name-size);
  /* Right-column heading: medium (500) — black headings bold to 500, not
     heavier (Christine, 1 June 2026). Was: var(--font-weight-bold) (700);
     originally var(--chart-name-wt) (300). */
  font-weight: var(--font-weight-medium);
  color: var(--chart-name-color);
  line-height: var(--t-heading-lh);
  margin-bottom: var(--spacing-1);
}

/* Critical-stage actor highlight removed — every actor renders the same
   per Christine, 31 May 2026. Was:
   .ci-journey-actor.critical { font-weight: var(--font-weight-bold);
   color: var(--band-excellent); } */

.ci-journey-description {
  font-size: 16px;
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: var(--t-body-lh);
  margin-bottom: var(--spacing-1);
}

.ci-journey-matters {
  font-size: 16px;
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: var(--t-body-lh);
  font-style: italic;
}

.ci-journey-critical-label {
  display: inline-block;
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-hl-wt);
  color: var(--chart-name-hl-color);
  margin-top: var(--spacing-2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   K7 — UNMET NEED CARDS
   Customer pain points, market gaps, underserved needs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* No surface fill — cards sit directly on the report background. The outer
   border + dividers carry the structure; the gray wash competed with the
   banded pills and the paragraph headings. */
/* Restyled to match operator-cards (.op-*) per Christine, 31 May 2026: flat list
   (no outer box), cards separated by a 40px gap, a 3px cyan-underline header, and
   thin grey row dividers — each card closed by its last body row's bottom divider.
   Was: .ci-gap-list { ...; border: 1px solid var(--report-border);
   border-radius: var(--radius-sm); } (boxed list, grey card dividers). */
.ci-gap-list { display: flex; flex-direction: column; gap: 40px; border: 0; border-radius: 0; background: transparent; }

/* Flat card — no box/border. The per-card closing divider now lives on the last
   .ci-gap-row (a border-bottom), mirroring .op-card. Was: border-bottom 1px
   var(--report-border); padding 0 (+ :last-child { border-bottom: none }). */
.ci-gap-card { border: 0; border-radius: 0; background: transparent; padding: 0; }
/* Every card stays closed by its last row's bottom divider, including the last
   card — so no :last-child border removal (matches operator-cards). */
/* hl name stays cyan too (highlight isn't carried by the name colour here).
   Was: color var(--chart-name-hl-color). */
.ci-gap-card.hl .ci-gap-name             { color: var(--cyan); font-weight: var(--chart-name-hl-wt); }

/* Head mirrors .op-head / .data-table th: name left, pill right, transparent bg,
   3px cyan underline. Was: padding 12px 14px; border-bottom 1px var(--report-border). */
.ci-gap-head {
  /* Name + segment sit together on the LEFT (left column), per Christine 31 May
     2026 — the segment is an inline qualifier of the name, not a right-column item.
     Was: display grid; grid-template-columns 1fr 1fr (pill/text in right column);
     before that flex space-between (pill far right). */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  /* Quiet gray-dark underline instead of cyan — the cyan accent moved onto the
     heading text; repeated cyan rules read as disruptive stripes down a full
     report (per Christine, 31 May 2026). Was: border-bottom 3px var(--cyan),
     then 3px var(--gray-dark) (line weight reduced to 1px per Christine, 31 May 2026). */
  border-bottom: 1px solid var(--gray-dark);
  background: transparent;
}
/* Segment is an inline, light (300) bracketed qualifier right next to the name
   (brackets come from the template), per Christine 31 May 2026. Was: semibold
   right-column heading text (.ci-gap-head > .ci-gap-seg { justify-self: start;
   margin-left: 12px }); before that a banded pill. */
.ci-gap-seg { font-weight: var(--font-weight-light); color: var(--report-ink); }

/* hl header keeps the cyan underline (emphasis comes from the name colour, like
   operator-cards). Was: .ci-gap-card.hl .ci-gap-head { border-bottom-color: var(--report-ink); } */

/* Need name mirrors .op-name: chart-name size, semibold, cyan text — the accent
   moved here from the (removed) cyan underline (per Christine, 31 May 2026).
   Was: color var(--chart-name-color); before that paragraph-heading tokens. */
.ci-gap-name {
  font-size: var(--chart-name-size);
  font-weight: var(--font-weight-semibold);
  color: var(--cyan);
}

/* ────────────────────────────────────────────────────────────────────
   CANONICAL STATUS PILL — the only banded-pill recipe.
   5% tint fill + 1px saturated border + BLACK text (we never colour
   the text; the band carries the meaning). Rendered exclusively via
   the `pill()` macro in `templates/reports/components/_pill.html`.
   ──────────────────────────────────────────────────────────────────── */
.rpt-pill {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--report-border);
  border-radius: 999px;
  background: transparent;
  font-size: var(--t-xsmall, 11px);
  font-weight: 500;
  color: var(--report-ink);
  white-space: nowrap;
}
.rpt-pill.is-success { background: var(--positive-tint); border-color: var(--success-border); }
.rpt-pill.is-warning { background: var(--neutral-tint);  border-color: var(--warning-border); }
.rpt-pill.is-danger  { background: var(--negative-tint); border-color: var(--danger-border);  }

/* Body mirrors .op-body: a 2-col grid so Evidence | Why sit side-by-side like the
   operator-cards Share | Position pair, sharing one continuous grey divider; in
   each cell the label sits above its text. column-gap 0 so the row dividers meet
   edge-to-edge — the column spacing is recreated with internal cell padding below.
   Was: padding 12px 14px; display flex column; gap var(--spacing-3). */
.ci-gap-body     { padding: 9px 10px 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 0; }
/* Thin grey divider on every row, drawn as a bottom border (mirrors .op-row); the
   last row's border closes the card. Was: display flex column; gap 4px; no border. */
.ci-gap-row      { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--report-border); }
/* Side-by-side pair: inset content to restore the column gap (column-gap is 0 so
   any full-width borders stay continuous). */
.ci-gap-row:nth-child(1) { padding-right: 12px; }
.ci-gap-row:nth-child(2) { padding-left: 12px; }
/* A lone row (only evidence OR only why) spans both columns so its divider is a
   full-width line, never a half-line. */
.ci-gap-row:nth-child(1):last-child { grid-column: 1 / -1; padding-right: 0; }
/* Row label mirrors .op-key: a t-heading label above its value. Was: a 10px
   uppercase eyebrow (font-size 10px; font-weight 600; text-transform uppercase;
   letter-spacing 0.06em; color var(--chart-name-color); opacity 0.7). */
.ci-gap-row-label {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--t-heading-color);
  line-height: var(--t-heading-lh);
}
/* Evidence + why bodies mirror .op-val — plain roman prose, NOT italic. Italic is
   reserved for the methodology source-item recipe; everywhere else,
   body text stays roman so it doesn't read as a quotation. */
.ci-gap-evidence { font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); margin: 0; font-style: normal; }
.ci-gap-why      { font-size: var(--t-body); font-weight: var(--t-body-wt); line-height: var(--t-body-lh); color: var(--report-ink); margin: 0; font-style: normal; }


/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE DRIVER BARS
   Horizontal bars showing purchase decision drivers (% importance).
   ═══════════════════════════════════════════════════════════════════════════ */

.ci-driver-list { display: flex; flex-direction: column; gap: var(--spacing-3); }

.ci-driver-row {
  display: grid;
  grid-template-columns: 160px 1fr 48px;
  align-items: center;
  gap: var(--spacing-3);
}

.ci-driver-label    { font-size: var(--t-body); font-weight: var(--font-weight-light); color: var(--report-ink); text-align: right; }
.ci-driver-label.hl { font-weight: var(--chart-name-hl-wt); color: var(--cyan); }

.ci-driver-track {
  position: relative;
  height: 8px;
  background: var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ci-driver-fill    { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--radius-sm); background: var(--report-ink); }
.ci-driver-fill.hl { background: var(--cyan); }

.ci-driver-score    { font-size: var(--t-body); font-weight: var(--font-weight-medium); color: var(--report-ink); text-align: right; }
.ci-driver-score.hl { color: var(--cyan); font-weight: var(--chart-name-hl-wt); }


/* ═══════════════════════════════════════════════════════════════════════════
   COMPETITIVE LANDSCAPE — PLAYER ROWS
   Competitor list with share and positioning data.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-player-list {
  width: 100%;
  border-collapse: collapse;
}

.cl-player-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--spacing-4);
  align-items: center;
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--report-border);
}

.cl-player-row:last-child { border-bottom: none; }

.cl-player-name {
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
}

.cl-player-share {
  font-size: var(--chart-val-size);
  font-weight: var(--chart-val-hl-wt);
  color: var(--chart-val-color);
  text-align: right;
  min-width: 48px;
}

.cl-player-status {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  color: var(--report-ink);
  min-width: 64px;
  text-align: right;
}

.cl-player-positioning {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  min-width: 120px;
  text-align: right;
}

.cl-player-cell {
  font-size: var(--t-body);
  color: var(--report-ink);
  padding: var(--spacing-2) var(--spacing-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPETITIVE LANDSCAPE — CUSTOMER RATING ROWS
   Aggregated platform ratings with praise/complaint signals.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-rating-list  { display: flex; flex-direction: column; gap: 12px; }

.cl-rating-row {
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.cl-rating-name   { font-size: var(--chart-name-size); font-weight: var(--chart-name-wt); color: var(--chart-name-color); margin-bottom: var(--spacing-2); }

.cl-rating-bar-wrap  { margin-bottom: var(--spacing-2); }
.cl-rating-bar-track { height: 6px; background: var(--gray-background); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.cl-rating-bar-fill  { height: 100%; border-radius: 3px; background: var(--cyan); }

.cl-rating-score {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--report-ink);
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.cl-rating-praise    { font-size: var(--t-body); line-height: 1.6; color: var(--report-green); margin-bottom: var(--spacing-1); }
.cl-rating-complaint { font-size: var(--t-body); line-height: 1.6; color: var(--report-red); }


/* ═══════════════════════════════════════════════════════════════════════════
   COMPETITIVE LANDSCAPE — BATTLEGROUND CARDS
   Active competitive fights with participants and status.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-battle-list { display: flex; flex-direction: column; gap: 12px; }

.cl-battle-item {
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cl-battle-body {
  padding: 12px 16px;
}

.cl-battle-dimension {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
  line-height: 1.4;
}

.cl-battle-players {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-2);
}

.cl-battle-tag {
  display: inline-block;
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  color: var(--report-ink);
  background: var(--gray-background);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

.cl-battle-leader { color: var(--cyan); background: var(--gray-background); }

.cl-battle-bar {
  height: 4px;
  background: var(--report-border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--spacing-2);
}

.cl-battle-bar .intensifying { background: var(--report-red); }
.cl-battle-bar .stable       { background: var(--report-amber); }
.cl-battle-bar .resolving    { background: var(--report-green); }


/* ═══════════════════════════════════════════════════════════════════════════
   CL — INSIGHT NOTE (pattern insight / exploitable insight)
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-insight-note {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--t-body-lh);
  color: var(--cyan);
  padding: var(--spacing-3) 0;
  border-top: 1px solid var(--report-border);
  margin-top: var(--spacing-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CL — SIGNALS TO WATCH (outlook section)
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-signals {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--report-border);
}

.cl-signals-title {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt-bold);
  color: var(--t-heading-color);
  line-height: var(--t-heading-lh);
  margin-bottom: var(--spacing-3);
}

.cl-signal-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--report-border);
}

.cl-signal-item:last-child { border-bottom: none; }

.cl-signal-num {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt-bold);
  color: var(--cyan);
  line-height: var(--t-body-lh);
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   CL — SCENARIO IMPACT (conditions + who benefits/exposed)
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-scenario-conditions {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1px solid var(--report-border);
  margin-bottom: var(--spacing-2);
}

.cl-scenario-impact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border-top: 1px solid var(--report-border);
  margin-top: var(--spacing-2);
}

.cl-scenario-benefits {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-green);
  line-height: var(--t-heading-lh);
}

.cl-scenario-exposed {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-red);
  line-height: var(--t-heading-lh);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SUPPLEMENTARY STRUCTURAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Character / numbered grid items */
.char-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--spacing-2);
  padding: 9px 12px;
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
}

.char-num  { font-size: var(--t-body); font-weight: var(--chart-name-hl-wt); color: var(--cyan); }
.char-text { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--report-ink); }

/* T1 — Data Table */
.data-table { width: 100%; border-collapse: collapse; }

/* Heading row: cyan TEXT + quiet gray-dark underline (per Christine, 31 May 2026).
   The cyan accent moved onto the header text; the rule went gray-dark because
   repeated cyan rules read as disruptive stripes down a full report.
   Was: color var(--report-ink); border-bottom 3px var(--cyan).
   Earlier fallback (solid cyan fill + white text):
     color: var(--report-white); background: var(--cyan); border-bottom: none;
   Original before that: color --report-ink on --gray-bubble. */
.data-table th {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--report-ink);
  padding: 6px 10px;
  background: transparent;
  border-bottom: 1px solid var(--gray-dark);
  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; }

/* ── Data-table: stacked card layout on narrow panels ───────────────────── */
@container report-panel (max-width: 600px) {
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: 100%; }
  .data-table tr {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--report-border);
  }
  .data-table tr:last-child { border-bottom: none; }
  .data-table td {
    padding: 2px 0;
    border: none;
  }
  .data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--report-ink-60);
    margin-bottom: 2px;
  }
  .data-table td:empty { display: none; }
}

/* ── data-table accent variants ─────────────────────────────────────────── */

/* Structural accent — Action required / structural-response tables.
   Header text + rule: --negative (red). First column bold for area label. */
.data-table--structural th {
  border-bottom-color: var(--report-ink);
}
.data-table--structural td:first-child { font-weight: 500; }

/* Watch — To be monitored / watchful-waiting tables. */
.data-table--watch th {
  border-bottom-color: var(--report-ink);
  background: var(--gray-white);
}

/* ── fw-variance-breakdown chrome ─────────────────────────────────────── */

/* Bridge section label (Revenue / Costs) above each waterfall */
.fw-vb-charts-row {
  display: flex;
  gap: var(--spacing-16);
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 50px;
}
.fw-vb-chart-group {
  flex: 0 0 auto;
}

@container report-panel (max-width: 900px) {
  .fw-vb-charts-row { flex-direction: column; align-items: stretch; gap: var(--spacing-8); }
  .fw-vb-chart-group { width: 100%; }
  .fw-pa-legend { display: none; }
}

.fw-vb-bridge-label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--navy);
  margin-bottom: 4px;
  text-align: center;
}
.fw-vb-bridge-label--gap { margin-top: var(--spacing-6); }

/* Gap between bridges and the classification table below */
.fw-vb-table-wrap--below { margin-top: var(--spacing-6); }

/* ── fw-variance-table — card-per-variance classification list ─────────── */
.fw-vt-list {
  margin-top: var(--spacing-6);
}
.fw-vt-card {
  padding: var(--spacing-5) 0;
  border-top: 1px solid var(--report-border);
}
.fw-vt-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--spacing-4);
}
.fw-vt-item-name {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.fw-vt-pct-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid transparent;
  color: var(--report-ink);
  flex-shrink: 0;
}
.fw-vt-pct-pill.fav {
  background: color-mix(in srgb, var(--green) 10%, white);
  border-color: var(--green);
}
.fw-vt-pct-pill.adv {
  background: var(--band-developing-soft);
  border-color: var(--band-developing);
}
.fw-vt-card-body {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 var(--spacing-12);
}
.fw-vt-meta {
  display: grid;
  grid-template-columns: 100px 120px;
  gap: 0;
  align-content: start;
  margin: 0;
}
.fw-vt-meta dt {
  font-size: var(--t-body);
  color: var(--report-ink-60);
  font-weight: 300;
  line-height: 1.6;
  white-space: nowrap;
}
.fw-vt-meta dd {
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.6;
  margin: 0;
  white-space: nowrap;
}
.fw-vt-read {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--report-ink);
}

@container report-panel (max-width: 640px) {
  .fw-vt-card-body {
    grid-template-columns: 1fr;
    gap: var(--spacing-4) 0;
  }
}

/* BVP waterfall — solid fills to match the above/below-plan-line design. */
.rpt-card-stack[data-product="budget-vs-plan-variance"] .mi-waterfall-bar.positive {
  background: color-mix(in srgb, var(--green) 60%, transparent);
  border: none;
}
.rpt-card-stack[data-product="budget-vs-plan-variance"] .mi-waterfall-bar.negative {
  background: color-mix(in srgb, var(--pink) 60%, transparent);
  border: none;
}
.rpt-card-stack[data-product="budget-vs-plan-variance"] .mi-waterfall-bar.total,
.rpt-card-stack[data-product="budget-vs-plan-variance"] .mi-waterfall-bar.hl {
  background: color-mix(in srgb, var(--cyan) 60%, transparent);
  border: none;
}


/* Cash Runway — gap above prose block cards (Assumptions, Controllable share, etc.) */
.rpt-card-stack[data-product="cash-runway-stress-test"] .fw-prose-blocks-card {
  margin-top: 24px;
}

/* Cash Runway — gap between segmented-bar legend and the waterfall below */
.rpt-card-stack[data-product="cash-runway-stress-test"] .mi-seg-callouts {
  margin-bottom: 48px;
}

/* Cash Runway waterfall gradients — 5%→70% brand colour ramps.
   Positive steps grow upward → dense at base, fades to top.
   Negative steps grow downward → dense at top, fades to base. */
.rpt-card-stack[data-product="cash-runway-stress-test"] .mi-waterfall-bar.positive {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--green)  5%, transparent),
    color-mix(in srgb, var(--green) 70%, transparent));
  border: none;
}
.rpt-card-stack[data-product="cash-runway-stress-test"] .mi-waterfall-bar.negative {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--pink)  5%, transparent),
    color-mix(in srgb, var(--pink) 70%, transparent));
  border: none;
}
.rpt-card-stack[data-product="cash-runway-stress-test"] .mi-waterfall-bar.total,
.rpt-card-stack[data-product="cash-runway-stress-test"] .mi-waterfall-bar.hl {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--cyan)  5%, transparent),
    color-mix(in srgb, var(--cyan) 70%, transparent));
  border: none;
}

/* Business Plan — gap after segmented-bar legend, before prose */
.rpt-card-stack[data-product="business-plan"] .mi-seg-callouts {
  margin-bottom: 30px;
}

/* Business Plan — gap between stats and waterfall */
.rpt-card-stack[data-product="business-plan"] .mi-waterfall-wrap {
  margin-top: 50px;
}

/* Business Plan waterfall gradients — 5%→70% brand colour ramps. */
.rpt-card-stack[data-product="business-plan"] .mi-waterfall-bar.positive {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--green)  5%, transparent),
    color-mix(in srgb, var(--green) 70%, transparent));
  border: none;
}
.rpt-card-stack[data-product="business-plan"] .mi-waterfall-bar.negative {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--pink)  5%, transparent),
    color-mix(in srgb, var(--pink) 70%, transparent));
  border: none;
}
.rpt-card-stack[data-product="business-plan"] .mi-waterfall-bar.total,
.rpt-card-stack[data-product="business-plan"] .mi-waterfall-bar.hl {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--cyan)  5%, transparent),
    color-mix(in srgb, var(--cyan) 70%, transparent));
  border: none;
}

.val-good  { color: var(--report-green) !important; font-weight: var(--font-weight-bold) !important; }
.val-warn  { color: var(--report-amber) !important; font-weight: var(--font-weight-bold) !important; }
.val-risk  { color: var(--report-red) !important;   font-weight: var(--font-weight-bold) !important; }

/* Legacy Intel items */
.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: 300; 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: 300; }
.intel-text strong { font-weight: var(--t-heading-wt-bold); }


/* ═══════════════════════════════════════════════════════════════════════════
   REPORT CHROME — rpt-* classes
   UI elements for report navigation, about block, confidence bar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Confidence bar (replaces all inline confidence dot styles) */
.rpt-conf-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--report-border);
}

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

.rpt-conf-dot.conf-high       { background: var(--report-green); }
.rpt-conf-dot.conf-mediumhigh { background: var(--report-green); opacity: 0.6; }
.rpt-conf-dot.conf-medium     { background: var(--report-amber); }
.rpt-conf-dot.conf-low        { background: var(--report-red); }

/* About block — collapsible orientation panel */
.rpt-about-block { padding: 0; }

/* Offset smooth-scroll target so the block clears the 72px fixed navbar
   when the in-report Info icon scrolls it into view. */
#about-block { scroll-margin-top: 72px; }

.rpt-about-prose {
  padding: 0;
}
.rpt-about-prose p {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin: 0 0 var(--spacing-4) 0;
}
.rpt-about-prose p:last-child { margin-bottom: 0; }

.rpt-about-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-3) var(--spacing-4);
  width: 100%;
  text-align: left;
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  border-bottom: 1px solid var(--report-border);
}

.rpt-about-toggle-label {
  flex: 1;
  letter-spacing: 0.04em;
  font-size: var(--t-body);
}

.rpt-about-arrow {
  width: 14px;
  height: 14px;
  color: var(--report-ink);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.rpt-about-arrow.open { transform: rotate(180deg); }

.rpt-about-panel { display: none; padding: var(--spacing-4); }
.rpt-about-panel.open { display: block; }

.rpt-about-grid { display: flex; flex-direction: column; gap: 0; }

.rpt-about-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--spacing-3);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--report-border);
  font-size: var(--t-body);
  line-height: var(--leading-relaxed);
}

.rpt-about-row:last-child { border-bottom: none; }

.rpt-about-key {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  letter-spacing: 0.05em;
  padding-top: 2px;
}

.rpt-about-val { color: var(--report-ink); }

/* Source item (within sources section) */
.source-item {
  display: flex;
  gap: var(--spacing-2);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--report-ink);
  padding: 5px 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); }

/* Source number badge */
.source-num {
  display: inline-block;
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--report-ink);
  min-width: 24px;
  flex-shrink: 0;
}

.source-text {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: 1.6;
}

/* Gap note / method block */
.gap-note {
  background: var(--gray-background);
  border-radius: 5px;
  padding: 10px 14px;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--report-ink);
  margin-top: var(--spacing-3);
}

.gap-note strong { color: var(--report-ink); }

.method-block  { margin-bottom: var(--spacing-4); }

.method-label {
  white-space: nowrap;
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.5px;
  color: var(--report-ink);
  margin-bottom: 0;
  padding-bottom: var(--spacing-2);
  display: block;
  border-bottom: 1px solid var(--report-border);
}

/* Signal tags (inside critical risk watch-for rows) */
.rpt-signal-tag {
  display: block;
  font-size: var(--t-body);
  color: var(--cyan);
  padding: 2px 0;
  line-height: var(--leading-relaxed);
}

.rpt-signal-tag::before { content: "⚑ "; }

/* Evidence and exposure notes inside power-items */
.rpt-evidence-note {
  display: block;
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: var(--spacing-1);
  line-height: var(--leading-relaxed);
  font-style: italic;
}

.rpt-exposed-note {
  display: block;
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: 2px;
  line-height: var(--leading-relaxed);
}

/* Monitor note inside tech/driver items */
.rpt-monitor-note {
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: var(--spacing-1);
  line-height: var(--leading-relaxed);
}

/* Scenario grid (3-column layout for emerging risks) */
.rpt-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-4);
  margin-top: var(--spacing-3);
}

/* Edit disclosure list */
.edit-disclosure-list {
  margin-top: 16px;
  border-top: 1px solid var(--report-border);
}

.edit-disclosure-item {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--report-border);
  font-size: var(--t-body);
  line-height: 1.5;
}

.edit-disclosure-date   { flex-shrink: 0; width: 120px; color: var(--report-ink-50); font-variant-numeric: tabular-nums; }
.edit-disclosure-detail { color: var(--report-ink-70); }


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

@media print {
  .callout,
  .verdict-box,
  .wins-box,
  .scenario,
  .op-card,
  .power-item,
  .reg-item,
  .geo-item,
  .intel-item,
  .deal-item,
  /* .deal-item is now display:contents (no box to break-protect), so guard its
     cells instead — the three cells share a grid row, so avoiding a break inside
     each effectively keeps the deal row together in PDF. Christine, 1 June 2026. */
  .deal-item > *,
  .cl-battle-item,
  .ci-gap-card { break-inside: avoid; }
  .vcard              { break-inside: avoid; }
  .method-block       { break-inside: avoid; }
  .source-item        { break-inside: avoid; }
  /* Keep a generic data-table together with its trailing recommendation/note/
     prose_after prose (e.g. board-reporting asks' honest_view) as one unit so
     the print engine can't paginate the table and its closing prose onto
     separate, out-of-order pages. See fw-dt-block wrapper in
     framework-report.html. */
  .sim-v2.rpt-card-stack .mi-section .fw-dt-block { break-inside: avoid !important; }
  .fw-verdict         { break-inside: avoid; break-before: avoid; }
  .fw-verdict-head    { break-after: avoid; }
  /* Prevent a page break between the verdict section and the About block.
     The verdict panel (fw-verdict) and the about-block footer follow each
     other in DOM order; without anchoring, the print engine may split them
     to separate pages. break-after:avoid on the section wrapper + a matching
     break-before:avoid on the about-block anchor the pairing from both sides
     so the PDF engine has no legal break point between them. */
  .mi-section#verdict { break-after: avoid; }
  #about-block        { break-before: avoid; }
  /* Research reports: free-flow pagination. Reset all component break-inside rules
     so paragraphs, cards, and lists can split naturally across pages. Scoped to
     .sim-v2.rpt-card-stack so simulation/framework reports are unaffected. */
  .sim-v2.rpt-card-stack .mi-section,
  .sim-v2.rpt-card-stack .mi-section * {
    break-inside: auto !important;
    break-before: auto !important;
  }
  /* ── Section card paint reset ─────────────────────────────────────────────
     In Chromium's print engine, block elements that form a stacking context
     (border-radius + background + box-shadow) are not fragmented across pages.
     Removing the radius and shadow makes each section a plain flow container
     that paginates correctly.  The top border is kept (darkened to gray-dark
     below) as a visual divider between sections in the PDF.
     overflow is not set on the section card rule so no reset is needed there. */
  .sim-v2.rpt-card-stack > .mi-section:not(#p-cover),
  .sim-v2.rpt-card-stack > .mi-capital-group > .mi-section:not(#p-cover) {
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top-color: var(--gray-dark);
  }
  /* Intelligence brief: break only between cards, not through them. */
  .sim-v2.rpt-card-stack .sv-intel-item { break-inside: avoid !important; }
  /* Research reports — 2-col chart-insight split: allow the figure to start
     mid-page instead of jumping to a fresh page when it can't fit in full.
     Without this, .mi-figure { break-inside: avoid } forces the whole chart to
     page 2, leaving a large blank gap at the bottom of the previous page.
     Horizontal-bar rows are independent so a mid-chart page break is acceptable.
     Scoped to rpt-chart-insight so standalone full-width figures keep their
     page-atomic protection. */
  .rpt-chart-insight .mi-figure { break-inside: auto; }
  /* Prevent orphan section headings: the header block (eyebrow + title +
     standfirst) must never split internally, and must stay glued to the
     first line of the chart/content that follows it. Break is only allowed
     before the entire mi-section (so the section moves to the next page as
     a unit if there isn't room), not inside the header or between the header
     and the chart. */
  .mi-section-head {
    break-inside: avoid;
    break-after: avoid;
  }

  /* Re-protect actual charts — these render as SVG or pixel-precise div grids
     that become unreadable if split mid-render. Cards, lists, and paragraphs
     above/below are freed by the reset. Declared after the reset so !important
     wins via source order. */
  .sim-v2.rpt-card-stack .mi-hbar-chart,
  .sim-v2.rpt-card-stack .mi-waterfall-wrap,
  .sim-v2.rpt-card-stack .mi-dot-chart,
  .sim-v2.rpt-card-stack .mi-stacked,
  .sim-v2.rpt-card-stack .mi-twobar-chart,
  .sim-v2.rpt-card-stack .mi-timeline-wrap,
  .sim-v2.rpt-card-stack .cl-matrix-wrap,
  .sim-v2.rpt-card-stack .mi-heatmap,
  .sim-v2.rpt-card-stack .ci-journey,
  .sim-v2.rpt-card-stack .scorecard,
  .sim-v2.rpt-card-stack svg,
  /* Milestone items (critical_path / first_90_days / next_steps across
     Execution Plan, GTM Strategy, Relocation Plan, Problem Analysis) were
     missed by this re-protection pass — the free-flow reset above stripped
     their break-inside, letting an item split mid-block across a page
     boundary. Re-protect them the same way as the other charts/cards
     (Christine, 6 Jul 2026). */
  .sim-v2.rpt-card-stack .fw-milestone-item { break-inside: avoid !important; }

  .verdict-box,
  .wins-box,
  .callout.analyst,
  /* Force the per-case scenario colours (label text, the rule under it, and the
     percentage) to print exactly rather than being stripped by the print engine. */
  .scenario {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .rpt-about-panel { display: block !important; }
  .rpt-about-toggle { display: none; }
  #about-block { display: block !important; }

  .rpt-scenario-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .rpt-scenario-grid { grid-template-columns: 1fr; }
  .ci-driver-row     { grid-template-columns: 120px 1fr 40px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAMING CONVENTION — DO NOT VIOLATE
   ─────────────────────────────────────────────────────────────────────────
   All classes in this file must use a component-based prefix, never a
   report slug prefix.

   CORRECT:   .op-card        (describes: operator/competitor card)
   CORRECT:   .reg-item       (describes: regulation card item)
   CORRECT:   .cl-battle-*    (describes: battleground/competitive fight cards)
   WRONG:     .comp-land-*    (report slug as prefix — banned)
   WRONG:     .cust-intel-*   (report slug as prefix — banned)

   Before adding a new class: check charts.css for the same component.
   Never duplicate a class across both files.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   FRAMEWORK REPORT COMPONENTS
   Used by: Strategic Priorities, Problem Analysis, Opportunity Assessment,
            Execution Plan. Not used in Research reports.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── FW1 — PRIORITY CARD ────────────────────────────────────────────────────
   Used by: Strategic Priorities — The 3 Priorities section
   Ranked action card: large rank number + title + structured fields.
   Never use for competitor profiles (use op-card) or numbered lists (fault-item).
   ─────────────────────────────────────────────────────────────────────────── */

.fw-priority-list {
  display: flex;
  flex-direction: column;
  /* Unified inter-card gap — matches .fw-okr-stack and
     .fw-cadence-list so every stacked component on a framework
     report breathes by the same amount. */
  gap: 28px;
}

.fw-priority-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0;
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.fw-priority-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid var(--report-border);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}

.fw-priority-card:nth-child(1) .fw-priority-rank {
  border-left-color: var(--kicker05);
  background: color-mix(in srgb, var(--kicker05) 5%, var(--report-white));
  color: var(--kicker05);
}

.fw-priority-card:nth-child(2) .fw-priority-rank {
  border-left-color: var(--kicker06);
  background: color-mix(in srgb, var(--kicker06) 5%, var(--report-white));
  color: var(--kicker06);
}

.fw-priority-card:nth-child(3) .fw-priority-rank {
  border-left-color: var(--kicker07);
  background: color-mix(in srgb, var(--kicker07) 5%, var(--report-white));
  color: var(--kicker07);
}

.fw-priority-body {
  padding: 14px 18px;
}

.fw-priority-focus {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-ink);
  line-height: 1.3;
  margin-bottom: var(--spacing-3);
}

.fw-priority-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.fw-priority-row:last-child {
  margin-bottom: 0;
}

.fw-priority-key {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  margin-bottom: 3px;
}

.fw-priority-val {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--report-ink);
}

.fw-priority-action {
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--report-border);
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
}

.fw-priority-action::before {
  content: "First action: ";
  font-weight: var(--font-weight-bold);
  color: var(--cyan);
}

@media print {
  .fw-priority-card { break-inside: avoid; }
  .fw-priority-rank { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}


/* ── FW2 — ROOT CAUSE CHAIN ─────────────────────────────────────────────────
   Used by: Problem Analysis — Why It's Happening section
   Vertical chain showing problem → why → why → root cause.
   Simpler than ci-journey (no left/right layout, no duration, no actor).
   ─────────────────────────────────────────────────────────────────────────── */

.fw-cause-chain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-left: var(--spacing-4);
}

.fw-cause-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--spacing-3);
  position: relative;
  padding-bottom: var(--spacing-4);
}

.fw-cause-item:last-child {
  padding-bottom: 0;
}

.fw-cause-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.fw-cause-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--report-ink-35);
  flex-shrink: 0;
  margin-top: 4px;
}

.fw-cause-item:nth-child(4n+1) .fw-cause-dot { background: var(--yellow); }
.fw-cause-item:nth-child(4n+2) .fw-cause-dot { background: var(--cyan); }
.fw-cause-item:nth-child(4n+3) .fw-cause-dot { background: var(--purple); }
.fw-cause-item:nth-child(4n+4) .fw-cause-dot { background: var(--pink); }

.fw-cause-line {
  flex: 1;
  width: 1px;
  background: var(--report-border);
  margin-top: 4px;
  min-height: 24px;
}

.fw-cause-item:last-child .fw-cause-line {
  display: none;
}

.fw-cause-content {
  padding-top: 2px;
  padding-bottom: var(--spacing-2);
}

.fw-cause-label {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-ink);
  margin-bottom: 3px;
}

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

.fw-cause-evidence {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 1.6;
  margin-top: var(--spacing-1);
  font-style: italic;
}


/* ── FW3 — VERDICT PANEL ────────────────────────────────────────────────────
   Used by: Opportunity Assessment — The Verdict section
   Three-state verdict: Pursue (green) / Pursue with conditions (amber) /
   Do not pursue (red). Replaces verdict-box which is amber-only.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-verdict {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: none;
}

.fw-verdict-scorecard {
  margin-bottom: var(--spacing-6);
}

.fw-verdict-head {
  padding: 0 0 var(--space-3) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

/* Verdict panel — transparent background. The status tint wash was
   retired Christine 2026-05-27; the verdict reads as plain prose
   under the section heading, no chrome. */
.fw-verdict,
.fw-verdict .fw-verdict-head,
.fw-verdict .fw-verdict-body { background: transparent; }

.fw-verdict-icon {
  display: none;
}

.fw-verdict-label {
  font-size: var(--t-body);
  /* Bold black label (Christine, 1 June 2026). 500 is the house "bold" for a
     BLACK heading — never heavier (see report-heading-weights). Was:
     var(--chart-name-wt) (300, light). */
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  margin-bottom: 4px;
}

.fw-verdict-decision {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--report-ink);
  line-height: 1.4;
}

/* Verdict rendered as a colour PILL keyed to the score/rating (Christine,
   1 June 2026). Background is a canonical band-*-pill tint (≈10% hue) so the
   black 300-weight text reads as a calm coloured wash, not a loud badge. Only
   applied when the template resolves a band (.v-*, from fd.rating or the
   pursue/conditions/no-pursue status slug); scoreless verdicts stay plain prose.
   Compound selectors (.fw-verdict-decision.fw-verdict-pill) outrank the base
   .fw-verdict-decision so the lighter weight wins. */
.fw-verdict-decision.fw-verdict-pill {
  display: inline-block;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-full);
  color: var(--report-ink);
  font-weight: var(--font-weight-light);
}
.fw-verdict-pill.v-excellent  { background: var(--band-excellent-soft); }
.fw-verdict-pill.v-strong     { background: var(--band-strong-soft); }
.fw-verdict-pill.v-solid      { background: var(--band-solid-soft); }
.fw-verdict-pill.v-developing { background: var(--band-developing-soft); }
.fw-verdict-pill.v-emerging   { background: var(--band-emerging-soft); }

/* sv-pill — global base chrome for use outside .sim-v2 (e.g. fw-verdict panel
   in framework reports). Mirrors the .sim-v2 .sv-pill chrome; the sim-v2 rules
   in _sim_v2_styles.html win inside .sim-v2 via higher specificity — additive,
   no sim surface is affected. */
.sv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 300; letter-spacing: 0.01em;
  border: 1px solid transparent;
  color: var(--navy);
}
.sv-pill-excellent { background: color-mix(in srgb, var(--band-excellent)   7%, var(--report-white)); border-color: var(--band-excellent);   }
.sv-pill-strong    { background: color-mix(in srgb, var(--band-strong)      7%, var(--report-white)); border-color: var(--band-strong);      }
.sv-pill-solid     { background: color-mix(in srgb, var(--band-solid)       7%, var(--report-white)); border-color: var(--band-solid);       }
.sv-pill-developing{ background: color-mix(in srgb, var(--band-developing)  7%, var(--report-white)); border-color: var(--band-developing);  }
.sv-pill-emerging  { background: color-mix(in srgb, var(--band-emerging)    7%, var(--report-white)); border-color: var(--band-emerging);    }

/* fw-eval-band — instrument evaluation axis pills (baked into CSD reports).
   Same chrome as sv-pill: navy text, 1px solid band border, 7% fill. */
.fw-eval-band {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 300; letter-spacing: 0.01em;
  border: 1px solid transparent;
  color: var(--navy);
}
.fw-eval-band--excellent { background: color-mix(in srgb, var(--band-excellent)  7%, var(--report-white)); border-color: var(--band-excellent);  }
.fw-eval-band--strong    { background: color-mix(in srgb, var(--band-strong)     7%, var(--report-white)); border-color: var(--band-strong);     }
.fw-eval-band--solid     { background: color-mix(in srgb, var(--band-solid)      7%, var(--report-white)); border-color: var(--band-solid);      }
.fw-eval-band--developing{ background: color-mix(in srgb, var(--band-developing) 7%, var(--report-white)); border-color: var(--band-developing); }
.fw-eval-band--emerging  { background: color-mix(in srgb, var(--band-emerging)   7%, var(--report-white)); border-color: var(--band-emerging);   }

.fw-verdict-head {
  border-bottom: none;
}

.fw-verdict-body {
  padding: 10px 24px 10px 0;
}

.fw-verdict-rationale {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin-bottom: var(--spacing-4);
}

.fw-verdict-conditions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.fw-verdict-condition {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--spacing-2);
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: 1.6;
  color: var(--report-ink);
  break-inside: avoid;
}

/* Cyan arrow icon (Assets/Icons/arrow.svg) in place of the black "→" glyph,
   matching the cyan arrow already used by .geo-name. Christine, 1 June 2026.
   align-self:start + a single-line-tall box keep the icon aligned to the FIRST
   text line on multi-line conditions (the grid cell can be taller than one line).
   Was: content: "→"; color: var(--report-ink); font-weight: …semibold; (a
   black text arrow). */
.fw-verdict-condition::before {
  content: "";
  align-self: start;
  width: 14px;
  height: 1.6em;
  background: url("/static/images/icons/arrow.svg") no-repeat left center / contain;
}

/* ── Simulation report — outcome icons on the signal / strength lists ──────
   Christine, 1 June 2026. The "What worked" (#sim-sec-positive_signals) and
   "Strengths surfaced under pressure" (#sim-strengths) lists get a green
   check; "Risk signals" (#sim-sec-negative_signals) gets a yellow alert.
   Icons are the brand SVGs (Assets/Icons/check.svg + exclamation.svg, baked
   at --green / --yellow) used as a background image on the existing .sv-dot
   marker, which is display:none by default and re-enabled here. This targets
   markup already baked into every sim report, so it's a live linked-sheet
   change — no template re-bake needed. The strengths card also drops its
   "What worked" eyebrow (the title carries the section). ── */
.sim-v2 #sim-strengths .sv-dot-item,
.sim-v2 #sim-sec-positive_signals .sv-dot-item,
.sim-v2 #sim-sec-negative_signals .sv-dot-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sim-v2 #sim-strengths .sv-dot-item > div:not(.sv-dot),
.sim-v2 #sim-sec-positive_signals .sv-dot-item > div:not(.sv-dot),
.sim-v2 #sim-sec-negative_signals .sv-dot-item > div:not(.sv-dot) {
  flex: 1 1 auto;
  min-width: 0;
}
.sim-v2 #sim-strengths .sv-dot-item > .sv-dot,
.sim-v2 #sim-sec-positive_signals .sv-dot-item > .sv-dot,
.sim-v2 #sim-sec-negative_signals .sv-dot-item > .sv-dot {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 1.5em;
  margin: 0;
  border-radius: 0;
  background: url("/static/images/icons/check.svg") no-repeat left center / 18px 18px;
}
.sim-v2 #sim-sec-negative_signals .sv-dot-item > .sv-dot {
  background-image: url("/static/images/icons/exclamation.svg");
}
.sim-v2 #sim-strengths .sv-section-kicker { display: none; }

/* ── Simulation report — Blind spots (#sim-blind) ──────────────────────────
   Christine, 2 June 2026. Drop the "Out of view" eyebrow (the title carries
   the section) and give each item a question-mark bullet (brand SVG on the
   re-enabled .sv-dot marker), mirroring the signal-list icons. Live linked-
   sheet change — targets markup already baked into every sim report. ── */
.sim-v2 #sim-blind .sv-section-kicker { display: none; }
.sim-v2 #sim-blind .sv-dot-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sim-v2 #sim-blind .sv-dot-item > div:not(.sv-dot) {
  flex: 1 1 auto;
  min-width: 0;
}
.sim-v2 #sim-blind .sv-dot-item > .sv-dot {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 1.5em;
  margin: 0;
  border-radius: 0;
  background: url("/static/images/icons/question.svg") no-repeat left center / 18px 18px;
}

/* ── Simulation report — Development areas (#sim-dev) ──────────────────────
   Christine, 2 June 2026. Each item gets a cyan arrow bullet (reusing the
   existing hidden .sv-dot marker), and the flex row indents every detail line
   (body + "Why it matters") under the title. The "Where to grow" eyebrow is
   dropped (the title carries the section), and the "Why it matters" callout
   loses its grey --callout-bg so it reads as a plain indented note. Live
   linked-sheet change against already-baked markup — no re-bake. ── */
.sim-v2 #sim-dev .sv-dot-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sim-v2 #sim-dev .sv-dot-item > div:not(.sv-dot) {
  flex: 1 1 auto;
  min-width: 0;
}
.sim-v2 #sim-dev .sv-dot-item > .sv-dot {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 1.5em;
  margin: 0;
  border-radius: 0;
  background: url("/static/images/icons/arrow2.svg") no-repeat left center / 18px 18px;
}
.sim-v2 #sim-dev .sv-section-kicker { display: none; }
.sim-v2 #sim-dev .sv-dot-item .sv-why {
  background: none;
  padding: 0;
  border-radius: 0;
  margin-top: var(--spacing-4);
}
/* Christine, 2 June 2026: "Why it matters" label in brand cyan, bold (700). */
.sim-v2 #sim-dev .sv-dot-item .sv-why-label {
  color: var(--cyan);
  font-weight: 700;
}

/* ── Simulation report — Recommended focus (#sim-focus) ────────────────────
   Christine, 2 June 2026. Drop the black highlight border so the focus card
   matches every other section card (gray-light + shadow), and promote the
   "Recommended focus" eyebrow into a real section heading mirroring
   .sv-section-title (size/weight/colour + soft divider, not an uppercase
   eyebrow). Live linked-sheet change against already-baked markup. ── */
.sim-v2 #sim-focus {
  border: 1px solid var(--gray-light);
}
.sim-v2 #sim-focus .sv-focus-kicker {
  font-size: 19px;
  font-weight: 500;
  color: var(--sv-ink);
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sv-rule-soft);
}
/* Christine, 2 June 2026. Treat the focus title (.sv-focus-title, e.g.
   "Channel partner programme") as a regular arrow-bulleted item rather than a
   heading: body-size text + arrow2.svg bullet, with every subordinate
   (rationale + action block) indented under the title text. Strip the grey
   callout background off the success note, and recolour the "First step this
   week" / "Success signal" labels to brand cyan at 700. Live linked-sheet
   change against already-baked markup — no re-bake. ── */
.sim-v2 #sim-focus .sv-focus-title {
  font-size: 15px;
  position: relative;
  padding-left: 28px;
}
.sim-v2 #sim-focus .sv-focus-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 1.5em;
  background: url("/static/images/icons/arrow2.svg") no-repeat left center / 18px 18px;
}
.sim-v2 #sim-focus .sv-focus-rationale,
.sim-v2 #sim-focus .sv-focus-action {
  margin-left: 28px;
}
.sim-v2 #sim-focus .sv-focus-success {
  background: none;
  padding: 0;
  border-radius: 0;
}
.sim-v2 #sim-focus .sv-focus-action-label,
.sim-v2 #sim-focus .sv-focus-success-label {
  color: var(--cyan);
  font-weight: 700;
}

/* ── Simulation report — Dimensions (#sim-profile) ─────────────────────────
   Christine, 2 June 2026. Five floating white cards directly on the gray page
   background — the capital-cards pattern (.mi-capital-grid / .mi-capital-card):
   • Card 1 (.sv-dim-overview): full-width — eyebrow + heading + overview bars.
   • Cards 2–5 (.sv-dim-detail): each dimension, in a 2-up grid below.
   The section sheds its own white card chrome (transparent, no border/shadow,
   no pad) so each child floats as its own card; every card keeps the
   .mi-capital-card recipe: white fill, no border, --radius-lg, --shadow-section,
   container padding. NOTE: the .sv-dim-overview wrapper is a TEMPLATE element
   (simulation-report.html) — this layout needs the report_html re-baked. ── */
.sim-v2 #sim-profile {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-6);
  row-gap: var(--spacing-6);
  /* Stretch so the two dimension cards in each row share one height —
     the shorter card grows to match its taller neighbour rather than
     ending at its own content. Christine, 2 June 2026. */
  align-items: stretch;
}
/* Card 1 — overview (eyebrow + heading + bars) spans both columns. The kicker /
   title / bars keep their natural in-card flow (no grid gap between them). */
.sim-v2 #sim-profile > .sv-dim-overview {
  grid-column: 1 / -1;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-section);
  padding: var(--report-container-pad-y) var(--report-container-pad-x);
}
/* The bar list is now the LAST thing in Card 1, so trim its legacy 50px
   bottom margin (sized for when the detail rows followed it in the same
   card). Card padding-bottom is 28px (--space-7); +7px here lands the gap
   below the bars at ~35px. Christine, 2 June 2026. */
/* Paragraph spacing between consecutive exec standfirst / body paragraphs.
   The baked _sim_v2_styles.html sets margin-top:0 on + sv-overall-body;
   override here so all viewports (desktop + mobile) get the same 1em gap. */
.sim-v2 .sv-overall-body + .sv-overall-body {
  margin-top: 1em !important;
}

.sim-v2 #sim-profile > .sv-dim-overview .sv-dim-list {
  margin-bottom: 7px;
}
/* Behavioural-shape radar beside the dimension bars (assessments, single
   attempt, single-rater only). The radar sits in the SAME two-column grid as
   the overall-score gauge card above it (.sv-overall in
   templates/reports/partials/_sim_v2_styles.html): minmax(160px, 220px) for the
   radar column, minmax(0, 1fr) for the bars, gap 28px — so the radar lines up
   EXACTLY under the gauge and the bars line up under the summary prose. The
   radar uses numbered axis labels (assessment-radar numbered:true) to stay
   legible at this narrow width. Keep these column values in lockstep with
   .sv-overall. The plain (non-radar) .sv-shape-row keeps its natural block flow,
   so simulations are unchanged. On narrow screens they stack, matching the gauge
   card's 600px breakpoint. Christine, 2 June 2026. */
.sim-v2 #sim-profile > .sv-dim-overview .sv-shape-row--radar {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.sim-v2 #sim-profile > .sv-dim-overview .sv-shape-row--radar .sv-shape-radar {
  min-width: 0;
}
.sim-v2 #sim-profile > .sv-dim-overview .sv-shape-row--radar .sv-shape-radar .ar-container {
  margin: 0;
  max-width: 100%;
}
.sim-v2 #sim-profile > .sv-dim-overview .sv-shape-row--radar .sv-centerfold {
  min-width: 0;
}
@media (max-width: 600px) {
  .sim-v2 #sim-profile > .sv-dim-overview .sv-shape-row--radar {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}
/* "From the simulation" evidence label sits heavier (600) inside the
   dimension cards than the shared 500 base. Christine, 2 June 2026. */
.sim-v2 #sim-profile > .sv-dim-detail .sv-evidence-label {
  font-weight: 600;
}
.sim-v2 .sv-dim-detail .sv-evidence {
  margin-top: 20px;
}
/* Cards 2–5 — each dimension floats as its own white card, 2-up. */
.sim-v2 #sim-profile > .sv-dim-detail {
  margin: 0;
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-section);
  padding: var(--report-container-pad-y) var(--report-container-pad-x);
}
@media (max-width: 800px) {
  .sim-v2 #sim-profile { grid-template-columns: 1fr; }
}

@media print {
  .fw-verdict-head {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ── Intelligence brief — "Key things to remember" ──────────────────────────
   Shared treatment for the simulation (#sim-intel) and the assessment /
   facilitator (#f-brief) instances — identical sv-card / sv-intel-list markup.
   Christine noted (2 June 2026) it's the same section used in simulations and
   should be shared, so both ids are styled together here:
   • Drop the "Intelligence brief" eyebrow — the "Key things to remember"
     title already names the section.
   • Lead each finding with the arrow2 badge icon as a marker. Items use the
     plain stacked .sv-intel-list (numbers stay hidden), so each row is a flex
     line with the icon left of the text and the body indented under the
     headline. */
.sim-v2 #sim-intel .sv-section-kicker,
#f-brief .sv-section-kicker {
  display: none;
}
/* Self-contained number hide so #f-brief reads the same outside .sim-v2 too. */
#f-brief .sv-intel-num {
  display: none;
}
.sim-v2 #sim-intel .sv-intel-item,
#f-brief .sv-intel-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sim-v2 #sim-intel .sv-intel-item::before,
#f-brief .sv-intel-item::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: url("/static/images/icons/arrow2.svg") no-repeat center / contain;
}


/* ── FW4 — MILESTONE ROW ────────────────────────────────────────────────────
   Used by: Execution Plan — The Critical Path section
   Structured milestone list: owner + due date + status + dependencies.
   More information-dense than the deal-list, different from the timeline.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-milestone-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fw-milestone-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-4);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--report-border);
  align-items: start;
}

.fw-milestone-item:last-child {
  border-bottom: none;
}

.fw-milestone-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: var(--t-heading);
  font-weight: var(--font-weight-bold);
  color: var(--report-ink);
  line-height: 1;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--gray-mid) 5%, transparent);
  border: 1px solid var(--gray-mid);
  margin-top: 0;
}

.fw-milestone-item .fw-item-key,
.fw-item-card .fw-item-key {
  min-width: 120px;
  max-width: 120px;
  flex-shrink: 0;
}

.fw-milestone-item:nth-child(1)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker05) 5%, transparent); border-color: var(--kicker05); color: var(--kicker05); }
.fw-milestone-item:nth-child(2)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker04) 5%, transparent); border-color: var(--kicker04); color: var(--kicker04); }
.fw-milestone-item:nth-child(3)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker03) 5%, transparent); border-color: var(--kicker03); color: var(--kicker03); }
.fw-milestone-item:nth-child(4)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker06) 5%, transparent); border-color: var(--kicker06); color: var(--kicker06); }
.fw-milestone-item:nth-child(5)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker07) 5%, transparent); border-color: var(--kicker07); color: var(--kicker07); }
.fw-milestone-item:nth-child(6)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker08) 5%, transparent); border-color: var(--kicker08); color: var(--kicker08); }
.fw-milestone-item:nth-child(7)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker09) 5%, transparent); border-color: var(--kicker09); color: var(--kicker09); }
.fw-milestone-item:nth-child(8)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker10) 5%, transparent); border-color: var(--kicker10); color: var(--kicker10); }
.fw-milestone-item:nth-child(9)  .fw-milestone-num { background: color-mix(in srgb, var(--kicker11) 5%, transparent); border-color: var(--kicker11); color: var(--kicker11); }
.fw-milestone-item:nth-child(10) .fw-milestone-num { background: color-mix(in srgb, var(--kicker12) 5%, transparent); border-color: var(--kicker12); color: var(--kicker12); }
.fw-milestone-item:nth-child(11) .fw-milestone-num { background: color-mix(in srgb, var(--kicker13) 5%, transparent); border-color: var(--kicker13); color: var(--kicker13); }
.fw-milestone-item:nth-child(12) .fw-milestone-num { background: color-mix(in srgb, var(--kicker14) 5%, transparent); border-color: var(--kicker14); color: var(--kicker14); }
.fw-milestone-item:nth-child(13) .fw-milestone-num { background: color-mix(in srgb, var(--kicker15) 5%, transparent); border-color: var(--kicker15); color: var(--kicker15); }
.fw-milestone-item:nth-child(14) .fw-milestone-num { background: color-mix(in srgb, var(--kicker16) 5%, transparent); border-color: var(--kicker16); color: var(--kicker16); }

.fw-milestone-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Milestone title — bolded per Christine, 6 Jul 2026. Was: font-weight-light. */
.fw-milestone-title {
  font-size: var(--t-body);
  font-weight: var(--font-weight-bold);
  color: var(--card-title-color);
  line-height: var(--t-body-lh);
}

.fw-milestone-meta {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  margin-top: 20px;
}

/* "Owner:"/"Due:" labels stay light (300) — the VALUE (owner name / due
   date) is bold so the answers are what stand out, not the labels
   (Christine, 6 Jul 2026). Was: label wrapped in <strong> so the label
   itself was bold and the value was plain — the reverse of what should
   draw the eye. Value weight bumped from medium(500) to true bold(700)
   so it reads as bold, not just slightly heavier than the label. */
.fw-milestone-owner,
.fw-milestone-due {
  font-size: var(--t-body);
  color: var(--report-ink);
  font-weight: var(--font-weight-light);
}

.fw-milestone-owner-value,
.fw-milestone-due-value {
  font-weight: var(--font-weight-bold);
  color: var(--report-ink);
}

.fw-milestone-status {
  display: inline-block;
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border: 1px solid var(--report-border);
  border-radius: var(--radius-full);
  background: var(--gray-background);
  color: var(--report-ink);
}

.fw-milestone-status.complete    { background: var(--report-green); color: var(--report-white); }
.fw-milestone-status.in-progress { background: var(--report-amber); color: var(--report-white); }
.fw-milestone-status.not-started { background: var(--gray-background); color: var(--report-ink); }

.fw-milestone-dependencies {
  font-size: var(--t-body);
  color: var(--report-ink);
  font-weight: var(--font-weight-light);
  font-style: italic;
  margin-top: 2px;
}

@media print {
  .fw-milestone-item { break-inside: avoid; }
  .fw-milestone-status.complete,
  .fw-milestone-status.in-progress {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ── FW5 — GENERIC FRAMEWORK ITEM CARD ─────────────────────────────────────
   Used by: all framework reports for structured list items
   (strengths, drags, blockers, options, risks, next steps, metrics, actions).
   ─────────────────────────────────────────────────────────────────────────── */

.fw-item-list {
  display: flex;
  flex-direction: column;
  /* Unified inter-card gap — matches .fw-okr-stack and
     .fw-cadence-list so every stacked component on a framework
     report breathes by the same amount. */
  gap: 28px;
}

.fw-item-card {
  /* Soft gray outer border + white fill — matches the cadence and
     prose-blocks card chrome so every stacked card on a report
     wears the same outline. */
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 16px 20px;
}

/* Standalone scalar-fields card in the generic dict renderer (e.g. UER
   cac_breakdown's "Blended cac" / "Honest view" summary) — breathing
   room above/below so it doesn't crowd the figure above or the item
   list below. Scoped to this instance only; does not affect per-entry
   cards inside .fw-item-list (spacing there is handled by its own gap). */
.fw-item-card--scalars {
  margin: 24px 0;
}

/* Hairline dividers between rows inside any generic list-of-dicts card
   (support_needed "What you need", dependencies "What must be true",
   targets "Targets and owners", etc.). Keeps each item as its own
   bordered card while giving the stacked key/value rows breathing
   room — same pattern as the OKR KR-row and prose-block dividers. */
.fw-item-card .fw-item-row + .fw-item-row {
  border-top: 1px solid var(--gray-light);
  padding-top: 12px;
  margin-top: 12px;
}

.fw-kv-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 24px;
}

.fw-kv-row > .fw-item-key,
.fw-kv-row > .fw-item-val {
  /* Ensure both columns wrap cleanly inside narrow cards. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fw-kv-row:last-child {
  margin-bottom: 0;
}

.fw-kv-row > .fw-item-key {
  min-width: 140px;
  max-width: 140px;
  flex-shrink: 0;
  font-weight: var(--t-heading-wt);
  margin-bottom: 0;
}

.fw-kv-row > .fw-item-val {
  flex: 1;
  min-width: 0;
}

@media (max-width: 600px) {
  .fw-kv-row {
    flex-direction: column !important;
    gap: 4px;
  }
  .fw-kv-row > .fw-item-key {
    min-width: 0;
    max-width: none;
  }
}

.fw-item-title {
  /* Inherits the canonical card-heading recipe (size/weight/line/color)
     from the grouped .fw-card-heading rule below; only the spacing
     differs per-context. Weight + case are bumped up from the shared
     recipe (500/normal-case) to 700/uppercase so the extracted
     name/channel/metric title reads as a distinct card heading above
     its key/value rows — scoped to this class only, not the shared
     .fw-okr-card-title / .fw-prose-block-label-inline group. */
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── EXCEPTIONS — severity-accented cards (board-reporting) ─────────────── */
.fw-exc-card {
  border-left: 1px solid var(--report-border);
}
.fw-exc-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}
.fw-exc-area {
  font-weight: 600;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  flex: 1;
}
.fw-exc-issue {
  margin: var(--spacing-2) 0 0;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}
.fw-exc-action {
  margin: var(--spacing-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--t-body-lh);
  color: var(--report-ink-60);
}
.fw-exc-action-label {
  font-weight: 600;
  color: var(--report-ink-35);
}

/* ── DECISIONS — option blocks (board-reporting) ─────────────────────────── */
.fw-dec-question {
  font-weight: 600;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  margin: 0;
}
.fw-dec-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}
.fw-dec-option {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}
.fw-dec-option--labeled {
  padding-left: 5em;
  text-indent: -4.5em;
}
.fw-dec-option-label {
  font-weight: 600;
}
.fw-board-callout.fw-dec-recommendation {
  border-left: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
}
.fw-board-callout.fw-dec-priority {
  border: 1px solid var(--cyan);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
  font-weight: 500;
}
.fw-dec-recommendation {
  margin-top: var(--spacing-3);
}

/* ── BOARD CALLOUT — standalone highlighted prose block ─────────────────── */
.fw-board-callout {
  padding: var(--spacing-3) var(--spacing-4);
  border-left: 3px solid var(--report-border);
  background: var(--report-bg, var(--report-white));
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Assessment-evidence-list (Consensus Findings): green check before heading +
   indent sub-rows. Christine asked for a check icon, 2 June 2026.
   Icon sized to match the simulation signal-list icons (18px, gap 10px). */
.ael-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ael-heading::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 1.5em;
  background: url("/static/images/icons/check.svg") no-repeat left center / 18px 18px;
}
.ael-card .fw-section-prose {
  padding-left: calc(18px + 10px);
}

/* Make vs Buy — verdict pill colours, using the same band tokens as the
   scoped .sim-v2 .sv-pill-* rules so they are visually consistent.
   Buy → cyan (strong), Make → yellow (solid), Partner → pink (developing),
   Wait → purple (emerging). Class names stay stable so baked report_html
   never needs re-baking when only CSS changes. */
.sim-v2 .sv-pill-mvb-buy     { background: color-mix(in srgb, var(--band-strong)     7%, var(--report-white)); border-color: var(--band-strong);     }
.sim-v2 .sv-pill-mvb-make    { background: color-mix(in srgb, var(--band-solid)      7%, var(--report-white)); border-color: var(--band-solid);      }
.sim-v2 .sv-pill-mvb-partner { background: color-mix(in srgb, var(--band-developing) 7%, var(--report-white)); border-color: var(--band-developing); }
.sim-v2 .sv-pill-mvb-wait    { background: color-mix(in srgb, var(--band-emerging)   7%, var(--report-white)); border-color: var(--band-emerging);   }

/* Make vs Buy — strategic role intel-grid: cyan bold labels */
.rpt-card-stack[data-product="make-vs-buy"] .mi-intel-label {
  color: var(--cyan);
  font-weight: var(--font-weight-bold);
}

/* Make vs Buy — decision-context label eyebrow (above ael-heading) */
.fw-mvb-dc-label {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--report-ink-60);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-1);
}
.fw-mvb-dc-card--hl {
  border-left: 2px solid var(--green);
}

/* Divergence Findings: exclamation icon before each item's topic, mirroring the
   consensus check pattern + matching simulation icon sizing (18px, gap 10px).
   Christine asked for an exclamation icon + indented rows, 2 June 2026. */
.dvg-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dvg-heading::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 1.5em;
  background: url("/static/images/icons/exclamation.svg") no-repeat left center / 18px 18px;
}
/* Indent every divergence row under the heading text (icon width + gap). */
#f-divergence .fw-section-prose {
  padding-left: calc(18px + 10px);
}

.fw-item-inline-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--t-body);
  line-height: 1.4;
}

.fw-item-inline-meta .fw-item-key {
  font-weight: var(--t-heading-wt);
}

.fw-item-inline-meta .fw-item-val {
  font-weight: var(--font-weight-light);
}

.fw-item-meta-sep {
  margin: 0 4px;
}

.fw-item-rows {
  display: flex;
  flex-direction: column;
  /* Breathing room between labelled blocks inside a card — now that
     .fw-item-key reads as a heading, each From/Priority/etc. block
     needs the same air a prose-block-row gets. */
  gap: 20px;
}

/* Hairline divider between adjacent labelled rows inside an item card
   (Impact / Likelihood / Mitigation on a Risk card, etc.) so the rows
   read as discrete blocks rather than one long stack. The flex gap
   already spaces them; padding-top + border-top centres the line in
   the gap. Christine 2026-05-27. */
.fw-item-rows > .fw-kv-row + .fw-kv-row {
  border-top: 1px solid var(--report-border);
  padding-top: 20px;
}

/* Plain variant — used by the generic list-of-dicts renderer in
   framework-report.html (channel/cost/metric breakdowns etc). These rows
   are single labelled fields, not discrete blocks like Risk/Milestone
   cards, so no hairline dividers and no big block gap — just compact
   rows at normal line height, matching a simple key/value list. */
.fw-item-rows--plain {
  gap: 8px;
}

.fw-item-rows--plain > .fw-kv-row + .fw-kv-row {
  border-top: none;
  padding-top: 0;
}

.fw-item-rows--plain > .fw-kv-row {
  margin-bottom: 0;
}

/* Label-less lede paragraph inside an .fw-item-card. Used by the
   generic list-of-dicts renderer in framework-report.html when the
   "would-be title" field carries a full sentence of prose (>70 chars)
   instead of a short label — we demote it from .fw-item-title to a
   plain body paragraph at the top of the card so it reads as prose,
   without inventing a "Blocker:" / "Area:" label that wasn't in the
   source content. Same recipe as `.body` / `.fw-section-prose`. */
.fw-item-card .fw-item-lede {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-wt);
  color: var(--report-ink);
  margin: 0 0 var(--spacing-3);
}

.fw-item-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
}

.fw-item-row.full {
  grid-template-columns: 1fr;
}

.fw-item-key {
  /* Inherits the canonical card-heading recipe from .fw-card-heading;
     only the spacing below the label is per-context. */
  margin-bottom: 6px;
}

.fw-item-val {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  font-weight: var(--font-weight-light);
}

/* First-action callout — soft gray-bubble block. Was a top-bordered
   row with a cyan arrow; demoted to a quiet callout per Christine
   2026-05-27. No arrow, no border, no band tint. */
.fw-item-action {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--gray-white);
  border-radius: var(--radius-sm);
  border: none;
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
}

/* Execution Plan — First Actions: cyan tint on the action callout only. */
.rpt-card-stack[data-product="execution-plan"] #first_week .fw-item-action {
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
  border: 1px solid var(--cyan);
}

.fw-item-action::before {
  content: none;
}

.fw-standfirst-prose {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin: 0;
}

/* 24px gap between consecutive exec-summary paragraphs, matching the
   --spacing-6 body-paragraph gap. Adjacent-sibling only, so the frame's
   own padding is untouched (no margin before the first / after the last).
   Christine, 4 Jun 2026. */
.fw-standfirst-prose + .fw-standfirst-prose {
  margin-top: var(--spacing-6);
}

.fw-section-prose {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  /* 24px (--spacing-6) gap to match the document-wide body-paragraph spacing.
     Was --spacing-4 (16px). Christine, 4 Jun 2026. */
  margin: 0 0 var(--spacing-6);
}

.fw-section-prose + .fw-section-prose {
  /* Bottom-margin on the previous prose already provides the gap. */
  margin-top: 0;
}

/* 30px breathing room between a chart and the explanation prose below it.
   Reset for subsequent explanation paragraphs — they rely on the previous
   paragraph's own bottom margin (--spacing-6) for spacing. */
.fw-figure-explanation { margin-top: 30px; }
.fw-figure-explanation + .fw-figure-explanation { margin-top: 0; }

/* Divider + breathing room before a chart heading when it follows prose. */
.fw-section-prose + .mi-figure-title,
.fw-figure-explanation + .mi-figure-title {
  margin-top: 36px;
  border-top: 1px solid var(--report-border);
  padding-top: 28px;
}

/* Any <strong> used as an inline label inside body prose (e.g. the
   "One camp" / "The other" labels in divergence blocks, the
   "Strengths observed:" / "Development areas:" prefixes in
   respondent summaries) reads as a paragraph heading — same
   tokenised 500 weight every other paragraph heading uses. */
.fw-section-prose strong,
.rubric-section__intro strong {
  font-weight: var(--paragraph-heading-weight);
}

.mi-section .fw-section-prose + .fw-kv-block,
.mi-section .fw-section-prose + .fw-vpc-diagram,
.mi-section .fw-section-prose + .fw-item-list,
.mi-section .fw-section-prose + .fw-cause-chain,
.mi-section .fw-section-prose + .fw-verdict,
.mi-section .fw-section-prose + .fw-decision-matrix,
.mi-section .fw-section-prose + .fw-milestone-list,
.mi-section .fw-section-prose + .fw-priority-list {
  margin-top: 24px;
}

/* ── Report intro banner ────────────────────────────────────────
   Shown once at the top of every framework report, between the
   cover and the first section. Explains how the live-building
   report works and names the frameworks behind the structure. */
.fw-report-intro-banner {
  box-sizing: border-box;
  width: calc(75% + 75px);
  /* Vertical padding matches the research standfirst-fill (24px top/bottom).
     Left padding brings the text back to the normal content left edge after
     the -50px left bleed, matching the 50px card-stack gutter. */
  padding: var(--space-6) 50px;
  /* Bottom margin matches the research cover band's bottom gap (--space-12-5
     = 50px) so the gap between the cyan block and the first body card is
     identical across report types. Left margin bleeds to the shell edge. */
  margin: 0 0 var(--space-12-5) -50px;
  background: var(--cyan);
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.fw-report-intro-banner p {
  font-size: var(--text-base, 16px);
  font-weight: var(--font-semibold, 600);
  line-height: var(--lh-body, 1.6);
  color: var(--white);
  margin: 0;
}
.fw-report-intro-banner strong {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--white);
}

.fw-kv-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
}

.fw-kv-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fw-kv-label {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-ink);
}

.fw-kv-value {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}

.fw-about-note {
  font-size: var(--t-body);
  color: var(--report-ink);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  font-style: italic;
}

/* ── FW-VPC — VALUE PROPOSITION CANVAS ──────────────────────────────────────
   Square (Value Map) + Circle (Customer Profile) side by side.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-vpc-wrap {
  padding: 0;
}

/* Value Map & Customer Profile each float as their own bordered card —
   matching the canvas summary treatment. These sections carry no
   display_title, so the .fw-vpc-subheading inside acts as the card title.
   Zero the inner .fw-vpc-sections bottom margin so the card padding stays
   symmetric. */
.fw-vpc-float {
  padding: var(--spacing-4);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  background: var(--report-bg-subtle, transparent);
}

.fw-vpc-float .fw-vpc-sections { margin-bottom: 0; }

/* ── Competitive Reality: per-competitor section cards ────────────────────
   Each competitor renders as its own .mi-section (peer to "The competition"
   summary section, not nested inside it). .fw-comp-name is the competitor
   heading — larger than fw-item-title but below the 24px mi-title ceiling.
   .fw-comp-tail absorbs the stray </div> the section loop emits after the
   content block (the mi-section was already closed early inside the block). */

.fw-comp-name {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--report-ink);
  margin-bottom: var(--spacing-4);
}

.fw-comp-tail { display: none; }

/* Per-competitor stacked label + prose (approach / strength / weakness) */
.fw-comp-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: var(--spacing-3) 0 var(--spacing-1);
}
.fw-comp-prose {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin: 0;
}

/* ── RISKS — 2×2 floating grid ────────────────────────────────────────── */
.fw-risks-tail { display: none; }

.fw-risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@container report-panel (max-width: 600px) {
  .fw-risk-grid { grid-template-columns: 1fr; }
}
.fw-risk-card {
  background: var(--white);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  padding: var(--report-container-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  break-inside: avoid;
}
/* risks_commentary paragraphs are emitted as direct children of the
   .fw-risk-grid two-column grid (alongside .fw-risk-card items) so the
   grid can auto-place them without extra wrapper markup. Left un-spanned,
   each paragraph becomes its own grid CELL next to a risk card instead of
   a full-width paragraph below the cards — plain text floating with no
   card background, misaligned into a column. Force full width so they
   read as ordinary prose beneath the grid. */
.fw-risk-commentary {
  grid-column: 1 / -1;
}
.fw-risk-desc {
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}
.fw-risk-sev-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}
.fw-risk-sev {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--report-border);
  border-radius: 100px;
  flex-shrink: 0;
}
.fw-risk-sev--high     { background: var(--negative-tint); color: var(--negative); }
.fw-risk-sev--medium,
.fw-risk-sev--moderate { background: var(--neutral-tint);  color: var(--neutral);  }
.fw-risk-sev--low      { background: var(--positive-tint); color: var(--positive); }
.fw-risk-sev-note {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--report-ink-35);
  font-style: italic;
}
.fw-risk-mit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--report-border);
  margin-top: auto;
}
.fw-risk-mit-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--report-ink-35);
}
.fw-risk-mit-body {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}

/* ── Prior-period follow-up cards ────────────────────────────────────────── */
.fw-ppf-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.fw-ppf-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--report-border);
}
.fw-ppf-list .fw-ppf-card:last-child { border-bottom: none; }
.fw-ppf-commitment {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--report-ink);
  line-height: var(--t-body-lh);
}
.fw-ppf-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}
.fw-ppf-owner {
  font-size: var(--text-sm);
  color: var(--report-ink-60);
}
.fw-ppf-note {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: var(--t-body-lh);
  padding-top: var(--spacing-1);
}

/* Inline-heading prose for Differentiation / Honest Assessment */
.fw-comp-prose {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin: 0 0 var(--space-6);
}
.fw-comp-prose:last-child { margin-bottom: 0; }
.fw-comp-label {
  font-weight: 500;
  margin: 0 0 var(--spacing-1);
}
.fw-comp-intro-row {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-wt);
  color: var(--report-ink);
  margin: 0 0 var(--space-4);
}
.fw-comp-intro-row:last-of-type { margin-bottom: 0; }
.fw-comp-intro-label {
  font-weight: 600;
  color: var(--report-ink);
}

/* ── fw-comp-profile-card — competitor/alternative profile card grid ─────
   General card family (not a positioning-exercise one-off): any framework
   section shaped as competitors[{name, approach, strength, weakness}].
   Mirrors the fw-team-card surface/border/radius/spacing so card families
   stay visually consistent, but keeps its own class names — deliberately
   NOT a variant of .fw-team-card — so this never has to thread through
   fw-team-cards' launch-team/stakeholder consumers. Strength and weakness
   are plain, equally weighted columns: no severity colour-coding. */
.fw-comp-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  margin-top: var(--spacing-4);
}
.fw-comp-card {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  break-inside: avoid;
}
.fw-comp-card-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--report-ink);
}
.fw-comp-card-approach {
  font-size: var(--text-sm);
  color: var(--report-ink-80);
  line-height: 1.6;
  margin: 0;
}
.fw-comp-card-contrast {
  display: flex;
  gap: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--report-border);
}
.fw-comp-card-col {
  flex: 1 1 0;
  min-width: 0;
}
.fw-comp-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--report-ink-35);
  margin: 0 0 var(--spacing-1);
}
.fw-comp-card-text {
  font-size: var(--text-sm);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin: 0;
}
@media print {
  .fw-comp-card-grid { grid-template-columns: repeat(2, 1fr); }
  .fw-comp-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}
@media (max-width: 767px) {
  .fw-comp-card-grid { grid-template-columns: 1fr; }
  .fw-comp-card-contrast { flex-direction: column; gap: var(--spacing-3); }
}

/* ── Framework sources — methodology note ──────────────────── */
.fw-source-methodology {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  color: var(--report-ink-60);
  margin: 0 0 var(--space-5);
}

/* ── Framework sources list ────────────────────────────────── */
.fw-sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fw-source-item {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: auto auto;
  column-gap: var(--space-6);
  row-gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 0.75px solid var(--report-border);
}
.fw-source-item:last-child { border-bottom: none; }
.fw-source-name {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--report-ink);
  text-decoration: none;
}
a.fw-source-name:hover { text-decoration: underline; }
.fw-source-used-for {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--t-label);
  font-style: italic;
  color: var(--report-ink-60);
  line-height: 1.45;
}
.fw-source-accessed {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-size: var(--t-label);
  color: var(--report-ink-35);
  white-space: nowrap;
}

/* --- Compact diagram (label-only shapes + connector lines) --- */
/* Two-column overview layout: diagram left, intro text right. Used by
   fw-vpc-diagram.html in the static problem_overview section. */
.fw-vpc-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6, 24px);
}
.fw-vpc-overview-text {
  width: 100%;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-wt);
  color: var(--report-ink-60);
}
/* Fit verdict block sits below the diagram at full width. */
.fw-vpc-overview-fit {
  width: 100%;
}
/* When inside the overview wrapper the diagram needs no bottom margin
   (spacing is handled by the parent flex gap). */
.fw-vpc-overview .fw-vpc-diagram {
  margin-bottom: 0;
}
/* Value map square — cyan strokes. CSS overrides SVG presentation attributes. */
.fw-vpc-sq-svg rect  { stroke: var(--cyan); fill: color-mix(in srgb, var(--cyan) 8%, transparent); }
.fw-vpc-sq-svg line  { stroke: var(--cyan); }
/* Customer profile circle — green strokes + 5% green fill. */
.fw-vpc-cr-svg circle { stroke: var(--green); fill: color-mix(in srgb, var(--green) 5%, transparent); }
.fw-vpc-cr-svg line   { stroke: var(--green); }

.fw-vpc-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.fw-vpc-dia-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fw-vpc-shape-title {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--report-ink);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 0 8px;
}
.fw-vpc-shape-title--vm { color: var(--report-ink); }
.fw-vpc-shape-title--cp { color: var(--report-ink); }

/* Value Map section — cyan arrow icon */
.fw-vpc-wrap--vm .fw-vpc-sec-head::before {
  background-image: url("/static/images/icons/arrow.svg");
}
/* Customer Profile section — flat green polygon arrow (arrowg.svg) */
.fw-vpc-wrap--cp .fw-vpc-sec-head::before {
  background-image: url("/static/images/icons/arrowg.svg");
}

/* Market Reality section — no icons on section heads */
.fw-vpc-wrap--mr .fw-vpc-sec-head::before { display: none; }

/* Resource Requirement section — single column, cyan arrow2 */
.fw-vpc-wrap--rs .fw-vpc-sections {
  grid-template-columns: 1fr;
}
.fw-vpc-wrap--rs .fw-vpc-sec-head::before {
  background-image: url("/static/images/icons/arrow2.svg");
}

/* Market Reality section — single column, yellow arrow + yellow underline */
.fw-vpc-wrap--mr .fw-vpc-sections {
  grid-template-columns: 1fr;
}
.fw-vpc-wrap--mr .fw-vpc-sec-col + .fw-vpc-sec-col {
  border-left: none;
  padding-left: 0;
}
.fw-vpc-wrap--mr .fw-vpc-sec-head::before {
  background-image: url("/static/images/icons/arrow-y.svg");
}
.fw-vpc-wrap--mr .fw-vpc-sec-head {
  border-bottom-color: var(--yellow);
}

/* Prose paragraph inside market-reality layout — indented to clear the icon */
.fw-mr-prose {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin: var(--spacing-3) 0 0;
}

/* Section head with icon suppressed (e.g. Year One in market reality).
   Must match the specificity of .fw-vpc-wrap--mr .fw-vpc-sec-head::before. */
.fw-vpc-wrap--mr .fw-vpc-sec-head--no-icon::before {
  display: none;
}

.fw-vpc-square-mini {
  width: 200px;
  height: 200px;
}

.fw-vpc-sq-svg {
  width: 100%;
  height: 100%;
}

.fw-vpc-circle-mini {
  width: 200px;
  height: 200px;
}

.fw-vpc-cr-svg {
  width: 100%;
  height: 100%;
}

.fw-vpc-svg-label {
  font-size: 11px;
  font-weight: 500;
  fill: var(--report-ink);
  font-family: inherit;
}

/* --- Content sections (borderless, below diagram) --- */
.fw-vpc-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.fw-vpc-sec-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fw-vpc-section {
  display: flex;
  flex-direction: column;
}

.fw-vpc-sec-divider {
  border: none;
  border-top: 1px solid var(--report-border);
  margin: var(--spacing-4) 0;
}

.fw-vpc-subheading {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--report-ink);
  margin: 0 0 var(--spacing-4) 0;
}

.fw-vpc-sec-head {
  font-size: var(--chart-name-size);
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid var(--accent);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.fw-vpc-sec-head::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("/static/images/icons/arrow2.svg") no-repeat center / contain;
}

.fw-vpc-item {
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--navy);
  /* indent so the bullet (–) sits at the same x as the heading text,
     which starts after the 18px icon + var(--spacing-2) gap.
     Vertical padding increased from 3px to 7px for more breathing room.
     Christine, 4 Jun 2026. */
  padding: 7px 0 7px calc(18px + var(--spacing-2));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
}

.fw-vpc-item::before {
  content: "– ";
  color: var(--report-ink-35);
  white-space: pre;
}

.fw-vpc-item.hl {
  font-weight: var(--font-weight-light);
}

.fw-vpc-hint {
  color: var(--report-ink-35);
}

/* ─── fw-vpc-canvas-layout — diagram-anchored VPC sections ─────────────────
   Shape partial (fw-vpc-sq / fw-vpc-cr) anchors left; existing fw-vpc-wrap
   + fw-vpc-sections grid fills the remaining space on the right. ── */
.fw-vpc-canvas-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-6);
}
.fw-vpc-canvas-shape {
  flex-shrink: 0;
}
.fw-vpc-canvas-zones {
  flex: 1;
  min-width: 0;
}

@media print {
  .fw-vpc-canvas-layout {
    gap: var(--spacing-4);
  }
}

.fw-vpc-fit-gap {
  margin-top: 16px;
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
}

.fw-vpc-fg-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: first baseline;
}

.fw-vpc-fg-label {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--report-ink);
  white-space: nowrap;
  min-width: 40px;
}

.fw-vpc-fg-body {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}

@media print {
  .fw-item-card { break-inside: avoid; }
  .fw-kv-block  { break-inside: avoid; }
  .fw-vpc-diagram { break-inside: avoid; }
  .fw-vpc-wrap    { break-inside: auto; }
  .fw-vpc-float   { break-inside: avoid; }
}

/* Mobile-only per-section VPC diagrams — hidden on desktop/iPad, shown via
   the @media (max-width: 767px) block at the end of this file. */
.fw-vpc-mob-diagram {
  display: none;
}

/* Mobile: ensure SVGs in the vpc-overview scale correctly on narrow viewports. */
@media (max-width: 640px) {
  .fw-vpc-overview .fw-vpc-diagram {
    width: 100%;
  }
  /* SVG columns have no explicit width/height attribute so browsers
     default them to 300px each — 600px+ total, causing overflow.
     Make them split the available width 50/50 and scale their SVGs. */
  .fw-vpc-overview .fw-vpc-dia-col {
    flex: 1;
    min-width: 0;
  }
  .fw-vpc-overview .fw-vpc-sq-svg,
  .fw-vpc-overview .fw-vpc-cr-svg {
    width: 100%;
    height: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REPORT UTILITY CLASSES
   Token-backed helpers replacing repeated inline styles across templates.
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-list-item {
  font-size: var(--t-body);
  color: var(--report-ink);
  padding: 1px 0;
}

.rpt-sub {
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: var(--spacing-2xs);
}

.rpt-meta {
  font-size: var(--t-body);
  color: var(--report-ink);
}

.rpt-signal {
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: var(--spacing-1);
}

.rpt-evidence {
  font-size: var(--t-body);
  margin-top: var(--spacing-2xs);
}

.rpt-note {
  font-size: var(--t-body);
  color: var(--report-ink);
}

.rpt-note em {
  font-style: inherit;
}

.method-label.mt-0 { margin: 0 0 var(--spacing-1); }

.method-label.mt   { margin: var(--spacing-2) 0 var(--spacing-2xs); }

.mt-3  { margin-top: var(--spacing-3); }
.mt-2  { margin-top: var(--spacing-2); }
.mb-3  { margin-bottom: var(--spacing-3); }
.mb-2  { margin-bottom: var(--spacing-2); }
.my-3  { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }

.op-card.mb-sm   { margin-bottom: var(--spacing-2); }
.op-card.mb-md   { margin-bottom: 10px; }

.op-val.text-small { font-size: var(--t-body); }

.vcard-text.text-small { font-size: var(--t-body); }

.tech-tag.ml-xs { margin-left: var(--spacing-1); }

.data-table td.text-small { font-size: var(--t-body); }

.body.wt-semibold { font-weight: var(--font-weight-semibold); }
.wt-bold { font-weight: 700; color: var(--report-ink); }
.nowrap { white-space: nowrap; }

.rpt-container { max-width: 980px; margin: 0 auto; }

.rpt-legacy-notice {
  padding: var(--spacing-8) var(--spacing-6);
  text-align: center;
}
.rpt-legacy-notice h2 { margin-bottom: var(--spacing-3); }
.rpt-legacy-notice p {
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: .7;
}

.text-sm { font-size: var(--font-size-sm); }

.chart-placeholder {
  padding: var(--spacing-6);
  text-align: center;
  color: var(--report-ink);
  border: 1px dashed var(--report-border);
  border-radius: var(--radius-lg);
}

.page-inner.no-pad { padding: 0; }

.gap-note.mt-2 { margin-top: var(--spacing-2); }

.rpt-rating-note {
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: var(--spacing-2xs);
}

.mi-body.text-xs {
  font-size: var(--t-body);
  margin-top: 6px;
}

/* ── Snapshot-specific token-backed classes ──────────────────────────────── */

.snap-cover-inner {
  padding: var(--report-pad);
  padding-top: var(--spacing-8);
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
}

.snap-badge {
  display: inline-block;
  background: var(--cyan);
  color: var(--white);
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.5px;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: 3px;
}

.snap-title {
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-4);
}

.snap-key-finding {
  background: linear-gradient(135deg, var(--gray-background), var(--white));
  border-left: 4px solid var(--cyan);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.snap-key-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.5px;
  color: var(--cyan);
  margin-bottom: 6px;
}

.snap-key-text {
  font-size: var(--t-body);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink);
  line-height: 1.4;
}

.snap-section-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.5px;
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
}

.snap-body {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: var(--line-height-relaxed);
}

.snap-metrics {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-top: auto;
}

.snap-metric {
  flex: 1;
  min-width: 140px;
  background: var(--gray-background);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) 14px;
  text-align: center;
}

.snap-metric-value {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

.snap-metric-label {
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-top: var(--spacing-1);
}

.snap-metric-text {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: 1.4;
}

.snap-footer {
  margin-top: auto;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--report-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.snap-footer-text {
  font-size: 12px;
  font-style: italic;
  color: var(--report-ink);
  letter-spacing: 1px;
}

.snap-footer-url {
  font-size: 12px;
  font-style: italic;
  color: var(--report-ink);
}

.snap-recs-inner {
  padding: var(--report-pad);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.snap-recs-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-5);
}

.snap-recs-bar {
  width: 4px;
  height: var(--spacing-5);
  background: var(--cyan);
  border-radius: 2px;
}

.snap-recs-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
}

.snap-recs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.snap-rec-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--gray-background);
  border-radius: var(--radius-md);
  padding: 14px var(--spacing-4);
}

.snap-rec-num {
  /* Numbered circles unified to 24px across the gallery. Was: 28px. */
  min-width: 24px;
  height: 24px;
  background: var(--cyan);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--caption);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.snap-rec-title {
  font-size: var(--caption);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink);
  margin-bottom: var(--spacing-1);
}

.snap-rec-desc {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: var(--line-height-normal);
}

.snap-rec-tags {
  display: flex;
  gap: var(--spacing-2);
  margin-top: 6px;
}

.snap-priority-tag {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1px;
  padding: 2px var(--spacing-2);
  border-radius: 3px;
  color: var(--white);
}

.snap-priority-tag.high   { background: var(--report-red); }
.snap-priority-tag.medium { background: var(--report-amber); }
.snap-priority-tag.low    { background: var(--report-green); }

.snap-rec-timeframe {
  font-size: var(--t-body);
  color: var(--report-ink);
}

.snap-rec-text {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: var(--line-height-normal);
}

.snap-sources {
  margin-top: auto;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--report-border);
}

.snap-sources-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.5px;
  color: var(--report-ink);
  margin-bottom: var(--spacing-1);
}

.snap-sources-list {
  font-size: var(--t-body);
  color: var(--report-ink);
  line-height: var(--line-height-normal);
}

.snap-cta-text {
  font-size: var(--t-body);
  color: var(--report-ink);
  margin-bottom: var(--spacing-3);
}

.snap-cta-btn {
  display: inline-block;
  background: var(--cyan);
  color: var(--white);
  font-size: var(--caption);
  font-weight: var(--font-weight-semibold);
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.snap-bar-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 2px;
  color: var(--report-ink);
}

.cover-bar-logo { height: 28px; }

/* On-screen mobile only: hide the Renatus logo on the report cover.
   PDF/PNG exports are rendered headless at desktop viewport width
   so this rule never fires during download — the logo still appears
   on every downloaded copy of the report. */
@media (max-width: 768px) {
  .cover-bar-logo { display: none !important; }
}

.snap-cover-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.mi-figure-source.mt-1 { margin-top: var(--spacing-1); }

.section-title.max-w-80 { max-width: 80%; }

.cover-full {
  overflow: hidden;
  position: relative;
  min-height: var(--report-page-h);
}

.cover-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cover-bg-gradient {
  width: 100%;
  height: 100%;
  background: var(--gradient);
}

.cover-content-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.stat-cards.mt-6 { margin-top: var(--spacing-6); }
.stat-cards.mb-6 { margin-bottom: var(--spacing-6); }

/* ── FW6 — DECISION MATRIX ──────────────────────────────────────────────────
   Used by: Problem Analysis — The Options section
   Weighted criteria table: options as rows, criteria as columns,
   weighted totals reveal the recommended choice.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-decision-matrix {
  /* Soft gray outer border — matches the body-card chrome
     (.fw-item-card / .fw-prose-blocks-card / .fw-cadence-card). */
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.fw-decision-matrix table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-body);
}

.fw-decision-matrix thead th {
  border-bottom: 1px solid var(--report-ink);
}

.fw-decision-matrix th {
  padding: 10px 14px;
  font-size: var(--chart-name-size);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink);
  text-align: left;
}

.fw-decision-matrix th.hl {
  font-weight: var(--chart-name-hl-wt);
}

/* Option columns colour by index — cycles through every 2nd step of the
   16-tone kicker range (colors.css) so any number of options gets a
   distinct, well-separated tint instead of running out after 3 columns:
   kicker01 yellow, 03 green, 05 cyan, 07 blue, 09 purple, 11 magenta,
   13 pink, 15 orange — 8 colours before repeating.
   Applied to both th and td so the whole column is consistent. */
.fw-decision-matrix th[data-opt="0"],
.fw-decision-matrix td[data-opt="0"] {
  background-color: color-mix(in srgb, var(--kicker01) 7%, var(--report-white));
}

.fw-decision-matrix th[data-opt="1"],
.fw-decision-matrix td[data-opt="1"] {
  background-color: color-mix(in srgb, var(--kicker03) 7%, var(--report-white));
  border-left: 2px solid var(--white);
}

.fw-decision-matrix th[data-opt="2"],
.fw-decision-matrix td[data-opt="2"] {
  background-color: color-mix(in srgb, var(--kicker05) 7%, var(--report-white));
  border-left: 2px solid var(--white);
}

.fw-decision-matrix th[data-opt="3"],
.fw-decision-matrix td[data-opt="3"] {
  background-color: color-mix(in srgb, var(--kicker07) 7%, var(--report-white));
  border-left: 2px solid var(--white);
}

.fw-decision-matrix th[data-opt="4"],
.fw-decision-matrix td[data-opt="4"] {
  background-color: color-mix(in srgb, var(--kicker09) 7%, var(--report-white));
  border-left: 2px solid var(--white);
}

.fw-decision-matrix th[data-opt="5"],
.fw-decision-matrix td[data-opt="5"] {
  background-color: color-mix(in srgb, var(--kicker11) 7%, var(--report-white));
  border-left: 2px solid var(--white);
}

.fw-decision-matrix th[data-opt="6"],
.fw-decision-matrix td[data-opt="6"] {
  background-color: color-mix(in srgb, var(--kicker13) 7%, var(--report-white));
  border-left: 2px solid var(--white);
}

.fw-decision-matrix th[data-opt="7"],
.fw-decision-matrix td[data-opt="7"] {
  background-color: color-mix(in srgb, var(--kicker15) 7%, var(--report-white));
  border-left: 2px solid var(--white);
}

.fw-decision-matrix th.fw-dm-num {
  text-align: center;
}

.fw-decision-matrix td {
  padding: 12px 14px;
  color: var(--report-ink);
  vertical-align: middle;
}

/* Row dividers inset 14px from each table edge — matches the td
   horizontal padding so the hairline has breathing room rather than
   meeting the matrix outer border. Painted on the tr instead of as
   td border-bottoms so the inset reads cleanly across all cells. */
.fw-decision-matrix tbody tr {
  background-image: linear-gradient(to right, var(--gray-light), var(--gray-light));
  background-repeat: no-repeat;
  background-size: calc(100% - 28px) 1px;
  background-position: 14px 100%;
}

/* Last body row sits directly above the tfoot cyan border — suppress its
   hairline so the two lines don't stack. */
.fw-decision-matrix tbody tr:last-child {
  background-image: none;
}

.fw-decision-matrix tfoot td {
  border-top: 1px solid var(--report-ink);
  border-bottom: 1px solid var(--report-ink);
  font-weight: var(--font-weight-semibold);
}

.fw-decision-matrix tfoot td.fw-dm-crit {
  font-weight: var(--font-weight-light);
}

.fw-decision-matrix td.fw-dm-num {
  text-align: center;
  font-weight: var(--font-weight-medium);
}

.fw-decision-matrix td.fw-dm-score {
  text-align: center;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-body);
}

.fw-decision-matrix .fw-dm-num.hl {
  font-weight: var(--chart-name-hl-wt);
}

.fw-decision-matrix .fw-dm-total.hl {
  font-weight: var(--chart-name-hl-wt);
}

.fw-decision-matrix td.fw-dm-crit.hl {
  color: var(--report-ink);
  font-weight: var(--font-weight-semibold);
}

.fw-decision-matrix .fw-dm-recommendation {
  padding: 30px 0 0 0;
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--report-ink);
  background: var(--white);
  line-height: 1.6;
}

/* Mobile: collapse the decision matrix into a card per criterion. The
   thead row hides; each tbody row becomes a small grid where the
   criterion name sits top-left and the weight cell sits top-right
   (with a "Weight" caption). The option score cells span the full row
   width on subsequent rows, each rendered as a label/value pair so
   the user reads "Build in-house … 7" naturally. The tfoot weighted
   total row keeps the same layout but uses a pink border to mark it
   as the recommendation block. */
@media (max-width: 600px) {
  .fw-decision-matrix { border: none; overflow: visible; }
  .fw-dm-inner,
  .fw-dm-inner tbody,
  .fw-dm-inner tfoot,
  .fw-dm-inner tr,
  .fw-dm-inner td { display: block; width: 100%; }
  .fw-dm-inner thead { display: none; }
  .fw-dm-inner tbody tr,
  .fw-dm-inner tfoot tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 6px;
    padding: 14px;
    border: 1px solid var(--report-border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
  }
  .fw-dm-inner tfoot tr.fw-dm-total-row { border-color: var(--cyan); }
  .fw-decision-matrix td { padding: 0; border: none; text-align: left; }
  .fw-decision-matrix td.fw-dm-crit {
    grid-column: 1;
    font-weight: var(--font-weight-medium);
  }
  .fw-decision-matrix td.fw-dm-num:nth-child(2) {
    grid-column: 2;
    text-align: right;
    font-weight: var(--font-weight-light);
  }
  .fw-decision-matrix td.fw-dm-num:nth-child(2)::before {
    content: attr(data-label) " ";
    opacity: 0.55;
    font-weight: var(--font-weight-light);
  }
  .fw-decision-matrix td.fw-dm-num:nth-child(n+3) {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0 0;
    border-top: 1px solid var(--report-border);
    margin-top: 2px;
    text-align: left;
  }
  .fw-decision-matrix td.fw-dm-num:nth-child(n+3)::before {
    content: attr(data-label);
    font-weight: var(--font-weight-light);
    opacity: 0.7;
  }
}

@media print {
  .fw-decision-matrix tbody tr.hl {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

.fw-swot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.fw-swot-quadrant {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--report-border);
}

.fw-swot-quadrant:nth-child(odd) {
  border-right: 1px solid var(--report-border);
}

.fw-swot-quadrant:nth-last-child(-n+2) {
  border-bottom: none;
}

.fw-swot-quadrant.hl {
}

.fw-swot-label {
  display: grid;
  grid-template-columns: auto auto;
  gap: 24px;
  justify-content: start;
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-ink);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--report-border);
  margin-bottom: 4px;
}

.fw-swot-letter {
  font-weight: 600;
}

/* Per-quadrant hues — Strengths (blue) · Weaknesses (amber) · Opportunities (mint) · Threats (pink). */
.fw-swot-quadrant:nth-child(1) .fw-swot-label { color: var(--band-excellent); border-bottom-color: var(--band-excellent); }
.fw-swot-quadrant:nth-child(2) .fw-swot-label { color: var(--band-solid);     border-bottom-color: var(--band-solid); }
.fw-swot-quadrant:nth-child(3) .fw-swot-label { color: var(--band-strong);    border-bottom-color: var(--band-strong); }
.fw-swot-quadrant:nth-child(4) .fw-swot-label { color: var(--band-emerging);  border-bottom-color: var(--band-emerging); }

.fw-swot-item {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: 1.5;
  color: var(--report-ink);
  padding: 4px 0;
}

.fw-swot-item.hl {
  font-weight: var(--font-weight-medium);
  font-style: italic;
}

.fw-swot-implications {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: var(--spacing-5);
}

.fw-swot-implication {
  display: block;
}

.fw-swot-imp-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}

.fw-swot-imp-action {
  margin-top: 4px;
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink-60);
  overflow-wrap: break-word;
}

.fw-rice-table {
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.fw-rice-inner {
  width: 100%;
  border-collapse: collapse;
}

.fw-rice-inner thead {
  /* Header-row divider: gray-dark 1px, consistent with every component/table
     header row (Christine, 1 June 2026). Was: 1px var(--report-border). */
  border-bottom: 1px solid var(--gray-dark);
}

.fw-rice-inner th {
  padding: 10px 14px;
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
  text-align: left;
}

.fw-rice-inner th.fw-rice-num {
  text-align: center;
}

.fw-rice-inner th.fw-rice-score-col {
  text-align: center;
}

.fw-rice-inner td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--report-border);
  color: var(--report-ink);
  vertical-align: top;
}

.fw-rice-inner tbody tr:last-child td {
  border-bottom: none;
}

.fw-rice-name {
  font-size: var(--t-body);
  max-width: 420px;
  overflow-wrap: break-word;
  word-break: normal;
}

.fw-rice-name-label {
  font-weight: var(--font-weight-medium);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
}

.fw-rice-desc {
  margin-top: 4px;
  font-weight: var(--font-weight-light);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink-60);
  overflow-wrap: break-word;
  word-break: normal;
}

.fw-rice-num {
  text-align: center;
  font-weight: var(--font-weight-medium);
  font-size: var(--t-body);
}

.fw-rice-score {
  text-align: center;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-body);
}

.fw-rice-row.hl .fw-rice-name {
  color: var(--report-ink);
  font-weight: var(--chart-name-hl-wt);
}

.fw-rice-row.hl .fw-rice-num,
.fw-rice-row.hl .fw-rice-score {
  color: var(--report-ink);
  font-weight: var(--chart-name-hl-wt);
}

.fw-rice-rationale {
  padding: 12px 16px;
  margin-top: var(--spacing-3);
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  background: var(--white);
  border-top: 1px solid var(--band-emerging);
  line-height: 1.6;
}

.fw-prose-blocks-card {
  /* Soft gray outer border + white fill + gray-dark internal hairlines —
     matches the cadence card pattern so every "labelled-row stack"
     on a report wears the same chrome. */
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}

.fw-prose-block-label {
  padding: 16px 24px 0;
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}

.fw-prose-blocks-card.hl {
  border: 1px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Pink highlight variant — opt-in via block.hl_color == 'pink' (Compensation
   Review "Biggest single risk" leads the retention section). Overrides only
   the border/fill; other .hl consumers (cash-runway, career-decision, …)
   keep the default cyan and are unaffected since they never set hl_color. */
.fw-prose-blocks-card.hl.hl-pink {
  border: 1px solid var(--pink);
  border-left: 2px solid var(--pink);
  background: color-mix(in srgb, var(--pink) 5%, transparent);
}

/* Per-role retention risk pill — same status-token chrome as .fw-risk-sev:
   fit-to-text, inline with the heading label, 1px solid status border,
   navy text (Christine, 5 July 2026). Uses --positive/--neutral/--negative
   (never --band-* score tokens — those are for score bands, not status). */
.fw-risk-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.4;
  border: 1px solid transparent;
  color: var(--navy);
  vertical-align: middle;
}
.fw-risk-pill--high {
  background: var(--negative-tint);
  border-color: var(--negative);
}
.fw-risk-pill--medium {
  background: var(--neutral-tint);
  border-color: var(--neutral);
}
.fw-risk-pill--low {
  background: var(--positive-tint);
  border-color: var(--positive);
}

/* financial-decision current_position: lighter stat-callout treatment.
   The decision callouts (intel-grid) open the report as the hero.
   Current position is supporting context — same data family but quieter
   chrome so the two grids don't compete. Tighter padding, smaller radius,
   muted background tint, and a reduced value font size distinguish them. */
.fw-fd-pos-strip .mi-stat-callout-grid {
  grid-template-columns: 1fr;
  gap: var(--spacing-3);
  margin: 0 0 var(--spacing-2);
}
.fw-fd-pos-strip .mi-stat-callout {
  background: color-mix(in srgb, var(--report-bg) 50%, var(--white));
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: var(--spacing-4) var(--spacing-5);
}
.fw-fd-pos-strip .mi-stat-callout-value {
  font-size: var(--t-2xl);
  padding-top: var(--spacing-2);
}
.fw-fd-pos-strip .mi-stat-callout-note {
  margin-top: var(--spacing-1);
}

/* Two-column ten-year contrast — career-decision Section 5.
   Wraps two fw-prose-blocks-card divs side by side; stacks on
   narrow viewports and in print (each card break-inside: avoid). */
.fw-decision-contrast {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  margin-top: var(--spacing-4);
}
.fw-decision-contrast .fw-prose-blocks-card {
  margin-bottom: 0;
}
@media print {
  .fw-decision-contrast {
    grid-template-columns: 1fr;
  }
  .fw-decision-contrast .fw-prose-blocks-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

.fw-prose-blocks-card.hl .fw-prose-block-label-inline {
  color: var(--navy);
  font-weight: var(--chart-name-hl-wt);
}

.fw-prose-blocks-divider {
  border: none;
  /* Hairline inset 20px from each card edge — matches the row padding
     so the divider has breathing room rather than meeting the card
     border. Consistent with the OKR/team-goals row dividers. */
  border-top: 1px solid var(--gray-light);
  margin: 0 20px;
}

/* ───────────────────────────────────────────────────────────────────────────
   FW-OKR-CARD — structured Objective + Key Results component used by
   kpi-individual, kpi-manager, and (in `inherited` mode) the
   team_context section that pulls team goals from a parent kpi-manager
   report. Replaces the "Objective: X — Key Results: (1) Y, (2) Z, (3) W"
   prose pattern with a real structure: one card per objective, header
   row, optional "why" line, and a target/measurement grid for the KRs.
   The `.inherited` modifier dims the cards and adds an italic caption
   so readers see the ladder from team → individual at a glance.
   ─────────────────────────────────────────────────────────────────────────── */
.fw-okr-stack {
  display: flex;
  flex-direction: column;
  /* Unified inter-card gap across all framework sections (perspective
     cards, cadence cards, threshold cards). Christine wants this gap
     identical and generous everywhere within a section. */
  gap: 28px;
}

.fw-okr-inherited-caption {
  /* Base body text — 15px / 300 / report-ink. */
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  margin-bottom: 4px;
}

/* Every perspective card gets the "highlighted" treatment by default
   per Christine May 26 2026 — KPI dashboards should read as a flat set
   of peer cards, all carrying the navy accent (no "winner" / "loser"
   distinction). The .hl class is kept inert for backwards-compat with
   existing markup. The soft gray outline matches the rest of the
   body-card chrome, NOT the semantic "excellent" band colour. */
.fw-okr-card {
  /* Canonical card border — same `--report-border` token used by
     every other card on every report (fw-item-card, prose-blocks
     card, cadence card, threshold card, etc.). Single source of
     truth: change --report-border in frame.css and every card on
     every report updates together. */
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}

.fw-okr-card.hl {
  /* Highlight disabled — all OKR cards carry the canonical
     --report-border. */
  border: 1px solid var(--report-border);
  background: var(--white);
}

.fw-okr-card.inherited {
  border-style: dashed;
  background: var(--report-bg-canvas, transparent);
}

.fw-okr-card-header {
  padding: 16px 20px 14px;
  /* No bottom divider — the gray KR-header band below acts as the
     visual separator on its own. */
}

.fw-okr-card.hl .fw-okr-card-header {
}

.fw-okr-card-eyebrow {
  font-size: var(--t-xsmall, 11px);
  font-weight: var(--chart-name-wt);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 4px;
}

.fw-okr-card.hl .fw-okr-card-eyebrow {
  color: var(--navy);
}

/* Inline category label that follows the perspective name on the
   same line, e.g. "Financial perspective". Matches the title weight
   for a cleaner read; muted colour keeps the perspective name in
   visual foreground. */
.fw-okr-card-label-inline {
  font-weight: inherit;
  color: var(--paragraph-heading-color);
}

/* ── Canonical card-heading recipe ─────────────────────────────────
   Single source of truth for every "labelled card / labelled block"
   heading on a report. Change size/weight/color HERE, not in the
   per-class rules. The per-class rules only carry their own spacing.
   Used by:
     .fw-okr-card-title          — KPI / OKR objective titles
     .fw-item-title              — list-of-dicts card titles
     .fw-item-key                — From / Priority / etc. field labels
     .fw-prose-block-label-inline — "Onboarding rebuild:" prose labels
*/
.fw-okr-card-title,
.fw-item-title,
.fw-item-key,
.fw-prose-block-label-inline {
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  line-height: var(--card-title-lh);
  color: var(--card-title-color);
}

.fw-prose-block-label-inline {
  color: var(--cyan);
}

.fw-okr-card-title {
  /* Inherits the canonical card-title recipe above, which is now
     standardised on the paragraph-heading tokens (15px / 500). */
}

.fw-okr-card-why {
  /* Card-subhead recipe — see frame.css --card-subhead-* tokens.
     Any new "descriptor under a card title" should adopt this same
     token set so all 92 reports stay consistent. */
  margin-top: var(--card-subhead-margin-top);
  font-size: var(--card-subhead-size);
  font-weight: var(--card-subhead-weight);
  font-style: var(--card-subhead-style);
  line-height: var(--card-subhead-lh);
  color: var(--card-subhead-color);
}

.fw-okr-card-krs {
  padding: 0;
}

.fw-okr-krs-header,
.fw-okr-kr-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding: 10px 20px;
  font-size: var(--t-body);
  /* Unified light body weight across all card families
     (perspective KR rows, cadence values, threshold values). */
  font-weight: var(--chart-name-wt);
  line-height: 1.5;
  color: var(--report-ink);
}

.fw-okr-krs-header {
  /* Basic body text — same recipe as the KR rows; no uppercase
     micro-label treatment. The objective title above carries the
     section heading; this row is just column labels in body type. */
  font-size: var(--t-body);
  font-weight: var(--chart-name-wt);
  line-height: 1.5;
  color: var(--report-ink);
  background: var(--surface-cool-strong);
}

.fw-okr-kr-row + .fw-okr-kr-row {
  /* Inset 20px from each card edge — matches the row padding so the
     divider has breathing room rather than meeting the card border.
     Uses a clipped background line instead of border-top so the row
     can still sit flush within the krs container. */
  background-image: linear-gradient(to right, var(--report-ink-10), var(--report-ink-10));
  background-repeat: no-repeat;
  background-size: calc(100% - 40px) 1px;
  background-position: 20px 0;
}

.fw-okr-kr-name {
  font-weight: var(--chart-name-wt);
}

.fw-okr-kr-target {
  font-weight: var(--font-weight-light);
}

.fw-okr-kr-measurement {
  font-weight: var(--font-weight-light);
  color: var(--report-ink-60);
}

@media (max-width: 640px) {
  .fw-okr-krs-header { display: none; }
  .fw-okr-kr-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 20px;
  }
  .fw-okr-kr-target::before { content: 'Target: '; color: var(--report-ink-60); font-size: var(--t-xsmall); }
  .fw-okr-kr-measurement::before { content: 'Measurement: '; color: var(--report-ink-60); font-size: var(--t-xsmall); }
}

@media print {
  .fw-okr-card        { break-inside: auto; overflow: visible; }
  .fw-okr-card-header { break-after: avoid; }
  .fw-okr-kr-row      { break-inside: avoid; }
}

.fw-prose-block-row {
  padding: 20px 24px;
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  display: flex;
  flex-direction: column;
  /* 8px between the heading-style label (+ pill) row and the body text */
  gap: 8px;
}

/* Label + risk pill share a single row — name left, pill right, mirroring
   the canonical .ci-gap-head / .op-head "name left, pill right" recipe
   (Christine, 5 July 2026). Falls back to just the label when no pill. */
.fw-prose-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.fw-prose-block-label-inline {
  /* Inherits the canonical card-heading recipe from .fw-card-heading. */
}

.fw-prose-block-text {
  white-space: pre-line;
}

/* First-sentence lead — bold, slightly larger than body, sits above the
   remainder as a natural standfirst. Rendered as display:block so it
   occupies its own line before the rest of the paragraph flows. */
.fw-prose-lead {
  display: block;
  font-size: var(--paragraph-heading-size);
  font-weight: var(--paragraph-heading-weight);
  line-height: var(--paragraph-heading-lh);
  color: var(--report-ink);
  margin-bottom: 4px;
}

/* Mobile: collapse the RICE prioritisation table into a card per
   initiative. The thead row hides; each tbody row becomes a 5-column
   grid where the initiative name + description span the first four
   columns of the top two rows, the four RICE inputs (Reach, Impact,
   Confidence, Effort) flow into row 3 with their data-label rendered
   inline as a small grey caption, and the RICE score sits as a large
   right-aligned number spanning all three rows in column 5. */
@media (max-width: 600px) {
  .fw-rice-table { border: none; overflow: visible; }
  .fw-rice-inner,
  .fw-rice-inner tbody,
  .fw-rice-inner tr,
  .fw-rice-inner td { display: block; width: 100%; }
  .fw-rice-inner thead { display: none; }
  .fw-rice-inner tbody tr.fw-rice-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    column-gap: 8px;
    row-gap: 6px;
    padding: 14px;
    border: 1px solid var(--report-border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
  }
  .fw-rice-inner tbody tr.fw-rice-row.hl { background: var(--white); border-color: var(--band-excellent); }
  .fw-rice-inner td { padding: 0; border: none; text-align: left; }
  .fw-rice-inner td.fw-rice-name {
    grid-column: 1 / 5;
    grid-row: 1;
    max-width: 100%;
    font-size: var(--t-body);
  }
  .fw-rice-inner td.fw-rice-name .fw-rice-name-label {
    font-weight: var(--font-weight-medium);
  }
  .fw-rice-inner td.fw-rice-name .fw-rice-desc {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.85;
  }
  .fw-rice-inner td.fw-rice-num:not(.fw-rice-score) {
    grid-row: 2;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
  }
  .fw-rice-inner td.fw-rice-num:not(.fw-rice-score)::before {
    content: attr(data-label) " ";
    font-weight: var(--font-weight-light);
    opacity: 0.55;
  }
  .fw-rice-inner td.fw-rice-score {
    grid-column: 5;
    grid-row: 1 / span 2;
    align-self: start;
    text-align: right;
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
}

@media print {
  .fw-swot-grid      { break-inside: auto; }
  .fw-rice-table     { break-inside: auto; }
  .fw-swot-quadrant  { break-inside: avoid; }
  .fw-rice-row       { break-inside: avoid; }
  .fw-prose-blocks-card { break-inside: avoid; }
  .fw-rice-row.hl {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .fw-prose-block-row.hl,
  .fw-prose-blocks-card.hl {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ── FW7 — SPRINT PHASES ────────────────────────────────────────────────────
   Used by: Execution Plan — The Sprint Structure section
   Four-phase horizontal timeline: Foundation → Build & Test →
   Validate & Refine → Deploy & Measure. Each phase shows weeks,
   name, objective, and key deliverables.
   ─────────────────────────────────────────────────────────────────────────── */

/* Stacked-card layout — always single column regardless of phase count.
   Each phase is a bordered card with a 2-column header row (meta left,
   objective right) and a deliverables body below a separator line. */
.fw-sprint-phases {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fw-sprint-phase {
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Header row: meta (weeks label + phase name) on the left,
   objective summary on the right. */
.fw-sprint-phase-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--gray-white);
}

.fw-sprint-phase:nth-child(1) .fw-sprint-phase-header {
  background: color-mix(in srgb, var(--kicker08) 5%, var(--report-white));
}

.fw-sprint-phase:nth-child(2) .fw-sprint-phase-header {
  background: color-mix(in srgb, var(--kicker05) 5%, var(--report-white));
}

.fw-sprint-phase:nth-child(3) .fw-sprint-phase-header {
  background: color-mix(in srgb, var(--kicker04) 5%, var(--report-white));
}

.fw-sprint-phase:nth-child(4) .fw-sprint-phase-header {
  background: color-mix(in srgb, var(--kicker03) 5%, var(--report-white));
}

/* Left side: weeks label stacked above the phase name. */
.fw-sprint-phase-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}

.fw-sprint-phase-weeks {
  font-size: var(--t-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink-60);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fw-sprint-phase:nth-child(1) .fw-sprint-phase-weeks {
  color: var(--kicker08);
}

.fw-sprint-phase:nth-child(2) .fw-sprint-phase-weeks {
  color: var(--kicker05);
}

.fw-sprint-phase:nth-child(3) .fw-sprint-phase-weeks {
  color: var(--kicker04);
}

.fw-sprint-phase:nth-child(4) .fw-sprint-phase-weeks {
  color: var(--kicker03);
}

.fw-sprint-phase-name {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-ink);
  line-height: 1.2;
}

/* Right side: objective — muted, left-aligned, wraps naturally. */
.fw-sprint-phase-objective {
  flex: 1;
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  line-height: 1.5;
  color: var(--report-ink-60);
  text-align: left;
}

/* Deliverables body — separated from header by the card border. */
.fw-sprint-deliverables {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--report-border);
}

.fw-sprint-phase.hl .fw-sprint-deliverables {
  border-top-color: color-mix(in srgb, var(--cyan) 20%, transparent);
}

.fw-sprint-deliverable {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  line-height: 1.55;
  color: var(--report-ink);
  padding-left: 16px;
  text-indent: -16px;
}

.fw-sprint-deliverable::before {
  content: "–\00a0";
  font-weight: var(--font-weight-light);
}

/* Structured deliverable: owner tag + task text (owner = Accountable
   per RACI). Owner shown in cyan; no bullet (owner is the lead). */
.fw-sprint-deliverable--owned {
  padding-left: 0;
  text-indent: 0;
}
.fw-sprint-deliverable--owned::before {
  content: none;
}
.fw-sprint-owner {
  font-size: var(--t-small);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink);
}
.fw-sprint-owner::after {
  content: " \2014 ";
  font-weight: var(--font-weight-normal);
  color: var(--report-ink-35);
  margin: 0 2px;
}

/* Narrow screens: stack the header meta + objective vertically. */
@media (max-width: 480px) {
  .fw-sprint-phase-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .fw-sprint-phase-objective {
    text-align: left;
  }
}

@media print {
  .fw-sprint-phase         { break-inside: auto; overflow: visible; }
  .fw-sprint-phase-header  { break-after: avoid; }
  .fw-sprint-phase.hl  {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ── FW8 — RACI TABLE ───────────────────────────────────────────────────────
   Used by: Strategic Priorities — Ownership section
   Matrix table: deliverables as rows, named people as columns,
   R/A/C/I assignments in cells. R highlighted in pink.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-raci-table {
  overflow: hidden;
}

.fw-raci-inner {
  width: 100%;
  border-collapse: collapse;
}

.fw-raci-inner thead {
  border-bottom: 1px solid var(--gray-dark);
}

.fw-raci-inner th {
  padding: 10px 14px;
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--report-ink);
  text-align: left;
}

.fw-raci-inner th.fw-raci-num {
  text-align: center;
}

.fw-raci-inner td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--report-border);
  color: var(--report-ink);
  vertical-align: middle;
}

.fw-raci-inner tbody tr:last-child td {
  border-bottom: none;
}

.fw-raci-task {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
}

.fw-raci-row.hl .fw-raci-task {
  font-weight: var(--font-weight-medium);
}

.fw-raci-num {
  text-align: center;
}

/* Badge pills — circular chips per role letter.
   R (Responsible)  = pink tint bg + pink text  (--band-developing palette)
   A (Accountable)  = cyan tint bg + cyan text  (--band-strong palette)
   C (Consulted)    = grey tint bg + grey text  (neutral ink palette)
   I (Informed)     = no chip — plain muted letter only. */
.fw-raci-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 2px;
  flex-shrink: 0;
}

.fw-raci-badge.fw-raci-r {
  background: var(--band-excellent-soft);
  border: 1px solid var(--band-excellent);
  color: var(--navy);
}

.fw-raci-badge.fw-raci-a {
  background: var(--band-strong-soft);
  border: 1px solid var(--band-strong);
  color: var(--navy);
}

.fw-raci-badge.fw-raci-c {
  background: var(--band-solid-soft);
  border: 1px solid var(--band-solid);
  color: var(--navy);
}

.fw-raci-badge.fw-raci-i {
  background: var(--band-developing-soft);
  border: 1px solid var(--band-developing);
  color: var(--navy);
}

.fw-raci-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 0;
  margin-top: var(--spacing-3);
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink-60);
}

.fw-raci-legend .fw-raci-badge {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.fw-raci-sep {
  color: var(--report-ink-35);
  margin: 0 2px;
}

/* Mobile: collapse to one card per task.
   Badges stay visible; person name shown after via data-person attr. */
@media (max-width: 600px) {
  .fw-raci-table { overflow: visible; }
  .fw-raci-inner,
  .fw-raci-inner tbody,
  .fw-raci-inner tr,
  .fw-raci-inner td { display: block; width: 100%; }
  .fw-raci-inner thead { display: none; }
  .fw-raci-inner tbody tr.fw-raci-row {
    padding: 14px;
    border: 1px solid var(--report-border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
  }
  .fw-raci-inner td { padding: 0; border: none; }
  .fw-raci-inner td.fw-raci-task {
    font-weight: var(--font-weight-medium);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--report-border);
  }
  .fw-raci-inner td.fw-raci-num {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    text-align: left;
  }
  .fw-raci-inner td.fw-raci-num::after {
    content: attr(data-person);
    color: var(--report-ink-60);
    font-size: var(--t-body);
    font-weight: var(--font-weight-light);
  }
}

@media print {
  .fw-raci-table  { break-inside: auto; }
  .fw-raci-row    { break-inside: avoid; }
  .fw-raci-row.hl {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .fw-raci-badge  {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ── FW-CANVAS-9 — BUSINESS MODEL CANVAS ────────────────────────────────────
   Used by: Business Model Analysis — How You Create Value section
   Layout: 9-block Osterwalder grid. Five columns, three rows.
   Key partners spans rows 1–2. Value propositions spans rows 1–2.
   Customer segments spans rows 1–2. Cost structure spans cols 1–2.
   Revenue streams spans cols 3–5.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-canvas-9 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 0;
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.fw-canvas-block {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--report-border);
  border-right: 1px solid var(--report-border);
}

/* Grid area assignments — classic Osterwalder layout */
/* Infrastructure trio (Key partners / Key activities / Key resources) —
   Christine, 1 June 2026. Cyan 1px on the group's LEFT, TOP and INTERNAL
   edges + a light cyan fill. The group's outer RIGHT (→ Value propositions)
   and outer BOTTOM (→ Cost structure) keep the default grey.
   Internal dividers are each drawn by a single neighbour: Key partners'
   right border splits col1|col2 across both rows; Key activities' bottom
   border splits the two col2 cells — so Key resources needs no explicit
   border (its top+left ARE those cyan neighbour borders).
   Was: each selector was only `{ grid-area: … }` (grey border-right/bottom
   inherited from .fw-canvas-block, no left/top border, no fill). */
.fw-canvas-key-partners {
  grid-area: 1 / 1 / 3 / 2;
  border-top: 1px solid var(--cyan);
  border-left: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
  border-bottom: 1px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.fw-canvas-key-activities {
  grid-area: 1 / 2 / 2 / 3;
  border-top: 1px solid var(--cyan);
  border-bottom: 1px solid var(--cyan);
  border-right: none;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.fw-canvas-key-resources {
  grid-area: 2 / 2 / 3 / 3;
  border-bottom: 1px solid var(--cyan);
  border-right: none;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
/* Value Propositions (centre) — solid pink frame + 5% pink wash. Owns all four
   of its own edges: its left replaces the infra group's right divider (Key
   Activities/Resources drop their right border), its right is the customer
   group's left edge, its bottom is Revenue Streams' top. */
.fw-canvas-value-propositions        { grid-area: 1 / 3 / 3 / 4; border: 1px solid var(--pink); background: color-mix(in srgb, var(--pink) 5%, transparent); }
/* Customer group (relationships / channels / segments) — yellow frame + 5%
   yellow wash on top/inner/right/bottom. No LEFT border: that edge is Value
   Propositions' pink right border. */
.fw-canvas-customer-relationships    { grid-area: 1 / 4 / 2 / 5; border-top: 1px solid var(--yellow); border-right: 1px solid var(--yellow); border-bottom: 1px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 5%, transparent); }
.fw-canvas-channels                  { grid-area: 2 / 4 / 3 / 5; border-right: 1px solid var(--yellow); border-bottom: 1px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 5%, transparent); }
.fw-canvas-customer-segments         { grid-area: 1 / 5 / 3 / 6; border-top: 1px solid var(--yellow); border-right: 1px solid var(--yellow); border-bottom: 1px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 5%, transparent); }
/* Bottom group (cost structure / revenue streams) — green frame + 5% green
   wash on bottom/inner/left/right. No TOP border: those edges are owned by the
   cyan (above Cost Structure) and pink/yellow (above Revenue Streams) cells.
   Cost Structure's right border draws the inner divider. */
.fw-canvas-cost-structure            { grid-area: 3 / 1 / 4 / 3; border-left: 1px solid var(--green); border-right: 1px solid var(--green); border-bottom: 1px solid var(--green); background: color-mix(in srgb, var(--green) 5%, transparent); }
.fw-canvas-revenue-streams           { grid-area: 3 / 3 / 4 / 6; border-right: 1px solid var(--green); border-bottom: 1px solid var(--green); background: color-mix(in srgb, var(--green) 5%, transparent); }

.fw-canvas-block-label {
  font-size: var(--t-body);
  font-weight: var(--t-heading-wt);
  color: var(--report-ink);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--report-border);
  margin-bottom: 4px;
}

.fw-canvas-item {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: 1.5;
  color: var(--report-ink);
  padding: 4px 0;
}

.fw-canvas-item.hl {
  font-weight: var(--font-weight-light);
}

/* Floating summary card — the coherence score and the strategic tension are
   moved out of the Business Model Canvas grid into their own section that
   floats below the grid (was: bottom full-width rows inside .fw-canvas-9).
   Christine, 4 Jun 2026. */
.fw-canvas-summary {
  margin-top: var(--spacing-5);
  padding: var(--spacing-4);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  background: var(--report-bg-subtle, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.fw-canvas-coherence {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  align-items: first baseline;
}

.fw-canvas-coherence-score {
  /* Coherence score is the headline metric of the canvas — render it big
     and bold so "6/10" reads as a score, not body copy. It's a value (not a
     heading) so it's exempt from the medium-weight cap. The row uses
     align-items:first baseline, so the large number sits on the note's first
     line. Christine, 4 June 2026. Was: var(--t-body) / var(--chart-name-wt). */
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--report-ink);
  white-space: nowrap;
}

.fw-canvas-coherence-note {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}

.fw-canvas-tension {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  align-items: first baseline;
  padding: 12px 24px;
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}

.fw-canvas-tension-label {
  font-weight: var(--chart-name-wt);
  color: var(--report-ink);
  white-space: nowrap;
}

/* Mobile: collapse the Business Model Canvas grid into a single
   stacked column. Switching to flex-column ignores the desktop
   grid-area assignments so every block (Key Partners, Key Activities,
   …, Cost Structure, Revenue Streams) appears in document order, top
   to bottom. Right borders are dropped since blocks no longer have a
   side neighbour. The coherence + tension rows now live outside the
   grid in .fw-canvas-summary, but their 70px/1fr columns still need
   collapsing here. */
@media (max-width: 600px) {
  .fw-canvas-9 {
    display: flex;
    flex-direction: column;
  }
  .fw-canvas-9 .fw-canvas-block { border-right: none; }
  .fw-canvas-9 .fw-canvas-block:last-of-type { border-bottom: none; }
  .fw-canvas-coherence,
  .fw-canvas-tension { grid-template-columns: auto 1fr; gap: 12px; }
}

@media print {
  .fw-canvas-9         { break-inside: auto; }
  .fw-canvas-block     { break-inside: avoid; }
  .fw-canvas-summary   { break-inside: avoid; }
}

/* Business Plan — BMC starts on a fresh page (full-page glance intent).
   break-inside: auto on the grid lets it flow naturally once anchored at
   the top of a page; per-block break-inside: avoid above still prevents
   individual cells from splitting mid-content. */
@media print {
  .rpt-card-stack[data-product="business-plan"] #business_model_canvas {
    break-before: page;
  }
  .rpt-card-stack[data-product="business-plan"] .fw-canvas-9 {
    break-inside: auto;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   ASSESSMENT — RATING CARD
   Displays a dimension rating (Strong / Developing / Needs attention)
   with observation text and evidence quote.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-rating-card {
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-5) var(--spacing-5);
  background: var(--report-white);
}

.fw-rating-card.fw-rating-placeholder {
  background: transparent;
}

.fw-rating-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-1);
}

/* Heading badge — black text with a coloured bullet to the left.
   Bullet hue maps to the rating tier:
     Strong          → mint   (var(--band-strong))
     Developing      → amber  (var(--band-solid))
     Needs attention → pink   (var(--cyan), reserved for risk signals) */
.fw-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: 16px;
  font-weight: 500;
  color: var(--report-ink);
  white-space: nowrap;
}

.fw-rating-badge::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--report-ink);
}

.fw-rating-badge--strong::before          { background: var(--band-strong); }
.fw-rating-badge--developing::before      { background: var(--band-solid); }
.fw-rating-badge--needs-attention::before { background: var(--cyan); }

.fw-rating-observation {
  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);
}

.fw-rating-evidence {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  font-style: italic;
  line-height: 1.6;
  color: var(--report-ink);
}

@media print {
  .fw-rating-card { break-inside: avoid; }
}


/* ───────────────────────────────────────────────────────────────────────────
   ASSESSMENT — EVIDENCE LIST
   Shared layout for strengths, development areas, and blind spots.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-evidence-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.fw-evidence-item {
  border: none;
  border-radius: 0;
  padding: var(--spacing-2) 0;
  background: none;
}

.fw-evidence-item--hl {
}

.fw-evidence-item--hl .fw-evidence-name {
  color: var(--report-ink);
}

.fw-evidence-item--dev {
}

.fw-evidence-item--blind {
}

.fw-evidence-name {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  line-height: 1.4;
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
}

.fw-respondent-detail .fw-evidence-name {
  font-weight: var(--t-body-wt);
  text-decoration: underline;
}

.fw-evidence-quote {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  color: var(--report-ink);
}

.fw-evidence-why {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  font-style: italic;
  line-height: 1.6;
  color: var(--report-ink);
  margin-top: var(--spacing-3);
}

@media print {
  .fw-evidence-item { break-inside: avoid; }
}


/* ───────────────────────────────────────────────────────────────────────────
   ASSESSMENT — INTELLIGENCE BRIEF
   Numbered list of key findings with headline + body.
   ─────────────────────────────────────────────────────────────────────────── */

.fw-intel-brief {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fw-intel-item {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--report-border);
}

.fw-intel-item:first-child {
  border-top: 1px solid var(--report-border);
}

.fw-intel-num {
  flex-shrink: 0;
  width: 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--report-ink);
}

.fw-intel-content {
  flex: 1;
  min-width: 0;
}

.fw-intel-headline {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  line-height: 1.4;
  color: var(--report-ink);
  margin-bottom: var(--spacing-3);
}

.fw-intel-body {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  color: var(--report-ink);
}

@media print {
  .fw-intel-item { break-inside: avoid; }
}

.radar-chart-component {
  width: 100%;
  overflow: hidden;
}

.radar-chart-svg {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Radar chart (radar-*) — restyled to match the A4 assessment-radar
   T1 family: thin band-spectrum edges, band-coloured vertex dots,
   radial band wash. Pink/black hardcodes removed in favour of the
   canonical band ladder. */
/* Spider grid + axis spokes: --report-ink-20 is not a defined token,
   so we mix the canonical report-ink at 20 % against transparent. This
   keeps the lines visibly faint without inventing a new colour. */
.radar-grid-ring {
  fill: none;
  stroke: var(--chart-gridline); /* was ink @20% — unified gridline token */
  stroke-width: 0.5;
  stroke-dasharray: 4 3;
}

.radar-axis-line {
  stroke: var(--chart-gridline); /* was ink @20% — unified gridline token */
  stroke-width: 0.5;
}

/* Your-organization polygon — solid cyan edge, no fill. Christine,
   1 June 2026. Was: fill url(#radar-wash) (a gradient never defined in
   this template, so it rendered as no fill) + stroke none. */
.radar-area--hl {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 1;
}

/* Industry-leader overlay — dashed 1px purple outline. Christine,
   1 June 2026. Was: stroke var(--report-ink-60), stroke-width 0.75. */
.radar-area--secondary {
  fill: none;
  stroke: var(--purple);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* Vertex dots. Base = Industry-leader (secondary) dots in purple;
   the .radar-dot--hl rule below overrides Your-organization dots to
   cyan. Base is declared FIRST so the equal-specificity --hl rule
   wins by source order for dots carrying both classes. Christine,
   1 June 2026. Was: base fill var(--report-ink), --hl halo only. */
.radar-dot {
  fill: var(--purple);
  r: 3;
}

.radar-dot--hl {
  fill: var(--cyan);
  stroke: var(--white);
  stroke-width: 1.5;
  r: 3;
}

.radar-label-text {
  font-size: 11px;
  fill: var(--report-ink);
  font-family: var(--font-body);
}

.radar-legend {
  display: flex;
  gap: var(--spacing-4);
  justify-content: center;
  /* 20px breathing room above the legend. Christine, 1 June 2026.
     Was: -30px (legend was pulled up into the chart's whitespace). */
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

.radar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--t-body);
  color: var(--report-ink);
}

.radar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Your-organization legend swatch — solid cyan to match the chart line
   + dots. Christine, 1 June 2026. Was: var(--band-strong). */
.radar-legend-dot--primary {
  background: var(--cyan);
}

/* Industry-leader legend swatch — dashed purple ring mirroring the
   dashed purple chart line. Christine, 1 June 2026.
   Was: 1.5px dashed var(--report-ink-60). */
.radar-legend-dot--secondary {
  background: none;
  border: 1.5px dashed var(--purple);
}

.radar-scores {
  margin-top: var(--spacing-3);
  width: 100%;
}

.radar-score-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-2) var(--spacing-2);
  border-bottom: 1px solid var(--report-border);
}

.radar-score-row:last-child {
  border-bottom: none;
}

.radar-score-row--head {
  align-items: flex-end;
  gap: var(--spacing-8);
  border-bottom: 2px solid var(--report-border);
}

/* The empty name-column spacer must reserve its 180px so header cells align
   with the data columns below. Use visibility:hidden (not display:none) so the
   space is held but no content shows. */
.radar-score-row--head .radar-score-name {
  visibility: hidden;
}

.radar-score-name {
  flex: 0 0 180px;
  font-size: var(--t-body);
  color: var(--report-ink-80);
}

/* Dataset header cells — neutral ink, bold, with coloured dot swatch below text */
.radar-score-ds-head {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--report-ink);
  text-align: center;
}

.radar-score-swatch {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.radar-score-you {
  flex: 1;
  display: flex;
  justify-content: center;
  font-size: var(--t-body);
  font-weight: var(--t-body-wt);
  color: var(--report-ink-80);
}

@media (max-width: 767px) {
  .radar-score-row--head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }
  /* Empty name spacer is only needed for desktop column alignment — hide on mobile. */
  .radar-score-row--head .radar-score-name {
    display: none;
  }
  .radar-score-ds-head {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  /* Score table — fixed 180px name column + 32px gaps overflows mobile.
     Shrink the name col, tighten gaps, drop font to caption. */
  .radar-score-row {
    gap: var(--spacing-2);
  }
  .radar-score-name {
    flex: 0 0 80px;
    font-size: var(--t-caption);
    min-width: 0;
  }
  .radar-score-ds-head,
  .radar-score-you {
    font-size: var(--t-caption);
    min-width: 0;
  }
}

.fw-respondent-card {
  border: 1px solid var(--report-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
  overflow: hidden;
}

.fw-respondent-card[open] {
  border-color: color-mix(in srgb, var(--report-ink) 20%, transparent);
}

.fw-respondent-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  cursor: pointer;
  list-style: none;
  background: var(--report-surface);
}

.fw-respondent-summary::-webkit-details-marker {
  display: none;
}

/* Christine, 2 June 2026: respondent rows use a per-role colour dot
   (replaces the arrow2.svg marker, which read oddly). The hue comes
   from the --resp-dot custom property set per row in
   assessment-facilitator.html, keyed to the respondent group-identity
   colours; falls back to a neutral ink dot for unmapped roles. */
.fw-respondent-summary::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--resp-dot, var(--report-ink-35));
}

.fw-respondent-role {
  font-weight: var(--t-heading-wt);
  color: var(--report-ink-80);
  font-size: var(--t-heading);
}

.fw-respondent-headline {
  font-size: var(--t-body);
  font-weight: 400;
  font-style: italic;
  color: var(--report-ink);
  flex: 1;
}

/* Strip default list bullets/markers inside the expanded respondent
   detail so prose lists read as plain indented paragraphs. ── */
.fw-respondent-detail ul,
.fw-respondent-detail ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.fw-respondent-detail li {
  list-style: none;
  margin-left: 0;
}
.fw-respondent-detail li::marker {
  content: '';
}

.fw-respondent-detail {
  padding: 0 var(--spacing-3) var(--spacing-4) calc(var(--spacing-3) + 1em + var(--spacing-3));
}

@media print {
  .fw-respondent-card { break-inside: avoid; }
  .fw-respondent-card[open] .fw-respondent-detail { display: block; }
  .radar-chart-component { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT GAUGE — Semi-circular score gauge
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-gauge {
  /* Centred block at 80% width so the caption text (label + context) runs to
     80% rather than being trapped in the gauge graphic's box — Christine,
     1 June 2026. The gauge GRAPHIC itself stays at its design size via an
     explicit px width on .ag-gauge-svg (the SVG carries only a viewBox, no
     width attr, so a % basis collapses in print — keep px on the graphic). */
  display: block;
  width: 80%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.ag-gauge-svg {
  width: 320px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ag-arc-bg {
  stroke: var(--report-ink-10);
  stroke-width: 18;
  stroke-linecap: round;
}

.ag-arc-fill {
  stroke-width: 18;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

/* 5-band score colours — solid band-colour stroke at full opacity
   (Christine, 1 June 2026). Was: 50% band-colour mix with transparent. */
.ag-arc--excellent  { stroke: var(--band-excellent); }
.ag-arc--strong     { stroke: var(--band-strong); }
.ag-arc--solid      { stroke: var(--band-solid); }
.ag-arc--developing { stroke: var(--band-developing); }
.ag-arc--emerging   { stroke: var(--band-emerging); }

/* Legacy 3-band aliases kept for any external consumer that still
   passes high/mid/low — mapped onto the new band trio. */
.ag-arc--high { stroke: var(--band-strong); }
.ag-arc--mid  { stroke: var(--band-solid); }
.ag-arc--low  { stroke: var(--band-developing); }

.ag-tick {
  stroke: var(--report-ink-10);
  stroke-width: 1;
}

.ag-pointer {
  display: none;
}

.ag-score-text {
  font-family: var(--font-body);
  font-size: 54px;
  font-weight: var(--chart-name-hl-wt);
  fill: var(--navy);
}

.ag-max-text {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  fill: var(--report-ink-60);
}

.ag-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink);
  margin-top: var(--spacing-2);
}

.ag-context {
  font-size: var(--t-body);
  color: var(--report-ink);
  font-weight: var(--font-weight-light);
  margin-top: var(--spacing-1);
}

@media print { .ag-gauge { break-inside: avoid; } }

/* Assessment-gauge stacked layout — Christine 1 June 2026 (report 581 §8).
   Pairs with the dedicated `assessment-gauge` branch in research-report.html:
   the figure heading + the paragraph directly above the gauge run full width
   (as section-level siblings), then THIS row holds the gauge CENTRED in a left
   column with ONLY the next paragraph beside it; the closing paragraph(s) sit
   full width beneath the row. Supersedes the "Gauge float" block below for the
   default / null layout (a gauge no longer reaches that .rpt-para-chart path);
   that block now only matters to any non-template consumer that still emits the
   old float DOM, so it is kept intact (non-destructive). */
.rpt-gauge-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  margin: var(--spacing-6) 0;
}
.rpt-gauge-row > .mi-figure {
  /* Drop the framed-figure chrome and centre the gauge in its column. */
  margin: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
  display: flex;
  justify-content: center;
}
.rpt-gauge-aside { min-width: 0; }
.rpt-gauge-aside .rpt-para-body:first-child { margin-top: 0; }

@media screen and (min-width: 900px) {
  /* Two columns on wide screens: centred gauge | the single adjacent paragraph. */
  .rpt-gauge-row {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
  /* Align the adjacent paragraph to the BOTTOM of the row (its baseline sits with
     the gauge's caption block) rather than the top. Christine, 1 June 2026.
     Was: paragraph top-aligned via the row's align-items:start. */
  .rpt-gauge-aside { align-self: end; }
  /* Neutralise the default-path gauge float chrome in case :has() still matches
     the figure inside this grid (float has no effect on a grid item, but the
     width:50% / margins from the "Gauge float" block below would). */
  .rpt-gauge-row > .mi-figure:has(> .ag-gauge) {
    float: none;
    width: auto;
    margin: 0;
  }
}

/* Gauge float — REMOVED Christine 1 June 2026 (reverted per Christine
   1 June 2026). Gauge now goes full-width single-column; the rpt-gauge-row
   2-col branch in research-report.html is also gone. */


/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT DIMENSION BARS — Weighted dimension bars with score
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── A2 Dimension Bars ─────────────────────────────────────
   Thin band-coloured score bar matching the T1 sv-dim-row
   aesthetic (4px track, no border, 5-band fill ladder).
   Weight is preserved as a smaller secondary bar so the
   weighted-dimension story still reads. */
.adb-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.adb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(70px, 105px);
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
}

.adb-label {
  font-size: 14.5px;
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
}

.adb-row--hl .adb-label {
  font-weight: 500;
}

/* Christine, 1 June 2026: in a "Country: dimension" label, emphasise the country
   (500) and lighten the dimension description (300). These child weights win over
   .adb-label / .adb-row--hl, so highlighted and normal rows read identically.
   Labels with no colon render whole (unchanged) — see assessment-dimension-bars.html. */
.adb-country { font-weight: 500; }
.adb-desc    { font-weight: 300; }

.adb-weight-chip {
  margin-left: 8px;
  font-size: 11px;
  color: var(--report-ink-60);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.02em;
}

.adb-score {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  font-size: 13px;
  color: var(--gray-mid);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.adb-score b {
  font-weight: 600;
  color: var(--report-ink);
}

.adb-bars {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adb-bar-track {
  height: 14px;
  background: transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.adb-bar-weight {
  display: none;
}

.adb-bar-score {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 0;
  z-index: 1;
}

/* 5-band score-fill ladder — linear left→right gradient, opaque (no gray bleed).
   Start = near-white tint, end = full (or near-full) band colour. Christine, 3 June 2026. */
.adb-bar--excellent  { background: linear-gradient(to right, color-mix(in srgb, var(--band-excellent)  3%, var(--report-white)), var(--band-excellent)); }
.adb-bar--strong     { background: linear-gradient(to right, color-mix(in srgb, var(--band-strong)     3%, var(--report-white)), var(--band-strong)); }
.adb-bar--solid      { background: linear-gradient(to right, color-mix(in srgb, var(--band-solid)      6%, var(--report-white)), var(--band-solid)); }
.adb-bar--developing { background: linear-gradient(to right, color-mix(in srgb, var(--band-developing) 3%, var(--report-white)), color-mix(in srgb, var(--band-developing) 90%, var(--report-white))); }
.adb-bar--emerging   { background: linear-gradient(to right, color-mix(in srgb, var(--pink)            3%, var(--report-white)), color-mix(in srgb, var(--pink)            85%, var(--report-white))); }

/* Legacy 3-band aliases mapped onto the new ladder. */
.adb-bar--high { background: linear-gradient(to right, color-mix(in srgb, var(--band-strong)     3%, var(--report-white)), var(--band-strong)); }
.adb-bar--mid  { background: linear-gradient(to right, color-mix(in srgb, var(--band-solid)      6%, var(--report-white)), var(--band-solid)); }
.adb-bar--low  { background: linear-gradient(to right, color-mix(in srgb, var(--band-developing) 3%, var(--report-white)), color-mix(in srgb, var(--band-developing) 90%, var(--report-white))); }

/* Per-row kicker ramp — used instead of the score-band ladder when
   dimensions carry weights (weighted-breakdown story), so adjacent bars
   read as distinct even when their scores land in the same band. Same
   light-to-full gradient recipe as the band classes above; mirrors the
   fw-omr-cost-chart kicker cycle. Christine, 4 Jul 2026. */
.adb-bar--kicker1  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker01) 3%, var(--report-white)), var(--kicker01)); }
.adb-bar--kicker2  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker02) 3%, var(--report-white)), var(--kicker02)); }
.adb-bar--kicker3  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker03) 3%, var(--report-white)), var(--kicker03)); }
.adb-bar--kicker4  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker04) 3%, var(--report-white)), var(--kicker04)); }
.adb-bar--kicker5  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker05) 3%, var(--report-white)), var(--kicker05)); }
.adb-bar--kicker6  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker06) 3%, var(--report-white)), var(--kicker06)); }
.adb-bar--kicker7  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker07) 3%, var(--report-white)), var(--kicker07)); }
.adb-bar--kicker8  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker08) 3%, var(--report-white)), var(--kicker08)); }
.adb-bar--kicker9  { background: linear-gradient(to right, color-mix(in srgb, var(--kicker09) 3%, var(--report-white)), var(--kicker09)); }
.adb-bar--kicker10 { background: linear-gradient(to right, color-mix(in srgb, var(--kicker10) 3%, var(--report-white)), var(--kicker10)); }
.adb-bar--kicker11 { background: linear-gradient(to right, color-mix(in srgb, var(--kicker11) 3%, var(--report-white)), var(--kicker11)); }
.adb-bar--kicker12 { background: linear-gradient(to right, color-mix(in srgb, var(--kicker12) 3%, var(--report-white)), var(--kicker12)); }
.adb-bar--kicker13 { background: linear-gradient(to right, color-mix(in srgb, var(--kicker13) 3%, var(--report-white)), var(--kicker13)); }
.adb-bar--kicker14 { background: linear-gradient(to right, color-mix(in srgb, var(--kicker14) 3%, var(--report-white)), var(--kicker14)); }
.adb-bar--kicker15 { background: linear-gradient(to right, color-mix(in srgb, var(--kicker15) 3%, var(--report-white)), var(--kicker15)); }
.adb-bar--kicker16 { background: linear-gradient(to right, color-mix(in srgb, var(--kicker16) 3%, var(--report-white)), var(--kicker16)); }

.adb-legend {
  display: flex;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.adb-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--t-small);
  color: var(--report-ink-60);
}

.adb-legend-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
}

/* Match the weight fill bar (gray-light). Christine, 1 June 2026.
   Was: background var(--report-ink-15, rgba(0,0,0,0.12)). */
.adb-legend--weight { background: var(--gray-light); }
.adb-legend--score  { background: var(--band-strong); }

@media print { .adb-container { break-inside: avoid; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT SCORE CARDS — Grid of person cards for facilitator view
   ═══════════════════════════════════════════════════════════════════════════ */
.asc-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.asc-card {
  /* Christine 2 Jun 2026: the four scorecards float bare on the canvas
     (section paint stripped via .mi-section--bare) — white fill + the soft
     section shadow, no border, so each reads as its own elevated surface
     like every other report card. Matches .mi-stat-card floating chrome. */
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-section);
  padding: var(--spacing-4);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-5);
}

.asc-card-left {
  flex: 0 0 160px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.asc-card-right {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}

.asc-card--hl {
}

.asc-badge-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-3);
}

.asc-badge-svg {
  width: 100%;
  height: 100%;
}

.asc-badge-bg {
  fill: none;
  stroke: var(--report-ink-10);
  stroke-width: 8;
}

.asc-badge-ring {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

/* Score-card ring — canonical 5-band ladder. Slug names match
   RatingBand.css_slug from scoring_rubrics.py (single source of
   truth). Each ring colour pulls from the canonical
   --band-{slug}-border token in tokens/colors.css — no literal
   colour values here. */
.asc-ring--excellent  { stroke: var(--band-excellent); }
.asc-ring--strong     { stroke: var(--band-strong); }
.asc-ring--solid      { stroke: var(--band-solid); }
.asc-ring--developing { stroke: var(--band-developing); }
.asc-ring--emerging   { stroke: var(--band-emerging); }

.asc-badge-score {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  fill: var(--report-ink);
}

.asc-role {
  font-size: var(--t-body);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink);
  margin-bottom: var(--spacing-1);
}

.asc-rating {
  margin-bottom: var(--spacing-1);
}

.asc-stars-svg {
  display: inline-block;
  width: 80px;
  height: 16px;
  vertical-align: middle;
}

.asc-rating-num {
  font-size: 11px;
  color: var(--report-ink);
  margin-left: var(--spacing-1);
}

.asc-respondents {
  font-size: 11px;
  color: var(--report-ink);
  margin-bottom: var(--spacing-1);
}

.asc-signals {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  align-items: flex-start;
  margin-top: var(--spacing-4);
}

.asc-signal {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-2);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.asc-signal-icon {
  font-size: 20px;
  font-weight: 600;
}

.asc-signal--pos {
  background: transparent;
  color: var(--report-ink);
}

.asc-signal--neg {
  background: transparent;
  color: var(--report-ink);
}

@media print { .asc-card { break-inside: avoid; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT HIGHLIGHTS — Thumbs up/down cards
   ═══════════════════════════════════════════════════════════════════════════ */
.ahl-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

.ahl-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ahl-card {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-sm);
  background: var(--report-bg-card);
}

.ahl-card--pos {
  background: var(--report-bg-card);
}

.ahl-card--neg {
  background: var(--report-bg-card);
}

.ahl-icon {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  flex-shrink: 0;
}

.ahl-text {
  font-size: 16px;
  color: var(--report-ink);
  font-weight: 300;
  line-height: 1.8;
}

/* Mobile: collapse the two-column positives/negatives layout into a
   single column. All positive cards stack first (in document order),
   followed by all negative cards. */
@media (max-width: 600px) {
  .ahl-container { grid-template-columns: 1fr; }
}

@media print { .ahl-card { break-inside: avoid; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT RADAR — Comparison radar chart with benchmark overlay
   ═══════════════════════════════════════════════════════════════════════════ */
.ar-container {
  max-width: 100%;
  margin: 0 auto;
}

/* Group Profile radar (assessment-facilitator #f-radar) — gets a
   wider canvas so the multi-line dimension labels have room, and
   drops the top/bottom figure rules so the chart sits clean on the
   page without competing dividers. Scoped to #f-radar so individual
   subject_ref radars elsewhere keep their existing chrome. */
/* Left-aligned, not centred: the radar sits at the left edge of the figure
   (Christine flagged the big left gutter the centred max-width left behind).
   Narrower cap so the radar shares the row with the score matrix on wide
   screens. Christine, 2 June 2026. Was: max-width 720px; margin 0 auto. */
#f-radar .ar-container { max-width: 460px; margin: 0; }
#f-radar .mi-figure {
  border-top: none;
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
}
/* Dashed radar grid (rings + spokes) for the Group Profile, scoped to
   #f-radar so other radars keep their solid grid. Christine, 2 June 2026. */
#f-radar .ar-grid-ring,
#f-radar .ar-axis {
  stroke-dasharray: 2 3;
  /* Darker than the faint global --chart-gridline (28% ink) so the dashed
     grid reads more clearly on the Group Profile. Christine, 2 June 2026. */
  stroke: color-mix(in srgb, var(--report-ink) 45%, transparent);
}

/* Radar float — REMOVED Christine 1 June 2026 (reverted per Christine
   1 June 2026). Radar now goes full-width single-column; the rpt-radar-row
   2-col branch in research-report.html is also gone. Both floats (gauge +
   radar) are killed so they never accidentally re-engage if a figure lands
   as a direct .mi-section child via another path. */

/* Assessment-radar 2-col row — Christine 1 June 2026 (report 572 §7).
   Mirrors .rpt-gauge-row: the radar sits CENTRED in a left column and the
   following narrative fills a right column that aligns to the BOTTOM of the
   row. Used by the dedicated assessment-radar branch in research-report.html
   for the non-split path (where the screen-only "Radar float" above never
   engaged — the nested figure is not a direct child of .mi-section). The
   rpt-chart-insight split radars are untouched. */
.rpt-radar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  margin: var(--spacing-6) 0;
}
.rpt-radar-row > .mi-figure {
  /* Drop the framed-figure chrome; .ar-container (margin: 0 auto) centres the
     radar within the column. */
  margin: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
}
.rpt-radar-aside { min-width: 0; }
.rpt-radar-aside .rpt-para-body:first-child { margin-top: 0; }

@media screen and (min-width: 900px) {
  /* Two columns on wide screens: centred radar | the following narrative. */
  .rpt-radar-row {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
  /* Narrative aligns to the BOTTOM of the row, beside the radar. */
  .rpt-radar-aside { align-self: end; }
}

.ar-svg {
  width: 100%;
  height: auto;
  display: block;
}

.ar-grid-ring {
  fill: none;
  stroke: var(--chart-gridline); /* was raw rgba(0,0,0,0.15) — unified gridline token */
  stroke-width: 0.5;
}

.ar-axis {
  stroke: var(--chart-gridline); /* was raw rgba(0,0,0,0.15) — unified gridline token */
  stroke-width: 0.5;
}

.ar-area--hl {
  fill: url(#ar-gradient);
  stroke: var(--cyan);
  stroke-width: 2.5;
  opacity: 0.7;
}

.ar-area--bench {
  fill: none;
  /* Benchmark envelope is brand purple to match the live (template-inlined)
     benchmark stroke and the legend dot. Christine, 1 June 2026.
     Was: stroke var(--report-ink). */
  stroke: var(--purple);
  stroke-width: 0.75;
  stroke-dasharray: 6 3;
  opacity: 0.8;
}

.ar-dot {
  fill: var(--cyan);
}

.ar-label {
  font-size: 11px;
  fill: var(--report-ink);
  font-family: var(--font-body);
}
/* Numbered axis label — the dimension ordinal (1, 2, 3…) printed on the radar
   axis for the radar-beside-bars assessment card, matching the numbered bar
   list. Slightly larger + heavier than the wordy .ar-label so single digits
   read clearly at the radar's compact size. Christine, 2 June 2026. */
.ar-label--num {
  font-size: 13px;
  font-weight: 600;
  fill: var(--gray-dark);
}

/* Per-vertex numeric score printed just outside each primary dot
   (assessment-radar subject / subject_ref). The white stroke under the fill
   (paint-order: stroke) gives the digits a halo so they stay legible where they
   sit over the gradient wash, rings, or polygon edge. Christine, 1 June 2026. */
.ar-value {
  font-size: 10px;
  font-weight: 600;
  fill: var(--report-ink);
  font-family: var(--font-body);
  paint-order: stroke;
  stroke: var(--report-white);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* HTML overlay labels for the behavioural-shape radar.
   Container `.ar-container--labelled` is the positioning context;
   each `.ar-label-html` is positioned absolutely using `left/top`
   percentages computed from the SVG viewBox so the labels track
   the axis end-points as the SVG scales. `transform` shifts the
   label box so the axis end-point sits at the inner edge of the
   text (left-side labels grow leftwards, right-side grow rightwards,
   top/bottom centre on the axis). A fixed `width` gives every label
   room to wrap onto 2+ lines without re-flowing the chart. */
.ar-container--labelled {
  position: relative;
}
.ar-label-html {
  position: absolute;
  width: 130px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--report-ink);
  font-family: var(--font-body);
  word-wrap: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
}
/* Centre-aligned labels (top/bottom of the radar) sit centred on
   the axis end-point. */
.ar-label-html--center {
  text-align: center;
  transform: translate(-50%, -50%);
}
/* Right-side labels grow to the RIGHT of the axis end-point. */
.ar-label-html--left {
  text-align: left;
  transform: translate(0, -50%);
}
/* Left-side labels grow to the LEFT of the axis end-point. */
.ar-label-html--right {
  text-align: right;
  transform: translate(-100%, -50%);
}

.ar-legend {
  display: flex;
  gap: var(--spacing-4);
  justify-content: center;
  margin-top: -30px;
  position: relative;
  z-index: 1;
}

.ar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--t-small);
  color: var(--report-ink);
}

.ar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ar-legend-dot--hl { background: var(--cyan); }
.ar-legend-dot--bench {
  background: none;
  border: 1.5px dashed var(--report-ink);
}
/* Subject+reference radars only: the benchmark legend dot border goes
   brand purple to match the purple benchmark envelope on the chart.
   Scoped to .ar-legend--ref so the perspective-overlay legend (which
   reuses .ar-legend-dot--bench for non-hl groups) keeps its neutral
   border. Christine, 1 June 2026. */
.ar-legend--ref .ar-legend-dot--bench {
  border-color: var(--purple);
}

/* Average-score readout under the subject / subject_ref radar legend.
   One headline number, always out of 10 (see assessment-radar.html).
   .ar-avg-num is the focal point — larger, bold, and black; the unit +
   label stay muted. Christine, 2 June 2026. Was: number tinted inline with
   the polygon's average colour at --card-value-size/--card-value-weight. */
.ar-avg {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}
.ar-avg-num {
  font-size: calc(var(--card-value-size) * 1.35);
  font-weight: 700;
  line-height: 1;
  color: var(--report-ink);
}
.ar-avg-unit {
  font-size: var(--t-small);
  font-weight: 500;
  /* Plain gray so the "/10" unit recedes behind the tinted score number.
     Christine, 2 June 2026. Was: var(--report-ink-60). */
  color: var(--gray-mid);
}
.ar-avg-label {
  font-size: var(--t-small);
  color: var(--report-ink-60);
}

/* Group Profile (#f-radar) — radar (with its average-score readout beneath)
   on the LEFT, the dimension × series score matrix on the RIGHT. Left-aligned
   so the section fills from the left edge rather than floating centred.
   Stacks vertically on narrow screens. Christine, 2 June 2026.
   (Was: a radar | average | legend three-column layout; the legend is now the
   matrix's colour-keyed header.) */
.gr-matrix-wrap {
  margin-top: var(--spacing-6);
  overflow-x: auto;
}
.gr-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.gr-matrix th,
.gr-matrix td {
  padding: var(--spacing-2) var(--spacing-3);
  text-align: right;
  vertical-align: bottom;
}
.gr-matrix th.gr-matrix-dim,
.gr-matrix td.gr-matrix-dim {
  text-align: left;
}
.gr-matrix thead th {
  border-bottom: 1px solid var(--report-border);
}
.gr-matrix-corner {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--report-ink-60);
}
.gr-matrix-key {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--report-ink);
}
.gr-matrix-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.gr-matrix-avg {
  display: block;
  margin-top: 2px;
  font-size: var(--t-small);
  font-weight: 600;
  /* Neutral ink, not the series colour — only the header dot carries the
     colour key now. Christine, 2 June 2026. */
  color: var(--report-ink);
}
.gr-matrix tbody td {
  font-size: var(--t-small);
  color: var(--report-ink);
  vertical-align: middle;
}
.gr-matrix tbody tr + tr td {
  border-top: 1px solid var(--report-border);
}
.gr-matrix tbody td.gr-matrix-cell {
  font-variant-numeric: tabular-nums;
}

@media screen and (min-width: 900px) {
  /* Radar + score-matrix row (the team-dynamics "Group Profile" format): the
     radar (with its average-score readout beneath) on the LEFT, the
     dimension × series matrix on the RIGHT. Scoped to .ar-figure--matrix
     (emitted by the assessment-radar component for the subject / subject_ref
     variants) so overlay / legend-only radars keep their centred single-column
     layout. Christine, 2 June 2026. Was: #f-radar .mi-figure, before the matrix
     moved into the assessment-radar component so all report radars share it. */
  .ar-figure--matrix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-8);
  }
  .ar-figure--matrix .ar-container { flex: 0 0 420px; max-width: 460px; margin: 0; }
  .ar-figure--matrix .gr-matrix-wrap { flex: 1 1 auto; min-width: 0; margin-top: 0; }
}

@media print {
  .ar-container { break-inside: avoid; }
  /* Force a page break between the radar SVG and the legend so the chart
     stays on one page and the legend opens the next. Christine 12 Jun 2026. */
  .ar-legend { break-before: page; }
  /* radar-chart-component: no print scale applied (full size). */
}

/* Perspective-overlay toggle: when ar-radar-toggle.js wires up the
   legend chips, it adds .ar-legend-item--toggleable to each chip.
   The CSS below provides the affordance (cursor + hover + focus +
   dimmed-when-off state) and hides the matching .po-group-layer
   group when toggled off. Scoped to the --toggleable modifier so
   non-overlay radar variants (subject, subject_ref) keep their
   static-legend treatment. */
.ar-legend-item--toggleable {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s ease;
}
.ar-legend-item--toggleable:hover { opacity: 0.75; }
.ar-legend-item--toggleable:focus-visible {
  outline: 2px solid var(--band-self-text);
  outline-offset: 2px;
  border-radius: 3px;
}
.ar-legend-item--toggleable.is-hidden {
  opacity: 0.4;
}
.ar-legend-item--toggleable.is-hidden .ar-legend-dot {
  background: var(--gray-mid) !important;
}
.po-group-layer.is-hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT BENCHMARK BARS — Score bars with benchmark tick overlay
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── A3 Benchmark Bars ─────────────────────────────────────
   Thin band-coloured score bar matching the T1 sv-dim-row
   aesthetic, with a benchmark tick overlaid on the same
   track. Score colour follows the 5-band ladder; the tick
   is rendered as a tall ink notch so it still reads against
   a 4px bar. */
.abb-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.abb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(70px, 105px);
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
}

.abb-label {
  font-size: 14.5px;
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
}

.abb-row--hl .abb-label {
  font-weight: 500;
}

.abb-score {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  font-size: 13px;
  color: var(--gray-mid);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.abb-score b { font-weight: 600; color: var(--report-ink); }

.abb-bar-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abb-bar-track {
  height: 14px;
  background: var(--gray-light);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.abb-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 0;
  z-index: 1;
}

/* 5-band score fill — linear left→right gradient, opaque (no gray bleed).
   Start = near-white tint, end = full (or near-full) band colour. Christine, 3 June 2026. */
.abb-bar--excellent  { background: linear-gradient(to right, color-mix(in srgb, var(--band-excellent)  3%, var(--report-white)), var(--band-excellent)); }
.abb-bar--strong     { background: linear-gradient(to right, color-mix(in srgb, var(--band-strong)     3%, var(--report-white)), var(--band-strong)); }
.abb-bar--solid      { background: linear-gradient(to right, color-mix(in srgb, var(--band-solid)      6%, var(--report-white)), var(--band-solid)); }
.abb-bar--developing { background: linear-gradient(to right, color-mix(in srgb, var(--band-developing) 3%, var(--report-white)), color-mix(in srgb, var(--band-developing) 90%, var(--report-white))); }
.abb-bar--emerging   { background: linear-gradient(to right, color-mix(in srgb, var(--pink)            3%, var(--report-white)), color-mix(in srgb, var(--pink)            85%, var(--report-white))); }

/* Legacy above/near/below aliases kept so older data shapes
   still render — mapped onto strong / solid / developing. */
.abb-bar--above { background: linear-gradient(to right, color-mix(in srgb, var(--band-strong)     3%, var(--report-white)), var(--band-strong)); }
.abb-bar--near  { background: linear-gradient(to right, color-mix(in srgb, var(--band-solid)      6%, var(--report-white)), var(--band-solid)); }
.abb-bar--below { background: linear-gradient(to right, color-mix(in srgb, var(--band-developing) 3%, var(--report-white)), color-mix(in srgb, var(--band-developing) 90%, var(--report-white))); }

.abb-benchmark-tick {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--report-ink);
  border-radius: 1px;
  transform: translateX(-50%);
}

.abb-bench-connector {
  position: absolute;
  top: 50%;
  height: 0;
  border-top: 1px dashed var(--report-ink-60, rgba(0,0,0,0.45));
  transform: translateY(-50%);
}

.abb-score-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.abb-score-val {
  font-size: var(--t-body);
  font-weight: var(--font-weight-semibold);
  color: var(--report-ink);
}

.abb-bench-val {
  font-size: 11px;
  color: var(--report-ink-60);
}

.abb-legend {
  display: flex;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.abb-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--t-small);
  color: var(--report-ink-60);
}

.abb-legend-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
}

.abb-legend--fill { background: var(--band-strong); }

.abb-legend-line {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--report-ink);
  border-radius: 1px;
}

@media print { .abb-container { break-inside: avoid; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT HEATMAP GRID — Respondents × dimensions colour grid
   ═══════════════════════════════════════════════════════════════════════════ */
.ahm-container {
  margin: 0 auto;
}

.ahm-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: turn the heatmap into a horizontal carousel. The table is
   allowed to extend wider than the viewport — the user swipes left
   and right to bring more dimension columns into view. Snap-x stops
   the swipe at clean column boundaries, and a soft right-edge fade
   hints that there is more content off-screen. */
@media (max-width: 600px) {
  .ahm-container {
    position: relative;
  }
  .ahm-scroll {
    scroll-snap-type: x proximity;
    scroll-padding-left: 8px;
  }
  .ahm-scroll .ahm-table {
    width: max-content;
    min-width: 100%;
  }
  .ahm-scroll .ahm-dim-header,
  .ahm-scroll .ahm-cell {
    scroll-snap-align: start;
  }
  .ahm-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--white));
  }
}

.ahm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
}

.ahm-corner {
  min-width: 120px;
}

.ahm-dim-header {
  font-size: 14px;
  font-weight: 500;
  color: var(--report-ink);
  text-align: center;
  padding: var(--spacing-2) var(--spacing-2);
  min-width: 80px;
}

.ahm-row-label {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  padding: var(--spacing-2) var(--spacing-3);
  white-space: nowrap;
}

.ahm-row--hl .ahm-row-label {
  font-weight: var(--font-weight-semibold);
  color: var(--cyan);
}

.ahm-cell {
  text-align: center;
  padding: var(--spacing-2);
  border-radius: var(--radius-xs);
  font-size: var(--t-body);
  font-weight: 300;
  min-width: 48px;
}

/* Assessment heatmap cells — a single-hue CYAN intensity ladder (low → high =
   increasing alpha), so the grid reads as a true heatmap you can scan by
   magnitude rather than a rainbow of categorical band colours. Stepped by
   band so it still aligns to the canonical 5-band ladder. Reuses the SAME
   --heatmap-hue token (= cyan) and the SAME 8/16/28/45/65% stops as the
   gallery heat-map component (.mi-heatmap .heat-1…heat-5 in charts.css), so
   both heatmaps stay in lockstep. Slug names match RatingBand.css_slug from
   scoring_rubrics.py. Christine, 2 June 2026 — was the per-band -soft washes
   (violet/pink/yellow/cyan/green). The exact score still sits in every cell,
   so no legend is needed. */
.ahm-cell--emerging   { background: color-mix(in srgb, var(--heatmap-hue) 8%,  transparent); color: var(--report-ink); }
.ahm-cell--developing { background: color-mix(in srgb, var(--heatmap-hue) 16%, transparent); color: var(--report-ink); }
.ahm-cell--solid      { background: color-mix(in srgb, var(--heatmap-hue) 28%, transparent); color: var(--report-ink); }
.ahm-cell--strong     { background: color-mix(in srgb, var(--heatmap-hue) 45%, transparent); color: var(--report-ink); }
.ahm-cell--excellent  { background: color-mix(in srgb, var(--heatmap-hue) 65%, transparent); color: var(--report-ink); }

@media print {
  .ahm-container { break-inside: avoid; }
  .ahm-scroll { overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSESSMENT HONESTY STATEMENT — collapsible notice
   ═══════════════════════════════════════════════════════════════════════════ */
.ar-honesty-notice {
  border: 1px solid var(--report-ink);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-8);
}

.ar-honesty-summary {
  cursor: pointer;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--t-body);
  font-weight: var(--chart-name-wt);
  color: var(--report-ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.ar-honesty-summary::before {
  content: "▸";
  transition: transform 0.15s ease;
}

.ar-honesty-notice[open] .ar-honesty-summary::before {
  transform: rotate(90deg);
}

.ar-honesty-summary::-webkit-details-marker {
  display: none;
}

.ar-honesty-body {
  padding: 0 var(--spacing-4) var(--spacing-4) calc(var(--spacing-4) + var(--spacing-3));
  font-size: var(--t-body);
  color: var(--report-ink);
  font-weight: var(--t-body-wt);
  line-height: var(--t-body-lh);
}

.ar-honesty-body p {
  margin: 0;
}

@media print {
  .ar-honesty-notice { break-inside: avoid; }
  .ar-honesty-notice[open] .ar-honesty-body { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIM-V2 TOKEN FALLBACKS — the --sv-* aliases below are normally defined
   in the inline <style> block (_sim_v2_styles.html). On the chat page the
   guided/build/completion render paths run report HTML through DOMPurify,
   which strips that inline <style> — taking the --sv-* definitions with it
   and leaving the card-stack rules below (which consume var(--sv-card),
   var(--sv-rule), …) painting with no value (cards lose their fill/border,
   the cover loses its paint). Defining the same aliases here, in the always-
   loaded bundle, keeps the paint correct in every render path. Values MUST
   stay in lockstep with _sim_v2_styles.html — they alias canonical tokens
   (--white, --black, --gray-*, --band-*, --yellow, --cyan, --pink) already
   defined in colors.css. Only the custom properties are mirrored here, NOT
   the layout/typography on .sim-v2 (the .rpt-card-stack rules own those).
   ═══════════════════════════════════════════════════════════════════════ */
.sim-v2 {
  --sv-canvas: var(--off-white);
  --sv-card: var(--white);
  --sv-ink: var(--navy);
  --sv-ink-2: var(--ink-2);
  --sv-ink-3: var(--gray-mid);
  --sv-rule: var(--gray-light);
  --sv-rule-soft: var(--gray-white);
  --sv-tint-evidence: var(--surface-cool);
  --sv-tint-focus: var(--gray-light);
  --sv-tint-foundation: var(--surface-cool);
  /* Mint */
  --sv-mint:        var(--band-strong);
  --sv-mint-soft:   #ECFDF5;
  --sv-mint-text:   #0F7A5F;
  /* Amber */
  --sv-amber:       var(--yellow);
  --sv-amber-soft:  #FEF3C7;
  --sv-amber-text:  #8A6A2E;
  /* Blue */
  --sv-blue:        var(--insights-primary);
  --sv-blue-soft:   #E6F2FE;
  --sv-blue-text:   #1E5FA8;
  /* Pink — uses brand tokens (--cyan, --pink) from colors.css */
  --sv-pink:        var(--cyan);
  --sv-pink-soft:   #FFF2F8;
  --sv-pink-text:   var(--pink);
  /* Legacy aliases */
  --sv-hero:         var(--sv-blue);
  --sv-hero-soft:    var(--sv-blue-soft);
  --sv-blue-bright:  var(--sv-blue);
  --sv-mint-bright:  var(--sv-mint);
  --sv-amber-bright: var(--sv-amber);
  --sv-focus-rule:   #C9DEF4;
  /* Multi-attempt trajectory chart axis tokens */
  --sv-axis-grid: #EEF2F7;
  --sv-axis-tick: #CBD5E1;
  --sv-axis-label: #475569;
  --sv-axis-label-soft: #94A3B8;
  --sv-surface-on-color: #FFFFFF;
  --sv-ink-4: #B8C4D6;
  /* Multi-attempt pill */
  --sv-attempt-ink:    var(--sv-pink-text);
  --sv-attempt-bg:     var(--sv-pink-soft);
  --sv-attempt-border: var(--sv-pink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RPT CARD STACK — opt-in modifier that paints each .mi-section as a
   canonical .sv-card. Used by research-report, framework-report,
   assessment-facilitator and board-reporting; gated by the .rpt-card-stack
   class so no other template is affected. Cover (#p-cover) sits naked on
   the canvas to match T3 reference (subject-360.html).
   Christine: the canvas uses the SHARED page gradient
   (--report-page-gradient) — the exact same white→soft-gray fade the
   simulation reports show via .report-paginated: solid white for the
   first 300px, fading to a 60% gray-light by 600px. Applied to the
   card-stack element directly (research / framework / assessment /
   board) so the fade renders regardless of the wrapper; cards float
   with their own shadow on top. Print resets to flat white below.
   ═══════════════════════════════════════════════════════════════════════ */
.sim-v2.rpt-card-stack {
  background: var(--report-page-gradient);
  /* 50px L/R gutter between the shell edge and the inner report
     content (cover + body cards), per spec May 14 2026. Replaces the
     earlier `padding: 24px 0 40px` which let the cards run flush to
     the shell. */
  padding: 0 50px 40px;
  /* Lift the canonical .sim-v2 max-width cap (clamp(680, 92%, 980px)
     in _sim_v2_styles.html L65) so the wide research/framework
     wrapper can actually fill the 1400px shell on laptop/desktop.
     The inner cards still clamp themselves to 1320px below — this
     just stops the parent from throttling them to 980px. T1/T2/T3
     are unaffected because they don't carry .rpt-card-stack. */
  max-width: none;
}

/* Cover content sits flush at the left edge of #p-cover (the column
   constraint lives on #p-cover itself — see ".rpt-card-stack >
   #p-cover" below — so wordmark + action-bar slot + sv-cover all
   share the same 800px column as the body cards). Overrides the
   canonical .sv-cover L/R clamp from _sim_v2_styles.html, scoped to
   .rpt-card-stack only so no other report (T1/T2/T3) is affected. */
.sim-v2.rpt-card-stack .sv-cover { padding-right: 0; padding-left: 0; }

/* Cover card — wraps the cover's supporting prose + stats so they
   sit on a white sv-card surface while kicker / title / standfirst /
   meta remain flush on the canvas above. Paint mirrors .sv-card
   (canonical T1/T3 card chrome) so the cover card visually matches
   the body cards below. */
.sim-v2.rpt-card-stack .rpt-cover-card {
  background: var(--sv-card);
  border: 1px solid var(--sv-rule);
  border-radius: 16px;
  padding: 28px 30px;
  margin-top: 20px;
}

.sim-v2.rpt-card-stack > .mi-section:not(#p-cover),
.sim-v2.rpt-card-stack > .mi-capital-group > .mi-section:not(#p-cover) {
  background: var(--sv-card);
  /* 1px border + soft elevation shadow. The previous 0.75px hairline
     on a near-white canvas (#FAFCFE card vs #FFFFFF card, both
     essentially white) made the per-section card paint invisible —
     readers saw one document-length white sheet instead of distinct
     sections. The shadow gives each card just enough lift to read as
     its own surface without changing the structural layout. */
  border: 1px solid var(--sv-rule);
  border-radius: 16px;
  padding: var(--report-container-pad-y) var(--report-container-pad-x);
  margin: 0 auto 24px;
  /* Fluid column: floors at 800px (matches T1/T2/T3 on small/medium
     screens, keeps prose readable), grows aggressively with viewport
     on wide laptops/desktops, caps at 1320px to fill the 1400px shell
     ceiling (shell has 24px L/R padding → 1352px inner; 1320px leaves
     a small breathing margin). Scoped to .rpt-card-stack so T1/T2/T3
     stay at fixed 800px. May 14 2026 — bumped from clamp(800,62vw,1080)
     so cards actually fill the widened shell. */
  max-width: clamp(800px, 95vw, 1320px);
}

.sim-v2.rpt-card-stack > .mi-section:not(#p-cover):last-child { margin-bottom: 0; }
.sim-v2.rpt-card-stack > .mi-divider { display: none; }

/* #risks card holds only the heading; reduce the gap to the floating risk grid below */
.sim-v2.rpt-card-stack > .mi-section#risks,
.sim-v2.rpt-card-stack > .mi-capital-group > .mi-section#risks {
  margin-bottom: 3px;
  padding-bottom: 10px;
}
.rpt-card-stack[data-product="opportunity-assessment"] > .mi-section:not(#p-cover),
.rpt-card-stack[data-product="opportunity-assessment"] > .mi-capital-group > .mi-section:not(#p-cover) {
  margin-bottom: 24px;
}

/* Intelligence-brief header card (#p-brief) — tighter bottom margin and
   padding so the eyebrow+title card sits close to the item cards below.
   Scoped to #p-brief only; other painted sections keep the default 24px gap. */
.sim-v2.rpt-card-stack > .mi-section#p-brief {
  margin-bottom: 3px;
  padding-bottom: 10px;
}

/* Key-findings section is the ONE exception to the painted-section card:
   its children are themselves elevated cards (.mi-key-findings--grid li),
   so painting the section too produced a container-inside-a-container.
   Strip the section paint + padding here so the finding cards float
   directly on the canvas, matching the design comp. Same specificity as
   the base painted-section rule above, so source order wins; scoped to
   #p-findings so every other section keeps its card. Christine 29 May 2026. */
.sim-v2.rpt-card-stack > .mi-section#p-findings {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Capital-cards section gets the SAME bare treatment as Key findings:
   its cards are themselves elevated white cards, so painting the section
   too nests a card-inside-a-card and the white cards vanish into the white
   panel. Strip the section paint + padding so the cards float directly on
   the canvas. Tagged .mi-section--bare in the section loop whenever the
   component is capital-cards. The trailing :not(#p-cover) keeps this at the
   same specificity tier as the painted-section rule so source order wins.
   Christine 29 May 2026. */
.sim-v2.rpt-card-stack > .mi-section.mi-section--bare:not(#p-cover),
.sim-v2.rpt-card-stack > .mi-capital-group > .mi-section.mi-section--bare:not(#p-cover) {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Capital group wrapper — keeps the three capital segments together as one
   unit. Tighter internal gap so the white-card / bare-cards / white-card
   stack reads as a single section, with the normal section gap restored
   below the group. break-inside:avoid keeps them on one print/PDF page.
   Christine 29 May 2026. */
.mi-capital-group { break-inside: avoid; }
.sim-v2.rpt-card-stack > .mi-capital-group > .mi-section { margin-bottom: var(--spacing-4); }
.sim-v2.rpt-card-stack > .mi-capital-group > .mi-section:last-child { margin-bottom: var(--spacing-6); }

/* "What success looks like" section card — highlighted with the
   green border + 5% green fill so the success picture reads as
   the affirmative anchor the OKRs below are aiming at. Scoped to
   .rpt-card-stack so only the painted-section variant picks it up. */
.sim-v2.rpt-card-stack > .mi-section#success_picture {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 5%, var(--white));
}

/* Cover keeps its naked-on-canvas treatment but loses the 48-72px
   top margin that .mi-section gives every other section — wrapper
   already provides 24px breathing room above. The 800px max-width +
   auto margins put the cover into the same centred column as the
   body cards (".rpt-card-stack > .mi-section:not(#p-cover)"), so
   the wordmark + action-bar slot + sv-cover content all line up
   with the white cards' outer edges below. */
.sim-v2.rpt-card-stack > #p-cover,
.sim-v2.rpt-card-stack .rpt-cover-band > #p-cover {
  margin-top: 0;
  /* Same fluid clamp as the body cards above so the cover column
     scales in lockstep with them on wide laptops/desktops. */
  max-width: clamp(800px, 95vw, 1320px);
  margin-right: auto;
  margin-left: auto;
}

/* Two-row report layout — research-report only (gated by the
   .rpt-two-row modifier on the card-stack). The cover sits in a
   full-width band (the upper row) that bleeds the 50px card-stack
   L/R gutter back out (margin -50px) and re-pads it so the cover
   column still aligns with the body cards below.
   Christine: the lower-row canvas was a solid --gray-light that read
   markedly darker than every other report type. It now carries the
   SAME shared page gradient as the base card-stack rule above, so
   research matches the simulation reports exactly. */
.sim-v2.rpt-card-stack.rpt-two-row {
  background: var(--report-page-gradient);
}

/* Christine: keep the card-stack canvas flat white for PDF/print download,
   mirroring the .report-paginated print reset — the screen gradient must
   not bleed into the downloaded PDF. */
@media print {
  .sim-v2.rpt-card-stack,
  .sim-v2.rpt-card-stack.rpt-two-row { background: var(--report-white); }
}
.sim-v2.rpt-card-stack.rpt-two-row .rpt-cover-band {
  margin: 0 -50px var(--space-12-5); /* 50px bottom; left/right keep the -50px bleed */
  padding: 0 50px;
  /* Christine: cover band is transparent so the cover sits on the same
     shared page gradient as the body below — no separate band tone. */
  background: transparent;
}
/* Full-bleed cyan standfirst fill. The band content-box equals the report
   width (W) minus the 50px L/R gutter (= W − 100). margin-left:-50px pulls
   the fill's left edge back through the gutter to the report's true left
   edge; width:calc(75% + 75px) resolves to 0.75·(W−100) + 75 = 0.75·W, so
   the right edge lands exactly at 75% of the full report width. The 50px /
   75px constants mirror the established 50px card-stack gutter (75 = 0.75 ×
   100). Right corners rounded (--radius-lg); left edge stays flush/bleeds.
   Scoped to the research two-row cover band only. Christine 29 May. */
.sim-v2.rpt-card-stack.rpt-two-row .rpt-cover-band .rpt-standfirst-fill {
  box-sizing: border-box;
  width: calc(75% + 75px);
  margin: 0 0 var(--space-6) -50px;
  padding: var(--space-6) 50px;
  background: var(--cyan);
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
/* First standfirst paragraph sits on the cyan fill, so its text paints
   white (overrides the canonical --report-ink standfirst colour). Scoped
   to the research two-row cover band only. Christine 29 May. */
.sim-v2.rpt-card-stack.rpt-two-row .rpt-cover-band .rpt-standfirst-fill .sv-cover-standfirst {
  color: var(--white);
  font-size: var(--text-base);     /* 16px */
  font-weight: var(--font-medium); /* 500 */
  line-height: var(--lh-body);     /* 1.6 */
}
/* The second standfirst paragraph(s) now live in their own #p-intro
   .mi-section card and the stats in a separate #p-intro-stats card — both
   painted by the canonical .rpt-card-stack > .mi-section rule above, so no
   bespoke wrap styling is needed here. Christine 29 May 2026. */
/* Research two-row layout drops the off-white page frame
   (--report-bg-page) so the white cover band + gray-light body rows
   read cleanly to the wrapper edges. Scoped via :has() to the
   research card-stack only — every other report keeps the canonical
   page background. Christine 29 May 2026. */
.report-paginated:has(.rpt-card-stack.rpt-two-row) {
  background: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Section descriptor — short intro paragraph that sits right under
   a section heading and stays visible even after the section is
   filled. Used by the KPI dashboard products to tell the reader
   what each section is for. Slightly muted vs. body prose so it
   reads as scaffolding, not content.
   ───────────────────────────────────────────────────────────── */
.fw-section-intro {
  color: var(--report-ink-60);
  margin-bottom: var(--spacing-4);
}

/* ─────────────────────────────────────────────────────────────
   Thresholds (RAG) — one card per KPI with a three-column
   Green / Amber / Red band strip and a small note caption.
   Replaces the flat key/value stack the generic list-of-dicts
   renderer would otherwise produce, so the traffic-light bands
   read as bands at a glance.
   ───────────────────────────────────────────────────────────── */
.fw-threshold-list {
  display: flex;
  flex-direction: column;
  /* No gap: separation comes from the hairline navy rule between
     consecutive cards (see .fw-threshold-card + .fw-threshold-card). */
  gap: 0;
}
.fw-threshold-card {
  border: 0;
  border-radius: 0;
  padding: var(--spacing-4) 0;
  background: transparent;
}
.fw-threshold-card + .fw-threshold-card {
  /* Internal divider — gray-dark so the rule reads as a separator,
     not as a structural border. */
  border-top: 1px solid var(--gray-light);
}
.fw-threshold-kpi {
  font-weight: 600;
  color: var(--report-ink);
  margin-bottom: var(--spacing-3);
  font-size: var(--t-body);
}
.fw-threshold-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}
.fw-threshold-band {
  border-radius: 8px;
  padding: var(--spacing-3);
  border: 2px solid var(--fw-band-color, transparent);
  min-width: 0;
}
/* Core RAG palette — Christine-specified:
     green   #74e87a   fill ~12% alpha
     amber   #ffd400   fill ~14% alpha
     pink #ff00ff   fill ~10% alpha (used as the "red" band)
   Border-left uses the core; label text uses the core for green/red
   and a darkened amber so it stays readable on the pale yellow fill. */
.fw-threshold-band--green { --fw-band-color: #74e87a; background: transparent; }
.fw-threshold-band--yellow { --fw-band-color: #ffd400; background: transparent; }
.fw-threshold-band--red   { --fw-band-color: #ff617c; background: transparent; }
.fw-threshold-band-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.fw-threshold-band--green .fw-threshold-band-label { color: #2ea838; }
.fw-threshold-band--yellow .fw-threshold-band-label { color: #8a6d00; }
.fw-threshold-band--red   .fw-threshold-band-label { color: #ff617c; }
.fw-threshold-band-value {
  font-size: var(--t-body);
  /* Match dashboard KR row body weight — light & consistent. */
  font-weight: var(--chart-name-wt);
  color: var(--report-ink);
  line-height: 1.5;
}
.fw-threshold-note {
  font-size: 14px;
  color: var(--report-ink-60);
  font-style: italic;
  margin: 0;
}
.fw-threshold-note:before {
  content: "Note — ";
  font-style: normal;
  font-weight: 600;
  color: var(--report-ink);
}

@media (max-width: 640px) {
  .fw-threshold-bands { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Owners & cadence — one card per KPI with the KPI name as the
   title and a fixed Owner / Frequency / Forum / Data source meta
   strip underneath. Same visual language as the threshold cards
   above so the bottom of every KPI report reads as a coherent
   pair: "here are the bands" then "here's who owns each one".
   ───────────────────────────────────────────────────────────── */
.fw-cadence-list {
  display: flex;
  flex-direction: column;
  /* Matches .fw-okr-stack — unified generous inter-card gap. */
  gap: 28px;
}
.fw-cadence-card {
  border: 1px solid var(--report-border);
  border-radius: 12px;
  padding: 0;
  background: var(--white);
  overflow: hidden;
}
.fw-cadence-kpi {
  /* Match .fw-okr-card-title (KPI dashboard heading) */
  font-size: var(--t-h4, 18px);
  font-weight: var(--chart-name-hl-wt);
  line-height: 1.3;
  color: var(--report-ink);
  background: var(--white);
  padding: 16px var(--spacing-4) 14px;
  margin: 0;
}
.fw-cadence-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-4);
  padding: 12px var(--spacing-4);
}
/* Header row of column labels — tinted with the chat-bubble bg to
   echo the KPI dashboard's KR header row. */
.fw-cadence-meta--labels {
  background: var(--surface-cool-strong);
  /* No top/bottom dividers — the gray band stands alone. */
}
.fw-cadence-meta--values {
  background: var(--white);
}
.fw-cadence-meta-item { min-width: 0; }
.fw-cadence-meta-label {
  /* Match .fw-okr-card-eyebrow (KPI dashboard eyebrow) */
  font-size: var(--t-xsmall, 11px);
  font-weight: var(--chart-name-wt);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
}
.fw-cadence-meta-value {
  font-size: var(--t-body);
  /* Match dashboard KR row body weight — light & consistent. */
  font-weight: var(--chart-name-wt);
  color: var(--report-ink);
  line-height: 1.5;
}
.fw-cadence-freq {
  --monthly: #3bc0ff;
  --yearly: #ffd400;
  --quarterly: #ff11df;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--report-ink-20, rgba(0,0,0,0.15));
  font-size: 11px;
  font-weight: var(--chart-name-wt);
  text-transform: capitalize;
  color: var(--navy);
}
.fw-cadence-freq--monthly   { border-color: var(--monthly); }
.fw-cadence-freq--yearly,
.fw-cadence-freq--annual,
.fw-cadence-freq--annually  { border-color: var(--yearly); }
.fw-cadence-freq--quarterly { border-color: var(--quarterly); }

@media (max-width: 720px) {
  .fw-cadence-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .fw-cadence-meta { grid-template-columns: 1fr; }
}

/* ── Back-matter prose (About, Source, Methodology, Honesty) ──
   Italic body copy inside rubric-section accordions to set the
   back-matter apart from the report body. Frameworks footer
   uses its own .fw-frameworks-* classes and stays roman.       */
.rubric-section__intro,
.fw-frameworks-intro,
.fw-framework-entry { font-style: italic; }

/* ── Back-matter section borders ──────────────────────────────
   Top divider on every back-matter collapsible (Methodology,
   About, Guided Strategy, Sources, Appendices) and on the
   Renatus footer card. Inline margin-top on individual elements
   is preserved; we add padding-top so the border sits with
   breathing room below the content above.
   sv-footer uses .report-paginated.sim-v2 scope (0,3,0) to
   override the inline-baked (0,2,0) top edge of the card.     */
.report-paginated .rubric-section {
  border-top: 1px solid var(--report-border);
  padding-top: 20px;
}
.report-paginated.sim-v2 .sv-footer {
  border-top: 2px solid var(--report-border);
}

/* ── Sim-v2 band bar overrides ──────────────────────────────────────────────
   The canonical .sv-bar-* colours are defined inside _sim_v2_styles.html,
   which is baked inline into report_html (body) and therefore wins over the
   linked <link> stylesheet on equal specificity. Adding .report-paginated
   scope raises this to 3-class specificity (0,3,0) so it overrides the baked
   inline styles without !important — hitting ALL existing reports immediately.
   Christine, 3 June 2026: linear left→right gradient (near-white → full colour). */
.report-paginated .sim-v2 .sv-bar-excellent  { background: linear-gradient(to right, color-mix(in srgb, var(--band-excellent)  3%, var(--report-white)), var(--band-excellent)); }
.report-paginated .sim-v2 .sv-bar-strong     { background: linear-gradient(to right, color-mix(in srgb, var(--band-strong)     3%, var(--report-white)), var(--band-strong)); }
.report-paginated .sim-v2 .sv-bar-solid      { background: linear-gradient(to right, color-mix(in srgb, var(--band-solid)      6%, var(--report-white)), var(--band-solid)); }
.report-paginated .sim-v2 .sv-bar-developing { background: linear-gradient(to right, color-mix(in srgb, var(--band-developing) 3%, var(--report-white)), color-mix(in srgb, var(--band-developing) 90%, var(--report-white))); }
.report-paginated .sim-v2 .sv-bar-emerging   { background: linear-gradient(to right, color-mix(in srgb, var(--band-emerging)   3%, var(--report-white)), color-mix(in srgb, var(--band-emerging)   85%, var(--report-white))); }

/* ── Sim-v2 benchmark bars → single bar + tick overlay ──────────────────────
   Baked inline CSS has `.sim-v2 .sv-bench-*` (2-class); 3-class here overrides
   all existing reports. Two bar-rows are stacked in the same grid cell; the ref
   row's tag is hidden (opacity:0 keeps height so tracks stay vertically aligned),
   and the ref track becomes transparent with only a right-border tick on its
   span — the span's right edge sits at exactly benchmark% from the left.
   Christine, 3 June 2026. */
.report-paginated .sim-v2 .sv-bench-bars { display: grid; }
.report-paginated .sim-v2 .sv-bench-bar-row,
.report-paginated .sim-v2 .sv-bench-bar-row--ref { grid-area: 1 / 1; }
.report-paginated .sim-v2 .sv-bench-bar-row--ref { pointer-events: none; z-index: 1; }
.report-paginated .sim-v2 .sv-bench-tag--ref { opacity: 0; }
.report-paginated .sim-v2 .sv-bench-track { overflow: visible; }
.report-paginated .sim-v2 .sv-bench-track--ref { background: transparent; overflow: visible; }
.report-paginated .sim-v2 .sv-bench-track--ref > span { background: transparent; border-right: 2px solid var(--report-ink); border-radius: 0; height: calc(100% + 10px); margin-top: -5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPITAL STRUCTURE DECISION (product: capital-structure-decision)
   Bespoke section components — added so this product's data-rich dict sections
   render as purpose-built cards/tables instead of the generic kv-block
   fallback. Template branches: framework-report.html; partials: fw-cap-*.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat grid — cash_curve_profile / current_capital_stack scalar fields */
.fw-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.fw-stat-cell {
  background: var(--white);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.fw-stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
}
.fw-stat-value {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}
.fw-stat-honest {
  border-top: 1px solid var(--report-border);
  padding-top: var(--spacing-3);
}
.fw-stat-honest-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--spacing-1);
}
.fw-stat-honest-body {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--report-ink);
}

/* Remaining flexibility — full-width prose block below the stat grid */
.fw-stat-remaining {
  border-top: 1px solid var(--report-border);
  padding-top: var(--spacing-3);
  margin-bottom: var(--space-6);
}
.fw-stat-remaining .fw-stat-label {
  margin-bottom: var(--spacing-1);
}

/* Leverage-vs-covenant bar (Capital Structure Decision — current_capital_stack) */
.fw-leverage-bar {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.fw-leverage-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.fw-leverage-meta {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.fw-leverage-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--report-ink-35);
  white-space: nowrap;
}
.fw-leverage-figures {
  font-size: var(--text-sm);
  line-height: 1.4;
}
.fw-leverage-used {
  font-weight: 600;
  color: var(--report-ink);
}
.fw-leverage-cap,
.fw-leverage-headroom {
  color: var(--report-ink-60);
}
.fw-leverage-track {
  position: relative;
  height: 8px;
  background: var(--report-border);
  border-radius: 4px;
  overflow: visible;
}
.fw-leverage-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--cyan);
  border-radius: 4px;
  min-width: 2px;
}
.fw-leverage-ceiling-tick {
  position: absolute;
  right: 0;
  top: -3px;
  height: 14px;
  width: 2px;
  background: var(--band-developing);
  border-radius: 1px;
}

/* Candidate instruments — shortlisted vs deliberately excluded */
.fw-cap-cand-item {
  margin-bottom: var(--spacing-4);
  padding-left: calc(18px + var(--spacing-2)); /* align with heading text (18px icon + gap) */
}
.fw-cap-cand-item:last-child { margin-bottom: 0; }
.fw-cap-cand-name {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--report-ink);
  margin-bottom: var(--spacing-1);
}
.fw-cap-cand-item--excl .fw-cap-cand-name,
.fw-cap-cand-item--excl .fw-comp-prose { color: var(--report-ink-60); }

/* Partnership Evaluation — strategic fit alignment grid fit-score callout */
.fw-pe-alignment { }
.fw-pe-fit-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 0.75px solid var(--report-border);
}
.fw-pe-fit-label {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--report-ink-60);
  flex: 1;
}
.fw-pe-fit-score {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--report-ink);
}
.fw-pe-fit-max {
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--report-ink-35);
}

/* Instrument evaluation — comparison table + honest-view note rows */
.fw-cap-eval-inst { font-weight: 600; }
.fw-cap-eval-row td { border-bottom: none; }
.fw-cap-eval-note td {
  border-top: none;
  padding-top: 0;
  padding-bottom: 14px;
  color: var(--report-ink-60);
  font-size: var(--text-sm);
  line-height: var(--t-body-lh);
}
.fw-cap-eval-note-label {
  font-weight: 600;
  color: var(--report-ink-35);
  margin-right: 6px;
}

/* Instrument evaluation — scored axis band pills + supporting prose */
.fw-eval-band {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 5px;
}
.fw-eval-band--excellent {
  background: var(--band-excellent-soft);
  color: var(--band-excellent);
}
.fw-eval-band--strong {
  background: var(--band-strong-soft);
  color: var(--band-strong);
}
.fw-eval-band--solid {
  background: var(--band-solid-soft);
  color: var(--band-solid);
}
.fw-eval-band--developing {
  background: var(--band-developing-soft);
  color: var(--band-developing);
}
.fw-eval-band--emerging {
  background: var(--band-emerging-soft);
  color: var(--band-emerging);
}
.fw-eval-axis-prose {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--report-ink-60);
  line-height: var(--t-body-lh);
}

/* Recommended structure — headline + stack table + meta rows */
.fw-cap-structure-headline {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--report-ink);
  margin-bottom: var(--space-6);
}
.fw-cap-stack { margin-bottom: var(--space-6); }
.fw-cap-stack-inst { font-weight: 600; }
.fw-cap-stack-amt { white-space: nowrap; }

@media print {
  .fw-stat-cell,
  .fw-stat-remaining,
  .fw-cap-eval  { break-inside: avoid; }
  .fw-cap-stack { break-inside: auto; }
  /* Keep section headings bound to the first item below them */
  .fw-vpc-sec-head { break-after: avoid; }
  .fw-cap-cand-item { break-inside: avoid; }
}

/* Stacked-column: constrain single-column bars to a chart-legible width so
   a 2-segment recommended-structure bar doesn't fill the full container and
   read as a fat stripe at 380px. Product-scoped so other stacked-column
   usages (multi-column revenue charts) are unaffected. */
.rpt-card-stack[data-product="capital-structure-decision"] .mi-stacked {
  justify-content: flex-start;
}
.rpt-card-stack[data-product="capital-structure-decision"] .mi-stacked-col {
  flex: 0 0 160px;
  max-width: 160px;
}

/* ── MOBILE REFLOW (Capital Structure Decision) ─────────────────────────────
   At ≤480px the two multi-column tables (instrument evaluation, recommended
   structure) convert to stacked cards — one card per row — so no horizontal
   scroll and no clipped cells at ~380px viewport.
   Stat grid and risk grid get explicit single-column rules as a guaranteed
   safety net alongside their auto-fit / @container collapse rules.
   ─────────────────────────────────────────────────────────────────────────── */

/* Risk grid — @media fallback alongside the existing @container rule */
@media (max-width: 600px) {
  .fw-risk-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Stat grid — guaranteed 1-col (auto-fit already collapses but make it explicit) */
  .fw-stat-grid { grid-template-columns: 1fr; }

  /* Override frame.css horizontal-scroll rule for these two tables only */
  .fw-cap-eval,
  .fw-cap-stack { overflow-x: visible; }

  /* Instrument evaluation — card per instrument ─────────────────────── */
  .fw-cap-eval thead { display: none; }
  .fw-cap-eval,
  .fw-cap-eval tbody,
  .fw-cap-eval tr,
  .fw-cap-eval td { display: block; width: 100%; box-sizing: border-box; }

  .fw-cap-eval-row {
    background: var(--white);
    border: 1px solid var(--report-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-4);
    padding: 12px 14px 6px;
  }
  .fw-cap-eval-row td {
    padding: 0 0 8px;
    border: none;
  }
  /* Inject column labels before each axis cell */
  .fw-cap-eval-row td.fw-cap-eval-inst {
    font-weight: 600;
    font-size: var(--t-body);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--report-border);
    margin-bottom: 8px;
  }
  .fw-cap-eval-row td:nth-child(2)::before { content: "Fit with cash curve"; }
  .fw-cap-eval-row td:nth-child(3)::before { content: "Cost of capital"; }
  .fw-cap-eval-row td:nth-child(4)::before { content: "Strategic flexibility"; }
  .fw-cap-eval-row td:nth-child(2)::before,
  .fw-cap-eval-row td:nth-child(3)::before,
  .fw-cap-eval-row td:nth-child(4)::before {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--report-ink-35);
    margin-top: 10px;
    margin-bottom: 2px;
    /* Partial-width decorative rule: 32px × 1px gradient at the top of the
       pseudo-element, with padding-top to push the label text below it. */
    padding-top: 14px;
    background-image: linear-gradient(var(--report-border), var(--report-border));
    background-size: 32px 1px;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  /* Honest-view note row — full-width prose strip below the card */
  .fw-cap-eval-note { margin-bottom: var(--spacing-4); }
  .fw-cap-eval-note td {
    padding: 6px 14px 10px;
    border: none;
    border-left: 2px solid var(--report-border);
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Recommended structure — card per component ──────────────────────── */
  .fw-cap-stack thead { display: none; }
  .fw-cap-stack,
  .fw-cap-stack tbody,
  .fw-cap-stack tr,
  .fw-cap-stack td { display: block; width: 100%; box-sizing: border-box; }

  .fw-cap-stack tr {
    background: var(--white);
    border: 1px solid var(--report-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-3);
    padding: 10px 14px 6px;
  }
  .fw-cap-stack td {
    padding: 0 0 6px;
    border: none;
    white-space: normal;
  }
  .fw-cap-stack td.fw-cap-stack-inst {
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--report-border);
    margin-bottom: 6px;
  }
  .fw-cap-stack td:nth-child(2)::before { content: "Amount"; }
  .fw-cap-stack td:nth-child(3)::before { content: "Role in the stack"; }
  .fw-cap-stack td:nth-child(2)::before,
  .fw-cap-stack td:nth-child(3)::before {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--report-ink-35);
    margin-bottom: 2px;
  }
}

/* ── fw-omr-* (Operating Model Review — bespoke section components) ── */

/* Process cards — value_delivery_map */
.fw-omr-process-list,
.fw-omr-break-list,
.fw-omr-gap-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.fw-omr-process-card,
.fw-omr-break-card,
.fw-omr-gap-card {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-4);
  break-inside: avoid;
}
.fw-omr-card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-3);
}
.fw-omr-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--report-ink);
  flex: 1 1 auto;
}
.fw-omr-gap-pills {
  display: flex;
  gap: var(--spacing-1);
  flex-wrap: wrap;
}
/* Process-status pills (Healthy/Strained/Broken) — mapped onto the standard
   3-value-to-5-band ladder (same convention as the OMR verdict pill):
   Healthy -> excellent (green), Strained -> solid (yellow),
   Broken -> emerging (purple). 1px border + 5% fill of the band colour
   (not the 7% used elsewhere) per Christine's design-QA note, 4 July 2026 —
   navy-outline-only was tried and rejected. */
.sv-pill-omr-healthy  { background: color-mix(in srgb, var(--band-excellent) 5%, var(--report-white)); border-width: 1px; border-color: var(--band-excellent); }
.sv-pill-omr-strained { background: color-mix(in srgb, var(--band-solid)     5%, var(--report-white)); border-width: 1px; border-color: var(--band-solid); }
.sv-pill-omr-broken   { background: color-mix(in srgb, var(--band-emerging) 5%, var(--report-white)); border-width: 1px; border-color: var(--band-emerging); }
/* Honest-view text inside a card — plain prose, no callout box.
   Christine, 4 July 2026: was a cyan-tinted bordered callout; user asked
   for it to read as normal prose, no left border/background/border. */
.fw-omr-card-callout {
  margin-top: var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--report-ink-80);
  line-height: 1.6;
}
/* Biggest-break callout (above the break cards) — same recipe as the
   Metrics Audit .fw-ma-gap-callout: pink 1px border, 2px left border,
   5% pink background. Christine, 4 July 2026. */
.fw-omr-biggest-break-callout {
  border: 1px solid var(--pink);
  border-left: 2px solid var(--pink);
  background: color-mix(in srgb, var(--pink) 5%, var(--report-white));
  border-radius: var(--radius-2);
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-4);
  break-inside: avoid;
}
/* What's missing (Metrics Audit: missing_metrics) biggest-gap callout */
.fw-ma-gap-callout {
  border: 1px solid var(--pink);
  border-left: 2px solid var(--pink);
  background: color-mix(in srgb, var(--pink) 5%, var(--report-white));
}
.fw-ma-gap-callout .fw-omr-callout-label {
  color: var(--navy);
  font-weight: 700;
}
/* Handoff-cost bar chart — per-bar kicker colour cycle below (superseded
   the earlier pink-highlight/grey-dim scheme, 4 July 2026). Gradient fill
   matches the adb-bar-- (assessment-dimension-bars) visual language —
   light-to-full colour-mix — rather than the shared C4 flat fill, per
   Christine's design-QA note that OMR bars should read like the platform's
   "properly formatted" gradient bars. Label/secondary .hl stays navy for
   the biggest-break row; base .mi-hbar-fill.hl/.dim rules stay flat for
   every other C4 consumer. */
.fw-omr-cost-chart .mi-hbar-label.hl,
.fw-omr-cost-chart .mi-hbar-secondary.hl { color: var(--navy); }
/* Each handoff-break bar cycles through a distinct kicker colour instead of
   the old binary pink-highlight/grey-dim scheme — with an unknown, possibly
   >2-item list, flattening every row but the top one to grey made the chart
   read as "one bar that matters", not a ranked breakdown. Same gradient
   recipe as before (light-to-full colour-mix, matching the adb-bar--
   visual language). Cycles through the full kicker01–16 range in listed
   order; nth-of-type(16n+N) wraps safely if a chart ever exceeds 16 rows.
   Overrides .hl/.dim via higher selector specificity — no !important
   needed. Scoped to this chart only; other C4 consumers keep their own
   hl/dim or _report_color_map schemes. Christine, 4 July 2026. */
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+1)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker01) 3%, var(--report-white)), var(--kicker01)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+2)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker02) 3%, var(--report-white)), var(--kicker02)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+3)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker03) 3%, var(--report-white)), var(--kicker03)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+4)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker04) 3%, var(--report-white)), var(--kicker04)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+5)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker05) 3%, var(--report-white)), var(--kicker05)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+6)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker06) 3%, var(--report-white)), var(--kicker06)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+7)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker07) 3%, var(--report-white)), var(--kicker07)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+8)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker08) 3%, var(--report-white)), var(--kicker08)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+9)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker09) 3%, var(--report-white)), var(--kicker09)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+10) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker10) 3%, var(--report-white)), var(--kicker10)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+11) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker11) 3%, var(--report-white)), var(--kicker11)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+12) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker12) 3%, var(--report-white)), var(--kicker12)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+13) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker13) 3%, var(--report-white)), var(--kicker13)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+14) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker14) 3%, var(--report-white)), var(--kicker14)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n+15) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker15) 3%, var(--report-white)), var(--kicker15)); }
.fw-omr-cost-chart .mi-hbar-row:nth-of-type(16n)    .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker16) 3%, var(--report-white)), var(--kicker16)); }

/* unit-economics-review — EVERY bar chart in this product (hbar AND
   two-bar) shares this kicker-cycling wrapper instead of the flat
   cyan/grey hl/dim scheme: each row/bar is its own breakdown, not a
   single "winner vs the rest" comparison. Christine, 4 Jul 2026. */
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+1)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker01) 3%, var(--report-white)), var(--kicker01)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+2)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker02) 3%, var(--report-white)), var(--kicker02)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+3)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker03) 3%, var(--report-white)), var(--kicker03)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+4)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker04) 3%, var(--report-white)), var(--kicker04)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+5)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker05) 3%, var(--report-white)), var(--kicker05)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+6)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker06) 3%, var(--report-white)), var(--kicker06)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+7)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker07) 3%, var(--report-white)), var(--kicker07)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+8)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker08) 3%, var(--report-white)), var(--kicker08)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+9)  .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker09) 3%, var(--report-white)), var(--kicker09)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+10) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker10) 3%, var(--report-white)), var(--kicker10)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+11) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker11) 3%, var(--report-white)), var(--kicker11)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+12) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker12) 3%, var(--report-white)), var(--kicker12)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+13) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker13) 3%, var(--report-white)), var(--kicker13)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+14) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker14) 3%, var(--report-white)), var(--kicker14)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n+15) .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker15) 3%, var(--report-white)), var(--kicker15)); }
.fw-uer-chart .mi-hbar-row:nth-of-type(16n)    .mi-hbar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker16) 3%, var(--report-white)), var(--kicker16)); }
.fw-uer-chart .mi-hbar-label.hl,
.fw-uer-chart .mi-hbar-secondary.hl { color: var(--navy); }

/* Two-bar (LTV observed/projected etc.) inside unit-economics-review —
   override the base cyan/grey .is-higher/.is-lower fill so each of the
   two bars reads as its own distinct colour rather than a "winner vs
   loser" pair. Row order is fixed (always 2 bars), so nth-of-type is
   safe and doesn't need the 16-step cycle. */
.fw-uer-chart .mi-twobar-row:nth-of-type(1) .mi-twobar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker06) 3%, var(--report-white)), var(--kicker06)); }
.fw-uer-chart .mi-twobar-row:nth-of-type(2) .mi-twobar-fill,
.fw-uer-chart .mi-twobar-row:nth-of-type(3) .mi-twobar-fill { background: linear-gradient(to right, color-mix(in srgb, var(--kicker11) 3%, var(--report-white)), var(--kicker11)); }
.fw-uer-chart .mi-twobar-label.hl,
.fw-uer-chart .mi-twobar-value.hl { color: var(--navy); }

/* Section-level honest-view callout (capability_gaps footer) — brand
   highlight is --cyan, not a score-band colour (see .fw-omr-card-callout). */
.fw-omr-section-callout {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-2);
  padding: var(--spacing-3) var(--spacing-4);
  break-inside: avoid;
}
.fw-omr-callout-label {
  font-size: var(--uppercase-label-size);
  font-weight: var(--uppercase-label-weight);
  letter-spacing: var(--uppercase-label-spacing);
  text-transform: uppercase;
  color: var(--uppercase-label-color);
  margin-bottom: var(--spacing-1);
}
.fw-omr-callout-body {
  font-size: var(--text-sm);
  color: var(--report-ink-80);
  line-height: 1.6;
}
/* Structural change headline */
.fw-omr-change-headline {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--report-ink);
  line-height: 1.3;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--report-border);
}
.fw-omr-change-card {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-4);
  break-inside: avoid;
}

/* ── fw-team-cards (Business Plan — The team) ───────────────────────── */
.fw-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  margin-top: var(--spacing-4);
}
.fw-team-card {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-4);
  break-inside: avoid;
}
.fw-team-card--gap {
  border-color: var(--band-solid);
  background: var(--band-solid-soft);
}
.fw-team-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-2);
}
.fw-team-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--report-ink);
  flex: 1 1 auto;
}
.fw-team-role {
  font-size: var(--text-sm);
  color: var(--report-ink-60);
  width: 100%;
  margin-top: -2px;
}
.fw-team-gap-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.fw-team-cap {
  font-size: var(--text-sm);
  color: var(--report-ink-80);
  line-height: 1.6;
  margin: 0;
}
@media print {
  .fw-team-grid { grid-template-columns: repeat(2, 1fr); }
  .fw-team-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}
@media (max-width: 767px) {
  .fw-team-grid { grid-template-columns: 1fr; }
}

/* ── fw-killer-assumption ───────────────────────────────────────── */
.fw-ka-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}
.fw-ka-assumption {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--report-ink);
  line-height: 1.35;
}
.fw-ka-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 2px solid var(--cyan);
  padding-left: var(--spacing-5);
}

.fw-ka-rows .fw-item-key {
  padding-right: 15px;
  color: var(--cyan);
}
.fw-ka-rows .fw-kv-row {
  margin-bottom: 24px !important;
}
.fw-ka-rows .fw-kv-row:last-child {
  margin-bottom: 0 !important;
}
@media print {
  .fw-ka-block { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — report card-stack responsive overrides (≤ 767px)
   Desktop (≥ 768px) and iPad are completely untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Step 1 — Fix the 800px clamp floor and zero side margins.
     clamp(800px, 95vw, 1320px) forces every card to ≥800px which is
     wider than any phone. Override to 100% so cards fit the panel.
     Also zero margin-left/right: the desktop rule sets margin:0 auto 24px;
     `auto` on a 100%-wide block is harmless in theory but can interact
     with overflow caused by step 2 below; explicit 0 is cleaner. */
  .sim-v2.rpt-card-stack > .mi-section:not(#p-cover),
  .sim-v2.rpt-card-stack > .mi-capital-group > .mi-section:not(#p-cover),
  .sim-v2.rpt-card-stack > #p-cover,
  .sim-v2.rpt-card-stack .rpt-cover-band > #p-cover {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Tighten the gap between sections from 24px to 15px on mobile. */
  .sim-v2.rpt-card-stack > .mi-section:not(#p-cover),
  .sim-v2.rpt-card-stack > .mi-capital-group > .mi-section:not(#p-cover) {
    margin-bottom: 15px !important;
  }

  /* Tighten individual card gaps (sv-card margin-bottom + intel-list--cards
     grid gap + key-findings--grid gap) from 24px to 15px on mobile. */
  .sim-v2 .sv-card {
    margin-bottom: 15px !important;
  }
  .sim-v2 .sv-intel-list--cards {
    gap: 15px !important;
  }
  .mi-key-findings--grid {
    gap: 15px !important;
  }

  /* Remove cover L/R padding so it bleeds edge-to-edge on mobile. */
  .sim-v2.rpt-card-stack > #p-cover,
  .sim-v2.rpt-card-stack .rpt-cover-band > #p-cover {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cover title spacing on mobile. */
  .sv-cover-title {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }

  /* Step 2 — Remove card-stack L/R padding on mobile.
     The inner .mi-section cards carry 16px padding of their own,
     so the outer card-stack gutter is pure green band with no
     content benefit. Zero it so cards run flush to the panel edge. */
  .sim-v2.rpt-card-stack {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* 24px padding all sides on every prose section across all report types.
     Replaces the old 28px top / 16px sides split; covers framework (.rpt-card-stack),
     research (.rpt-two-row), and simulation/assessment (.report-paginated). */
  .sim-v2 .mi-section:not(#p-cover) {
    padding: 24px !important;
  }

  /* Stat / intel cards — reduce from 28px 35px (--report-container-pad-*) to 24px. */
  .mi-intel-item {
    padding: 24px !important;
  }

  /* Risk cards — reduce from 35px (--report-container-pad-x) to 24px. */
  .fw-risk-card {
    padding: 24px !important;
  }

  /* Decision matrix — mobile: strip per-option column tints (they become row
     backgrounds on display:block and give each option a different colour).
     Highlight only the top-scoring cell per criterion with a single neutral tint. */
  /* Capital candidates — remove icon-alignment indent on mobile. */
  .fw-cap-cand-item { padding-left: 0 !important; }

  /* Instrument evaluation table — gap above the prose paragraph that follows the pill. */
  .fw-eval-axis-prose { margin-top: 15px !important; }
  /* Instrument evaluation cards — 24px padding all round on mobile. */
  .fw-cap-eval-row { padding: 24px !important; }

  .fw-decision-matrix th[data-opt],
  .fw-decision-matrix td[data-opt] {
    background-color: transparent !important;
    border-left: none !important;
  }
  .fw-decision-matrix td.fw-dm-top {
    background-color: color-mix(in srgb, var(--cyan) 12%, var(--report-white)) !important;
    font-weight: var(--font-weight-semibold) !important;
    /* Bleed the bg 14px left + right to reach the card border (tr has padding:14px).
       box-shadow isn't clipped by the grid container's padding, so it extends into it. */
    box-shadow: -14px 0 0 0 color-mix(in srgb, var(--cyan) 12%, var(--report-white)),
                14px 0 0 0 color-mix(in srgb, var(--cyan) 12%, var(--report-white));
  }

  /* Step 3 — Neutralise the cover-band negative-margin bleed.
     The desktop rule uses margin:0 -50px to bleed the band back through
     the 50px card-stack gutter so it runs full-width. With the gutter
     zeroed on mobile the -50px pulls the band 50px OUTSIDE the viewport
     on each side, creating horizontal overflow (and the visible side gap).
     Reset to 0 and let the band fill naturally. Same for the standfirst
     fill whose width:calc(75%+75px) and margin-left:-50px assume the gutter. */
  .sim-v2.rpt-card-stack.rpt-two-row .rpt-cover-band {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* ── Mobile cover (research two-row) — restore cyan to standfirst fill ──
     Keep geometry fixes (full-width, zero negative margin) to prevent
     horizontal overflow now that card-stack gutter is 15px not 50px.
     Cyan background and white text are restored to match desktop intent. */
  .sim-v2.rpt-card-stack.rpt-two-row .rpt-cover-band .rpt-standfirst-fill {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 24px !important;
    padding: 16px !important;
    border-radius: var(--radius-lg) !important;
  }
  .sim-v2.rpt-card-stack.rpt-two-row .rpt-cover-band .rpt-standfirst-fill .sv-cover-standfirst {
    color: var(--white) !important;
  }

  /* Step 4 — Fix the cyan intro banner.
     Card-stack padding is now 0 on mobile so no negative-margin
     bleed is needed; banner is naturally full-width. */
  .fw-report-intro-banner {
    width: 100%;
    margin-left: 0;
    margin-bottom: 24px !important;
    padding-left: 24px;
    padding-right: 16px;
  }

  /* Step 5 — Operator-cards: collapse two-column body to single column.
     Desktop: .op-body is `grid-template-columns: 1fr 1fr` so "What it
     means" (child 1) and "Time" (child 2) sit side-by-side. On mobile
     that gives each column ~150px — too narrow for the description text
     and the primary cause of horizontal overflow in completed reports.
     Fix: single column, Time stacked above What it means via order:-1. */
  .op-body {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  .op-row:nth-child(1) {
    grid-column: 1 / -1 !important;
    padding-right: 0 !important;
  }
  .op-row:nth-child(2) {
    grid-column: 1 / -1 !important;
    padding-left: 0 !important;
    order: -1;
  }

  /* Step A — Fix wordmark margin collapse (framework reports only).
     layout.css sets .rpt-cover-wordmark { margin-top: -70px } inside this
     same media query to remove dead space from the hidden logo+action-bar.
     That negative margin propagates through #p-cover (padding:0, no border,
     position:relative — no BFC barrier) and collapses INTO #p-cover's top
     margin, pulling the entire cover 70px upward. The kicker squares and
     meta row (at the TOP of <header.sv-cover>) disappear behind the page's
     fixed navigation header (~60–70px tall), leaving only the title visible.
     Fix: zero all margins on the wordmark and collapse its height to 0 so
     it contributes nothing to the layout — the hamburger button is injected
     into .sv-cover-kicker-row (not the wordmark slot), so nothing is lost.
     Scoped to :not(.rpt-two-row) so research reports keep their existing
     -70px behaviour untouched. Simulation/assessment use .report-paginated
     (no .rpt-card-stack), so they are also completely unaffected. */
  .sim-v2.rpt-card-stack:not(.rpt-two-row) .rpt-cover-wordmark {
    margin: 0 !important;
    height: 0;
    overflow: hidden;
  }
  /* ~30px top gap to match the published research report spacing. */
  .sim-v2.rpt-card-stack:not(.rpt-two-row) > #p-cover {
    padding-top: 30px;
  }

  /* Step 6 — Dot-plot: replace fixed-pixel columns with capped flexible ones.
     Desktop: both .mi-dot-row and .mi-dot-axis-labels use
     `grid-template-columns: 170px 1fr 180px` (350px fixed — exceeds any phone
     viewport). Fix: cap each side column at 100px (shrinkable to 0) so the
     track always fits. .mi-dot-axis-labels mirrors the fix so axis ticks
     stay aligned under the track column. Desktop untouched. */
  .mi-dot-row,
  .mi-dot-axis-labels {
    grid-template-columns: minmax(0, 100px) 1fr minmax(0, 100px) !important;
  }

  /* Capital structure headline — 24px gap from the stacked-column chart above
     it on mobile (desktop spacing is handled by the chart's own margin-bottom). */
  .fw-cap-structure-headline { margin-top: 24px !important; }

  /* Mobile heading dividers — a short partial-width rule above each eyebrow /
     section label so it separates cleanly from the paragraph above.
     Scoped to .rpt-card-stack so it only fires inside report pages.
     Not applied to .section-title / .mi-title (primary card headings that
     sit at the top of a card and need no preceding rule). */
  .rpt-card-stack .mi-eyebrow::before,
  .rpt-card-stack .section-eyebrow::before,
  .rpt-card-stack .section-label::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--report-border);
    margin-bottom: 12px;
  }

  /* fw-prose-blocks lead sentence — reduce weight and match body line-height
     on mobile. Desktop uses --paragraph-heading-weight (500) + lh 1.4 which
     reads well at wider widths; on narrow screens the heavier rendering and
     tighter leading feel cramped against the body text that follows. */
  .fw-prose-lead {
    font-weight: 500 !important;
    line-height: var(--t-body-lh) !important;
  }

  /* Operator-cards score strip — on mobile the `max-content` label column
     doesn't shrink with the container, causing horizontal overflow. Cap it
     at 40% of the strip width and allow the label to wrap. */
  .op-score-strip {
    grid-template-columns: minmax(0, 40%) 1fr auto !important;
  }
  .op-score-bar-label {
    white-space: normal !important;
    min-width: 0;
  }

  /* VPC items — remove bullet and left-indent on mobile so text sits flush
     with the section's natural card padding (24px). */
  .fw-vpc-item {
    padding-left: 0 !important;
    grid-template-columns: 1fr !important;
  }
  .fw-vpc-item::before {
    display: none !important;
  }

  /* VPC mobile diagram split — hide the side-by-side overview diagram;
     show the per-section diagram copies (Value Map → vm, Customer Profile → cp)
     centred under each section heading instead. */
  .fw-vpc-diagram--overview {
    display: none !important;
  }
  .fw-vpc-mob-diagram {
    display: flex !important;
    justify-content: center;
    padding: 12px 0 20px;
  }
  /* Constrain the fixed-size wrappers so they never exceed the available
     width inside the section card on narrow phones. The SVG itself then
     scales proportionally via width:100%/height:auto. */
  .fw-vpc-mob-diagram .fw-vpc-square-mini,
  .fw-vpc-mob-diagram .fw-vpc-circle-mini {
    width: 100%;
    max-width: 200px;
    height: auto;
  }
  .fw-vpc-mob-diagram .fw-vpc-sq-svg,
  .fw-vpc-mob-diagram .fw-vpc-cr-svg {
    width: 100%;
    height: auto;
  }

  /* ── Simulation / assessment report mobile fixes (.report-paginated) ──
     These three rules mirror what the .rpt-card-stack block already does
     for framework reports; simulation/assessment use .report-paginated so
     they need their own scoped equivalents. MOBILE ONLY — desktop/iPad
     untouched. ── */

  /* Fix 1 — Cover: collapse the empty wordmark row.
     layout.css sets .rpt-cover-wordmark { margin-top:-70px } on mobile to
     remove the dead space left by the hidden logo + action bar. For
     .report-paginated the same -70px shift pushes .sv-cover-kicker-row
     (top of <header.sv-cover>) behind the page nav, making kicker squares
     AND the injected hamburger button invisible. Fix: zero all margins and
     collapse height to 0 so the wordmark contributes nothing. The hamburger
     is injected into .sv-cover-kicker-row by base.html JS, not the wordmark
     slot, so nothing is lost. Add padding-top so the kicker row clears the
     nav bar (~60px) with comfortable breathing room. */
  .report-paginated .rpt-cover-wordmark {
    margin: 0 !important;
    height: 0;
    overflow: hidden;
  }
  .report-paginated .sim-v2 {
    padding-top: 10px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 0 !important;
  }

  /* Fix 2 — Card inner padding: 24px all sides.
     Baked _sim_v2_styles.html sets padding:28px 30px — override to 24px
     so the card content breathes the same as framework cards on mobile. */
  .report-paginated .sim-v2 .sv-card {
    padding: 24px !important;
  }
  /* First card gets a top margin to separate it from the cover content,
     matching the visual rhythm of the gaps between subsequent cards. */
  .report-paginated .sim-v2 .sv-card:first-of-type {
    margin-top: 24px !important;
  }
  /* Dimensions card — remove L/R padding so bars run full-width; 10px top. */
  .report-paginated .sim-v2 #sim-profile.sv-card {
    padding-top: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Dimension overview header + detail sub-cards — override
     var(--report-container-pad-*) which resolves to 28px 35px. */
  .report-paginated .sim-v2 .sv-dim-overview,
  .report-paginated .sim-v2 #sim-profile > .sv-dim-detail {
    padding: 24px !important;
  }

  /* Fix 3 — Gap between cards: 15px.
     Baked margin-bottom:24px → tighten to 15px to match framework gap. */
  .report-paginated .sim-v2 .sv-card {
    margin-bottom: 15px !important;
  }

  /* Fix 4 — Overall card: 24px gap between gauge column and standfirst.
     Baked @media(max-width:600px) sets gap:18px on .sv-overall when stacked.
     Override to 24px to match the design spec. */
  .sim-v2 .sv-overall {
    gap: 24px !important;
  }

  /* Fix 5 — Paragraph spacing: 15px gaps between prose blocks.
     Baked .sv-body has margin:0 with only a 10px top gap on consecutive
     siblings. On mobile the narrow viewport makes wall-of-text more acute —
     lift to 15px and also cover bare <p> tags (some sections render those
     directly). Scoped to .report-paginated so framework cards are untouched. */
  .report-paginated .sim-v2 .sv-card .sv-body + .sv-body {
    margin-top: 15px !important;
  }
  .report-paginated .sim-v2 .sv-card p + p {
    margin-top: 15px !important;
  }
  /* exec standfirst paragraphs (sv-overall-body) */
  .report-paginated .sim-v2 .sv-overall-body + .sv-overall-body {
    margin-top: 1em !important;
  }
  /* profile lead paragraphs */
  .report-paginated .sim-v2 .sv-profile-lead + .sv-profile-lead {
    margin-top: 15px !important;
  }

}

@media (max-width: 767px) {
  .sim-v2 .sv-profile-lead {
    font-size: 15px !important;
    font-weight: 300 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   fw-behaviour-contrast — Metrics Audit: behaviour_being_rewarded
   Intended vs actual side-by-side with divergence + honest-view callouts.
   ───────────────────────────────────────────────────────────────────────── */
.fw-beh-contrast {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.fw-beh-contrast-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}
.fw-beh-col {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-4);
  break-inside: avoid;
  min-width: 0;
}
.fw-beh-col-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--spacing-2);
}
.fw-beh-col-body {
  font-size: var(--text-sm);
  color: var(--report-ink-80);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.fw-beh-diverge-callout {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-3) var(--spacing-4);
  break-inside: avoid;
}
.fw-beh-diverge-callout .fw-omr-callout-label {
  color: var(--navy);
}
.fw-beh-honest-callout {
  border: 1px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 7%, var(--report-white));
  border-radius: var(--radius-2);
  padding: var(--spacing-3) var(--spacing-4);
  break-inside: avoid;
}
.fw-beh-honest-callout .fw-omr-callout-label {
  color: var(--navy);
}
@media (max-width: 767px) {
  .fw-beh-contrast-cols {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   fw-counter-metric — Metrics Audit: counter_metric_pairing
   Vertical causal progression: headline node → risk callout → recommended.
   Already vertical — no mobile collapse needed.
   ───────────────────────────────────────────────────────────────────────── */
.fw-cm-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fw-cm-node {
  background: var(--report-surface);
  border: 1.5px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-4);
  break-inside: avoid;
}
.fw-cm-node--recommended {
  border: 1px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 7%, var(--report-white));
}
.fw-cm-node-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--spacing-2);
}
.fw-cm-node-title {
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--report-ink);
  line-height: var(--t-body-lh);
  overflow-wrap: break-word;
}
.fw-cm-node-sub {
  margin-top: var(--spacing-2);
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  align-items: baseline;
}
.fw-cm-sub-key {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.fw-cm-sub-val {
  font-size: var(--text-sm);
  color: var(--report-ink-80);
  overflow-wrap: break-word;
}
.fw-cm-connector {
  width: 2px;
  height: 20px;
  background: var(--report-border);
  align-self: center;
  flex-shrink: 0;
}
.fw-cm-risk {
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: var(--radius-2);
  padding: var(--spacing-3) var(--spacing-4);
  break-inside: avoid;
}
.fw-cm-risk .fw-omr-callout-label {
  color: var(--navy);
}

/* ── Score-weighting transparency table ────────────────────────────────────
   Sits inside a .rubric-section accordion directly after the Methodology
   section in scored reports. Rendered only when the product has a weights
   entry in dimension_weights.py; silent for equal-weight fallback products.
   Colours use existing band and report tokens — no hardcoded values.       */
.score-weights-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 0.85rem);
  margin-top: var(--spacing-3);
}
.score-weights-table th,
.score-weights-table td {
  padding: var(--spacing-2) var(--spacing-3);
  text-align: left;
  border-bottom: 1px solid var(--report-border);
  vertical-align: middle;
  line-height: 1.4;
}
.score-weights-table thead th {
  font-weight: 600;
  color: var(--report-text-secondary, var(--text-secondary));
  font-size: var(--text-xs, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--report-border);
}
.score-weights-table__num {
  text-align: right;
  white-space: nowrap;
  min-width: 4rem;
}
.score-weights-table__contrib {
  color: var(--report-text-secondary, var(--text-secondary));
}
.score-weights-table tfoot .score-weights-table__total-row td {
  font-weight: 600;
  border-top: 2px solid var(--report-border);
  border-bottom: none;
  padding-top: var(--spacing-3);
}
.score-weights-table__overall {
  color: var(--report-text, inherit);
}
@media (max-width: 480px) {
  .score-weights-table th,
  .score-weights-table td {
    padding: var(--spacing-2);
    font-size: var(--text-xs, 0.78rem);
  }
  .score-weights-table__num { min-width: 3rem; }
}

/* ── Floor-cap reason line ─────────────────────────────────────────────────
   Shown below the gauge when a sub-50 dimension holds the overall band at
   Solid.  Explains the gap between the numeric score and the band label in
   plain language.  Intentionally small and secondary — the number is the
   primary signal; this line is the footnote.                               */
.sv-floor-reason {
  margin: var(--spacing-2, 6px) auto 0;
  font-size: var(--text-xs, 0.78rem);
  color: var(--report-text-secondary, var(--text-secondary));
  line-height: 1.4;
  max-width: 18ch;
  text-align: center;
}

@media (max-width: 767px) {
  .sim-v2 .sv-pair-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ── Arrow-bullet list — assessment Gap & Verdict sections ─────────────────
   Each prose paragraph becomes a row: blue arrow icon on the left,
   text on the right. Used for gaps_narrative and verdict in assessment
   reports.                                                                  */
.sv-arrow-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sv-arrow-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sv-arrow-item .sv-arrow-icon {
  width: 18px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
}
.sv-arrow-item .sv-overall-body {
  margin: 0;
  flex: 1;
}

/* The Gap + What this Reveals — indent body paragraphs to align with bulleted header text */
.sim-v2 #sim-sec-gaps_narrative .sv-overall-body:not(:first-of-type),
.sim-v2 #sim-sec-verdict .sv-overall-body:not(:first-of-type) {
  padding-left: 28px;
}
/* Thin divider before the start of each new condition (4th, 6th, 8th… p),
   assuming structure: p1=summary header, then 2-para pairs (condition + elaboration). */
.sim-v2 #sim-sec-verdict .sv-overall-body:nth-of-type(even):not(:nth-of-type(2)) {
  border-top: 1px solid #e8ecf0;
  padding-top: 14px;
  margin-top: 2px;
}

/* The Gap + What this Reveals — arrow bullet on the first (header)
   paragraph only, matching the Recommended Focus arrow2.svg style. */
.sim-v2 #sim-sec-gaps_narrative .sv-overall-body:first-of-type,
.sim-v2 #sim-sec-verdict .sv-overall-body:first-of-type {
  position: relative;
  padding-left: 28px;
}
.sim-v2 #sim-sec-gaps_narrative .sv-overall-body:first-of-type::before,
.sim-v2 #sim-sec-verdict .sv-overall-body:first-of-type::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 1.5em;
  background: url("/static/images/icons/arrow2.svg") no-repeat left center / 18px 18px;
}

/* ── UER — channel_segment_breakdown ──────────────────────────────────────── */
.fw-uer-cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  align-items: start;
}
.fw-uer-cs-col {
  min-width: 0;
  overflow: hidden;
}
.fw-uer-cs-head {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-3);
}
.fw-uer-cs-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
}
.fw-uer-cs-card-head .fw-item-key {
  flex: 1;
  min-width: 0;
}
@container report-panel (max-width: 599px) {
  .fw-uer-cs-grid { grid-template-columns: 1fr; }
}

/* ── UER — metric_reliability ─────────────────────────────────────────────── */
.fw-uer-mr-band {
  padding: var(--spacing-4);
  background: var(--mr-tint, var(--report-surface));
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-3);
}
.fw-uer-mr-band-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-3);
}
.fw-uer-mr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mr-dot, var(--text-secondary));
  flex-shrink: 0;
}
.fw-uer-mr-item {
  padding: var(--spacing-3) 0;
}
.fw-uer-mr-item--sep {
  border-bottom: 0.75px solid var(--report-border);
}
.fw-uer-mr-item-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-1);
}
.fw-uer-mr-item-why {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.fw-uer-mr-distortion {
  padding: var(--spacing-4);
  background: var(--report-surface);
  border: 1.5px solid var(--report-border);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-2);
}
.fw-uer-mr-distortion-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2);
}
.fw-uer-mr-distortion-val {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.65;
}