/* What-If Models (information-technology/what-if.php). The page chrome is the one-screen layout in /css/resource.css,
   the grid sheet.css. On a wide screen: the model, the chart and the tool side by side; on a laptop the model on the
   left with the chart above the tool; on smaller screens they stack. Theme tokens only (the chart's goal-seek target
   is --wi-target, gold). */
:root{--wi-target:var(--viz-7)}

.rp-main{gap:10px}
.wi-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr) minmax(300px,350px);grid-template-areas:"sheet chart tool";gap:12px}
.wi-work>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;padding:10px 14px 12px}
.wi-sheet{grid-area:sheet;gap:6px}
.wi-chart{grid-area:chart;gap:6px}
.wi-tool-panel{grid-area:tool}
.wi-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.wi-title{margin:0;font:600 14px/1.3 var(--font-display);color:var(--ink)}
.wi-switch{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1.2 var(--font-display);color:var(--accent-deep);cursor:pointer}
.wi-switch input{width:16px;height:16px;accent-color:var(--accent)}
.wi-grid{flex:1;min-height:0;display:flex;flex-direction:column}
.wi-grid .sg-wrap{flex:1}
.wi-grid table.sg{min-width:0}
.wi-grid td.sg-c{cursor:default}
.wi-grid table.sg td.sg-head{background:var(--accent-deep)}
.wi-grid td.sg-head .sg-v{color:var(--on-accent);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
td.sg-out{background:var(--ok-tint)}
td.sg-out.wi-neg{background:var(--bad-tint)}
td.sg-out.wi-neg .sg-v{color:var(--bad)}
td.wi-seeking{outline:2px dashed var(--wi-target);outline-offset:-3px}
.wi-key{margin:0;display:flex;gap:10px;font-size:12px;color:var(--muted)}
.wi-key span{padding:1px 7px;border-radius:3px}
.wi-key .k-in{background:var(--accent-b-tint);color:var(--accent-b-deep);font-weight:700}
.wi-key .k-calc{background:var(--panel-2);border:1px solid var(--line)}
.wi-key .k-out{background:var(--ok-tint);color:var(--ok);font-weight:700}

/* the chart */
.wi-pick{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.wi-pick select{font:600 13px/1.2 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:5px 7px;max-width:200px}
.wi-svgbox{position:relative;flex:1;min-height:180px;overflow:hidden}
.wi-svgbox svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.wi-gl{stroke:var(--line);stroke-width:1}
.wi-axis{stroke:var(--ink-soft);stroke-width:1.5}
.wi-zero{stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:2 3}
.wi-zl,.wi-tl{font:600 12px var(--font-body);fill:var(--ink-soft)}
.wi-tl{fill:var(--wi-target)}
.wi-tick{font:11px var(--font-mono);fill:var(--muted)}
.wi-at{font:600 13px var(--font-body);fill:var(--ink)}
.wi-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.wi-cur{stroke:var(--accent-deep);stroke-width:1;stroke-dasharray:3 3}
.wi-dot{fill:var(--accent);stroke:var(--panel);stroke-width:2.5}
.wi-target{stroke:var(--wi-target);stroke-width:2;stroke-dasharray:7 5}
.wi-try{fill:var(--panel);stroke:var(--wi-target);stroke-width:2}
.wi-hit{fill:transparent;cursor:crosshair}
.wi-hover line{stroke:var(--muted);stroke-width:1}
.wi-hover circle{fill:var(--ink);stroke:var(--panel);stroke-width:2}
.wi-tip{position:absolute;z-index:2;pointer-events:none;background:var(--panel);border:1px solid var(--line-strong);border-radius:6px;box-shadow:var(--shadow);padding:6px 9px;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.wi-tip b{color:var(--ink);font-family:var(--font-mono)}
.wi-note{margin:0;font-size:13px;color:var(--ink-soft);line-height:1.45;flex:none}

/* the tool */
.wi-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px}
.wi-sec{display:flex;flex-direction:column;gap:8px}
.wi-sec+.wi-sec{border-top:1px solid var(--line);padding-top:12px}
.wi-sec:empty{display:none}
.wi-small{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.wi-cell{font:600 11px var(--font-mono);color:var(--muted)}
.wi-ctl{display:flex;flex-direction:column;gap:1px}
.wi-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:600 13px/1.3 var(--font-display);color:var(--ink)}
.wi-ctl output{font:600 12.5px var(--font-mono);color:var(--accent-b-deep)}
.wi-ctl input[type=range]{width:100%;margin:0;height:24px;accent-color:var(--accent-b);cursor:pointer}
table.wi-table{font-size:13px;margin:0}
table.wi-table td{padding:5px 4px;vertical-align:middle}
.wi-v{text-align:right;font:600 13px var(--font-mono);color:var(--ink);white-space:nowrap}
.wi-v.neg,.wi-sum td.neg{color:var(--bad)}
.wi-d{display:block;font:500 11px var(--font-mono)}
.wi-d.up{color:var(--ok)}.wi-d.down{color:var(--bad)}
.wi-q{white-space:normal;text-align:left;align-self:flex-start;border-color:var(--wi-target);color:var(--ink)}
.wi-form{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line)}
.wi-form label{display:flex;flex-direction:column;gap:3px;font:600 12px/1.2 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.wi-form select,.wi-form input,.wi-save input{font:14px/1.3 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:7px 8px;text-transform:none;letter-spacing:0}
.wi-form .btn{align-self:flex-start}
.wi-found{margin:0;font-size:15px;color:var(--ink)}
.wi-bad{margin:0;padding:8px 10px;border-left:3px solid var(--bad);background:var(--bad-tint);border-radius:0 6px 6px 0;font-size:13.5px;color:var(--ink)}
.wi-btns{display:flex;gap:8px;flex-wrap:wrap}
.wi-steps-h{margin-top:4px !important}
.wi-steps{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:5px}
.wi-steptable th,.wi-steptable td{padding:4px 7px;text-align:right;font-family:var(--font-mono);font-size:12px}
.wi-steptable th{position:sticky;top:0;background:var(--panel-2)}
.wi-steptable td.ok{color:var(--ok);font-weight:700}
.wi-scens{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.wi-scens li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.wi-sname{font:700 13.5px/1.3 var(--font-display);color:var(--ink)}
.wi-schanges{grid-column:1;font-size:12px;color:var(--muted)}
.wi-sbtns{grid-column:2;grid-row:1/span 2;display:flex;gap:4px;align-items:center}
.wi-save{display:flex;gap:6px;flex-wrap:wrap}
.wi-save input{flex:1 1 140px;min-width:0}
.wi-sumwrap{overflow:auto;border:1px solid var(--line);border-radius:5px}
table.wi-sum{font-size:12px;margin:0;width:auto;min-width:100%}
.wi-sum th,.wi-sum td{padding:5px 7px;white-space:nowrap}
.wi-sum thead th{background:var(--accent-deep);color:var(--on-accent);text-transform:none;letter-spacing:0;font-size:11.5px}
.wi-sum tbody th{font:600 12px var(--font-body);color:var(--ink);text-transform:none;letter-spacing:0}
.wi-sum td{text-align:right;font-family:var(--font-mono)}
.wi-sum td:nth-child(2){background:var(--accent-tint)}
.wi-sum .wi-grp th{background:var(--panel-2);color:var(--muted);font:700 10.5px var(--font-display);text-transform:uppercase;letter-spacing:.06em}

/* laptops: the model on the left, the chart above the tool on the right */
@media (min-width:901px) and (max-width:1300px){
  .wi-work{grid-template-columns:minmax(270px,320px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"sheet chart" "sheet tool"}
  .wi-svgbox{min-height:140px}
}
@media (min-width:901px) and (max-height:700px){
  .wi-work>.panel{padding:8px 12px 10px}
  .wi-key{display:none}
  .wi-note{font-size:12px}
}
@media (max-width:900px){
  .wi-work{display:flex;flex-direction:column}
  .wi-scroll{overflow:visible}
  .wi-svgbox{min-height:0;overflow:visible}
  .wi-svgbox svg{position:static;height:auto}
  .wi-tick{font-size:12px}
  .wi-at{font-size:13px}
  .btn,.wi-pick select,.wi-form select,.wi-form input,.wi-save input{min-height:40px}
  .wi-ctl input[type=range]{height:40px}
  .seg-toggle button{min-height:40px}
  .rp-controls{width:100%}
  .wi-grid table.sg{min-width:0 !important}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .wi-work>.panel{padding:10px}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;padding:8px 6px;min-width:0;white-space:normal;text-align:center;line-height:1.15}
}