/* Shared chart controls. Analytical copy, scales and semantic colours stay local. */
.explorer-plot, .cm-scatter { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.explorer-plot > svg { display: block; width: 100%; min-width: 720px; max-width: none; height: auto; }
.explorer-plot:focus-visible, .cm-scatter:focus-visible { outline: 2px solid var(--clean, #3eaf6f); outline-offset: 4px; }
.explorer-controls { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0 10px; }
.explorer-picker { display: grid; gap: 8px; min-width: 0; max-width: 100%; color: var(--fg-2); font: 500 12px/1.4 var(--font-body); }
.explorer-picker select { max-width: 100%; width: min(460px, 100%); min-height: 44px; padding: 10px 36px 10px 12px; border: 1px solid var(--line-3); border-radius: 4px; background: var(--bg-1); color: var(--fg-1); font: 400 14px/1.4 var(--font-body); text-overflow: ellipsis; }
.explorer-picker select:focus-visible { outline: 2px solid var(--clean, #3eaf6f); outline-offset: 3px; }
.explorer-count, .explorer-hint { color: var(--fg-3); font: 400 12px/1.6 var(--font-body); }
.explorer-hint { margin: 10px 0 0; }
.explorer-count { padding-bottom: 10px; font-variant-numeric: tabular-nums; }
.ps-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-range-tools { display: grid; justify-items: end; gap: 4px; }
.ps-range-tools .explorer-count { padding: 0; }
.ps-range { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--fg-2); font: 400 12px/1.5 var(--font-body); cursor: pointer; }
.ps-range input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--clean); color-scheme: dark; }
.ps-range input:focus-visible { outline: 2px solid var(--clean); outline-offset: 3px; }
.ps-filter { min-height: 44px; padding: 9px 13px; border: 1px solid var(--line-3); border-radius: 4px; background: var(--bg-1); color: var(--fg-2); cursor: pointer; font: 500 13px/1.4 var(--font-body); }
.ps-filter[data-group]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--group-colour); }
.ps-filter:hover { background: var(--bg-3); color: var(--fg-1); }
.ps-filter[aria-pressed="true"] { border-color: var(--group-colour, var(--clean)); background: var(--bg-3); color: var(--fg-1); }
.ps-filter:focus-visible { outline: 2px solid var(--group-colour, var(--clean)); outline-offset: 3px; }
.ps-product, .cm-point { cursor: pointer; }
.ps-product:focus-visible, .cm-point:focus-visible { outline: none; stroke: var(--fg-1); stroke-width: 3; }
.ps-product.is-selected, .cm-point.is-selected { stroke: var(--fg-1); stroke-width: 2; fill-opacity: .6; }
.explorer-selection-ring { fill: none; stroke: var(--fg-1); stroke-width: 2; pointer-events: none; }
.explorer-tooltip { position: fixed; z-index: 3000; width: 320px; max-width: calc(100vw - 24px); padding: 18px; border: 1px solid var(--line-3); border-radius: 6px; background: var(--bg-1); color: var(--fg-1); box-shadow: 0 12px 36px rgba(0,0,0,.35); pointer-events: auto; }
.explorer-tooltip[hidden] { display: none; }
.explorer-tooltip-title { display: block; font: 600 15px/1.4 var(--font-display); }
.explorer-tooltip-subtitle { margin: 6px 0 0; color: var(--fg-3); font: 400 12px/1.5 var(--font-body); }
.explorer-tooltip dl { display: grid; gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); }
.explorer-tooltip dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.explorer-tooltip dt { color: var(--fg-3); font: 400 12px/1.4 var(--font-body); }
.explorer-tooltip dd { margin: 0; text-align: right; color: var(--fg-1); font: 500 13px/1.4 var(--font-display); font-variant-numeric: tabular-nums; }

/* Product Space: a full-width plot, with controls and captions outside it. */
.section-block[data-draw="scatter"] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.section-block[data-draw="scatter"] .chart-panel { padding: 28px; }
.section-block[data-draw="scatter"] .panel-meta { flex-wrap: wrap; gap: 10px 20px; }
.section-block[data-draw="scatter"] .panel-meta .source { white-space: normal; line-height: 1.5; }
.section-block[data-draw="scatter"] .text-panel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px 32px; padding: 28px; }
.section-block[data-draw="scatter"] .text-panel .lead-line,
.section-block[data-draw="scatter"] .text-panel h3 { grid-column: 1 / -1; margin: 0; max-width: 820px; }
.section-block[data-draw="scatter"] .text-panel p { margin: 0; }
#chart-scatter { min-width: 0; }
#chart-scatter svg .quadrant-label { fill: var(--fg-2); font-size: 11px; letter-spacing: .12em; }
#chart-scatter svg .tick text { fill: var(--fg-3); }

