/* ═══════════════════════════════════════════════════════════════════════════
   RENATUS REPORT — SHARED CHART COMPONENTS
   File: static/css/report/charts.css

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

   COMPONENT INDEX
   ───────────────────────────────────────────────────────────────────────────
   SECTION SCAFFOLDING
     .mi-section            Section wrapper (continuous-scroll)
     .mi-eyebrow            Section category label
     .mi-title              Section heading
     .mi-standfirst         Opening pull-quote paragraph
     .mi-body               Body paragraph
     .mi-src                Inline source superscript
     .mi-divider            Section separator rule
     .mi-figure             Chart/figure block wrapper
     .mi-figure-title       Chart headline (finding, not topic)
     .mi-figure-sub         Chart subtitle / scope line
     .mi-figure-source      Per-figure attribution line
     .mi-analyst (S4)       Analyst's View callout (dark bg)

   STAT COMPONENTS
     .mi-stat-cards         2-up stat card grid
     .mi-stat-card          Individual stat card
     .mi-stat-callout-grid  Callout grid (big left-border numbers)
     .mi-stat-callout       Individual callout

   CHART COMPONENTS
     C1  .mi-seg-*          Segmented bar (composition/share)
     C2  (see stat callouts above)
     C3  .mi-waterfall-*    Waterfall / revenue bridge
     C3b .mi-line-*         SVG line trend chart
     C4  .mi-hbar-*         Horizontal bar (rankings)
     C5  .mi-twobar-*       Two-bar + multiplier
     C7  .mi-dot-*          Dot plot (geographic / entity spread)
     T2  .scorecard         Scorecard table (pip scores + badges)
     T3  .mi-heatmap        Heat map table

   STRUCTURAL COMPONENTS
     S1  .mi-timeline-*     Horizontal above/below-axis timeline
     S2  .mi-capital-*      Capital event cards (2×2 grid)
     .mi-key-findings       Numbered key findings list
     .mi-intel-grid         2-column intelligence brief grid
     .mi-meta-line          Report identity meta bar
     .mi-sources-section    Sources & methodology section

   REPORT CONTEXT OVERRIDES
     .report-container.*    Split-screen panel overrides

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


/* ───────────────────────────────────────────────────────────────────────────
   SECTION SCAFFOLDING
   ─────────────────────────────────────────────────────────────────────────── */

.mi-section {
  padding: 0;
  max-width: var(--report-page-w);
  margin: 48px auto 0;
}

.mi-section:last-child {
  padding-bottom: var(--spacing-12);
}

.mi-eyebrow {
  display: block;
  font-size: var(--chart-heading-size);
  font-weight: var(--chart-heading-wt);
  letter-spacing: 1.5px;
  color: var(--report-ink);
  margin-top: 20px;
  margin-bottom: var(--spacing-2);
}


.mi-src {
  font-size: var(--t-small);
  color: var(--report-ink);
  vertical-align: baseline;
  font-weight: var(--font-weight-normal);
  line-height: inherit;
  margin-left: 0.5em;
}

.mi-standfirst .mi-src {
  font-size: 14px;
}

.mi-figure {
  border-top: 0.75px solid var(--report-border);
  border-bottom: 0.75px solid var(--report-border);
  padding: var(--spacing-8) 0;
  margin: var(--spacing-6) 0;
}

.mi-figure-title {
  font-size: var(--chart-heading-size);
  font-weight: var(--chart-heading-wt);
  color: var(--chart-heading-color);
  line-height: 1.4;
  margin-bottom: var(--spacing-2);
}

.mi-figure-sub {
  font-size: var(--t-body);
  font-weight: var(--font-weight-normal);
  color: var(--report-ink);
  margin-bottom: var(--spacing-5);
}

.mi-figure-source {
  font-size: var(--t-small);
  color: var(--report-ink);
  line-height: 1.5;
  margin-top: var(--spacing-3);
}

.mi-figure-content {
  padding: 20px 0;
}

.mi-figure-source .mi-src {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  vertical-align: baseline;
}

.mi-divider {
  display: block;
  width: 600px;
  height: 1px;
  background: var(--report-ink-35);
  margin: var(--spacing-12) auto 0;
}

/* S4 — Analyst's View callout */
.mi-analyst {
  background: var(--report-ink);
  border-radius: var(--radius-sm);
  padding: var(--spacing-4) var(--spacing-5);
  margin: var(--spacing-4) 0;
}

.mi-analyst-label {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--spacing-2);
}

.mi-analyst-body {
  font-size: var(--t-small);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}


/* ───────────────────────────────────────────────────────────────────────────
   STAT COMPONENTS
   ─────────────────────────────────────────────────────────────────────────── */

/* 2-up stat card grid */
.mi-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.mi-stat-card {
  background: var(--report-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-4);
  min-height: 88px;
}

