/* ============================================================
   CASH COW / styles.css
   thomas-batcave kit (design/brands/thomas-batcave.md), not a
   generic dark theme. The room: matte-black objects in deep soft
   shadow over board-formed concrete, one cold holo-blue signal.
   Apple-TV-Mac LAYOUT kept; finish is matte Batcave:
   - real concrete plate as the ground (no CSS faking material)
   - matte surfaces, depth from SOFT SHADOW never glow
   - 1px machined hairlines, sharp corners
   - calm slow eases (cubic-bezier(.75,0,.25,1)), no spring/rake
   ============================================================ */
:root{
  /* kit tokens, verbatim */
  --black:#0B0B0C; --charcoal:#16181B; --concrete:#2A2D31; --concrete-mid:#3C4045; --void:#060607;
  --plane:#F4F5F6; --plane-seam:#C9CCCF;
  --floor:#6E7378; --floor-sheen:#898E93;
  --ink:#ECEDEE; --ink-muted:#9A9EA3; --ink-dim:#5C6166;
  --ink-plane:#121316; --ink-plane-muted:#54585D;
  --accent:#4FB4FF; --accent-alt:#6D4AFF;
  --accent-soft:rgba(79,180,255,0.12); --accent-line:rgba(79,180,255,0.30);
  --line:rgba(255,255,255,0.06); --line-2:rgba(255,255,255,0.10);
  --shadow-soft:rgba(0,0,0,0.55);
  /* matte object fills (objects sitting in the room) */
  --surface:rgba(18,20,23,0.82); --surface-2:rgba(14,16,18,0.78); --rail:rgba(10,11,12,0.62);
  --ease:cubic-bezier(.75,0,.25,1);
  --display:"Clash Display","Switzer",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Switzer",system-ui,sans-serif;font-weight:300;color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;background:var(--void);
}
/* the room: a REAL concrete plate as the ground, darkened so it reads as ambient depth, not decoration */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,6,7,0.74) 0%, rgba(6,6,7,0.52) 42%, rgba(6,6,7,0.86) 100%),
    url("assets/room.jpg") center 28% / cover no-repeat;
}
.mono{font-family:var(--mono);font-weight:400}

/* ===================== APP SHELL ===================== */
.app{position:relative;z-index:1;display:grid;grid-template-columns:268px 1fr;height:100vh}

/* ---- sidebar: a matte slab floating in the room on deep soft shadow (NO glass blur) ---- */
.sidebar{
  background:linear-gradient(180deg, rgba(13,14,16,0.94), rgba(9,10,11,0.92));
  border-right:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 24px 0 70px rgba(0,0,0,0.6);
  display:flex;flex-direction:column;padding:20px 14px 12px;overflow-y:auto;
}
.side-head{padding:6px 10px 16px}
.side-name{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
.side-cap{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-dim);margin-top:5px}
.side-search{
  width:100%;background:rgba(0,0,0,0.4);border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:12px;padding:9px 11px;margin-bottom:14px;outline:0;
}
.side-search:focus{border-color:var(--accent-line)}
.side-search::placeholder{color:var(--ink-dim)}
.nav{display:flex;flex-direction:column;gap:1px;flex:1}
.nav-group{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-dim);padding:18px 10px 7px}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;color:var(--ink-muted);font-family:"Switzer",sans-serif;font-weight:300;font-size:13.5px;
  padding:9px 10px;position:relative;transition:background .45s var(--ease),color .45s var(--ease);
}
.nav-item:hover{background:rgba(255,255,255,0.035);color:var(--ink)}
.nav-item.active{background:var(--accent-soft);color:var(--ink)}
.nav-item.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--accent)}
.nav-glyph{font-family:var(--mono);font-size:11px;color:var(--ink-dim);width:14px;text-align:center}
.nav-item.active .nav-glyph{color:var(--accent)}
.nav-label{flex:1}
.nav-badge{font-family:var(--mono);font-size:10px;color:var(--ink-dim);letter-spacing:.02em}
.side-foot{border-top:1px solid var(--line);padding:14px 10px 4px;margin-top:10px}
.side-id{display:flex;align-items:center;gap:11px}
.side-id-dot{width:26px;height:26px;background:var(--charcoal);border:1px solid var(--accent-line);flex:none;position:relative}
.side-id-dot::after{content:"";position:absolute;inset:9px;background:var(--accent)}
.side-id-name{font-size:13px;color:var(--ink)}
.side-id-sub{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);margin-top:3px}

