/* ───────────────────────── Tokens ───────────────────────── */
:root {
  --cream:#F9F8F6; --ink:#1C1B1A; --sand:#EFECE6; --line:#E5E0D8;
  --muted:#6E6A64; --faint:#938E85; --soft-ink:#3B3935;
  --honey:#B8842B; --honey-soft:#F4E6C8; --honey-deep:#8A6116;
  --leaf:#4E6B52; --rust:#9C4A2F;
  --paper:rgba(255,255,255,.74); --head:#F1EEE8;
  --row:40px;
  /* surfaces and small details, so the dark theme can swap them in one place */
  --bar:rgba(249,248,246,.86); --crumbs:rgba(239,236,230,.6); --chip:rgba(255,255,255,.72); --chip-hover:#fff;
  --field:#fff; --row-line:rgba(229,224,216,.65); --calc:rgba(239,236,230,.55); --guide:#E3DDD2; --sep:#C6BEB0;
  --hover-ink:rgba(28,27,26,.08); --tag-cr:#F3E7E1; --badge-no:#CFC8BC; --backdrop:rgba(28,27,26,.26);
  --shadow:0 30px 70px -24px rgba(28,27,26,.4); --btn-dark-hover:#000; --toast-warn:#5B2A19; --mark-bg:#1C1B1A; --mark-fg:#F2CF7E;
  --display:"Plus Jakarta Sans", system-ui, sans-serif;
  /* chart series (validated: lightness band, chroma, colour-blind separation, contrast) */
  --s-fees:#B8842B; --s-exp:#2F74C0; --s-draw:#C9573A; --s-neutral:#3B3935; --grid:#E7E2D9; --card:rgba(255,255,255,.66);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --cream:#0E0D0C; --ink:#F2EBDD; --sand:#1C1A17; --line:#2B2824;
  --muted:#A8A194; --faint:#7F796F; --soft-ink:#D8D0C1;
  --honey:#C9A054; --honey-soft:rgba(201,160,84,.15); --honey-deep:#E2BD72;
  --leaf:#8DB694; --rust:#E08A74;
  --paper:rgba(20,18,16,.92); --head:#171513;
  --bar:rgba(14,13,12,.84); --crumbs:rgba(22,20,18,.7); --chip:rgba(30,28,25,.8); --chip-hover:#262320;
  --field:#171513; --row-line:rgba(43,40,36,.9); --calc:rgba(28,26,23,.9); --guide:#34302B; --sep:#4A453E;
  --hover-ink:rgba(242,235,221,.08); --tag-cr:#3A221B; --badge-no:#6E675C; --backdrop:rgba(0,0,0,.55);
  --shadow:0 30px 70px -24px rgba(0,0,0,.8); --btn-dark-hover:#fff; --toast-warn:#6B2E1E; --mark-bg:#C9A054; --mark-fg:#0E0D0C;
  --display:"Fraunces", Georgia, serif;
  --s-fees:#B0822D; --s-exp:#4A86C8; --s-draw:#D0654A; --s-neutral:#D8D0C1; --grid:#26231F; --card:rgba(20,18,16,.9);
}

/* ───────────────────────── Base (own reset, so nothing fights it) ───────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body {
  background:var(--cream); color:var(--ink); overflow:hidden;
  font-family:"Plus Jakarta Sans", system-ui, sans-serif; font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3, p { margin:0; }
button { font:inherit; color:inherit; }
svg.ico { display:inline-block; flex-shrink:0; }
.mono, .n, kbd { font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--honey); outline-offset:2px;
}

/* Three.js ambient field */
#bg { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.8; }

/* ───────────────────────── Shell ───────────────────────── */
#app { position:relative; z-index:1; height:100vh; height:100dvh; display:flex; flex-direction:column; }

