/* Vault's own pieces, on top of the shared retro system in styles.css.
   Colours are roles: categories, people and series read tokens set here,
   with their own steps in dark mode. */

:root {
  --cat-income: #1f8a5f;
  --cat-mortgage: #2f68c8;
  --cat-interest_debt: #d9512b;
  --cat-expenses: #c99212;
  --cat-family_debt: #8250c8;
  --cat-revolut: #17a08a;
  --cat-other: #a26a28;
  --s-1: #d9512b;
  --s-2: #2f68c8;
  --s-3: #c99212;
  --s-4: #8250c8;
  --s-5: #17a08a;
  --s-6: #a26a28;
  --s-7: #c43d86;
  --s-8: #7f7159;
  --p-1: #2f68c8;
  --p-2: #d9512b;
  --p-3: #c99212;
  --p-4: #17a08a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-income: #45a37c;
    --cat-mortgage: #5a8ae6;
    --cat-interest_debt: #e56a44;
    --cat-expenses: #c99a2a;
    --cat-family_debt: #9a78e4;
    --cat-revolut: #23a08a;
    --cat-other: #bb7d3c;
    --s-1: #e56a44;
    --s-2: #5a8ae6;
    --s-3: #c99a2a;
    --s-4: #9a78e4;
    --s-5: #23a08a;
    --s-6: #bb7d3c;
    --s-7: #dc5c9c;
    --s-8: #9d8f76;
    --p-1: #5a8ae6;
    --p-2: #e56a44;
    --p-3: #c99a2a;
    --p-4: #23a08a;
  }
}

.stack { display: flex; flex-direction: column; gap: 26px; }
.spacer { flex: 1; }
.card-head .spacer { flex: 1; }
.wrap { white-space: normal; }

/* ---- the budget grid ---- */
.budget-wrap { max-height: calc(100vh - 230px); }
table.budget td, table.budget th { padding: 6px 10px; }
table.budget .name-col { min-width: 210px; max-width: 260px; white-space: normal; }
table.budget .sched-col { min-width: 150px; text-align: left; }
table.budget thead th.fixed { text-align: left; }
table.budget td.cell { cursor: cell; }
td.cell { position: relative; }
table.budget td.cell:hover { outline: 1.5px solid var(--edge); outline-offset: -1.5px; }
table.budget td.cell:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
table.budget td.cell.editing { padding: 0; }
table.budget td.cell.editing .cell-input { width: 100%; min-width: 84px; height: 30px; text-align: right; border: 0; background: var(--surface); padding: 0 8px; font: inherit; font-variant-numeric: tabular-nums; outline: 2px solid var(--focus); outline-offset: -2px; }
/* A month changed from the line's schedule: a tomato corner, like a hand-made mark. */
td.cell.ovr { background-image: linear-gradient(225deg, var(--brand) 6px, transparent 6px); }
td.cell.noted::after { content: ""; position: absolute; left: 4px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--fc); }
table.data td.past, table.data th.past { background: var(--mixed); }
table.data thead th.past { background: color-mix(in srgb, var(--series-1) 8%, var(--surface-2)); }
table.data th.today, table.data td.today { box-shadow: inset 2px 0 0 var(--cut); }
table.data thead th.today { color: var(--fc-ink); }
table.data td.act { background: var(--actual); }
table.budget tr.section-row td, table.data tr.section-row td { background: var(--surface-2); font-weight: 600; border-top: var(--bw) solid var(--line-strong); }
table.budget tr.section-row td:first-child { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
table.budget tr.summary-head td { background: var(--block); color: var(--side-text); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
table.budget tr.net-row td { border-top: var(--bw) solid var(--edge); }
table.budget tr.closing-row td { font-family: var(--display); font-size: 15px; background: color-mix(in srgb, var(--mustard) 14%, var(--surface)); }
table.budget tr.closing-row td.below-buffer { background: var(--warn-wash); }
table.budget tr.closing-row td.below-zero { background: var(--crit-wash); color: var(--neg); }
table.budget tr.cash-row td.ref { font-weight: 640; color: var(--actual-ink); background: var(--actual-head); }
table.budget tr.cash-row td.derived { color: var(--text-2); font-style: italic; }
tr.recon-row td { color: var(--text-2); font-size: 12.5px; }
tr.recon-row td.flag, td.flag { background: var(--warn-wash); color: var(--text); font-weight: 600; }
tr.muted-row td { color: var(--text-3); font-size: 12.5px; }
table.budget .total-col { border-left: var(--bw) solid var(--line-strong); font-weight: 560; }
.fold { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.fold .nav-chev { transform: rotate(45deg) translate(-1px, -1px); }
.fold[aria-expanded="false"] .nav-chev { transform: rotate(-45deg); }
.fold .count { font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; }
.line-name { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.line-name:hover { color: var(--brand-ink); text-decoration-color: currentColor; }
.line-name.unassigned { color: var(--text-3); font-style: italic; }
.note-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--fc); vertical-align: 2px; }
.who-chip { display: inline-block; padding: 1px 8px; border-radius: var(--pill); font-size: 11.5px; font-weight: 560; border: 1.5px solid currentColor; color: var(--p-3); }
.who-chip.p-0 { color: var(--p-1); }
.who-chip.p-1 { color: var(--p-2); }
.who-chip.p-2 { color: var(--p-3); }
.legend-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.legend-inline .key { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-strong); margin-left: 8px; }
.legend-inline .key.ovr { background: linear-gradient(225deg, var(--brand) 6px, var(--surface) 6px); }
.legend-inline .key.note { border-radius: 50%; width: 7px; height: 7px; background: var(--fc); border: 0; }
.legend-inline .key.cut { width: 3px; border: 0; background: var(--cut); border-radius: 0; }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.toggle input, input.check { width: 16px; height: 16px; accent-color: var(--tomato); }
.toggle.small { font-size: 12px; }

/* ---- overview ---- */
.checks { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: var(--bw) solid var(--edge); background: var(--surface-2); font: inherit; color: var(--text); cursor: pointer; transition: transform 0.15s var(--ease-out), box-shadow 0.15s; }
.check:hover { transform: translate(-1px, -1px); box-shadow: var(--hard-sm); }
.check .check-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--display); font-weight: 700; background: var(--fc); color: #fff8ec; }
.check.warn { background: var(--warn-wash); }
.check.warn .check-mark { background: var(--mustard); color: var(--on-accent); }
.check.crit { background: var(--crit-wash); }
.check.crit .check-mark { background: var(--crit); }
.kpi-strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi-strip .tile { background: var(--surface); box-shadow: var(--hard-sm); }
.tile .value.small-value { font-size: 24px; }

