/* Our CFO — Geist design language (Vercel DESIGN.md tokens)
   Money semantics: two hues only — mint (--in) for money in, amber (--out)
   for money out. Bright amber is reserved for actionable warnings/errors;
   routine outflow uses the muted amber tokens. */
:root {
  --ink: #171717; --on-primary: #fff; --body: #4d4d4d; --mute: #757575; --faint: #a1a1a1;
  --hairline: #ebebeb; --hairline-soft: #f2f2f2; --canvas: #fafafa; --elevated: #ffffff;
  /* Two hues only: mint (emerald, matches the logo) + amber. */
  --link: #047857; --link-deep: #065f46; --error: #b45309; --warning: #f5a623;
  --in: #047857; --out: #ab570a;            /* deep shades hold 4.5:1 on white */
  --in-bar: #047857; --out-bar: #f5a623;
  --primary-btn: #171717; --primary-btn-hover: #383838;
  --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --pill: 100px;
  --sans: "Geist", Inter, -apple-system, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"] {
  --ink: #ededed; --on-primary: #0a0a0a; --body: #a1a1a1; --mute: #7d7d7d; --faint: #565656;
  --hairline: #262626; --hairline-soft: #1c1c1c; --canvas: #0a0a0a; --elevated: #141414;
  --link: #34d399; --link-deep: #6ee7b7; --error: #f5a623; --warning: #f5a623;
  --in: #34d399; --out: #d6a256;
  --in-bar: #34d399; --out-bar: #b7822f;
  --primary-btn: #ededed; --primary-btn-hover: #ffffff;
}
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 14px/20px var(--sans); color: var(--body); background: var(--canvas);
  display: grid; grid-template-columns: 232px 1fr; min-height: 100dvh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  border-right: 1px solid var(--hairline); padding: 20px 12px; position: sticky;
  top: 0; height: 100dvh; overflow-y: auto; background: var(--canvas);
}
.wordmark {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 15px; letter-spacing: -0.3px; padding: 4px 8px; margin-bottom: 20px;
}
.eyebrow {
  font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--mute); padding: 0 8px; margin: 20px 0 6px;
}
.nav-link {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; min-height: 34px;
  border-radius: var(--r-sm); color: var(--body); text-decoration: none; font-size: 14px;
}
.nav-link svg { width: 15px; height: 15px; color: var(--mute); flex: none; }
.nav-link:hover { background: var(--hairline-soft); color: var(--ink); }
.nav-link.active { background: var(--elevated); color: var(--ink); font-weight: 500;
  border: 1px solid var(--hairline); box-shadow: 0 1px 1px rgba(0,0,0,0.04); }
.nav-link.active svg { color: var(--ink); }
.nav-link.child { padding-left: 22px; }
.nav-link.child svg { width: 13px; height: 13px; }
.pill svg { width: 14px; height: 14px; flex: none; }
.theme-toggle svg { width: 15px; height: 15px; }
.badge {
  margin-left: auto; font: 500 11px/16px var(--mono); color: var(--on-primary);
  background: var(--ink); border-radius: var(--pill); padding: 1px 7px;
}
/* Collapsible sidebar groups — closed groups roll their review count up */
.nav-group > summary { cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 6px; user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::before { content: "▾"; font-size: 9px; color: var(--faint); }
.nav-group:not([open]) > summary::before { content: "▸"; }
.nav-group > summary:hover { color: var(--ink); }
.nav-rollup { margin-left: auto; font: 500 10px/14px var(--mono); color: var(--mute);
  border: 1px solid var(--hairline); border-radius: var(--pill); padding: 0 6px; }
.nav-group[open] .nav-rollup { display: none; }

/* ---------- Main / top bar ---------- */
main { min-width: 0; padding: 0 32px 64px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--hairline); margin-bottom: 28px;
}
.crumb { font-size: 14px; color: var(--mute); }
.crumb b { color: var(--ink); font-weight: 500; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--primary-btn); color: var(--on-primary); border: none; border-radius: var(--pill);
  font: 500 14px/20px var(--sans); padding: 8px 16px; min-height: 36px;
  transition: background 0.15s ease-out;
}
.pill:hover { background: var(--primary-btn-hover); }
.pill:active { transform: scale(0.98); }
a, button, select, input, summary { transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.flash { border: 1px solid var(--hairline); background: var(--elevated); border-radius: var(--r-sm);
  padding: 10px 14px; margin-bottom: 16px; font-size: 14px; color: var(--ink); }
.flash.error { border-color: var(--error); color: var(--error); }

/* ---------- Connection health ---------- */
.statusbar { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 18px; }
.spill {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 11px 14px; font-size: 13px; color: var(--body);
}
.spill b { color: var(--ink); font-weight: 600; }
.spill svg { flex: none; margin-top: 1px; }
/* Amber, not red: the books are fine, a feed just needs renewing. Red stays
   reserved for a negative net and for ledger errors. */
.spill.warn { border-color: var(--warning); color: var(--out); }
.spill.warn svg { color: var(--warning); }
/* The healthy-day brief: verification in mint, the AI's digest in neutral —
   informational lines never borrow the alarm hue. */
.spill.ok { border-color: var(--in); }
.spill.ok svg { color: var(--in); }
.spill.digest svg { color: var(--mute); }
.spill-more > summary {
  cursor: pointer; list-style: none; font: 500 12px/18px var(--sans);
  color: var(--mute); padding: 2px 4px; user-select: none;
}
.spill-more > summary::-webkit-details-marker { display: none; }
.spill-more > summary:hover { color: var(--ink); }
.spill-more[open] > summary { margin-bottom: 8px; }
.spill-more .spill { margin-bottom: 8px; }

/* ---------- Merchant groups (review queue) ---------- */
.grp {
  background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 10px;
}
.grp-head { display: flex; align-items: baseline; gap: 10px; }
.grp-name { font: 600 15px/21px var(--sans); letter-spacing: -0.2px; color: var(--ink);
  overflow-wrap: anywhere; }
.grp-count { flex: none; font: 600 11px/18px var(--mono); color: var(--on-primary);
  background: var(--ink); border-radius: var(--pill); padding: 1px 9px; }
.grp-meta { font-size: 12px; color: var(--mute); margin-top: 5px; font-variant-numeric: tabular-nums; }
.grp-amt { font: 600 20px/26px var(--sans); letter-spacing: -0.5px; margin-top: 8px;
  font-variant-numeric: tabular-nums; }
.grp-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  font: 500 13px/20px var(--sans); color: var(--ink); background: var(--elevated);
  border: 1px solid var(--hairline); border-radius: var(--pill);
  padding: 8px 14px; min-height: 38px; cursor: pointer;
}
.chip-btn:hover { border-color: var(--ink); background: var(--hairline-soft); }
.chip-btn:active { transform: scale(0.97); }
.chip-btn.ghost { color: var(--mute); list-style: none; display: inline-flex; align-items: center; }
.chip-btn.ghost::-webkit-details-marker { display: none; }
.chip-more { display: inline-block; }
.chip-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
  padding: 10px; background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); max-height: 230px; overflow-y: auto;
}
.chip-opt {
  font: 400 12px/18px var(--mono); color: var(--body); background: var(--elevated);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 7px 10px; min-height: 34px; cursor: pointer; text-align: left;
}
.chip-opt:hover { border-color: var(--ink); color: var(--ink); }
.grp-note { font-size: 11px; color: var(--mute); margin-top: 10px; }
.qsearch-row { margin-top: 10px; }
.qsearch-row input[type="search"] { flex: 1; min-width: 0; }
.grp-items { margin-top: 10px; }
.grp-items > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 6px; font: 500 12px/18px var(--sans); color: var(--mute); user-select: none; }
.grp-items > summary::-webkit-details-marker { display: none; }
.grp-items > summary:hover { color: var(--ink); }
.grp-items .chev { transition: transform .15s ease; flex: none; }
.grp-items[open] > summary .chev { transform: rotate(90deg); }
.grp-items table { font-size: 12.5px; }
.grp-items td { padding: 5px 8px; }

