/* Budget app styles. Mobile first: the base rules are for a phone; wider screens add to them. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.2bf3d951bf9d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c2330;
  --muted: #5d6675;
  --border: #d9dee6;
  --accent: #1f6feb;
  --accent-text: #ffffff;
  --income: #12784a;
  --expense: #1c2330;
  --refund: #9a5b00;
  --refund-bg: #fff4e0;
  --accent-bg: #e8f0fe;
  --error: #b42318;
  --error-bg: #fdecea;
  --radius: 10px;
  --gap: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161d;
    --surface: #1b212b;
    --text: #e8ebf0;
    --muted: #9aa3b2;
    --border: #2e3644;
    --accent: #4c8dff;
    --accent-text: #0b0f15;
    --income: #4cc38a;
    --expense: #e8ebf0;
    --refund: #f0b45a;
    --refund-bg: #3a2a10;
    --accent-bg: #16284a;
    --error: #ff8a80;
    --error-bg: #3a1714;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px; /* 16px stops phones zooming into form fields */
  line-height: 1.45;
}

/* Money and dates line up in columns. */
.num { font-variant-numeric: tabular-nums; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 12px var(--gap);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.topbar h1 { margin: 0; font-size: 18px; font-weight: 650; }

.topbar nav { display: flex; gap: 14px; font-size: 15px; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.mockup-note {
  margin: 0;
  padding: 8px var(--gap);
  background: var(--refund-bg);
  color: var(--refund);
  font-size: 14px;
}

main { padding: var(--gap); max-width: 720px; margin: 0 auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
}

.card h2 { margin: 0 0 12px; font-size: 17px; font-weight: 650; }

.field { margin-bottom: 14px; }

.field label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 550;
  color: var(--muted);
}

input, select, textarea {
  width: 100%;
  min-height: 46px; /* comfortable to tap */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.amount-row { display: flex; gap: 8px; align-items: stretch; }
/* An allowance payment's amount is its lines' total (N132): shown like the Entry screen's amount box. */
.amount-row .amount-total {
  flex: 1; display: flex; align-items: center; justify-content: flex-end; min-height: 46px; padding: 0 12px;
  border: 1px dashed var(--border); border-radius: 8px; font-size: 20px; font-weight: 600;
}
.field > .label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 550; color: var(--muted); }
.payment-lines .usual:empty { display: none; }
.payment-lines .line .working { grid-column: 1 / -1; padding-right: 0; }
.amount-row input { flex: 1; text-align: right; font-size: 20px; font-weight: 600; }
.amount-row .currency {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 600;
  min-width: 64px;
  justify-content: center;
}

/* Rate on the left half; the converted amount on the right, under the amount box. */
.rate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rate-row[hidden] { display: none; }
.rate-row .field { min-width: 0; }

.converted {
  display: block;
  text-align: right;
  min-height: 46px;
  line-height: 24px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
}

.hint { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.hint:empty { display: none; }
.hint.contribution { color: var(--accent); font-weight: 550; }
.rate-row .rate-hint { grid-column: 1 / -1; margin: -8px 0 14px; }
.rate-row .field[hidden] { display: none; }
.entries .amount.moved { color: var(--muted); }
.hint.refund { color: var(--refund); }

.two-col { display: grid; grid-template-columns: 1fr; gap: 0 12px; }

.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

button {
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.primary { background: var(--accent); color: var(--accent-text); }
button.secondary { background: transparent; color: var(--accent); }

.error {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--error-bg);
  color: var(--error);
  font-size: 15px;
  margin-bottom: 14px;
}
.error ul { margin: 4px 0 0; padding-left: 20px; }

.notice {
  margin: 0 0 var(--gap);
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--income);
  color: var(--income);
  font-weight: 550;
}

a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.delete-form { margin-top: 10px; }
.confirm {
  padding: 12px;
  border: 1px solid var(--error);
  border-radius: 8px;
  background: var(--error-bg);
}
.confirm p { margin: 0 0 10px; color: var(--error); font-weight: 600; }
button.danger.solid { background: var(--error); color: var(--surface); }
button.danger {
  width: 100%;
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}

.entries .entry-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  color: inherit;
  text-decoration: none;
}
.entries li.editing { background: var(--bg); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }

/* Recent entries */
.entries { list-style: none; margin: 0; padding: 0; }
.entries li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.entries li:has(> .entry-link) { display: block; }
.entries li:first-child { border-top: 0; }
.entries .what { font-weight: 550; }
.entries .comment { grid-column: 1 / -1; font-size: 14px; color: var(--muted); font-style: italic; }
.entries .where, .entries .when { font-size: 14px; color: var(--muted); }
.entries .amount { text-align: right; font-weight: 600; }
.entries .amount.in { color: var(--income); }
.entries .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--refund-bg);
  color: var(--refund);
  font-size: 12px;
  font-weight: 600;
}

@media (min-width: 640px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .actions { flex-direction: row; }
  .actions button { flex: 1; }
  /* A link beside a button (Cancel beside Save) keeps room around its text rather than shrinking to it. */
  .actions a.button { flex: 0 0 auto; padding: 0 28px; }
}

