/* Scenario studio. */
.studio { display: grid; gap: var(--s4); }
.studio-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.studio-actions { display: flex; align-items: center; gap: var(--s2); }
.studio-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s4); align-items: start; }
.studio-main { display: grid; gap: var(--s3); min-width: 0; }
@media (max-width: 1040px) { .studio-body { grid-template-columns: 1fr; } }

/* pathway tabs */
.pw-tabs { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pw-tab { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4) 0 var(--s2); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font-size: var(--t-sm); font-weight: 500; cursor: pointer; transition: border-color var(--dur), background var(--dur), color var(--dur); max-width: 260px; }
.pw-tab:hover { color: var(--fg); border-color: var(--line-strong); }
.pw-tab[aria-selected="true"] { color: var(--fg); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.pw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--c); color: var(--bg); font: 700 12px/1 var(--font-display); }
.pw-dot.big { width: 32px; height: 32px; font-size: 14px; }
.pw-add { border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); min-height: 40px; }

/* chart panel */
.chart-panel { padding: var(--s3) var(--s3) var(--s2); }
.chart-head { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s1) var(--s2); flex-wrap: wrap; }
.chart-legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--fg-3); flex: 1; min-width: 0; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: var(--s2); }
.chart-legend .lg.on { color: var(--fg); font-weight: 600; }
.chart-legend .swatch-line { width: 22px; border-top-width: 2.5px; }
.chart-unit { font-size: var(--t-xs); color: var(--fg-3); }
.chart-hint { margin: var(--s2) var(--s1) 0; min-height: 1.5em; }
.chart-hint b { color: var(--fg-2); font-weight: 600; }

.sc { position: relative; width: 100%; user-select: none; -webkit-user-select: none; }
.sc-svg { width: 100%; height: auto; font-family: var(--font-sans); touch-action: pan-y; }
.sc-svg[data-tool="draw"] { cursor: crosshair; touch-action: none; }
.sc-svg[data-tool="spline"], .sc-svg[data-tool="param"] { touch-action: none; } /* handles must take vertical drags; scroll beside the chart */
.sc-svg[data-tool="spline"] .sc-hit { cursor: copy; }
.sc-grid line { stroke: var(--grid); }
.sc-axis text { fill: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.sc-unit { font-weight: 600; }
.sc-ref { stroke: var(--ref-line); stroke-dasharray: 3 5; }
.sc-ref-l { fill: var(--fg-3); font-size: 10.5px; font-weight: 600; }
.sc-today { stroke: var(--line-strong); stroke-dasharray: 2 3; }
.sc-out-l { fill: var(--danger); font-size: 10.5px; opacity: .85; }
.sc-hit { fill: transparent; }
.sc-line { fill: none; stroke-width: 1.6; opacity: .55; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.sc-line.on { stroke-width: 3; opacity: 1; }
.sc-glow { fill: none; stroke-width: 9; opacity: .22; pointer-events: none; }
.sc-end { font: 700 11px/1 var(--font-display); opacity: .6; }
.sc-end.on { opacity: 1; }
.sc-ink { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .7; pointer-events: none; }
.sc-issues rect { fill: var(--danger); }
.sc-cross { stroke: var(--fg-3); stroke-width: 1; pointer-events: none; }
.sc-pt, .sc-hd { cursor: grab; outline: none; }
.sc-pt:active, .sc-hd:active { cursor: grabbing; }
.sc-pt-hit { fill: transparent; }
.sc-pt-dot, .sc-hd-dot { fill: var(--surface); stroke-width: 2.5; transition: r var(--dur); }
.sc-pt:hover .sc-pt-dot, .sc-pt.focus .sc-pt-dot, .sc-hd:hover .sc-hd-dot { r: 7.5; }
.sc-pt:focus-visible .sc-pt-dot, .sc-hd:focus-visible .sc-hd-dot { stroke: var(--focus) !important; stroke-width: 3.5; r: 8; }
.sc-hd-dot { fill: var(--bg); }
.sc-hd-l { fill: var(--fg-2); font-size: 10.5px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.sc-read { position: absolute; z-index: 5; pointer-events: none; padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: var(--t-xs); color: var(--fg-2); display: grid; gap: 2px; min-width: 96px; }
.sc-read-y { font: 600 var(--t-sm)/1.2 var(--font-display); color: var(--fg); }
.sc-read div { display: flex; align-items: center; gap: var(--s2); }
.sc-read b { color: var(--fg); margin-left: auto; font-weight: 600; }

/* support */
.support .issues { margin: var(--s2) 0 0; padding-left: var(--s5); font-size: var(--t-xs); }
.support .callout > div > p { margin: 0; }

/* tool panel */
.tool-panel { display: grid; position: sticky; top: calc(var(--header-h) + var(--s4)); max-height: calc(100vh - var(--header-h) - var(--s8)); overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); }
@media (max-width: 1040px) { .tool-panel { position: static; max-height: none; } }
.pw-meta { display: grid; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--line); }
.pw-meta-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pw-label { flex: 1; min-width: 120px; font-weight: 600; }
.tool-tabs { padding: 0 var(--s2); }
.tool-tabs [role="tab"] { padding: var(--s3) var(--s2); font-size: var(--t-xs); flex: 1; justify-content: center; gap: 6px; }
.tool-body { display: grid; gap: var(--s4); padding: var(--s4); overflow-y: auto; align-content: start; }
.tool-body .callout .btn { margin-top: var(--s2); }
.tool-body .callout > div > p { margin: 0; }

.prm-list { display: grid; gap: var(--s4); }
.prm { display: grid; gap: var(--s1); }
.prm.off { opacity: .5; }
.prm-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.prm-top label { font-size: var(--t-sm); color: var(--fg-2); font-weight: 500; }
.prm-val { display: inline-flex; align-items: center; gap: var(--s1); }
.prm-val .input { width: 76px; text-align: right; }
.prm-val output { font-weight: 600; color: var(--fg); }
.prm-val .u { font-size: var(--t-xs); color: var(--fg-3); min-width: 3.4em; }
.prm .caption { margin: 0; }
.prm-adv summary { font-size: var(--t-xs); }
.prm-derived { padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--radius-sm); }