.viewswitch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-sm);
  background: var(--hairline-soft); border: 1px solid var(--hairline); align-self: flex-start; }
.vs { font: 500 12px/18px var(--sans); color: var(--body); text-decoration: none;
  padding: 7px 13px; border-radius: 4px; min-height: 34px; display: inline-flex; align-items: center; }
.vs.active { background: var(--elevated); color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,0.05); }

.flash.with-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-undo { font: 500 13px/20px var(--sans); color: var(--ink); background: var(--elevated);
  border: 1px solid var(--ink); border-radius: var(--r-sm); padding: 6px 14px;
  min-height: 34px; cursor: pointer; flex: none; }
.btn-undo:hover { background: var(--ink); color: var(--on-primary); }

/* ---------- Hero (overview) ---------- */
.hero { position: relative; padding: 36px 0 28px; overflow: hidden; }
.hero .mesh {
  position: absolute; inset: -40px -20px auto auto; width: 420px; height: 220px;
  background:
    radial-gradient(220px 130px at 78% 30%, rgba(52,211,153,0.14), transparent 70%),
    radial-gradient(200px 120px at 55% 65%, rgba(4,120,87,0.10), transparent 70%),
    radial-gradient(180px 110px at 92% 70%, rgba(245,166,35,0.07), transparent 70%),
    radial-gradient(160px 100px at 68% 12%, rgba(120,120,120,0.06), transparent 70%);
  filter: blur(2px); pointer-events: none;
}
.hero .eyebrow { padding: 0; margin: 0 0 10px; }
.hero h1 { font: 600 40px/44px var(--sans); letter-spacing: -1.8px; color: var(--ink); }
.hero .sub { margin-top: 8px; color: var(--mute); font-size: 14px; }
.hero-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.delta { font: 500 13px/18px var(--sans); font-variant-numeric: tabular-nums; }
.delta.up { color: var(--in); }
.delta.down { color: var(--out); }
.hero .spark { align-self: center; color: var(--mute); flex: none; }
.hero .spark .spark-dot { fill: var(--in); }
.stat .d { font: 500 11.5px/16px var(--sans); margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--mute); }
.stat .d.up { color: var(--in); }
.stat .d.down { color: var(--out); }
.pill[aria-busy="true"], .icon-btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.pill[aria-busy="true"] svg, .icon-btn[aria-busy="true"] svg { animation: cfo-spin 1s linear infinite; }
@keyframes cfo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pill[aria-busy="true"] svg, .icon-btn[aria-busy="true"] svg { animation: none; }
}

/* ---------- Stats & cards ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 20px 0 32px; }
.stat { background: var(--elevated); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px 18px; }
.stat .k { font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: 0.4px; color: var(--mute); }
.stat .v { font: 600 24px/30px var(--sans); letter-spacing: -0.7px; color: var(--ink);
  margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .v.neg { color: var(--out); }
.stat .v.in, .in { color: var(--in); }
.stat .v.out, .out { color: var(--out); }

h2.section { font: 600 20px/28px var(--sans); letter-spacing: -0.4px; color: var(--ink); margin: 32px 0 14px; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.group-net { font: 500 13px/20px var(--sans); color: var(--mute); font-variant-numeric: tabular-nums; }
.group-net.neg { color: var(--out); }
.sub-badge { float: right; font: 500 10px/16px var(--mono); text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--mute); border: 1px solid var(--hairline); border-radius: var(--pill); padding: 1px 8px; }

.entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.entity-card {
  position: relative; display: block; background: var(--elevated);
  border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px;
}
.entity-card:hover { border-color: var(--faint);
  box-shadow: 0 2px 2px rgba(0,0,0,0.04), 0 8px 16px -4px rgba(0,0,0,0.06); }
/* Stretched primary link: the whole card navigates; the review chip is a real
   sibling link layered above it, reachable by keyboard. */
