/* ==========================================================================
   VIZ-DECISION-MODEL  -  five-year IRR / gross multiple calculator
   Three-lever investment model (starting market rent, rent growth path with
   concessions, exit cap rate) for the multifamily case study page,
   multifamily-case-study-austin-boston-h2-2026.html. The model mirrors the
   Cash Flow Austin and Cash Flow Boston tabs of
   multifamily-case-study-austin-boston-h2-2026.xlsx to the basis point.
   All rules are scoped to .decision-model so nothing leaks.
   ========================================================================== */

.decision-model{color-scheme:light}
.decision-model {
    --navy:#1F4E79; --ink:#1a202c; --ink2:#4a5568; --muted:#718096;
    --austin:#C05621; --boston:#2C6FBB;
    --surface:#fcfcfb; --card:#ffffff; --line:#e2e8f0;
  }
.decision-model * {box-sizing:border-box}
.decision-model {margin:0;background:var(--surface);color:var(--ink);
       font:14px/1.45 Arial,"Helvetica Neue",sans-serif;padding:20px}
.decision-model .wrap {max-width:1120px;margin:0 auto}
.decision-model h1 {font-size:22px;color:var(--navy);margin:0 0 4px}
.decision-model .sub {color:var(--ink2);margin:0 0 6px;max-width:78ch}
.decision-model .draft {display:inline-block;background:#FFF6E5;border:1px solid #E9C46A;color:#7B5800;
         border-radius:4px;padding:2px 8px;font-size:12px;font-weight:bold;margin-bottom:14px}
.decision-model .cards {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.decision-model .card {background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 16px 12px;
        border-top:4px solid var(--line)}
.decision-model .card.austin {border-top-color:var(--austin)}
.decision-model .card.boston {border-top-color:var(--boston)}
.decision-model .mkt {font-size:17px;font-weight:bold}
.decision-model .card.austin .mkt {color:var(--austin)}
.decision-model .card.boston .mkt {color:var(--boston)}
.decision-model .subm {color:var(--muted);font-size:12px;margin-bottom:8px}
.decision-model .chips {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.decision-model .chip {background:#f1f5f9;border:1px solid var(--line);border-radius:12px;
        padding:1px 9px;font-size:11.5px;color:var(--ink2);white-space:nowrap}
.decision-model .lever {margin:10px 0 2px}
.decision-model .lever label {display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-bottom:2px}
.decision-model .lever output {font-weight:bold;color:var(--ink);font-variant-numeric:tabular-nums}
.decision-model input[type=range] {width:100%;accent-color:var(--navy);height:22px;margin:0}
.decision-model .card.austin input[type=range] {accent-color:var(--austin)}
.decision-model .card.boston input[type=range] {accent-color:var(--boston)}
.decision-model .hint {font-size:11px;color:var(--muted);margin-top:1px}
.decision-model /* year grid */
  .ygrid {width:100%;border-collapse:collapse;margin:12px 0 4px;font-size:12px}
.decision-model .ygrid th {font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;
            border-bottom:1px solid var(--line);padding:3px 2px;text-align:center;font-weight:bold}
.decision-model .ygrid th .cal {display:block;font-size:10px;color:var(--muted);font-weight:normal;text-transform:none}
.decision-model .ygrid th:first-child, .decision-model .ygrid td:first-child {text-align:left;width:88px;font-size:11px;color:var(--ink2)}
.decision-model .ygrid td {padding:3px 2px;text-align:center;font-variant-numeric:tabular-nums}
.decision-model .ygrid td input {width:52px;text-align:center;border:1px solid var(--line);border-radius:5px;
                  padding:3px 1px;font-size:12px;font-weight:bold;background:#fffdf2}
.decision-model .ygrid td.calc {color:var(--ink)}
.decision-model .ygrid td.ghost {color:var(--muted)}
.decision-model .ygrid tr.eff td {font-weight:bold;border-top:1px dashed var(--line)}
.decision-model .exitcol {background:#f8fafc}
.decision-model .derived {display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 10px}
.decision-model .d {background:#f8fafc;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.decision-model .d .k {font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.decision-model .d .v {font-size:13.5px;font-weight:bold;font-variant-numeric:tabular-nums}
.decision-model .hero {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 4px}
.decision-model .hero .h {background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:8px 12px;text-align:center}
.decision-model .hero .lbl {font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.decision-model .hero .big {font-size:32px;font-weight:bold;font-variant-numeric:tabular-nums;line-height:1.15}
.decision-model .card.austin .big {color:var(--austin)}
.decision-model .card.boston .big {color:var(--boston)}
/* v3 (2026-09-02): the yield bars are gone. Outputs by year are a second .ygrid
   under the IRR tiles, styled like the rent grid so the card reads as one pro forma. */
.decision-model .ygrid-out {margin-top:14px}
.decision-model .log {background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-top:4px}
.decision-model .log h2 {font-size:15px;color:var(--navy);margin:0 0 8px}
.decision-model .logrow {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.decision-model .logrow input[type=text] {border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:13px;width:180px}
.decision-model button {border:0;border-radius:6px;padding:7px 14px;font-size:13px;font-weight:bold;color:#fff;cursor:pointer}
.decision-model .rec-austin {background:var(--austin)}
.decision-model .rec-boston {background:var(--boston)}
.decision-model .clear {background:#94a3b8}
.decision-model .tally {font-size:13px;color:var(--ink2);margin-left:auto}
.decision-model table.logtable {border-collapse:collapse;width:100%;font-size:12.5px}
.decision-model .logtable th {color:var(--muted);font-weight:bold;text-align:left;border-bottom:2px solid var(--line);padding:4px 8px;font-size:11.5px;text-transform:uppercase}
.decision-model .logtable td {border-bottom:1px solid var(--line);padding:5px 8px;font-variant-numeric:tabular-nums}
.decision-model td.mA {color:var(--austin);font-weight:bold}
.decision-model td.mB {color:var(--boston);font-weight:bold}
.decision-model .foot {color:var(--muted);font-size:11.5px;margin-top:14px;max-width:104ch}
@media (max-width:960px) {
  .decision-model .cards {grid-template-columns:1fr}
}
.decision-model {padding:0;background:transparent}
.decision-model .wrap {max-width:none;margin:0}