.mi-stat-card.hl {
  background: none;
  box-shadow: none;
  border: 1.5px solid var(--pink);
}

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

.mi-stat-card-label {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.5px;
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
  line-height: 1.4;
}

.mi-stat-card-value {
  display: block;
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--report-ink);
}

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

.mi-stat-card-note {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--font-weight-normal);
  color: var(--report-ink);
  margin-top: var(--spacing-1);
}

/* C2 — Stat callout grid (large left-border numbers) */
.mi-stat-callout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
  margin: 24px 0;
}

.mi-stat-callout {
  border: 0.75px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  padding: var(--spacing-4);
  margin-bottom: 20px;
}


.mi-stat-callout-label {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--t-heading-color);
  line-height: var(--t-heading-lh);
  margin-bottom: 8px;
}


.mi-stat-callout-value {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--report-ink);
  line-height: 1.3;
  margin-top: 10px;
  margin-bottom: var(--spacing-1);
  text-transform: capitalize;
}

.mi-stat-callout.hl .mi-stat-callout-value { color: var(--pink); }

.mi-stat-callout-note {
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--report-ink);
  line-height: var(--t-body-lh);
}


/* ═══════════════════════════════════════════════════════════════════════════
   C1 — SEGMENTED BAR
   Composition summing to 100%. Survey distributions. Population breakdowns.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-seg-bar {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 0.75px solid var(--gray-dark);
}

.mi-seg-segment {
  height: 100%;
  background: var(--report-white);
  border: none;
  border-right: 0.75px solid var(--gray-dark);
  color: var(--report-ink);
}
.mi-seg-segment:last-child { border-right: none; }

.mi-seg-segment.hl {
  background: var(--pink);
  border: none;
  border-right: 0.75px solid var(--gray-dark);
  color: var(--report-white);
}
.mi-seg-segment.hl:last-child { border-right: none; }

.mi-seg-segment.dim-1 { background: var(--report-white); }
.mi-seg-segment.dim-2 { background: var(--report-white); }
.mi-seg-segment.dim-3 { background: var(--report-white); }

.mi-seg-callouts {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-top: var(--spacing-4);
}

.mi-seg-callout {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 1.5;
}

.mi-seg-callout-name {
  display: block;
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
}

.mi-seg-callout-share {
  display: block;
  font-size: var(--chart-val-size);
  color: var(--report-ink);
}

.mi-seg-callout.hl .mi-seg-callout-name { color: var(--chart-name-hl-color); font-weight: var(--chart-name-hl-wt); }


/* ═══════════════════════════════════════════════════════════════════════════
   C3 — WATERFALL CHART
   Revenue bridge, P&L decomposition, cost build-up.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-waterfall-wrap {
  position: relative;
  padding-bottom: 120px;
  overflow: visible;
}

.mi-waterfall {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 200px;
  position: relative;
}

.mi-waterfall-baseline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--report-border);
}

.mi-waterfall-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  height: 100%;
  justify-content: flex-end;
}

.mi-waterfall-spacer {
  width: 100%;
  background: transparent;
}

.mi-waterfall-bar {
  width: 100%;
  position: relative;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.mi-waterfall-bar.total    { background: var(--report-white); border: 0.75px solid var(--gray-dark); }
.mi-waterfall-bar.positive { background: var(--report-white); border: 0.75px solid var(--gray-dark); opacity: 1; }
.mi-waterfall-bar.negative { background: var(--report-white); border: 0.75px solid var(--gray-dark); }
.mi-waterfall-bar.hl       { background: var(--pink); border: none; opacity: 1; }

.mi-waterfall-val {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--chart-val-size);
  font-weight: var(--chart-val-wt);
  color: var(--chart-val-color);
  white-space: nowrap;
}

.mi-waterfall-val.hl       { color: var(--report-white); }
.mi-waterfall-val.negative { color: var(--report-ink); }
.mi-waterfall-val--positive { color: var(--pink); }

.mi-waterfall-label {
  position: absolute;
  top: calc(100% + 10px);
  right: 50%;
  transform: rotate(-90deg);
  transform-origin: top right;
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
  line-height: 1;
  white-space: normal;
  width: 110px;
  text-align: right !important;
  direction: rtl;
}

.mi-waterfall-connector {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   C3b — LINE TREND CHART (SVG-based)
   Quantitative values over time. Max 4 series.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-line-trend {
  width: 100%;
  overflow: visible;
  display: block;
}

.mi-line-grid {
  stroke: var(--report-border);
  stroke-width: 0.5;
  stroke-dasharray: 4 4;
}

.mi-line-axis {
  stroke: var(--report-border);
  stroke-width: 1;
}

.mi-line-series {
  fill: none;
  stroke: var(--report-ink);
  stroke-width: 2;
}

.mi-line-series.hl  { stroke: var(--pink); stroke-width: 3; }
.mi-line-series.dim { stroke: var(--report-ink); stroke-width: 1.5; }

.mi-line-dot    { fill: var(--white); stroke: var(--gray-dark); stroke-width: 0.75; }
.mi-line-dot.hl { fill: var(--pink); stroke: none; r: 7.5; }

.mi-line-txt {
  font-size: 11px;
  fill: var(--report-ink);
  font-family: inherit;
}

.mi-line-end {
  font-size: 11px;
  font-weight: var(--chart-name-wt);
  fill: var(--chart-name-color);
  font-family: inherit;
}

.mi-line-end.hl { fill: var(--chart-name-hl-color); font-weight: var(--chart-name-hl-wt); }


/* ═══════════════════════════════════════════════════════════════════════════
   C4 — HORIZONTAL BAR
   Rankings of 3–10 items. One .hl bar only.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-hbar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  margin-bottom: 10px;
}

.mi-hbar-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: var(--spacing-3);
}

.mi-hbar-legend {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}

.mi-hbar-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: 14px;
  color: var(--report-ink);
}

.mi-hbar-legend-swatch {
  width: 16px;
  height: 6px;
  display: inline-block;
  border-radius: 2px;
}

.mi-hbar-legend-swatch--dim { background: var(--report-ink); }
.mi-hbar-legend-swatch--hl  { background: var(--pink); }

.mi-hbar-group {
  margin-bottom: var(--spacing-4);
}

.mi-hbar-row--compare {
  margin-top: 4px;
}

.mi-hbar-label {
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
  line-height: var(--t-heading-lh);
  text-align: left;
  margin-bottom: var(--spacing-2);
}

.mi-hbar-label.hl {
  font-weight: var(--chart-name-hl-wt);
  color: var(--chart-name-hl-color);
}

.mi-hbar-track {
  position: relative;
  height: 28px;
}

.mi-hbar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--report-white);
  border: 0.75px solid var(--gray-dark);
}

.mi-hbar-fill.hl  { background: var(--pink); border: none; }
.mi-hbar-fill.dim { background: var(--report-white); border: 0.5px solid var(--gray-dark); }
.mi-hbar-fill.stripe {
  background-image: repeating-linear-gradient(45deg, var(--report-ink-35) 0, var(--report-ink-35) 1px, var(--report-white) 0, var(--report-white) 50%);
  background-size: 6px 6px;
  background-color: var(--report-white);
  border: 0.5px solid var(--gray-dark);
}

.mi-hbar-inner-val {
  position: absolute;
  left: var(--spacing-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--chart-val-size);
  font-weight: var(--chart-val-wt);
  color: var(--chart-val-color);
  white-space: nowrap;
}

.mi-hbar-inner-val.hl  { color: var(--report-white); font-weight: var(--chart-val-hl-wt); }
.mi-hbar-inner-val.dim { color: var(--chart-val-color); font-weight: var(--chart-val-wt); }

.mi-hbar-secondary    { font-size: var(--chart-val-size); font-weight: var(--chart-val-wt); color: var(--chart-val-color); }
.mi-hbar-secondary.hl { font-weight: var(--chart-val-hl-wt); color: var(--chart-val-hl-color); }


/* ═══════════════════════════════════════════════════════════════════════════
   C5 — TWO-BAR + MULTIPLIER
   Exactly 2 groups. Always include the multiplier callout.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-twobar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.mi-twobar-row {
  display: grid;
  grid-template-columns: 170px 1fr 100px;
  gap: var(--spacing-4);
  align-items: center;
}

.mi-twobar-label    { font-size: var(--chart-name-size); font-weight: var(--chart-name-wt); color: var(--chart-name-color); text-align: right; }
.mi-twobar-label.hl { font-weight: var(--chart-name-hl-wt); color: var(--chart-name-hl-color); }

.mi-twobar-track {
  position: relative;
  height: 32px;
}

.mi-twobar-fill    { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--radius-sm); background: var(--report-white); border: 0.75px solid var(--gray-dark); }
.mi-twobar-fill.hl { background: var(--pink); border: none; }

.mi-twobar-inner-val {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  font-size: var(--chart-val-size);
  font-weight: var(--chart-val-wt);
  color: var(--chart-val-color);
  white-space: nowrap;
}

.mi-twobar-inner-val.hl {
  font-weight: var(--chart-val-hl-wt);
  color: var(--report-white);
  left: 50%;
  transform: translate(-50%, -50%);
}

.mi-twobar-multiplier { font-size: var(--chart-val-size); font-weight: var(--chart-val-wt); color: var(--chart-val-color); white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════════
   C7 — DOT PLOT
   8+ items on shared axis. Geographic spread, salary ranges, entity positions.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-dot-chart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.mi-dot-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--spacing-4);
  align-items: center;
}

.mi-dot-label    { font-size: var(--chart-name-size); font-weight: var(--chart-name-wt); color: var(--chart-name-color); text-align: right; }
.mi-dot-label.hl { font-weight: var(--chart-name-hl-wt); color: var(--chart-name-hl-color); }

.mi-dot-track {
  position: relative;
  height: 28px;
}

.mi-dot-axis-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 0.5px dashed var(--report-border);
  transform: translateY(-50%);
}

.mi-dot-connector {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: var(--report-ink);
  opacity: 0.4;
  border-radius: var(--radius-sm);
  transform: translateY(-50%);
}

.mi-dot-connector.hl { height: 3px; background: var(--pink); opacity: 1; }

.mi-dot-circle {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 0.75px solid var(--gray-dark);
  transform: translate(-50%, -50%);
}

.mi-dot-circle.hl {
  width: 15px;
  height: 15px;
  background: var(--pink);
  border: none;
}

.mi-dot-callout {
  position: absolute;
  bottom: calc(100% - 6px);
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  white-space: nowrap;
  left: 0 !important;
  width: 100%;
  text-align: center;
  transform: none;
}

.mi-dot-axis-labels {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.mi-dot-axis-scale {
  display: flex;
  justify-content: space-between;
}

.mi-dot-axis-tick { font-size: var(--t-small); color: var(--report-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   T2 — SCORECARD TABLE
   Multiple entities rated across multiple dimensions.
   ═══════════════════════════════════════════════════════════════════════════ */