.entity-card .card-link { color: inherit; text-decoration: none; }
.entity-card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.entity-card .rev-chip { position: relative; z-index: 1; }
.entity-card .chart .spark-max { font: 400 9px var(--mono); fill: var(--mute); }
.entity-card .name { font: 600 16px/22px var(--sans); letter-spacing: -0.3px; color: var(--ink); }
.entity-card .net { font: 600 26px/32px var(--sans); letter-spacing: -0.8px; color: var(--ink);
  margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.entity-card .net.neg { color: var(--out); }
.entity-card .meta { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.entity-card .chart { margin-top: 14px; }
.entity-card .chart .bar-pos { fill: var(--in-bar); }
.entity-card .chart .bar-neg { fill: var(--out-bar); }
.entity-card .chart .hit { fill: transparent; }
.entity-card .chart .zero { stroke: var(--hairline); stroke-width: 1; }
.entity-card .chart .col:hover .bar { opacity: 0.7; }
.entity-card .chart .col:hover text { fill: var(--ink); }
.entity-card .chart text { font: 400 9px var(--mono); fill: var(--mute); }

.chart-tip {
  position: fixed; z-index: 100; pointer-events: none; opacity: 0;
  background: var(--elevated); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 5px 10px;
  font: 500 12px/16px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 2px 2px rgba(0,0,0,0.06), 0 8px 16px -4px rgba(0,0,0,0.12);
  transition: opacity 0.12s ease-out;
}
.chart-tip.show { opacity: 1; }
.entity-card .rev-badge { float: right; font: 500 11px/16px var(--mono); color: var(--warning); }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; background: var(--elevated); border: 1px solid var(--hairline); border-radius: var(--r-md); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 9px 14px; border-bottom: 1px solid var(--hairline); white-space: nowrap; font-size: 13px; }
th:first-child, td:first-child { text-align: left; }
th { font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--mute); background: var(--canvas); }
tr:last-child td { border-bottom: none; }
/* Hover highlight is a promise of interactivity — the accounts table only
   makes it on rows that actually navigate (.a-rowlink). */
table:not(.acct-table) tbody tr:hover td, table:not(.acct-table) tr:hover td { background: var(--hairline-soft); }
table tr:hover th { background: var(--canvas); }
td { color: var(--body); }
td.acct, td b { color: var(--ink); }
td.neg { color: var(--out); }
tr.total td { font-weight: 600; color: var(--ink); background: var(--canvas); }

/* ---------- Drill-down ---------- */
details.cat { background: var(--elevated); border: 1px solid var(--hairline); border-radius: var(--r-md); margin-bottom: 8px; }
details.cat summary {
  display: flex; align-items: center; gap: 10px; justify-content: space-between; cursor: pointer;
  padding: 11px 16px; list-style: none; font-weight: 500; font-size: 14px; color: var(--ink); min-height: 44px;
}
details.cat summary::-webkit-details-marker { display: none; }
details.cat summary:hover { background: var(--hairline-soft); border-radius: var(--r-md); }
details.cat summary .chev { color: var(--mute); transition: transform 0.15s ease-out; }
details[open].cat summary .chev { transform: rotate(90deg); }
details.cat summary .amt { margin-left: auto; font-variant-numeric: tabular-nums; }
details.cat .inner { border-top: 1px solid var(--hairline); }
details.cat .inner td { font-size: 13px; }

/* ---------- Review queue ---------- */
.review-row { background: var(--elevated); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 10px; display: grid;
  grid-template-columns: minmax(220px, 1.4fr) auto; gap: 12px; align-items: center; }
.review-row .desc { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.review-row .meta { font-size: 12px; color: var(--mute); margin-top: 3px; font-variant-numeric: tabular-nums; }
.review-row .meta .chip { font: 500 11px/16px var(--mono); border: 1px solid var(--hairline);
  border-radius: var(--pill); padding: 1px 8px; margin-right: 6px; color: var(--body); }
.review-row:hover { border-color: var(--faint); }
.review-row .amount { font: 600 16px/22px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.review-row .amount.in { color: var(--in); }
.review-row .amount.out { color: var(--out); }
.review-row form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; grid-column: 1 / -1; }
select, input[type=text] {
  font: 400 13px/20px var(--sans); color: var(--ink); background: var(--elevated);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 7px 10px; min-height: 36px;
}
select:focus, input[type=text]:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.btn-ghost {
  font: 500 13px/20px var(--sans); color: var(--ink); background: var(--elevated); cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 7px 12px; min-height: 36px;
}
.btn-ghost:hover { border-color: var(--faint); }
.empty { border: 1px dashed var(--hairline); border-radius: var(--r-md); padding: 40px;
  text-align: center; color: var(--mute); background: var(--elevated); }
.empty b { color: var(--ink); display: block; margin-bottom: 6px; font-size: 15px; }

/* ---------- Ledger browser (embedded Fava) ---------- */
.ledger-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 16px; }
.ledger-tab {
  font: 500 13px/20px var(--sans); color: var(--body); text-decoration: none;
  background: var(--elevated); border: 1px solid var(--hairline); border-radius: 64px;
  padding: 7px 16px; min-height: 36px; display: inline-flex; align-items: center;
}
.ledger-tab:hover { border-color: var(--faint); color: var(--ink); }
.ledger-tab.active { background: var(--primary-btn); color: var(--on-primary); border-color: var(--primary-btn); }
.ledger-tab.sm { font-size: 12px; padding: 5px 12px; min-height: 30px; }
.chip-count { font: 500 11px/16px var(--mono); color: var(--mute); margin-left: 6px;
  font-variant-numeric: tabular-nums; }
.ledger-tab.active .chip-count { color: var(--on-primary); opacity: 0.7; }

