.whatif { margin-top: 14px; }
.whatif-panel { margin-top: 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.wi-intro { font-size: 0.85rem; color: var(--ink-2); max-width: 70ch; }
.wi-result { margin-top: 12px; padding: 10px 12px; background: var(--surface); border-radius: 8px; font-size: 0.88rem; color: var(--ink-2); }
.wi-result strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.95rem; margin-right: 6px; }
.wi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 24px; margin-top: 16px; }
.wi-top { display:flex; justify-content:space-between; align-items:baseline; gap: 8px; }
.wi-top label { font-size: 0.8rem; color: var(--ink-2); }
.wi-value { font-size: 0.9rem; font-weight: 600; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.wi-row.changed .wi-value { color: var(--brand); }
.wi-base { display:block; margin-top: 2px; font-size: 0.72rem; color: var(--ink-muted); }
.wi-row input[type=range] { width: 100%; margin: 8px 0 0; accent-color: var(--accent-property); }
.wi-row.changed input[type=range] { accent-color: var(--brand); }
.wi-actions { display:flex; gap: 10px; justify-content:flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grid); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border); }

.scenario-note { margin-top: 12px; font-size: 0.88rem; color: var(--ink-2); }
.scenario-note.inline { margin: 4px 0 0; font-size: 0.82rem; }
.scenario-note .pill { display:inline-block; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 4px; }
.legend .sw.ghost { background: repeating-linear-gradient(90deg, var(--ink-muted) 0 4px, transparent 4px 8px); }
.wi-group { grid-column: 1 / -1; margin: 6px 0 -6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); padding-bottom: 6px; border-bottom: 1px solid var(--grid); font-family: var(--font-body, system-ui, sans-serif); }
.wi-group:first-child { margin-top: 0; }
input.wi-value { width: 7.5em; text-align: right; background: transparent; border: none; border-bottom: 1px dashed transparent; border-radius: 0; padding: 0 0 1px; color: inherit; font: inherit; font-weight: 600; font-size: 0.9rem; }
.wi-row:hover input.wi-value { border-bottom-color: var(--baseline); }
input.wi-value:focus { outline: none; border-bottom: 1px solid var(--accent-property); background: var(--surface); }