/* Step 4. Same title scale as other steps; compact supporting reading. */
.headline-count { font-weight:650; }
.story-panel[data-step="4"] .story-kicker { margin-bottom:8px; }
.story-panel[data-step="4"] .story-content h2 { margin-bottom:8px; }
.story-panel[data-step="4"] .contrast-intro { font-size:14px;line-height:1.45;margin-bottom:5px; }
.interface-scatter { margin:4px 0; }
.scatter-figure { margin:0; }
.scatter-figure figcaption { font-size:12px;line-height:1.4;color:var(--ink);margin-bottom:5px; }
.scatter-units { display:block;color:var(--muted);font-size:11px; }
.scatter-controls { display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px; }
.scatter-controls button { padding:2px 5px;border:1px solid var(--rule);border-radius:3px;background:transparent;font-size:11px;min-height:23px;white-space:normal; }
.scatter-controls button[aria-pressed="true"] { background:color-mix(in srgb,var(--guided-fill) 15%,var(--paper));border-color:var(--guided-stroke);color:var(--ink); }
.scatter-plot { width:100%;height:120px;margin-top:5px; }
.scatter-plot canvas { width:100%;height:100%;display:block; }
.story-content .scatter-reading { font-size:10px;line-height:1.35;color:var(--muted);margin:3px 0; }
.story-content .scatter-caption { font-size:11px;line-height:1.35;margin:4px 0 0;color:var(--muted); }
.quartile-explanation { padding-top:5px;border-top:1px solid var(--rule); }
.quartile-explanation dl { display:grid;grid-template-columns:1fr;gap:2px;margin:0 0 4px; }
.quartile-explanation dl div { display:grid;grid-template-columns:auto 1fr;align-items:start;gap:6px; }
.quartile-explanation dt { font-weight:700;font-size:12px;line-height:1.4;color:var(--ink); }
.quartile-explanation dd { margin:0;font-size:12px;line-height:1.4; }
.story-content .quartile-explanation p { margin:0;font-size:12px;line-height:1.4; }
.robust-conclusion { margin-top:7px;padding-top:6px;border-top:1px solid var(--rule); }
.story-content .robust-conclusion .robust-lede { font-size:13px;line-height:1.4;color:var(--ink);margin:0 0 6px; }
.story-content .robust-conclusion .robust-counts { font-size:12px;line-height:1.45;margin:0 0 7px; }
.robust-result { display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; }
.robust-result strong { font:30px/1.1 var(--serif);letter-spacing:-.03em; }
.robust-result span { font-size:12px;line-height:1.4; }

/* The conclusion remains inside step 6. Its only primary action opens the corpus. */
.story-panel[data-end="true"] { grid-template-rows:76px minmax(0,1fr) 0; }
.guided-end { margin:auto 0;padding:24px 0; }
.guided-end p { font-size:16px;line-height:1.55;margin-bottom:20px; }
.guided-end .finish-kicker { color:var(--muted);font-size:14px;margin-bottom:12px; }
.guided-end h2 { font:36px/1.15 var(--serif);letter-spacing:-.025em;margin:30px 0 12px; }
.guided-end .finish-instruction { color:var(--muted);font-size:15px;margin-bottom:22px; }
.finish-primary { overflow:hidden; }
@media(max-width:760px){
  .app.guided:has(.story-panel[data-end="true"]) { grid-template-rows:44% 56%; }
  .app.guided:has(.story-panel[data-end="true"]) .map-hint,
  .app.guided:has(.story-panel[data-end="true"]) .map-legend { display:none; }
  .story-panel[data-end="true"] { grid-template-rows:47px minmax(0,1fr) 0; }
  .guided-end { margin:0;padding:10px 0; }
  .guided-end h2 { font-size:28px;margin-top:20px; }
  .guided-end p { font-size:14px;line-height:1.45;margin-bottom:12px; }
  .scatter-plot { height:170px; }
}

@media(min-width:761px){
  .story-panel[data-step="4"] { grid-template-rows:56px minmax(0,1fr) 56px; }
  .story-panel[data-step="4"] .next-hint { display:none; }
  .story-panel[data-step="4"] .story-actions { padding-top:7px;padding-bottom:4px; }
  .story-panel[data-step="4"] .story-scroll { padding-bottom:4px; }
  .story-panel[data-step="4"] .robust-conclusion .robust-lede { font-size:12px;line-height:1.35;margin-bottom:5px; }
  .story-panel[data-step="4"] .robust-conclusion .robust-counts { line-height:1.35;margin-bottom:5px; }
}

@media(min-width:761px) and (max-height:820px){
  .scatter-plot { height:104px; }
}