/* Balances */
.section-title { margin: 24px 0 8px; font-size: 15px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.row-head .amount { margin: 0; font-size: 18px; font-weight: 650; }
.right { text-align: right; }
.total-card .big { margin: 0; font-size: 28px; font-weight: 700; }
.parts { list-style: none; margin: 8px 0 0; padding: 0; }
.parts li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 15px; color: var(--muted); }
.pots { list-style: none; margin: 0; padding: 0; }
.pots > li { padding: 10px 0; border-top: 1px solid var(--border); }
.pots > li:first-child { border-top: 0; padding-top: 0; }
.check { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.check h4 { margin: 0 0 6px; font-size: 15px; font-weight: 650; }
.status { margin: 4px 0 10px; font-weight: 600; }
.status.ok { color: var(--income); }
.status.bad { color: var(--error); }
.check-form button { width: 100%; }
.check-details summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; }
.check-details[open] summary { margin-bottom: 10px; }

/* Ledger */
.filters summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.filters[open] summary { margin-bottom: 12px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.pager .button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.pager .button.off { visibility: hidden; }
.pager .page-of { flex: 0 0 auto; text-align: center; }
.pager-top { margin: 0 0 12px; }
/* Opened from Next: the list's last entry sits just above the phone's tab bar. */
.entries > li { scroll-margin-bottom: 96px; }

/* Settings */
.subnav { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: var(--gap); font-size: 15px; }
.subnav a { color: var(--muted); text-decoration: none; }
.subnav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.settings-items { list-style: none; margin: 0; padding: 0; }
.settings-items li { border-top: 1px solid var(--border); }
.settings-items li:first-child { border-top: 0; }
.settings-items a { display: block; padding: 10px 0; color: inherit; text-decoration: none; }
.settings-items .what { display: block; font-weight: 550; }
.add-summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details[open] > .add-summary { margin-bottom: 12px; }
.check-field label { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--text); }
.check-field input[type="checkbox"] { width: 20px; min-height: 20px; }
.field ul { list-style: none; margin: 0; padding: 0; }
.field ul label { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--text); font-weight: 400; }
.field ul input[type="checkbox"] { width: 20px; min-height: 20px; }
.field-error { margin: 4px 0 0; color: var(--error); font-size: 14px; }
.checks { border: 0; margin: 0; padding: 0; }
.checks legend { margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 550; color: var(--muted); }
.checks div > div { padding: 4px 0; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; }
.checks label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 400; color: var(--text); }

/* The main menu and any second row of tabs stay at the top together. */
/* Above everything pinned in the page (a table's row of months), since it also holds the phone's bottom
   bar and the lists that pop up from it. */
.sticky-top { position: sticky; top: 0; z-index: 5; }
.sticky-top .topbar { position: static; }
.sticky-top .subnav { margin: 0; padding: 10px var(--gap); background: var(--bg); border-bottom: 1px solid var(--border); }
.field[hidden] { display: none; }
.mark-form { margin-bottom: 14px; }
.mark-form button { width: 100%; }

/* Drag to reorder */
.settings-items li { display: flex; align-items: center; gap: 6px; }
.settings-items li > a { flex: 1; min-width: 0; }
.drag-handle {
  flex: 0 0 auto; width: 40px; min-height: 44px; border: 0; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: grab; touch-action: none;
}
.drag-handle:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.settings-items li.dragging { background: var(--bg); border-radius: 8px; box-shadow: 0 2px 10px rgb(0 0 0 / 0.15); }
.settings-items li.dragging .drag-handle { cursor: grabbing; }
.reorder-failed { outline: 2px solid var(--error); }

