/* ====== CHART SYSTEM ====== */

:root {
  --chart-yellow: #D9A528;
  --chart-negative: #A71712;
  --chart-red: #A71712;
  --chart-blue: var(--color-blue);
  --chart-neutral: var(--color-grey-dark);
  --chart-track: #EBEBEB;
  --chart-center-line: var(--color-black);
  --chart-label: var(--color-black);
  --chart-value-on-bar: var(--color-white);
  --chart-value-outside: var(--chart-grey-text);
  --chart-muted: var(--chart-grey-muted);
}

/* --- Chart wrapper --- */

.chart {
  margin: 0 0 1.5em;
}

.chart__header {
  margin-bottom: 1.2em;
}

.chart__title {
  font-family: var(--font-display);
  font-size: var(--chart-font-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--chart-label);
  margin: 0 0 0.3em;
}

/* Specificity raised from `.chart__subtitle` (0,1,0) to `.chart .chart__subtitle`
   (0,2,0) so it beats `.report-body p` (0,1,1) from page-report.css regardless
   of load order. Every subtitle is rendered inside a `.chart` parent by
   chart-engine.js, so the extra class selector always matches. */
.chart .chart__subtitle {
  font-family: var(--font-body);
  font-size: var(--chart-font-subtitle);
  font-weight: 400;
  line-height: 1.4;
  color: var(--chart-grey-muted);
  margin: 0;
  font-style: italic;
}

/* --- Chart body (rows container) --- */

.chart__body {
  position: relative;
}

/* --- Legend --- */

.chart__legend {
  display: flex;
  gap: var(--chart-gap-legend);
  margin-top: 0.8em;
  flex-wrap: wrap;
}

.chart__legend-item {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.chart__legend-swatch {
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--chart-radius-sm);
  flex-shrink: 0;
}

/* Reference-guide legend entry: dashed line segment matching the
   stacked-diverging benchmark ticks (engine sets --dashed on the swatch). */
.chart__legend-swatch--dashed {
  width: 1.1em;
  height: 0;
  border-radius: 0;
  border-top: 2px dashed var(--chart-center-line);
  opacity: 0.7;
  align-self: center;
}

.chart__legend-label {
  font-family: var(--font-body);
  font-size: var(--chart-font-legend);
  font-weight: 500;
  color: var(--chart-grey-text);
}

/* Grid legend: 2-column layout */
.chart__legend--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3em 1.5em;
}

/* --- Source note --- */

.chart__source {
  font-family: var(--font-body);
  font-size: var(--chart-font-caption);
  font-weight: 400;
  line-height: 1.4;
  color: var(--chart-grey-muted);
  margin: 0.8em 0 0;
  font-style: italic;
}

/* --- Figure number --- */

.chart__figure-number {
  font-family: var(--font-body);
  font-size: var(--chart-font-caption);
  font-weight: 500;
  font-style: italic;
  color: var(--chart-grey-light);
  text-align: right;
  margin: 0.6em 0 0;
}

/* --- Screen-reader table (visually hidden) --- */

.chart__table-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====== SIMPLE BAR CHART ====== */

.chart--bar .chart__row {
  display: grid;
  align-items: center;
  gap: var(--chart-gap-label);
  margin-bottom: var(--chart-gap-row);
}

.chart__label {
  font-family: var(--font-label);
  font-size: var(--chart-font-label);
  font-weight: 700;
  color: var(--chart-label);
  line-height: 1.3;
  text-align: right;
  overflow-wrap: break-word;
  word-break: normal;
}

.chart__bar {
  height: 1.8em;
  background: var(--chart-track);
  border-radius: var(--chart-radius-md);
  overflow: visible;
  position: relative;
}