.scorecard {
  width: 100%;
  border-collapse: collapse;
}

.scorecard thead th {
  font-size: var(--t-heading);
  font-weight: var(--t-heading-wt);
  color: var(--t-heading-color);
  letter-spacing: 0.5px;
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1.5px solid var(--report-ink);
  text-align: left;
}

.scorecard tbody td {
  font-size: 16px;
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  padding: var(--spacing-3) var(--spacing-3);
  border-bottom: 0.75px solid var(--report-border);
  vertical-align: top;
}

.scorecard tbody tr:last-child td { border-bottom: none; }

.scorecard tbody td:first-child {
  font-weight: 400;
  color: var(--report-ink);
}

/* Pip score dots */
.pip {
  display: flex;
  gap: 3px;
}

.pip span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--gray-light);
}

.pip span.on { background: var(--gray-dark); }
.row-rising .pip span.on { background: var(--pink); }

/* T2 — sc-bar (replaces pips in new templates) */
.sc-bar {
  display: block;
  height: 34px;
  border-radius: var(--radius-xs);
  border: 0.75px solid var(--gray-dark);
  background: var(--pink);
}
.sc-bar.ink { background: var(--report-white); }

/* Badges */
.badge {
  display: inline-block;
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--report-white);
  border: 0.75px solid var(--report-ink);
  color: var(--report-ink);
}

