/* ==========================================================================
   model-explorer.css - styles for the 3-statement model interactive explorer
   Loaded by model-explorer.html.
   See DESIGN.md for the type system, color tokens, and brand rules.
   ========================================================================== */

/* ===== TOKENS - CSS custom properties: navy brand, blue accent, input-blue, grid ===== */
  :root{--paper:#fff;--bg:#EAEEF4;--navy:#13294a;--blue:#1f5fa8;--blue-l:#7fa8dd;--muted:#59626d;--muted-2:#6f7681;--line:#e5e2d9;--in:#3271D2;--grid:#e2e2e2;--ok:#1e7d46}

/* ===== BASE / RESET - box model + body canvas ===== */
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:#141a20;padding:30px 14px;display:flex;justify-content:center}

/* ===== SHELL / TITLE BAR - explorer card + navy window chrome, badge ===== */
  .mx{width:1080px;max-width:100%;background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(19,41,74,.5);border:1px solid var(--line)}
  .mx-bar{height:38px;background:#13294a;display:flex;align-items:center;gap:14px;padding:0 15px}
  .mx-bar .dots{display:flex;gap:7px}.mx-bar .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28)}
  .mx-bar .ttl{color:#cfe0f5;font-size:12px;font-weight:600;letter-spacing:.02em}
  .mx-bar .badge{margin-left:auto;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#0e1f3a;background:#7fa8dd;border-radius:20px;padding:4px 10px;font-weight:800}

/* ===== TOOLBAR / SCENARIO CONTROLS - scenario segmented toggle + driver readout ===== */
  .mx-tools{display:flex;align-items:center;gap:12px;padding:11px 15px;background:#eef1f5;border-bottom:1px solid #d4d9e0;flex-wrap:wrap}
  .mx-tools .lab{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
  .scen{display:inline-flex;background:#fff;border:1px solid #cfd6df;border-radius:8px;overflow:hidden}
  .scen button{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 15px;cursor:pointer;transition:.15s;border-right:1px solid #eceff3}
  .scen button:last-child{border-right:0}
  .scen button.on{background:var(--navy);color:#fff}
  .scen button:not(.on):hover{background:#f0f3f7;color:var(--navy)}
  .mx-tools .drv{margin-left:auto;font-size:12px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
  .mx-tools .drv b{color:var(--navy)}

/* ===== FORMULA BAR - Excel-style cell ref + formula strip (input-blue) ===== */
  .fbar{display:flex;align-items:center;height:28px;background:#fafafa;border-bottom:1px solid var(--grid);font-size:12px}
  .fbar .cell{width:64px;text-align:center;color:#888;border-right:1px solid var(--grid);font-weight:600}
  .fbar .fx{padding-left:12px;color:var(--in);font-family:Consolas,monospace;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fbar .fx b{color:#8a94a3;font-family:Inter,sans-serif;font-weight:600;margin-right:6px}

/* ===== TABLE SHELL - scroll body + sticky headers ===== */
  .mx-body{overflow:auto;-webkit-overflow-scrolling:touch;height:452px}
  .mx-body table thead th,.mx-body table thead td{position:sticky;z-index:3}
  .mx-body table thead tr:first-child th{top:0}
  .mx-body table thead tr:nth-child(2) td{top:22px}

/* ===== MODEL TABLE - 3-statement grid: sections, inputs, formulas, totals, tie-out ===== */
  table{border-collapse:collapse;width:100%;min-width:760px;font-size:12.5px}
  th.corner,th.colh{height:22px;background:#f3f3f3;border:1px solid var(--grid);color:#777;font-weight:600;text-align:center;font-size:11px}
  td.rowh{width:34px;background:#f3f3f3;border:1px solid var(--grid);color:#888;text-align:center;font-weight:600;font-size:10.5px}
  td{border:1px solid var(--grid);height:23px;padding:0 10px;white-space:nowrap;color:#1a1a1a}
  td.lab{min-width:222px}
  td.sec{font-weight:700;color:var(--navy);background:#eef1f5;letter-spacing:.02em}
  td.in{color:var(--in);text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
  td.fm{text-align:right;font-variant-numeric:tabular-nums}
  td.tot{font-weight:700;color:var(--navy);text-align:right;border-top:1.5px solid var(--navy);font-variant-numeric:tabular-nums;background:#f7f9fb}
  td.mut{color:var(--muted-2);text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px}
  td.yr{color:#888;text-align:right;font-weight:600;font-size:11px}
  .chk{color:var(--ok);font-weight:700}
  .unit{padding:8px 15px;font-size:11px;color:var(--muted-2);background:#fafafa;border-bottom:1px solid var(--grid)}

/* ===== KPI TILES - dashboard metric cards ===== */
  .dash{padding:20px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .kpi{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 16px}
  .kpi .k{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
  .kpi .v{font-size:24px;font-weight:800;color:var(--navy);margin-top:4px;letter-spacing:-.02em}
  .kpi .d{font-size:11.5px;font-weight:700;margin-top:2px;color:var(--blue)}

/* ===== CHARTS - bar-chart cards ===== */
  .charts{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
  .card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 16px}
  .card h4{font-size:12.5px;color:#3a4453;margin-bottom:12px;font-weight:600}
  .bars{display:flex;align-items:flex-end;gap:14px;height:150px}
  .bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
  .bwrap{width:100%;height:130px;display:flex;align-items:flex-end;justify-content:center;gap:4px}
  .bwrap b{display:block;width:22px;border-radius:3px 3px 0 0;transition:height .5s cubic-bezier(.2,.8,.3,1)}
  .bcol span{font-size:10.5px;color:#8b93a0}

/* ===== TABS - statement / sheet tabs ===== */
  .tabs{display:flex;background:#e9edf2;border-top:1px solid #cfd6df;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs button{border:0;border-right:1px solid #d4d9e0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 20px;cursor:pointer;white-space:nowrap;transition:.15s;border-top:2px solid transparent}
  .tabs button.on{background:#fff;color:var(--navy);border-top-color:var(--blue)}
  .tabs button:not(.on):hover{background:#f0f3f7;color:var(--navy)}

/* ===== CAPTION / HINT - footnote + italic hint ===== */
  .cap{padding:11px 16px;font-size:11.5px;color:var(--muted-2);background:#f6f5f1;border-top:1px solid var(--line);text-align:center}
  .hint{padding:9px 16px;font-size:12.5px;color:var(--blue);background:#fff;border-top:1px solid var(--grid);font-style:italic}