.chart__bar-fill {
  height: 100%;
  width: calc(var(--bar-pct) * 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: var(--chart-radius-md);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--chart-pad-bar);
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.chart.is-visible .chart__bar-fill {
  transform: scaleX(1);
}

.chart__bar-value {
  font-family: var(--font-body);
  font-size: var(--chart-font-value);
  font-weight: 600;
  color: var(--chart-value-on-bar);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

.chart.is-visible .chart__bar-value {
  opacity: 1;
}

/* Value outside bar for small bars */
.chart__bar-value--outside {
  position: absolute;
  left: calc(var(--bar-pct) * 100% + 0.5em);
  top: 50%;
  transform: translateY(-50%);
  color: var(--chart-value-outside);
}

/* ====== GROUPED BAR CHART ====== */

.chart--grouped-bar .chart__row {
  display: grid;
  align-items: start;
  gap: var(--chart-gap-label);
  margin-bottom: var(--chart-gap-row-grouped);
}

.chart--grouped-bar .chart__bars {
  display: flex;
  flex-direction: column;
  gap: var(--chart-gap-sub-bar);
}

.chart--grouped-bar .chart__bar {
  height: 1.4em;
}

.chart--grouped-bar .chart__bar-fill {
  height: 100%;
  width: calc(var(--bar-pct) * 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: var(--chart-radius-md);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--chart-pad-segment);
  min-width: 0;
  position: relative;
}

.chart--grouped-bar .chart.is-visible .chart__bar-fill,
.chart--grouped-bar.is-visible .chart__bar-fill {
  transform: scaleX(1);
}

.chart--grouped-bar .chart__bar-value {
  font-size: var(--chart-font-value-sm);
}

/* ====== DIVERGING BAR CHART ====== */

.chart--diverging-bar .chart__body {
  position: relative;
}

.chart--diverging-bar .chart__row {
  display: grid;
  align-items: center;
  gap: 0;
  margin-bottom: var(--chart-gap-row);
  min-height: 2.2em;
}

.chart--diverging-bar .chart__label {
  text-align: right;
  padding-right: 0.8em;
}

/* Left bar area (positive/yes) */
.chart--diverging-bar .chart__bar--left {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.chart--diverging-bar .chart__bar-fill--left {
  height: 80%;
  width: calc(var(--bar-pct) * 100%);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: var(--chart-radius-md) 0 0 var(--chart-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  position: relative;
}

.chart--diverging-bar.is-visible .chart__bar-fill--left {
  transform: scaleX(1);
}

/* Center line */
.chart--diverging-bar .chart__center-line {
  width: 2px;
  height: 100%;
  background: var(--chart-center-line);
}

/* Right bar area (negative/no) */
.chart--diverging-bar .chart__bar--right {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.chart--diverging-bar .chart__bar-fill--right {
  height: 80%;
  width: calc(var(--bar-pct) * 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0 3px 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  position: relative;
}

.chart--diverging-bar.is-visible .chart__bar-fill--right {
  transform: scaleX(1);
}

/* Diverging bar values */
.chart--diverging-bar .chart__bar-value {
  font-family: var(--font-body);
  font-size: var(--chart-font-value);
  font-weight: 600;
  color: var(--chart-value-on-bar);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

.chart--diverging-bar.is-visible .chart__bar-value {
  opacity: 1;
}

/* Value labels placed outside narrow bars — diverging variant */
.chart--diverging-bar .chart__bar-value--outside {
  position: static;
  transform: none;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.chart--diverging-bar .chart__bar--left .chart__bar-value--outside {
  padding-right: 0.4em;
}
.chart--diverging-bar .chart__bar--right .chart__bar-value--outside {
  padding-left: 0.4em;
}

/* Extra column (Not sure, Net, etc.) */
.chart--diverging-bar .chart__extra {
  font-family: var(--font-body);
  font-size: var(--chart-font-value);
  font-weight: 500;
  color: var(--chart-grey-muted);
  text-align: right;
  padding-left: 0.5em;
  white-space: nowrap;
}

/* Column headers for diverging chart */
.chart--diverging-bar .chart__col-headers {
  display: grid;
  gap: 0;
  margin-bottom: 0.3em;
}

.chart--diverging-bar .chart__col-header {
  font-family: var(--font-body);
  font-size: var(--chart-font-value);
  font-weight: 500;
  color: var(--chart-grey-muted);
  white-space: nowrap;
}

.chart--diverging-bar .chart__col-header--extra {
  text-align: right;
}

/* ====== STACKED DIVERGING BAR CHART ====== */

.chart--stacked-diverging {
  margin-left: 0;
  margin-right: 0;
}

.chart--stacked-diverging .chart__body {
  position: relative;
}

/* Subtitle-only header: pull back out of the chart margins */
.chart--stacked-diverging .chart__header {
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}


.chart--stacked-diverging .chart__legend {
  margin-top: 2em;
}

/* Column headers row */
.chart--stacked-diverging .chart__sd-headers {
  display: grid;
  gap: 0;
  margin-bottom: 0.25em;
}

.chart--stacked-diverging .chart__sd-header-spacer {
  display: block;
}

.chart--stacked-diverging .chart__sd-col-header {
  font-family: var(--font-display);
  font-size: var(--chart-font-col-header);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

/* Data rows */
.chart--stacked-diverging .chart__sd-row {
  display: grid;
  align-items: center;
  gap: 0;
  --chart-gap-row: 0.18em;  /* 50% tighter than global 0.35em for denser comparison */
  margin-bottom: var(--chart-gap-row);
  min-height: 3.2em;
}

.chart--wide-label.chart--stacked-diverging .chart__sd-row {
  --chart-gap-row: 0.5em;
  min-height: 3.6em;
}

.chart--wide-label.chart--stacked-diverging .chart__label {
  line-height: 1.35;
  align-self: center;
}

.chart--stacked-diverging .chart__label {
  padding-right: 0.25em;
}

/* Left bar area */
.chart--stacked-diverging .chart__sd-left {
  height: 2em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: var(--chart-track);
  border-radius: var(--chart-radius-md) 0 0 var(--chart-radius-md);
}

/* Right bar area */
.chart--stacked-diverging .chart__sd-right {
  height: 2em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--chart-track);
  border-radius: 0 3px 3px 0;
}

/* Bar containers */
.chart--stacked-diverging .chart__sd-bar {
  display: flex;
  height: 100%;
  overflow: visible;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chart--stacked-diverging .chart__sd-bar--left {
  width: calc(var(--bar-pct) * 100%);
  transform-origin: right center;
  margin-left: auto;
  border-radius: var(--chart-radius-md) 0 0 var(--chart-radius-md);
}

.chart--stacked-diverging .chart__sd-bar--right {
  width: calc(var(--bar-pct) * 100%);
  transform-origin: left center;
  border-radius: 0 3px 3px 0;
}

.chart--stacked-diverging.is-visible .chart__sd-bar {
  transform: scaleX(1);
}

/* Individual segments */
.chart--stacked-diverging .chart__sd-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  overflow: visible;
  position: relative;
}

/* Values inside segments */
/* This rule deliberately omits 'Inter' from the fallback. The values need to
   fit inside narrow chart segments, and 'font-stretch: condensed' picks the
   condensed variant of HN if it exists; on Windows the chain falls to
   'Arial Narrow', which is intrinsically narrow as a family. Inter has no
   condensed variant, so inserting it here would render normal-width Inter
   and overflow narrow segments. */
.chart--stacked-diverging .chart__sd-value {
  font-family: 'Helvetica Neue', 'Arial Narrow', sans-serif;
  font-stretch: condensed;
  font-size: var(--chart-font-seg-value);
  font-weight: 700;
  color: var(--chart-value-on-bar);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

/* Overflow value for narrow segments — sits in the grey track */
.chart--stacked-diverging .chart__sd-value--overflow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 1;
}

.chart__sd-bar--right .chart__sd-value--overflow {
  left: calc(100% + (var(--overflow-idx, 0) * 2.2em));
  padding-left: 0.3em;
}

.chart__sd-bar--left .chart__sd-value--overflow {
  right: calc(100% + (var(--overflow-idx, 0) * 2.2em));
  padding-right: 0.3em;
}

/* Compact value labels for medium-narrow segments (4–8%) */
.chart--stacked-diverging .chart__sd-value--compact {
  font-size: var(--chart-font-value);
}

.chart--stacked-diverging.is-visible .chart__sd-value {
  opacity: 1;
}

/* Center line */
.chart--stacked-diverging .chart__sd-center {
  width: 2px;
  height: 100%;
  background: var(--chart-center-line);
}

/* Benchmark tick (engine referenceLines on stacked-diverging rows): the
   dashed sibling of the solid centre axis. Positioned per row by the engine;
   sits above track and segments, never intercepts the pointer. */
.chart--stacked-diverging .chart__sd-left,
.chart--stacked-diverging .chart__sd-right {
  position: relative;
}
.chart--stacked-diverging .chart__sd-refline {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 0;
  border-left: 2px dashed var(--chart-center-line);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

/* Extra columns (Not Sure, Net) */
.chart--stacked-diverging .chart__sd-extra {
  font-family: var(--font-display);
  font-size: var(--chart-font-seg-value);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  text-align: center;
  white-space: nowrap;
}

/* Left/right bar labels */
.chart--stacked-diverging .chart__sd-col-header--left,
.chart--stacked-diverging .chart__sd-col-header--right {
  white-space: normal;
  line-height: 1.3;
}

.chart--stacked-diverging .chart__sd-col-header--left {
  text-align: center;
}

.chart--stacked-diverging .chart__sd-col-header--right {
  text-align: center;
}

/* ====== STACKED BAR ====== */

.chart--stacked {
  margin-left: clamp(1rem, 3vw, 2.5rem);
  margin-right: clamp(1rem, 3vw, 2.5rem);
}

.chart--stacked .chart__header {
  margin-bottom: 1em;
}

.chart--stacked .chart__subtitle {
  font-size: var(--chart-font-label);
}

.chart--stacked .chart__legend {
  margin-top: 2em;
}

.chart--stacked .chart__sk-row {
  height: 3.2em;
}

.chart--stacked .chart__sk-bar {
  display: flex;
  flex: 1;
  height: 88%;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chart--stacked.is-visible .chart__sk-bar {
  transform: scaleX(1);
}

.chart--stacked .chart__sk-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.chart--stacked .chart__sk-value {
  font-family: var(--font-body);
  font-size: var(--chart-font-seg-value);
  font-weight: 600;
  color: var(--chart-value-on-bar);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

.chart--stacked.is-visible .chart__sk-value {
  opacity: 1;
}

/* ====== HEATMAP TABLE ====== */

.chart--heatmap table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--chart-font-label);
}

.chart--heatmap th {
  font-weight: 600;
  text-align: left;
  padding: 0.5em 0.6em;
  border-bottom: 2px solid var(--color-black);
  color: var(--color-black);
  font-size: var(--chart-font-caption);
  white-space: normal;
}

.chart--heatmap td {
  padding: 0.45em 0.6em;
  border-bottom: 1px solid var(--chart-grey-border);
  color: var(--chart-grey-text);
  line-height: 1.4;
  transition: background-color 0.4s ease;
  text-align: center;
}

.chart--heatmap td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--chart-label);
}

.chart--heatmap tr:last-child td {
  border-bottom: none;
}

/* Heatmap cells fade in */
.chart--heatmap td[data-heat] {
  opacity: 0;
  transition: opacity 0.4s ease, background-color 0.4s ease;
}

.chart--heatmap.is-visible td[data-heat] {
  opacity: 1;
}

/* Heatmap intensity classes */
.chart__heat--low { background-color: rgba(245, 197, 24, 0.12); }
.chart__heat--med-low { background-color: rgba(245, 197, 24, 0.25); }
.chart__heat--med { background-color: rgba(245, 197, 24, 0.40); }
.chart__heat--med-high { background-color: rgba(245, 197, 24, 0.55); }
.chart__heat--high { background-color: rgba(245, 197, 24, 0.72); }

/* Negative heat (brand red). Darkest tier inverts to white text for legibility. */
.chart__heat--neg-low { background-color: rgba(167, 23, 18, 0.12); }
.chart__heat--neg-med-low { background-color: rgba(167, 23, 18, 0.25); }
.chart__heat--neg-med { background-color: rgba(167, 23, 18, 0.42); }
.chart__heat--neg-med-high { background-color: rgba(167, 23, 18, 0.68); }
.chart__heat--neg-high { background-color: rgba(167, 23, 18, 0.88); }
/* Higher specificity than `.chart--heatmap td` so the inverted text actually applies */
.chart--heatmap td.chart__heat--neg-med-high,
.chart--heatmap td.chart__heat--neg-high { color: #fff; }

/* Heatmap scroll wrapper */
.chart--heatmap .chart__heatmap-wrap {
  overflow-x: auto;
}

/* ====== SLOPE CHART ====== */

.chart--slope .chart__slope-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart__slope-col-label {
  font-family: var(--font-display);
  font-size: var(--chart-svg-col-label);
  font-weight: 700;
  fill: var(--chart-label);
}

.chart__slope-label {
  font-family: var(--font-body);
  font-size: var(--chart-svg-label);
  opacity: 0;
  transition: opacity 0.4s ease 0.7s;
}

.chart.is-visible .chart__slope-label {
  opacity: 1;
}

.chart__slope-name {
  font-family: var(--font-label);
  font-weight: 700;
}

.chart__slope-val {
  font-weight: 400;
}

.chart__slope-line {
  stroke-dashoffset: var(--line-len);
  transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chart.is-visible .chart__slope-line {
  stroke-dashoffset: 0;
}

.chart__slope-dot {
  opacity: 0;
  transition: opacity 0.3s ease 0.6s;
}

.chart.is-visible .chart__slope-dot {
  opacity: 1;
}

.chart__slope-zero {
  opacity: 0.55;
}

.chart__slope-zero-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--chart-muted);
  opacity: 0.75;
}

/* ====== DUMBBELL CHART ====== */

.chart--dumbbell .chart__dumbbell-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart__dumbbell-label {
  font-family: var(--font-label);
  font-size: var(--chart-svg-label-lg);
  font-weight: 700;
  fill: var(--chart-label);
}

.chart__dumbbell-val {
  font-family: var(--font-body);
  font-size: var(--chart-svg-value-lg);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Trailing change column (engine flag deltaColumn). Deliberately one ink
   colour: the sign and the connector arrow carry direction, so the column
   survives greyscale printing and red-green colour deficiency, and the
   chart avoids asserting which direction is the good one. */
.chart__dumbbell-delta {
  font-family: var(--font-body);
  font-size: var(--chart-svg-value-lg);
  font-weight: 700;
  fill: var(--c26-text);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__dumbbell-delta {
  opacity: 1;
}

.chart.is-visible .chart__dumbbell-val {
  opacity: 1;
}

.chart__dumbbell-gap {
  font-family: var(--font-body);
  font-size: var(--chart-svg-value-lg);
  font-weight: 400;
  fill: var(--chart-muted);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__dumbbell-gap {
  opacity: 1;
}

.chart__dumbbell-bar {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.chart.is-visible .chart__dumbbell-bar {
  opacity: 1;
}

.chart__dumbbell-dot {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__dumbbell-dot {
  opacity: 1;
}

.chart__dumbbell-zero {
  opacity: 0.6;
}

.chart__dumbbell-zero-label {
  font-family: var(--font-body);
  font-size: var(--chart-svg-value-lg);
  font-weight: 600;
  fill: var(--chart-muted);
  opacity: 0.7;
}

/* ====== ANNOTATIONS ====== */

.chart__annotations {
  margin-top: 0.8em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.chart__annotation {
  border-left: 3px solid var(--chart-yellow);
  padding: 0.35em 0.6em;
  background: rgba(245, 197, 24, 0.06);
  border-radius: 0 3px 3px 0;
}

.chart__annotation-text {
  font-family: var(--font-body);
  font-size: var(--chart-font-annotation);
  font-weight: 500;
  color: var(--chart-grey-text);
  line-height: 1.4;
}

/* Above annotations — no yellow callout styling, just clean text */
.chart__annotations--above {
  margin-top: 0;
  margin-bottom: 0.6em;
}
.chart__annotations--above .chart__annotation {
  border-left: none;
  background: none;
  padding: 0;
}

/* Footnote for hidden small values */
.chart__footnote {
  font-family: var(--font-body);
  font-size: 0.4rem;
  font-style: italic;
  color: var(--chart-grey-text);
  margin: 0.6em 0 0;
  line-height: 1.4;
}

/* ====== SCATTER PLOT ====== */

.chart--scatter .chart__scatter-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart__scatter-tick {
  font-family: var(--font-body);
  font-size: var(--chart-svg-tick);
  font-weight: 400;
  fill: var(--chart-grey-muted);
}

.chart__scatter-axis-label {
  font-family: var(--font-body);
  font-size: var(--chart-svg-value);
  font-weight: 500;
  fill: var(--chart-grey-axis);
}

.chart__scatter-trend {
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
}

.chart.is-visible .chart__scatter-trend {
  opacity: 1;
}

.chart__scatter-dot {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__scatter-dot {
  opacity: 1;
}

.chart__scatter-label {
  font-family: var(--font-label);
  font-size: var(--chart-svg-value);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__scatter-label {
  opacity: 1;
}

/* Prior-wave ghost circle and movement arrow (points carrying `from`). The
   ghost is hollow-with-a-wash so the current solid dots stay the figure. */
.chart__scatter-ghost {
  fill-opacity: 0.13;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__scatter-ghost {
  opacity: 1;
}

.chart__scatter-arrow {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.chart.is-visible .chart__scatter-arrow {
  opacity: 1;
}

/* Embedded reading key for the from/to encoding (drawn in dead plot space).
   Reveals as one unit; its labels stay visible at phone widths because they
   decode the chart, unlike the secondary text hidden below 560px. */
.chart__scatter-key {
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}

.chart.is-visible .chart__scatter-key {
  opacity: 1;
}

.chart__scatter-key-label {
  font-family: var(--font-body);
  font-weight: 600;
  fill: var(--chart-grey-axis);
}

/* Second label line (e.g. a bloc's share) and reference-line captions. */
.chart__scatter-sublabel {
  font-family: var(--font-body);
  font-weight: 400;
  fill: var(--chart-grey-muted);
}

.chart__scatter-ref-label {
  font-family: var(--font-body);
  font-weight: 400;
  fill: var(--chart-grey-muted);
}

/* ====== CONNECTED DOT PLOT ====== */

.chart--connected-dots .chart__cdot-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart__cdot-tick {
  font-family: var(--font-body);
  font-size: var(--chart-svg-tick);
  font-weight: 400;
  fill: var(--chart-grey-muted);
}

.chart__cdot-label {
  font-family: var(--font-label);
  font-size: var(--chart-svg-label);
  font-weight: 700;
  fill: var(--chart-label);
}

.chart__cdot-line {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.chart.is-visible .chart__cdot-line {
  opacity: 1;
}

.chart__cdot-dot {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__cdot-dot {
  opacity: 1;
}

.chart__cdot-val {
  font-family: var(--font-body);
  font-size: var(--chart-svg-value);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__cdot-val {
  opacity: 1;
}

.chart__cdot-delta {
  font-family: var(--font-body);
  font-size: var(--chart-svg-tick);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__cdot-delta {
  opacity: 1;
}

/* ====== DOT-STRIP (range dot plot) ====== */

.chart--dot-strip .chart__body {
  position: relative;
}

.chart--dot-strip .chart__dotstrip-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart__dotstrip-tick {
  font-family: var(--font-body);
  font-size: var(--chart-svg-tick, 14px);
  fill: var(--chart-grey-text);
}

.chart__dotstrip-label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--chart-grey-text);
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 6px;
}

.chart__dotstrip-range {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__dotstrip-range {
  opacity: 1;
}

.chart__dotstrip-dot {
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__dotstrip-dot {
  opacity: 1;
}

.chart__dotstrip-dot:hover {
  filter: brightness(1.15);
  stroke: #fff;
  stroke-width: 2;
}

.chart__dotstrip-net {
  font-family: var(--font-body);
  font-size: var(--chart-svg-tick, 14px);
  fill: var(--chart-grey-text);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__dotstrip-net {
  opacity: 1;
}

/* Dot-strip tooltip */
.chart__dotstrip-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-dark, #0B1026);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--chart-radius-md);
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chart__dotstrip-tooltip.is-visible {
  opacity: 1;
}

/* ====== MOBILE ====== */

@media (max-width: 768px) {

  /* --- Token cascade: mobile sizes --- */
  :root {
    --chart-font-label:      0.75rem;
    --chart-font-value:      0.65rem;
    --chart-font-value-sm:   0.62rem;
    --chart-font-col-header: 0.75rem;
    --chart-font-seg-value:  0.75rem;
    --chart-font-extra:      0.85rem;
    --chart-font-caption:    0.7rem;
    --chart-font-legend:     0.72rem;
    --chart-font-annotation: 0.72rem;
  }

  /* Disable bar animations — show immediately */
  .chart__bar-fill,
  .chart--grouped-bar .chart__bar-fill,
  .chart--diverging-bar .chart__bar-fill--left,
  .chart--diverging-bar .chart__bar-fill--right {
    transform: scaleX(1);
    transition: none;
  }

  .chart__bar-value,
  .chart--diverging-bar .chart__bar-value {
    opacity: 1;
    transition: none;
  }

  .chart--heatmap td[data-heat] {
    opacity: 1;
    transition: none;
  }

  .chart__bar-value,
  .chart--diverging-bar .chart__bar-value {
    font-size: var(--chart-font-value-sm);
  }

  /* Stacked diverging: disable animations */
  .chart--stacked-diverging {
    margin-left: 0;
    margin-right: 0;
  }

  .chart--stacked-diverging .chart__sd-bar {
    transform: scaleX(1);
    transition: none;
  }

  .chart--stacked-diverging .chart__sd-value {
    opacity: 1;
    transition: none;
    font-size: 0.55rem;
    font-weight: 700;
  }

  .chart--stacked-diverging .chart__sd-value--compact {
    display: none;
  }

  .chart--wide-label.chart--stacked-diverging .chart__sd-row {
    --chart-gap-row: 0.4em;
    min-height: 3.4em;
  }

  .chart--stacked-diverging .chart__sd-row {
    min-height: 2.6em;
  }


  /* Stacked bar: disable animations */
  .chart--stacked {
    margin-left: 0;
    margin-right: 0;
  }

  .chart--stacked .chart__sk-bar {
    transform: scaleX(1);
    transition: none;
  }

  .chart--stacked .chart__sk-value {
    opacity: 1;
    transition: none;
  }

  .chart--stacked .chart__sk-row {
    height: 2.6em;
  }

  .chart__legend--grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.2em 0.8em;
  }

  /* Dumbbell: disable animations */
  .chart__dumbbell-bar,
  .chart__dumbbell-dot,
  .chart__dumbbell-val,
  .chart__dumbbell-gap {
    opacity: 1;
    transition: none;
  }

  /* Slope chart: disable animations */
  .chart__slope-line {
    stroke-dashoffset: 0;
    transition: none;
  }

  .chart__slope-dot,
  .chart__slope-label {
    opacity: 1;
    transition: none;
  }

  /* Scatter plot: disable animations */
  .chart__scatter-dot,
  .chart__scatter-label,
  .chart__scatter-trend,
  .chart__scatter-ghost,
  .chart__scatter-arrow,
  .chart__scatter-key {
    opacity: 1;
    transition: none;
  }

  /* Connected dots: disable animations */
  .chart__cdot-line,
  .chart__cdot-dot,
  .chart__cdot-val,
  .chart__cdot-delta {
    opacity: 1;
    transition: none;
  }

  /* Dot-strip: disable animations */
  .chart__dotstrip-range,
  .chart__dotstrip-dot,
  .chart__dotstrip-net {
    opacity: 1;
    transition: none;
  }

  /* Heatmap: no min-width, let tables size naturally */

  /* Heatmap scroll hint */
  .chart--heatmap .chart__heatmap-wrap {
    position: relative;
  }

  .chart--heatmap .chart__heatmap-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.85));
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  /* Hide gradient when scrolled to end or content doesn't overflow */
  .chart--heatmap .chart__heatmap-wrap.scrolled-end::after,
  .chart--heatmap .chart__heatmap-wrap.no-overflow::after {
    opacity: 0;
  }
}

/* ====== MULTI-ROW STACKED (labels + not-sure column) ====== */

.chart--stacked .chart__sk-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.chart--stacked .chart__sk-label {
  flex: 0 0 clamp(100px, 14vw, 160px);
  font-family: var(--font-label);
  font-size: var(--chart-font-label);
  font-weight: 700;
  color: var(--chart-label);
}

.chart--stacked .chart__sk-extra {
  flex: 0 0 clamp(30px, 5vw, 55px);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--chart-font-extra);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.chart--stacked .chart__sk-headers {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
}

.chart--stacked .chart__sk-header-spacer {
  flex: 1;
}

.chart--stacked .chart__sk-header-spacer:first-child {
  flex: 0 0 clamp(100px, 14vw, 160px);
}

/* ---- Above-bar category labels (anchored to first row's slice positions) ---- */
.chart--stacked .chart__sk-labels-above {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  margin-bottom: 0.45em;
  min-height: 4.6em;
}

.chart--stacked .chart__sk-label-spacer {
  flex: 0 0 clamp(100px, 14vw, 160px);
}

.chart--stacked .chart__sk-label-bar {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: flex-end;
}

.chart--stacked .chart__sk-label-slot {
  position: relative;
  overflow: visible;
  white-space: nowrap;
  padding-right: 0.4em;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

/* Three-tier staggering (mod 3): every adjacent pair of slots lands on
   different vertical lines, so long labels in narrow slots never overlap
   their neighbours horizontally. Slots 1/4 sit on the upper tier, 2/5 on
   the middle tier, 3/6 on the lower tier (touching the bar). */
.chart--stacked .chart__sk-label-slot:nth-child(3n+1) .chart__sk-label-text {
  margin-bottom: 2.9em;
}

.chart--stacked .chart__sk-label-slot:nth-child(3n+2) .chart__sk-label-text {
  margin-bottom: 1.45em;
}

.chart--stacked .chart__sk-label-text {
  position: relative;
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--chart-font-label);
  font-weight: 700;
  line-height: 1.15;
  color: var(--chart-label);
  border-left: 2px solid var(--slot-color, currentColor);
  padding-left: 0.45em;
}

/* Leader line from each label down to the top of its slice in the bar.
   The line uses the same colour as the slice (via --slot-color), set as a
   custom property on the parent slot by the renderer. The height varies by
   tier so the line lands exactly at the bar's top edge for each row of labels. */
.chart--stacked .chart__sk-label-text::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 100%;
  width: 2px;
  background-color: var(--slot-color, currentColor);
  opacity: 0.55;
  pointer-events: none;
}

.chart--stacked .chart__sk-label-slot:nth-child(3n+1) .chart__sk-label-text::after {
  height: 2.9em;
}

.chart--stacked .chart__sk-label-slot:nth-child(3n+2) .chart__sk-label-text::after {
  height: 1.45em;
}

.chart--stacked .chart__sk-label-slot:nth-child(3n+3) .chart__sk-label-text::after {
  height: 0.45em;
}

/* Hide above-bar labels on very narrow screens where overflow stacks awkwardly */
@media (max-width: 540px) {
  .chart--stacked .chart__sk-labels-above {
    display: none;
  }
}

.chart--stacked .chart__sk-header {
  flex: 0 0 clamp(30px, 5vw, 55px);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--chart-font-extra);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

/* ====== SHARED UTILITY CLASSES ====== */

/* Label indent for A/B sub-rows (replaces Unicode non-breaking space hack) */
.chart__label--indent {
  padding-left: 1em;
}

/* Delta annotation on NET column for A/B groups */
.chart__sd-delta {
  display: block;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin-top: 0.15em;
  color: var(--grey-500);
}
.chart__sd-delta--positive {
  color: var(--chart-olive);
}
.chart__sd-delta--negative {
  color: var(--seg-alarmed);
}

/* Prominent, own-line net-shift indicator (config.deltaLine) */
.chart__sd-shift {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.6em;
  margin: 0.4em 0 1em;
  padding-top: 0.5em;
  border-top: 1px solid var(--chart-grey-rule);
}
.chart__sd-shift-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--chart-grey-text);
}
.chart__sd-shift-val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  color: var(--chart-grey-text);
}
.chart__sd-shift-val--positive { color: var(--chart-olive); }
.chart__sd-shift-val--negative { color: var(--seg-alarmed); }

/* Group separator for A/B paired charts */
.chart__group-separator {
  margin-bottom: 1.8em;
  border-bottom: 1px solid var(--chart-grey-border);
}

/* Statement headers: smaller text for long quoted statements */
.chart--statement-headers .chart__sd-col-header {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}
.chart--statement-headers .chart__label {
  font-size: 0;
  padding: 0;
  width: 0;
  overflow: hidden;
}

/* Tight clustering: reduce gap between rows within a group */
.chart--tight-groups .chart__sd-row {
  margin-bottom: 0.1em;
}
.chart--tight-groups .chart__group-separator {
  margin-bottom: 1.4em;
  padding-bottom: 0.6em;
}

/* Stacked-diverging segment border-radius positions */
.chart__sd-seg--first-left  { border-radius: var(--chart-radius-md) 0 0 var(--chart-radius-md); }
.chart__sd-seg--last-right  { border-radius: 0 3px 3px 0; }
.chart__sd-seg--inner       { border-radius: 0; }

/* Stacked bar segment positions */
.chart__sk-seg--only  { border-radius: var(--chart-radius-md); }
.chart__sk-seg--first { border-radius: var(--chart-radius-md) 0 0 var(--chart-radius-md); }
.chart__sk-seg--last  { border-radius: 0 3px 3px 0; }
.chart__sk-seg--inner { border-radius: 0; }

/* ====== COLUMN (VERTICAL BAR) CHART ====== */

.chart--column {
  padding: 0.5em 0;
}

.chart--column .chart__header {
  margin-bottom: 0.3em;
}

.chart--column .chart__title {
  font-size: var(--chart-font-label);
}

.chart__col-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.3em;
  height: 140px;
  padding-top: 1.5em; /* room for value labels */
  padding-bottom: 1.6em; /* room for category labels (now positioned out of flow) */
  position: relative;
}

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

.chart__col-value {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin-bottom: 0.15em;
  transform: translateY(-100%);
  font-family: var(--font-body);
  font-size: var(--chart-font-value);
  font-weight: 600;
  color: var(--grey-600);
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

.chart.is-visible .chart__col-value {
  opacity: 1;
}

.chart__col-bar {
  width: 100%;
  border-radius: var(--chart-radius-md) var(--chart-radius-md) 0 0;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart.is-visible .chart__col-bar {
  transform: scaleY(1);
}

.chart__col-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5em;
  font-family: var(--font-body);
  font-size: var(--chart-font-value-sm);
  color: var(--grey-500);
  text-align: center;
  line-height: 1.2;
}

/* Column charts in grids fill their cell */
.chart-grid .chart--column {
  margin: 0;
}

/* Mobile: disable column animation */
@media (max-width: 768px) {
  .chart__col-bar {
    transform: scaleY(1);
    transition: none;
  }
  .chart__col-value {
    opacity: 1;
    transition: none;
  }
}

/* ====== SMALL MULTIPLES GRID ====== */

.chart-grid {
  display: grid;
  gap: 1.5em;
}

.chart-grid--3x2 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1080px) {
  .chart-grid--3x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  :root {
    --chart-font-label:      0.7rem;
    --chart-font-value:      0.6rem;
    --chart-font-value-sm:   0.58rem;
    --chart-font-col-header: 0.7rem;
    --chart-font-seg-value:  0.68rem;
    --chart-font-extra:      0.78rem;
    --chart-font-title:      0.92rem;
    --chart-font-subtitle:   0.72rem;
  }

  .chart-grid--3x2 {
    grid-template-columns: 1fr;
  }

  /* Heatmap: tables size naturally at all breakpoints */
}

/* ====== COLLAPSIBLE ACCORDIONS ====== */

.report-accordion {
  margin: 1.5em 0;
}

.report-accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--chart-grey-border);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--chart-label);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.report-accordion summary::-webkit-details-marker {
  display: none;
}

.report-accordion summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
  border-radius: 50%;
  flex-shrink: 0;
}

.report-accordion[open] summary::before {
  content: '\2212';
}

.report-accordion__content {
  padding: 1em 0;
}

/* ====== SEGMENT-COLORED ACCORDIONS ====== */

.report-accordion--segment summary {
  border-left: 4px solid transparent;
  padding-left: 1em;
  border-radius: 4px;
}

.report-accordion--segment[data-segment="market"] summary {
  border-left-color: var(--ca-seg-market);
  background: rgba(232, 148, 45, 0.08);
}
.report-accordion--segment[data-segment="market"] summary::before {
  background-color: var(--ca-seg-market);
}

.report-accordion--segment[data-segment="hopeful"] summary {
  border-left-color: var(--ca-seg-hopeful);
  background: rgba(21, 101, 192, 0.08);
}
.report-accordion--segment[data-segment="hopeful"] summary::before {
  background-color: var(--ca-seg-hopeful);
}

.report-accordion--segment[data-segment="pragmatic"] summary {
  border-left-color: var(--ca-seg-pragmatic);
  background: rgba(46, 125, 50, 0.08);
}
.report-accordion--segment[data-segment="pragmatic"] summary::before {
  background-color: var(--ca-seg-pragmatic);
}

.report-accordion--segment[data-segment="alarmed"] summary {
  border-left-color: var(--ca-seg-alarmed);
  background: rgba(198, 40, 40, 0.08);
}
.report-accordion--segment[data-segment="alarmed"] summary::before {
  background-color: var(--ca-seg-alarmed);
}

.report-accordion--segment[data-segment="disengaged"] summary {
  border-left-color: var(--ca-seg-disengaged);
  background: rgba(95, 138, 139, 0.08);
}
.report-accordion--segment[data-segment="disengaged"] summary::before {
  background-color: var(--ca-seg-disengaged);
}

/* ====== DONUT CHART ====== */

.chart--donut .chart__body {
  display: flex;
  justify-content: center;
  padding: 1em 0;
}

.chart__donut-segment {
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.5s ease;
}

.chart.is-visible .chart__donut-segment {
  opacity: 1;
}

.chart__donut-leader {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__donut-leader {
  opacity: 1;
}

.chart__donut-label {
  font-family: var(--font-label, 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif);
  font-size: 11px;
  fill: var(--grey-700, #555);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__donut-label {
  opacity: 1;
}

.chart__donut-label-name {
  font-weight: 700;
  fill: var(--grey-800, #222);
}

.chart__donut-label-pct {
  font-weight: 400;
}

/* ====== DASHBOARD EMBED ====== */

.dashboard-embed {
  margin: 2em 0;
}

.dashboard-embed__intro {
  font-weight: 500;
  margin-bottom: 0.75em;
}

.dashboard-embed__frame-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--grey-200, #e5e5e5);
}

.dashboard-embed__iframe {
  width: 100%;
  min-height: 0;
  border: none;
  transition: height 0.3s ease;
}

.dashboard-embed__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--grey-800, #222);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.dashboard-embed__close:hover {
  background: var(--grey-700, #555);
}

/* ====== BATCH SECTION EXPAND ====== */

.report-section-expand {
  margin: 2em 0;
}

.report-section-expand__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--chart-grey-border);
  border-radius: var(--chart-radius-md);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.2s ease;
}

.report-section-expand__toggle:hover {
  border-color: var(--color-blue);
}

.report-section-expand__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--chart-label, #3A3A4A);
}

.report-section-expand__action {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.report-section-expand__action-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-blue);
}

.report-section-expand__icon {
  width: 20px;
  height: 20px;
}

.report-section-expand__content {
  padding-top: 1.5em;
}

.report-section-expand__content > .report-reveal,
.report-section-expand__content > .chart-grid {
  margin-bottom: 1.5em;
}

.report-section-expand__content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .report-section-expand__toggle {
    padding: 0.7em 0.85em;
  }

  .report-section-expand__title {
    font-size: 0.95rem;
  }
}

/* ====== SMALL-MULTIPLES SLOPE (BUMPS CHART) ====== */

.chart__sms-grid {
  display: grid;
  gap: 0.5em;
}

.chart__sms-panel {
  text-align: center;
}

.chart__sms-panel-title {
  font-family: var(--font-label);
  font-size: var(--chart-font-label);
  font-weight: 700;
  color: var(--chart-grey-text);
  margin-bottom: 0.3em;
}

.chart__sms-svg {
  width: 100%;
  height: auto;
}

.chart__sms-col-label {
  font-family: var(--font-body);
  font-size: var(--chart-svg-tick-sm);
  fill: var(--chart-grey-muted);
}

.chart__sms-line {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.chart.is-visible .chart__sms-line {
  opacity: 1;
}

.chart__sms-dot {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart.is-visible .chart__sms-dot {
  opacity: 1;
}

.chart__sms-val {
  font-family: var(--font-body);
  font-size: var(--chart-svg-value-sm);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease 0.4s;
}

.chart.is-visible .chart__sms-val {
  opacity: 1;
}

@media (max-width: 768px) {
  .chart__sms-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .chart__sms-line,
  .chart__sms-dot,
  .chart__sms-val {
    opacity: 1;
    transition: none;
  }
}

/* ====== SANKEY DIAGRAM ====== */

.chart__sankey-svg {
  width: 100%;
  height: auto;
}

.chart__sankey-flow {
  opacity: 0;
  transition: opacity 0.5s ease;
  fill-opacity: 0.35;
}

.chart.is-visible .chart__sankey-flow {
  opacity: 1;
}

.chart__sankey-flow:hover {
  fill-opacity: 0.6;
}

.chart__sankey-node {
  stroke: #fff;
  stroke-width: 1;
}

.chart__sankey-label {
  font-family: var(--font-label);
  font-size: var(--chart-svg-value);
  font-weight: 700;
  fill: var(--chart-grey-text);
}

.chart__sankey-col-header {
  font-family: var(--font-body);
  font-size: var(--chart-svg-tick);
  fill: var(--chart-grey-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sankey tooltip */
.chart__sankey-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-dark, #0B1026);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--chart-radius-md);
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chart__sankey-tooltip.is-visible {
  opacity: 1;
}

/* Dim non-hovered flows */
.chart__sankey-svg.has-hover .chart__sankey-flow {
  fill-opacity: 0.12;
  transition: fill-opacity 0.15s ease;
}

.chart__sankey-svg.has-hover .chart__sankey-flow.is-hovered {
  fill-opacity: 0.6;
}

@media (max-width: 768px) {
  .chart__sankey-flow {
    opacity: 1;
    transition: none;
  }
}

/* ====== REPORT CALLOUT PANEL ====== */

.report-callout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
  background: #f9fafb;
  border-radius: var(--chart-radius-lg);
  overflow: hidden;
  margin: 2.5em 0;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.report-callout:hover {
  border-color: var(--color-blue);
}

.report-callout__media {
  padding: 2em;
}

.report-callout__media img {
  width: 100%;
  height: auto;
  display: block;
}

.report-callout__content {
  padding: 2em 3em 2em 1em;
}

.report-callout .report-callout__heading {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 2.2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-blue);
  line-height: 1.15;
  margin: 0 0 1.2em;
}

.report-callout__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: var(--font-weight-bold);
  padding: 0.7em 1.8em;
  background-color: var(--color-yellow);
  color: var(--color-black);
  border-radius: 50px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-callout:hover .report-callout__cta {
  transform: scale(1.06);
}

.report-callout__arrow {
  font-size: 1.3em;
  line-height: 1;
}

/* Text-only callout variant (no image panel) */
.report-callout--text-only {
  grid-template-columns: 1fr;
}

.report-callout--text-only .report-callout__content {
  padding: 2.5em 3em;
  text-align: center;
}

.report-callout--text-only .report-callout__desc {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--color-grey-700, #444);
  margin: 0 0 1.2em;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .report-callout--text-only .report-callout__content {
    padding: 1.5em;
  }

  .report-callout {
    grid-template-columns: 1fr;
  }

  .report-callout__media {
    padding: 1.5em 1.5em 0;
  }

  .report-callout__content {
    padding: 1.5em;
  }

  .report-callout__heading {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }
}

/* ====== LINE CHART (dial traces) ====== */

.chart--line .chart__line-svg {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
}

.chart__line-grid {
  stroke: var(--chart-track);
  stroke-width: 1;
}

.chart__line-grid--mid {
  stroke: var(--color-grey-dark);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

.chart__line-ylabel {
  font-size: 11px;
  font-family: var(--font-label, 'Helvetica Neue', Helvetica, 'Inter', sans-serif);
  fill: var(--chart-grey-text, #888);
  text-anchor: end;
}

.chart__line-xlabel {
  font-size: 11px;
  font-family: var(--font-label, 'Helvetica Neue', Helvetica, 'Inter', sans-serif);
  fill: var(--chart-grey-text, #888);
  text-anchor: middle;
}

.chart__line-path {
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart.is-visible .chart__line-path {
  stroke-dashoffset: 0 !important;
}

.chart__line-endlabel {
  font-size: 11px;
  font-family: var(--font-label, 'Helvetica Neue', Helvetica, 'Inter', sans-serif);
  font-weight: 700;
}

.chart__line-annotation {
  overflow: visible;
}

.chart__line-callout {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--chart-track);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-family: var(--font-label, 'Helvetica Neue', Helvetica, 'Inter', sans-serif);
  line-height: 1.3;
  color: var(--color-black);
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

@media (max-width: 768px) {
  .chart--line .chart__line-svg {
    max-height: 260px;
  }
  .chart__line-callout {
    font-size: 9px;
    padding: 3px 5px;
  }
}

/* ====== CA 2026: ONE label-column definition per chart family ======
   Replaces the nine bespoke label widths (plus their mobile overrides) that the
   inherited stylesheet carried. Width now comes from the spec via the engine's
   data-label-width attribute, so a tweak lives next to the chart it affects
   instead of far away in here with no record of why.

   Extra columns are sized in ch, tied to the type scale, so they fit their
   widest real content ("47%", "-24") at EVERY viewport by construction. The
   vw-based cramping failure mode stops existing rather than being patched.

   Column order matches the engine's DOM order:
     label | left bar | centre | right bar | not-sure | net
   ====== */

/* Make each chart a size container, so label columns can be sized against the
   space the chart actually has rather than against the browser window. This is
   what makes the presets behave the same in the narrow report column and in the
   wide QA gallery. inline-size containment only constrains the inline axis;
   height stays automatic. */
.chart--CA2026 { container-type: inline-size; }

.chart--CA2026 { --c26-label: fit-content(min(300px, 42vw)); }
@supports (width: 1cqw) {
  .chart--CA2026 { --c26-label: fit-content(min(300px, 40cqw)); }
}
.chart--CA2026[data-label-width="sm"]   { --c26-label: var(--c26-label-sm); }
.chart--CA2026[data-label-width="md"]   { --c26-label: var(--c26-label-md); }
.chart--CA2026[data-label-width="lg"]   { --c26-label: var(--c26-label-lg); }
/* auto = fit the longest label present, capped. fit-content(X) is
   min(max-content, max(min-content, X)): unlike bare max-content it cannot blow
   the column out on one long label, and unlike a fixed width it still shrinks
   when labels are short. */
.chart--CA2026[data-label-width="auto"] { --c26-label: fit-content(min(300px, 42vw)); }
@supports (width: 1cqw) {
  .chart--CA2026[data-label-width="auto"] { --c26-label: fit-content(min(300px, 40cqw)); }
}

.chart--CA2026.chart--bar .chart__row,
.chart--CA2026.chart--grouped-bar .chart__row {
  grid-template-columns: var(--c26-label) 1fr;
}

.chart--CA2026.chart--diverging-bar .chart__row,
.chart--CA2026.chart--diverging-bar .chart__col-headers {
  grid-template-columns:
    var(--c26-label) 1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure);
}

.chart--CA2026.chart--stacked-diverging .chart__sd-row,
.chart--CA2026.chart--stacked-diverging .chart__sd-headers {
  grid-template-columns:
    1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure) var(--c26-col-net);
}
.chart--CA2026.chart--stacked-diverging .chart__sd-row--labelled,
.chart--CA2026.chart--stacked-diverging .chart__sd-headers.chart__sd-row--labelled {
  grid-template-columns:
    var(--c26-label) 1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure) var(--c26-col-net);
}
/* Trailing year-change column (chart--sd-has-change, set by the engine when
   config.changeHeader is present): one extra ch-sized track after Net.
   No sd-no-net combination exists — a change column always rides with Net. */
.chart--CA2026.chart--stacked-diverging.chart--sd-has-change .chart__sd-row,
.chart--CA2026.chart--stacked-diverging.chart--sd-has-change .chart__sd-headers {
  grid-template-columns:
    1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure) var(--c26-col-net) var(--c26-col-change);
}
.chart--CA2026.chart--stacked-diverging.chart--sd-has-change .chart__sd-row--labelled,
.chart--CA2026.chart--stacked-diverging.chart--sd-has-change .chart__sd-headers.chart__sd-row--labelled {
  grid-template-columns:
    var(--c26-label) 1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure) var(--c26-col-net) var(--c26-col-change);
}

/* NO/NH-as-bar variant (chart--sd-nsbar, engine flag notSureBar): the NS
   number column becomes a bar on its own detached grey track. The track is
   the same 1fr as each side, so with a spec maxSide that covers the largest
   NS value, all three bars sit on one point scale. A fixed gutter detaches
   it from the right side's track. */
.chart--CA2026.chart--stacked-diverging.chart--sd-nsbar .chart__sd-row,
.chart--CA2026.chart--stacked-diverging.chart--sd-nsbar .chart__sd-headers {
  grid-template-columns:
    1fr var(--c26-centre-gap) 1fr var(--c26-col-nsgap) var(--sd-ns-track, 1fr) var(--c26-col-net);
}
.chart--CA2026.chart--stacked-diverging.chart--sd-nsbar .chart__sd-row--labelled,
.chart--CA2026.chart--stacked-diverging.chart--sd-nsbar .chart__sd-headers.chart__sd-row--labelled {
  grid-template-columns:
    var(--c26-label) 1fr var(--c26-centre-gap) 1fr var(--c26-col-nsgap) var(--sd-ns-track, 1fr) var(--c26-col-net);
}
.chart--stacked-diverging .chart__sd-nsbar {
  height: 2em;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--chart-track);
  border-radius: var(--chart-radius-md);
}
.chart--stacked-diverging .chart__sd-nsbar-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c26-neutral);
  border-radius: var(--chart-radius-md);
}
/* Value that cannot fit inside a very short fill sits beside it, in ink */
.chart--stacked-diverging .chart__sd-nsbar-value--outside {
  color: var(--c26-text);
  padding-left: 0.35em;
}

.chart--CA2026.chart--stacked-diverging.chart--sd-no-net .chart__sd-row,
.chart--CA2026.chart--stacked-diverging.chart--sd-no-net .chart__sd-headers {
  grid-template-columns: 1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure);
}
.chart--CA2026.chart--stacked-diverging.chart--sd-no-net .chart__sd-row--labelled,
.chart--CA2026.chart--stacked-diverging.chart--sd-no-net .chart__sd-headers.chart__sd-row--labelled {
  grid-template-columns:
    var(--c26-label) 1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure);
}

/* ====== CA 2026: phone layout ======
   A long actor name, a five-part scale and two extra columns cannot all fit
   across a 375px screen: the label ends up taking half the width and the
   segment values collide into mush. Below 560px the label takes its own
   full-width line above its bars, which roughly doubles the bar area. The
   label is the row's first grid child, so spanning it pushes the bars onto the
   next implicit row with no engine change. ====== */

@media (max-width: 560px) {
  .chart--CA2026.chart--stacked-diverging .chart__sd-row--labelled,
  .chart--CA2026.chart--stacked-diverging .chart__sd-headers.chart__sd-row--labelled {
    grid-template-columns:
      1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure) var(--c26-col-net);
    row-gap: 0.15em;
  }
  .chart--CA2026.chart--stacked-diverging.chart--sd-has-change .chart__sd-row--labelled,
  .chart--CA2026.chart--stacked-diverging.chart--sd-has-change .chart__sd-headers.chart__sd-row--labelled {
    grid-template-columns:
      1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure) var(--c26-col-net) var(--c26-col-change);
  }
  .chart--CA2026.chart--stacked-diverging.chart--sd-no-net .chart__sd-row--labelled,
  .chart--CA2026.chart--stacked-diverging.chart--sd-no-net .chart__sd-headers.chart__sd-row--labelled {
    grid-template-columns: 1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure);
  }
  .chart--CA2026.chart--stacked-diverging .chart__sd-row--labelled > .chart__label {
    grid-column: 1 / -1;
    text-align: left;
    padding-right: 0;
  }
  /* The headers row's leading spacer would otherwise create an empty line. */
  .chart--CA2026.chart--stacked-diverging .chart__sd-headers.chart__sd-row--labelled
    > .chart__sd-header-spacer:first-child {
    display: none;
  }

  .chart--CA2026.chart--diverging-bar .chart__row,
  .chart--CA2026.chart--diverging-bar .chart__col-headers {
    grid-template-columns:
      1fr var(--c26-centre-gap) 1fr var(--c26-col-notsure);
    row-gap: 0.15em;
  }
  .chart--CA2026.chart--diverging-bar .chart__row > .chart__label {
    grid-column: 1 / -1;
    text-align: left;
  }

  /* The engine marks values in narrow segments "compact". On a phone those are
     exactly the ones that overlap. Two legible values beat four illegible ones;
     the full set stays in the screen-reader table and the aria description. */
  .chart--CA2026.chart--stacked-diverging .chart__sd-value--compact {
    display: none;
  }

  /* Scatter secondary text (share sub-labels, average-line captions) collides
     with the point labels once the compensated fonts outgrow the squeezed
     plot. Same trade as the compact values above: the names stay, the
     secondary lines go, and the full set stays in the aria description. */
  .chart--CA2026.chart--scatter .chart__scatter-sublabel,
  .chart--CA2026.chart--scatter .chart__scatter-ref-label {
    display: none;
  }
}

/* ====== CA 2026: SVG text matches DOM text optically ======
   SVG renderers draw into a fixed viewBox, so their text is multiplied by
   renderedWidth / viewBoxWidth on screen and drifts as the container resizes,
   while DOM charts use fluid clamp() rem and never move. The engine copy
   publishes the inverse ratio as --c26-svg-scale on each SVG (ResizeObserver),
   so both substrates resolve to the same optical size. ====== */

.chart--CA2026 svg text {
  font-size: calc(var(--c26-font-label) * var(--c26-svg-scale));
}
.chart--CA2026 svg .chart__svg-value,
.chart--CA2026 svg .chart__dumbbell-value,
.chart--CA2026 svg .chart__scatter-label {
  font-size: calc(var(--c26-font-value) * var(--c26-svg-scale));
}
.chart--CA2026 svg .chart__svg-tick,
.chart--CA2026 svg .chart__axis-label {
  font-size: calc(var(--c26-font-micro) * var(--c26-svg-scale));
}
.chart--CA2026 svg .chart__scatter-sublabel,
.chart--CA2026 svg .chart__scatter-ref-label,
.chart--CA2026 svg .chart__scatter-key-label {
  font-size: calc(var(--c26-font-micro) * var(--c26-svg-scale));
}

/* Dot-strip row labels and ticks.

   These are SVG <text>, but the inherited rule sizes them at a RAW 12px. SVG
   text holds a constant optical size only if it is scaled into viewBox units;
   an unscaled 12px shrinks as the chart renders smaller, which is why figures
   3.8 and 3.9 read visibly tinier than figure 3.5 — a dumbbell, whose labels
   go through --chart-svg-label-lg and ARE scaled. Author direction 2026-08-17.
   Sized to match the dumbbell so the two chart families agree. */
.chart--CA2026 svg .chart__dotstrip-label {
  font-size: calc(var(--c26-font-label) * var(--c26-svg-scale));
  font-weight: 700;
  fill: var(--chart-label);
}

.chart--CA2026 svg .chart__dotstrip-tick {
  font-size: calc(var(--c26-font-micro) * var(--c26-svg-scale));
}

/* Dot-strip net-tick value: printed at the marker so it can be read in place. */
.chart--CA2026 svg .chart__dotstrip-net-label {
  font-size: calc(var(--c26-font-micro) * var(--c26-svg-scale));
  fill: var(--c26-text);
}

/* Per-dot printed values (engine flag dotValues). Sized at 85% of the row
   label so the numbers read at nearly label weight, per author direction:
   the row label is 12px in the strip's own stylesheet, so this is ~10.2px
   optical, scaled into viewBox units like all SVG text. */
.chart--CA2026 svg .chart__dotstrip-value {
  font-size: calc(12px * 0.85 * var(--c26-svg-scale));
  font-weight: 700;
}

/* ====== CA 2026: typography and colour from the token file ====== */
.chart--CA2026 .chart__title    { font-size: var(--c26-font-title); }
/* Subtitle and question strap carry a deliberate hierarchy (author direction
   2026-08-17). The subtitle is the editorial line — what the chart shows — so
   it takes the DARKER grey and a larger size. The question is provenance, so
   it takes the lighter grey a step down. Before this the two were the wrong
   way round: the subtitle inherited --chart-grey-muted from chart.css while
   the question sat on --chart-grey-text, which made the questionnaire wording
   the most prominent thing under the title. */
.chart--CA2026 .chart__subtitle {
  font-size: var(--c26-font-subtitle-lg);
  color: var(--chart-grey-text);
}
.chart--CA2026 .chart__label    { font-size: var(--c26-font-label); }
.chart--CA2026 .chart__bar-value,
.chart--CA2026 .chart__sd-extra,
.chart--CA2026 .chart__extra    { font-size: var(--c26-font-value); }
.chart--CA2026 .chart__caption,
.chart--CA2026 .chart__figure-number { font-size: var(--c26-font-caption); }
.chart--CA2026 .chart__legend-label,
.chart--CA2026 .chart__sd-col-header { font-size: var(--c26-font-micro); }

/* The engine's "values of 3% or below are not labelled" note.

   This needs the .chart--CA2026 prefix, unlike the rules above it, because it
   is competing with a PAGE rule rather than only with chart.css: `.report-body
   p` in page-report.css sets clamp(1rem, 1.15vw, 1.1rem) and, at (0,1,1), beats
   the bare `.chart__footnote { font-size: 0.4rem }` at (0,1,0). The note
   therefore rendered at 16px inside the report — larger than the 12.48px
   question strap it sits under — while the QA gallery, which has no
   .report-body wrapper, showed the intended 6.4px. That gap is why it went
   unnoticed; measured on the live page 2026-08-17, fixed on author direction.

   Sized at micro, one step below the question strap: 0.4rem was unreadable,
   and the note is a caveat about the chart, so it should not compete with the
   survey wording above it. */
.chart--CA2026 .chart__footnote { font-size: var(--c26-font-micro); }

/* Survey question wording, at the FOOT of the chart (engine appends it after
   the legend). Lighter than the subtitle and a size down, so it reads as
   provenance rather than as a second claim, with room around it so it is
   clearly separate from the legend above. */
.chart--CA2026 .chart__questions {
  margin: 1.1em 0 0;
  padding-top: 0.7em;
  border-top: 1px solid var(--c26-rule);
}

.chart--CA2026 .chart__question {
  font-family: var(--font-body);
  font-size: var(--c26-font-micro);
  font-style: italic;
  line-height: 1.5;
  color: var(--chart-grey-muted);
  margin: 0;
}

/* Space BETWEEN question lines on the two-battery charts, without adding a
   gap above the first one. */
.chart--CA2026 .chart__question + .chart__question {
  margin-top: 0.55em;
}

/* Signed verdict colours (engine config.netSignColor / deltaSignColor).

   The pair is the one the published UK system already uses for signed deltas
   (.chart__sd-delta--positive/--negative), reused verbatim so every signed
   number in the report — group delta, net column, dumbbell change — is the
   same two colours. No new colour enters the system: the artwork's #009245
   was deliberately not adopted, per author direction 2026-08-17 to defer to
   whatever the system already had. */
.chart--CA2026 .chart__sd-extra--positive,
.chart--CA2026 .chart__dumbbell-delta--positive { color: var(--chart-olive); fill: var(--chart-olive); }
.chart--CA2026 .chart__sd-extra--negative,
.chart--CA2026 .chart__dumbbell-delta--negative { color: var(--seg-alarmed); fill: var(--seg-alarmed); }

/* Quadrant corner captions on scatter frames with a 50/50 crosshair.
   Pale enough to sit behind the data; they are furniture, not marks. */
.chart--CA2026 svg .chart__scatter-quadrant {
  font-family: var(--font-body);
  font-size: calc(var(--c26-font-micro) * var(--c26-svg-scale));
  font-weight: 700;
  fill: var(--grey-300);
}

/* --- Placed SVG figures (Section 5 mindset shares) ---------------------
   Figures 5.1 and 5.3 are static SVGs generated from the tabulated segment
   shares by Reference/TEMP-ClaudeWorking/ca2026-mindset-figures/
   generate_mindset_figures.py, not chart-engine charts: they use the CA
   segment palette as a categorical encoding, which the engine's valence
   scales deliberately cannot express. They borrow the engine's header and
   figure-number furniture so they read as part of the same family, so the
   only thing needed here is the body layout. --- */

.chart__svgpair,
.chart__svgsingle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.5em;
}

.chart__svgpair img,
.chart__svgsingle img {
  height: auto;
  max-width: 100%;
}

/* Two wheels share the row down to the point where each would be too small to
   read its own leader labels; below that they stack full width. */
.chart__svgpair img {
  flex: 1 1 300px;
  min-width: 0;
  /* 420, up from 340 (author direction 2026-08-17): the two wheels were
     drawn small inside a lot of white space. The gutter between them is the
     flex gap above, which stays, so they gain size without closing up. */
  max-width: 420px;
}

.chart__svgsingle img {
  flex: 1 1 100%;
  max-width: 580px;
}