/* ---- cash and reconciliation ---- */
.recon { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.recon .label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); }
.recon-line { font-size: 16px; margin-top: 6px; max-width: 640px; }
.recon-gap { padding: 12px 18px; border-radius: var(--radius-sm); border: var(--bw) solid var(--edge); box-shadow: var(--hard-sm); min-width: 220px; }
.recon-gap .value { font-family: var(--display); font-size: 34px; font-weight: 560; line-height: 1.1; }
.recon-gap .sub { font-size: 12px; color: var(--text-2); }
.recon-gap.ok { background: color-mix(in srgb, var(--series-1) 14%, var(--surface)); }
.recon-gap.up { background: color-mix(in srgb, var(--series-1) 10%, var(--surface)); }
.recon-gap.down { background: var(--warn-wash); }
table.grid td.cell { cursor: cell; }
table.grid:not(.plan) td.cell .cell-input { width: 100%; min-width: 90px; height: 30px; border: 0; padding: 0 8px; text-align: right; background: var(--surface); outline: 2px solid var(--focus); outline-offset: -2px; font: inherit; font-variant-numeric: tabular-nums; }

/* ---- meters and bars ---- */
.meter { position: relative; display: inline-block; min-width: 56px; padding: 0 6px; text-align: right; isolation: isolate; }
.meter::before { content: ""; position: absolute; inset: 2px auto 2px 0; width: calc(var(--v) * 100%); z-index: -1; border-radius: 3px; background: color-mix(in srgb, var(--fc) 22%, transparent); }
.meter.hot::before { background: color-mix(in srgb, var(--tomato) 30%, transparent); }
.meter.wide { display: block; min-width: 200px; text-align: left; padding: 2px 8px; }
.share-cell { width: 45%; }
.budget-bar { display: flex; height: 26px; border: var(--bw) solid var(--edge); border-radius: var(--pill); overflow: hidden; background: var(--surface-2); box-shadow: var(--hard-sm); }
.budget-bar span { display: block; height: 100%; width: calc(var(--w) * 100%); }
.budget-bar .paid { background: var(--series-1); }
.budget-bar .rest { background: repeating-linear-gradient(45deg, var(--mustard) 0 6px, color-mix(in srgb, var(--mustard) 55%, var(--surface)) 6px 12px); }
.budget-legend { margin-top: 12px; font-size: 13px; color: var(--text-2); gap: 18px; }
.budget-legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.budget-legend .key.paid { background: var(--series-1); }
.budget-legend .key.rest { background: var(--mustard); }
.pos-delta { color: var(--good-text); }
.neg-delta { color: var(--neg); }