.filter-bar { margin: 20px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-entities { padding-top: 10px; border-top: 1px solid var(--hairline); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.pager .btn-ghost { text-decoration: none; display: inline-flex; align-items: center; }
.pager-info { font: 500 12px/16px var(--mono); color: var(--mute); }
.ledger-frame {
  width: 100%; height: calc(100dvh - 210px); min-height: 480px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--elevated);
  /* Cross-origin iframes derive prefers-color-scheme from the frame element's
     used color-scheme — this makes embedded Fava follow the app's theme toggle. */
  color-scheme: light;
}
[data-theme="dark"] .ledger-frame { color-scheme: dark; }
.ledger-note { margin-top: 10px; font-size: 12px; color: var(--mute); }
.ledger-note a { color: var(--link); text-decoration: none; }
.ledger-note a:hover { text-decoration: underline; }

/* ---------- Login ---------- */
body.login-body { display: block; background: var(--canvas); }
.login-wrap { position: relative; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 24px; overflow: hidden; }
.login-mesh {
  position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 720px; height: 420px; pointer-events: none;
  background:
    radial-gradient(300px 180px at 30% 40%, rgba(52,211,153,0.16), transparent 70%),
    radial-gradient(260px 160px at 60% 60%, rgba(4,120,87,0.12), transparent 70%),
    radial-gradient(240px 150px at 80% 35%, rgba(245,166,35,0.08), transparent 70%),
    radial-gradient(220px 140px at 45% 20%, rgba(120,120,120,0.07), transparent 70%);
  filter: blur(6px);
}
.login-card { position: relative; width: 100%; max-width: 380px; background: var(--elevated);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 32px; }
.login-brand { display: flex; align-items: center; gap: 9px; color: var(--ink);
  font: 600 16px/22px var(--sans); letter-spacing: -0.3px; margin-bottom: 22px; }
.login-card h1 { font: 600 26px/32px var(--sans); letter-spacing: -1px; color: var(--ink); }
.login-sub { color: var(--mute); font-size: 14px; margin-top: 6px; }
.login-card label { display: block; font: 500 11px/16px var(--mono); text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--mute); margin: 16px 0 6px; }
.login-card input[type=text], .login-card input[type=password] { width: 100%; min-height: 40px; }
.login-submit { width: 100%; justify-content: center; margin-top: 22px; }
.login-code { background: var(--hairline-soft); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 12px; margin-top: 12px; font: 400 12px/18px var(--mono);
  color: var(--ink); overflow-x: auto; }
.login-foot { position: relative; color: var(--mute); font: 400 12px/16px var(--sans); }

/* ---------- Account menu ---------- */
.acct { display: flex; align-items: center; gap: 10px; }
.acct-name { font-size: 13px; color: var(--mute); }
.btn-signout { font: 500 13px/20px var(--sans); color: var(--body); background: none;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 7px 12px;
  min-height: 36px; cursor: pointer; }
.btn-signout:hover { border-color: var(--faint); color: var(--ink); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  background: none; border: none; padding: 7px 8px; min-height: 34px; margin-top: 8px;
  border-radius: var(--r-sm); color: var(--body); font: 400 14px/20px var(--sans); text-align: left;
}
.theme-toggle svg { color: var(--mute); flex: none; }
.theme-toggle:hover { background: var(--hairline-soft); color: var(--ink); }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }


/* ==========================================================================
   MOBILE
   Desktop keeps the sidebar. Below 900px the app becomes a native-feeling
   mobile app: fixed top bar, fixed bottom tab bar in the thumb zone, and
   bottom sheets for the two lists too long to live in a tab bar.
   ========================================================================== */

/* Hidden on desktop */
.mobile-bar, .tabbar, .sheet, .sheet-scrim { display: none; }