/* ---- canvas ---- */
.canvas{overflow-y:auto;height:100vh;position:relative}
.surface{max-width:1180px;margin:0 auto;padding-bottom:90px}
.surface.pad{padding:42px clamp(26px,4vw,60px) 90px}
.surf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.surf-title{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;line-height:1.0}
.surf-sub{font-size:13.5px;color:var(--ink-muted);margin-top:10px;max-width:64ch;line-height:1.55}
.surf-actions{display:flex;gap:10px;align-items:center}

/* ===================== HERO ===================== */
/* the room shows through; a left-dark scrim keeps the number legible; the curve glows faintly */
.hero{position:relative;height:380px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-chart{position:absolute;inset:0;opacity:.5}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,6,7,0.92) 0%,rgba(6,6,7,0.55) 48%,rgba(6,6,7,0.12) 100%),
  linear-gradient(0deg,rgba(6,6,7,0.85),transparent 60%)}
.hero-inner{position:absolute;left:0;bottom:0;padding:clamp(28px,3vw,44px) clamp(26px,4vw,60px);z-index:2;max-width:740px}
.hero-kicker{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-muted)}
.hero-num{font-family:var(--display);font-weight:400;font-size:clamp(54px,8vw,96px);line-height:.9;letter-spacing:-.03em;color:var(--accent);margin:12px 0 8px;font-variant-numeric:tabular-nums}
.hero-sub{font-family:var(--mono);font-size:12px;color:var(--ink-muted);letter-spacing:.02em}
.hero-acts{display:flex;gap:10px;margin-top:24px}
.hero-dots{position:absolute;right:clamp(26px,4vw,60px);bottom:clamp(28px,3vw,44px);display:flex;gap:10px;z-index:4}
.dot{width:9px;height:9px;background:transparent;border:1px solid rgba(255,255,255,0.28);cursor:pointer;padding:0;transition:.45s var(--ease)}
.dot:hover{border-color:var(--accent)}
.dot.on{background:var(--accent);border-color:var(--accent)}

/* ===================== BUTTONS ===================== */
.btn{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink);
  background:rgba(255,255,255,0.04);border:1px solid var(--line-2);padding:10px 16px;cursor:pointer;transition:.45s var(--ease)}
.btn:hover{background:rgba(255,255,255,0.08);border-color:var(--ink-dim)}
.btn.primary{background:var(--accent);color:#04121f;border-color:var(--accent);font-weight:500}
.btn.primary:hover{background:#6bc1ff}
.btn.ghost{background:transparent}
.btn.ghost.on{border-color:var(--accent-line);color:var(--accent)}
.btn.add{margin-top:16px}

/* ===================== KPI RAIL ===================== */
.kpi-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.kpi{background:var(--surface-2);padding:24px clamp(20px,3vw,34px)}
.kpi-v{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:.95;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi:first-child .kpi-v{color:var(--accent)}
.kpi-k{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-top:12px}

/* ===================== SHELVES ===================== */
.shelf-head{display:flex;align-items:baseline;gap:14px;padding:0 clamp(26px,4vw,60px);margin:38px 0 18px}
.shelf-title{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:-.01em}
.shelf-hint{font-size:12.5px;color:var(--ink-dim)}
.shelf{display:flex;gap:14px;overflow-x:auto;padding:4px clamp(26px,4vw,60px) 16px;scroll-snap-type:x proximity}
.shelf::-webkit-scrollbar{height:8px}
.shelf::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.07)}
/* matte object in the room; depth from soft shadow, hover lifts quietly (no glow, no rake) */
.vcard{flex:none;width:242px;scroll-snap-align:start;text-align:left;cursor:pointer;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);padding:20px 20px 22px;position:relative;
  box-shadow:0 18px 44px rgba(0,0,0,0.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.vcard:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:0 28px 60px rgba(0,0,0,0.62)}
.vcard.sleeve{background:var(--surface-2)}
.vcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vcard-name{font-size:15px;letter-spacing:-.01em}
.vcard-role{font-family:var(--mono);font-size:10px;color:var(--ink-dim);margin-top:4px}
.vcard-net{display:flex;align-items:flex-end;gap:8px;margin-top:18px}
.vcard-num{font-family:var(--display);font-weight:400;font-size:31px;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.vcard.sleeve .vcard-num{color:var(--ink-muted)}
.vcard-per{font-family:var(--mono);font-size:10px;color:var(--ink-dim);padding-bottom:3px}
.spark{height:34px;margin-top:14px;position:relative}
.spark.big{height:60px;margin-top:18px}
.spark canvas{position:absolute;inset:0}

/* tags (machined hairline labels) */
.tag{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.11em;padding:3px 7px;white-space:nowrap;color:var(--ink-muted);border:1px solid var(--line-2)}
.tag.bedrock{color:var(--accent);border-color:var(--accent-line)}
.tag.service{color:var(--ink-muted)}
.tag.speculative{color:var(--ink-dim)}
.tag.sleeve{color:var(--ink-dim)}

/* ===================== PANELS ===================== */
.panel{background:var(--surface);border:1px solid var(--line);padding:22px 24px;margin-top:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 22px 54px rgba(0,0,0,0.46)}
.panel.flush{padding:0}                    /* NB: no overflow:hidden, so the sticky ledger header can pin */
.panel-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-dim);margin-bottom:7px}
.panel-sub{font-size:12.5px;color:var(--ink-dim);margin-bottom:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cols .panel{margin-top:18px}
.chart-box{position:relative;height:300px}
.chart-box.tall{height:320px;margin-top:16px}
.chart-box.xl{height:400px;margin-top:8px}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px}
.legend .li{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em}
.legend .li i{width:11px;height:11px;display:inline-block}