/* ---- projects ---- */
.proj-summary td.indent { padding-left: 28px; }
tr.clickable { cursor: pointer; }
tr.total-row td { border-top: var(--bw) solid var(--edge); background: var(--surface-2); }
.status-chip { display: inline-block; padding: 1px 8px; border-radius: var(--pill); font-size: 11.5px; font-weight: 560; border: 1.5px solid var(--line-strong); color: var(--text-2); }
.status-chip.paid { background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--actual-ink); border-color: transparent; }
.status-chip.committed { background: var(--warn-wash); color: var(--warn-text); border-color: transparent; }
.status-chip.quoted { background: var(--fc-wash); color: var(--fc-ink); border-color: transparent; }
.status-chip.idea { border-style: dashed; color: var(--text-3); }
table.items td { white-space: nowrap; min-width: 0; }
table.items td:first-child { white-space: normal; min-width: 280px; }
.scenario-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 26px; align-items: start; }
.scenario-intro { flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.scenario-intro .viz-lede { flex: 1 1 420px; min-width: 0; margin: 0; }
.scenario-card.is-main { border-top: 6px solid var(--series-1); }
.scenario-card .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scenario-card .tile { min-width: 0; padding: 12px 14px; }
.scenario-card .tile .value { font-size: clamp(18px, 1.6vw, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-card { color: inherit; text-decoration: none; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s; }
.link-card:hover { transform: translate(-2px, -2px); box-shadow: var(--hard-lg); }
tr.archived td { color: var(--text-3); }
input.search { height: 30px; border-radius: var(--pill); min-width: 220px; }

/* ---- projects as budget lines (web/pages/project-lines.js) ---- */
.notice .spacer { flex: 1; }
.budget-bar .over { background: var(--tomato); }
.diverge .cost-over { left: 50%; background: color-mix(in srgb, var(--tomato) 60%, transparent); }
.diverge .cost-under { right: 50%; background: color-mix(in srgb, var(--series-1) 60%, transparent); }
.diverge-key .k.cost-over { background: color-mix(in srgb, var(--tomato) 60%, transparent); }
.diverge-key .k.cost-under { background: color-mix(in srgb, var(--series-1) 60%, transparent); }
.variance-body { display: flex; flex-direction: column; gap: 18px; }
table.variance-table td.wrap { min-width: 220px; }
.pay-row.locked { grid-template-columns: 78px minmax(0, 1fr) auto; }
dialog.modal.wide { width: min(1080px, calc(100vw - 32px)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-card .hero-bar { margin: 14px 0 4px; max-width: 520px; height: 18px; box-shadow: none; border-color: color-mix(in srgb, var(--side-text) 30%, transparent); background: color-mix(in srgb, var(--side-text) 10%, transparent); }
.hero-card .hero-summary { margin-top: 8px; max-width: 560px; }
table.budget-lines td:first-child { white-space: normal; min-width: 240px; }
table.budget-lines td:nth-child(2) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.budget-lines td.buyer-cell { width: 1%; padding-left: 6px; padding-right: 6px; }
table.budget-lines td.buyer-cell .dd { max-width: 160px; }
/* A menu in a table row: plain text until the row is pointed at, then the house pill. */
.dd.dd-quiet { border-color: transparent; background: transparent; padding-left: 8px; }
.dd.dd-quiet .dd-chev { opacity: 0.45; }
tr:hover .dd.dd-quiet, .pay-row:hover .dd.dd-quiet, .dd.dd-quiet:focus-visible, .dd.dd-quiet[aria-expanded="true"] { border-color: var(--edge); background: var(--surface); }
tr:hover .dd.dd-quiet .dd-chev, .pay-row:hover .dd.dd-quiet .dd-chev { opacity: 1; }
.pay-row .dd { max-width: 260px; }
table.project-payments td:nth-child(4) { white-space: normal; min-width: 160px; max-width: 280px; }
table.budget-lines .chev-btn { display: inline-block; width: 22px; margin-right: 2px; padding: 0; border: 0; background: none; color: var(--text-3); font: inherit; cursor: pointer; }
table.budget-lines tr.line-row.open td { background: color-mix(in srgb, var(--mustard) 9%, var(--surface)); border-bottom-color: transparent; }
table.budget-lines tr.line-row .status-chip { margin-left: 8px; }
table.budget-lines td.bar-cell { width: 12%; min-width: 80px; }
table.budget-lines th, table.budget-lines td { padding-left: 10px; padding-right: 10px; }
.line-bar { display: block; height: 10px; border-radius: var(--pill); border: 1.5px solid var(--edge); background: var(--surface-2); position: relative; overflow: hidden; }
.line-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--mustard); }
.line-bar.done::before { background: var(--series-1); }
.line-bar.over::before { background: var(--tomato); }
table.data tr.line-detail:hover td, table.data tr.line-detail td { background: color-mix(in srgb, var(--mustard) 5%, var(--surface)); white-space: normal; }
.pay-list { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 6px 24px; }
.pay-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto auto 32px; gap: 12px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--grid); }
.pay-row .pay-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-row .pay-amt { text-align: right; white-space: nowrap; }
.pay-row .pay-amt .link-button { font-size: 13.5px; color: var(--text); text-decoration-style: dotted; }
.pay-list > .row { margin-top: 6px; gap: 8px; }
table.budget-lines tr.loose td:first-child em { color: var(--text-2); }
.find-row { gap: 12px; justify-content: flex-end; }
.empty-project .card-body { padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.empty-project h2 { margin: 0; }
.empty-project p { margin: 0; max-width: 640px; }
.doc-list { display: flex; flex-direction: column; gap: 14px; }
.doc { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
.doc:last-child { border-bottom: 0; padding-bottom: 0; }
.doc .doc-name { font-weight: 620; color: var(--text); text-decoration: none; }
.doc .doc-name:hover { text-decoration: underline; }
.doc .link-button { align-self: flex-start; }
table.suggest-table td:first-child { min-width: 78px; }
table.suggest-table td.wrap { min-width: 240px; width: 50%; }
/* The quote: drop it, wait, check it. */
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px; text-align: center; border: 2px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease-out); }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.over { border-color: var(--edge); background: color-mix(in srgb, var(--mustard) 14%, var(--surface)); transform: translate(-1px, -1px); }
.drop-zone .drop-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mustard); color: var(--on-accent); border: var(--bw) solid var(--edge); box-shadow: var(--hard-sm); }
.drop-zone .drop-icon svg { width: 22px; height: 22px; }
.reading { display: flex; gap: 16px; align-items: center; padding: 26px 4px; }
.reading-dots { display: inline-flex; gap: 6px; }
.reading-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--tomato); border: 1.5px solid var(--edge); animation: reading 1.1s var(--ease-out) infinite; }
.reading-dots i:nth-child(2) { animation-delay: 0.15s; background: var(--mustard); }
.reading-dots i:nth-child(3) { animation-delay: 0.3s; background: var(--series-1); }
@keyframes reading { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .reading-dots i { animation: none; } }
.review-opts { flex-wrap: wrap; gap: 12px 28px; align-items: flex-end; }
.review-opts p { margin: 0; }
.review-wrap { max-height: none; }
table.review-lines td { white-space: normal; vertical-align: top; padding: 6px 8px; }
table.review-lines th:first-child, table.review-lines td:first-child { width: 34px; min-width: 0; padding-top: 12px; }
table.review-lines td.what { min-width: 300px; width: 52%; }
table.review-lines td .input { height: 32px; width: 100%; }
table.review-lines td .input.num { width: 116px; text-align: right; font-variant-numeric: tabular-nums; }
table.review-lines td.cat-area { white-space: nowrap; }
table.review-lines td .input.area { margin-left: 8px; width: 170px; vertical-align: middle; }
dialog .field > .seg { align-self: flex-start; }
table.review-lines tr.off td { opacity: 0.45; }
table.review-lines tr.off td:first-child { opacity: 1; }
.quote-info { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
/* Picking payments. */
/* The controls stay put and only the list scrolls, under headings that stay put too. */
dialog.picker .modal-body { height: min(72vh, 820px); max-height: none; overflow: hidden; padding-bottom: 8px; }
.pick-head { display: flex; flex-direction: column; gap: 8px; background: var(--surface); padding-bottom: 6px; }
.pick-head input.pick-search { flex: 1 1 320px; min-width: 240px; height: 36px; font-size: 14px; }
dialog.picker .modal-body > .pick-wrap { flex: 1 1 auto; min-height: 0; flex-shrink: 1; overflow: auto; }
.modal-head .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pick-wrap { max-height: none; }
table.pick-table thead th { position: sticky; top: 0; z-index: 3; }
table.pick-table tbody tr { cursor: pointer; }
table.pick-table th:first-child, table.pick-table td:first-child { width: 34px; min-width: 0; }
table.pick-table tr.picked td { background: color-mix(in srgb, var(--series-1) 12%, var(--surface)); }
table.pick-table td.wrap { min-width: 260px; }
.chip-suggest, .chip-other { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: var(--pill); font-size: 11.5px; }
.chip-suggest { background: color-mix(in srgb, var(--series-1) 16%, transparent); color: var(--actual-ink); }
.chip-other { margin-left: 6px; background: var(--warn-wash); color: var(--warn-text); }
.pick-empty { padding: 24px 4px; }

/* ---- property plan ---- */
table.plan th, table.plan td { min-width: 150px; }
table.plan th:first-child, table.plan td:first-child { min-width: 180px; }
table.plan thead th { text-align: left; text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 13px; }
table.grid.plan input.cell-input { width: 100%; height: 30px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 7px; background: var(--surface); text-align: right; font: inherit; font-variant-numeric: tabular-nums; }
table.grid.plan input.cell-input:focus { outline: none; border-color: var(--edge); box-shadow: 2px 2px 0 var(--fc); }
table.grid.plan input.cell-input.name { text-align: left; font-weight: 620; width: calc(100% - 34px); }
table.grid.plan thead th:first-child input.cell-input { width: 110px; margin-left: 6px; }
table.plan .flag-box { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.icon-btn { width: 28px; height: 28px; margin-left: 4px; display: inline-grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--text-3); cursor: pointer; vertical-align: middle; }
.icon-btn:hover { background: var(--crit-wash); color: var(--crit); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---- forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-heading { margin-top: 8px; padding-top: 12px; border-top: 1.5px dashed var(--line-strong); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.form-heading span { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text-3); }
.field .hint, .check-field .hint { font-size: 12px; color: var(--text-3); }
.field .input.num { text-align: right; font-variant-numeric: tabular-nums; }
.affix { display: flex; align-items: center; }
.affix > span { height: var(--ctl-h); display: grid; place-items: center; padding: 0 10px; border: var(--bw) solid var(--edge); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2); color: var(--text-2); }
.affix .input { flex: 1; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.check-field { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.modal-foot .spacer { flex: 1; }
.field-error { color: var(--crit); font-size: 13px; }
.file-input { font-size: 13px; }
.toast-action { margin-left: 12px; background: var(--mustard); color: var(--on-accent); border: 0; border-radius: var(--pill); padding: 2px 10px; font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; }
code { font-family: var(--mono); font-size: 12px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .budget-wrap { max-height: none; }
  table.budget .name-col { min-width: 150px; }
  .legend-inline { display: none; }
  .scenario-cards { grid-template-columns: 1fr; }
  input.search { min-width: 0; width: 100%; }
  .pay-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .pay-row .dd, .pay-row .icon-btn { grid-column: 2 / -1; justify-self: start; }
  .pay-list { padding-left: 0; max-width: calc(100vw - 90px); }
  table.budget-lines td.bar-cell { min-width: 70px; }
  table.review-lines td.what { min-width: 200px; }
  dialog.modal.wide .modal-foot { flex-wrap: wrap; }
  dialog.modal.wide .modal-foot > .muted:first-child { flex: 1 0 100%; }
  dialog.modal.wide .modal-head { flex-wrap: wrap; }
  dialog.modal.wide .modal-foot .dd { max-width: 100%; min-width: 0; }
  table.pick-table th:nth-child(4), table.pick-table td:nth-child(4) { display: none; }
  /* On a phone the picker fills the screen: controls, then the list, then the buttons, all in view. */
  dialog.picker[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 16px); }
  dialog.picker .modal-head, dialog.picker .modal-body, dialog.picker .modal-foot { padding-left: 16px; padding-right: 16px; }
  dialog.picker .modal-head { padding-top: 16px; }
  dialog.picker .modal-body { height: auto; flex: 1 1 auto; min-height: 0; }
  dialog.picker .modal-foot { padding-top: 10px; padding-bottom: 14px; }
  table.pick-table th, table.pick-table td { padding: 8px 6px; }
  table.pick-table td:nth-child(2) { white-space: normal; width: 52px; font-size: 12.5px; }
  table.pick-table td.wrap { min-width: 0; word-break: break-word; }
  table.pick-table td.num { white-space: nowrap; }
  .recon-gap { width: 100%; }
}

/* The ticker on the overview reads the months ahead. */
.ticker::before { content: "Ahead"; }

/* Seven-figure tiles in a hero: a size down so they fit their column. */
.hero-card.tight .tile .value { font-size: 23px; }
.hero-card.tight .hero-figure .value { font-size: 88px; }
@media (max-width: 1300px) { .hero-card.tight .hero { grid-template-columns: 1fr; } .hero-card.tight .hero::before { display: none; } .hero-card.tight .hero > .tiles { grid-column: 1; grid-row: 2; } }
@media (max-width: 900px) { .hero-card .hero-figure .value { font-size: 56px; } }
.grid-2 table.data.list td:first-child { min-width: 150px; }
.grid-2 table.data.list td { min-width: 0; }
.grid-2 > * { min-width: 0; }
@media (max-width: 900px) { .hero-card.tight .hero-figure .value, .hero-card .hero-figure .value { font-size: 48px; } }

/* The logo's safe wheel turns when you reach for it. */
.brand-mark .vault-wheel { transform-origin: 16px 14.5px; transition: transform 0.9s var(--ease-spring); }
.brand:hover .brand-mark { transform: scale(1.06); }
.brand:hover .brand-mark .vault-wheel { transform: rotate(120deg); }
@media (prefers-reduced-motion: reduce) { .brand-mark .vault-wheel { transition: none; } }

/* Closed months: from the statements (click through), or planned outside them. */
table.budget td.cell.from-st { cursor: pointer; }
table.budget td.cell.from-st:hover { text-decoration: underline; text-underline-offset: 3px; }
table.budget td.cell.outside { color: var(--text-3); font-style: italic; }
.nav-badge { margin-left: auto; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--tomato); color: #fff8ec; font-family: var(--mono); font-size: 10px; display: grid; place-items: center; }
.nav a[aria-current="page"] .nav-badge { background: var(--on-accent); color: var(--mustard); }
/* Statements */
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
table.coverage td.cov { text-align: center; font-family: var(--mono); font-size: 11px; min-width: 44px; }
table.coverage td.cov.ok { color: var(--actual-ink); background: var(--actual); font-weight: 700; }
table.coverage td.cov.tx { color: var(--text-2); background: var(--mixed); }
table.coverage td.cov.missing { background: var(--warn-wash); color: var(--warn-text); font-weight: 700; }
table.coverage td.cov.none { color: var(--text-3); }
.plain-list { margin: 0; padding-left: 18px; }
/* Sorting */
.sort-list { display: flex; flex-direction: column; gap: 14px; }
.sort-card { padding: 14px 18px; box-shadow: var(--hard-sm); }
.sort-top { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.sort-who { min-width: 0; flex: 1; }
.sort-card { min-width: 0; overflow: hidden; }
.sort-who .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sort-total { font-family: var(--display); font-size: 24px; font-weight: 600; text-align: right; white-space: nowrap; }
.sort-controls { margin-top: 10px; gap: 8px; }
.suggest-block { margin-bottom: 28px; }
.suggest-row { align-items: center; flex-wrap: wrap; }
.suggest-what { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.suggest-guess { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 6px; background: var(--warn-wash); color: var(--warn-text); border-radius: 3px; }
.section-title { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.small-input { height: 28px; width: 220px; border-radius: var(--pill); font-size: 12.5px; }
.kind-chip { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11px; border: 1.5px solid var(--line-strong); color: var(--text-3); white-space: nowrap; }
.kind-chip.transfer, .kind-chip.payment, .kind-chip.debt-payment { border-style: dashed; }
.kind-chip.interest, .kind-chip.fee { color: var(--neg); border-color: currentColor; }
@media (max-width: 900px) { .small-input { width: 100%; } .sort-top { flex-direction: column; } }

/* Monthly close */
.close-nav { margin-bottom: 4px; }
.close-month { font-family: var(--display); font-size: 22px; padding: 0 6px; }
.close-steps .check { align-items: center; cursor: default; }
.close-steps .check:hover { transform: none; box-shadow: none; }
.close-step { flex: 1; min-width: 0; }
td.num.worse { color: var(--neg); }
td.num.better { color: var(--actual-ink); }
tr.flag-row td { background: var(--warn-wash); }
/* Decisions */
.decision-form { align-items: flex-end; gap: 14px; margin-bottom: 14px; }
.decision-form .field { display: flex; flex-direction: column; gap: 4px; }
.decision-form .field .label { font-size: 12px; color: var(--text-3); }
.affix.right > span { border: var(--bw) solid var(--edge); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.affix.right .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

/* ---- the assistant (copied from Prophit's, plus the changed-files row) ---- */
.ai-fab { position: fixed; right: 22px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; z-index: 40; color: #fff;
  background: var(--tomato); color: #fff8ec; border: var(--bw) solid var(--edge); box-shadow: var(--hard); display: grid; place-items: center; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s; }
.ai-fab:hover { transform: translate(-2px, -2px) rotate(-10deg); box-shadow: 6px 6px 0 var(--drop); }
.ai-fab:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--drop); }
.ai-fab .ai-sparkle { width: 24px; height: 24px; }
.ai-fab.open { transform: rotate(0); }
.ai-fab.ping::after { content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
.ai-panel { position: fixed; right: 22px; bottom: 86px; width: 420px; height: min(680px, calc(100vh - 120px)); z-index: 45; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw) solid var(--edge); border-radius: 18px; box-shadow: var(--hard-lg); overflow: hidden; }
.ai-panel[hidden] { display: none; }
.ai-panel.wide { top: 0; right: 0; bottom: 0; height: auto; width: 520px; border-radius: 0; border-width: 0 0 0 1px; }
@media (min-width: 1100px) { body.ai-wide .shell { margin-right: 520px; } }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); }
.ai-avatar, .ai-welcome-mark { color: #fff8ec; border-radius: 50%; display: grid; place-items: center; background: var(--tomato); border: var(--bw) solid var(--edge); }
.ai-avatar { width: 30px; height: 30px; flex: none; }
.ai-avatar .ai-sparkle { width: 16px; height: 16px; }
.ai-title { min-width: 0; }
.ai-title-name { font-weight: 560; }
.ai-title-sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ai-icon { border: 0; background: none; color: var(--text-3); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.ai-icon:hover { background: var(--surface-2); color: var(--text); }
.ai-icon svg { width: 18px; height: 18px; }
.ai-icon.small { width: 26px; height: 26px; }
.ai-icon.confirm { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.ai-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ai-welcome, .ai-setup { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 4px; }
.ai-welcome-mark { width: 52px; height: 52px; }
.ai-welcome-mark .ai-sparkle { width: 26px; height: 26px; }
.ai-welcome-hi { font-family: var(--display); font-variation-settings: "SOFT" 100; font-size: 30px; font-weight: 640; letter-spacing: -0.02em; }
.ai-empty-sub { color: var(--text-2); font-size: 13.5px; max-width: 330px; }
.ai-suggest { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.ai-suggestion { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px; }
.ai-suggestion { border: var(--bw) solid var(--edge) !important; transition: transform 0.15s var(--ease-out), box-shadow 0.15s; }
.ai-suggestion:hover { background: var(--mustard); color: var(--on-accent); box-shadow: var(--hard-sm); transform: translate(-1px, -1px); }
.ai-setup { text-align: left; align-items: stretch; }
.ai-setup .ai-welcome-mark { align-self: center; }
.ai-setup strong { text-align: center; font-size: 15px; }
.ai-setup ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.ai-setup p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.ai-setup code, .ai-text code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.ai-msg.user { align-self: flex-end; max-width: 85%; }
.ai-bubble { background: var(--surface-3); color: var(--text); padding: 9px 14px; border-radius: 18px 18px 6px 18px; white-space: pre-wrap; font-size: 14px; }
.ai-msg.assistant { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.ai-text p { margin: 0 0 8px; }
.ai-text p:last-child { margin-bottom: 0; }
.ai-text ul, .ai-text ol { margin: 0 0 8px; padding-left: 20px; }
.ai-text a { color: var(--brand-ink); }
.ai-text .md-table { overflow-x: auto; margin: 4px 0 8px; }
.ai-text table { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ai-text th, .ai-text td { border-bottom: 1px solid var(--grid); padding: 4px 8px; text-align: left; white-space: nowrap; }
.ai-text td.num { text-align: right; }
.ai-text th { color: var(--text-2); font-weight: 600; }
.ai-steps { font-size: 12px; color: var(--text-3); }
.ai-steps summary { cursor: pointer; list-style: none; }
.ai-steps summary::before { content: "▸ "; }
.ai-steps[open] summary::before { content: "▾ "; }
.ai-steps ul { margin: 4px 0 0; padding-left: 16px; }
.ai-typing { display: flex; gap: 4px; padding: 4px 0; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: ai-blink 1.2s infinite both; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-typing span { animation: none; opacity: 0.6; } .ai-fab { transition: none; } }
.ai-error { color: var(--crit); font-size: 13px; }
.ai-note { color: var(--text-3); font-size: 12.5px; }
.ai-proposal { border: 1px solid var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.ai-proposal-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.ai-proposal-tag { font-weight: 560; color: var(--brand-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.ai-proposal-ver { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-proposal-sum { font-weight: 600; }
.ai-proposal-meta, .ai-proposal-effect { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ai-proposal-warn { font-size: 12.5px; color: var(--warn, var(--text-2)); }
.ai-proposal-actions { display: flex; gap: 8px; margin-top: 4px; }
.ai-list-head { display: flex; justify-content: space-between; align-items: center; }
.ai-chats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-chats li { display: flex; align-items: center; gap: 4px; }
.ai-chat-open { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; padding: 9px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.ai-chat-open:hover { background: var(--surface-2); }
.ai-chat-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chat-when { color: var(--text-3); font-size: 12px; flex: none; }
.ai-foot { padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.ai-box { border: 1px solid var(--line-strong); border-radius: 18px; padding: 8px 8px 6px 12px; background: var(--surface); }
.ai-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.ai-input { width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; max-height: 160px; }
.ai-box-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-hint { font-size: 11.5px; color: var(--text-3); }
.ai-send { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.ai-send svg { width: 16px; height: 16px; }
.ai-send.stop { background: var(--text); color: var(--surface); }
@media (max-width: 700px) {
  .ai-panel, .ai-panel.wide { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
  .ai-fab { right: 16px; bottom: 16px; }
  .ai-panel:not([hidden]) + .ai-fab { display: none; }
  .ai-hint { display: none; }
}
.ai-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.ai-files-label { color: var(--text-3); }
.ai-files code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }

/* ---- project: tracker against the bank, equity release ---- */
.diverge-cell { width: 28%; min-width: 140px; }
.diverge { position: relative; height: 14px; }
.diverge::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1.5px solid var(--line-strong); }
.diverge span { position: absolute; top: 1px; bottom: 1px; width: calc(var(--v) * 50%); border-radius: 3px; }
.diverge .under { right: 50%; background: color-mix(in srgb, var(--tomato) 60%, transparent); }
.diverge .over { left: 50%; background: color-mix(in srgb, var(--series-1) 60%, transparent); }
.diverge-key { font-weight: 500; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.diverge-key .k { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 6px; vertical-align: -1px; }
.diverge-key .k.under { background: var(--tomato); }
.diverge-key .k.over { background: var(--series-1); }
.sub-head { margin: 22px 0 8px; font-size: 15px; }
.release-inputs { gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.release-inputs .field { display: flex; flex-direction: column; gap: 4px; }
.release-inputs .field .label { font-size: 12px; color: var(--text-2); font-weight: 560; }
.release-inputs .input { width: 180px; }
table.recon { width: 100%; }
@media (max-width: 640px) {
  table.recon th:last-child, table.recon td.diverge-cell { display: none; }
}

/* ---- business: by who ---- */
table.by-who { width: 100%; }
table.by-who .chev { display: inline-block; width: 16px; color: var(--text-3); }
table.by-who tr.sub-row td { background: var(--surface-2); font-size: 13px; }
table.by-who tr.sub-row td.indent { padding-left: 34px; }
@media (max-width: 640px) {
  .toggle { white-space: normal; }
  table.by-who th:last-child, table.by-who td.share-cell { display: none; }
}

/* ---- plan: projects into the budget ---- */
.plan-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.plan-events li { display: grid; grid-template-columns: 64px 18px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); position: relative; }
.plan-events li:last-child { border-bottom: 0; }
.plan-events .ev-month { font-family: var(--mono); font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.plan-events .ev-dot { width: 12px; height: 12px; border-radius: 50%; border: var(--bw) solid var(--edge); background: var(--surface); }
.plan-events .ev-release .ev-dot { background: var(--series-1); }
.plan-events .ev-purchase .ev-dot { background: var(--tomato); }
.plan-events .ev-payback .ev-dot { background: var(--mustard); }
.plan-events .ev-rent .ev-dot { background: var(--fc); }
.plan-events .ev-label { font-weight: 560; }
.plan-events .ev-amount { font-variant-numeric: tabular-nums; }
.plan-fields { gap: 14px 16px; align-items: flex-start; margin-bottom: 16px; }
.plan-fields .field .label { font-family: var(--mono); font-size: 10.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.12em; }
.plan-fields .field .hint { font-size: 11.5px; color: var(--text-3); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.fact { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px dashed var(--line-strong); padding: 3px 0; }
.fact span { color: var(--text-2); }
.fact strong { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.fact .strong-fig { color: var(--series-1); font-size: 15px; }
.fact .muted { color: var(--text-3); font-weight: 500; }
table.paybacks { width: 100%; }
table.paybacks .input.num { width: 120px; }
table.paybacks td { vertical-align: middle; }
.warn-text { color: var(--warn-text); }
.plan-table { max-height: 560px; overflow: auto; }
.plan-table tr.plan-ev-row td { background: var(--warn-wash); }
.plan-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.chart .viz-event, svg .viz-event { stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 3 3; }
svg .viz-event-label { fill: var(--text); font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
@media (max-width: 640px) {
  .plan-events li { grid-template-columns: 54px 14px 1fr; }
  .plan-events .ev-amount { grid-column: 3; justify-self: start; }
  /* Each payback as a little card: who and remove on top, when / how much / left beneath. */
  table.paybacks thead { display: none; }
  table.paybacks, table.paybacks tbody { display: block; width: 100%; }
  table.paybacks td { min-width: 0; }
  table.paybacks td .dd { max-width: 100%; }
  table.paybacks tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.paybacks tbody td { padding: 0; border: 0; text-align: left; }
  table.paybacks td:nth-child(1) { grid-column: 1 / 3; }
  table.paybacks td:nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; }
  table.paybacks td:nth-child(4) { display: none; }
  table.paybacks td:nth-child(5) { font-size: 12px; justify-self: end; }
  table.paybacks .input.num { width: 100%; }
  .plan-inputs { grid-template-columns: 1fr; }
}
.plan-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--pill); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); text-decoration: none; vertical-align: 1px; }
.plan-chip:hover { background: var(--warn-wash); color: var(--text); }
.notice.crit { background: var(--crit-wash); color: var(--text); }
.notice.crit .icon { background: var(--crit); color: var(--surface); font-style: normal; }

/* ---- plan v2: parts, the household with and without, stress ---- */
.better { color: var(--actual-ink); }
.worse { color: var(--neg); }
.plan-events .ev-works .ev-dot { background: var(--s-2); }
.plan-events .ev-let .ev-dot { background: var(--actual-ink); }
.plan-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-jump a { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); text-decoration: none; padding: 5px 11px; border: var(--bw) solid var(--edge); border-radius: var(--pill); background: var(--surface); box-shadow: var(--hard-sm); }
.plan-jump a:hover { background: var(--warn-wash); color: var(--text); }
.section-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; scroll-margin-top: 16px; }
.section-title-row .section-title { margin: 0; }
.card[id^="plan-"] { scroll-margin-top: 16px; }
.mini-title { font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); margin: 0 0 8px; }
.plan-impact-grid { margin-top: 18px; align-items: start; }
table.plan-effects td { vertical-align: top; }
table.plan-effects td.wrap { min-width: 140px; }
tr.muted-row td { color: var(--text-2); }
tr.strong-row td { font-weight: 600; background: var(--surface-2); }
table.stress td { vertical-align: top; }
td.better, td.worse { font-weight: 600; }
.plan-project.is-off { opacity: 0.86; }
.plan-project.is-off .card-head { background: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--line) 60%, transparent) 8px 9px); }
.plan-part { padding: 14px 0 16px; border-top: 1px dashed var(--line-strong); }
.plan-part:first-of-type { border-top: 0; padding-top: 2px; }
.plan-part-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.plan-part-head h3 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; }
.plan-part.is-off .plan-part-head h3 { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-returns .facts { background: var(--warn-wash); }
.plan-add { gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-strong); align-items: center; flex-wrap: wrap; }
.draw-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.draw-chip { font-size: 12px; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); }
@media (max-width: 640px) {
  .plan-part-head { flex-wrap: wrap; }
  .plan-jump a { padding: 4px 9px; }
}
.tile .sub.better { color: var(--actual-ink); }
.tile .sub.worse { color: var(--neg); }

/* ---- month end: the four steps, on every page that does them ---- */
.monthend { display: grid; gap: 10px; }
.monthend:empty { display: none; }
.monthend-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.monthend-kicker { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); }
.monthend-head strong { font-family: var(--display); font-size: 20px; font-weight: 600; }
.monthend-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--bw) solid var(--edge); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--hard-sm); overflow: hidden; }
.monthend-step { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; text-align: left; background: none; border: 0; border-left: var(--bw) solid var(--edge); cursor: pointer; color: var(--text); font: inherit; min-width: 0; transition: background-color 0.15s; }
.monthend-step:first-child { border-left: 0; }
.monthend-step:hover { background: var(--hover); }
.monthend-step.here { background: var(--warn-wash); box-shadow: inset 0 -3px 0 var(--mustard); }
.monthend-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: var(--bw) solid var(--edge); font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--surface-2); }
.monthend-step.done .monthend-mark { background: var(--series-1); color: #fff8ec; border-color: var(--series-1); }
.monthend-step.next .monthend-mark { background: var(--mustard); color: var(--on-accent); }
.monthend-text { display: grid; gap: 2px; min-width: 0; }
.monthend-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: 13.5px; }
.monthend-label .nav-badge { margin-left: 0; }
.monthend-detail { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.monthend.compact .monthend-step { padding: 9px 12px; align-items: center; }
@media (max-width: 760px) {
  .monthend-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monthend-step:nth-child(3) { border-left: 0; }
  .monthend-step:nth-child(n + 3) { border-top: var(--bw) solid var(--edge); }
}
.sort-filters { gap: 10px; align-items: center; flex-wrap: wrap; }
.sort-search { width: 240px; max-width: 100%; }
.suggest-head { align-items: flex-start; gap: 14px; }
.suggest-head .viz-lede { flex: 1 1 320px; margin: 0; }
kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--text); }
.sort-card.answering { opacity: 0.5; transition: opacity 0.15s; }
@media (max-width: 640px) { .kbd-hint { display: none; } .sort-search { width: 100%; } }

/* ---- jump to anything (Cmd/Ctrl + K) ---- */
.jump-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 11px; border: var(--bw) solid var(--edge); border-radius: var(--pill); background: var(--surface); color: var(--text-2); cursor: pointer; font: inherit; font-size: 13px; box-shadow: var(--hard-sm); margin-right: 12px; }
.jump-btn:hover { color: var(--text); background: var(--hover); }
.jump-btn svg { width: 15px; height: 15px; }
.jump-btn kbd { font-size: 10px; }
dialog.palette { padding: 0; width: min(620px, calc(100vw - 32px)); margin-top: 12vh; border: var(--bw) solid var(--edge); border-radius: var(--radius); background: var(--surface); box-shadow: var(--hard); }
.palette-box { display: grid; }
.palette-input { border: 0; border-bottom: var(--bw) solid var(--edge); border-radius: 0; height: 52px; font-size: 16px; padding: 0 18px; background: var(--surface); box-shadow: none; }
.palette-input:focus { outline: none; box-shadow: none; }
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 55vh); overflow: auto; }
.palette-list li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.palette-list li.on { background: var(--warn-wash); box-shadow: inset 3px 0 0 var(--mustard); }
.palette-kind { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }
.palette-label { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.palette-foot { display: flex; gap: 4px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .jump-btn .jump-text, .jump-btn kbd { display: none; } .jump-btn { padding: 0 9px; margin-right: 6px; } .palette-hint { display: none; } .palette-list li { grid-template-columns: 64px minmax(0, 1fr); } }
.monthend.compact .monthend-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.monthend.compact .monthend-step:nth-child(3) { border-left: 0; }
.monthend.compact .monthend-step:nth-child(n + 3) { border-top: var(--bw) solid var(--edge); }
.monthend-next { font-size: 13px; color: var(--text-2); }
.overview-status { align-items: stretch; }
.overview-status > .card { display: flex; flex-direction: column; }
.monthend-behind { color: var(--warn-text); font-size: 12px; }

/* ---- a period to look at: preset chips and from / to ---- */
.range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.range-span { display: inline-flex; align-items: center; gap: 6px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: var(--bw) solid var(--edge); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--hard-sm); }
.filters .spacer { flex: 1; }
.card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable[aria-sort="ascending"]::after { content: " ↑"; }
th.sortable[aria-sort="descending"]::after { content: " ↓"; }
th.sortable[aria-sort="none"]:hover::after { content: " ↕"; opacity: 0.5; }
th.sortable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--hover); }
.wrap-row { flex-wrap: wrap; gap: 8px; }