@media (max-width: 900px) {
  .fyband { padding: 2px 12px 12px; margin: 16px 0 20px; }
  .fy-head { flex-wrap: wrap; }
  .fy-head .viewswitch { width: 100%; }
  body {
    grid-template-columns: 1fr;
    /* Room for the fixed bars, plus the iPhone home indicator */
    padding-top: calc(52px + env(safe-area-inset-top));
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
  .sidebar { display: none; }
  .topbar { display: none; }
  main { padding: 0 16px 32px; }
  body.sheet-open { overflow: hidden; }

  /* ---- Top bar ---- */
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: calc(52px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0 16px;
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hairline);
  }
  .mobile-brand {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    color: var(--ink); text-decoration: none;
    font: 600 15px/20px var(--sans); letter-spacing: -0.3px;
  }
  .mobile-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-brand svg { flex: none; }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; cursor: pointer;
    background: none; border: 1px solid var(--hairline); border-radius: var(--r-sm);
    color: var(--ink);
  }
  .icon-btn:active { background: var(--hairline-soft); transform: scale(0.96); }
  .icon-btn svg { width: 18px; height: 18px; }

  /* ---- Bottom tab bar ---- */
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--canvas) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--hairline);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 56px; padding: 8px 4px; cursor: pointer;
    background: none; border: none; text-decoration: none;
    color: var(--mute); font: 500 10px/13px var(--sans); letter-spacing: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .tab svg { width: 21px; height: 21px; }
  .tab.active { color: var(--ink); }
  .tab:active { opacity: 0.55; }
  .tab-icon { position: relative; display: inline-flex; }
  .tab-badge {
    position: absolute; top: -5px; left: 12px;
    background: var(--ink); color: var(--on-primary); font: 600 9px/14px var(--sans);
    font-style: normal; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--pill); text-align: center;
    border: 1.5px solid var(--canvas);
  }

  /* ---- Bottom sheets ---- */
  .sheet-scrim {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s ease-out;
  }
  /* CRITICAL: an author `display` rule beats the UA stylesheet's [hidden]
     { display:none }. Without these, the closed scrim stays in the layout as an
     invisible full-screen layer above the tab bar and eats every tap. */
  .sheet-scrim[hidden], .sheet[hidden] { display: none; }
  .sheet-scrim:not(.open) { pointer-events: none; }
  .sheet-scrim.open { opacity: 1; }
  .sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    max-height: 82dvh;
    background: var(--elevated);
    border-top: 1px solid var(--hairline);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%); transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sheet.open { transform: translateY(0); }
  .sheet-grab {
    padding: 10px 0 6px; cursor: pointer;
    display: flex; justify-content: center; flex: none;
  }
  .sheet-grab::before {
    content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--hairline);
  }
  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 16px 10px; flex: none;
    font: 600 17px/24px var(--sans); letter-spacing: -0.4px; color: var(--ink);
    border-bottom: 1px solid var(--hairline);
  }
  .sheet-close {
    width: 32px; height: 32px; flex: none; cursor: pointer;
    background: var(--hairline-soft); border: none; border-radius: 50%;
    color: var(--body); font-size: 20px; line-height: 1;
  }
  .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px 20px; }
  .sheet-body form { display: contents; }
  .sheet-group {
    font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--mute); padding: 14px 8px 6px;
  }
  .sheet-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 50px; padding: 12px; cursor: pointer;
    background: none; border: none; border-radius: var(--r-sm);
    color: var(--ink); text-decoration: none;
    font: 400 15px/20px var(--sans); text-align: left;
  }
  .sheet-item svg { width: 18px; height: 18px; color: var(--mute); flex: none; }
  .sheet-item:active { background: var(--hairline-soft); }
  .sheet-item.active { background: var(--hairline-soft); font-weight: 500; }
  .sheet-item.active svg { color: var(--ink); }
  .sheet-item.child { padding-left: 26px; }
  .sheet-item.danger { color: var(--error); }
  .sheet-item.danger svg { color: var(--error); }
  .sheet-label { flex: 1; min-width: 0; }
  .sheet-tag {
    font: 500 9px/14px var(--mono); text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--mute); border: 1px solid var(--hairline); border-radius: var(--pill);
    padding: 0 7px; font-style: normal; flex: none;
  }
  .sheet-item .sun { display: none; }
  [data-theme="dark"] .sheet-item .sun { display: block; }
  [data-theme="dark"] .sheet-item .moon { display: none; }

  /* ---- Typography scales down, numbers stay legible ---- */
  .hero { padding: 20px 0 16px; }
  .hero h1 { font-size: 27px !important; line-height: 32px !important; letter-spacing: -1.1px !important; }
  .hero .mesh { width: 260px; height: 160px; inset: -30px -30px auto auto; }
  h2.section { font-size: 17px; margin: 26px 0 12px; }

  /* Two stat cards per row reads better than one giant column */
  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 24px; }
  /* An odd card count would otherwise leave a half-width orphan */
  .stat-row .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 13px 14px; }
  .stat .v { font-size: 19px; line-height: 25px; letter-spacing: -0.5px; }
  .stat .k { font-size: 10px; }

  .entity-grid { grid-template-columns: 1fr; gap: 12px; }
  .entity-card { padding: 16px; }
  .entity-card .net { font-size: 23px; line-height: 29px; }
  .group-head { align-items: center; }
  .group-net { font-size: 12px; }

  /* ---- Wide financial tables: scroll inside their own container, with the
     account column pinned so a number never loses its label ---- */
  .tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .tablewrap table { min-width: max-content; }
  .tablewrap th:first-child, .tablewrap td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--elevated);
    box-shadow: 1px 0 0 var(--hairline);
    max-width: 148px; overflow: hidden; text-overflow: ellipsis;
  }
  .tablewrap th:first-child { background: var(--canvas); z-index: 3; }
  .tablewrap tr.total td:first-child { background: var(--canvas); }
  th, td { padding: 9px 12px; font-size: 13px; }
  .scroll-hint {
    display: block; font: 400 11px/15px var(--sans); color: var(--mute);
    margin: 6px 2px 0;
  }

  /* ---- Drill-down rows ---- */
  details.cat summary { padding: 13px 14px; min-height: 52px; font-size: 14px; }
  details.cat .inner td { font-size: 12px; padding: 8px 12px; }

  /* ---- Review queue: one column, full-width controls, thumb-sized ---- */
  .filter-bar { margin: 14px 0; gap: 8px; }
  .filter-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-entities { padding-top: 8px; }
  .ledger-tab { flex: none; }

  /* Long bank descriptions wrap; crowding the amount beside them makes both
     hard to scan. Give the amount its own right-aligned line. */
  .statusbar { margin: 2px 0 14px; }
  .spill { font-size: 12.5px; padding: 10px 12px; }
  .grp { padding: 14px; }
  .grp-name { font-size: 14px; line-height: 20px; }
  .grp-amt { font-size: 19px; }
  .chips { gap: 7px; }
  .chip-btn { min-height: 42px; padding: 10px 15px; font-size: 14px; }
  .chip-opt { min-height: 40px; font-size: 12px; }
  .chip-list { max-height: 44dvh; }
  .viewswitch { width: 100%; }
  .vs { flex: 1; justify-content: center; min-height: 38px; }
  .flash.with-undo { flex-wrap: wrap; }
  .btn-undo { min-height: 40px; width: 100%; }

  .review-row { grid-template-columns: 1fr; padding: 14px; gap: 6px; }
  .review-row .desc { font-size: 14px; line-height: 19px; }
  .review-row .amount { font-size: 19px; text-align: right; }
  .review-row form {
    display: grid; grid-template-columns: 1fr; gap: 8px;
    padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--hairline);
  }
  .review-row form .eyebrow { margin: 4px 0 0 !important; }
  /* 16px prevents iOS Safari from zooming the whole page on focus */
  .review-row select, .review-row input[type=text] {
    width: 100%; min-height: 46px; font-size: 16px;
  }
  .review-row .btn-ghost { width: 100%; min-height: 46px; font-size: 15px; }

  .pager { gap: 10px; }
  .pager .btn-ghost { min-height: 44px; padding: 10px 16px; }

  /* ---- Ledger browser ---- */
  .ledger-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none; }
  .ledger-tabs::-webkit-scrollbar { display: none; }
  .ledger-frame { height: calc(100dvh - 260px); min-height: 380px; }

  /* ---- Login ---- */
  .login-card { padding: 24px; }
  .login-card h1 { font-size: 23px; line-height: 29px; }
  .login-card input[type=text], .login-card input[type=password] {
    font-size: 16px; min-height: 46px;
  }
  .login-submit { min-height: 48px; }
}

/* Small phones (iPhone SE / mini) */
@media (max-width: 359px) {
  .stat-row { grid-template-columns: 1fr; }
  .hero h1 { font-size: 24px !important; line-height: 29px !important; }
  .tab span:last-child { font-size: 9px; }
}

/* Landscape phones: the top bar eats too much height, so shrink it */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body { padding-top: calc(44px + env(safe-area-inset-top)); }
  .mobile-bar { height: calc(44px + env(safe-area-inset-top)); }
  .hero { padding: 12px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Reports picker ---------- */
.rpt-form { background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 18px; margin: 20px 0 14px; }
.rpt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 14px; }
.rpt-field { display: flex; flex-direction: column; gap: 6px; }
.rpt-field .eyebrow { padding: 0; margin: 0; }
.rpt-field select { width: 100%; min-height: 40px; }
.rpt-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.rpt-actions .pill, .rpt-actions .btn-ghost { text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; }
.rpt-help { border-top: 1px solid var(--hairline); padding-top: 16px;
  font-size: 13px; color: var(--mute); max-width: 68ch; }
.rpt-help p { margin-bottom: 9px; }
.rpt-help b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .rpt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rpt-field select { min-height: 44px; font-size: 16px; }
  .rpt-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .rpt-actions .pill, .rpt-actions .btn-ghost { width: 100%; min-height: 46px; }
  .rpt-form button { width: 100%; min-height: 44px; }
}

