/* 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;
  --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;
    --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; }
.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; }
}

/* 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; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.pager .button { flex: 0 0 auto; padding: 0 16px; }

/* 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"] { 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. */
.sticky-top { position: sticky; top: 0; z-index: 2; }
.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; }
.sub-title { margin: 16px 0 4px; font-size: 16px; font-weight: 650; }
.month-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.override-form { margin-top: 12px; }
.months-table th, .months-table td { font-size: 13px; }
.months-table tbody th { white-space: nowrap; position: sticky; left: 0; background: var(--surface); }
.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. */
.actual-list { --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) {
  .actual-list { --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. */
.table-scroll.months-scroll { margin: 0; padding: 0; }
.months-table th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.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; }
/* Every part of a bar that has something in it stays visible, and wide enough to point at. */
.bar.ytd span { min-width: 6px; }

/* 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; }
/* On a phone, one month at a time beside the year to date, chosen with the arrows or by swiping. */
.month-switch { display: none; }
@media (max-width: 699px) {
  .month-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
  .month-switch button {
    min-height: 40px; width: 48px; padding: 0; border-radius: 999px; font-size: 22px; line-height: 1;
    background: transparent; color: var(--accent);
  }
  .month-switch button:disabled { opacity: 0.3; cursor: default; }
  .month-name { font-weight: 650; }
  .months-table .m { display: none; }
  .months-table[data-show="0"] .m0 { display: table-cell; }
  .months-table[data-show="1"] .m1 { display: table-cell; }
  .months-table[data-show="2"] .m2 { display: table-cell; }
  .months-table[data-show="3"] .m3 { display: table-cell; }
  .months-table[data-show="4"] .m4 { display: table-cell; }
  .months-table[data-show="5"] .m5 { display: table-cell; }
  .months-table[data-show="6"] .m6 { display: table-cell; }
  .months-table[data-show="7"] .m7 { display: table-cell; }
  .months-table[data-show="8"] .m8 { display: table-cell; }
  .months-table[data-show="9"] .m9 { display: table-cell; }
  .months-table[data-show="10"] .m10 { display: table-cell; }
  .months-table[data-show="11"] .m11 { display: table-cell; }
  .months-table { touch-action: pan-y; }
  .months-table th, .months-table td { font-size: 14px; }
  .months-table th:first-child { white-space: normal; }
}

/* 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: 64px; }
  .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;
  }
  .main-nav .tab-settings {
    position: fixed; top: 6px; right: 10px; width: 44px; min-height: 40px; border-radius: 10px;
  }
  .main-nav .tab-settings span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  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 { flex: 0 0 100%; margin: 2px 0 0; height: 14px; }
.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); }

/* 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; }
.date-wrap input::-webkit-datetime-edit { color: transparent; }
.date-shown {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  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: where the figure comes from, and a foreign income in the home currency. */
.month-source { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.month-source .in-home { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
/* A foreign income's months need the width for the amount in the home currency: one column on a phone. */
@media (max-width: 699px) { .month-grid.with-home { grid-template-columns: 1fr; } }

/* 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%; }
.line-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin: 12px 0 0; font-weight: 650; }
.line-total output { font-size: 18px; font-variant-numeric: tabular-nums; }
.line-total span:last-child { color: var(--muted); }
.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; } }