.topbar {
  display:flex; align-items:center; gap:16px; padding:12px 24px;
  border-bottom:1px solid var(--line); background:var(--bar);
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.brand > div { min-width:0; }
.brand-mark {
  width:34px; height:34px; border-radius:10px; background:var(--mark-bg); color:var(--mark-fg);
  display:grid; place-items:center; flex-shrink:0;
}
.brand-name { font-family:var(--display); font-size:16.5px; font-weight:650; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub { font-size:12px; color:var(--faint); margin-top:2px; white-space:nowrap; }
.top-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.chip {
  height:36px; padding:0 6px 0 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--chip); display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.chip:hover { background:var(--chip-hover); }
.chip .chip-val { font-family:"JetBrains Mono", monospace; font-size:12.5px; }
kbd {
  font-size:10.5px; line-height:1; padding:4px 6px; border-radius:6px; border:1px solid var(--line);
  background:var(--cream); color:var(--muted); box-shadow:inset 0 -1px 0 var(--line); white-space:nowrap;
}

/* Breadcrumbs */
.crumbs {
  display:flex; align-items:center; gap:2px; padding:0 20px; height:44px; flex-shrink:0;
  border-bottom:1px solid var(--line); background:var(--crumbs);
  overflow-x:auto; scrollbar-width:none;
}
.crumbs::-webkit-scrollbar { display:none; }
.crumb {
  font-size:13px; color:var(--muted); padding:5px 9px; border-radius:7px; white-space:nowrap;
  cursor:pointer; background:none; border:0;
}
.crumb:hover { background:var(--chip-hover); color:var(--ink); }
.crumb.is-current { color:var(--ink); font-weight:600; cursor:default; background:none; }
.crumb-sep { color:var(--sep); }

/* Main area */
.main { flex:1; min-height:0; display:flex; padding:20px 24px 16px; }
#screen { flex:1; min-height:0; width:100%; max-width:none; margin:0 auto; display:flex; flex-direction:column; } /* 27 Oct 2026: use the whole screen (was 1240px) */

.report-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; flex-shrink:0; }
.report-title { font-size:26px; font-weight:650; letter-spacing:-.025em; line-height:1.15; font-family:var(--display); }
.report-sub { font-size:13px; color:var(--muted); margin-top:5px; }
.head-note { font-size:12.5px; color:var(--muted); text-align:right; }
.head-note .n { color:var(--ink); font-size:13px; }

/* ───────────────────────── The sheet (every report uses it) ───────────────────────── */
.sheet {
  flex:0 1 auto; min-height:0; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:14px; background:var(--paper); overflow:hidden;
}
.sheet-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.grid { display:grid; grid-template-columns:var(--cols); align-items:center; min-width:var(--minw, 760px); }
.grid > div { padding:0 16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid > .num { text-align:right; }

.thead {
  position:sticky; top:0; z-index:3; height:40px; background:var(--head);
  border-bottom:1px solid var(--line); font-size:12px; color:var(--faint); font-weight:500;
}

.rows { position:relative; min-width:var(--minw, 760px); }
.cursor-bar {
  position:absolute; left:0; right:0; top:0; height:var(--row); z-index:0; pointer-events:none;
  background:var(--honey-soft); box-shadow:inset 3px 0 0 var(--honey); opacity:0;
}
.r {
  position:relative; z-index:1; height:var(--row);
  border-bottom:1px solid var(--row-line); font-size:13.5px;
  scroll-margin-top:44px; scroll-margin-bottom:110px;
}
.r.sel { cursor:pointer; }
.r .n { font-size:13px; }

/* Indentation lives on the name cell only. The selector is deliberately
   stronger than ".grid > div" so the padding can never be overridden. */
.grid > .c-name { padding-left:calc(18px + var(--d, 0) * 22px); display:flex; align-items:center; gap:8px; }
.nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.k-group .nm { font-weight:560; }
.k-group.d0 .nm, .k-pl .nm { font-weight:650; }
.k-ledger .nm, .k-posting .nm { color:var(--soft-ink); }
.k-info { color:var(--muted); }
.k-info .nm { font-style:normal; }
.k-section { height:46px; border-bottom:1px solid var(--line); }
.k-section > div { align-self:end; padding-bottom:8px; font-size:12.5px; color:var(--faint); font-weight:500; }
.k-calc { background:var(--calc); font-weight:650; border-top:1px solid var(--line); }
.k-empty { height:64px; color:var(--faint); }
.r.dim > div { opacity:.55; }
.r.dim.is-active > div { opacity:1; }
.r.is-active .nm { color:var(--ink); }

/* depth guide: a hairline marking nested rows */
.r.nested > .c-name::before {
  content:""; position:absolute; left:calc(18px + (var(--d) - 1) * 22px + 4px); top:0; bottom:0;
  border-left:1px solid var(--guide);
}

.go { opacity:0; color:var(--honey-deep); margin-left:auto; transition:opacity .15s; }
.r.is-active .go { opacity:1; }
.alter-btn {
  opacity:0; border:0; background:none; cursor:pointer; color:var(--faint);
  width:24px; height:24px; border-radius:6px; display:grid; place-items:center; flex-shrink:0;
  transition:opacity .15s, background .15s;
}
.r:hover .alter-btn, .r.is-active .alter-btn { opacity:1; }
.alter-btn:hover { background:var(--hover-ink); color:var(--ink); }

.sfx { display:inline-block; width:18px; margin-left:6px; text-align:left; font-size:10.5px; color:var(--faint); font-family:"JetBrains Mono", monospace; }
.neg { color:var(--rust); }
.tag {
  font-family:"JetBrains Mono", monospace; font-size:10.5px; padding:3px 6px; border-radius:5px;
  background:var(--sand); color:var(--muted); flex-shrink:0;
}
.tag.cr { background:var(--tag-cr); color:var(--rust); }
.sub-muted { color:var(--faint); font-size:12px; margin-left:4px; overflow:hidden; text-overflow:ellipsis; }
.plus { color:var(--faint); font-size:11.5px; font-family:"JetBrains Mono", monospace; }

/* Sticky footer inside the scroller so it lines up with the columns */
.tfoot { position:sticky; bottom:0; z-index:3; background:var(--head); border-top:1px solid var(--line); min-width:var(--minw, 760px); }
.tfoot .grid { min-height:48px; font-weight:650; }
.tfoot .grid + .grid { border-top:1px solid var(--row-line); }
.stack { display:flex; flex-direction:column; gap:2px; line-height:1.2; padding:6px 0; }
.stack .n { font-size:12px; }
.status {
  display:flex; align-items:center; gap:8px; min-height:36px; padding:8px 18px; font-size:12.5px; line-height:1.4;
  border-top:1px solid var(--row-line); color:var(--leaf);
}
.status.warn { color:var(--rust); }

/* ───────────────────────── Gateway + dashboard ───────────────────────── */
#screen.wide { max-width:none; } /* 27 Oct 2026: was 1480px */
.gw { flex:1; min-height:0; display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; }
.gw-menu { display:flex; flex-direction:column; min-height:0; }
.gw .sheet { flex:0 1 auto; }
.gw .r { --row:44px; height:44px; font-size:14px; }
.gw .cursor-bar { height:44px; }
.hk { width:26px; text-align:center; }
.dash { min-height:0; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:14px; padding:0 4px 8px 0; }
.dash-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.kpis { display:grid; grid-template-columns:minmax(0,1.3fr) repeat(4, minmax(0,1fr)); gap:12px; }
.kpis.six { grid-template-columns:minmax(0,1.3fr) repeat(5, minmax(0,1fr)); }
@media (max-width: 1180px) { .kpis.six { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.tile {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; overflow:hidden;
  padding:14px 16px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card);
  text-align:left; cursor:pointer; color:var(--ink); transition:border-color .2s, transform .2s;
}
.tile:hover { border-color:var(--honey); transform:translateY(-1px); }
.t-label { font-size:12px; color:var(--muted); }
.t-value { font-size:24px; font-weight:650; letter-spacing:-.025em; white-space:nowrap; margin-top:4px; font-variant-numeric:proportional-nums; }
.tile.hero .t-value { font-size:48px; line-height:1.05; letter-spacing:-.035em; }
.tile.hero { background:linear-gradient(145deg, var(--honey-soft), transparent 70%), var(--card); }
.t-sub { font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.spark { width:100%; height:28px; margin-top:6px; overflow:visible; }
.spark-line { fill:none; stroke:var(--faint); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; opacity:.7; }
.spark-dot { stroke:var(--cream); stroke-width:2; }
.dgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.card { border:1px solid var(--line); border-radius:14px; background:var(--card); padding:16px 18px 14px; min-width:0; }
.card.span2 { grid-column:1 / -1; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.card h3 { font-size:14px; font-weight:620; letter-spacing:-.01em; font-family:var(--display); }
[data-theme="dark"] .card h3 { font-size:15.5px; font-weight:500; }
.c-sub { font-size:12px; color:var(--faint); margin-top:3px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.chart { width:100%; min-height:40px; }
.empty-c { font-size:12.5px; color:var(--faint); padding:18px 0; }
svg.viz { display:block; overflow:visible; }
svg.viz text { font-family:"JetBrains Mono", monospace; font-size:10.5px; }
svg.viz .ax { fill:var(--faint); }
svg.viz .lbl { fill:var(--soft-ink); font-family:"Plus Jakarta Sans", system-ui, sans-serif; font-size:12px; }
svg.viz .val, svg.viz .end-lbl { fill:var(--ink); font-size:11.5px; }
svg.viz .grid-l { stroke:var(--grid); stroke-width:1; }
svg.viz .base-l { stroke:var(--line); stroke-width:1; }
svg.viz .hit { fill:transparent; cursor:pointer; outline:none; }
svg.viz .hit:focus-visible { fill:var(--hover-ink); }
svg.viz .hit-line { cursor:crosshair; }
.f-fees { fill:var(--s-fees); background:var(--s-fees); }
.f-exp { fill:var(--s-exp); background:var(--s-exp); }
.f-draw { fill:var(--s-draw); background:var(--s-draw); }
.f-neutral { fill:var(--s-neutral); background:var(--s-neutral); }
svg.viz .bar { transition:opacity .15s; }
svg.viz .bar.muted { opacity:.45; }
svg.viz .line-s { fill:none; stroke:var(--s-neutral); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
svg.viz .area-f { fill:var(--s-neutral); opacity:.07; }
svg.viz .end-dot, svg.viz .xdot { fill:var(--s-neutral); stroke:var(--cream); stroke-width:2; }
svg.viz .xhair { stroke:var(--muted); stroke-width:1; opacity:0; pointer-events:none; }
svg.viz .xdot { opacity:0; pointer-events:none; }
.viz-tip {
  position:fixed; z-index:60; display:none; pointer-events:none; min-width:150px;
  padding:9px 11px; border-radius:10px; background:var(--cream); border:1px solid var(--line); box-shadow:var(--shadow); font-size:12px;
}
.tip-h { font-size:11.5px; color:var(--muted); margin-bottom:5px; }
.tip-r { display:flex; align-items:center; gap:8px; line-height:1.7; }
.tip-r b { font-family:"JetBrains Mono", monospace; font-weight:600; color:var(--ink); min-width:92px; }
.tip-r span { color:var(--muted); }
.tip-k { width:12px; height:2.5px; border-radius:2px; display:inline-block; flex-shrink:0; }
.attn { display:flex; flex-direction:column; gap:6px; }
.attn-row {
  display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; text-align:left;
  padding:9px 10px; border-radius:10px; border:1px solid transparent; background:var(--sand); cursor:pointer; color:var(--ink);
}
.attn-row:hover { border-color:var(--honey); }
.attn-row b { display:block; font-size:13px; font-weight:600; }
.attn-row em { display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:1px; }
.attn-ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--honey-soft); color:var(--honey-deep); }
.attn-row.warn .attn-ic { background:var(--tag-cr); color:var(--rust); }
.attn-go { font-size:12px; color:var(--muted); }
.attn-empty { font-size:13px; color:var(--leaf); padding:10px 2px; }
.theme-veil { position:fixed; inset:0; z-index:90; background:var(--cream); pointer-events:none; }

/* ───────────────────────── Voucher header ───────────────────────── */
.vch {
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
  border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:18px 20px; margin-bottom:14px; flex-shrink:0;
}
.vch-badge { border-radius:10px; background:var(--ink); color:var(--cream); padding:12px 16px; min-width:128px; }
.vch-badge .t { font-size:15px; font-weight:650; }
.vch-badge .no { font-family:"JetBrains Mono", monospace; font-size:12px; color:var(--badge-no); margin-top:3px; }
.vch-meta { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 24px; }
.vch-meta dt { font-size:11.5px; color:var(--faint); }
.vch-meta dd { margin:3px 0 0; font-size:13.5px; overflow-wrap:anywhere; }
.flag-review { color:var(--honey-deep); font-weight:600; }
.chip-icon { width:36px; padding:0; justify-content:center; color:var(--muted); }
.chip-icon .ico-sun { display:none; }
[data-theme="dark"] .chip-icon .ico-sun { display:block; }
[data-theme="dark"] .chip-icon .ico-moon { display:none; }
#chip-file .chip-val { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drop-veil { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  background:var(--bar); backdrop-filter:blur(3px); }
.drop-veil.on { display:flex; }
.drop-veil > div { border:2px dashed var(--honey); border-radius:18px; padding:34px 44px; text-align:center; background:var(--cream); }
.drop-veil strong { display:block; font-size:17px; margin-bottom:4px; }
.drop-veil span { font-size:13px; color:var(--muted); }
.vch-meta .wide { grid-column:1 / -1; }


/* ───────────────────────── Editing boxes ───────────────────────── */
.modal-card.xwide { max-width:900px; }
.three { display:grid; grid-template-columns:150px 180px minmax(0,1fr); gap:12px; }
.vc-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.flag-toggle { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); padding:8px 12px; border:1px solid var(--line); border-radius:999px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.flag-toggle input { accent-color:var(--honey); margin:0; }
.vc-lines { border:1px solid var(--line); border-radius:12px; background:var(--paper); padding:10px 12px; }
.vc-grid { display:grid; grid-template-columns:minmax(0,1fr) 140px 140px 30px; gap:8px; align-items:start; }
.vc-lh { font-size:11.5px; color:var(--faint); padding:0 2px 6px; }
.vc-row { padding:3px 0; }
.vc-led { min-width:0; }
.vc-under { display:block; font-size:11px; color:var(--faint); margin:3px 2px 0; min-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-under.bad { color:var(--rust); }
.vc-grid .num { text-align:right; }
.vc-x { width:30px; height:40px; border:0; background:none; color:var(--faint); font-size:18px; line-height:1; cursor:pointer; border-radius:8px; }
.vc-x:hover { background:var(--sand); color:var(--rust); }
.vc-tot { border-top:1px solid var(--line); margin-top:6px; padding-top:10px; align-items:center; font-weight:650; }
.vc-tot .num { padding-right:12px; }
.vc-diff { font-size:12.5px; color:var(--leaf); margin-top:8px; min-height:18px; }
.vc-diff.bad { color:var(--rust); }
.btn-ghost { height:34px; border-style:dashed; justify-self:start; font-size:12.5px; }
.m-actions .btn-danger { color:var(--rust); border-color:transparent; margin-right:4px; }
.m-actions .btn-danger:hover { background:rgba(156,74,47,.08); }
.m-actions .btn-danger[data-armed="1"] { background:var(--rust); color:#fff; }
.vch-side { display:flex; flex-direction:column; gap:10px; }
.vch-alter { height:34px; font-size:12.5px; padding:0 12px 0 8px; }
.badge { margin-left:8px; font-family:"JetBrains Mono", monospace; font-size:11px; padding:2px 8px; border-radius:999px; background:var(--honey-soft); color:var(--honey-deep); flex-shrink:0; }
.r.flagged > div:first-child::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--honey); display:inline-block; margin-right:7px; vertical-align:middle; }
.coa-actions { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; flex-shrink:0; }
.coa-actions .btn { height:34px; font-size:12.5px; padding:0 12px 0 8px; }
.coa-tip { font-size:12px; color:var(--faint); }
.coa-type { font-size:12px; color:var(--muted); }
.coa-count { color:var(--faint); }

/* resizable columns */
.thead > div { position:relative; align-self:stretch; display:flex; align-items:center; min-width:0; }
.thead > div.num { justify-content:flex-end; }
.col-grip { position:absolute; top:4px; bottom:4px; right:0; width:14px; cursor:col-resize; z-index:5; touch-action:none; }
.col-grip::after { content:""; position:absolute; right:3px; top:4px; bottom:4px; width:2px; border-radius:2px; background:var(--line); opacity:0; transition:opacity .15s; }
.thead:hover .col-grip::after { opacity:1; }
.col-grip:hover::after, body.resizing .col-grip::after { background:var(--honey); opacity:1; }
body.resizing, body.resizing * { cursor:col-resize !important; user-select:none; }

/* unsaved changes */
.key-save.dirty { color:var(--honey-deep); font-weight:600; }
.key-save.dirty kbd { border-color:var(--honey); color:var(--honey-deep); }
#chip-file.dirty .chip-val::after { content:" ●"; color:var(--honey); }
@media (max-width: 620px) {
  .three { grid-template-columns:1fr; }
  .vc-grid { grid-template-columns:minmax(0,1fr) 88px 88px 28px; }
  .vc-head { flex-direction:column; }
}


/* ───────────────────────── Outstanding, recurring, import ───────────────────────── */
:root { --ag0:#E6CB94; --ag1:#CFA052; --ag2:#A87522; --ag3:#6F4A0E; }
:root[data-theme="dark"] { --ag0:#5E4A25; --ag1:#8C6A2C; --ag2:#C0913F; --ag3:#EBC57A; }
.ag0 { background:var(--ag0); } .ag1 { background:var(--ag1); } .ag2 { background:var(--ag2); } .ag3 { background:var(--ag3); }
.age-strip { display:flex; gap:2px; height:8px; width:100%; border-radius:4px; overflow:hidden; }
.age-strip > span { min-width:3px; }
.age-strip.big { height:18px; border-radius:6px; margin:4px 0 10px; }
.age-strip.empty > span { background:var(--sand); }
.age-legend b { font-family:"JetBrains Mono", monospace; font-weight:600; color:var(--ink); margin-left:4px; }
.os-top { display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; flex-shrink:0; }
.seg { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--chip); }
.seg button { border:0; background:none; height:30px; padding:0 14px; border-radius:999px; font-size:12.5px; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; gap:7px; }
.seg button.on { background:var(--ink); color:var(--cream); }
.seg button.on kbd { background:transparent; color:inherit; border-color:rgba(255,255,255,.3); box-shadow:none; }
.seg button b { font-family:"JetBrains Mono", monospace; font-weight:600; }
.os-kpis { grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr)); margin-bottom:12px; flex-shrink:0; }
.tile.static { cursor:default; }
.tile.static:hover { transform:none; border-color:var(--line); }
.tile.hero.static .t-value { font-size:34px; }
.tile.warn .t-value { color:var(--rust); }
.os-age { margin-bottom:12px; flex-shrink:0; }
.adv { color:var(--leaf); }
.habit { font-size:12.5px; color:var(--soft-ink); margin-right:8px; }
.mini-trend { width:64px; height:18px; vertical-align:middle; overflow:visible; }
.mini-trend path { fill:none; stroke:var(--faint); stroke-width:1.5; stroke-linejoin:round; }
.mini-trend circle { fill:var(--honey); }
.pill { font-size:11.5px; padding:3px 9px; border-radius:999px; white-space:nowrap; background:var(--sand); color:var(--muted); }
.pill.open { background:var(--honey-soft); color:var(--honey-deep); }
.pill.late { background:var(--tag-cr); color:var(--rust); }
.pill.paid { background:transparent; color:var(--leaf); border:1px solid var(--line); }
.input.im-led { height:30px; font-size:12.5px; padding:0 9px; border-radius:8px; }
.im-led.bad { border-color:var(--rust); }
.im-inc { accent-color:var(--honey); width:16px; height:16px; }
.im-warn { display:inline-grid; place-items:center; width:18px; height:18px; margin-left:6px; border-radius:50%; background:var(--tag-cr); color:var(--rust); font-size:11px; font-weight:700; }
.rt-three { grid-template-columns:1fr 1fr 1fr; }
.rt-active { justify-self:start; }
.rt-switch { border:1px dashed var(--honey); border-radius:12px; padding:12px 14px; background:var(--honey-soft); }
.rt-switch b { font-size:13px; }
.rt-switch p { font-size:12.5px; color:var(--soft-ink); margin:6px 0 10px; line-height:1.55; }
.due-list { list-style:none; margin:16px 0 0; padding:0; max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.due-list li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; padding:9px 12px; border-bottom:1px solid var(--row-line); font-size:13px; }
.due-list li:last-child { border-bottom:0; }
.due-list .n { color:var(--muted); }
.btn[disabled] { opacity:.45; cursor:default; }
@media (max-width: 1180px) { .os-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }


/* ───────────────────────── Picker (replaces the browser's drop-downs) ───────────────────────── */
.sel-btn { display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; cursor:pointer; }
.sel-btn .sel-v { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sel-btn .sel-chev { color:var(--faint); transition:transform .18s; flex-shrink:0; }
.sel-btn[aria-expanded="true"] { border-color:var(--honey); box-shadow:0 0 0 3px var(--honey-soft); }
.sel-btn[aria-expanded="true"] .sel-chev { transform:rotate(180deg); color:var(--honey-deep); }
.pick {
  position:fixed; z-index:95; display:none; flex-direction:column; overflow:hidden;
  background:var(--cream); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
}
.pick.open { display:flex; }
.pick-search { padding:8px; border-bottom:1px solid var(--line); }
.pick-q { width:100%; height:34px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font:inherit; font-size:13px; background:var(--field); color:var(--ink); outline:none; }
.pick-q:focus { border-color:var(--honey); }
.pick-list { overflow:auto; padding:5px; overscroll-behavior:contain; }
.pick-h { font-size:11px; color:var(--faint); padding:9px 10px 4px; letter-spacing:.02em; }
.pick-it {
  display:flex; align-items:center; gap:10px; padding:7px 10px; padding-left:calc(10px + var(--dp, 0) * 16px);
  border-radius:8px; cursor:pointer; min-height:36px;
}
.pick-it.on { background:var(--honey-soft); }
.pick-main { display:flex; flex-direction:column; min-width:0; flex:1; }
.pick-t { font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-s { font-size:11.5px; color:var(--faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-n { font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.pick-ck { color:var(--honey-deep); font-weight:700; font-size:12px; }
.pick-it.is-sel .pick-t { font-weight:600; }
.pick mark { background:none; color:var(--honey-deep); font-weight:700; }
.pick-empty { padding:14px 12px; font-size:13px; color:var(--muted); line-height:1.5; }
.pick-empty span { font-size:12px; color:var(--faint); }


/* ───────────────────────── Statements (BS, P&L) ───────────────────────── */
.st-wrap { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; }
.st-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; margin-bottom:12px; flex-shrink:0; }
.st-wrap.is-h .st-bar, .st-wrap.is-h .st-paper { max-width:none; } /* 27 Oct 2026: side by side fills the screen (was 1180px); Vertical stays a readable column */
.st-wrap.is-v .st-bar, .st-wrap.is-v .st-paper { max-width:780px; }
.st-paper {
  width:100%; flex:0 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:16px; background:var(--paper); padding:26px 30px 18px;
}
.st-letter { text-align:center; padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.st-co { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.st-title { font-family:var(--display); font-size:24px; font-weight:650; letter-spacing:-.02em; margin-top:6px; }
.st-period { font-size:12.5px; color:var(--muted); margin-top:4px; }
.st-pair { display:grid; grid-template-columns:1fr 1fr; gap:0 34px; margin-top:6px; }
.st-pair + .st-pair { margin-top:18px; }
.st-col { position:relative; min-width:0; display:flex; flex-direction:column; }
.st-wrap.is-v .st-col + .st-col { margin-top:22px; }
.st-colhead { display:flex; justify-content:space-between; align-items:flex-end; padding:14px 12px 8px; border-bottom:1.5px solid var(--ink); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); font-weight:600; }
.st-colhead .num { font-size:10.5px; letter-spacing:.02em; text-transform:none; color:var(--faint); font-weight:500; }
.st-rows { flex:1; min-width:0; --minw:0; }
.st-rows .grid { --cols:minmax(0, 1fr) 140px 140px; }
.st-col .grid { grid-template-columns:minmax(0, 1fr) 140px 140px; min-width:0; }
.st-rows .r { --row:34px; height:34px; border-bottom:0; font-size:13.5px; }
.st-rows .cursor-bar { height:34px; border-radius:6px; }
.st-rows .grid > div { padding:0 12px; }
.st-rows .grid > .c-name { padding-left:calc(12px + var(--d, 0) * 20px); }
.k-st-group .nm { font-weight:600; color:var(--ink); }
.k-st-sub .nm { color:var(--soft-ink); font-size:13px; }
.k-st-sub .n { font-size:12.5px; color:var(--soft-ink); }
.r.nested.k-st-sub > .c-name::before { display:none; }
.st-pre { color:var(--faint); font-weight:500; }
.st-badge { margin-left:8px; font-size:10.5px; padding:2px 7px; border-radius:999px; background:var(--tag-cr); color:var(--rust); font-weight:600; }
.st-zero { color:var(--faint); }
.k-st-group { margin-top:4px; }
.k-st-calc .nm, .k-st-subtotal .nm { font-weight:600; }
.k-st-calc.st-carry .nm { font-style:italic; font-weight:500; color:var(--muted); }
.k-st-calc.st-result .nm, .k-st-calc.st-result .n { font-weight:700; color:var(--ink); }
.k-st-subtotal > div:last-child { box-shadow:inset 0 1px 0 var(--ink); }
.k-st-subtotal { margin:4px 0; }
.k-st-fill { pointer-events:none; }
.r.st-warn .nm { color:var(--rust); }
.st-total { margin-top:auto; min-height:44px; font-weight:700; font-size:14px; border-top:1px solid var(--ink); }
.st-total > div { padding:0 12px; }
.st-total > .num { text-align:right; }
.st-total > .num { overflow:visible; }
.st-total .n { font-size:14px; display:inline-block; line-height:1.3; border-bottom:3px double var(--ink); padding-bottom:1px; }
.st-note { border-top:0; padding:10px 4px 0; }
.st-note + .st-note { padding-top:4px; }
.st-i { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; border:1.5px solid currentColor; font-size:9.5px; font-weight:700; font-style:normal; flex-shrink:0; }
.status.st-note:not(.warn) { color:var(--muted); }
.status.st-note:first-of-type:not(.warn) { color:var(--leaf); }
@media (max-width: 900px) {
  .st-pair { grid-template-columns:1fr; gap:18px; }
  .st-paper { padding:18px 14px 14px; }
  .st-col .grid, .st-rows .grid { grid-template-columns:minmax(0, 1fr) 92px 104px; }
}


.pick-create .pick-t { color:var(--honey-deep); font-weight:600; }
.pick-plus { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; background:var(--honey-soft); color:var(--honey-deep); font-weight:700; flex-shrink:0; }
.pick-new { padding:10px 10px 6px; font-size:13px; color:var(--ink); border-bottom:1px solid var(--row-line); margin-bottom:4px; }
.pick-new b { color:var(--honey-deep); }
.pick-new span { display:block; font-size:11.5px; color:var(--faint); margin-top:2px; }


/* marking and moving */
.r.marked { box-shadow:inset 3px 0 0 var(--s-exp); }
.r.marked > .c-name::after { content:"✓"; margin-left:8px; font-size:11px; font-weight:700; color:var(--cream); background:var(--s-exp); border-radius:4px; padding:1px 4px; order:-1; margin-right:2px; }
.rl-sides { display:grid; gap:6px; }
.rl-side { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; line-height:1.4; }
.rl-side:has(input:checked) { border-color:var(--honey); background:var(--honey-soft); }
[data-theme="dark"] .rl-side:has(input:checked) { background:rgba(176,130,45,.14); }
.rl-side input, .rl-check input { accent-color:var(--honey); }
.rl-side input { margin-top:3px; flex:none; }
.rl-side .sub-muted { display:block; margin-top:2px; }
.rl-check { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.r.whole .nm { font-weight:600; }
.goto-modal { align-items:flex-start; padding-top:12vh; }
.modal-card.goto-card { max-width:600px; padding:0; overflow:hidden; display:flex; flex-direction:column; max-height:70vh; }
.goto-bar { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--faint); }
.goto-bar input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:var(--ink); }
.goto-list { overflow:auto; padding:6px; flex:1; }
.goto-list .pick-it { display:flex; align-items:center; gap:10px; }
.goto-list mark { background:none; color:var(--honey-deep); font-weight:650; }
[data-theme="dark"] .goto-list mark { color:var(--honey); }
.goto-kind { font-size:10.5px; color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:1px 6px; white-space:nowrap; }
.goto-foot { display:flex; gap:16px; flex-wrap:wrap; padding:9px 16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--faint); }
.goto-foot kbd, .goto-bar kbd { margin-right:4px; }
@media (max-width:640px) { .chip-goto .chip-val, .chip-goto kbd { display:none; } .goto-modal { padding-top:20px; } }
.filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:8px 12px; border-radius:10px;
  background:var(--honey-soft); color:var(--ink); font-size:13px; }
[data-theme="dark"] .filter-bar { background:rgba(176,130,45,.16); }
.filter-bar .fb-ic { color:var(--honey-deep); display:inline-flex; }
[data-theme="dark"] .filter-bar .fb-ic { color:var(--honey); }
.filter-bar .fb-t { font-weight:600; flex:1; min-width:180px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px) { .field-row { grid-template-columns:1fr; } }
.mark-bar { position:fixed; left:50%; bottom:64px; transform:translateX(-50%) translateY(20px); z-index:65; display:flex; align-items:center; gap:6px;
  padding:6px 8px 6px 16px; border-radius:999px; background:var(--ink); color:var(--cream); font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:var(--shadow); }
.mark-bar.on { opacity:1; pointer-events:auto; transform:translateX(-50%); }
.mark-bar .mb-sep { width:1px; height:18px; background:rgba(255,255,255,.2); margin:0 4px; }
.mark-bar button { border:0; background:transparent; color:inherit; font:inherit; font-size:12.5px; display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; cursor:pointer; }
.mark-bar button:hover { background:rgba(255,255,255,.12); }
.mark-bar kbd { background:transparent; color:inherit; border-color:rgba(255,255,255,.3); box-shadow:none; }
:root[data-theme="dark"] .mark-bar .mb-sep { background:rgba(0,0,0,.2); }
:root[data-theme="dark"] .mark-bar kbd { border-color:rgba(0,0,0,.3); }

/* ───────────────────────── Key bar ───────────────────────── */
.keybar {
  display:flex; gap:4px; padding:8px 20px; flex-shrink:0; border-top:1px solid var(--line);
  background:var(--bar); overflow-x:auto; scrollbar-width:none;
}
.keybar::-webkit-scrollbar { display:none; }
.key {
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px 0 6px; border-radius:8px;
  font-size:12.5px; color:var(--muted); background:none; border:0; cursor:pointer; white-space:nowrap;
}
.key:hover:not([disabled]) { background:var(--sand); color:var(--ink); }
.key[disabled] { opacity:.38; cursor:default; }
.keybar .spacer { flex:1; }

/* ───────────────────────── Modals ───────────────────────── */
.modal { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:var(--backdrop); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-card {
  position:relative; width:100%; max-width:480px; max-height:calc(100vh - 40px); overflow:auto;
  background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:var(--shadow);
}
.modal-card.wide { max-width:700px; }
.m-title { font-size:19px; font-weight:650; letter-spacing:-.02em; font-family:var(--display); }
.m-sub { font-size:12.5px; color:var(--faint); margin-top:4px; line-height:1.5; }
.fields { display:grid; gap:12px; margin-top:18px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.amt-row { display:grid; grid-template-columns:1fr 96px; gap:8px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.input {
  width:100%; height:40px; padding:0 12px; border-radius:9px; border:1px solid var(--line);
  background:var(--field); font:inherit; font-size:13.5px; color:var(--ink);
}
select.input { padding-right:28px; }
.input.mono { font-size:13px; }
.hint { font-size:11.5px; color:var(--faint); margin-top:5px; line-height:1.45; overflow-wrap:anywhere; }
.hint .mono { color:var(--muted); }
.m-error { font-size:12.5px; color:var(--rust); margin-top:12px; display:none; }
.m-error.show { display:block; }
.m-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:20px; }
.m-actions .left { margin-right:auto; font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:6px; }
.btn {
  height:40px; padding:0 16px; border-radius:999px; font-size:13.5px; font-weight:550;
  border:1px solid var(--line); background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover { background:var(--sand); }
.btn-dark { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.btn-dark:hover { background:var(--btn-dark-hover); }
.presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.pd-inputs { margin-top:16px; }
.pd-inputs .input { font-size:14px; }
.pd-inputs .input.bad { border-color:#C9573A; box-shadow:0 0 0 3px rgba(201,87,58,.15); }
.pd-hint { margin-top:8px; line-height:1.9; }
.pd-hint b { font-family:"JetBrains Mono", monospace; font-weight:500; color:var(--ink); }
.preset .pn { display:inline-grid; place-items:center; width:16px; height:16px; margin-right:6px; border-radius:4px; font-size:10.5px; font-family:"JetBrains Mono", monospace; background:var(--sand); color:var(--muted); }
.preset.on .pn { background:rgba(255,255,255,.18); color:inherit; }
.preset { height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--chip); font-size:12.5px; cursor:pointer; color:var(--ink); }
.preset:hover { background:var(--chip-hover); }
.preset.on { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.cal-wrap { margin-top:14px; display:flex; justify-content:center; }
#fp-range { display:none !important; }   /* Flatpickr turns its input visible; the calendar is the UI */
.readout { display:flex; gap:24px; margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--sand); font-size:12.5px; color:var(--muted); }
.readout b { display:block; font-family:"JetBrains Mono", monospace; font-weight:500; color:var(--ink); font-size:13px; margin-top:2px; }

/* Toast */
.toast { position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:70; display:none; }
.toast-in { height:42px; padding:0 16px; border-radius:999px; background:var(--ink); color:var(--cream); font-size:13px; font-weight:500; display:flex; align-items:center; gap:9px; box-shadow:0 14px 30px -12px rgba(28,27,26,.45); white-space:nowrap; }
.toast.warn .toast-in { background:var(--toast-warn); color:#F7EDE6; }
/* Phone: the message wraps inside the screen instead of running off it */
@media (max-width: 720px) {
  .toast { width:calc(100vw - 32px); bottom:24px; }
  .toast-in { height:auto; min-height:42px; padding:10px 16px; border-radius:16px; white-space:normal; line-height:1.4; }
}

/* ───────────────────────── Flatpickr, warm-minimal ───────────────────────── */
.flatpickr-calendar { font-family:"Plus Jakarta Sans", system-ui, sans-serif; box-shadow:none; background:transparent; border:0; }
.flatpickr-calendar.inline { top:0; }
.flatpickr-calendar:not(.inline) {
  background:var(--cream); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 40px -16px rgba(28,27,26,.3);
}
.flatpickr-calendar.arrowTop::before { border-bottom-color:var(--line); }
.flatpickr-calendar.arrowTop::after { border-bottom-color:var(--cream); }
.flatpickr-calendar.arrowBottom::before { border-top-color:var(--line); }
.flatpickr-calendar.arrowBottom::after { border-top-color:var(--cream); }
.flatpickr-months .flatpickr-month { color:var(--ink); fill:var(--ink); }
.flatpickr-current-month { font-size:14px; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { font-weight:600; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover { background:var(--sand); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color:var(--muted); fill:var(--muted); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill:var(--honey); }
span.flatpickr-weekday { color:var(--faint); font-weight:500; font-size:11.5px; background:transparent; }
.flatpickr-weekdays { background:transparent; }
.flatpickr-day { color:var(--ink); border-radius:9px; font-family:"JetBrains Mono", monospace; font-size:12.5px; }
.flatpickr-day:hover, .flatpickr-day:focus { background:var(--sand); border-color:var(--sand); }
.flatpickr-day.today { border-color:var(--honey); }
.flatpickr-day.today:hover { background:var(--honey-soft); color:var(--ink); border-color:var(--honey); }
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange {
  background:var(--honey-soft); border-color:var(--honey-soft);
  box-shadow:-5px 0 0 var(--honey-soft), 5px 0 0 var(--honey-soft);
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus {
  background:var(--ink); border-color:var(--ink); color:var(--cream);
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow:-10px 0 0 var(--ink); }
.flatpickr-day.week.selected { box-shadow:-5px 0 0 var(--ink), 5px 0 0 var(--ink); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color:var(--faint); opacity:.6; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color:var(--line); }
.flatpickr-innerContainer { border-bottom:0; }
.flatpickr-rContainer, .flatpickr-days { border:0; }

[data-theme="dark"] .report-title, [data-theme="dark"] .m-title, [data-theme="dark"] .brand-name { font-weight:560; letter-spacing:-.01em; }
[data-theme="dark"] .flatpickr-current-month input.cur-year, [data-theme="dark"] .flatpickr-monthDropdown-months { color:var(--ink); }
[data-theme="dark"] .flatpickr-monthDropdown-months option { background:var(--cream); }
[data-theme="dark"] #bg { opacity:1; }
[data-theme="dark"] .lucide, [data-theme="dark"] .chip i { color:var(--muted); }

/* ───────────────────────── Small screens ───────────────────────── */
@media (max-width: 1180px) {
  .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tile.hero { grid-column:1 / -1; }
}
@media (max-width: 860px) {
  .gw { grid-template-columns:1fr; overflow:auto; }
  .dash { overflow:visible; }
  .dgrid { grid-template-columns:1fr; }
  .tile.hero .t-value { font-size:40px; }
  .vch { grid-template-columns:1fr; }
  .vch-meta { grid-template-columns:1fr 1fr; }
  .brand-sub { display:none; }
}
@media (max-width: 620px) {
  .topbar, .main { padding-left:16px; padding-right:16px; }
  .crumbs, .keybar { padding-left:12px; padding-right:12px; }
  .chip { padding:0 10px; }
  .chip kbd, .chip .chip-val, #mode-label { display:none; }
  .top-actions { flex-shrink:0; }
  .report-title { font-size:22px; }
  .head-note { display:none; }
  .two { grid-template-columns:1fr; }
  .m-actions .left { display:none; }
}
.btn { white-space:nowrap; }

/* ───────────────────────── Tally Plus: features, extras, new screens ───────────────────────── */
.ft-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; margin-top:16px; }
.ft-h { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600; margin:0 0 10px; }
.ft-list { display:flex; flex-direction:column; gap:6px; }
.ft-sec { font-size:11.5px; color:var(--faint); margin:10px 2px 2px; }
.ft-row { display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.ft-row:has(input:checked) { border-color:var(--honey); background:var(--honey-soft); }
.ft-row b { display:block; font-size:13.5px; font-weight:600; }
.ft-row em { display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.45; }
.switch { position:relative; width:34px; height:20px; margin-top:1px; }
.switch input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.switch i { position:absolute; inset:0; border-radius:999px; background:var(--badge-no); transition:background .18s; }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .18s; }
.switch input:checked + i { background:var(--honey); }
.switch input:checked + i::after { transform:translateX(14px); }
.switch input:focus-visible + i { outline:2px solid var(--honey); outline-offset:2px; }
.ft-fields { margin-top:0; }
.vc-extra { display:none; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.vc-extra.on { display:grid; }
.cursor-bar.cell { border-radius:7px; box-shadow:inset 0 0 0 1.5px var(--honey); }
.vc-extra .span2 { grid-column:span 2; }
.vc-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.vc-tools .btn { height:34px; font-size:12.5px; }
.more-box { border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.more-box summary { cursor:pointer; font-size:13px; color:var(--soft-ink); }
.more-box .fields { margin-top:12px; }
.linkish { border:0; background:none; padding:0; color:var(--honey-deep); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; }
.safe-tile .t-value { color:var(--leaf); }
.safe-tile.over .t-value { color:var(--rust); }
.safe-tile .t-sub + .t-sub { margin-top:0; }
.menu-desc { color:var(--faint); font-size:12.5px; margin-left:10px; overflow:hidden; text-overflow:ellipsis; }
.r.lvl-warn .nm { color:var(--rust); }
.k-section.sec-warn > div { color:var(--rust); }
.k-section.sec-ok > div { color:var(--leaf); }
.diffline { font-family:"JetBrains Mono", monospace; font-size:12px; color:var(--muted); }
.was { color:var(--rust); text-decoration:line-through; text-decoration-color:rgba(156,74,47,.5); }
.now { color:var(--leaf); }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; flex-shrink:0; }
.btn-row .btn { height:34px; font-size:12.5px; padding:0 12px 0 8px; }
.btn-row .btn.on { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.tile .t-sub.good { color:var(--leaf); } .tile .t-sub.bad { color:var(--rust); }
.pill.opt { background:var(--sand); color:var(--soft-ink); }
.note-line { font-size:12.5px; color:var(--muted); margin:0 0 12px; line-height:1.55; flex-shrink:0; max-width:900px; }
@media (max-width: 860px) { .ft-cols { grid-template-columns:1fr; } }

/* Printed documents: invoice, receipt, voucher, statement of account.
   Ink on white, serif headings, generous margins; rows never split across pages. */
#print-root { display:none; }
@media print {
  @page { size:A4; margin:16mm 16mm 18mm; }
  html, body { height:auto; overflow:visible; background:#fff !important; }
  body > *:not(#print-root) { display:none !important; }
  #print-root { display:block !important; }
}
.doc { font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; color:#1C1610; font-size:10.5pt; line-height:1.5; background:#fff; }
.doc h1, .doc .doc-firm { font-family:"Fraunces", Georgia, serif; font-weight:600; letter-spacing:-.01em; margin:0; }
.doc .doc-firm { font-size:21pt; line-height:1.1; }
.doc h1 { font-size:24pt; color:#8A5A2B; text-align:right; }
.doc-head { display:flex; justify-content:space-between; gap:24px; padding-bottom:14px; border-bottom:1.5px solid #8A5A2B; }
.doc-from p, .doc-to p { margin:2px 0 0; color:#4A3D2C; font-size:9.5pt; }
.doc-meta { margin:10px 0 0; display:grid; grid-template-columns:auto auto; gap:2px 14px; justify-content:end; font-size:9.5pt; }
.doc-meta dt { color:#4A3D2C; text-align:right; } .doc-meta dd { margin:0; font-family:"IBM Plex Mono", monospace; text-align:right; }
.doc-parties { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:18px 0 16px; }
.doc h6 { font-size:8pt; letter-spacing:.14em; text-transform:uppercase; color:#8A5A2B; margin:0 0 4px; font-weight:600; }
.doc-to b { font-size:11.5pt; }
.doc table { width:100%; border-collapse:collapse; }
.doc thead { display:table-header-group; }
.doc tr { break-inside:avoid; page-break-inside:avoid; }
.doc th { font-size:8pt; letter-spacing:.1em; text-transform:uppercase; color:#4A3D2C; font-weight:600; text-align:left; padding:8px 8px; border-bottom:1px solid #1C1610; }
.doc td { padding:9px 8px; border-bottom:1px solid #DFD5BF; vertical-align:top; }
.doc .r { text-align:right; white-space:nowrap; font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums; }
.doc .sub td { border-bottom:0; padding-top:4px; padding-bottom:4px; color:#4A3D2C; }
.doc .tot td { font-weight:700; border-top:1.5px solid #1C1610; border-bottom:1.5px solid #1C1610; background:#F1E2C0; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.doc .small { color:#4A3D2C; font-size:9pt; }
.doc-words { margin:12px 0 0; font-size:9.5pt; }
.doc-words b { font-weight:600; }
.doc-foot { display:grid; grid-template-columns:1fr auto; gap:24px; margin-top:26px; break-inside:avoid; }
.doc-sign { text-align:right; font-size:9.5pt; }
.doc-sign .line { margin-top:44px; border-top:1px solid #1C1610; padding-top:4px; display:inline-block; min-width:180px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ───────────────────────── Laptop screens: the whole page scrolls ─────────────────────────
   On a short screen the tiles and chart leave the table only a thin strip.
   So below 900px of height the page itself scrolls (like a normal web page):
   the table gets all its rows, its headings stick to the top and the Total
   sticks to the bottom. Tall screens (the ultrawide) keep the app-window layout. */
@media (max-height: 900px) {
  .main { display:block; overflow-y:auto; overscroll-behavior:contain; padding-top:0; padding-bottom:0; }
  #screen { min-height:auto; padding-top:20px; padding-bottom:16px; }   /* padding here, not on .main, so sticky headings and totals sit flush at the edges */   /* padding here, not on .main, so sticky headings sit flush at the top */
  .sheet { overflow:clip; }                         /* clip, not hidden: keeps the rounded corners without breaking the sticky headings */
  .sheet-scroll { overflow:visible; }
  .rows > .r { scroll-margin-top:52px; scroll-margin-bottom:64px; }   /* arrow keys never hide a row under the headings or the Total */
  .st-wrap { min-height:auto; }
  .st-paper { overflow:visible; }
  .gw { min-height:auto; align-items:start; }
  .dash { overflow:visible; }
}
@media (max-height: 900px) and (max-width: 1100px) {
  .sheet-scroll { overflow-x:auto; }                /* narrow window: wide tables scroll sideways instead of being cut off */
}

/* ═══════════════ TOP BAR, SIDEBAR, TOUCH (20 Oct 2026) ═══════════════ */

/* Top bar: the company name keeps its own space and is cut with "…" instead of
   running underneath the buttons. If the buttons don't fit (iPad portrait),
   they slide sideways under a finger instead of spilling off the screen. */
.brand { flex:1 1 150px; min-width:110px; }
.brand > div { overflow:hidden; }
.brand-sub { overflow:hidden; text-overflow:ellipsis; }
.top-actions { min-width:0; flex:0 1 auto; overflow-x:auto; scrollbar-width:none; padding:2px; margin:-2px -2px -2px auto; }
.top-actions::-webkit-scrollbar { display:none; }
.top-actions > .chip { flex-shrink:0; }
@media (max-width: 1400px) { .top-actions .chip kbd { display:none; } .top-actions .chip { padding-right:12px; } }
@media (max-width: 1000px) { #chip-file .chip-val, #mode-label { display:none; } }

/* Sidebar button: only on the Gateway (the only screen with a sidebar) */
.chip-side { display:none; flex-shrink:0; }
body.on-gw .chip-side { display:inline-flex; }
html.side-collapsed .chip-side { background:var(--honey-soft); color:var(--honey-deep); border-color:transparent; }
html.side-collapsed .chip-side .side-dots { opacity:0; }

/* Sidebar hidden: the dashboard takes the full width */
.gw { transition:grid-template-columns .25s ease, gap .25s ease; }
html.side-collapsed .gw { grid-template-columns:0 minmax(0,1fr); gap:0; }
html.side-collapsed .gw-menu { visibility:hidden; overflow:hidden; }
@media (max-width: 860px) { html.side-collapsed .gw-menu { display:none; } }

/* ── Touch screens (iPad, phone): bigger targets, nothing hidden behind "hover" ── */
@media (any-pointer: coarse) {
  button, .r, .chip, .key, .crumb, .preset, a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .r { --row:46px; height:46px; }
  .gw .r { --row:50px; height:50px; }
  .st-rows .r { height:auto; min-height:42px; }
  .chip { height:42px; }
  .chip-icon { width:42px; }
  /* the pencil "alter" button shows on every row, big enough for a finger */
  .alter-btn { opacity:.6; width:36px; height:36px; }
  .r.is-active .alter-btn { opacity:1; }
  /* 16px text boxes: below that, Safari zooms the whole page when you tap one */
  .input, input, select, textarea, .cg-f input { font-size:16px !important; }
  .input { height:44px; }
  .input.im-led { height:38px; }
  .btn, .m-actions button { min-height:44px; }
  .crumb { padding:10px 12px; }
  /* bottom bar: finger-sized buttons; key names hidden, labels stay */
  .keybar { padding-top:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom)); gap:6px;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .keybar.at-end { -webkit-mask-image:none; mask-image:none; }
  .key { height:42px; padding:0 14px; font-size:14px; border-radius:10px; background:var(--chip); border:1px solid var(--line); color:var(--soft-ink); }
  .key kbd { display:none; }
  .key[data-act="up"], .key[data-act="open"] { display:none; }       /* a tap opens; a finger scrolls */
  .key[data-act="back"] { font-weight:600; color:var(--ink); }
  .key[data-act="back"]::before { content:"‹"; font-size:20px; line-height:1; margin-right:2px; }
  .keybar .spacer { flex:0 0 4px; }
  /* column edges: a wider strip to grab with a finger, always visible */
  .col-grip { width:22px; }
  .col-grip::after { opacity:1; }
  .kbd-hint, .report-sub kbd { display:none; }
}

/* ── Touch scrolling: ONE scroll area per screen, in both directions ──
   On short screens (iPad landscape) the Mac layout lets the whole page scroll
   and clips wide tables. Under a finger that means drawers inside drawers:
   the inner one grabs the swipe, hits its end, and the page feels stuck, and
   wide tables can't slide sideways. So touch screens always use the "app
   window" layout: the table itself scrolls up/down AND left/right, with its
   headings and total staying put. */
@media (any-pointer: coarse) {
  .main { display:flex; overflow:hidden; overscroll-behavior:auto; padding-top:16px; padding-bottom:12px; }
  #screen { min-height:0; padding-top:0; padding-bottom:0; }
  .sheet { overflow:hidden; }
  .sheet-scroll { overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .st-wrap { min-height:0; }
  .st-paper { overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .gw { min-height:0; align-items:stretch; }
  .dash { overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .gw-menu .sheet-scroll { overscroll-behavior:contain; }
}
/* phone / iPad portrait: menu and dashboard stack, so the Gateway is one long page */
@media (any-pointer: coarse) and (max-width: 860px) {
  .gw { overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .gw-menu .sheet, .gw-menu .sheet-scroll, .dash { overflow:visible; }
}
/* held-down row: a quick pulse to show it is selected */
@keyframes held { 0% { box-shadow:inset 0 0 0 0 var(--honey); } 50% { box-shadow:inset 0 0 0 2px var(--honey); } 100% { box-shadow:inset 0 0 0 0 var(--honey); } }
.r.held { animation:held .5s ease; }


/* ═══════════════ 23 Oct 2026: zero balances, Outstanding layout, CFO view ═══════════════ */

/* Ctrl+U button on group screens */
.zero-btn { height:30px; padding:0 12px; font-size:12.5px; gap:7px; }
.zero-btn.on { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.zero-btn.on kbd { background:transparent; color:inherit; border-color:rgba(255,255,255,.3); box-shadow:none; }

/* Outstanding: a slim top (four tiles in one row, a thin age bar), so the table gets the room */
.os-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.os-kpis .tile { padding:10px 14px 9px; }
.os-kpis .tile.hero { grid-column:auto; }
.os-kpis .t-value, .os-kpis .tile.hero.static .t-value { font-size:22px; margin-top:2px; }
.os-kpis .tile.hero.static .t-value { font-size:26px; }
.os-age { padding-top:12px; padding-bottom:12px; }
.os-age .c-sub { display:none; }
@media (max-width: 1180px) { .os-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width: 760px)  { .os-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* "flow" screens (Outstanding, P&L month by month, Where the profit went): on every screen
   size the whole screen scrolls as one page: tiles first, then every row of the table,
   headings stuck to the top and the Total to the bottom. One scroll area, so it also
   follows the iPad rule. (24 Oct 2026: was only below 1100px of height, which left the
   ultrawide with a table the mouse wheel could not scroll.) */
body.flow .main { display:block; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-top:0; padding-bottom:0; }
body.flow #screen { min-height:auto; padding-top:20px; padding-bottom:16px; }
body.flow .sheet { overflow:clip; }
body.flow .rows > .r { scroll-margin-top:52px; scroll-margin-bottom:64px; }
/* a table wider than the screen (a full year of months) slides sideways inside the page;
   up/down wheel and swipes pass straight through to the page */
body.flow .sheet-scroll { overflow-x:auto; overflow-y:hidden; overscroll-behavior:auto; }
body.flow .sheet-scroll.fits { overflow:visible; }

/* CFO view of P&L month by month */
.pos { color:var(--leaf); }
.cfo-top { margin-bottom:12px; }
.cfo-top .seg button[disabled] { opacity:.45; cursor:default; }
.cfo-kpis { margin-bottom:12px; flex-shrink:0; }
.cfo-kpis .tile { padding:11px 14px 10px; }
.cfo-kpis .t-value, .cfo-kpis .tile.hero .t-value { font-size:22px; }
.cfo-kpis .tile.hero { grid-column:auto; }
.cfo-kpis .tile.hero .t-value { font-size:26px; }
.cfo-kpis .t-sub { white-space:normal; line-height:1.35; }
.cfo-kpis .tile.up .t-sub { color:var(--leaf); }
.cfo-kpis .tile.down .t-sub { color:var(--rust); }
@media (max-width: 1180px) { .cfo-kpis.kpis.six { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px)  { .cfo-kpis.kpis.six { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cfo-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:12px; margin-bottom:12px; flex-shrink:0; }
@media (max-width: 1000px) { .cfo-grid { grid-template-columns:minmax(0,1fr); } }
.cfo-chart { min-height:240px; }
.legend i.cfo-line-key { height:2px; width:14px; border-radius:1px; }
.mv-list { list-style:none; margin:0 0 8px; padding:0; }
.mv-list button { width:100%; display:grid; grid-template-columns:16px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:8px; align-items:center;
  border:0; background:none; text-align:left; padding:6px 6px; border-radius:8px; cursor:pointer; color:var(--ink); font:inherit; }
.mv-list button:hover { background:var(--sand); }
.mv-ic { font-size:10px; grid-row:1 / 3; }
.mv-ic.up { color:var(--leaf); } .mv-ic.down { color:var(--rust); }
.mv-nm { font-size:13px; font-weight:560; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mv-why { grid-column:2; font-size:11.5px; color:var(--muted); }
.mv-list b { grid-row:1 / 3; grid-column:3; font-family:"JetBrains Mono", monospace; font-size:13px; font-weight:600; }
.mv-none { font-size:12.5px; color:var(--muted); padding:6px; }
.mv-best { margin:6px 6px 0; }
.mv-best b { color:var(--ink); font-weight:600; }
.r.cfo-ratio .nm { color:var(--soft-ink); font-style:normal; }
.tx-target .tx-lbl { font-size:12.5px; color:var(--muted); }
/* touch: sideways finger drags on the charts move the tooltip; up/down still scrolls (24 Oct 2026) */
@media (any-pointer: coarse) { #dash svg.viz, #cfo-chart svg.viz, #pw-chart svg.viz { touch-action:pan-y; } }

/* Where the profit went (24 Oct 2026). Colours checked for colour-blind readers:
   profit blue, went home rust (as on the dashboard), giving green. */
:root { --s-give:#3B9A6B; --s-other:#A39C90; }
:root[data-theme="dark"] { --s-give:#4FA77A; --s-other:#6E685F; }
.f-profit { fill:var(--s-exp); background:var(--s-exp); }
.f-give { fill:var(--s-give); background:var(--s-give); }
.f-other { fill:var(--s-other); background:var(--s-other); }
svg.viz .budget-l { stroke:var(--ink); stroke-width:1.5; stroke-dasharray:5 4; opacity:.7; }
svg.viz .budget-t { fill:var(--soft-ink); }
.legend i.budget-key { height:0; width:16px; border-top:2px dashed var(--ink); border-radius:0; opacity:.7; }
.pw-months { margin-bottom:12px; flex-shrink:0; }
.pw-kpis .tile.give .t-sub { color:var(--s-give); }
.tile-cta { cursor:pointer; border-style:dashed; font:inherit; }
.tile-cta .t-value { color:var(--honey-deep); }
.bud-cell { display:inline-flex; align-items:center; gap:8px; width:100%; }
.bud-bar { flex:1; height:6px; border-radius:3px; background:var(--sand); overflow:hidden; min-width:40px; }
.bud-bar i { display:block; height:100%; background:var(--s-give); border-radius:3px; }
.bud-bar.over i { background:var(--s-draw); }
svg.viz .join-l { stroke:var(--faint); stroke-width:1; stroke-dasharray:2 3; }
/* budget kinds (24 Oct 2026) */
.bud-tag { font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:var(--sand); color:var(--muted); margin-right:8px; vertical-align:1px; }
.bu-kind { margin-top:2px; }
.bu-living { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--soft-ink); }
.bu-living[hidden], .bu-dates[hidden] { display:none; }
.pw-projects { margin-bottom:12px; flex-shrink:0; }
.proj-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.proj { display:flex; flex-direction:column; gap:6px; text-align:left; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.proj:hover { border-color:var(--honey); }
.proj-top { display:flex; align-items:center; gap:8px; } .proj-top b { font-weight:600; font-size:14px; margin-right:auto; }
.proj-sub { font-size:12px; color:var(--muted); }
.bud-bar.big { height:8px; flex:none; width:100%; }
.proj-nums { display:flex; justify-content:space-between; font-size:12.5px; font-family:"JetBrains Mono", monospace; color:var(--soft-ink); }
/* Compare periods, CFO way (24 Oct 2026) */
.chg-cell { display:inline-flex; align-items:center; gap:8px; width:100%; }
.chg-bar { width:56px; height:6px; border-radius:3px; background:var(--sand); overflow:hidden; flex:none; }
.chg-bar i { display:block; height:100%; border-radius:3px; background:var(--s-other); }
.chg-bar.pos i { background:var(--s-give); } .chg-bar.neg i { background:var(--s-draw); }
.sub-n { color:var(--muted); font-size:12px; }
.cmp-pick { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.cmp-pick .input { height:32px; width:150px; font-size:12.5px; }
.cfo-top .tx-lbl { font-size:12.5px; color:var(--muted); }
.n.pos, span.pos { color:var(--leaf); }  .tile.up .t-sub { color:var(--leaf); } .tile.down .t-sub { color:var(--rust); }

/* ═══ "Of every ₹100" allocation bar and the centre-line chart (24 Oct 2026) ═══ */
:root { --a-n1:#8F877B; --a-n2:#B1A99C; --a-n3:#CFC7B9; --a-n4:#E2DBCF; }
:root[data-theme="dark"] { --a-n1:#7A7369; --a-n2:#5F5A52; --a-n3:#4A4640; --a-n4:#3A3732; }
.a-draw { background:var(--s-draw); } .a-give { background:var(--s-give); } .a-cash { background:var(--s-exp); }
.a-n1 { background:var(--a-n1); } .a-n2 { background:var(--a-n2); } .a-n3 { background:var(--a-n3); } .a-n4 { background:var(--a-n4); }
.alloc { display:flex; flex-direction:column; gap:10px; }
.alloc-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.alloc-k { font-size:13px; color:var(--muted); } .alloc-k b { color:var(--ink); font-weight:650; }
.alloc-total { font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--soft-ink); }
.alloc-strip { display:flex; gap:2px; height:44px; border-radius:12px; overflow:hidden; background:var(--sand); }
.alloc-strip .aseg { position:relative; display:flex; align-items:center; justify-content:center; min-width:3px; transition:opacity .25s, filter .25s; cursor:pointer; overflow:hidden; }
.alloc-strip .aseg b { font-family:"JetBrains Mono", monospace; font-size:12.5px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); white-space:nowrap; }
.alloc-strip .aseg.a-n2 b, .alloc-strip .aseg.a-n3 b, .alloc-strip .aseg.a-n4 b { color:var(--ink); text-shadow:none; }
.alloc-scale { display:flex; justify-content:space-between; font-family:"JetBrains Mono", monospace; font-size:10.5px; color:var(--faint); margin-top:-4px; }
.alloc-src { font-size:12px; color:var(--muted); margin:0; } .alloc-src b { color:var(--ink); font-weight:600; font-family:"JetBrains Mono", monospace; }
.alloc-rows { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; }
.alloc-rows li { display:grid; grid-template-columns:minmax(130px, 1.1fr) minmax(80px, 2fr) 74px 46px; align-items:center; gap:12px; padding:7px 8px; border-radius:9px; cursor:pointer; transition:opacity .25s, background .2s; outline:none; }
.alloc-rows li:hover, .alloc-rows li:focus-visible { background:var(--sand); }
.ar-l { display:flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-dot { width:9px; height:9px; border-radius:3px; flex:none; }
.ar-bar { height:8px; border-radius:4px; background:var(--sand); overflow:hidden; } .ar-bar i { display:block; height:100%; border-radius:4px; }
.ar-v { font-family:"JetBrains Mono", monospace; font-size:12.5px; text-align:right; }
.ar-p { font-family:"JetBrains Mono", monospace; font-size:12.5px; color:var(--muted); text-align:right; } .ar-p b { color:var(--ink); font-weight:600; }
.alloc.hl .aseg:not(.on), .alloc.hl .alloc-rows li:not(.on) { opacity:.28; }
.alloc.hl .aseg.on { filter:saturate(1.15); }
@media (max-width: 640px) { .alloc-rows li { grid-template-columns:minmax(110px, 1fr) 1fr 64px 40px; gap:8px; } }

.dv-card { margin-bottom:12px; flex-shrink:0; }
.dv-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:4px 4px 14px; border-bottom:1px solid var(--row-line); }
.dv-p { display:flex; flex-direction:column; gap:2px; } .dv-p.now { text-align:right; align-items:flex-end; }
.dv-p span { font-size:12px; color:var(--muted); } .dv-p b { color:var(--ink); font-size:28px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .dv-p em { font-style:normal; font-size:11.5px; color:var(--faint); }
.dv-mid { display:flex; flex-direction:column; align-items:center; gap:4px; }
.dv-arrow { width:120px; height:16px; } .dv-arrow path { fill:none; stroke:var(--faint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dv-ch { font-family:"JetBrains Mono", monospace; font-size:13px; font-weight:600; } .dv-ch.pos { color:var(--leaf); } .dv-ch.neg { color:var(--rust); }
.dv-axis { display:grid; grid-template-columns:minmax(150px, 1fr) minmax(200px, 2.4fr) 80px; font-size:11px; color:var(--faint); padding:10px 8px 4px; }
.dv-axis span:first-child { grid-column:2; justify-self:start; } .dv-axis span:last-child { grid-column:2; grid-row:1; justify-self:end; }
.dv-rows { list-style:none; margin:0; padding:0; }
.dv-rows li { display:grid; grid-template-columns:minmax(150px, 1fr) minmax(200px, 2.4fr) 80px; align-items:center; gap:12px; padding:6px 8px; border-radius:9px; outline:none; }
.dv-rows li[data-cmp-led] { cursor:pointer; } .dv-rows li[data-cmp-led]:hover, .dv-rows li:focus-visible { background:var(--sand); }
.dv-l { display:flex; flex-direction:column; min-width:0; } .dv-l b { font-size:13px; font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dv-l em { font-style:normal; font-size:11.5px; color:var(--muted); }
.dv-track { display:grid; grid-template-columns:1fr 2px 1fr; align-items:center; height:22px; }
.dv-half { height:14px; display:flex; } .dv-hl { justify-content:flex-end; }
.dv-half i { display:block; height:100%; } .dv-hl i { border-radius:4px 0 0 4px; } .dv-hr i { border-radius:0 4px 4px 0; }
.dv-half i.pos { background:var(--s-give); } .dv-half i.neg { background:var(--s-draw); }
.dv-zero { width:2px; height:22px; background:var(--line); }
.dv-v { font-family:"JetBrains Mono", monospace; font-size:12.5px; font-weight:600; text-align:right; } .dv-v.pos { color:var(--leaf); } .dv-v.neg { color:var(--rust); }
@media (max-width: 640px) { .dv-head { grid-template-columns:1fr; } .dv-p.now { text-align:left; align-items:flex-start; } .dv-rows li, .dv-axis { grid-template-columns:minmax(110px, 1fr) 1.4fr 64px; } }