.badge.high   { background: var(--report-green); color: var(--report-white); }
.badge.med    { background: var(--report-amber); color: var(--report-white); }
.badge.low    { background: var(--report-red); color: var(--report-white); }
.badge.rising { background: var(--report-white); color: var(--report-ink); }
.row-rising .badge.rising { border: 1px solid var(--pink); border-radius: var(--radius-full); }


/* ═══════════════════════════════════════════════════════════════════════════
   T3 — HEAT MAP TABLE
   Intensity patterns across many entities × many attributes.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-heatmap {
  width: 100%;
  border-collapse: collapse;
}

.mi-heatmap th {
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  letter-spacing: 0.06em;
  padding: var(--spacing-2) var(--spacing-3);
  text-align: center;
  border-bottom: 1.5px solid var(--report-ink);
}

.mi-heatmap thead + tbody tr:first-child td { border-top: none; }

.mi-heatmap th.row-header {
  text-align: left;
  min-width: 130px;
}

.mi-heatmap td {
  padding: var(--spacing-2) var(--spacing-3);
  text-align: center;
  border-bottom: 0.75px solid var(--report-border);
  border-right: 2px solid var(--report-white);
  font-size: var(--t-body);
  font-weight: var(--font-weight-medium);
}

.mi-heatmap td:last-child { border-right: none; }

.mi-heatmap td.row-label {
  text-align: left;
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
}

.mi-heatmap .heat-0 { background: var(--report-white); color: var(--report-ink); }
.mi-heatmap .heat-1 { background: rgba(255,106,198,0.08); color: var(--report-ink); }
.mi-heatmap .heat-2 { background: rgba(255,106,198,0.18); color: var(--report-ink); }
.mi-heatmap .heat-3 { background: rgba(255,106,198,0.32); color: var(--report-ink); }
.mi-heatmap .heat-4 { background: rgba(255,106,198,0.55); color: var(--report-ink); }
.mi-heatmap .heat-5 { background: rgba(255,106,198,0.85); color: var(--report-white); }

.mi-heatmap .heat-hl {
  background: var(--pink);
  color: var(--report-white);
  font-weight: var(--font-weight-semibold);
}

.mi-heatmap-legend {
  margin-top: var(--spacing-2);
  display: flex;
  gap: var(--spacing-1);
  align-items: center;
  font-size: var(--t-small);
  color: var(--report-ink);
}

.mi-heatmap-hl-note {
  margin-left: var(--spacing-3);
  color: var(--pink);
  font-size: var(--t-small);
}


/* ═══════════════════════════════════════════════════════════════════════════
   S1 — HORIZONTAL TIMELINE (above/below axis)
   Chronological milestones alternating above and below a central axis.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-timeline-wrap {
  position: relative;
  padding: var(--spacing-6) 0;
  min-height: 280px;
}

.mi-timeline-axis {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--report-border);
  transform: translateY(-50%);
  z-index: 0;
}

.mi-timeline-cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-4);
  position: relative;
  z-index: 1;
}

.mi-timeline-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mi-timeline-col.above { flex-direction: column; }
.mi-timeline-col.below { flex-direction: column; }

.mi-timeline-col.above .mi-timeline-card {
  transform: translateY(20px);
}
.mi-timeline-col.above .mi-timeline-stem {
  transform: translateY(20px);
  z-index: 2;
}
.mi-timeline-col.above .mi-timeline-dot {
  transform: translateY(20px);
  z-index: 2;
}

.mi-timeline-spacer {
  flex: 1;
  min-height: 16px;
}

.mi-timeline-stem {
  width: 1px;
  height: 24px;
  background: var(--report-border);
  flex-shrink: 0;
}

.mi-timeline-stem.hl { background: var(--pink); }

.mi-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 0.75px solid var(--report-ink);
  flex-shrink: 0;
}

.mi-timeline-dot.hl {
  width: 15px;
  height: 15px;
  background: var(--pink);
  border-color: transparent;
}

.mi-timeline-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  background: var(--report-white);
  border: 0.75px solid var(--report-border);
  border-radius: 6px;
  padding: 14px 12px;
  max-width: 160px;
}

.mi-timeline-card.hl {
  background: var(--report-white);
  border: 1.5px solid var(--pink);
}

.mi-timeline-card.hl .mi-timeline-card-date { font-weight: var(--font-weight-bold); }
.mi-timeline-card.hl .mi-timeline-card-name,
.mi-timeline-card.hl .mi-timeline-card-body {
  color: var(--report-ink);
}

.mi-timeline-card-date {
  font-size: var(--chart-val-size);
  font-weight: var(--chart-val-wt);
  color: var(--chart-val-color);
  line-height: 1.3;
}

.mi-timeline-card-name {
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
  line-height: 1.3;
  margin-bottom: 15px;
}

.mi-timeline-card-body {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════════
   S2 — CAPITAL EVENT CARDS (2×2 grid)
   4 dated capital events in a 2-column grid.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-capital-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-6);
}

.mi-capital-card {
  background: var(--report-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-7);
  border: 0.75px solid var(--gray-dark);
}

.mi-capital-card.hl {
  border: 1.5px solid var(--pink);
}

.mi-capital-year {
  display: block;
  font-size: var(--chart-val-size);
  font-weight: var(--chart-val-wt);
  letter-spacing: 0.06em;
  color: var(--chart-val-color);
  margin-bottom: var(--spacing-2);
}

.mi-capital-year.hl   { color: var(--chart-val-color); }

.mi-capital-amount {
  display: block;
  font-size: 26px;
  font-weight: var(--chart-val-hl-wt);
  color: var(--chart-val-color);
  line-height: 1;
  margin-bottom: var(--spacing-3);
}

.mi-capital-amount.hl { color: var(--chart-val-hl-color); }

.mi-capital-name {
  display: block;
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
  line-height: 1.4;
  margin-bottom: 30px;
}

.mi-capital-body {
  display: block;
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   KEY FINDINGS LIST
   Numbered editorial list used on every Research report.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-key-findings {
  list-style: none;
  padding: 0 0 var(--spacing-5);
  margin: 0;
  counter-reset: findings;
  display: flex;
  flex-direction: column;
}

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

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

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

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


/* ═══════════════════════════════════════════════════════════════════════════
   SNAPSHOT SECTION PREVIEWS
   Section title + first paragraph preview for snapshot view.
   ═══════════════════════════════════════════════════════════════════════════ */

