/* ==========================================================================
   BM — live budget sheet.
   A spreadsheet's density with a document's typography. Full-bleed, minimal
   chrome, every figure beside the figure the source file reported.
   ========================================================================== */
:root{
  --paper:#f1f2ef; --card:#fff; --ink:#15171a; --ink2:#575e59; --ink3:#949a95;
  --hair:#e7eae5; --hair2:#f0f2ee;
  --lime:#d9f54f; --sage:#6fae8c;
  --good:#3f6b55;            /* favourable variance — 5.42:1 on paper */
  --bad:#a4442f;             /* unfavourable — matched at 5.42:1      */
  --d:'Bricolage Grotesque',"Helvetica Neue",Arial,sans-serif;
  --b:'Hanken Grotesk',"Helvetica Neue",Arial,sans-serif;
  --m:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --px:'Silkscreen',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--b);font-size:15px;
  -webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.num{font-family:var(--m);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.app{display:grid;grid-template-rows:auto auto 1fr;height:100vh}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;gap:18px;padding:0 22px;height:58px;
  background:var(--card);border-bottom:1px solid var(--hair);flex-wrap:nowrap}
.bar .mark{width:32px;height:32px;border-radius:10px;background:var(--ink);color:var(--lime);
  display:grid;place-items:center;font-family:var(--d);font-weight:800;font-size:12px;
  letter-spacing:-.04em;flex:0 0 auto;text-decoration:none}
.bar h1{font-family:var(--d);font-size:17px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.src{font-family:var(--px);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink3);background:var(--paper);border:1px solid var(--hair);
  padding:5px 9px;border-radius:7px;white-space:nowrap}
.inputs{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.inp{display:flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--hair);
  border-radius:9px;padding:5px 9px}
.inp label{font-family:var(--px);font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3)}
.inp input{width:76px;border:0;background:transparent;font-family:var(--m);font-size:13px;
  font-weight:500;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.inp input:focus{outline:none}
.inp:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(217,245,79,.5)}
.ghost{font-family:var(--b);font-size:13px;font-weight:600;text-decoration:none;color:var(--ink2);
  border:1px solid var(--hair);background:var(--card);border-radius:999px;padding:7px 14px;
  cursor:pointer;white-space:nowrap}
.ghost:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- totals strip ---------- */
.totals{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair);
  border-bottom:1px solid var(--hair)}
.tile{background:var(--card);padding:13px 20px 15px}
.tile .k{display:block;font-family:var(--px);font-size:9px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3)}
.tile .v{display:block;font-family:var(--d);font-size:25px;font-weight:800;letter-spacing:-.035em;
  margin-top:6px;font-variant-numeric:tabular-nums}
.tile .s{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px}
.tile.hero{background:var(--lime)}
.tile.hero .k,.tile.hero .s{color:#4a5618}
.pos{color:var(--good)}.neg{color:var(--bad)}

/* ---------- the sheet ---------- */
.scroll{overflow:auto;background:var(--card)}
table.sheet{width:100%;border-collapse:separate;border-spacing:0;min-width:1080px}
.sheet thead th{position:sticky;top:0;z-index:3;background:var(--card);
  font-family:var(--px);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink3);font-weight:400;text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--hair);white-space:nowrap}
.sheet thead th.r{text-align:right}

.sheet td{padding:9px 14px;border-bottom:1px solid var(--hair2);vertical-align:middle}
.sheet tbody tr:hover td{background:#fafbf9}

.gut{width:44px;font-family:var(--px);font-size:9px;color:#c3c8c1;text-align:right;
  padding-right:10px!important;-webkit-user-select:none;user-select:none}
.item{font-size:14.5px;font-weight:500;min-width:260px}
.item .flag{display:block;margin-top:3px;font-size:11.5px;color:var(--bad);line-height:1.45}
.item .flag::before{content:"▲ ";font-size:9px;vertical-align:1px}
.basis{font-family:var(--m);font-size:11.5px;color:var(--ink3);line-height:1.5;max-width:330px}
.barcell{width:128px}
/* a track behind the bar, so the empty part reads as "the rest of the total" */
.bar-t{height:7px;border-radius:4px;background:var(--hair);overflow:hidden}
.bar-i{height:7px;border-radius:4px;background:var(--ink);opacity:.82;min-width:2px}
.sec-income .bar-i{background:var(--sage)}
.filed{width:140px;color:var(--ink3)}
.live{width:150px;font-weight:600}
.delta{width:140px;font-size:13px}
.delta .up{color:var(--good)}.delta .dn{color:var(--bad)}

/* section headers */
tr.sec td{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:9px 14px}
tr.sec .lbl{font-family:var(--px);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
tr.sec .lbl::before{content:"";display:inline-block;width:16px;height:5px;background:var(--lime);
  border-radius:1px;margin-right:9px;vertical-align:2px}

/* subtotal + hero rows */
tr.total td{border-top:1px solid var(--ink);border-bottom:1px solid var(--hair2);background:#fcfdfb}
tr.total .item{font-weight:700;font-family:var(--d);letter-spacing:-.02em;font-size:15px}
tr.total .live{font-size:15.5px;font-weight:700}
tr.hero td{background:var(--lime);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
tr.hero .item{font-size:17px}
tr.hero .live{font-size:19px}
tr.hero .basis,tr.hero .filed{color:#5a6620}
tr.hero .gut{color:#8d9a3c}

/* an input row is one you can actually move */
.item .tag{display:inline-block;font-family:var(--px);font-size:8px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);background:var(--lime);border-radius:4px;
  padding:3px 5px;margin-left:9px;vertical-align:2px}
tr.inrow .live{box-shadow:inset 3px 0 0 var(--lime)}

.foot{font-size:12px;color:var(--ink3);padding:16px 22px 26px;line-height:1.7;max-width:980px}
.foot b{color:var(--ink2)}

@media(max-width:1180px){
  .totals{grid-template-columns:repeat(3,1fr)}
  .bar{flex-wrap:wrap;height:auto;padding:12px 16px;gap:12px}
  .inputs{margin-left:0;width:100%;overflow-x:auto}
  body{overflow:auto}.app{height:auto}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}