/* Components shared by the home and insights pages: two-tone heads, Sam's
   episode brief, charts and the aligned research modules. Page layout lives
   in article.css (home) and insights-page.css (/insights). */

/* Chart geometry, read by summary-charts.js. SVG units
   before the chart scales to its card; axis bounds are shares (.8 = 80%). */
:root{--cb-chart-width:520;--cb-chart-row:22;--cb-chart-bar-inset:6;--cb-chart-radius:3;--cb-chart-pad-left:92;--cb-chart-pad-right:48;--cb-chart-pad-top:8;--cb-chart-pad-bottom:30;--cb-chart-dot:7}

/* Two-tone section titles, after the Frontier article heads */
.section-head h2{color:var(--ink)}
.section-head h2>span{display:block;color:var(--white)}

/* Section heads inside a section */
.section-head--sub{margin:clamp(48px,5vw,72px) 0 20px}
.section-head--sub h3{font-size:24px;font-weight:600}
.section-head--sub p{font-size:16px}

/* 01 Episode */
.episode-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px}
.episode-request blockquote{margin:14px 0 0;font-size:19px;line-height:1.55;color:var(--white)}
.episode-hidden{display:grid;gap:14px;align-content:start}
.hidden-gate{display:grid;gap:14px;padding:6px 0}
.hidden-gate p{color:var(--ink-strong)}
.gate-actions{display:flex;flex-wrap:wrap;gap:10px}
.needs-table td:first-child{color:var(--white);font-weight:600;white-space:nowrap}
.needs-table td{font-size:14px}
@media (max-width:900px){.episode-grid{grid-template-columns:1fr}}

.market-strip{margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel3)}
.market-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px}
.market-head h3,.market-head h4{font-size:18px;font-weight:600}
.market-squares{display:grid;grid-template-columns:repeat(53,minmax(0,1fr));gap:3px}
.market-squares i,.mk{display:block;aspect-ratio:1;border-radius:2px}
.mk{width:12px;height:12px;flex:none;margin-top:4px}
.mk-fit{background:var(--pass)}
.mk-trap{background:var(--miss)}
.mk-near{background:transparent;box-shadow:inset 0 0 0 1.5px var(--miss)}
.mk-far{background:#66625e}
.market-legend{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ink-strong)}
.market-legend li{display:flex;gap:10px;align-items:flex-start}
.market-legend strong{color:var(--white)}
/* The near misses (the retired deep dive's table, insights-research.css .ins-table) open with the hidden needs. */
.market-strip .near-misses{margin-top:28px}
/* Phones: each near miss reads as one short block, the offer, its result, then why, so nothing scrolls sideways. */
@media (max-width:640px){
  .near-misses :is(.ins-table,caption,tbody,tr,th,td){display:block;width:auto}
  .near-misses .ins-table thead{display:none}
  .near-misses .ins-table tbody tr{padding:12px 0;border-top:1px solid var(--fx-hair)}
  .near-misses .ins-table tbody :is(th,td){padding:2px 0;border:0}
}
@media (max-width:640px){.market-squares{grid-template-columns:repeat(27,minmax(0,1fr));gap:2px}}

/* 03 Runs */
.comparison-root{min-height:200px}
.note{margin-top:16px}

/* 04 Results */
.chart-table{margin-top:14px}
.chart-table summary{cursor:pointer;font-size:14px;color:var(--white)}
.chart-table table{margin-top:10px}

/* 06 Failures */
.explorer{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel3)}
.explorer>summary{cursor:pointer;padding:18px 22px;font-size:16px;font-weight:500;color:var(--white)}
.explorer[open]>summary{border-bottom:1px solid var(--line)}
.explorer>div{padding:20px 22px}


/* Replay: align the recorded-run map with the page system */
.comparison-root .cbmap{--map-ground:var(--panel2);--map-ink:var(--ink-strong);--map-muted:var(--ink);--map-rule:rgba(255,255,255,.16);--map-gold:var(--gold);padding:0}
.comparison-root .cbmap button{font:500 14px/1.2 var(--display);background:transparent;color:var(--white);border:1px solid var(--line-strong);border-radius:999px;min-height:40px;padding:8px 16px}
.comparison-root .cbmap button:hover{background:transparent;border-color:var(--white)}
.comparison-root .cbmap .cbmap-play-button{background:var(--blue);border-color:var(--blue);min-width:96px}
.comparison-root .cbmap .cbmap-play-button:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.comparison-root .cbmap .cbmap-icon-button{min-width:40px;padding:6px;font-size:16px;color:var(--white);border-color:var(--line-strong)}
.comparison-root .cbmap .cbmap-text-button,.comparison-root .cbmap .cbmap-exchange-button{color:var(--white);background:transparent;border-color:var(--line-strong);padding:8px 14px}
.comparison-root .cbmap .cbmap-exchange-button:hover{background:transparent;color:var(--white);border-color:var(--white)}
.comparison-root .cbmap .cbmap-latest-button{background:var(--white);border-color:var(--white);color:#111}
.comparison-root .cbmap-range{accent-color:var(--white)}
.comparison-root .cbmap-select{background:var(--panel3);border-color:var(--line-strong);border-radius:10px;color:var(--white);font-size:14px}
.comparison-root .cbmap-model-label{font:400 12px/1.4 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)}
/* Lighter dots on the dark map (the research team's C6, 19 Oct; this rule had kept them dark). */
.comparison-root .cbmap-node{fill:#b9b4ae;opacity:.6}
.comparison-root .cbmap-node.seen{opacity:.9}
.comparison-root .cbmap-node.qualifies{fill:var(--pass);opacity:.85}
.comparison-root .cbmap-key-qualifies{background:var(--pass)}
.comparison-root .cbmap-answer-zone{fill:rgba(57,135,229,.07);stroke:rgba(57,135,229,.6)}
.comparison-root .cbmap-zone-label,.comparison-root .cbmap-start-label{fill:var(--ink-strong);font:500 20px var(--display)}
.comparison-root .cbmap[data-outcome=passed] .cbmap-choice-ring{stroke:var(--pass)}
.comparison-root .cbmap[data-outcome="did not pass"] .cbmap-choice-ring{stroke:var(--miss)}
.comparison-root .cbmap-message-customer{border-left-color:var(--gold)}
.comparison-root .cbmap-message-customer .cbmap-message-heading>strong{color:var(--gold)}
.comparison-root .cbmap-source a{color:var(--white)}
.comparison-root .cbmap-stats strong,.comparison-root .cbmap-stage>.cbmap-stats strong{color:var(--white)}