.snapshot-section-preview {
  padding: var(--spacing-3) 0;
}

.snapshot-section-preview .mi-eyebrow {
  margin-bottom: var(--spacing-1);
}

.snapshot-section-title {
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.3;
  color: var(--report-ink);
  margin: 0 0 var(--spacing-2) 0;
}

.snapshot-section-preview .rpt-standfirst {
  margin-bottom: var(--spacing-2);
}

.snapshot-section-preview .rpt-para-body {
  color: var(--report-muted);
}


/* ═══════════════════════════════════════════════════════════════════════════
   INTELLIGENCE BRIEF GRID
   2-column numbered grid for the "10 things to know" section.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.mi-intel-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0;
  padding: var(--spacing-4) 0;
  border-bottom: 0.75px solid var(--report-border);
}

.mi-intel-item:nth-last-child(-n+2) { border-bottom: none; }
.mi-intel-item:nth-child(odd) { padding-right: var(--spacing-8); }

.mi-intel-num {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--report-ink);
  padding-top: 0;
}

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


/* ═══════════════════════════════════════════════════════════════════════════
   META BAR
   Report identity row below the cover standfirst.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-meta-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  margin-top: var(--spacing-3);
}

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

/* Alias used by newer templates */
.rpt-meta-line { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--chart-heading-size); font-weight: var(--chart-heading-wt); color: var(--chart-heading-color); margin-top: 0; }
.rpt-meta-sep  { color: var(--report-border); }


