/* ==========================================================================
   VIZ-STABILIZATION-TOOL  -  Multifamily interactive market prediction
   tool (annual projection engine, one market at a time from a dropdown).
   Used on multifamily-market-prediction-tool.html. Fixed layout: control rail on
   the left, dashboard (stat tiles, charts, year table) on the right;
   stacks to one column under 900px.
   All rules are scoped to .stab-tool so nothing leaks into site styles,
   and the site's own header, nav and typography win outside the tool.
   The stat tiles use .st-tile / .st-tiles (not .tile) because styles.css
   already defines .tile for the homepage grid.
   Data: multifamily-stabilization-data.js. Engine: viz-stabilization-tool.js.
   ========================================================================== */

.stab-tool{--cardinal:#A31F34;--accent-red:#8B1A2E;--navy:#1F4E79;--gold:#C9A86A;--ink:#23282E;--body:#3D434B;--muted:#6B7280;--paper:#FAF8F4;--card:#FFFFFF;--hair:#E6DFD3;--soft:#F3EFE7;--yellow:#FFF6E5;--green:#2E7D32;--serif:'Source Serif 4',Georgia,'Times New Roman',serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;color-scheme:light}
.stab-tool{color:var(--body);font:16px/1.55 var(--sans);margin:0 0 24px}
.stab-tool *{box-sizing:border-box}
.stab-tool .lede{color:var(--body);margin:0 0 6px}
/* market dropdown and per-market prose */
.stab-tool .metro-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;background:var(--soft);border:1px solid var(--hair)}
.stab-tool .metro-bar label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stab-tool .metro-bar select{font:600 16px var(--sans);color:var(--ink);padding:5px 8px;border:1px solid var(--hair);background:#fff;min-width:160px}
.stab-tool .metro-bar .mb-note{font-size:12.5px;color:var(--muted)}
.stab-tool .mnotes{font-size:14px;color:var(--body);margin:0 0 8px;line-height:1.55}
.stab-tool .mfacts{margin:0 0 10px;padding-left:20px;font-size:14px;color:var(--body);line-height:1.5}
.stab-tool .mfacts li{margin:0 0 3px}
.stab-tool .mixnote{background:#F0F1F3;border:1px solid #DDDFE3;padding:8px 14px 8px 28px;font-size:12.5px;color:var(--body);line-height:1.6;margin:0 0 14px;list-style:none}
.stab-tool .mixnote li{position:relative}
.stab-tool .mixnote li::before{content:'\25B8';color:var(--cardinal);position:absolute;left:-16px;top:0;font-size:13px}
.stab-tool .gl{display:flex;align-items:center;justify-content:space-between;gap:6px}
.stab-tool .shift{display:inline-flex;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--soft)}
.stab-tool .shift button{background:transparent;border:0;padding:2px 7px;font:10px var(--sans);color:var(--body);cursor:pointer;line-height:1.4}
.stab-tool .shift button:first-child{border-right:1px solid var(--hair)}
.stab-tool .shift button:hover{background:#fff;color:var(--navy)}
.stab-tool .leg i.pt{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--navy);vertical-align:middle}
.stab-tool table.yr td.tn{font-size:11.5px;color:var(--muted);text-align:left;font-style:italic}
.stab-tool .fitwrap{background:var(--card);border:1px solid var(--hair);padding:10px 12px 6px;margin:12px 0 10px}
.stab-tool .fitbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.stab-tool .fiteq{margin-left:auto;font:500 10px var(--mono,monospace);color:var(--ink);border:1px solid var(--cardinal);padding:3px 7px;flex:1 1 420px;min-width:0;line-height:1.35}
.stab-tool .fitbar label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stab-tool .fitbar select{font:600 13px var(--sans);color:var(--ink);padding:4px 8px;border:1px solid var(--hair);background:#fff;max-width:100%}
.stab-tool .fitcap{font-size:12.5px;color:var(--body);line-height:1.5;margin:4px 0 4px}
.stab-tool #fitchart svg{width:100%;height:auto;display:block}
.stab-tool #fitchart svg text{font-family:var(--sans)}
.stab-tool .note.warn{background:var(--yellow);border-left:3px solid var(--gold);padding:6px 10px;margin:4px 0 8px}
/* layout A: rail + results */
.stab-tool .tool{display:grid;gap:22px;grid-template-columns:300px minmax(0,1fr);align-items:start}
.stab-tool .tool>*{min-width:0}
.stab-tool .rail{background:var(--card);border:1px solid var(--hair);padding:16px 16px 6px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.stab-tool .rail::after{content:'';display:block;height:8px}
.stab-tool .floorstat{font-size:11.5px;color:var(--muted);margin:-4px 0 6px}
.stab-tool .group{border-top:1px solid var(--hair);padding-top:10px;margin-top:10px}
.stab-tool .group:first-child{border-top:none;padding-top:0;margin-top:0}
.stab-tool .gl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.stab-tool .ctl{margin:0 0 10px}
.stab-tool .ctl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--body);margin-bottom:2px}
.stab-tool .ctl label output{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.stab-tool .ctl input[type=range]{width:100%;accent-color:var(--cardinal)}
.stab-tool .ctl select,.stab-tool .ctl input[type=number]{width:100%;font:14px var(--sans);padding:5px 6px;border:1px solid var(--hair);background:#fff;color:var(--ink)}
.stab-tool .seg{display:flex;border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.stab-tool .seg button{flex:1;background:#fff;border:0;padding:5px 4px;font:13px var(--sans);color:var(--body);cursor:pointer}
.stab-tool .seg button.on{background:var(--navy);color:#fff}
.stab-tool .seg button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.stab-tool .presets{display:flex;gap:6px;flex-wrap:wrap}
.stab-tool .presets button{background:var(--soft);border:1px solid var(--hair);border-radius:12px;padding:2px 10px;font:12.5px var(--sans);cursor:pointer;color:var(--body)}
.stab-tool .presets button:hover{border-color:var(--navy)}
.stab-tool .hint{font-size:12px;color:var(--muted);margin:-4px 0 8px}
.stab-tool .disabled{opacity:.5}
/* results */
.stab-tool .st-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}
.stab-tool .st-tile{background:var(--card);border:1px solid var(--hair);padding:14px 16px}
.stab-tool .st-tile.lead{border-left:5px solid var(--cardinal)}
.stab-tool .st-tile .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stab-tool .st-tile .v{font:600 30px/1.05 var(--serif);color:var(--cardinal);margin:4px 0 2px;font-variant-numeric:tabular-nums}
.stab-tool .st-tile .s{font-size:12.5px;color:var(--body)}
.stab-tool .charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.stab-tool .charts>*{min-width:0}
.stab-tool .chart{background:var(--card);border:1px solid var(--hair);padding:12px 14px 8px}
.stab-tool .chart.wide{grid-column:1/-1}
.stab-tool .chart h3{font:600 17px/1.2 var(--serif);color:var(--navy);margin:0 0 2px}
.stab-tool .chart .cap{font-size:12px;color:var(--muted);margin:0 0 6px;line-height:1.5}
.stab-tool .chart svg{width:100%;height:auto;display:block}
.stab-tool .chart svg text{font-family:var(--sans);fill:var(--body)}
.stab-tool .leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--body);margin:4px 0 0;line-height:1.5}
.stab-tool .leg i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:5px}
.stab-tool .leg i.d{border-top:2px dashed var(--navy);height:0}
.stab-tool table.yr{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums;margin-top:6px}
.stab-tool table.yr th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;border-bottom:1px solid var(--hair);padding:6px 8px;font-weight:600;background:none}
.stab-tool table.yr td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--soft);color:var(--ink);background:none}
.stab-tool table.yr th:first-child,.stab-tool table.yr td:first-child{text-align:left}
.stab-tool table.yr tr.proj td{color:var(--body);font-style:italic}
.stab-tool table.yr tr.hit td{background:#EAF3EA}
.stab-tool .how{background:var(--card);border:1px solid var(--hair);padding:16px 20px;margin-top:18px}
.stab-tool .how h3{font:600 20px/1.2 var(--serif);color:var(--ink);margin:0 0 8px}
.stab-tool .how p{font-size:14.5px;margin:0 0 8px;line-height:1.55}
.stab-tool .how .eq{font-family:'Courier New',monospace;font-size:13px;background:#F5F5F5;border-left:4px solid var(--cardinal);border-radius:6px;padding:8px 12px;display:block;margin:4px 0 8px;white-space:pre-wrap}
.stab-tool .how .eq b{color:var(--cardinal)}
.stab-tool details summary{cursor:pointer;color:var(--navy);font-size:14px}
.stab-tool .series{margin:2px 0 10px}
.stab-tool .series .sl{display:flex;justify-content:space-between;font-size:13px;color:var(--body);margin-bottom:2px}
.stab-tool .series .sl output{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.stab-tool .series svg{width:100%;height:auto;display:block;touch-action:none;border:1px solid var(--hair);background:#fff}
.stab-tool .series svg text{font-family:var(--sans);fill:var(--muted);font-size:9px}
.stab-tool .series circle{cursor:ns-resize}
.stab-tool .series circle:focus{outline:none;stroke:var(--gold);stroke-width:3}
.stab-tool .series .sh{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.stab-tool .series .tag{font-size:10px;font-weight:700;fill:var(--ink)}
.stab-tool .series .apply{font-size:9px;fill:#fff;cursor:pointer}
.stab-tool .series .applybg{fill:var(--navy);cursor:pointer}
.stab-tool .leg .inc{color:var(--cardinal);font-weight:700}
.stab-tool .leg .dec{color:var(--green);font-weight:700}
.stab-tool .leg i.sq{width:12px;height:12px}
.stab-tool .note{font-size:12px;color:var(--muted);margin:2px 0 8px;line-height:1.45}
.stab-tool .note b{color:var(--ink)}
.stab-tool details.exp{margin:-2px 0 10px}
.stab-tool details.exp summary{font-size:12.5px}
.stab-tool details.exp .note{margin-top:6px}
.stab-tool .band{fill:#1F4E79;opacity:.10}
.stab-tool .rbtn{background:var(--soft);border:1px solid var(--hair);border-radius:12px;padding:2px 10px;font:12px var(--sans);cursor:pointer;color:var(--navy);text-transform:none;letter-spacing:0}
.stab-tool .rbtn:hover{border-color:var(--navy)}
.stab-tool .rbtn.all{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700;padding:5px 14px;font-size:13px}
.stab-tool details.vf{margin:0 0 18px}

.stab-tool details.vf .how{margin-top:8px}
.stab-tool .how .src{font-size:12.5px;color:var(--muted);margin-top:10px}
.stab-tool .how .fn{font-size:12px;color:var(--muted)}
.stab-tool .note.tight{margin-top:-4px}
.stab-tool .panels{margin-top:10px}
.stab-tool .table-scroll{overflow-x:auto}
@media (max-width:900px){.stab-tool .tool{grid-template-columns:minmax(0,1fr)}.stab-tool .rail{position:static;max-height:none}.stab-tool .st-tiles{grid-template-columns:1fr 1fr}.stab-tool .charts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.stab-tool .st-tiles{grid-template-columns:1fr}.stab-tool .chart{padding:10px 8px 6px}.stab-tool table.yr{font-size:11.5px;min-width:560px}.stab-tool table.yr th,.stab-tool table.yr td{padding:5px 4px}}

.stab-tool details.vf .how{border:none;padding:8px 4px 0;margin-top:0}
/* layout B: controls side by side above the charts */
.stab-tool .tool.flow{grid-template-columns:minmax(0,1fr)}
.stab-tool .tool.flow .rail{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 22px;padding:14px 18px 8px}
.stab-tool .tool.flow .rail .group{border-top:none;padding-top:0;margin-top:0}
.stab-tool .tool.flow .rail .group.presets{grid-column:1/-1;border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:6px}
.stab-tool .tool.flow .series svg{max-height:120px}

/* population growth panel (2026-09-15): small history chart inside the explainer */
.stab-tool .mini{margin-top:6px}
.stab-tool .mini svg{width:100%;height:auto;display:block;font:9px var(--sans);fill:var(--muted)}