/* ===================== FIELDS / CONTROLS ===================== */
.field{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0}
.field-l{flex:1;font-size:13px;color:var(--ink)}
.field-c{display:flex;align-items:center;gap:10px;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:1px;background:var(--concrete-mid);outline:0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;background:var(--accent);cursor:pointer;border-radius:0;transition:transform .2s var(--ease)}
input[type=range]::-webkit-slider-thumb:active{transform:scale(.85)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;background:var(--accent);border:0;cursor:pointer;border-radius:0}
input[type=range]::-moz-range-track{height:1px;background:var(--concrete-mid)}
.num{width:76px;background:rgba(0,0,0,0.4);border:1px solid var(--line-2);color:var(--ink);font-family:var(--mono);font-size:12px;text-align:right;padding:6px 8px;outline:0;font-variant-numeric:tabular-nums}
.num.wide{width:106px}
.num.sm{width:52px}
.num:focus{border-color:var(--accent)}
.field-u{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);min-width:40px}
.txt{background:rgba(0,0,0,0.4);border:1px solid var(--line-2);color:var(--ink);font-family:"Switzer",sans-serif;font-size:13px;padding:8px 10px;outline:0}
.txt:focus{border-color:var(--accent)}
.txt.grow{flex:1}
.select{background:rgba(0,0,0,0.4);border:1px solid var(--line-2);color:var(--ink);font-family:var(--mono);font-size:11.5px;padding:7px 9px;outline:0;cursor:pointer}
.select.inline{font-size:11px;padding:5px 7px}
.select:focus{border-color:var(--accent)}
.toggle{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;border:1px solid var(--line-2);background:rgba(0,0,0,0.4);color:var(--ink-muted);padding:6px 13px;cursor:pointer;transition:.3s var(--ease)}
.toggle.on{background:var(--accent);color:#04121f;border-color:var(--accent)}
.toggle.sm{padding:4px 10px;font-size:9px}
.row{display:flex;gap:10px;align-items:center}
/* horizon quick-pick */
.hpick{display:flex;gap:6px;margin:4px 0 14px}
.hpick button{font-family:var(--mono);font-size:11px;color:var(--ink-muted);background:rgba(0,0,0,0.4);border:1px solid var(--line-2);padding:7px 13px;cursor:pointer;transition:.3s var(--ease)}
.hpick button.on{background:var(--accent);color:#04121f;border-color:var(--accent)}

/* ===================== FORECAST: scrub + milestones ===================== */
.scrub{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.scrub-m{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim)}
.scrub-v{font-family:var(--display);font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.mile-list{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.mile-row{display:flex;align-items:center;gap:9px}
.mile-row .txt{width:150px}
.mile-dollar{font-family:var(--mono);color:var(--ink-dim);font-size:12px}
.mile-note{font-family:var(--mono);font-size:10px;color:var(--accent);flex:1;text-align:right;padding-right:4px}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--ink-dim);width:28px;height:28px;cursor:pointer;font-size:12px;line-height:1;transition:.3s var(--ease)}
.icon-btn:hover{border-color:var(--accent-line);color:var(--accent)}

/* ===================== ENGINE SURFACE ===================== */
.engine-head{display:flex;flex-direction:column;gap:6px}
.engine-net{display:flex;align-items:flex-end;gap:12px}
.engine-num{font-family:var(--display);font-weight:400;font-size:clamp(42px,5vw,62px);line-height:.9;letter-spacing:-.025em;color:var(--accent);font-variant-numeric:tabular-nums}
.engine-per{font-family:var(--mono);font-size:11px;color:var(--ink-dim);padding-bottom:9px}
.deriv{font-family:var(--mono);font-size:11.5px;color:var(--ink-muted);line-height:1.7;border-top:1px solid var(--line);padding-top:13px;margin-top:9px}
.deriv b{color:var(--accent);font-weight:500}

/* ===================== REINVESTMENT RULES ===================== */
.rule-list{display:flex;flex-direction:column;gap:14px}
.rule{background:var(--surface);border:1px solid var(--line);padding:18px 20px;box-shadow:0 18px 44px rgba(0,0,0,0.4)}
.rule.off{opacity:.5}
.rule-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rule-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;font-family:var(--mono);font-size:11px;color:var(--ink-muted)}
.rule-when{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-dim);width:44px}
.rule-pre,.rule-x{font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
.rule-note{font-family:var(--mono);font-size:10px;color:var(--accent);margin-top:12px;border-top:1px solid var(--line);padding-top:11px}

/* ===================== LEDGER ===================== */
.panel.ledger-wrap{padding:0;border:1px solid var(--line);box-shadow:0 22px 54px rgba(0,0,0,0.46);background:var(--surface)}
table.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
table.ledger th{background:var(--charcoal);color:var(--ink-dim);font-weight:500;text-transform:uppercase;letter-spacing:.07em;font-size:9px;text-align:right;padding:13px 12px;border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:2}
table.ledger th.l{text-align:left}
table.ledger td{text-align:right;padding:0;border-bottom:1px solid var(--line);color:var(--ink-muted)}
table.ledger td:not(.edit){padding:9px 12px}
table.ledger td.l{text-align:left;color:var(--ink-dim);padding:9px 12px}
table.ledger td.cash{color:var(--ink)}
table.ledger td.accent{color:var(--accent)}
table.ledger td.edit{position:relative}
.cell-in{width:100%;background:transparent;border:0;color:var(--ink-muted);font-family:var(--mono);font-size:11.5px;text-align:right;padding:9px 12px;outline:0;font-variant-numeric:tabular-nums}
.cell-in:focus{background:rgba(79,180,255,0.08);box-shadow:inset 0 0 0 1px var(--accent-line)}
.cell-in::placeholder{color:var(--ink-dim)}
table.ledger td.edit.ov{box-shadow:inset 2px 0 0 var(--accent)}
table.ledger td.edit.ov .cell-in{color:var(--accent)}
table.ledger tbody tr:hover td{background:rgba(255,255,255,0.02)}

/* ===================== SCENARIOS ===================== */
.scn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.scn-row:last-child{border-bottom:0}
.scn-name{font-size:13.5px;color:var(--ink)}
.scn-acts{display:flex;gap:8px;align-items:center}
.empty{font-size:13px;color:var(--ink-dim);padding:8px 0}

/* ===================== GLOSSARY ===================== */
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 36px}
.gloss dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink);margin-top:20px}
.gloss dd{font-size:13px;color:var(--ink-muted);line-height:1.6;margin-top:6px}

/* scrollbars */
.canvas::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:9px}
.canvas::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media (max-width:1080px){
  .app{grid-template-columns:228px 1fr}
  .kpi-rail{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
}