/* ═══════════════════════════════════════════════════════════════════════════
   SOURCES & METHODOLOGY
   Final section of every Research report.
   ═══════════════════════════════════════════════════════════════════════════ */

#p-brief { margin-bottom: 20px; }

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

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

.mi-sources-block {
  border-top: none;
  padding-top: var(--spacing-6);
  margin-bottom: 0;
}

.mi-sources-block:first-child { border-top: none; }
.mi-sources-block + .mi-sources-block { margin-top: 24px; }

.mi-sources-block-title {
  font-size: var(--chart-heading-size);
  font-weight: var(--chart-heading-wt);
  color: var(--chart-heading-color);
  margin-bottom: 0;
}

.mi-sources-disclaimer {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  font-style: italic;
  margin-top: 8px;
  line-height: 1.75;
  color: var(--report-ink);
  margin-bottom: var(--spacing-2);
}

.mi-sources-disclaimer.muted { color: var(--report-ink); }

.mi-sources-list {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 2.2;
  margin-top: 12px;
}

.mi-sources-list em { font-style: italic; }

.fw-sources-list {
  margin-bottom: var(--spacing-6);
  font-style: italic;
}

.fw-sources-heading {
  font-size: var(--chart-heading-size);
  font-weight: var(--chart-heading-wt);
  letter-spacing: 1.2px;
  color: var(--report-ink);
  margin-bottom: var(--spacing-3);
}

.fw-source-item {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
  padding: 6px 0;
  border-bottom: 0.5px solid var(--report-ink-10);
  font-size: var(--t-small);
  line-height: 1.6;
}

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

.fw-source-name {
  font-weight: var(--font-weight-normal);
  color: var(--report-ink);
  text-decoration: none;
  flex-shrink: 0;
}

.fw-source-name:hover { text-decoration: underline; }

.fw-source-used-for {
  font-weight: var(--font-weight-light);
  color: var(--report-ink-60);
}

.fw-source-accessed {
  font-weight: var(--font-weight-light);
  color: var(--report-ink-35);
  font-size: var(--t-small);
  margin-left: auto;
  flex-shrink: 0;
}

.fw-frameworks-used {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--report-ink-10);
  font-style: italic;
}

.fw-frameworks-heading {
  font-family: var(--font-family-display);
  font-size: var(--t-base);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fw-frameworks-intro {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink-60);
  margin-bottom: 16px;
  line-height: 1.5;
}

.fw-framework-entry {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink-60);
  line-height: 1.7;
  margin-bottom: 12px;
}

.fw-framework-name {
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
}

.mi-gap-note {
  background: none;
  border-radius: var(--radius-sm);
  padding: 0;
  margin-top: 16px;
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  line-height: 1.7;
  color: var(--report-ink);
}

.mi-conflict-note {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  line-height: 1.75;
  color: var(--report-ink);
}

/* Footnote reference superscript */
.footnote-ref {
  font-size: var(--t-small);
  color: var(--pink);
  vertical-align: super;
  font-weight: var(--font-weight-medium);
  line-height: 0;
  margin-left: 1px;
}

/* source-num and source-text are in components.css — do not duplicate here */


/* ═══════════════════════════════════════════════════════════════════════════
   VENDOR / ENTITY MATRIX TABLE
   Grid table: entity columns × dimension rows.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-matrix {
  width: 100%;
  border-collapse: collapse;
}

.mi-matrix-col-label {
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
  padding: 0 var(--spacing-3) var(--spacing-4);
  text-align: center;
  border-bottom: 1.5px solid var(--report-ink);
}

.mi-matrix-col-label.hl { color: var(--chart-name-hl-color); font-weight: var(--chart-name-hl-wt); }

.mi-matrix-row-label {
  font-size: var(--chart-name-size);
  font-weight: var(--chart-name-wt);
  color: var(--chart-name-color);
  padding: var(--spacing-4) var(--spacing-3) var(--spacing-4) 0;
  border-bottom: 0.75px solid var(--report-border);
  vertical-align: middle;
}

.mi-matrix-cell {
  font-size: var(--t-body);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  padding: var(--spacing-4) var(--spacing-3);
  border-bottom: 0.75px solid var(--report-border);
  border-left: 0.75px solid var(--report-border);
  text-align: center;
  background: var(--report-white);
  vertical-align: middle;
  line-height: 1.5;
}

.mi-matrix-cell.hl {
  background: var(--pink);
  color: var(--report-white);
  font-weight: var(--font-weight-medium);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCENARIO ROWS (probability-square variant)
   Risk scenario analysis with visual probability squares.
   ═══════════════════════════════════════════════════════════════════════════ */

