/* Two-ledger colour rule: metal quantities are always brass,
   cash quantities always teal. The colour of a number tells you
   which ledger it belongs to before you read the label. */

:root{
  --ink:#16181C; --ink2:#2A2E35; --surface:#FAF9F6; --panel:#fff;
  --rule:#E2DED5; --rule-soft:#EFECE5; --muted:#7A7469;
  --metal:#A8762C; --metal-bg:#FBF4E6;
  --cash:#1C6460;  --cash-bg:#EBF4F3;
  --alert:#A33526; --alert-bg:#FBEEEC; --ok:#3F6B33;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     background:var(--surface);color:var(--ink);font-size:15px;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}

/* ── layout ─────────────────────────────────────────────── */
.wrap{display:flex;min-height:100vh}
.side{background:var(--ink);color:#fff;width:200px;flex-shrink:0;padding:18px 0}
.brand{padding:0 18px 18px}
.brand b{font-size:15px;display:block}
.brand span{font-size:10px;color:#8B8578;letter-spacing:.11em;text-transform:uppercase}
.side a{display:block;padding:9px 18px;font-size:13.5px;color:#9A9488;border-left:2px solid transparent}
.side a.on{color:#fff;background:var(--ink2);border-left-color:var(--metal);font-weight:600}
.side .grp{padding:14px 18px 5px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5F5B53}
.legend{margin:16px 18px 0;padding-top:14px;border-top:1px solid var(--ink2);
        font-size:10px;color:#6E6A60;line-height:1.7}
.main{flex:1;min-width:0;padding:20px 24px 60px}
.topbar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
        flex-wrap:wrap;margin-bottom:16px}
h1{font-size:21px;margin:0;letter-spacing:-.01em}
.who{font-size:11.5px;color:var(--muted)}

/* mobile */
.mobtop{display:none}
@media(max-width:820px){
  .wrap{display:block}
  .side{position:fixed;left:-210px;top:0;bottom:0;width:200px;z-index:50;
        transition:left .2s;overflow-y:auto}
  .side.open{left:0}
  .main{padding:12px 14px 80px}
  .mobtop{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;
          padding:12px 14px;position:sticky;top:0;z-index:40}
  .mobtop b{font-size:15px}
  .burger{font-size:22px;line-height:1;cursor:pointer;background:none;border:0;color:#fff;padding:0}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45;display:none}
  .scrim.on{display:block}
  h1{font-size:18px}
}

/* ── panels ─────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:3px;margin-bottom:14px}
.panel-h{padding:11px 16px;border-bottom:1px solid var(--rule-soft);display:flex;
         justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.panel-h b{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.panel-h span{font-size:11.5px;color:var(--muted)}
.panel-b{padding:16px}
.panel-b.flush{padding:0}
.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1 1 300px;min-width:0}
.col-sm{flex:1 1 150px;min-width:0}

/* ── numbers ────────────────────────────────────────────── */
.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.n.metal{color:var(--metal)} .n.cash{color:var(--cash)} .n.neg{color:var(--alert)}
.n.big{font-size:24px;font-weight:600} .n.mid{font-size:18px;font-weight:600}
.n .u{font-size:.72em;color:var(--muted);margin-left:3px;font-weight:400}
.lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}

/* ── tables ─────────────────────────────────────────────── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
   color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:9px 10px;font-size:13.5px;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
th.r,td.r{text-align:right}
td.dim{color:var(--muted)}
tr.pick{cursor:pointer}
tr.pick:hover{background:var(--surface)}
tr.sel{background:var(--metal-bg)}

/* ── forms ──────────────────────────────────────────────── */
label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;
             text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--rule);border-radius:2px;
  font-size:16px;background:var(--surface);color:var(--ink);font-family:inherit}
input.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:2px solid var(--metal);outline-offset:-1px}
input.warn{border-color:var(--alert)}
.btn{display:inline-block;padding:11px 20px;font-size:14px;font-weight:600;border-radius:2px;
     cursor:pointer;border:1px solid transparent;background:var(--ink);color:#fff;font-family:inherit}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.danger{background:transparent;color:var(--alert);border-color:var(--rule)}
.btn.sm{padding:7px 13px;font-size:12.5px}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── bits ───────────────────────────────────────────────── */
.tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 7px;border-radius:2px;
     background:var(--surface);color:var(--muted)}
.tag.metal{background:var(--metal-bg);color:var(--metal)}
.tag.cash{background:var(--cash-bg);color:var(--cash)}
.tag.alert{background:var(--alert-bg);color:var(--alert)}
.tag.ok{background:#EDF3EB;color:var(--ok)}
.flash{padding:11px 14px;border-radius:2px;margin-bottom:14px;font-size:13.5px}
.flash.ok{background:#EDF3EB;color:var(--ok)}
.flash.err{background:var(--alert-bg);color:var(--alert)}
.muted{color:var(--muted);font-size:13px;line-height:1.6}
.note{background:var(--metal-bg);padding:12px;border-radius:2px;font-size:13px;line-height:1.55;margin-top:12px}
.note.warn{background:var(--alert-bg);color:var(--alert)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{padding:8px 14px;font-size:12.5px;border:1px solid var(--rule);border-radius:2px;color:var(--muted)}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.bar{height:9px;background:var(--rule-soft);border-radius:1px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--metal)}
.stack{display:flex;flex-direction:column-reverse;height:140px;justify-content:flex-start}
.chart{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;padding-bottom:4px}
.chart .c{flex:1 0 40px;text-align:center}
.chart .c small{font-size:10px;color:var(--muted);font-family:var(--mono);display:block;margin-top:5px}
.login{max-width:340px;margin:8vh auto;padding:0 18px}

@media print{.side,.mobtop,.tabs,.btns{display:none}.main{padding:0}}