/* ---------- Overview: honest hero + accounts table (Phase 1) ---------- */
.hero-num { font: 650 44px/50px var(--sans); letter-spacing: -2px; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.hero-num.neg { color: var(--out); }
.stat-link { text-decoration: none; display: block; cursor: pointer; }
.stat-link:hover { border-color: var(--faint); }

/* The FY band: a visible bracket around exactly what the year toggle governs.
   The border and header do the work — no fill, cards inside stay elevated. */
.fyband {
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 4px 20px 20px; margin: 22px 0 26px; background: var(--canvas);
}
.fy-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0 2px;
}
.fy-head .eyebrow { margin: 0; padding: 0; }
.fyband .stat-row { margin-top: 14px; }

.acct-block { margin: 4px 0 26px; }
.acct-warn {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 4px;
  font: 500 11px/16px var(--mono); color: var(--warning); text-decoration: none;
  border: 1px solid var(--warning); border-radius: var(--pill); padding: 2px 9px;
}
.acct-warn:hover { background: var(--warning); color: var(--on-primary); }
.acct-fix {
  margin-left: 8px; font: 500 12px/16px var(--sans);
  color: var(--warning); text-decoration: none; white-space: nowrap;
}
.acct-fix:hover { text-decoration: underline; }
/* Stretched row links: the whole row navigates, the table stays a table. */
.acct-table tr.a-rowlink { position: relative; }
.acct-table .row-link { color: inherit; text-decoration: none; }
.acct-table .row-link::after { content: ""; position: absolute; inset: 0; }
.acct-table tr.a-rowlink:hover td { background: var(--hairline-soft); }
.acct-sum { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.acct-sum::-webkit-details-marker { display: none; }
.acct-sum .section { margin: 18px 0 10px; }
.acct-sum::before { content: "▸"; color: var(--mute); font-size: 12px; align-self: center; }
details[open] > .acct-sum::before { content: "▾"; }
.acct-hint { font: 500 11px/16px var(--mono); color: var(--mute); }
.acct-table th.r, .acct-table td.r { text-align: right; }
.acct-table .a-name { color: var(--ink); font-weight: 500; }
.acct-table .a-ent { color: var(--mute); font-size: 12px; text-align: left; }
.acct-table .a-last { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.acct-table tr.a-sub td { font-weight: 600; color: var(--ink); background: var(--canvas);
  border-top: 1px solid var(--hairline); }
.dot-stale { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--warning); margin-right: 7px; vertical-align: 1px; }

.rev-chip { display: inline-block; margin-left: 6px; font: 500 10.5px/16px var(--mono);
  color: var(--out); border: 1px solid var(--warning); border-radius: var(--pill);
  padding: 1px 8px; cursor: pointer; }
.rev-chip:hover { background: var(--warning); color: #171717; }
.chart-note { margin-top: 14px; font: 400 11px/16px var(--mono); color: var(--mute); }

@media (max-width: 900px) {
  .hero-num { font-size: 34px; line-height: 40px; letter-spacing: -1.4px; }
  .acct-block[open] .tablewrap { max-height: 46dvh; overflow-y: auto; }
  .rev-chip { display: block; margin: 8px 0 0; width: fit-content; }
}

/* ---------- Phase 2: portfolio flow chart, book-health spills, momentum ---------- */
.spill.error { border-color: var(--error); color: var(--error); }
.spill.error svg { color: var(--error); }
.spill.error b { color: var(--error); }

.flow-head { display: flex; align-items: baseline; gap: 12px; }
.flow-head .section { margin: 18px 0 10px; }
.flow-wrap { border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--elevated); padding: 18px 16px 10px; margin-bottom: 26px;
  overflow-x: auto; }
.flowchart { display: block; min-width: 420px; }
.flowchart .zero { stroke: var(--hairline); stroke-width: 1; }
.flowchart .fin { fill: var(--in-bar); }
.flowchart .fout { fill: var(--out-bar); }
.flowchart text { font: 400 9px var(--mono); fill: var(--mute); }
.flowchart .gridmax { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 4; }
.flowchart .gridmax-label { font: 400 9px var(--mono); fill: var(--mute); }
.flowchart a { cursor: pointer; outline-offset: -2px; }
.flowchart .hit { fill: transparent; cursor: default; }
.flowchart .col:hover .fbar { opacity: 0.82; }
.flow-legend { display: flex; gap: 18px; margin-top: 8px;
  font: 400 11px/16px var(--mono); color: var(--mute); }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.in-dot { background: var(--in); }
.out-dot { background: var(--out); }

.mom { color: var(--in); }

/* ---------- Fix tools: split, reassign, notes, find ---------- */
.fix-tools { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }
.fix-more { position: relative; }
.fix-more > summary { list-style: none; cursor: pointer; }
.fix-more > summary::-webkit-details-marker { display: none; }
.fix-form { border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--elevated); padding: 12px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.fix-row { display: flex; gap: 8px; }
.fix-row select { flex: 1 1 60%; min-width: 0; }
.fix-row input[type="number"] { flex: 1 1 40%; min-width: 90px; }
.fix-row input[type="text"] { flex: 1; }
.fix-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.split-left { font: 500 11.5px/16px var(--mono); color: var(--out); }
.fix-hint { font: 400 11px/15px var(--mono); color: var(--mute); }

.findbar { display: flex; gap: 8px; margin: 26px 0 10px; }
.findbar input[type="search"] { flex: 1; }
.findbar-top { margin-top: 0; }
.find-row { align-items: start; }
.find-legs { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.find-leg { font: 400 11.5px/17px var(--mono); color: var(--mute); }
.find-leg b { font-weight: 600; }
.find-note { font: 400 11.5px/17px var(--sans); color: var(--body); }
.find-open { color: var(--out); font-weight: 600; }

@media (max-width: 900px) {
  .fix-form { min-width: 0; }
  .fix-row { flex-wrap: wrap; }
  .fix-row select, .fix-row input { flex: 1 1 100%; }
  .findbar { flex-wrap: wrap; }
}

/* ---------- Clickable health warnings ---------- */
a.spill-link { text-decoration: none; cursor: pointer; }
a.spill-link:hover { border-color: var(--ink); }
a.spill-link .spill-go { margin-left: auto; flex: none; font: 500 12px/18px var(--sans);
  color: var(--ink); white-space: nowrap; }

/* ---------- CSV import ---------- */
.import-form { max-width: 460px; display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--elevated); padding: 20px; margin-bottom: 8px; }
.imp-row { display: flex; flex-direction: column; gap: 5px; }
.imp-row input[type="file"] { padding: 9px; border: 1px dashed var(--faint);
  border-radius: var(--r-sm); background: var(--canvas); font-size: 13px; }
.import-form .pill { align-self: flex-start; }
.imp-help { max-width: 560px; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--body); margin-bottom: 10px; }
.imp-help b { color: var(--ink); }