/* Constraint Maps: a continuous report with clear chapter and table hierarchy. */
html:has(body.cm-page) { scroll-behavior: auto; }
body.cm-page { --card: var(--bg-2); --muted: #a2acb8; --dim: #909ba9; --red: #ed8585; padding-top: 64px; font: 400 16px/1.65 var(--font-body); }
.cm-page::before { content: ''; position: fixed; inset: 0 0 auto; height: 64px; z-index: 60; background: var(--bg-1); border-bottom: 1px solid var(--line-2); }
.cm-page .wrap { max-width: 1184px; padding: 48px 32px 80px; }
.cm-page .kicker { font: 600 11px/1.4 var(--font-display); color: var(--muted); letter-spacing: .12em; }
.cm-page h1 { font: 700 clamp(32px,4vw,48px)/1.12 var(--font-display); letter-spacing: -.03em; margin: 16px 0 20px; max-width: 950px; }
.cm-page .sub { font-size: 18px; line-height: 1.65; max-width: 850px; color: var(--fg-2); }
.cm-page .vintage-strip { margin: 24px 0; gap: 8px; }
.cm-page .v-chip { padding: 5px 9px; font-size: 11px; border-color: var(--line-3); }
.cm-page .lang-toggle { top: 10px; right: 24px; z-index: 70; padding: 0; height: 44px; }
.cm-page .lang-btn { min-width: 44px; min-height: 42px; font: 600 12px var(--font-body); }
.cm-page .orient { max-width: none; margin: 24px 0 40px; padding: 24px; border-radius: 6px; }
.cm-page .orient-what { font-size: 16px; line-height: 1.65; max-width: 820px; }
.cm-page .orient-how { font-size: 14px; line-height: 1.65; max-width: 820px; }
.cm-page .orient-x, .cm-page .cm-callout-x { min-height: 36px; min-width: 36px; }
.cm-page .orient-cta, .cm-page .orient-restore { min-height: 44px; padding: 10px 16px; border-radius: 4px; font-size: 14px; }
.cm-chapters { display: flex; gap: 4px; overflow-x: auto; position: sticky; top: 64px; z-index: 55; margin: 28px 0 0; padding: 10px 0; border-block: 1px solid var(--line-2); background: var(--bg-1); scrollbar-width: thin; }
.cm-chapters a { flex: 0 0 auto; min-height: 40px; display: flex; align-items: center; padding: 8px 12px; text-decoration: none; border: 1px solid transparent; border-radius: 4px; color: var(--muted); font: 500 12px/1.4 var(--font-body); }
.cm-chapters a:hover, .cm-chapters a[aria-current] { color: var(--fg-1); background: var(--bg-2); border-color: var(--line-3); }
.cm-page :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.cm-page section { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line-3); scroll-margin-top: 136px; }
.cm-page h2 { font: 600 clamp(25px,3vw,32px)/1.25 var(--font-display); letter-spacing: -.02em; margin: 0 0 24px; }
.cm-page h2 .play-dot { flex: 0 0 10px; width: 10px; height: 10px; }
.cm-page h3 { font: 600 19px/1.4 var(--font-display); color: var(--fg-1); text-transform: none; letter-spacing: -.01em; margin: 40px 0 12px; }
.cm-page .sec-sub { font-size: 15px; line-height: 1.7; margin-bottom: 20px; max-width: 850px; }
.cm-page .viz-feature { display: block; margin: 0; }
.cm-page .viz-single { margin: 0; }
.cm-page .viz-textpanel { max-width: 900px; padding: 0; border: 0; background: none; border-radius: 0; margin: 0 0 28px; }
.cm-page .viz-textpanel .micro { font: 500 11px/1.5 var(--font-display); color: var(--muted); letter-spacing: .08em; }
.cm-page .viz-textpanel p { font: 400 16px/1.75 var(--font-body); }
.cm-chart-pair { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px; align-items: start; }
.cm-page .chart-panel { padding: 24px; border-radius: 6px; overflow: visible; background: var(--bg-2); }
.cm-page .accent-bar { height: 2px; border-radius: 6px 6px 0 0; }
.cm-page .panel-meta { flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; padding-bottom: 16px; }
.cm-page .panel-meta h3 { margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: -.01em; }
.cm-page .panel-meta .source { white-space: normal; font: 400 11px/1.5 var(--font-body); color: var(--muted); letter-spacing: 0; }
.cm-page .cm-bars { gap: 0; }
.cm-page .cm-bar-row { grid-template-columns: 135px minmax(50px,1fr) auto; min-height: 44px; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-1); }
.cm-page .cm-bar-row:last-child { border-bottom: 0; }
.cm-page .cm-bar-label { white-space: normal; overflow: visible; text-overflow: clip; text-align: left; font: 500 12px/1.45 var(--font-body); color: var(--fg-2); }
.cm-page .cm-bar-val { font: 500 12px/1.4 var(--font-display); }
.cm-page .cm-bar-val .u { display: none; }
.cm-page .cm-bar-val .b { display: inline-block; font-size: 11px; margin-left: 8px; }
.cm-page .cm-bar-fill { height: 8px; border-radius: 2px; }
.cm-page .cm-scatter svg { min-width: 480px; }
.cm-page .cm-scatter text { font-family: var(--font-body); }
.cm-page .table-scroll { margin: 24px 0; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); }
.cm-page table { min-width: 760px; font-size: 14px; line-height: 1.6; }
.cm-page table th { padding: 14px 16px; font: 600 11px/1.5 var(--font-display); color: var(--muted); letter-spacing: .04em; background: var(--bg-1); }
.cm-page table td { padding: 14px 16px; }
.cm-page table tbody tr:last-child > td { border-bottom: 0; }
.cm-page tr.drillable { scroll-margin-top: 136px; }
.cm-page tr.drillable:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.cm-page tr.drillable.open > td { background: var(--bg-3); }
.cm-page .chev { margin-right: 8px; }
.cm-page .sev-bar { display: none; }
.cm-page .drill-grid { gap: 24px; margin-top: 20px; }
.cm-page tr.drill-row > td { padding: 24px; background: var(--bg-1); }
.cm-page .drill-narr { font-size: 14px; line-height: 1.75; }
.cm-page .drill-col h4 { font: 600 11px/1.5 var(--font-display); color: var(--muted); margin-bottom: 12px; }
.cm-page .drill-item { padding: 5px 0; font-size: 13px; }
.cm-page .stack-table { min-width: 860px; }
.cm-page .stack-table td { font-size: 14px; }
.cm-page .stack-table td:first-child { width: 17%; font-weight: 600; }
.cm-page .stack-table .own, .cm-page .stack-table .ev { font-size: 13px; line-height: 1.6; color: var(--muted); }
.cm-page .fin-table { min-width: 960px; }
.cm-page .fin-table td { font-size: 14px; line-height: 1.65; }
.cm-page .fin-table .act, .cm-page .bank-note { font-size: 13px; color: var(--muted); font-style: normal; }
.cm-page .note { max-width: 900px; padding: 12px 20px; margin: 28px 0; font-size: 14px; line-height: 1.75; border-left-color: var(--line-3); }
.cm-page .rnt-line { display: block; padding: 18px 20px; font-size: 14px; line-height: 1.75; border-radius: 4px; }
.cm-page #method .sec-sub { margin-bottom: 0; }
.cm-page footer { font-size: 12px; line-height: 1.7; }
@media (max-width: 1000px) {
  .cm-chart-pair { grid-template-columns: minmax(0,1fr); }
  .cm-page .cm-scatter { max-width: 760px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .section-block[data-draw="scatter"] .chart-panel,
  .section-block[data-draw="scatter"] .text-panel { padding: 20px; }
  .section-block[data-draw="scatter"] .text-panel { grid-template-columns: minmax(0,1fr); }
  .explorer-controls { align-items: stretch; }
  .explorer-picker, .explorer-picker select { width: 100%; }
  .ps-range-tools { justify-items: start; }
  .cm-page .wrap { padding: 32px 20px 64px; }
  .cm-page .sub { font-size: 16px; }
  .cm-page section { margin-top: 48px; }
  .cm-page .chart-panel, .cm-page .orient { padding: 20px; }
  .cm-page .cm-bar-row { grid-template-columns: 105px minmax(24px,1fr) auto; gap: 10px; }
  .cm-page .cm-bar-val .b { display: inline-block; margin-left: 8px; }
  .cm-page .cm-bar-label { font-size: 12px; }
}
@media print {
  body.cm-page { padding-top: 0; }
  .cm-page::before, .cm-chapters, .explorer-controls, .ps-filters, .explorer-tooltip { display: none; }
  .explorer-plot, .cm-scatter, .cm-page .table-scroll { overflow: visible; }
}