.mi-scenario-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mi-scenario-row-item {
  padding: 20px;
  border: 0.75px solid var(--gray-dark);
  border-top: none;
  background: var(--report-white);
}

.mi-scenario-row-item:first-child { border-top: 0.75px solid var(--gray-dark); border-radius: 6px 6px 0 0; }
.mi-scenario-row-item:last-child  { border-radius: 0 0 6px 6px; }

.mi-scenario-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

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

.mi-scenario-row-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.mi-scenario-pct    { font-size: 20px; font-weight: var(--chart-val-hl-wt); color: var(--chart-val-color); }
.mi-scenario-pct.hl { color: var(--chart-val-hl-color); }

.mi-scenario-squares,
.mi-scenario-squares { display: flex; gap: 3px; }

.mi-scenario-sq    { width: 12px; height: 12px; border-radius: 2px; background: var(--gray-light); }
.mi-scenario-sq.on { background: var(--report-ink); }
.mi-scenario-sq.hl { background: var(--pink); }

.mi-scenario-bar-track {
  height: 6px;
  background: var(--gray-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}

.mi-scenario-bar-fill    { height: 100%; border-radius: 3px; background: var(--report-ink); }
.mi-scenario-bar-fill.hl { background: var(--pink); }

.mi-scenario-row-title {
  font-size: var(--chart-name-size);
  font-weight: 500;
  font-style: italic;
  color: var(--chart-name-color);
  margin-bottom: var(--spacing-1);
  line-height: 1.4;
}

.mi-scenario-row-body {
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--report-ink);
  line-height: var(--t-body-lh);
}


/* ═══════════════════════════════════════════════════════════════════════════
   POSITIONING MATRIX (2×2 quadrant with entity dots)
   Used by: Competitive Landscape and any quadrant-positioning analysis.
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-matrix-wrap {
  width: 100%;
}

.rpt-chart-insight:has(.cl-matrix-wrap) {
  grid-template-columns: 1fr;
}

.cl-matrix-outer {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.cl-matrix-y-label-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
}

.cl-matrix-y-label {
  font-size: var(--t-small);
  font-weight: var(--t-body-wt);
  color: var(--report-ink);
  transform: rotate(-90deg);
  white-space: nowrap;
}

.cl-matrix-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cl-matrix-y-high {
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  text-align: right;
  padding-right: var(--spacing-2);
  padding-bottom: var(--spacing-1);
}

.cl-matrix-grid {
  flex: 1;
  min-height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 0.75px solid var(--report-border);
  position: relative;
}

.cl-matrix-quadrant-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cl-matrix-q-label {
  position: absolute;
  font-size: var(--t-small);
  font-weight: var(--t-body-wt);
  font-style: italic;
  color: var(--report-ink-60);
}

.cl-matrix-dot-wrap {
  position: absolute;
  transform: translate(-50%, 50%);
}

.cl-matrix-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 0.75px solid var(--report-ink);
}

.cl-matrix-dot.leader { width: 15px; height: 15px; background: var(--pink); border: none; }

.cl-matrix-dot-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: var(--t-body-wt);
  color: var(--chart-name-color);
  white-space: nowrap;
}

.cl-matrix-dot-label.leader { color: var(--chart-name-hl-color); font-weight: var(--chart-name-hl-wt); }

.cl-matrix-gap-note {
  font-size: var(--t-small);
  color: var(--report-ink);
  margin-top: var(--spacing-2);
  font-style: italic;
}

.cl-matrix-x-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-1);
}

.cl-matrix-x-low,
.cl-matrix-x-high {
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
}

.cl-matrix-x-label {
  font-size: var(--t-small);
  font-weight: var(--t-body-wt);
  color: var(--report-ink);
}

.cl-matrix-descriptor {
  margin-top: var(--spacing-4);
  border-top: 0.75px solid var(--report-border);
  padding-top: var(--spacing-4);
}

.cl-matrix-descriptor-title {
  font-size: var(--chart-heading-size);
  font-weight: var(--chart-heading-wt);
  color: var(--chart-heading-color);
  margin-bottom: var(--spacing-2);
}

.cl-matrix-descriptor-body {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 1.65;
}

.cl-matrix-chart { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════════
   DISRUPTION QUADRANT CHART
   AI/disruption probability-impact matrix with scored entities.
   ═══════════════════════════════════════════════════════════════════════════ */