/* ---- accounts: the book of balances on the 1st ---- */
.book-wrap { max-height: 72vh; overflow: auto; }
table.book { border-collapse: separate; border-spacing: 0; }
table.book th, table.book td { white-space: nowrap; }
table.book .book-name { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 240px; max-width: 300px; white-space: normal; box-shadow: 1px 0 0 var(--line); }
table.book thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
table.book thead th.book-name { z-index: 3; }
table.book thead th { background: var(--surface-3); }
table.book thead th.today { background: var(--mustard); color: var(--on-accent); }
/* Bold print: each type is an ink band, its name in mustard type. */
table.book tr.book-section td { background: var(--block); color: var(--side-text); font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding-top: 11px; padding-bottom: 11px; border-top: var(--bw) solid var(--edge); }
table.book tr.book-section td.book-name { background: var(--block); color: var(--mustard); font-family: var(--display); font-size: 16px; font-weight: 650; letter-spacing: 0.01em; box-shadow: none; }
table.book tr.book-section td.is-neg { color: #ef6a5f; }
table.book tr.book-section .fold .count { color: color-mix(in srgb, var(--side-text) 55%, transparent); font-family: var(--mono); }
table.book tr.book-section .nav-chev { border-color: var(--mustard); }
table.book tr:nth-child(even of [data-row]) td { background: var(--surface-2); }
table.book td.now { background: color-mix(in srgb, var(--mustard) 16%, var(--surface)); font-weight: 650; }
table.book tr:nth-child(even of [data-row]) td.now { background: color-mix(in srgb, var(--mustard) 20%, var(--surface-2)); }
table.book tr[data-row]:hover td { background: color-mix(in srgb, var(--mustard) 12%, var(--surface)); }
table.book tr.book-section td.now { background: color-mix(in srgb, var(--mustard) 22%, var(--block)); }
.book-bang { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: var(--mustard); color: var(--on-accent); font-family: var(--display); font-weight: 800; font-size: 12px; line-height: 1; margin-left: 6px; box-shadow: 1.5px 1.5px 0 var(--edge); cursor: pointer; }
button.book-bang:hover { transform: translate(-1px, -1px); box-shadow: 2.5px 2.5px 0 var(--edge); }
tr.book-section .book-bang { cursor: default; box-shadow: none; }
.book-bang-n { font-family: var(--mono); font-size: 11px; color: var(--mustard); margin-left: 4px; }
.book-who { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px; font-size: 10.5px; font-weight: 700; color: #fff8ec; box-shadow: 1.5px 1.5px 0 var(--edge); }
.book-who.p-0 { background: var(--p-1); }
.book-who.p-1 { background: var(--p-2); }
.book-who.p-2 { background: var(--p-3); }
.book-who.none { background: none; box-shadow: none; }
table.book tr.book-total td { font-weight: 700; border-top: var(--bw) solid var(--edge); background: var(--warn-wash); }
table.book tr.book-total td.book-name { background: var(--warn-wash); z-index: 4; }
/* The total stays in view at the foot of the table, clear of the scrollbar. */
table.book tr.book-total td { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -1px 0 var(--edge); }
table.book tr.book-section td.book-name { max-width: 320px; }
table.book tr.book-section .fold { max-width: 100%; min-width: 0; }
.book-section-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
table.book tr.recon-row td.book-name { padding-left: 24px; }
table.book tr.outside-row td { color: var(--text-2); }
table.book td.cell { cursor: cell; padding: 8px 14px; }
table.book td.cell:has(.cell-input) { padding: 0; }
table.book td.cell:hover { outline: 1.5px solid var(--edge); outline-offset: -1.5px; }
table.book td.cell .cell-input { width: 100%; min-width: 90px; height: 28px; text-align: right; border: 0; background: var(--surface); font: inherit; outline: 2px solid var(--focus); }
td.src-estimate { text-decoration: underline dotted var(--mustard) 2px; text-underline-offset: 4px; }
td.src-entered { font-weight: 650; }
tr.flash td { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--warn-wash); } }
.book-flag { margin-left: 8px; padding: 0 6px; border-radius: var(--pill); background: var(--mustard); color: var(--on-accent); font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; vertical-align: 1px; cursor: help; }
.book-legend { display: inline-flex; gap: 6px; }
.book-legend .src { padding: 2px 8px; border-radius: var(--pill); border: 1px solid var(--line-strong); }
.book-legend .src.entered { font-weight: 650; }
.book-legend .src.estimate { text-decoration: underline dotted var(--mustard) 2px; text-underline-offset: 4px; }
/* the type tiles, toggled on and off; the call to action; one line per account */
.book-cta { flex-wrap: wrap; }
.book-cta .spacer { flex: 1; }
.book-cta-text { min-width: 0; }
.book-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.book-tile { text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, border-color 0.15s, background-color 0.15s; }
.book-tile { padding: 10px 12px; }
.book-tile .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-tile .value { font-size: 21px; margin-top: 4px; }
.book-tile .sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.book-tile .sub .book-flag { margin-left: 4px; cursor: inherit; }
.book-tile:hover { border-color: var(--edge); }
.book-tile.on { background: var(--surface); border-color: var(--edge); box-shadow: 3px 3px 0 var(--mustard); transform: translate(-1px, -1px); }
.book-tile.on .label { color: var(--text); }
.book-tile.empty { opacity: 0.5; }
.book-toggles { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.book-toggle { height: 30px; padding: 0 13px; border-radius: var(--pill); border: var(--bw) solid var(--line-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer; }
.book-toggle:hover { border-color: var(--edge); color: var(--text); }
.book-toggle[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--edge); }
.book-toggle.flagged[aria-pressed="true"], .book-cta .book-toggle[aria-pressed="true"] { background: var(--mustard); color: var(--on-accent); }
table.book .book-name { white-space: nowrap; min-width: 280px; max-width: 320px; }
.book-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.book-line .line-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.book-line .spacer { flex: 1; }
.book-line .book-flag { margin-left: 2px; border: 0; cursor: pointer; flex: none; }
.book-line .who-chip { flex: none; }
table.book tr.book-section .book-flag { cursor: default; }
dialog.book-detail { width: min(620px, calc(100vw - 32px)); }
.book-detail .modal-foot { flex-wrap: wrap; }
.book-detail-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.book-detail-top.single { grid-template-columns: 1fr; }
.book-detail-spark { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.book-detail-spark svg { width: 100%; height: 64px; }
.book-detail-spark .viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.book-detail-facts { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 640px) { table.book .book-name { min-width: 170px; max-width: 190px; } table.book .book-line { max-width: 162px; } table.book tr.book-section .book-line { max-width: 170px; } .book-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .book-tile { padding: 10px 12px; } .book-tile .value { font-size: 20px; } .book-detail-top { grid-template-columns: 1fr; } .book-cta .btn { width: 100%; } }
.nowrap { white-space: nowrap; }