/* ---------- Year toggle in heroes ---------- */
.hero-toprow { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.hero .viewswitch { position: relative; z-index: 2; }

/* ---------- Editable transaction rows on entity pages ---------- */
.txn-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--faint); }
.txn-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.txn-edit { font: 500 11px/16px var(--mono); color: var(--mute); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: var(--pill); padding: 2px 9px; }
.txn-edit:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- Hybrid overview: command band · entity panel · rail ---------- */
.crumb-period { color: var(--mute); font-size: 12.5px; }
.cmdband {
  display: grid; grid-template-columns: 250px 1fr 264px; gap: 24px;
  align-items: stretch; background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 20px 24px; margin: 4px 0 16px; position: relative;
}
.cmd-num { font: 650 46px/52px var(--sans); letter-spacing: -2px; color: var(--ink);
  margin-top: 6px; font-variant-numeric: tabular-nums; }
.cmd-num.neg { color: var(--out); }
.cmd-pos .delta { margin-top: 6px; }
.cmd-sub { margin-top: 4px; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.cmd-chart { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.cmd-axis { display: flex; justify-content: space-between; margin-top: 2px;
  font: 400 10px/14px var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.cmd-empty { color: var(--mute); font-size: 13px; align-self: center; margin: auto; }
.cmd-health { border-left: 1px solid var(--hairline); padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px; }
.hl { display: flex; gap: 9px; font-size: 12.5px; line-height: 17px; color: var(--body);
  text-decoration: none; }
.hl b { color: var(--ink); font-weight: 600; }
.hl-sub { color: var(--mute); font-size: 11.5px; }
.hl-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px;
  border: 1px solid var(--hairline); color: var(--mute); margin-top: 1px; }
.hl.ok .hl-ic { border-color: var(--in); color: var(--in); }
.hl.warn .hl-ic { border-color: var(--warning); color: var(--warning); }
a.hl:hover b { text-decoration: underline; }

.metricstrip { display: flex; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.ms { flex: 1 1 200px; background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.ms b { font: 600 19px/25px var(--sans); color: var(--ink); letter-spacing: -0.5px; }
.ms .d { font-size: 11.5px; }
.ms .chip-due { color: var(--mute); }

.mainsplit { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: 18px; margin-bottom: 18px; }
.epanel { background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 16px 18px; min-width: 0; }
.ep-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ep-head .section { margin: 0; }
.ep-head .eyebrow { margin: 0; padding: 0; }
.ep-head .viewswitch { margin-left: auto; }
.ep-tabs { display: inline-flex; background: var(--hairline-soft); border-radius: var(--pill); padding: 2px; }
.ept { border: 0; background: none; color: var(--mute); font: 500 12px/18px var(--sans);
  padding: 4px 14px; border-radius: var(--pill); cursor: pointer; }
.ept.active { background: var(--elevated); color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,0.25); }

.etable { width: 100%; border-collapse: collapse; }
.etable th { font: 500 10px/14px var(--mono); text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--mute); text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--hairline); }
.etable th.l, .etable td.l { text-align: left; }
.etable td { padding: 9px 10px; text-align: right; font-size: 13px; border-bottom: 1px solid var(--hairline-soft); }
.etable tr:last-child td { border-bottom: 0; }
.etable .e-row { position: relative; }
.etable .e-row:hover td { background: var(--hairline-soft); }
.etable .row-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.etable .row-link::after { content: ""; position: absolute; inset: 0; }
.etable .rev-chip, .etable .e-trend a { position: relative; z-index: 1; }
.etable b { color: var(--ink); font-weight: 600; }
.etable td.out b { color: var(--out); }
.e-grp { display: block; font: 500 9.5px/13px var(--mono); text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--mute); }
.e-dim { color: var(--faint); }
.e-trend svg .zero { stroke: var(--hairline); stroke-width: 1; }
.e-trend svg .bar-pos { fill: var(--in-bar); }
.e-trend svg .bar-neg { fill: var(--out-bar); }
.ep-foot { margin: 10px 2px 0; padding: 0; }
.ep-foot b { color: var(--body); font-weight: 600; margin-left: 2px; }
.ep-foot b.out { color: var(--out); }