.pt-table { max-height: 320px; overflow-y: auto; }
.pt-table td { padding: var(--s1) var(--s2); vertical-align: middle; }
.pt-table tr.on td { background: var(--accent-soft); }
.pt-table .input { width: 100%; }

.preset-list { display: grid; gap: var(--s4); }
.preset-group h4 { font: 600 var(--t-xs)/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 var(--s2); }
.preset { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; padding: var(--s2); border-radius: var(--radius-sm); border: 1px solid transparent; background: none; color: var(--fg-2); font-size: var(--t-sm); cursor: pointer; }
.preset:hover { background: var(--surface-2); color: var(--fg); }
.preset.on { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.preset-spark { width: 60px; height: 20px; flex: none; color: var(--fg-3); }
.preset:hover .preset-spark, .preset.on .preset-spark { color: var(--accent); }

.drop { display: grid; justify-items: center; gap: var(--s1); padding: var(--s6) var(--s4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius); text-align: center; color: var(--fg-2); font-size: var(--t-sm); cursor: pointer; transition: border-color var(--dur), background var(--dur); }
.drop:hover, .drop.over, .drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.drop svg { color: var(--accent); }
.up-opts { display: grid; gap: var(--s3); }

/* summary cards */
.pw-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.pw-card { border-top: 3px solid var(--c); }
.pw-card.on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), var(--shadow); }
.pw-card header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.pw-card h3 { margin: 0; font-size: var(--t-md); flex: 1 1 6em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-card header .badge { white-space: normal; text-align: left; }
.pw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); margin: 0; }
.pw-stats dt { font-size: var(--t-xs); color: var(--fg-3); }
.pw-stats dd { margin: 0; font-size: var(--t-md); font-weight: 600; color: var(--fg); }
.pw-stats dd span { font-size: var(--t-xs); color: var(--fg-3); font-weight: 400; }
@media (max-width: 640px) {
  .studio-actions .btn span { display: none; }
  .pw-tab { max-width: 46vw; }
  .tool-tabs [role="tab"] span { font-size: 11px; }
  .pw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}