/* Category kinds as coloured pills */
:root {
  --pill-expense-bg: #fde8e7; --pill-expense: #a3261d;
  --pill-income-bg: #e3f4ea; --pill-income: #12693f;
  --pill-transfer-bg: #e5eefc; --pill-transfer: #1d55b4;
  --pill-budget-bg: #efe8fb; --pill-budget: #5f3aa8;
  --pill-opening-bg: #eceef2; --pill-opening: #4b5463;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pill-expense-bg: #3d1b19; --pill-expense: #ff9d94;
    --pill-income-bg: #163323; --pill-income: #6fd6a0;
    --pill-transfer-bg: #18284a; --pill-transfer: #8db5ff;
    --pill-budget-bg: #2b2142; --pill-budget: #c3a8ff;
    --pill-opening-bg: #262c37; --pill-opening: #b3bccb;
  }
}
.pill { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.kind-expense { background: var(--pill-expense-bg); color: var(--pill-expense); }
.kind-income { background: var(--pill-income-bg); color: var(--pill-income); }
.kind-transfer-in, .kind-transfer-out { background: var(--pill-transfer-bg); color: var(--pill-transfer); }
.kind-budget-only { background: var(--pill-budget-bg); color: var(--pill-budget); }
.kind-opening { background: var(--pill-opening-bg); color: var(--pill-opening); }
/* No text selection or long-press menu while holding a drag handle. */
.drag-handle, .reordering, .reordering * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.settings-items li.dragging { position: relative; z-index: 3; }

/* Budget */
.budget-subnav { align-items: center; }
.year-picker select { min-height: 36px; padding: 4px 8px; width: auto; font-size: 15px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--gap)); padding: 0 var(--gap); }
table.figures { width: 100%; border-collapse: collapse; font-size: 15px; }
table.figures th, table.figures td { padding: 7px 6px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
table.figures thead th { border-top: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
table.figures td.num, table.figures th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.figures tr.total th, table.figures tr.total td { font-weight: 650; }
table.figures tr.bad td { color: var(--error); }
table.figures th .pill { margin-left: 4px; font-size: 11px; padding: 1px 7px; }
.emergency { margin: 14px 0 6px; }
.amount-cell { flex: 0 0 auto; font-weight: 600; }

/* The main menu wraps rather than pushing the page wider than the screen (until the design pass). */
.topbar { flex-wrap: wrap; row-gap: 4px; }
.topbar nav { flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
body { overflow-x: hidden; }
.cost-row { display: flex; gap: 8px; }
.cost-row input { flex: 1; min-width: 0; }
.cost-row select { flex: 0 0 auto; width: auto; }
/* A cost's named values, listed when # is typed (js/cost_names.js). */
.name-list {
  margin: 6px 0 0; padding: 4px; list-style: none; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); box-shadow: 0 4px 12px rgb(0 0 0 / 0.08); max-height: 260px; overflow-y: auto;
}
.name-list[hidden] { display: none; }
.asset-lines .line .name-list { grid-column: 1 / -1; }
.name-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 10px;
  border-radius: 6px; cursor: pointer;
}
.name-list li[aria-selected="true"], .name-list li:hover { background: var(--accent-bg); }
.name-list .name { font-weight: 600; overflow-wrap: anywhere; }
.name-list .value { color: var(--muted); }
.name-list .label { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.sub-title { margin: 16px 0 4px; font-size: 16px; font-weight: 650; }
.override-form { margin-top: 12px; }
.months-table th, .months-table td { font-size: 13px; }
.months-table tbody th { white-space: nowrap; }
.pot-figures td.num { white-space: normal; }
table.figures.pot-figures { table-layout: fixed; }
table.figures.pot-figures th { width: 45%; }
table.figures.pot-figures td.num { white-space: normal; overflow-wrap: anywhere; }

/* Budget vs Actual */
.spare-card .big { margin: 0; font-size: 28px; font-weight: 700; }
.spare-card .status-line { margin: 4px 0 10px; font-weight: 600; color: var(--income); }
.spare-card.level-below_threshold .status-line { color: var(--refund); }
.spare-card.level-at_or_below_zero .status-line, .spare-card.level-at_or_below_zero .big { color: var(--error); }
.actual-list { list-style: none; margin: 0; padding: 0; }
.actual-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.actual-list li:first-child { border-top: 0; }
.actual-list .row-head .num { font-size: 14px; font-weight: 600; }
.bar { height: 8px; margin: 6px 0; border-radius: 4px; background: var(--border); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); }
.actual-list li.over .bar span { background: var(--error); }
.actual-list li.over .row-foot span:first-child { color: var(--error); font-weight: 600; }
.row-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pot-block { padding: 10px 0; border-top: 1px solid var(--border); }
.pot-block:first-of-type { border-top: 0; }
.spare-banner {
  display: block; padding: 10px var(--gap); background: var(--error); color: #fff;
  font-weight: 600; text-decoration: none; text-align: center;
}
.bar.ytd { display: flex; height: 12px; }
.bar.ytd span { display: block; height: 100%; }
.bar.ytd .blue, .key.blue { background: #2f6fde; }
.bar.ytd .green, .key.green { background: #1f9d5c; }
.bar.ytd .red, .key.red { background: #d93a2e; }
.bar.ytd .grey, .key.grey { background: var(--border); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.under-text { color: var(--income); font-weight: 600; }
.over-text { color: var(--error); font-weight: 600; }
.small { font-size: 13px; margin: 2px 0 0; }
/* Pot lines: behind schedule is red, ahead is green. */
.bar.ytd.pot-line .green { background: #d93a2e; }
.bar.ytd.pot-line .red { background: #1f9d5c; }
.spare-used { margin: 2px 0 0; color: var(--error); font-size: 14px; font-weight: 600; }

/* A page that needs the room (Months) uses the full width of a wide screen. */
main.wide { max-width: 1560px; }

/* Budget vs Actual: one line per category, its name and its bar, lined up in two columns; tapping
   it opens the figures, the amount in each colour and links to the ledger. */
/* Every Tracking bar starts after the same name column, so they all share one calendar (N102, N103). */
.tracking { --name-col: 8.5rem; }
.actual-list li { padding: 3px 0; }
.actual-list summary {
  display: grid; grid-template-columns: var(--name-col) 1fr; align-items: center; gap: 10px;
  min-height: 34px; cursor: pointer; list-style: none;
}
.actual-list summary::-webkit-details-marker { display: none; }
.actual-list summary .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 550; }
.actual-list summary .bar { margin: 0; height: 14px; }
/* A chevron drawn with two borders, so it turns about its own centre. */
.actual-list .what::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 1px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.actual-list details[open] .what::before { transform: rotate(45deg); margin-bottom: 4px; }
.actual-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.row-detail { padding: 6px 0 4px 14px; }
.row-figures { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 14px; }
.row-figures .spent-of { font-weight: 650; }
.row-figures .hint { margin: 0; font-size: 14px; }
.to-ledger { display: block; margin-top: 6px; color: var(--accent); font-weight: 600; text-decoration: none; }
@media (min-width: 640px) {
  .tracking { --name-col: 12rem; }
  /* The figures line up under the name and bar columns. */
  .row-figures { display: grid; grid-template-columns: calc(var(--name-col) - 14px + 10px) 1fr auto; gap: 0; }
}

/* Months: actuals coloured against the month's budget, the names column kept in view. */
/* A copy of a wide table's scroll bar, pinned to the bottom of the window while its own is out of view. */
.pinned-scroll {
  position: fixed; z-index: 4; height: 17px; overflow-x: scroll; overflow-y: hidden;
  background: var(--surface); border-top: 1px solid var(--border);
}
.pinned-scroll[hidden] { display: none; }
.pinned-scroll > div { height: 1px; }
.months-table thead th.current { color: var(--accent); }
.months-table td.good { color: var(--income); font-weight: 600; }
.months-table td.bad { color: var(--error); font-weight: 600; }
.months-table td[data-tip] { cursor: help; }
.months-table td[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tip {
  position: fixed; z-index: 10; max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: var(--text); color: var(--surface); font-size: 13px; line-height: 1.35;
  font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
}
.tip[hidden] { display: none; }

/* Ledger: the filter bar stays at the top, with a chip for each filter in use. */
.sticky-top .filter-bar { padding: 8px var(--gap); background: var(--bg); border-bottom: 1px solid var(--border); }
.filter-row { display: flex; align-items: flex-start; gap: 10px; max-width: 688px; margin: 0 auto; }
.filter-toggle {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); color: var(--accent);
}
.filter-toggle[aria-expanded="true"] { background: var(--accent); color: var(--accent-text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 2px 0; list-style: none; min-width: 0; }
.chip, .chip-clear {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border-radius: 999px; font-size: 14px; font-weight: 550; text-decoration: none; white-space: nowrap;
}
.chip { background: var(--pill-transfer-bg); color: var(--pill-transfer); }
.chip span { font-size: 16px; line-height: 1; }
.chip-clear { color: var(--muted); }
.filter-panel {
  max-width: 688px; margin: 10px auto 0; padding: var(--gap); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  max-height: calc(100vh - 140px); overflow-y: auto;
}
.filter-panel[hidden] { display: none; }
/* No minimum width on a bar's parts: every bar is the same calendar, so a widened sliver would push
   today's point out of line with the other bars (N102). */
.bar.ytd span { flex: 0 0 auto; }

/* Months: future months show their budget as an estimate. */
.months-table td.future { color: var(--muted); font-style: italic; }
.future-key { color: var(--muted); font-style: italic; font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .months-table th:first-child { white-space: normal; }
}

.tab-menu, .section-tabs .current-tab { display: none; }
/* Balances: loans, with what's owed (N136). */
.loans-list > li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.loans-list > li:last-child { border-bottom: 0; }
.loan-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.loan-line .amount { font-weight: 650; font-size: 17px; white-space: nowrap; }
.loans-list .hint { margin: 2px 0 0; }
/* This device's language (N134): at the foot of every page, and in Settings, General. */
.language-switch { margin: 28px 0 8px; text-align: center; font-size: 14px; color: var(--muted); }
.language-switch a { color: var(--accent); }
.language-switch strong { color: var(--text); font-weight: 600; }
.device-language .segmented { display: inline-flex; border: 1px solid var(--accent); border-radius: 10px; overflow: hidden; }
.device-language .segment { padding: 10px 16px; color: var(--accent); font-weight: 600; text-decoration: none; }
.device-language .segment + .segment { border-left: 1px solid var(--accent); }
.device-language .segment.chosen { background: var(--accent); color: var(--accent-text); }
/* The section's name where the year picker was, and a chip when another year is being looked at. */
.section-name { font-weight: 650; color: var(--text); padding-right: 14px; border-right: 1px solid var(--border); }
.year-chip {
  padding: 4px 10px; border-radius: 999px; background: var(--refund-bg); color: var(--refund);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
/* A new entry (N127): "+ New entry" at the end of the menu on wider screens. */
.add-entry {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text); font-size: 15px; font-weight: 600; text-decoration: none;
}
.add-entry svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
/* The main menu. Wider screens: words across the top. A phone: a tab bar fixed along the bottom,
   five sections with icons, and Settings as a gear at the top right. Rows of tabs under the
   header (Budget, Settings) stay on one line and scroll sideways. */
.main-nav svg { display: none; }
@media (max-width: 699px) {
  .topbar { min-height: 52px; padding-right: 150px; }  /* room for "+ New entry" */
  .topbar nav.main-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    padding: 2px 0 env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .main-nav .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; font-size: 11.5px; font-weight: 550; color: var(--muted);
  }
  .main-nav .tab[aria-current="page"] { color: var(--accent); font-weight: 650; }
  .main-nav svg {
    display: block; width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* A new entry: "+ New entry" at the top right (N127). */
  .add-entry { position: fixed; top: 8px; right: 12px; z-index: 6; }
  /* Tracking's and the Budget's tabs pop up from the bottom bar instead (js/menus.js), so the row under
     the header keeps only the year picker and the current tab's name. */
  .main-nav .tab[data-menu] { touch-action: none; -webkit-touch-callout: none; user-select: none; }
  .section-tabs > a { display: none; }
  .section-tabs .current-tab { display: inline; font-weight: 650; color: var(--text); }
  .section-name { padding-right: 0; border-right: 0; }
  .section-tabs .current-tab::before { content: "›"; margin-right: 10px; color: var(--muted); font-weight: 500; }
  .tab-menu {
    position: fixed; z-index: 6; min-width: 190px; padding: 6px; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
  }
  .tab-menu[hidden] { display: none; }
  .main-nav .tab-menu a {
    display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px;
    color: var(--text); font-size: 16px; font-weight: 550; text-decoration: none;
  }
  .main-nav .tab-menu a[aria-current="page"] { color: var(--accent); font-weight: 700; }
  .main-nav .tab-menu a[aria-current="page"]::after { content: "•"; margin-left: auto; padding-left: 12px; }
  .main-nav .tab-menu a.lit { background: var(--accent); color: var(--accent-text); }
  .main-nav .tab[data-menu] { -webkit-tap-highlight-color: transparent; }
  .main-nav .tab[aria-expanded="true"] { color: var(--accent); background: none; }
  main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .sticky-top .subnav {
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
    padding-right: 40px; /* the last tab can scroll clear of the fade */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .sticky-top .subnav::-webkit-scrollbar { display: none; }
  .sticky-top .subnav > * { flex: 0 0 auto; }
  .sticky-top .subnav::after { content: ""; flex: 0 0 1px; } /* keeps the end padding when scrolled */
}

/* Tracking: Spare Money shows its title and figure until opened. */
.spare-card summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; cursor: pointer; list-style: none; }
/* The Spare Money bar sits under the title and figure, shown even when the section is folded. */
.spare-card summary .bar, .pot-track summary .bar {
  flex: 0 0 calc(100% - var(--name-col) - 10px); margin: 2px 0 0 calc(var(--name-col) + 10px); height: 14px;
}
.pot-track summary { flex-wrap: wrap; row-gap: 4px; padding: 6px 0; }
.spare-card summary::-webkit-details-marker { display: none; }
.spare-card summary h2 { margin: 0; }
.spare-card summary h2::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 3px 1px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.spare-card details[open] summary h2::before { transform: rotate(45deg); margin-bottom: 5px; }
.spare-card details[open] summary { margin-bottom: 10px; }
.spare-card .figure { font-size: 20px; font-weight: 700; }
.spare-card.level-at_or_below_zero .figure { color: var(--error); }
.spare-card.level-below_threshold .figure { color: var(--refund); }
.spare-card summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.notes { margin-top: 14px; }

/* Balances: each account and pot is one line, its name and balance, until tapped. */
.fold-list { list-style: none; margin: 0; padding: 0; }
.fold-list > li { border-top: 1px solid var(--border); }
.fold-list > li:first-child { border-top: 0; }
.fold-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; cursor: pointer; list-style: none;
}
.fold-list summary::-webkit-details-marker { display: none; }
.fold-list summary .what { font-weight: 600; font-size: 16px; }
.fold-list summary .what::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 1px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.fold-list details[open] > summary .what::before { transform: rotate(45deg); margin-bottom: 4px; }
.fold-list summary .amount { font-weight: 650; font-size: 17px; white-space: nowrap; }
.fold-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.fold-body { padding: 0 0 12px 17px; }
.fold-body .check { margin-top: 8px; }
.pill.differs { margin-left: 6px; font-size: 12px; padding: 2px 8px; background: var(--error-bg); color: var(--error); vertical-align: 2px; }
.clue-title { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.check .entries { margin-bottom: 6px; }
.entries .reason { grid-column: 1 / -1; font-size: 14px; color: var(--refund); font-weight: 550; }
.entries .balance { grid-column: 2; text-align: right; font-size: 13px; color: var(--muted); }
.pill.update { margin-left: 6px; font-size: 12px; padding: 2px 8px; background: var(--refund-bg); color: var(--refund); vertical-align: 2px; }
.status.update { color: var(--refund); }
/* A balance typed within the week: a quieter reminder that entries have come in since. */
.pill.recent { margin-left: 6px; font-size: 12px; padding: 2px 8px; background: var(--accent-bg); color: var(--accent); vertical-align: 2px; }

/* Native controls (the date picker, scroll bars) follow light and dark mode. */
:root { color-scheme: light dark; }

/* Dates read "1 Feb 2027" in every date box, whatever language the browser uses: the box's own
   text is hidden and the date is written over it; tapping still opens the device's date picker. */
.date-wrap { position: relative; display: block; }
.date-wrap input { color: transparent; }
/* A click also focuses one part of the hidden date (day, month or year), and the browser highlights it
   in blue whatever its colour: so the whole hidden text is made invisible, highlight and all. The
   calendar button is a separate part and stays. */
.date-wrap input::-webkit-datetime-edit { color: transparent; opacity: 0; }
.date-wrap input::selection { background: transparent; color: transparent; }
.date-wrap input { caret-color: transparent; }
/* The written date covers the box's own text with the box's background, so nothing the browser draws
   there (Firefox's highlight of the part clicked) shows through. The calendar button stays clear. */
.date-shown {
  position: absolute; left: 2px; right: 40px; top: 2px; bottom: 2px; padding-left: 11px;
  display: flex; align-items: center; border-radius: 6px; background: var(--surface);
  color: var(--text); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Budget Summary: on a phone, a category's share of income goes under its name. */
.share-under { display: none; }
@media (max-width: 699px) {
  .summary-categories .share { display: none; }
  .share-under { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
}

/* Budget items: a table sorted by its headings; on a phone each item is a two-line card and a
   "Sort by" list replaces the headings. */
.items-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.items-head h2 { margin: 0; }
.sort-picker { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.sort-picker select { width: auto; min-height: 38px; padding: 4px 8px; font-size: 15px; }
.items-table thead button {
  min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.items-table thead button[aria-pressed="true"] { color: var(--accent); }
.items-table th[aria-sort="ascending"] button::after { content: " ↑"; }
.items-table th[aria-sort="descending"] button::after { content: " ↓"; }
.items-table tbody tr { cursor: pointer; }
.items-table tbody tr:hover td { background: var(--bg); }
.items-table td { vertical-align: baseline; }
.items-table .item-name a { color: inherit; font-weight: 600; text-decoration: none; }
.items-table .item-cost, .items-table .item-year, .items-table .item-paid, .items-table th { white-space: nowrap; }
.items-table .item-name { min-width: 10em; }
main.wide:has(.items-table) { max-width: 1100px; }
.items-table .item-break { display: none; }
.items-table .pill { font-size: 11px; padding: 1px 7px; }
@media (min-width: 700px) {
  .sort-picker { display: none; }
}
@media (max-width: 699px) {
  .items-table thead { display: none; }
  .items-table tbody tr, .items-table tfoot tr {
    display: flex; flex-wrap: wrap; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border);
  }
  table.figures.items-table td { padding: 0; border: 0; }
  .items-table .item-name { order: 1; flex: 1 1 0; min-width: 0; }
  .items-table .item-year { order: 2; flex: 0 0 auto; padding-left: 10px; font-weight: 600; }
  .items-table .item-break { order: 3; display: block; flex-basis: 100%; height: 2px; }
  .items-table .item-category, .items-table .item-cost, .items-table .item-period, .items-table .item-paid {
    order: 4; font-size: 13px; color: var(--muted); white-space: normal;
  }
  .items-table .item-cost { order: 5; }
  .items-table .item-period { order: 6; }
  .items-table .item-paid { order: 7; }
  .items-table .item-cost::before, .items-table .item-period::before, .items-table .item-paid:not(:empty)::before {
    content: "·"; margin: 0 6px;
  }
  .items-table tbody tr:hover td { background: none; }
}

/* An income source's months: one line each, the box, where the figure comes from, and a foreign income in
   the home currency at its rate. On a phone each month takes two lines: the month and box, then the rest. */
.income-months { width: 100%; border-collapse: collapse; }
.income-months th, .income-months td { padding: 6px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.income-months tr:first-child > * { border-top: none; }
.income-months th { width: 1%; text-align: left; font-weight: 600; white-space: nowrap; padding-right: 12px; }
.income-months th label { margin: 0; }
.income-months .im-box { width: 11em; }
.income-months .im-box input { width: 100%; }
.income-months .im-source { color: var(--muted); font-size: 13px; padding-left: 12px; }
.income-months .im-home { white-space: nowrap; padding-left: 12px; text-align: right; }
.income-months .im-rate { white-space: nowrap; padding-left: 6px; text-align: right; color: var(--muted); }
.income-months .im-rate span { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
@media (max-width: 599px) {
  .income-months tr { display: grid; grid-template-columns: 6em 1fr auto auto; align-items: center;
                      border-top: 1px solid var(--border); padding: 6px 0; }
  .income-months tr:first-child { border-top: none; }
  .income-months th, .income-months td { border-top: none; padding: 0; }
  .income-months .im-box { width: auto; grid-column: 2 / -1; }
  .income-months .im-source { grid-column: 1 / 3; padding: 4px 0 0; }
  .income-months .im-home, .income-months .im-rate { padding-top: 4px; font-size: 13px; }
  .income-months:not(.foreign) .im-source { grid-column: 1 / -1; }
}

/* Tracking: Spare Money available now goes red below zero. */
.spare-card .figure.negative { color: var(--error); }
/* Balances: the year's Spare Money beside the total, with the warning when it applies. */
.total-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.total-head .spare-year { text-align: right; margin-left: auto; }
.total-head .spare-year h2 { margin: 0 0 12px; }
.spare-year .big { margin: 0; font-size: 28px; font-weight: 700; }
.spare-year.level-below_threshold .big, .spare-year.level-below_threshold .status-line { color: var(--refund); }
.spare-year.level-at_or_below_zero .big, .spare-year.level-at_or_below_zero .status-line { color: var(--error); }
.spare-year .status-line { margin: 4px 0 0; font-size: 14px; font-weight: 600; max-width: 260px; margin-left: auto; }
.spare-year { color: inherit; text-decoration: none; }
.spare-card .figure { white-space: nowrap; }

/* An allowance payment's lines (N94): a category and an amount on each, then the total. */
.lines { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.lines legend { margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 550; color: var(--muted); }
.lines ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: 8px; }
.remove-line { min-width: 46px; min-height: 46px; padding: 0; border-color: var(--border); background: transparent; color: var(--muted); font-size: 22px; font-weight: 400; }
.line input { text-align: right; }
.add-line { width: 100%; }
.due { margin: 0 0 var(--gap); }
.hint.lead { margin: -6px 0 14px; }
.notice a { color: var(--accent); font-weight: 600; }
/* A budget item's months (N95). */
.months-hint { margin: -8px 0 14px; }
details.change { margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
details.change .hint { margin: 0 0 12px; }
.item-months { color: var(--muted); }
/* Confirming a delete: a pop-up in the middle of the screen. */
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.confirm-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.confirm-dialog p { margin: 0 0 14px; font-weight: 600; color: var(--error); }
.confirm-dialog .actions { margin: 0; }
.fold-list details[id] { scroll-margin-top: 150px; }
/* Sortable tables (N97): the headings are buttons. */
table.sortable thead button {
  min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
table.sortable th:not([aria-sort="none"]) button { color: var(--accent); }
table.sortable th[aria-sort="ascending"] button::after { content: " ↑"; }
table.sortable th[aria-sort="descending"] button::after { content: " ↓"; }
.row-head .amount > .hint { display: block; margin: 0; font-size: 13px; font-weight: 500; text-align: right; }
table.figures tr.subhead th { padding-top: 16px; color: var(--muted); font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.demo-banner { margin: 0; padding: 8px 16px; background: #fff4d6; color: #5c4400; font-size: 14px; text-align: center; }
@media (prefers-color-scheme: dark) { .demo-banner { background: #3d3214; color: #f3dc9b; } }
.page-intro { margin: -4px 0 14px; }
.budget-intro { margin: 0 4px var(--gap); }
/* An allowance's Edit (N100): a button that opens its settings in the card. */
.allowance-edit { margin-top: 10px; }
.next-year > summary.edit-button, .allowance-edit > summary.edit-button {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1px solid var(--border); border-radius: 8px; color: var(--accent); font-weight: 600;
  cursor: pointer; list-style: none;
}
.allowance-edit > summary.edit-button::-webkit-details-marker, .next-year > summary.edit-button::-webkit-details-marker { display: none; }
.allowance-edit[open] > summary.edit-button, .next-year[open] > summary.edit-button { margin-bottom: 14px; }
.over-year { color: var(--error); }
.date-field input { width: auto; min-width: 11rem; }
.date-field .date-wrap { display: inline-block; }  /* as wide as its box, so the written date covers only the box */
.keyword-hint { color: var(--accent); }
.cpi-row { max-width: 12rem; }
.copy-options { margin-left: 30px; }
.new-year { margin-top: 12px; }
.copy-options .checks label, fieldset.copy-options label { font-size: 16px; }
fieldset.copy-options { margin: 0 0 14px 30px; padding: 0; border: 0; }
fieldset.copy-options legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 550; color: var(--muted); }
/* Two buttons side by side, one chosen: radio buttons drawn as a segmented switch. */
.segmented { display: inline-flex; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
.segmented label { position: relative; margin: 0; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { display: block; min-width: 7rem; padding: 11px 18px; text-align: center; color: var(--accent); font-weight: 600; cursor: pointer; }
.segmented label + label span { border-left: 1px solid var(--accent); }
.segmented input:checked + span { background: var(--accent); color: var(--accent-text); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -4px; }
/* An entry's assets (N109): a line per asset with its amount, several for a payment split between
   them; under an income line, the asset's usual rent. */
.asset-lines .line { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; row-gap: 2px; }
.asset-lines .usual { grid-column: 2; padding-right: 12px; text-align: right; font-size: 13px; color: var(--muted); }
.asset-lines .usual:empty { display: none; }
.asset-lines .add-line {
  width: auto; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--accent); font-weight: 600;
}
.asset-lines .add-line::before { content: "+ "; }
/* "Split between assets" on the left, "All assets, equally" (costs) on the right. */
.asset-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.asset-lines .all-assets {
  width: auto; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--accent); font-weight: 600;
}
.asset-lines .all-assets[hidden] { display: none; }
.asset-lines ul { margin-bottom: 4px; }
.asset-status.ok { color: var(--income); font-weight: 550; }
.asset-status.warn { color: var(--refund); font-weight: 550; }
/* The assets an entry is for, under its account. */
.entries .assets { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--pill-budget); }
/* Budget > Assets (N109): a column per asset, then the total; the names column stays in view. Each month
   is a block: income, the two kinds of costs, and net income. On a phone, one asset beside the total. */
.assets-table th:first-child { white-space: nowrap; }
.assets-table thead th { white-space: nowrap; }
.assets-table td > a { color: inherit; text-decoration: none; }
.assets-table td > a:hover, .assets-table td > a:focus-visible { color: var(--accent); text-decoration: underline; }
.assets-table td.zero { color: var(--muted); }
.assets-table td.negative, .assets-table td.negative > a { color: var(--error); }
.assets-table td:last-child, .assets-table thead th:last-child { font-weight: 650; }
main.wide:has(.assets-table) { max-width: 1560px; }
.assets-table tbody th { font-weight: 500; }
.assets-table tbody tr.total th { font-weight: 650; }
.assets-table .short-label { display: none; }
@media (max-width: 699px) {
  .assets-table th, .assets-table td { font-size: 14px; }
  .assets-table .long-label { display: none; }
  .assets-table .short-label { display: inline; }
}
/* "For" on the entry form (N111): the months an entry is for. A button showing the choice opens a grid
   of the financial year's months: tap the first, then the last. */
.for-label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 550; color: var(--muted); }
.for-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 46px;
  padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 500; text-align: left;
}
.for-toggle::after {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px);
}
.for-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.for-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.for-panel[hidden] { display: none; }
.for-prompt { margin: 0 0 8px; }
.for-year { margin: 0 0 8px; font-size: 14px; font-weight: 650; color: var(--muted); }
.for-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.for-month {
  min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-weight: 500;
}
.for-month.paid { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.for-month.in { background: var(--pill-transfer-bg); color: var(--pill-transfer); border-color: transparent; }
.for-month.ends { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.for-month.pending { outline: 2px dashed var(--accent); outline-offset: 1px; }
.for-clear { min-height: 40px; margin-top: 6px; padding: 0 2px; border: 0; background: none; color: var(--accent); font-weight: 600; }
.entries .covers { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--pill-transfer); }
/* Tables with a column per month that never scroll sideways (Budget > Assets, Tracking > Months): the row
   of months stays pinned under the page header (Edward, 14 and 16 October 2026). */
table.stepped thead th {
  position: sticky; top: var(--pinned-top, 0px); z-index: 2; background: var(--surface);
  box-shadow: 0 1px 0 var(--border); vertical-align: middle;
}
/* When the assets don't all fit across (a phone, a narrow window): as many as fit beside the total, the
   arrows stepping along one asset at a time. */
.stepped-card.paged table.stepped .off { display: none; }
.step { display: none; }
.stepped-card.paged .step { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; }
.stepped-card.paged table.stepped { touch-action: pan-y; }
.step button {
  min-height: 36px; width: 32px; padding: 0; border: 0; border-radius: 999px; font-size: 22px; line-height: 1;
  background: transparent; color: var(--accent);
}
.step button:disabled { opacity: 0.3; cursor: default; }
.assets-table thead th.future { color: var(--muted); font-weight: 500; font-style: italic; }
.assets-table tbody.all .subhead th { color: var(--text); }
/* Budget > Assets: the rows to show (Edward, 15 October 2026). With one ticked, each asset is a single
   row named after it, without its block's heading. */
.asset-shows { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; padding: 0; border: 0; }
.asset-shows legend { float: left; margin-right: 4px; padding: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.check-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 550; cursor: pointer;
}
.check-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.check-chip input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.link-button { min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 14px; }
.assets-table tr[hidden] { display: none; }
.assets-table .asset-name { display: none; }
.assets-table.single .subhead { display: none; }
.assets-table.single .long-label, .assets-table.single .short-label { display: none; }
.assets-table.single .asset-name { display: inline; }
.assets-table.single tbody:not(.all) tr.total td { font-weight: 400; }
.assets-table.single tbody:not(.all) tr.total th { font-weight: 500; }
.assets-table.single tbody.all tr > * { font-weight: 650; }
.assets-table.single tbody + tbody tr:not([hidden]) > * { border-top: 1px solid var(--border); }
/* Tracking > Assets: one line per asset, sorted by a heading. On a phone, the two kinds of costs give way to
   net income and its share of income. */
.asset-ranking th, .asset-ranking td { white-space: nowrap; }
.asset-ranking thead th { white-space: normal; vertical-align: bottom; }  /* "Standard costs" may take two lines */
.asset-ranking thead button { white-space: normal; text-align: inherit; }
.asset-ranking thead th.num button { text-align: right; }
.asset-ranking td > a { color: inherit; text-decoration: none; }
.asset-ranking td > a:hover, .asset-ranking td > a:focus-visible { color: var(--accent); text-decoration: underline; }
.asset-ranking td.negative { color: var(--error); }
.asset-ranking tr.total > * { font-weight: 650; border-top: 2px solid var(--border); }
@media (max-width: 619px) {
  .asset-ranking .cost { display: none; }
  .asset-ranking th, .asset-ranking td { font-size: 13px; padding-left: 6px; padding-right: 0; }
  .asset-ranking th:first-child { padding-left: 0; }
  .asset-ranking thead button { padding-left: 0; padding-right: 0; }
  .asset-shows { gap: 6px; }
  .check-chip { min-height: 32px; padding: 0 10px 0 8px; font-size: 13px; }
}
.assets-table .to-come { margin-left: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* The statement import (N139): a card per statement line; a line already in the ledger is quieter. */
.import-link { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; text-decoration: none; }
.import-rows { list-style: none; margin: 0; padding: 0; }
.import-row { margin-bottom: 10px; }
.import-row.is-done { padding-top: 10px; padding-bottom: 10px; }
.import-row.is-done .import-head { margin-bottom: 2px; }
.import-row.is-done .what { font-weight: 600; }
.import-row.is-linked .import-link-choice label { color: var(--refund); }
.import-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.import-tick { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.import-tick input { width: 20px; height: 20px; }
.import-head .amount { font-weight: 650; }
.import-head .amount.credit { color: var(--income); }
.import-row .field { margin-bottom: 6px; }
.import-why:empty { display: none; }
.import-match { color: var(--refund); margin: 0 0 6px; }
.import-remember { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 14px; }
.import-row [hidden] { display: none; }
.import-remember .remember-button { padding: 6px 12px; min-height: 0; width: auto; }
.import-remember .remember-word { width: auto; flex: 1 1 140px; min-width: 0; padding: 4px 8px; }
.import-line { display: grid; grid-template-columns: 1fr 9em; gap: 6px; margin-bottom: 6px; }
.import-bank { color: var(--muted); overflow-wrap: anywhere; }
.bank-line { overflow-wrap: anywhere; white-space: pre-line; }  /* a line per kind of file (N145) */
.import-lines-total.lines-match { color: var(--income); font-weight: 600; }
.import-lines-total.lines-match::after { content: " ✓"; }
/* Pak Budi's demo (N147): his invented statement and CSV, to try the import with. */
.demo-files { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.demo-files ul { margin: 6px 0 0; padding-left: 20px; }
.demo-files li { margin: 4px 0; }