/* Valyrion Forecast. Tokens from the Valyrion brand system (Geist 400/500/600, ink on paper, one accent blue,
   hairlines and type carry the structure: no shadows). Layout follows the "V1 · lean" page of the mockup canvas. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0b0b0c;
  --paper: #ffffff;
  --canvas: #fafafb;
  --quiet: #f4f4f5;
  --text: #2a2a2e;
  --muted: #6b6b70;
  --accent: #2b4bff;
  --accent-wash: #eef1ff;
  --accent-row: rgba(43, 75, 255, .07);
  --warn: #c2410c;
  --warn-wash: #fdf4e8;
  --warn-line: rgba(194, 65, 12, .35);
  --hairline: rgba(11, 11, 12, .09);
  --hairline-strong: rgba(11, 11, 12, .15);
  --row-rule: rgba(11, 11, 12, .06);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--canvas); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55;
  letter-spacing: -0.005em; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.12; }
h1 { font-size: 30px; letter-spacing: -0.03em; }
h2 { font-size: 20px; letter-spacing: -0.025em; }
h3 { font-size: 15px; letter-spacing: -0.02em; }
strong { font-weight: 500; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- frame ------------------------------------------------------------------------------------------------------------ */
.frame { display: flex; min-height: 100vh; }
.nav {
  width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; background: var(--paper);
  border-right: 1px solid var(--hairline); padding: 28px 16px 24px; display: flex; flex-direction: column; gap: 28px;
}
.nav-brand { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.nav-brand b { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.nav-brand span { font-size: 12px; font-weight: 500; color: var(--muted); }
.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-links a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: var(--radius);
  color: var(--text); font-size: 14px; font-weight: 500;
}
.nav-links a:hover { background: var(--quiet); color: var(--ink); }
.nav-links a[aria-current="page"] { background: var(--quiet); color: var(--ink); }
.nav-links svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--muted); }
.nav-links a[aria-current="page"] svg { stroke: var(--ink); }
.nav-data { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 10px; }
.nav-data .row { display: flex; justify-content: space-between; font-size: 13px; }
.nav-data .row a { color: inherit; }
.nav-data .row a:hover { color: var(--accent); }
.nav-data .row b { font-weight: 500; color: var(--ink); }
.nav-data .row b.warn { color: var(--warn); }
.nav-data small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.nav-data .label { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nav-data .btn { width: 100%; margin-top: 6px; }
.nav-data form { display: flex; }

.main { flex-grow: 1; min-width: 0; padding: 32px 48px 40px; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; flex-direction: column; gap: 16px; }
.page-head > .toolbar:has(> .page-title) { align-items: flex-end; gap: 16px; }
.page-title { display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
.page-title .sub, .caption { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.back { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.back:hover { color: var(--ink); }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .push { margin-left: auto; }

/* --- controls --------------------------------------------------------------------------------------------------------- */
.btn {
  height: 36px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--hairline-strong); background: var(--paper);
  color: var(--ink); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #26262a; color: var(--paper); }
.btn.big { height: 40px; }
.btn.tall { height: 38px; }
.btn.small { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.full { width: 100%; }
.btn[disabled] { background: #d4d4d8; border-color: #d4d4d8; color: var(--paper); cursor: not-allowed; }
.link { font-size: 13px; font-weight: 500; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover { color: var(--ink); }

.segmented { display: inline-flex; padding: 3px; border-radius: var(--radius); background: var(--quiet); }
.segmented a {
  height: 28px; padding: 0 12px; border-radius: 4px; color: var(--muted); font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.segmented a[aria-current="true"] { background: var(--paper); color: var(--ink); }
.badge {
  height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--muted); color: var(--paper);
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.badge.warn { background: var(--warn); }
.badge.accent { background: var(--accent); }
.nav-links .badge { margin-left: auto; }

.search {
  display: flex; align-items: center; gap: 8px; height: 36px; width: 220px; padding: 0 12px; border-radius: var(--radius);
  border: 1px solid var(--hairline-strong); background: var(--paper);
}
.search input { border: 0; outline: 0; flex-grow: 1; min-width: 0; font-size: 13.5px; color: var(--ink); background: transparent; }
.search svg { width: 15px; height: 15px; stroke: var(--muted); flex-shrink: 0; }

.stepper { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink); }
.stepper a, .stepper span.off {
  width: 28px; height: 28px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
}
.stepper span.off { color: #c4c4c8; }
.stepper .label { min-width: 76px; text-align: center; }

/* the month picker (partials/month_picker.html): a year of months under a button, one year at a time */
.mp { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.mp-field { display: flex; }
.mp-pop { position: relative; }
.mp-field .mp-pop { flex: 1 1 auto; min-width: 0; }
.mp-btn { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; white-space: nowrap; }
.mp-btn::-webkit-details-marker { display: none; }
.mp-btn [data-mp-label] { margin-right: auto; }
.mp-btn.mp-go-to {
  height: 28px; padding: 0 8px 0 10px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper);
  font-size: 13px; font-weight: 500; color: var(--ink); min-width: 96px;
}
.mp-btn:hover, .mp-pop[open] > .mp-btn { border-color: var(--ink); }
.mp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mp-chev { width: 12px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 1.5; flex: none; }
.mp-step {
  width: 28px; height: 28px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500;
}
.mp-step:hover { border-color: var(--ink); color: var(--ink); }
.mp-step.off { color: #c4c4c8; }
.mp-step.off:hover { border-color: var(--hairline); color: #c4c4c8; }
.mp-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 244px; padding: 8px 10px 10px; background: var(--paper);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.mp-end .mp-panel { left: auto; right: 0; }
.mp-year { display: flex; flex-direction: column; gap: 6px; }
.mp-year[hidden] { display: none; }
.mp-head { display: flex; align-items: center; justify-content: space-between; height: 28px; }
.mp-head b { font-size: 13px; font-weight: 600; }
.mp-go { width: 28px; height: 28px; border: 0; border-radius: 4px; background: none; cursor: pointer; color: var(--ink); font-size: 15px; }
.mp-go:hover { background: var(--quiet); }
.mp-go[disabled] { color: #c4c4c8; cursor: default; background: none; }
.mp:not(.mp-js) .mp-go { visibility: hidden; }
.mp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mp-m, .mp-blank {
  position: relative; height: 34px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.mp-m:hover, .mp-blank:hover { background: var(--quiet); color: var(--ink); }
.mp-m input, .mp-blank input { position: absolute; opacity: 0; pointer-events: none; }
.mp-m.now { box-shadow: inset 0 0 0 1px var(--accent); }
.mp-m[aria-current="true"], .mp-m:has(input:checked), .mp-blank:has(input:checked) { background: var(--ink); color: var(--paper); }
.mp-m:has(input:focus-visible), .mp-blank:has(input:focus-visible), .mp-m:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mp-m.off { color: #c4c4c8; cursor: default; background: none; }
.mp-blank { height: 30px; color: var(--muted); border-top: 1px solid var(--row-rule); border-radius: 0 0 4px 4px; }
.mp-mark { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; }
.mp-mark.warn { background: var(--warn); }
.mp-mark.lock { width: auto; height: auto; top: 4px; right: 6px; bottom: auto; left: auto; transform: none; border-radius: 0;
  font-size: 9px; font-style: normal; line-height: 1; color: #a1a1a6; }
.mp-mark.lock::before { content: "✓"; }
.mp-m[aria-current="true"] .mp-mark.lock { color: var(--paper); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.input, .select {
  height: 40px; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--hairline-strong); background: var(--paper);
  font-size: 13.5px; font-weight: 500; color: var(--ink); width: 100%;
}
.input:focus, .select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.select.suggested { border: 1.5px solid var(--accent); }
.input.amount { text-align: right; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text); font-weight: 400; line-height: 1.4; }
.check input { width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ink); }

/* --- surfaces --------------------------------------------------------------------------------------------------------- */
.card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 22px; }
.card.flush { padding: 4px 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack.tight { gap: 8px; }
.split-view { display: flex; gap: 16px; align-items: flex-start; }
.split-view > section { flex-grow: 1; min-width: 0; }
.split-view.fill { flex-grow: 1; align-items: stretch; }
.panel { width: 340px; flex-shrink: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px;
  align-self: flex-start; }
.panel .toolbar { gap: 8px; }
.panel-head { display: flex; flex-direction: column; gap: 4px; line-height: 1.25; }
.done { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.done .disc { width: 36px; height: 36px; border-radius: 50%; background: var(--quiet); display: inline-flex; align-items: center;
  justify-content: center; }
.done .disc svg { width: 18px; height: 18px; stroke: var(--ink); }
.done h2 { font-size: 18px; }
.done p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.done .btn { margin-top: 4px; }
.panel .kicker { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; word-break: break-word; }
.panel .big-amount { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.panel .big-amount small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.note code { font-family: inherit; font-weight: 500; color: var(--ink); background: var(--quiet); padding: 1px 5px; border-radius: 4px; }
.facts { display: flex; flex-direction: column; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--row-rule); font-size: 13px; }
.facts > div:last-child { border-bottom: 0; }
.facts span:first-child { color: var(--muted); }
.facts span:last-child { font-weight: 500; color: var(--ink); text-align: right; }
.facts .total span { font-weight: 600; color: var(--ink); }
.facts .bad span { color: var(--warn); font-weight: 600; }

.banner {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius); font-size: 13.5px;
  background: var(--warn-wash); border: 1px solid var(--warn-line); color: #7a3a06;
}
.banner > svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--warn); }
.banner b { flex-shrink: 0; font-weight: 500; color: inherit; }
.banner .push { margin-left: auto; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.banner .btn { height: 32px; }
.banner.notice { background: var(--accent-wash); border-color: rgba(43, 75, 255, .3); color: var(--ink); }
.banner.notice > svg { stroke: var(--accent); }
.banner.notice span { color: var(--text); }
.banner.ok { background: var(--paper); border-color: var(--hairline); color: var(--text); font-size: 13px; }
.banner.ok b { color: var(--ink); }
.flash { padding: 10px 14px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--hairline); font-size: 13px; }
.flash.error { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn); }

/* --- tables (grid rows, as the mockup draws them) ----------------------------------------------------------------- */
.rows { display: flex; flex-direction: column; }
.rows .head, .rows .row { display: grid; align-items: center; gap: 12px; }
.rows .head { height: 38px; font-size: 11.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--hairline-strong); letter-spacing: 0; }
.rows .row {
  min-height: 42px; padding: 4px 20px; margin: 0 -20px; border-bottom: 1px solid var(--row-rule); color: inherit;
}
.rows .row:last-child { border-bottom: 0; }
a.row:hover { background: var(--canvas); color: inherit; }
.rows .row.selected { background: var(--accent-row); }
.rows .num { text-align: right; }
.rows .when { font-size: 12.5px; color: var(--muted); }
.who { display: flex; flex-direction: column; min-width: 0; }
.who b { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.amount { font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: right; white-space: nowrap; }
.amount.in { color: var(--accent); }
.tx-grid { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 220px) 110px 120px; }
.rows .tx-grid { gap: 0; }
.rows .row.tx-grid { min-height: 43px; padding: 0 20px; }
.rows .row.tx-grid:last-child { border-bottom: 1px solid var(--row-rule); }
.tx-grid .who { line-height: 1.25; }
.tx-grid .chip { height: 24px; padding: 0 9px; cursor: help; }
.batch-grid { grid-template-columns: 140px minmax(0, 1fr) 100px 100px; }
.grow { flex-grow: 1; }
.steps-list { margin: 0; padding-left: 18px; }
/* --- Bank: step cards a third and two thirds wide, as the mockup lays them out ---------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.steps > section:first-child { grid-column: span 4; }
.steps > section + section { grid-column: span 8; }
.card.step { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.step h3 { font-size: 14px; }
.card.step.failed { align-self: start; gap: 10px; background: var(--warn-wash); border-color: var(--warn-line); color: #7a3a06; }
.step.failed h3 { color: #7a3a06; }
.step.failed p { margin: 0; font-size: 13px; line-height: 1.5; }
.btn.quiet-warn { padding: 0 12px; background: transparent; border-color: var(--warn-line); color: #7a3a06; }
.btn.quiet-warn:hover { border-color: var(--warn); color: var(--warn); }
.btn-row { display: flex; gap: 8px; }
.btn-row form { display: flex; }
.btn-row.grow-first form:first-child { flex-grow: 1; }
.btn-row.grow-first form:first-child .btn { flex-grow: 1; }
.rows .row.batch-grid { font-size: 12.5px; }
.facts.plain > div { height: 28px; padding: 0; align-items: center; border: 0; }
.facts.plain span:first-child { color: var(--text); }
.facts.plain span.warn { color: var(--warn); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat .k { font-size: 12px; font-weight: 500; color: var(--muted); }
.stat b { font-size: 15px; font-weight: 600; color: var(--ink); }
.stat b.warn { color: var(--warn); }
.stat small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.ledger { display: flex; flex-direction: column; padding-top: 6px; border-top: 1px solid var(--hairline); }
.ledger > div { display: flex; justify-content: space-between; align-items: center; height: 28px; font-size: 13px; color: var(--text); }
.ledger > div span:last-child { font-weight: 500; color: var(--ink); }
.ledger .calc { height: 30px; border-top: 1px solid var(--hairline-strong); }
.ledger .calc span { font-weight: 600; color: var(--ink); }
.ledger > div > span.strong { font-weight: 600; }
.ledger > div > span.warn, .ledger > .gap > span { color: var(--warn); }
.ledger > .gap > span { font-weight: 500; }
.file-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed rgba(11, 11, 12, .25);
  border-radius: var(--radius); background: var(--canvas); min-width: 0; }
.file-tile svg { width: 22px; height: 22px; flex: none; stroke: var(--ink); }
.file-tile > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.file-tile b { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-tile small { font-size: 12px; color: var(--muted); }
.file-pick { cursor: pointer; }
.file-pick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card.new-lines { padding: 14px 20px 10px; }
.card-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; }
.card-head h3 { font-size: 14px; }
.card-head .caption { font-size: 12.5px; font-weight: 400; }
.how { font-size: 12px; color: var(--muted); }
.lines-grid { grid-template-columns: 64px minmax(0, 1fr) 240px 230px 120px; }
.rows .lines-grid, .rows .batch-grid { gap: 0; }
.rows .head.lines-grid, .rows .head.batch-grid { height: 34px; }
.rows .row.lines-grid, .rows .row.batch-grid { min-height: 44px; padding: 0 20px; }
.rows .row.lines-grid:last-child, .rows .row.batch-grid:last-child { border-bottom: 1px solid var(--row-rule); }
.lines-grid .who { line-height: 1.25; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 500; background: var(--quiet); color: var(--ink); white-space: nowrap; letter-spacing: 0;
}
.chip.warn { background: var(--warn-wash); color: var(--warn); }
.chip.plain { background: var(--paper); color: var(--muted); }
.chip.ended { background: var(--quiet); color: var(--muted); }

.splitbar { display: flex; flex-direction: column; gap: 8px; }
.splitbar .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.splitbar .bar span { display: block; }
.splitbar .legend { display: flex; gap: 20px; font-size: 12px; color: var(--muted); flex-wrap: wrap; line-height: 1.3; }
.splitbar .legend b { font-weight: 600; color: var(--ink); }
.splitbar .legend b.warn { color: var(--warn); }
.splitbar .legend .push { margin-left: auto; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 96px 24px; text-align: center; }
.empty h3 { font-size: 16px; }
.empty p { margin: 0; max-width: 380px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.empty > form, .empty > .btn { margin-top: 8px; }

.parts { display: flex; flex-direction: column; gap: 8px; }
.part { display: grid; grid-template-columns: minmax(0, 1fr) 110px 28px; gap: 8px; align-items: center; }
.part .select, .part .input { height: 38px; font-size: 13px; font-weight: 400; }
.remaining { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.remaining b { font-weight: 600; color: var(--ink); }
.remaining b.warn { color: var(--warn); }
.icon-btn { width: 28px; height: 28px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--radius); }
.icon-btn:hover { background: var(--quiet); color: var(--ink); }
[hidden] { display: none !important; }

/* --- Inputs ---------------------------------------------------------------------------------------------------------- */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid rgba(11, 11, 12, .12); }
.tabs a { height: 38px; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent; }
.tabs a span { font-size: 12px; color: var(--muted); }
.tabs a[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.between { justify-content: space-between; }
.card.flush > .toolbar { padding: 14px 0 6px; }
.against { font-size: 12.5px; color: var(--muted); }
.card.commitments { padding: 12px 20px 8px; }
.card.commitments > .toolbar { padding-bottom: 10px; }
.commit-grid { grid-template-columns: minmax(0, 1fr) 120px 110px 56px 92px 92px 110px 120px; }
.rows .commit-grid { gap: 0 8px; }
.rows .head.commit-grid { height: 34px; }
.rows .row.commit-grid { height: 44px; min-height: 0; padding: 0; margin: 0; font-size: 12.5px; color: var(--text); }
.rows .row.commit-grid:last-child { border-bottom: 1px solid var(--row-rule); }
.commit-grid .who { gap: 1px; line-height: 1.25; }
.commit-grid .who b { font-size: 13px; }
.commit-grid .amount { font-size: 12.5px; color: var(--text); }
.partner-grid { grid-template-columns: 70px repeat(2, minmax(0, 1fr)) 84px; }
.partner-grid.collections { grid-template-columns: 70px repeat(3, minmax(0, 1fr)) 84px; }  /* with Valyrion's share beside the collections */
.rows .partner-grid { gap: 8px; }
.rows .head.partner-grid { height: 28px; border-bottom-color: rgba(11, 11, 12, .12); }
.rows .row.partner-grid { min-height: 32px; padding: 0; margin: 0; font-size: 12.5px; }
.rows .row.partner-grid:last-child { border-bottom: 1px solid var(--row-rule); }
.partner-grid .mo { font-weight: 500; color: var(--ink); }
.partner-grid .mid { text-align: center; }
.partner-grid .input.small { height: 26px; max-width: none; padding: 0 6px; border-color: transparent; background: transparent;
  font-size: 12.5px; font-weight: 400; color: var(--text); }
.partner-grid .input.small.amount { max-width: none; font-weight: 400; }
.partner-grid .input.small:hover { border-color: var(--hairline-strong); }
.partner-grid .input.small:focus { background: var(--paper); }
.partner-grid .amount { font-size: 12.5px; font-weight: 600; }
.partner-grid .amount.warn-text { color: var(--warn); }
.partner-grid input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.card.partner { padding: 18px 20px; gap: 14px; }
.partner-head { display: flex; align-items: baseline; gap: 10px; }
.partner-head h2 { font-size: 16px; letter-spacing: -0.02em; }
.partner-head .caption { font-size: 12.5px; font-weight: 400; }
.vat-grid { grid-template-columns: 90px 110px 120px 80px minmax(0, 1fr) 100px; }
.vat-grid b { font-weight: 600; }
.rows .row.ended { color: var(--muted); }
.rows .row.ended .who b, .rows .row.ended .amount, .rows .row.ended a.name { color: var(--muted); }
a.name { color: var(--ink); text-decoration: underline dotted rgba(11, 11, 12, .3); text-underline-offset: 3px; }
a.name:hover { color: var(--accent); }
label.inline.nowrap { white-space: nowrap; }
.inline > .input.small.rate { width: 84px; flex: none; }
.warn-text { color: var(--warn); font-weight: 500; font-size: 12.5px; }
.chip.quiet { background: var(--quiet); color: var(--ink); }
.input.small { height: 32px; font-size: 13px; padding: 0 8px; }
.input.small.amount { max-width: 140px; }
.inline { display: flex; align-items: center; gap: 8px; }
.cards.wide { grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); }
/* A partner's card: name and caption with "Settings" at the right, which folds the fields out beneath; then the flow
   line and the months. The new card is the same card, its settings out and the focus border on. */
.card.partner .partner-top { position: relative; display: flex; flex-direction: column; }
.card.partner.new { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card.partner.ended { background: var(--canvas); }
.card.partner.ended h2, .card.partner.ended .partner-grid .mo, .card.partner.ended .partner-grid .amount { color: var(--muted); }
details.settings > summary { position: absolute; top: 1px; right: 0; cursor: pointer; list-style: none; font-size: 12.5px;
  font-weight: 500; color: var(--accent); }
details.settings > summary::-webkit-details-marker { display: none; }
details.settings > summary:hover, details.settings[open] > summary { color: var(--ink); }
.card.partner.new details.settings > summary { display: none; }
details.settings > .fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; }
.card.partner.new details.settings > .fields { margin-top: 12px; }
.settings .field { font-size: 11.5px; gap: 4px; flex: 0 1 auto; white-space: nowrap; }
.settings .input, .settings .select { height: 34px; font-size: 13px; font-weight: 400; width: auto; min-width: 96px; }
.settings .input.short { width: 84px; min-width: 0; }
.settings .input.days { width: 64px; min-width: 0; text-align: right; }
.settings .inline { gap: 6px; }
.settings .fields:has(select[name=typed] option[value=invoice]:checked) .share { display: none; }
.card.partner.new:has(select[name=currency] option[value=DKK]:checked) .fx { display: none; }
details.end { margin-left: auto; text-align: right; padding-bottom: 9px; }
details.end summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 500; color: #7a3a06; white-space: nowrap; }
details.end summary::-webkit-details-marker { display: none; }
details.end summary:hover { color: var(--ink); }
details.end[open] { padding-bottom: 0; }
details.end[open] summary { margin-bottom: 6px; }
details.end .inline { justify-content: flex-end; }
details.end .select { width: 150px; }
.end-link { margin-left: auto; padding-bottom: 10px; }
.new-head { grid-template-columns: minmax(0, 1fr) 110px; }
.new-head .field { font-size: 11.5px; gap: 4px; }
.like { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.like .caption { font-size: 12px; }
a.chip:hover { color: var(--accent); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--quiet); font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.flow b { font-weight: 500; color: var(--ink); }
.flow .arrow { width: 14px; height: 14px; stroke: var(--muted); flex: none; }
.card.partner.ended .flow b { color: var(--muted); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.drawer .field { gap: 5px; }
.drawer .input, .drawer .select { height: 38px; font-size: 14px; font-weight: 400; }
.drawer .input.strong { font-weight: 600; }
.drawer .stack.form-tight { gap: 12px; }
.check.end { padding-bottom: 11px; }
.segmented-input { display: inline-flex; padding: 3px; border-radius: var(--radius); background: var(--quiet); align-self: flex-start; }
.segmented-input label { height: 30px; padding: 0 12px; border-radius: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.segmented-input input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-input label:has(input:checked) { background: var(--paper); color: var(--ink); }
.segmented-input label:has(input:focus-visible) { outline: 2px solid var(--accent); }

.scrim { position: fixed; inset: 0; background: rgba(11, 11, 12, .22); z-index: 10; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%; z-index: 11; overflow-y: auto;
  background: var(--paper); border-left: 1px solid var(--hairline-strong); padding: 26px 28px 24px; display: flex;
  flex-direction: column; gap: 18px;
}
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.drawer-head > div { display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
.drawer h2 { font-size: 22px; }
.drawer .caption { font-size: 12.5px; font-weight: 400; }
.drawer .kicker { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.drawer .close { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--ink); font-size: 15px; background: var(--paper); }
.drawer .close:hover { border-color: var(--ink); }
.drawer .input.small { height: 32px; font-size: 13px; }
.whatchanges { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--quiet);
  font-size: 12.5px; color: var(--text); line-height: 1.5; }
.whatchanges .kicker { font-size: 12.5px; color: var(--ink); }
.slots { border: 1px solid var(--warn-line); border-radius: var(--radius); background: var(--warn-wash); }
.slot-row { border-bottom: 1px solid var(--warn-line); }
.slot-row:last-child { border-bottom: 0; }
.slot-row summary { display: grid; grid-template-columns: 96px 1fr 110px 56px; gap: 8px; align-items: center; padding: 9px 12px;
  font-size: 13px; cursor: pointer; list-style: none; }
.slot-row summary::-webkit-details-marker { display: none; }
.slot-row summary .link { text-align: right; font-size: 12.5px; }
.slot-row[open] summary .link { color: var(--ink); }
.slot-row > .stack { padding: 0 12px 12px; }
.slot-row .input { background: var(--paper); }
details.more summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--accent); }
details.more[open] summary { margin-bottom: 14px; }
details.more.small summary { font-size: 12.5px; }
details.more.small[open] summary { margin-bottom: 8px; }
.log-title { margin-bottom: 6px; }
.log { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; font-size: 12.5px; padding: 8px 0; border-top: 1px solid var(--row-rule); }
.log span:first-child { color: var(--muted); }

/* --- Overview --------------------------------------------------------------------------------------------------------- */
.status-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--paper); color: var(--text); font-size: 12px; font-weight: 500; }
.status-chip .dot { width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.status-chip.warn { border-color: var(--warn-line); background: var(--warn-wash); color: var(--warn); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; display: flex;
  flex-direction: column; gap: 6px; position: relative; }
.kpi .label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.kpi .value { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.kpi .value span { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.kpi .value.warn { color: var(--warn); }
.kpi .sub { font-size: 12.5px; color: var(--muted); }
.kpi .sub b { font-weight: 500; color: var(--text); }
.kpi .sub b.warn { color: var(--warn); }
.tip-wrap { position: relative; display: inline-flex; }
.info { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: help; display: inline-flex; }
.info svg { width: 16px; height: 16px; stroke: var(--muted); }
.tooltip { position: absolute; top: 24px; left: -8px; z-index: 5; width: 260px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45; display: none; flex-direction: column; gap: 4px; }
.tooltip b { font-weight: 600; }
.tip-wrap:hover .tooltip, .tip-wrap:focus-within .tooltip { display: flex; }
.attention { padding: 6px 20px; }
.att-row { display: flex; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--row-rule);
  color: var(--text); font-size: 13.5px; }
.att-row:last-child { border-bottom: 0; }
.att-row:hover { color: var(--text); }
.att-row .dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.att-row .dot.warn { background: var(--warn); }
.att-row .dot.accent { background: var(--accent); }
.att-row .what { font-weight: 500; color: var(--ink); flex-shrink: 0; }
.att-row .detail { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-row .action { margin-left: auto; flex-shrink: 0; color: var(--accent); font-size: 13px; font-weight: 500; }
.att-row:hover .action { color: var(--ink); }
.balance { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px 12px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-left: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--ink); }
.sw.forecast { width: 17px; height: 2px; border: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); }
.sw.floor { width: 17px; border-top: 1.5px dashed var(--muted); }
.sw.dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--muted); }
.segmented a .sw { width: 14px; flex: none; }
/* The chart: a fixed height, lines that stretch across the window, and text, dots and buttons that keep their size. */
.chart { position: relative; display: flex; }
.chart-y { position: relative; flex: none; width: 56px; font-size: 11px; line-height: 1; color: var(--muted); }
.chart-y span { position: absolute; right: 10px; transform: translateY(-50%); }
.chart-plot { position: relative; flex: 1; min-width: 0; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-band { position: absolute; top: 0; background: var(--quiet); }
.chart .grid { stroke: var(--row-rule); stroke-width: 1; }
.chart .zero { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .actual { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .forecast { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linejoin: round; }
.chart .scenario { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .floor { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart-under { position: absolute; left: 0; right: 0; background: rgba(194, 65, 12, .045); pointer-events: none; }
.chart-floor { position: absolute; left: 6px; margin-top: -17px; font-size: 11px; font-weight: 500; line-height: 1; color: var(--muted);
  pointer-events: none; }
.chart-low { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-shadow: 0 0 0 2px #fff;
  pointer-events: none; }
.chart-ends { position: relative; flex: none; width: 140px; font-size: 11.5px; font-weight: 500; line-height: 1; color: var(--text); }
.chart-ends span { position: absolute; left: 10px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; }
.chart-ends .sw { width: 12px; }
.chart-now { position: absolute; top: 0; width: 1px; background: rgba(11, 11, 12, .35); }
.chart-today { position: absolute; top: 2px; margin-left: 6px; font-size: 11px; font-weight: 500; line-height: 1; color: var(--ink); }
.chart-pt { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink);
  pointer-events: none; }
.chart-pt.sel { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.chart-months button { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; font: inherit; font-size: 11px; color: var(--muted); outline: none; }
.chart-months button span { display: flex; align-items: center; padding: 0 4px; border-radius: 4px; }
.chart-months button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.chart-months button:focus-visible span { box-shadow: inset 0 0 0 2px var(--accent); }
.chart-tip { position: absolute; top: 0; left: 0; z-index: 4; min-width: 236px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-size: 12px; line-height: 1.55; display: flex; flex-direction: column;
  pointer-events: none; box-shadow: 0 6px 18px rgba(11, 11, 12, .16); }
.chart-tip[hidden] { display: none; }
/* Scenarios on the Balance card: the levers as chips, the panel that makes one, and the result against the floor. */
.strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 2px; border-top: 1px solid var(--row-rule); }
.strip .k { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-right: 4px; }
.strip .push { margin-left: auto; }
.strip-tools { display: flex; align-items: center; gap: 14px; }
.strip-tools form { display: flex; }
.lchip { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 12px; border-radius: 999px;
  background: var(--quiet); font-size: 12.5px; color: var(--text); }
.lchip a { color: inherit; display: inline-flex; gap: 8px; }
.lchip a:hover b { text-decoration: underline; }
.lchip b { font-weight: 500; color: var(--ink); }
.lchip span { color: var(--muted); }
.lchip form { display: flex; }
.lchip button { width: 24px; height: 24px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 14px; line-height: 1; }
.lchip button:hover { background: rgba(11, 11, 12, .08); color: var(--ink); }
.lchip.base { background: transparent; border: 1px dashed var(--hairline-strong); padding-right: 12px; color: var(--muted); }
.inline-panel { border-top: 1px solid var(--row-rule); padding: 14px 0 6px; }
.lf { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.lf-groups { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.lf-group { display: flex; flex-direction: column; gap: 6px; }
.lf-group .k { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lf-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-kinds a { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--paper);
  font-size: 12.5px; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; }
.lf-kinds a:hover { border-color: var(--ink); color: var(--ink); }
.lf-kinds a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.lf-fields { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px 12px; align-items: center; font-size: 13px; color: var(--muted); }
.lf-fields .input, .lf-fields .select { height: 36px; font-size: 13.5px; }
.lf-fields .inline .input { width: 140px; flex: none; }
.lf-preview { padding: 12px 14px; border-radius: var(--radius); background: #f6f6f7; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.lf-preview div { display: flex; justify-content: space-between; gap: 12px; }
.lf-preview span:first-child { color: var(--muted); }
.lf-preview b { font-weight: 600; color: var(--ink); }
.lf-preview .err { color: var(--warn); }
.lf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.form-error { margin: 0 0 10px; font-size: 13px; color: var(--warn); }
.result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 2px; font-size: 13px; color: var(--muted); }
.result b { font-weight: 600; color: var(--ink); }
.result .push { margin-left: auto; }
.result .floor label { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 10px; border-radius: var(--radius);
  border: 1px solid var(--hairline-strong); background: var(--paper); font-weight: 500; }
.result .floor input { width: 88px; height: 26px; border: 0; outline: 0; text-align: right; font-weight: 600; color: var(--ink); background: transparent; }
.chart-tip .head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-weight: 500; }
.chart-tip .head b { font-weight: 500; }
.chart-tip .head span { color: rgba(255, 255, 255, .55); }
.chart-tip div:not(.head) { display: flex; justify-content: space-between; gap: 16px; }
.chart-tip div:not(.head) span:first-child { color: rgba(255, 255, 255, .7); }
.chart-tip .in span:last-child { color: #8fa2ff; }
.chart-tip .total { font-weight: 600; }
.chart-tip .vs span:last-child { color: #f5b76e; }

/* --- Budget ----------------------------------------------------------------------------------------------------------- */
.toolbar.nowrap { flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
.page-head .caption { font-size: 12.5px; }
.budget-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.headline-card { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.headline-card .caption { font-size: 12.5px; }
.headline { display: flex; align-items: baseline; gap: 10px; }
.headline .big { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.headline .var { font-size: 14px; font-weight: 600; color: var(--ink); }
.headline .var.worse { color: var(--warn); }
.headline .vs { font-size: 12.5px; color: var(--muted); }
.figures { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--muted); }
.figures b { font-weight: 600; color: var(--ink); }
.figures b.worse { color: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--muted); }
.chips b { font-weight: 600; color: var(--ink); }
.chip.accent { background: var(--accent-wash); color: var(--accent); }
.chip.soft { background: var(--quiet); color: var(--text); font-weight: 400; }
.lock-card { padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.lock-row { display: flex; align-items: center; gap: 10px; }
.lock-row h2 { font-size: 14px; letter-spacing: -0.02em; }
.lock-row form, .lock-row > .btn { margin-left: auto; }
.lock-chips { display: flex; gap: 6px; }
.lock-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); }
.lock-line .mark { font-weight: 600; color: var(--ink); }
.lock-line.bad, .lock-line.bad .mark { color: var(--warn); }
.lock-line .push { margin-left: auto; flex-shrink: 0; font-weight: 500; }
.budget-table { padding: 6px 24px 10px; overflow-x: auto; }
.bgrid { display: grid; grid-template-columns: 220px repeat(12, minmax(64px, 1fr)) 100px 100px; align-items: stretch; min-width: 1188px; }
.bgrid.groups.part, .stepper.window-step { display: none; }
/* not room for the whole year: seven months at a time, with ‹ › in the head */
@media (max-width: 1599px) {
  .bgrid { grid-template-columns: 220px repeat(7, minmax(64px, 1fr)) 100px 100px; min-width: 980px; }
  .bgrid > .out, .bgrid.groups.full { display: none; }
  .bgrid.groups.part { display: grid; }
  .stepper.window-step { display: flex; }
}
.bgrid.groups { height: 24px; align-items: end; font-size: 10.5px; font-weight: 500; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; }
.bgrid.groups .group { border-bottom: 1px solid var(--hairline-strong); padding-bottom: 3px; text-align: center; }
.bgrid.groups .group.accent { border-color: var(--accent); color: var(--accent); margin-left: 6px; }
.bgrid.groups .group:last-child { margin-left: 10px; }
.bgrid.head { height: 34px; font-size: 11.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--hairline-strong); }
.bgrid.head > span { text-align: right; padding-right: 8px; line-height: 34px; }
.bgrid.section { height: 30px; align-items: center; font-size: 10.5px; font-weight: 500; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; }
.bgrid[class*="row-"] { height: 42px; border-top: 1px solid rgba(11, 11, 12, .07); }
.bgrid .name { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em; white-space: nowrap; }
.bgrid .name a { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.bgrid .name .chev { display: inline-block; width: 12px; font-size: 10px; color: var(--muted); }
.bgrid.row-category .name:not(:has(a)) { padding-left: 18px; }
.bgrid.row-line { height: 36px; background: var(--canvas); border-top-style: dashed; }
.bgrid.row-line .name { font-size: 12.5px; font-weight: 500; color: var(--text); padding-left: 36px; }
.bgrid.row-line .cellv .val, .bgrid.row-line .cellv .fc-link { font-size: 12.5px; }
.bgrid.row-total { background: var(--canvas); border-top-color: rgba(11, 11, 12, .25); }
.bgrid.row-net { height: 48px; border-top-color: rgba(11, 11, 12, .35); }
.bgrid.row-net .name, .bgrid.row-net .cellv .val { font-size: 13.5px; }
.bgrid.row-closing { height: 38px; border-top: 0; }
.bgrid.row-total .name, .bgrid.row-net .name, .bgrid.row-closing .name, .bgrid.row-check .name { padding-left: 18px; }
.bgrid.row-closing .name, .bgrid.row-check .name { font-weight: 500; font-size: 12.5px; color: var(--text); letter-spacing: 0; }
.bgrid.row-closing .cellv .val { font-weight: 500; }
.bgrid.row-closing .cellv.forecast .val, .bgrid.row-closing .cellv.fy .val { color: var(--muted); font-weight: 500; }
.bgrid.row-check { color: var(--warn); }
.cellv { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; padding-right: 8px; line-height: 1.25; }
.cellv .val, .cellv .fc-link { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.cellv.forecast .val, .cellv.forecast .fc-link { font-weight: 400; color: var(--text); }
.cellv .val.dash { font-weight: 400; color: var(--text); }
.row-total .cellv .val, .row-net .cellv .val, .cellv.fy .val, .cellv.vsb .val { font-weight: 600; }
.cellv.vsb .val { color: var(--text); }
.cellv .sub { font-size: 10.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.cellv .sub.worse, .cellv .val.worse, .cellv.vsb .val.worse { color: var(--warn); }
.cellv.sel { background: var(--accent-wash); }
.fc-link { text-decoration: underline dotted rgba(11, 11, 12, .25); text-underline-offset: 3px; }
.fc-link:hover { color: var(--accent); }
.bgrid .now { border-left: 2px solid var(--ink); }
.bgrid .fy { border-left: 1px solid rgba(11, 11, 12, .12); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 36px; border-top: 1px dashed rgba(11, 11, 12, .12);
  font-size: 11.5px; color: var(--muted); }
.drawer .comp { margin-bottom: 6px; }
.facts.compact > div { height: 32px; padding: 0; align-items: center; border-bottom: 0; border-top: 1px solid var(--row-rule); }
.facts.compact span:first-child { color: var(--text); }
.facts.compact small { font-size: 11.5px; color: var(--muted); }
.facts.compact .total { height: 36px; border-top: 1px solid rgba(11, 11, 12, .25); font-size: 13.5px; }

.egrid-card { padding: 4px 16px 12px; overflow-x: auto; }
.egrid { display: grid; grid-template-columns: 200px repeat(12, minmax(58px, 1fr)) 76px 40px; gap: 4px; align-items: center; min-width: 1100px; }
.egrid.ehead { height: 34px; font-size: 11.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--hairline-strong); }
.egrid.esection { height: 30px; font-size: 10.5px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 6px; }
.egrid.erow { min-height: 38px; padding: 2px 0; }
.egrid.erow .name { font-size: 13px; font-weight: 600; color: var(--ink); }
.egrid.erow.line .name { font-size: 12.5px; font-weight: 500; color: var(--text); padding-left: 18px; }
.egrid.erow.computed, .egrid.erow.derived { background: var(--canvas); border-top: 1px solid var(--row-rule); font-weight: 600; }
.egrid.erow.net { border-top: 1px solid rgba(11, 11, 12, .35); }
.egrid.erow .num { font-size: 12.5px; }
.egrid .num, .egrid .total { text-align: right; padding-right: 6px; }
.egrid .total { font-weight: 600; color: var(--ink); }
.split-link { font-weight: 500; margin-left: 6px; opacity: .8; }
.link.small { font-size: 11.5px; }
.input.cell { height: 32px; padding: 0 6px; font-size: 12.5px; font-weight: 500; text-align: right; }
.input.cell.bad { border-color: var(--warn); background: var(--warn-wash); }
.input.cell[readonly] { background: var(--canvas); color: var(--text); }
.icon-btn.fill { font-size: 14px; }

/* --- a laptop's width: the side panel goes under the table rather than squeeze it ------------------------------------ */
@media (max-width: 1240px) {
  .split-view { flex-direction: column; }
  .split-view > section { width: 100%; }
  .panel { width: 100%; position: static; }
  .budget-top { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- narrow screens: the sidebar folds to a top bar, toolbars wrap, wide rows scroll in their box ------------------ */
@media (max-width: 900px) {
  .frame { flex-direction: column; }
  .nav { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .nav-links { flex-direction: row; flex-wrap: wrap; }
  .nav-data { margin: 0; flex-direction: row; gap: 12px; align-items: center; }
  .main { padding: 20px 16px 32px; }
  .split-view { flex-direction: column; }
  .panel { width: 100%; position: static; }
  .card.flush { overflow-x: auto; }
  .tx-grid, .lines-grid { min-width: 620px; }
  .commit-grid { min-width: 880px; }
  .cards.wide { grid-template-columns: 1fr; }
  .card.stack { overflow-x: auto; }
}

/* --- signing in ------------------------------------------------------------------------------------------------------- */
body.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.signin-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 18px; padding: 28px 24px; }
.signin-card .nav-brand { padding: 0; margin-bottom: 4px; }
.btn.google { gap: 10px; }
.btn.google svg { width: 18px; height: 18px; }
.btn.person { justify-content: space-between; }
.or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }
.input.code { height: 48px; font-size: 20px; letter-spacing: .3em; text-align: center; }
.small-print { font-size: 11.5px; }
.link.warn { color: var(--warn); }
.signed-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px;
  border-top: 1px solid var(--row-rule); }
.signed-in form { display: flex; }
.signed-in .who b { font-size: 13px; }

/* --- Users ------------------------------------------------------------------------------------------------------------ */
.users-grid { grid-template-columns: minmax(0, 1fr) 150px 190px 160px; }
.rows .row.users-grid { padding: 6px 20px; }
.users-grid form { display: flex; }
.users-grid .chip { justify-self: start; }
.users-grid .actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.select.small { height: 32px; width: auto; min-width: 120px; font-size: 12.5px; }
.add-user { display: grid; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hairline-strong); }
.add-user .add-who { display: flex; gap: 8px; }
.add-user .input, .add-user .select { height: 36px; }
.activity-head { padding: 14px 0 6px; }
.activity-grid { grid-template-columns: 110px 200px minmax(0, 1fr); }
.activity-grid.one { grid-template-columns: 110px minmax(0, 1fr); }

/* --- what a reader sees: scenarios to look at, the year without the lock card ----------------------------------------- */
.lchip.ro { gap: 8px; padding-right: 12px; }
.result span.floor { display: inline-flex; align-items: center; gap: 8px; }
.budget-top.single { grid-template-columns: minmax(0, 1fr); }

/* --- the Budget on a phone: one month at a time, and the year ------------------------------------------------------- */
.budget-phone { display: none; padding: 4px 16px 6px; }
.phone-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 92px 96px; align-items: stretch; }
.prow.head { height: 30px; font-size: 11.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--hairline-strong); }
.prow.head > span { text-align: right; padding-right: 8px; line-height: 30px; }
.prow.section { height: 28px; align-items: center; font-size: 10.5px; font-weight: 500; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; }
.prow[class*="row-"] { min-height: 42px; border-top: 1px solid rgba(11, 11, 12, .07); }
.prow .name { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.prow.row-line { min-height: 36px; background: var(--canvas); border-top-style: dashed; }
.prow.row-line .name { font-size: 12.5px; font-weight: 500; color: var(--text); padding-left: 14px; }
.prow.row-total { background: var(--canvas); border-top-color: rgba(11, 11, 12, .25); }
.prow.row-net { border-top-color: rgba(11, 11, 12, .35); }
.prow.row-closing .name, .prow.row-check .name { font-weight: 500; font-size: 12.5px; color: var(--text); }
.prow.row-check { color: var(--warn); }
.prow .fy { border-left: 1px solid rgba(11, 11, 12, .12); }

/* --- a phone: one column, the chart's figures under it, the Budget a month at a time --------------------------------- */
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .nav { gap: 8px 12px; }
  .nav-brand span { display: none; }
  .nav-links a { height: 34px; padding: 0 8px; gap: 8px; }
  .nav-data { width: 100%; }
  .signed-in { flex-grow: 1; padding-top: 0; border-top: 0; }
  .toolbar.nowrap { flex-wrap: wrap; white-space: normal; flex-shrink: 1; }
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kpi { padding: 14px 16px; }
  .kpi .value { font-size: 26px; }
  .balance { padding: 14px 14px 10px; }
  .chart-legend { margin-left: 0; }
  .segmented { flex-wrap: wrap; }
  .chart-y { width: 40px; }
  .chart-ends { display: none; }
  .chart-months button:not(:nth-child(3n+1)) span { visibility: hidden; }
  .chart { margin-bottom: 184px; }
  .chart-tip { left: 0 !important; right: 0; top: calc(100% + 12px) !important; min-width: 0; }
  .budget-table, .stepper.window-step { display: none; }
  .budget-phone { display: block; }
  .headline-card .figures { flex-wrap: wrap; }
  .users-grid, .activity-grid { grid-template-columns: minmax(0, 1fr); }
  .add-user .add-who { flex-direction: column; }
}