.tmap { display: block; margin-top: 4px; }
.tmap .tm-pos { fill: #0e7a5b; }
.tmap .tm-pos.tm-big { fill: #047857; }
.tmap g:nth-child(even) .tm-pos { fill: #119267; }
.tmap .tm-neg { fill: #7a5a22; }
.tmap g:nth-child(even) .tm-neg { fill: #8a6526; }
.tmap .tm-name { font: 600 14px var(--sans); fill: #ffffff; letter-spacing: -0.2px; }
.tmap .tm-net { font: 600 17px var(--sans); fill: #ffffff; letter-spacing: -0.4px; }
.tmap .tm-share { font: 400 10px var(--mono); fill: rgba(255,255,255,0.75); }
.tmap .tm-name.sm { font-size: 11px; }
.tmap .tm-net.sm { font-size: 12px; }
.tmap rect { transition: opacity .12s ease; }
.tmap g:hover rect:first-child { opacity: 0.85; }
.tm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: -1px; }
.tm-dot.pos { background: #0e7a5b; }
.tm-dot.neg { background: #8a6526; }

.rrail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rl-card { background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 14px 16px; }
.brief-list { list-style: none; padding: 0; margin: 8px 0 0; }
.brief-list li { padding: 8px 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: 12.5px; line-height: 18px; }
.brief-list li:last-child { border-bottom: 0; }
.act-cta { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  border: 1px solid var(--warning); border-radius: var(--r-md); padding: 11px 13px;
  color: var(--body); text-decoration: none; font-size: 13px; }
.act-cta b { color: var(--ink); }
.act-cta .act-go { margin-left: auto; color: var(--warning); font-weight: 600; }
.act-cta:hover { background: var(--hairline-soft); }
.act-item { display: flex; gap: 8px; padding: 9px 0 0; font-size: 12.5px; line-height: 17px;
  color: var(--body); text-decoration: none; }
.act-item svg { color: var(--warning); flex: none; margin-top: 1px; }
.act-item.ok { color: var(--mute); }
a.act-item:hover span { text-decoration: underline; }

.compgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.comp { background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 13px 16px; min-width: 0; }
.comp-head { display: flex; justify-content: space-between; align-items: baseline; }
.comp-head .eyebrow { margin: 0; padding: 0; }
.comp-head b { font-size: 14px; }
.compbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 10px 0 7px; }
.cs { min-width: 3px; }
.cs.cash-0 { background: #34d399; } .cs.cash-1 { background: #2cb886; }
.cs.cash-2 { background: #249d73; } .cs.cash-3 { background: #1d8260; }
.cs.cash-4 { background: #16684d; } .cs.cash-5 { background: #114f3b; }
.cs.debt-0 { background: #f5a623; } .cs.debt-1 { background: #d18f28; }
.cs.debt-2 { background: #b7822f; } .cs.debt-3 { background: #99691f; }
.cs.debt-4 { background: #7b5419; } .cs.debt-5 { background: #5d3f13; }
.comp-legend { margin-top: 0; padding: 0; letter-spacing: 0.2px; }
.flowchart.mini text { font-size: 8.5px; }

@media (max-width: 1180px) {
  .cmdband { grid-template-columns: 220px 1fr; }
  .cmd-health { grid-column: 1 / -1; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hairline); padding-top: 14px;
    flex-direction: row; flex-wrap: wrap; gap: 18px; }
  .mainsplit { grid-template-columns: 1fr; }
  .compgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .cmdband { grid-template-columns: 1fr; padding: 16px; }
  .cmd-num { font-size: 38px; line-height: 44px; }
  .compgrid { grid-template-columns: 1fr; }
  .ep-head .viewswitch { width: 100%; order: 9; }
  .etable th:nth-child(3), .etable td:nth-child(3),
  .etable th:nth-child(4), .etable td:nth-child(4) { display: none; }
}

/* ---------- Review command header + workload board ---------- */
.rev-band { grid-template-columns: 190px 1fr 168px; }
.wboard { display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.wrow { display: grid; grid-template-columns: 148px 1fr 64px 40px; gap: 10px;
  align-items: center; text-decoration: none; padding: 3px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--body); }
.wrow:hover { background: var(--hairline-soft); }
.wrow.active { background: var(--hairline-soft); outline: 1px solid var(--hairline); }
.w-name { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.w-bar { height: 8px; background: var(--hairline-soft); border-radius: 4px; overflow: hidden; }
.w-bar i { display: block; height: 100%; background: var(--out-bar); border-radius: 4px; }
.wrow:first-child .w-bar i { background: var(--warning); }
.w-amt { text-align: right; color: var(--out); font-weight: 600; font-size: 12px; }
.w-ct { text-align: right; font: 500 10.5px/14px var(--mono); color: var(--mute); }
.scope-col { display: flex; flex-direction: column; gap: 6px; }
.scope-col .ledger-tab { justify-content: space-between; display: flex; }
.rev-band .cmd-sub .out { font-weight: 600; }

/* ---------- Entity command band ---------- */
.ent-band { grid-template-columns: 240px 1fr 208px; }
.entbars .zero { stroke: var(--hairline); stroke-width: 1; }
.entbars .bar-pos { fill: var(--in-bar); }
.entbars .bar-neg { fill: var(--out-bar); }
.entbars text { font: 400 9px var(--mono); fill: var(--mute); }
.entbars .hit { fill: transparent; }
.entbars .col:hover rect:not(.hit) { opacity: 0.8; }
.entbars a { outline-offset: -2px; }
.ent-band .viewswitch { margin-top: auto; align-self: flex-start; }
.etable.pl th, .etable.pl td { white-space: nowrap; }
.etable.pl td.acct { color: var(--body); }

@media (max-width: 900px) {
  .rev-band, .ent-band { grid-template-columns: 1fr; }
  .rev-band .cmd-health, .ent-band .cmd-health { border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hairline); padding-top: 12px; }
  .scope-col { flex-direction: row; }
  .wrow { grid-template-columns: 106px 1fr 58px 34px; }
}

/* Workload board tabs (entity | institution) */
.wb-tabs { display: inline-flex; background: var(--hairline-soft); border-radius: var(--pill);
  padding: 2px; margin-bottom: 8px; align-self: flex-start; }
.cmd-chart .wboard { max-height: 128px; overflow-y: auto; scrollbar-width: thin; }

/* display:flex on .wboard was defeating the hidden attribute — never again,
   for any element: hidden means hidden. */
[hidden] { display: none !important; }

/* ---------- Tool pages (activity / reports / import) command bands ---------- */
.tool-band { grid-template-columns: 1fr auto; }
.cmd-title { font: 650 30px/38px var(--sans); letter-spacing: -1.2px; color: var(--ink); margin-top: 4px; }
.tool-band .cmd-sub { max-width: 560px; }
.cmd-health.row { flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: center;
  border-left: 1px solid var(--hairline); padding-left: 24px; }
.act-chip { display: inline-block; font: 500 10.5px/16px var(--mono); border: 1px solid var(--hairline);
  border-radius: var(--pill); padding: 1px 9px; color: var(--body); white-space: nowrap; }
.act-chip.ok { border-color: var(--in); color: var(--in); }
.act-chip.warn { border-color: var(--warning); color: var(--out); }
.act-detail { color: var(--mute); font-size: 12.5px; max-width: 640px; overflow-wrap: anywhere; }
.act-warn { color: var(--out); }
.mono-inline { font: 500 11.5px var(--mono); color: var(--body); }
.etable.act td { vertical-align: top; }
@media (max-width: 900px) {
  .tool-band { grid-template-columns: 1fr; }
  .cmd-health.row { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 12px; }
}