.dq-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.dq-descriptor {
  border-top: 0.75px solid var(--report-border);
  padding-top: var(--spacing-4);
}

.dq-score-label {
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-1);
}

.dq-score-value {
  font-size: 32px;
  font-weight: var(--font-weight-bold);
  color: var(--report-ink);
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.dq-score-evidence {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 1.65;
}

.dq-matrix-wrap {
  position: relative;
  width: 100%;
}

.dq-matrix-grid {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0;
}

.dq-y-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) 0;
}

.dq-y-label {
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  letter-spacing: 0.06em;
}

.dq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 0.75px solid var(--report-border);
  min-height: 280px;
  position: relative;
}

.dq-row {
  display: contents;
}

.dq-cell {
  padding: var(--spacing-4);
  position: relative;
  min-height: 120px;
}

.dq-cell.top-left    { border-right: 0.75px solid var(--gray-dark); border-bottom: 0.75px solid var(--gray-dark); }
.dq-cell.top-right   { border-bottom: 0.75px solid var(--gray-dark); }
.dq-cell.bottom-left { border-right: 0.75px solid var(--gray-dark); }
.dq-cell.bottom-right { }

.dq-cell.active {
  background: var(--gray-background);
}

.dq-cell-name {
  font-size: var(--t-small);
  font-weight: var(--font-weight-bold);
  color: var(--report-ink);
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-2);
}

.dq-cell.active .dq-cell-name { color: var(--pink); }

.dq-cell-desc {
  font-size: var(--t-small);
  font-weight: var(--font-weight-light);
  color: var(--report-ink);
  line-height: 1.6;
}

.dq-dot-wrap {
  position: absolute;
  transform: translate(-50%, 50%);
}

.dq-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--report-ink);
}

.dq-dot-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  white-space: nowrap;
}

.dq-trajectory-label {
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  letter-spacing: 0.04em;
}

.dq-x-axis-wrap {
  display: flex;
  justify-content: space-between;
  padding-top: var(--spacing-1);
  padding-left: 24px;
}

.dq-x-label {
  font-size: var(--t-small);
  font-weight: var(--font-weight-medium);
  color: var(--report-ink);
  letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   REPORT CONTEXT OVERRIDES
   When report renders inside the Ren chat split-screen panel.
   ═══════════════════════════════════════════════════════════════════════════ */

.report-container .mi-section        { max-width: 800px; padding-left: 0; padding-right: 0; }
.report-container .mi-sources-section { max-width: none; }
.report-container .mi-divider         { width: 600px; }
.report-container .rpt-action-bar     { max-width: 800px; margin: 0 auto; padding-left: 0; padding-right: 0; }
.report-container .rpt-toc-drawer     { max-width: 100%; padding-left: var(--report-pad); }
.report-container .rpt-toc-drawer.open { padding-left: var(--report-pad); }
.report-container .rpt-sidebar-col    { display: none; }
.report-container .rpt-about-float-wrap { margin-left: 0; }
.report-container .mi-matrix          { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.report-container .mi-timeline-cols   { gap: var(--spacing-2); }

@media (max-width: 800px) {
  .report-container .mi-capital-grid  { grid-template-columns: 1fr; }
  .report-container .mi-hbar-row      { grid-template-columns: 200px 1fr auto; }
  .report-container .mi-dot-row       { grid-template-columns: 100px 1fr; }
  .report-container .mi-twobar-row    { grid-template-columns: 100px 1fr 80px; }
}


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

@media print {
  .mi-capital-card,
  .mi-timeline-card,
  .mi-scenario-row-item,
  .mi-intel-item,
  .mi-key-findings li { break-inside: avoid; }

  .mi-capital-card.hl,
  .mi-timeline-card.hl,
  .mi-analyst,
  .mi-hbar-fill.hl,
  .mi-dot-circle.hl,
  .mi-seg-segment.hl,
  .mi-twobar-fill.hl,
  .mi-timeline-dot.hl,
  .mi-scenario-sq.hl,
  .mi-scenario-sq.on,
  .mi-heatmap .heat-3,
  .mi-heatmap .heat-4,
  .mi-heatmap .heat-5,
  .mi-heatmap .heat-hl,
  .mi-line-series.hl,
  .mi-line-dot.hl {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .mi-divider { display: none; }
}


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

   CORRECT:   .mi-hbar-*      (describes: horizontal bar chart)
   CORRECT:   .cl-matrix-*    (describes: competitive/quadrant matrix)
   CORRECT:   .dq-grid        (describes: disruption quadrant grid)
   WRONG:     .market-intel-* (report slug as prefix — banned)
   WRONG:     .comp-land-*    (report slug as prefix — banned)

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