@layer legacy {
.outcome-section { background:var(--surface); border-block:1px solid var(--line); }
.outcome-section .section-intro h2 { max-width:24ch; }
.outcome-section .section-intro p:last-child { max-width:75ch; }
.outcome-chart-shell { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr); gap:clamp(24px,4vw,56px); margin-top:30px; align-items:start; }
.outcome-chart-main { min-width:0; }
.outcome-controls { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:13px; }
.outcome-controls label, .outcome-run-picker { display:grid; gap:6px; min-width:0; flex:1 1 185px; color:var(--muted); font:var(--t-label,500 13px/1.35 sans-serif); }
.outcome-controls select, .outcome-run-picker select { min-height:44px; width:100%; max-width:100%; padding:8px 30px 8px 11px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); font:inherit; font-size:15px; text-overflow:ellipsis; }
.outcome-count { margin:0 0 17px; color:var(--muted); font-size:15px; line-height:1.55; }
.outcome-chart-frame { position:relative; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2,8px); }
.outcome-plot { position:relative; width:100%; min-height:320px; }
.outcome-svg { display:block; width:100%; height:auto; overflow:hidden; }
.outcome-area { fill:var(--p1,#f1f4f8); }
.outcome-grid line { stroke:var(--p-rule,#dde3ec); stroke-width:1; }
.outcome-tick { fill:var(--muted); font:var(--t-tick,500 12px/1.2 monospace); }
.outcome-axis-title { fill:var(--ink); font:var(--t-label,500 13px/1.35 sans-serif); font-weight:600; }
.outcome-legend text { fill:var(--ink); font:var(--t-label,500 13px/1.35 sans-serif); }
.outcome-point { cursor:pointer; outline:none; }
.outcome-point circle, .outcome-legend-item circle { fill:var(--n300,#93a0bb); stroke:var(--surface); stroke-width:1.5; }
.outcome-point text { fill:var(--p-text,#1a2332); font:600 10px/1 var(--f-mono,monospace); pointer-events:none; }
:is(.outcome-point, .outcome-legend-item)[data-category="decision"] circle { fill:var(--blue,#1565c0); }
.outcome-point[data-category="decision"] text { fill:#fff; }
:is(.outcome-point, .outcome-legend-item)[data-category="general"] circle { fill:var(--diff,#f57c00); }
.outcome-point:hover circle { stroke:var(--ink); stroke-width:1.5; }
.outcome-point[aria-pressed="true"] circle { stroke:var(--ink); stroke-width:3; }
.outcome-point:focus-visible circle { stroke:var(--ink); stroke-width:3; stroke-dasharray:3 2; }
.outcome-detail { min-width:0; padding:22px; background:var(--teal-pale); border-top:4px solid var(--teal); }
.outcome-detail h3 { margin:0 0 6px; color:var(--ink); font:700 clamp(21px,2vw,27px)/1.2 var(--display,sans-serif); overflow-wrap:anywhere; }
.outcome-detail p { font-size:15px; line-height:1.55; }
.outcome-run-picker { margin:21px 0 19px; }
.outcome-run-detail p { margin:0 0 8px; color:var(--ink); }
.outcome-run-detail .outcome-footnote { color:var(--muted); font-size:13px; }
.outcome-run-id code { font:var(--t-tick,500 12px/1.2 monospace); font-size:13px; color:var(--ink); overflow-wrap:anywhere; word-break:break-all; }
.outcome-run-id a { color:inherit; text-decoration-color:var(--line); }
@media (max-width:850px) { .outcome-chart-shell { grid-template-columns:1fr; } }
@media (max-width:480px) { .outcome-chart-frame { padding:8px; } .outcome-controls label { flex:1 1 145px; } }
@media (prefers-reduced-motion:reduce) { .outcome-point circle { transition:none !important; animation:none !important; } }
}
/* Outside the layer: site.css sets every chart text in mono; axis titles and the legend are words, so they use the sans face. */
.outcome-svg :is(.outcome-axis-title, .outcome-legend text) { font-family:var(--f-sans,sans-serif); }