/* Family Budget - standalone static app
   Design: editorial restraint, typography-driven, tabular numerals everywhere. */

/* The ledger. One page of paper, sections as light panels, hairline rules
   between lines, numerals that line up, words in sentence case. Colour only
   where it means something: money in is blue, money out is grey, a positive
   figure green, a negative one red, a warning amber. The sans is the system's,
   the serif is for the one sentence that says where we stand. */
:root {
  --bg:         #F3F4F6;
  --surface:    #FFFFFF;
  --surface-2:  #F3F4F6;
  --panel:      #FFFFFF;
  --border:     #E2E5E9;
  --border-2:   #ECEEF1;
  --text:       #17191C;
  --text-1:     #2C323A;
  --text-2:     #555D68;
  --text-3:     #8A919C;
  --accent:     #0A6FBF;
  --accent-2:   #34B1FF;
  --accent-bg:  #E9F2FB;
  --pos:        #0B7A4F;
  --pos-bg:     #E9F7F0;
  --neg:        #C0392B;
  --neg-bg:     #FDEDEA;
  --warn:       #B45309;
  --warn-bg:    #FFF4E5;
  --shadow-sm:  none;
  --shadow-md:  0 1px 2px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.12);
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: Charter, "Iowan Old Style", "Source Serif 4", Georgia, "Times New Roman", serif;
  --c1: #2F6FD6; --c2: #C9741F; --c3: #0E9F8F; --c4: #B23A6E; --c5: #6E56CF; --c6: #2E8B57;
}

/* Three theme states: an explicit stamp either way, plus the un-stamped default
   where only the OS preference decides. Tokens are redefined, never components.
   The dark positive and negative are stepped apart for colour-blind readers
   (teal and coral, not green and red), checked with the palette validator. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0F1216;
    --surface:   #171B21;
    --surface-2: #1E232B;
    --panel:     #171B21;
    --border:    #262C35;
    --border-2:  #202630;
    --text:      #E9ECF1;
    --text-1:    #D5DAE1;
    --text-2:    #A4ADB9;
    --text-3:    #6F7883;
    --accent:    #5CB7F2;
    --accent-2:  #34B1FF;
    --accent-bg: #17293A;
    --pos:       #2EC4A0;
    --pos-bg:    #13302A;
    --neg:       #F58C6A;
    --neg-bg:    #33201B;
    --warn:      #F5B461;
    --warn-bg:   #3A2A12;
    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
    --c1: #5B9CF5; --c2: #E8A04A; --c3: #3DBFB0; --c4: #E07FAE; --c5: #A08BF2; --c6: #5CC487;
  }
}

:root[data-theme="dark"] {
    --bg:        #0F1216;
    --surface:   #171B21;
    --surface-2: #1E232B;
    --panel:     #171B21;
    --border:    #262C35;
    --border-2:  #202630;
    --text:      #E9ECF1;
    --text-1:    #D5DAE1;
    --text-2:    #A4ADB9;
    --text-3:    #6F7883;
    --accent:    #5CB7F2;
    --accent-2:  #34B1FF;
    --accent-bg: #17293A;
    --pos:       #2EC4A0;
    --pos-bg:    #13302A;
    --neg:       #F58C6A;
    --neg-bg:    #33201B;
    --warn:      #F5B461;
    --warn-bg:   #3A2A12;
    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
    --c1: #5B9CF5; --c2: #E8A04A; --c3: #3DBFB0; --c4: #E07FAE; --c5: #A08BF2; --c6: #5CC487;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

/* ── Top bar ───────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* A wordmark, no badge beside it. */
.brand-mark { display: none; }

.brand h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  position: relative;
}

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 999px;
  font-size: 19px; line-height: 1;
  color: var(--text-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--border-2); color: var(--text); }

.month-label {
  border: 0; background: transparent;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
}
.month-label:hover { background: var(--surface-2); }

#monthPicker {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  border: 0;
}
/* The arrows sit above the invisible date input, so however a browser leaves
   the input, it can never swallow "<" and ">". */
.month-nav .icon-btn { position: relative; z-index: 1; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* The month picker heads the month section instead of the top bar: the
   verdict above it reads the latest full months whatever month is chosen,
   and everything below it is that month. It sticks under the top bar while
   the month is being read. */
.month-rule { border: 0; border-top: 1px solid var(--border); margin: 34px 0 24px; }
.ov-lead { margin: -4px 0 16px; font-size: 13px; color: var(--text-2); }
.month-head {
  position: sticky; top: var(--topbar-h, 62px); z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; margin: 0 0 6px;
  background: var(--bg);
}
.month-head-note { margin: 0; font-size: 13.5px; color: var(--text-2); }

.save-state {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
.save-state.show { opacity: 1; }

.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.btn:hover { border-color: var(--text-3); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu-wrap { position: relative; }

.menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  width: 268px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 60;
}
.menu button {
  display: block; width: 100%;
  text-align: left;
  border: 0; background: transparent;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  cursor: pointer;
}
.menu button:hover { background: var(--accent-bg); color: var(--accent); }
.menu button.danger:hover { background: var(--neg-bg); color: var(--neg); }
.menu hr { border: 0; border-top: 1px solid var(--border-2); margin: 6px 4px; }
.menu-field {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 10px; font-size: 14px;
}
.menu-field select {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 4px 6px;
}

/* ── Layout ────────────────────────────────────────────── */

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* ── Summary tiles ─────────────────────────────────────── */

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.tile {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 20px 22px 18px;
}

.tile-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}

/* The one big figure on the page: the month. Proportional figures, since
   nothing lines up under it. */
.tile-value {
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 4px 0 6px;
  font-variant-numeric: proportional-nums;
}
.tile-value.is-pos { color: var(--pos); }
.tile-value.is-neg { color: var(--neg); }

.tile-note { font-size: 13px; color: var(--text-2); }
.import-since { color: var(--text-1); }
.import-since b { font-weight: 600; }

.as-of { margin: -4px 0 12px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.tile-pace { font-size: 13px; color: var(--text-1); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ── Cards ─────────────────────────────────────────────── */

.card {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 18px 20px 14px;
}

.card-income { margin-bottom: 22px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.card-head h2,
.cat-name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

.cat-name {
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: var(--r-sm);
  /* Sized to its text rather than the whole header, so clicking the empty space
     beside a category name does not put you into renaming it. */
  width: auto;
  max-width: 100%;
  min-width: 0;
  color: var(--text);
}
.cat-name:hover { background: var(--border-2); }
.cat-name:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--surface); }

.meter {
  margin-left: auto;
  flex: none;
  width: 74px; height: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.meter span {
  display: block; height: 100%; width: 0;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  transition: width .25s ease;
}
.meter.over span { background: var(--neg); }

.cat-del {
  flex: none;
  border: 0; background: transparent;
  color: var(--text-3);
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  opacity: 0;
}
.cat-card:hover .cat-del,
.cat-del:focus { opacity: 1; }
.cat-del:hover { background: var(--neg-bg); color: var(--neg); }

/* ── Rows ──────────────────────────────────────────────── */

.grid-head,
.row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 90px 90px 84px 22px;
  align-items: center;
  gap: 6px;
}

/* One number a line: what left the account. The plan and the difference are for
   somebody budgeting against targets, and reading three columns to find one
   figure is how a household ends up asking what it is looking at. They come
   back from More, together, when they are wanted. */
body.is-simple .grid-head,
body.is-simple .row {
  grid-template-columns: minmax(0,1fr) 110px 22px;
}
/* The bar measures spending against the plan, so with the plan off it has
   nothing to say and sits full at all times. */
body.is-simple .meter { display: none; }

/* The three balance tiles are the same projected-against-actual comparison the
   month grid dropped, in tile form: a red "Difference" about a month where
   nothing has happened yet. With the plan off, only the month so far remains. */
body.is-simple .tile-plan { display: none; }
body.is-simple .summary { grid-template-columns: 1fr; }

body.is-simple .grid-head span:nth-child(2),
body.is-simple .grid-head span:nth-child(4),
body.is-simple .row > [data-field="projected"],
body.is-simple .row > [data-diff],
body.is-simple .row > [data-sub="projected"],
body.is-simple .row > [data-sub="diff"] { display: none; }

.grid-head {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
}
.grid-head span { text-align: right; }
.grid-head span:first-child { text-align: left; }

.row { padding: 1px 0; }
.row + .row { border-top: 1px solid var(--border-2); }

/* The name, the count of charges behind it, and the note beneath both. */
.row-labelwrap {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 5px;
}

/* The note stays out of sight until the line is being worked on, or it has one */
.row-note {
  display: block;
  order: 3;
  flex: 1 0 100%;
  width: 100%;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-3);
  padding: 0 0 2px 4px;
  margin: -2px 0 4px -4px;
  opacity: 0;
  height: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.row-labelwrap.has-note .row-note,
.row-labelwrap:hover .row-note,
.row-labelwrap:focus-within .row-note {
  opacity: 1;
  height: auto;
  pointer-events: auto;
}
.row-note::placeholder { font-style: normal; opacity: .7; }
.row-note:hover { border-bottom-color: var(--border); }
.row-note:focus { outline: 0; border-bottom-color: var(--accent); font-style: normal; color: var(--text); }

.row-label {
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  padding: 7px 6px 7px 4px;
  margin-left: -4px;
  border-radius: var(--r-sm);
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}
/* Inside a line it shares the row with the count chip, so it takes what is left
   rather than the whole width, which would push the chip onto its own line. */
.row-labelwrap > .row-label { order: 1; flex: 1 1 0; width: auto; }
.row-label:hover { background: var(--border-2); }
.row-label:focus { outline: 2px solid var(--accent); background: var(--surface); }
.row-label::placeholder { color: var(--text-3); }

.amount {
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
  padding: 6px;
  border-radius: var(--r-sm);
  width: 100%;
  min-width: 0;
}
.amount:hover { border-color: var(--border); }
.amount:focus {
  outline: 0;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.amount.zero { color: var(--text-3); }

.cell {
  text-align: right;
  padding: 6px 8px 6px 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-3);
}
.cell.is-pos { color: var(--pos); }
.cell.is-neg { color: var(--neg); }

.row-del {
  border: 0; background: transparent;
  color: var(--text-3);
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  padding: 0;
}
.row:hover .row-del,
.row-del:focus { opacity: 1; }
.row-del:hover { background: var(--neg-bg); color: var(--neg); }

.add-row {
  border: 0; background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 550;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.add-row:hover { color: var(--accent); background: var(--accent-bg); }

/* The unused lines of a category, folded away. Quieter than "+ Add line",
   because it is a way of looking rather than a thing to do. */
.cat-more {
  border: 0; background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  width: 100%;
  text-align: left;
  opacity: 0.72;
}
.cat-more:hover { color: var(--accent); background: var(--accent-bg); opacity: 1; }

.tax-lines { display: flex; flex-direction: column; gap: 6px; }
.tax-lines label {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
}
.tax-lines label:hover { background: var(--accent-bg); }
.tax-lines label input { flex: none; }
.tax-lines label .tax-amt { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tax-lines label { flex-wrap: wrap; }
.tax-rate-wrap { display: flex; align-items: center; gap: 4px; flex: none; font-size: 13px; color: var(--text-2); }
.tax-rate-wrap[hidden] { display: none; }
.tax-rate {
  width: 60px; font: inherit; font-size: 13.5px; text-align: right;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--r-sm); padding: 5px 7px;
}
.tax-rate:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.cat-empty {
  margin: 2px 0 0;
  padding: 10px 4px 4px;
  font-size: 13px;
  color: var(--text-3);
}

.row-subtotal {
  border-top: 1.5px solid var(--border);
  margin-top: 2px;
  padding-top: 6px;
  font-weight: 640;
}
.row-subtotal .row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.row-subtotal .cell { color: var(--text); font-weight: 640; }

/* ── Category grid: column-major, mirrors the source sheet ── */

/* A fixed grid, not a masonry flow. Under `columns: 2` a card lands wherever
   the heights above it leave room, so folding away a category's unused lines
   moved every card below it - and Housing sat in a different place each month,
   which is no use at all for comparing one month with the next. A grid puts
   each category in the same cell whatever it weighs; the cost is a ragged
   bottom edge, which is worth paying for being able to find a thing twice. */
.categories { display: block; }

.cat-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 16px 18px 12px;
  margin-bottom: 18px;
}

.add-category {
  display: block;
  border: 0;
  background: transparent;
  color: var(--text-3);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  margin: 0 0 22px -4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.add-category:hover { color: var(--accent); background: var(--accent-bg); }

/* ── Totals footer ─────────────────────────────────────── */

.card-totals { padding: 6px 20px; }

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
}
.totals-row + .totals-row { border-top: 1px solid var(--border-2); }
.totals-row span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.totals-row strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.totals-row-final strong.is-pos { color: var(--neg); }  /* spent more than planned */
.totals-row-final strong.is-neg { color: var(--pos); }  /* spent less than planned */

.footnote {
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}
.footnote strong { color: var(--text-2); font-weight: 600; }

/* ── Toast ─────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--text);
  color: var(--bg);
  padding: 11px 12px 11px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0,0,0,.24);
  font-size: 14px;
  max-width: calc(100vw - 32px);
}
.toast button {
  border: 0;
  background: color-mix(in srgb, var(--bg) 20%, transparent);
  color: inherit;
  font-weight: 640;
  font-size: 13px;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
}
.toast button:hover { background: color-mix(in srgb, var(--bg) 34%, transparent); }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 900px) {
  .categories { grid-template-columns: minmax(0, 1fr); }
  .cat-card[data-col] { grid-column: auto; }
  .summary { grid-template-columns: 1fr; gap: 10px; }
  .tile { padding: 14px 16px; }
  .tile-value { font-size: 26px; margin: 2px 0; }
}

@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .month-head { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
  .month-nav { width: 100%; justify-content: space-between; }
  .month-head-note { text-align: center; }
  .wrap { padding: 16px 14px 72px; }
}

@media (max-width: 560px) {
  .grid-head {
    grid-template-columns: minmax(0,1fr) 78px 78px;
    gap: 6px;
    margin-bottom: 2px;
  }
  .grid-head span { text-align: right; }
  .grid-head span:first-child { display: none; }
  .grid-head { font-size: 9.5px; letter-spacing: .02em; }

  .row {
    grid-template-columns: minmax(0,1fr) 78px 78px;
    grid-template-areas:
      "label label del"
      "proj  act   diff";
    gap: 2px 6px;
    padding: 8px 0 10px;
  }
  .row-labelwrap { grid-area: label; }
  .row-label  { font-weight: 550; }
  .row-note { opacity: 1; height: auto; pointer-events: auto; }
  .row [data-field="projected"] { grid-area: proj; }
  .row [data-field="actual"]    { grid-area: act; }
  .row .cell  { grid-area: diff; }
  .row-del    { grid-area: del; opacity: .38; justify-self: end; }

  .row .amount {
    border-color: var(--border);
    min-height: 44px;
  }
  .row-label { min-height: 40px; }

  .row .amount::placeholder { color: var(--text-3); }
  .row-subtotal {
    grid-template-columns: minmax(0,1fr) 78px 78px;
    grid-template-areas: "label label label" "proj act diff";
  }
  .row-subtotal [data-sub="projected"] { grid-area: proj; }
  .row-subtotal [data-sub="actual"]    { grid-area: act; }
  .row-subtotal [data-sub="diff"]      { grid-area: diff; }

  .cat-del, .row-del { opacity: .38; }
  .toast { left: 14px; right: 14px; transform: none; max-width: none; }
}

@media (max-width: 560px) {
  .row .amount:focus { box-shadow: 0 0 0 3px var(--accent-bg); }
}

/* ── Print ─────────────────────────────────────────────── */

@media print {
  :root { --bg: #fff; --surface: #fff; --border: #d8dce2; --border-2: #e8ebef; }
  .topbar, .add-row, .add-category, .row-del, .cat-del, .toast, .footnote, .meter { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .wrap { padding: 0; max-width: none; }
  .card, .cat-card, .tile { box-shadow: none; break-inside: avoid; }
  .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amount { border-color: transparent !important; }
  .summary { grid-template-columns: repeat(3, 1fr); }
}

/* ── Storage warning ───────────────────────────────────── */

.notice {
  background: var(--neg-bg);
  border: 1px solid color-mix(in srgb, var(--neg) 26%, transparent);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.5;
}
.notice strong { display: block; color: var(--neg); margin-bottom: 2px; }
.notice code {
  font-size: 12.5px;
  background: color-mix(in srgb, var(--neg) 12%, transparent);
  padding: 1px 5px;
  border-radius: 5px;
}
@media print { .notice { display: none !important; } }
@media print { .month-rule, .month-head-note, .month-head .icon-btn { display: none !important; } .month-head { position: static; } }

/* ── Split dialog ──────────────────────────────────────── */

.btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.btn-primary:hover { color: var(--bg); border-color: var(--text); opacity: .9; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15,20,28,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
}

.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
  width: 100%;
  max-width: 620px;
  padding: 20px 22px 18px;
}

.dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.dialog-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dialog-head .icon-btn { margin-left: auto; }

.dialog-note { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 16px; }

.split-top { display: grid; grid-template-columns: 1fr 160px; gap: 12px; margin-bottom: 18px; }
.split-top-3 { grid-template-columns: 1fr 150px 150px; }
@media (max-width: 560px) { .split-top-3 { grid-template-columns: 1fr; } }
.split-top label,
.split-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  font-weight: 600;   color: var(--text-3); }
.split-top input {
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  width: 100%;
}
.split-top input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
#splitTotal { text-align: right; font-variant-numeric: tabular-nums; }

.split-head,
.split-row {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1.15fr) 108px 26px;
  gap: 8px;
  align-items: center;
}
.split-head {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3); padding-bottom: 6px; border-bottom: 1px solid var(--border-2);
}
.split-head span:nth-child(3) { text-align: right; }

.split-row { padding: 6px 0; }
.split-row select,
.split-row input {
  font: inherit; font-size: 13.5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 8px 8px;
  width: 100%;
  min-width: 0;
}
.split-row input { text-align: right; font-variant-numeric: tabular-nums; }
.split-row select:focus,
.split-row input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.split-row .row-del { opacity: .5; }
.split-row .row-del:hover { opacity: 1; }

.split-foot {
  display: flex; justify-content: flex-end; gap: 22px;
  padding: 12px 0 4px; margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2);
}
.split-foot strong { font-variant-numeric: tabular-nums; color: var(--text); margin-left: 5px; }
#splitRemainWrap.settled strong { color: var(--pos); }
#splitRemainWrap.over strong { color: var(--neg); }

.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

@media (max-width: 560px) {
  .overlay { padding: 0; align-items: stretch; }
  .dialog { border-radius: 0; border: 0; min-height: 100%; max-width: none; padding: 16px 14px 24px; }
  .split-top { grid-template-columns: 1fr; }
  .split-head { display: none; }
  .split-row {
    grid-template-columns: minmax(0,1fr) 108px 26px;
    grid-template-areas: "cat cat del" "item amount amount";
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--border-2);
  }
  .split-row [data-split="cat"]    { grid-area: cat; }
  .split-row [data-split="item"]   { grid-area: item; }
  .split-row [data-split="amount"] { grid-area: amount; }
  .split-row .row-del { grid-area: del; justify-self: end; }
  .split-row select, .split-row input { min-height: 44px; }
  .btn-primary#splitBtn { padding: 7px 10px; }
}

@media print { .overlay { display: none !important; } }

/* ── Copy-out dialog (embedded viewers block downloads) ── */

.dialog-narrow { max-width: 560px; }

#copyText {
  width: 100%;
  height: 260px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
#copyText:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* ── Sharing ───────────────────────────────────────────── */

.sync-chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  font-size: 12px;
  font-weight: 550;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sync-chip:hover { border-color: var(--accent); color: var(--accent); }
.sync-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--pos);
  flex: none;
}
.sync-chip[data-state="pending"]::before,
.sync-chip[data-state="syncing"]::before { background: var(--accent); }
.sync-chip[data-state="error"]::before { background: var(--neg); }
.sync-chip[data-state="off"]::before { background: var(--text-3); }

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block;
  font-size: 12.5px; font-weight: 600;
   color: var(--text-3);
  margin-bottom: 6px;
}
.field-row { display: flex; gap: 8px; }
.field-row input {
  flex: 1; min-width: 0;
  font: inherit;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.field-row input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.notice-warn {
  background: color-mix(in srgb, var(--color-warn, #F59E0B) 12%, transparent);
  border-color: color-mix(in srgb, #F59E0B 34%, transparent);
}
.notice-warn strong { color: #B45309; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notice-warn strong { color: #FBBF24; }
}
:root[data-theme="dark"] .notice-warn strong { color: #FBBF24; }

.share-error {
  color: var(--neg);
  font-size: 13px;
  margin: 12px 0 0;
}

.dialog-actions-stack { flex-direction: column; align-items: stretch; }

.share-facts { margin: 16px 0; display: grid; gap: 8px; }
.share-facts > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.share-facts dt { color: var(--text-3); }
.share-facts dd { margin: 0; font-weight: 550; }

/* ── Destructive confirmation ──────────────────────────── */

.btn-danger {
  background: var(--neg);
  border-color: transparent;
  color: #fff;
}
.btn-danger:hover { color: #fff; filter: brightness(1.08); border-color: transparent; }

/* ── Import dialog ─────────────────────────────────────── */

.dialog-wide { max-width: 860px; }

.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.map-grid select,
.map-grid input,
#txMoveNote,
#importFileInput {
  font: inherit; font-size: 13.5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  width: 100%;
}
.map-grid select:focus,
.map-grid input:focus,
#txMoveNote:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.import-preview {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: auto;
  max-height: 260px;
  margin: 14px 0;
  background: var(--surface-2);
}
.import-preview table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.import-preview th {
  position: sticky; top: 0;
  background: var(--surface);
  text-align: left;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.import-preview td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}
.import-preview td.num { text-align: right; font-variant-numeric: tabular-nums; }
.import-preview td.bad { color: var(--neg); }
.import-preview tr:last-child td { border-bottom: 0; }

.import-filter {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
  margin: 4px 0 10px;
  cursor: pointer;
}

.merchant-list {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow-y: auto;
  max-height: 46vh;
}
.merchant-row {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) 96px minmax(0,1.1fr) minmax(0,1.1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-2);
}
.merchant-row:last-child { border-bottom: 0; }
.merchant-row.unassigned { background: color-mix(in srgb, #F59E0B 9%, transparent); }
.merchant-name { min-width: 0; }
.merchant-name b { display: block; font-weight: 600; font-size: 13.5px; }
.merchant-name span { font-size: 11.5px; color: var(--text-3); }
.merchant-total { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.merchant-row select {
  font: inherit; font-size: 12.5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 6px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 620px) {
  .merchant-row {
    grid-template-columns: minmax(0,1fr) 92px;
    grid-template-areas: "name total" "cat cat" "line line";
    gap: 6px;
  }
  .merchant-name { grid-area: name; }
  .merchant-total { grid-area: total; }
  .merchant-row input[type="text"]:nth-of-type(1) { grid-area: cat; }
  .merchant-row input[type="text"]:nth-of-type(2) { grid-area: line; }
  .merchant-row select,
  .merchant-row input[type="text"] { min-height: 44px; }
}

/* ── Import source picker ──────────────────────────────── */

.source-picker { display: grid; gap: 8px; margin-bottom: 14px; }
.source-option {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  cursor: pointer;
}
.source-option:hover { border-color: var(--accent); }
.source-option:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.source-option input { margin-top: 2px; flex: none; }
.source-option span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.source-option b { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }

.dialog-note-tight { margin: 2px 0 14px; }

/* ── File or paste ─────────────────────────────────────── */

.input-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.tab {
  border: 0; background: transparent;
  padding: 8px 12px;
  font-size: 13.5px; font-weight: 550;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }

#importPasteBox {
  width: 100%;
  height: 190px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-top: 6px;
}
#importPasteBox:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* Free-typed category and line fields in the merchant list */
.merchant-row input[type="text"] {
  font: inherit; font-size: 12.5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 6px;
  width: 100%;
  min-width: 0;
}
.merchant-row input[type="text"]:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.merchant-row input[type="text"]:disabled { background: var(--surface-2); color: var(--text-3); }

#unsortedRow button { margin-top: 10px; display: block; }

/* Assigning unknown merchants */

.assign-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; flex-wrap: wrap; }
.assign-bar .import-filter { margin: 0; }

.assign-search {
  flex: 0 1 210px;
  min-width: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.assign-search:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

@media (max-width: 700px) {
  .assign-search { flex: 1 0 100%; min-height: 44px; }
}

.progress-pill {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, #F59E0B 16%, transparent);
  color: var(--text);
  white-space: nowrap;
}
.progress-pill.is-done { background: var(--pos-bg); color: var(--pos); }

.merchant-raw {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* ── Spending history ──────────────────────────────────── */

.history-wrap { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }

.hist-head,
.hist-row {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) 132px 96px minmax(0,1fr) 96px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
}
.hist-head {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.hist-head span:nth-child(3), .hist-head span:nth-child(5) { text-align: right; }

.hist-row { border-bottom: 1px solid var(--border-2); cursor: pointer; }
.hist-row:last-of-type { border-bottom: 0; }
.hist-row:hover { background: var(--surface-2); }
.hist-row.is-total { font-weight: 640; background: var(--surface-2); cursor: default; border-top: 1.5px solid var(--border); }
.hist-row.is-total:hover { background: var(--surface-2); }

.hist-name { font-size: 13.5px; font-weight: 550; min-width: 0; }
.hist-name span { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); }
.hist-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.hist-range { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: var(--accent); opacity: .10; }
.spark-end { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.spark-hit { fill: transparent; cursor: pointer; }
.spark-flat { stroke: var(--border); stroke-width: 2; stroke-linecap: round; }

.hist-detail { padding: 4px 12px 14px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border-2); }
.hist-detail table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hist-detail th {
  text-align: right; padding: 6px 8px; color: var(--text-3);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.hist-detail th:first-child, .hist-detail td:first-child { text-align: left; }
.hist-detail td { padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-detail tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--border-2) 45%, transparent); }
.hist-scroll { overflow-x: auto; }

@media (max-width: 640px) {
  .hist-head { display: none; }
  .hist-row {
    grid-template-columns: minmax(0,1fr) 96px;
    grid-template-areas: "name typical" "spark range";
    gap: 6px 10px;
  }
  .hist-name { grid-area: name; }
  .hist-spark { grid-area: spark; }
  .hist-typical { grid-area: typical; }
  .hist-rangecell { grid-area: range; }
  .hist-latest { display: none; }
}

/* Income reads as the counterpart to spending, not another expense row */
.hist-row.is-income { background: color-mix(in srgb, var(--pos) 7%, transparent); }
.hist-row.is-income .hist-name { color: var(--pos); }

/* Yearly costs, spread rather than budgeted at zero */
.tag {
  display: inline-block;
  font-size: 11.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; margin-left: 6px;
  background: var(--accent-bg); color: var(--accent);
}
.tag-note { display: block; font-size: 10px; color: var(--text-3); font-weight: 400; }

/* Backup reminder */
.notice-inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.notice-inline > div:first-child { flex: 1; min-width: 240px; }
.notice-actions { display: flex; gap: 8px; }

/* Grouped menu: eleven items behind one word needed structure */
.menu-group {
  font-size: 12px;
  font-weight: 600;


  color: var(--text-3);
  padding: 10px 10px 4px;
  margin: 0;
}
.menu-group:first-child { padding-top: 4px; }

@media (max-width: 480px) {
  .topbar-inner { gap: 8px; }
  .toolbar { gap: 6px; }
  .toolbar .btn { padding: 7px 10px; font-size: 13px; }
}

/* The card-payment question belongs to the Bank account option, not beside it */
.source-sub {
  margin: -4px 0 4px 0;
  padding: 10px 13px 10px 34px;
  border-left: 2px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.source-sub-q { font-size: 12.5px; color: var(--text-2); }
.source-sub select {
  font: inherit; font-size: 12.5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 6px;
  flex: 1;
  min-width: 200px;
}

/* Off-screen twin of .cat-name, used only to measure its rendered width */
.cat-name-measure {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ── Choosing a file ───────────────────────────────────── */

.dropzone {
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 26px 20px 22px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.dropzone.is-over {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.dropzone-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.dropzone-hint {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.dropzone .btn { min-width: 150px; }

/* A note on a merchant, so an opaque code can explain itself */
.merchant-row input[type="text"].merchant-note {
  display: block;
  width: 100%;
  margin-top: 3px;
  border: 0;
  border-radius: 0;
  min-height: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-2);
  padding: 1px 0;
}
.merchant-row .merchant-note::placeholder { font-style: normal; color: var(--text-3); opacity: .75; }
.merchant-row .merchant-note:hover { border-bottom-color: var(--border); }
.merchant-row .merchant-note:focus {
  outline: 0;
  border-bottom-color: var(--accent);
  font-style: normal;
  color: var(--text);
}
.merchant-row .merchant-note.has-note { color: var(--text-2); }

/* ── Transactions ──────────────────────────────────────── */

.tx-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.tx-filters input,
.tx-filters select {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tx-filters input:focus-visible,
.tx-filters select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Hundreds of rows would scroll the filters off the top of the screen, leaving no
   way to narrow the list without scrolling back. So the list scrolls inside
   itself and its heading stays put. */
#txBody { max-height: min(52vh, 520px); overflow-y: auto; }

.tx-head,
.tx-row {
  display: grid;
  grid-template-columns: 26px 74px minmax(0, 1.5fr) minmax(0, 1fr) 110px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
}
.tx-head {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tx-head span:last-child { text-align: right; }
.tx-row {
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  text-align: left;
}
.tx-row:last-child { border-bottom: 0; }
.tx-row.is-picked { background: var(--accent-bg); }

/* The tick is its own hit area: pressing it selects, pressing anywhere else on the
   row still opens that one charge. Padding rather than margin, so the target stays
   finger-sized without pushing the columns apart. */
.tx-pick { display: flex; align-items: center; justify-content: center; margin: -9px 0; padding: 9px 0; cursor: pointer; }
.tx-pick input { cursor: pointer; }

.tx-bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
}
.tx-bulk span { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--text); }
.tx-row:hover { background: var(--surface-2); }
.tx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

.tx-when { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tx-when span { display: block; font-size: 10.5px; color: var(--text-3); }
.tx-what { min-width: 0; }
.tx-what b { display: block; font-size: 13px; font-weight: 600; }
.tx-what span {
  display: block; font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-what span.has-note { font-style: italic; color: var(--text-2); }
/* .tx-what span is a block for the line under the name; the tag sits inside the
   name itself and must not inherit that. */
.tx-what b .tx-from {
  display: inline-block;
  width: auto;
  margin-left: 6px;
  vertical-align: 1px;
}
.tx-filed { min-width: 0; }
.tx-filed span {
  display: block; font-size: 12.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-filed span + span { font-size: 11px; color: var(--text-3); }
.tx-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 550;
}
.tx-num.is-back { color: var(--pos); }   /* a refund, going the other way */
/* Left out of the budget: still readable, visibly not part of the figures. */
.tx-num.tx-out { color: var(--text-3); text-decoration: line-through; font-weight: 500; }
.tx-filed.tx-out span { font-style: italic; color: var(--text-3); }

/* The count of charges behind one figure, sitting with the line's name. */
.row-count {
  flex: none;
  order: 2;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  cursor: pointer;
}
.row-count:hover { color: var(--accent); border-color: var(--accent); }

/* Same shape as the count chip, not interactive, quieter: it explains a minus. */
.row-back {
  flex: none;
  order: 3;
  height: 18px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pos);
  background: var(--pos-bg);
  border-radius: 9px;
  line-height: 18px;
  white-space: nowrap;
}
.row-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 700px) {
  #txBody { max-height: 60vh; }
  /* Search gets the width; the two short pickers share a line, so the list is
     not pushed off the bottom of a phone before it starts. */
  .tx-filters { grid-template-columns: 1fr 1fr; }
  .tx-filters input, .tx-filters #txSort { grid-column: 1 / -1; }
  .tx-filters input, .tx-filters select { min-height: 44px; }
  .tx-head { display: none; }
  .tx-row {
    grid-template-columns: 26px minmax(0, 1fr) 110px;
    grid-template-areas: "pick what amount" "pick filed when";
    gap: 4px 10px;
    padding: 11px 12px;
  }
  .tx-pick { grid-area: pick; margin: -11px 0; padding: 11px 0; align-items: center; }
  .tx-what { grid-area: what; }
  .tx-num { grid-area: amount; }
  .tx-filed { grid-area: filed; }
  .tx-when { grid-area: when; text-align: right; }
  .tx-when span { display: inline; margin-left: 4px; }
  .row-count { min-width: 26px; height: 24px; border-radius: 12px; }
}

/* ── Where we stand ────────────────────────────────────── */

.overview {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 20px 22px 18px;
  margin-bottom: 16px;
}
.ov-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ov-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ov-range { order: 1; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.ov-range select {
  font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px 6px;
}
.ov-span { order: 3; flex-basis: 100%; font-size: 13px; color: var(--text-3); }

.ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ov-box {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px 16px;
  min-width: 0;
}
.ov-box h3 {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
}
.ov-box b {
  display: block;
  font-size: 25px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.ov-box span { display: block; font-size: 12px; color: var(--text-2); margin: 2px 0 10px; }
.ov-box span:last-child { margin-bottom: 0; }
.ov-box b.ov-quiet { font-size: 16px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.ov-box b.ov-good { color: var(--pos); }
.ov-box b.ov-bad { color: var(--neg); }

.ov-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.ov-note + .ov-note { margin-top: 6px; }

/* Where it goes: the largest lines of a typical month, as a ranked list with
   a share bar. One system with the boxes above: same figures, same type. */
.ov-where { margin: 14px 0 0; }
.ov-where-head {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 600;
  color: var(--text);
}
.ov-where-head span {
  margin-left: 8px;
  font-size: 13px; font-weight: 400;
  color: var(--text-3);
}
.ov-where-list { display: flex; flex-direction: column; gap: 1px; }
.ov-where-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 140px 96px 40px; align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: var(--r-sm);
}
.ov-where-row[data-cat] { cursor: pointer; }
.ov-where-row[data-cat]:hover { background: var(--accent-bg); }
.ov-where-row[data-cat]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--accent-bg); }
.ov-where-name { min-width: 0; }
.ov-where-name b {
  display: block; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-where-name span {
  display: block; font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-where-bar { height: 6px; border-radius: 0 4px 4px 0; background: var(--accent-bg); overflow: hidden; }
.ov-where-bar span {
  display: block; height: 100%; border-radius: 0 4px 4px 0;
  background: var(--accent);
}
.ov-where-rest .ov-where-bar { background: var(--border-2); }
.ov-where-rest .ov-where-bar span { background: var(--text-3); opacity: .4; }
.ov-where-row[data-toggle] { cursor: pointer; }
.ov-where-row[data-toggle]:hover { background: var(--accent-bg); }
.ov-where-row[data-toggle]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--accent-bg); }
.ov-where-more .ov-where-name { padding-left: 16px; }
.ov-where-more .ov-where-name b { font-weight: 500; }
.ov-where-amt { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ov-where-pct { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }

.ov-todo {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--warn-bg);
  border-radius: var(--r-md);
}
.ov-todo-head {
  margin: 0 0 4px;
  font-size: 14.5px; font-weight: 600;
  color: var(--text);
}
.ov-todo ul { margin: 0; padding-left: 18px; }
.ov-todo li { font-size: 12.5px; color: var(--text-2); margin: 3px 0; }

.linkish {
  font: inherit; font-size: inherit;
  color: var(--accent); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: var(--accent-strong, var(--accent)); }

@media (max-width: 768px) {
  .overview { padding: 14px 14px 12px; border-radius: var(--r-md, 16px); }
  .ov-where-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "name pct" "bar bar";
    gap: 0 10px; padding: 8px 6px;
  }
  .ov-where-name { grid-area: name; }
  .ov-where-amt { grid-area: amt; }
  .ov-where-pct { grid-area: pct; }
  .ov-where-bar { grid-area: bar; margin-top: 6px; }
  .ov-where-head span { display: block; margin: 2px 0 0; }
  .ov-grid { grid-template-columns: 1fr; gap: 8px; }
  .ov-span { margin-left: 0; flex-basis: 100%; }
  .ov-box b { font-size: 22px; }
}

/* ── Funds ─────────────────────────────────────────────── */

.fund-head,
.fund-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 96px 118px 118px minmax(0, 1.3fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.fund-head {
  position: sticky; top: 0; z-index: 1;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.fund-row {
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  text-align: left;
}
.fund-row:last-child { border-bottom: 0; }
.fund-row:hover { background: var(--surface-2); }
.fund-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

.fund-name { min-width: 0; }
.fund-name b { display: block; font-size: 13px; font-weight: 600; }
.fund-name b.fund-unnamed { color: var(--text-3); font-weight: 500; font-style: italic; }
.fund-name span { display: block; font-size: 11px; color: var(--text-3); }

.fund-num { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fund-flow { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-3); }

.fund-when { text-align: right; min-width: 0; }
.fund-when span { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fund-when span + span { font-size: 11px; color: var(--text-3); }

.fund-state { font-size: 12px; min-width: 0; }
.fund-state span { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.fund-ok { color: var(--pos); }
.fund-bad { color: var(--neg); }
.fund-unset { color: var(--text-3); font-style: italic; }

#fundsBody { max-height: min(52vh, 520px); overflow-y: auto; }

@media (max-width: 768px) {
  .fund-head { display: none; }
  .fund-row {
    grid-template-columns: minmax(0, 1fr) 118px;
    grid-template-areas: "name saved" "when each" "state state";
    gap: 4px 10px;
    padding: 12px;
  }
  .fund-name  { grid-area: name; }
  .fund-num:nth-of-type(2) { grid-area: each; }
  .fund-num:nth-of-type(3) { grid-area: saved; }
  .fund-when  { grid-area: when; text-align: left; }
  .fund-when span { display: inline; }
  .fund-when span + span::before { content: " by "; color: var(--text-3); }
  .fund-state { grid-area: state; }
}

/* ── Recurring charges ─────────────────────────────────── */

.rec-head,
.rec-row {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) 178px 120px minmax(0,1fr) 105px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.rec-head {
  font-size: 12.5px; font-weight: 600;
  color: var(--text-3); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.rec-head span:nth-child(3), .rec-head span:nth-child(5) { text-align: right; }
.rec-row { border-bottom: 1px solid var(--border-2); }
.rec-row:last-child { border-bottom: 0; }
.rec-row:hover { background: var(--surface-2); }

.rec-name { min-width: 0; }
.rec-name b { display: block; font-size: 13.5px; font-weight: 600; }
.rec-name span {
  display: block; font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-often { font-size: 12.5px; color: var(--text-2); }
.rec-filed { min-width: 0; }
.rec-filed span {
  display: block; font-size: 12.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-filed span + span { font-size: 11px; color: var(--text-3); }
.rec-filed.rec-unfiled span { color: var(--text-3); font-style: italic; }
.rec-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 550; }
.rec-change { display: block; font-size: 10.5px; font-weight: 500; }
.rec-change.up { color: var(--neg); }
.rec-change.down { color: var(--pos); }
.rec-seen { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-3); }
.rec-per { display: none; }

@media (max-width: 700px) {
  .rec-head { display: none; }
  .rec-row {
    grid-template-columns: minmax(0,1fr) 110px;
    grid-template-areas: "name amount" "often yearly" "filed filed";
    gap: 4px 10px;
  }
  .rec-name { grid-area: name; }
  .rec-often { grid-area: often; }
  .rec-num:nth-of-type(1) { grid-area: amount; }
  .rec-filed { grid-area: filed; }
  .rec-num:nth-of-type(2) { grid-area: yearly; }
  .rec-per {
    display: inline; margin-left: 4px;
    font-size: 10.5px; font-weight: 400; color: var(--text-3);
  }
}

/* ── Verdict first ──────────────────────────────────────────
   One sentence that says what the numbers mean, the sum written out, and the
   three boxes behind "Show details". */
.ov-details-toggle { order: 2; margin-left: auto; font-size: 13px; }
.ov-verdict { background: var(--surface); border-radius: var(--r-md); padding: 18px 20px 16px; margin: 0 0 12px; }
.ov-verdict-head {
  margin: 0 0 8px; font-family: var(--font-serif); font-size: 24px; font-weight: 500;
  letter-spacing: -.005em; line-height: 1.25; font-variant-numeric: proportional-nums;
}
.ov-verdict-head .ov-bad { color: var(--neg); }
.ov-verdict-head .ov-good { color: var(--pos); }
.ov-verdict-why { margin: -2px 0 10px; font-size: 15px; color: var(--text); line-height: 1.4; }
.ov-sum { margin: 0 0 6px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ov-sum b { color: var(--text); font-weight: 600; white-space: nowrap; }
.ov-sum b.ov-bad { color: var(--neg); }
.ov-sum b.ov-good { color: var(--pos); }
.ov-year { margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
.ov-bars { display: grid; gap: 7px; margin: 0 0 14px; }
.ov-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 92px; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); }
.ov-bar-track { height: 10px; border-radius: 0 4px 4px 0; background: var(--accent-bg); overflow: hidden; }
.ov-bar-track span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); }
.ov-bar-out .ov-bar-track, .ov-bar-tax .ov-bar-track { background: var(--border-2); }
.ov-bar-out .ov-bar-track span { background: var(--text-3); opacity: .6; }
.ov-bar-tax .ov-bar-track span { background: var(--text-3); opacity: .35; }
.ov-bar-amt { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ov-room { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }
.ov-room b { font-size: 15px; }
.ov-room span { font-size: 12.5px; color: var(--text-2); }
.ov-how { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; font-size: 12.5px; color: var(--text-2); }
.ov-how summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.ov-how summary::-webkit-details-marker { display: none; }
.ov-how p { margin: 8px 0 0; line-height: 1.5; }
.ov-todo-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ov-todo-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.ov-todo-btn { background: var(--text); color: var(--bg); border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ov-todo details { margin-top: 8px; }
.ov-todo summary { cursor: pointer; font-size: 12.5px; color: var(--accent); font-weight: 600; list-style: none; }
.ov-todo summary::-webkit-details-marker { display: none; }
.ov-todo details ul { margin-top: 6px; }
body:not(.is-details) .ov-grid,
body:not(.is-details) #overviewFunds { display: none; }
body.is-simple:not(.is-details) .tile.has-month .tile-value,
body.is-simple:not(.is-details) .tile.has-month .tile-note,
body.is-simple:not(.is-details) .tile.has-month .tile-pace { display: none; }
.tile-month { margin-top: 4px; }
.chip { display: inline-block; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; }
.chip-high { background: var(--warn-bg); color: var(--warn); }
.chip-ok { background: var(--pos-bg); color: var(--pos); }
.tile-month-head { margin: 8px 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
.tile-month-track { position: relative; height: 9px; border-radius: 0 4px 4px 0; background: var(--accent-bg); margin: 8px 0 4px; }
.tile-month-track span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); }
.tile-month-track em { position: absolute; top: -5px; width: 2px; height: 19px; background: var(--text); opacity: .5; }
.tile-month-k { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.tile-month-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }

/* A month gone by: why it reads as it does, and the year of months it sits in. */
.tile-why-head { margin: 14px 0 0; font-size: 14px; color: var(--text-1); line-height: 1.45; }
.tile-why { margin: 4px 0 0; padding: 0 0 0 18px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.tile-why li { margin: 2px 0; }
.tile-why b { font-weight: 600; color: var(--text); }
.tile-bars { margin-top: 16px; }
.tile-bars-strip { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.tile-bars-strip i { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; }
.tile-bars-zero { border-top: 1px solid var(--border); }
.tile-bars-norm { border-top: 1px dashed var(--text-2); opacity: .7; pointer-events: auto !important; }
.tile-bars .tb { position: relative; min-width: 0; }
.tile-bars .tb span {
  position: absolute; left: 50%; width: min(22px, 64%); transform: translateX(-50%);
  background: var(--text-3); opacity: .5;
  transition: height .55s cubic-bezier(.2, .7, .3, 1), top .55s cubic-bezier(.2, .7, .3, 1);
}
.tile-bars .tb.is-pos span { background: var(--pos); opacity: .42; border-radius: 4px 4px 0 0; }
.tile-bars .tb.is-neg span { background: var(--neg); opacity: .4; border-radius: 0 0 4px 4px; }
.tile-bars .tb.is-now span { opacity: 1; }
.tile-bars-k { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 6px; font-size: 11.5px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.tile-bars-k span { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.tile-bars-k .is-now { color: var(--text); font-weight: 650; }
.tile-bars-note { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .tile-bars .tb span { transition: none; } }
@media (max-width: 768px) { .tile-bars-k { font-size: 9.5px; } }
@media (max-width: 768px) {
  .ov-bar { grid-template-columns: 84px minmax(0, 1fr) 80px; gap: 8px; }
  .ov-verdict { padding: 16px 14px 12px; }
  .ov-verdict-head { font-size: 21px; }
}

/* Before and after tax, side by side in the verdict. */
.ov-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 8px; }
.ov-split-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 8px); padding: 10px 12px; min-width: 0; }
.ov-split-cell span { display: block; font-size: 12px; color: var(--text-2); }
.ov-split-cell b { display: block; margin: 2px 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ov-split-cell b.ov-bad { color: var(--neg); }
.ov-split-cell b.ov-good { color: var(--pos); }
.ov-taxnote { margin: 0 0 12px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
@media (max-width: 768px) { .ov-split-cell b { font-size: 16px; } }

/* ── Summary to share ──────────────────────────────────── */

.sm-page { color: var(--text); font-size: 14px; line-height: 1.5; }
.sm-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 2px 0; }
.sm-sub { color: var(--text-2); font-size: 13px; margin-bottom: 10px; }
.sm-block { border-top: 1px solid var(--border); padding: 14px 0 12px; }
.sm-block h3 { font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 8px; }
.sm-block p + p { margin-top: 6px; }
.sm-big { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -.005em; line-height: 1.3; font-variant-numeric: proportional-nums; }
.sm-hint, .sm-note { color: var(--text-2); font-size: 13px; }
.sm-block .sm-hint { margin-top: 14px; }
.sm-rates { margin-bottom: 10px; }
.sm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sm-table th { text-align: left; font-weight: 400; padding: 6px 12px 6px 0; }
.sm-table td { text-align: right; padding: 6px 0 6px 12px; white-space: nowrap; width: 1%; }
.sm-table tr + tr th, .sm-table tr + tr td { border-top: 1px solid var(--border-2); }
.sm-table .sm-head th, .sm-table .sm-head td { font-size: 12.5px; font-weight: 600;   color: var(--text-3); }
.sm-table .sm-total th, .sm-table .sm-total td { font-weight: 650; border-top: 1px solid var(--border); }
.sm-table .sm-subtotal th, .sm-table .sm-subtotal td { font-weight: 600; }
.sm-field { display: inline-block; }
.sm-input {
  font: inherit;
  width: 8.5em;
  text-align: right;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  font-variant-numeric: tabular-nums;
}
.sm-rates .sm-input { width: 3.6em; }
.sm-notes {
  font: inherit;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  resize: vertical;
}
.sm-input:focus, .sm-notes:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.sm-print { display: none; }
.sm-out { display: flex; flex-direction: column; gap: 2px; }
.sm-out-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sm-out-row:hover { background: var(--accent-bg); }
.sm-out-row input { grid-row: span 2; align-self: center; }
.sm-out-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-out-why { grid-column: 2 / 4; font-size: 12.5px; color: var(--text-3); }
.sm-out-rest .sm-out-name, .sm-out-rest .sm-out-amt { color: var(--text-2); }
.sm-amt-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-3);
}
.sm-amt-btn:hover { color: var(--accent); text-decoration-color: currentColor; }
.sm-out-row .sm-amt-input { width: 7.5em; padding: 2px 6px; }
/* On a phone a dialog is the whole screen, stretched to exactly its height, and
   this one runs to several screens: the panel has to grow with it, or the rest
   runs on past its edge with the budget showing through. */
@media (max-width: 560px) { #summaryOverlay { align-items: flex-start; } }
@media (max-width: 768px) {
  .sm-input { min-height: 44px; }
  .sm-out-row { min-height: 44px; }
  .sm-table th { padding-right: 8px; }
}
@media print {
  body.print-summary > *:not(#summaryOverlay) { display: none !important; }
  body.print-summary #summaryOverlay {
    display: block !important;
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    overflow: visible;
  }
  body.print-summary #summaryOverlay .dialog { border: 0; box-shadow: none; max-width: none; padding: 0; }
  body.print-summary #summaryOverlay .dialog-head,
  body.print-summary #summaryOverlay .dialog-note,
  body.print-summary #summaryOverlay .dialog-actions,
  .sm-input, .sm-notes, .sm-out input, .sm-hint, .sm-out-rest { display: none !important; }
  .sm-print { display: inline !important; }
  ul.sm-print { display: block !important; padding-left: 18px; }
  /* One sheet of paper for a usual summary. */
  .sm-page { font-size: 11px; line-height: 1.4; }
  .sm-title { font-size: 17px; }
  .sm-sub { margin-bottom: 4px; }
  .sm-big { font-size: 19px; }
  .sm-block { padding: 6px 0 4px; break-inside: avoid; }
  .sm-block h3 { margin-bottom: 4px; }
  .sm-rates { margin-bottom: 4px; }
  .sm-table th, .sm-table td { padding-top: 2px; padding-bottom: 2px; }
  .sm-out { gap: 0; }
  .sm-out-row { margin: 0; padding: 1px 0; grid-template-columns: minmax(0, 1fr) auto; }
  .sm-out-why { grid-column: 1 / 3; }
  .sm-sub, .sm-note, .sm-out-why { font-size: 10px; }
  .sm-amt-btn { text-decoration: none; }
}

/* ── Hands: interaction and motion ─────────────────────────
   Motion answers an action and shows what changed: a month arriving, a
   dialog opening, a toast landing. Nothing moves on its own. */
.btn:active, .linkish:active, .ov-todo-btn:active { transform: translateY(1px); }
.row.has-charges { cursor: pointer; }
.row.has-charges:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 2px;
}
.amount[readonly] { cursor: pointer; color: var(--text); }
.amount[readonly]:hover { border-color: transparent; }
.amount[readonly]:focus { border-color: transparent; background: transparent; box-shadow: none; }
.row.has-charges .amount[readonly] { font-weight: 500; }
.month-sentinel { height: 1px; margin-top: -1px; }
.month-head { transition: box-shadow .15s ease; }
.month-head.is-stuck { box-shadow: 0 1px 0 var(--border); }
@keyframes month-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.month-block.is-switching > :not(.month-head):not(.month-sentinel) {
  animation: month-in .26s cubic-bezier(.2, .7, .3, 1) both;
}
.overlay { opacity: 1; transition: opacity .18s ease; }
.overlay[hidden] { opacity: 0; }
.dialog { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
@starting-style {
  .overlay:not([hidden]) { opacity: 0; }
  .overlay:not([hidden]) .dialog { transform: translateY(10px); }
}
.menu { opacity: 1; transform: none; transition: opacity .14s ease, transform .14s ease; }
.menu[hidden] { opacity: 0; transform: translateY(-4px); }
@starting-style { .menu:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.toast { transition: opacity .18s ease; }
.toast[hidden] { opacity: 0; }
@starting-style { .toast:not([hidden]) { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .overlay, .dialog, .menu, .toast, .month-head, .month-block > * { transition: none !important; animation: none !important; }
}

/* ── The app ───────────────────────────────────────────────
   A shell: a sidebar on a desk, tabs on a phone; one screen for the month,
   one for where we stand; the rest as sheets. The month is a hero and two
   lists, each category a row that unfolds its lines. */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; padding: 22px 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--border); background: var(--surface);
}
.side .brand h1 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; padding: 4px 10px 18px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px; background: none;
  color: var(--text-2); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
.nav-item svg, .tabs svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.is-on { background: var(--accent-bg); color: var(--accent); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-foot { margin-top: auto; display: grid; gap: 10px; }
.side-foot .btn { width: 100%; text-align: center; padding: 10px 14px; }
.side-state { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 18px; }
.side-state .save-state { font-size: 12.5px; }
.topbar { display: none; }
.menu-wrap { display: contents; }
.menu { position: fixed; left: 16px; bottom: 72px; top: auto; right: auto; }
.tabs { display: none; }

.wrap { max-width: 1000px; margin: 0; padding: 26px 36px 80px; }
.as-of { margin: 0 0 20px; }
.month-head { top: var(--topbar-h, 0px); padding: 10px 0; margin: 0 0 12px; background: var(--bg); }
.month-head-note { font-size: 13.5px; color: var(--text-2); }
.month-nav { background: var(--surface); }
.month-nav .icon-btn { width: 34px; height: 32px; }

/* the hero */
.summary { display: block; margin-bottom: 0; }
.hero { padding: 26px 28px 22px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.hero .tile-value { font-size: clamp(36px, 4.6vw, 52px); font-weight: 650; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 10px; }
.hero .tile-value.is-pos, .hero .tile-value.is-neg { color: var(--text); }
.hero-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px; font-size: 13.5px; color: var(--text-2); }
.hero-line:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.chip-down { background: var(--neg-bg); color: var(--neg); }
.chip-up { background: var(--pos-bg); color: var(--pos); }
.chip-even { background: var(--surface-2); color: var(--text-2); }
.chip-high { background: var(--warn-bg); color: var(--warn); }
.chip-ok { background: var(--pos-bg); color: var(--pos); }
.inout { font-variant-numeric: tabular-nums; }
.tile-plan-line { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.tile-plan-line b { color: var(--text); font-weight: 600; }
.tile-why-head { margin-top: 16px; }
.tile-why + .tile-why-head { margin-top: 10px; }
.hero-side .tile-label { margin-bottom: 4px; }
.hero-side .tile-bars { margin-top: 6px; }
.tile-bars .tb.is-now::after {
  content: attr(data-label); position: absolute; left: 50%; transform: translateX(-50%);
  top: var(--lt, auto); font-size: 11px; font-weight: 650; color: var(--text); white-space: nowrap; line-height: 14px;
}

/* the lists */
.section { margin-top: 22px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 10px; }
.section-head h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.section-head .cell { font-size: 14px; color: var(--text-2); padding: 0; font-weight: 500; }
.list { background: var(--panel); border-radius: 14px; box-shadow: 0 1px 0 var(--border); overflow: hidden; }
.card-income { background: none; padding: 0; border-radius: 0; }
.card-income .list { padding: 0; }
.card-income .grid-head { display: none; }
body:not(.is-simple) .card-income .grid-head { display: grid; padding: 10px 18px 6px; }
.card-income .add-row { padding: 10px 18px 12px; }
.card-income .row-subtotal { display: none; }
body:not(.is-simple) .card-income .row-subtotal { display: grid; padding: 8px 18px; }
.plan-only { display: none; }
body:not(.is-simple) .plan-only { display: block; }

.cat-card { padding: 0; margin: 0; border-radius: 0; background: transparent; border-top: 1px solid var(--border-2); }
.cat-card:first-child { border-top: 0; }
.cat-head {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 14px;
  padding: 12px 18px; cursor: pointer; outline: 0;
}
.cat-head:hover { background: var(--surface-2); }
.cat-head:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mono {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 650; font-size: 14px; background: var(--surface-2); color: var(--text-2); flex: none;
}
.mono[data-c="1"] { background: color-mix(in srgb, var(--c1) 14%, var(--surface)); color: var(--c1); }
.mono[data-c="2"] { background: color-mix(in srgb, var(--c2) 14%, var(--surface)); color: var(--c2); }
.mono[data-c="3"] { background: color-mix(in srgb, var(--c3) 14%, var(--surface)); color: var(--c3); }
.mono[data-c="4"] { background: color-mix(in srgb, var(--c4) 14%, var(--surface)); color: var(--c4); }
.mono[data-c="5"] { background: color-mix(in srgb, var(--c5) 14%, var(--surface)); color: var(--c5); }
.mono[data-c="6"] { background: color-mix(in srgb, var(--c6) 14%, var(--surface)); color: var(--c6); }
.mono.warn { background: var(--warn-bg) !important; color: var(--warn) !important; }
.cat-namewrap { min-width: 0; }
.cat-head .cat-name { font-size: 15px; font-weight: 600; color: var(--text); padding: 1px 4px; margin-left: -4px; display: block; max-width: 100%; }
.cat-sub { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.share { height: 4px; border-radius: 0 3px 3px 0; background: var(--border-2); margin-top: 7px; max-width: 320px; overflow: hidden; }
.share span { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; transition: width .4s ease; }
.cat-card .mono.warn ~ .cat-namewrap .share span { background: var(--warn); }
.cat-head .meter { display: none; width: 74px; }
body:not(.is-simple) .cat-head .meter { display: block; }
.cat-amt { text-align: right; }
.cat-total { display: block; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-total.quiet { color: var(--text-3); font-weight: 500; }
.cat-pct { display: block; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; min-height: 1em; }
.cat-head .cat-del { opacity: 0; width: 22px; height: 22px; }
.cat-head:hover .cat-del, .cat-head .cat-del:focus { opacity: 1; }
.chev { width: 18px; height: 18px; color: var(--text-3); transition: transform .2s ease; }
.chev svg { width: 18px; height: 18px; display: block; }
.cat-card.is-open .chev { transform: rotate(90deg); }
.cat-lines { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.2, .7, .3, 1); }
.cat-card.is-open .cat-lines { grid-template-rows: 1fr; }
.cat-lines-inner { min-height: 0; overflow: hidden; background: var(--surface-2); }
.cat-card.is-open .cat-lines-inner { border-top: 1px solid var(--border-2); }
.cat-rows { padding: 2px 18px 0 68px; }
.cat-lines .grid-head { display: none; margin: 0 18px 0 68px; }
body:not(.is-simple) .cat-lines .grid-head { display: grid; padding-top: 8px; }
.cat-lines .cat-more, .cat-lines .add-row { margin-left: 64px; width: auto; }
.cat-lines .cat-empty { margin: 0; padding: 10px 18px 10px 68px; font-size: 13.5px; color: var(--text-3); }
.cat-lines .row-subtotal { display: none; }
body:not(.is-simple) .cat-lines .row-subtotal { display: grid; margin: 0 18px 8px 68px; }
.cat-lines .row + .row { border-top: 1px solid var(--border); }
.cat-folded { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 12px 18px; border-top: 1px solid var(--border-2); font-size: 13.5px; color: var(--text-3); }
.cat-folded .linkish { font-size: 13.5px; }
.add-category { margin: 10px 0 0 4px; }
.card-totals { margin-top: 12px; }

/* rows inside a list: the name, then the figure */
.row { padding: 2px 0; }
.row.has-mono { grid-template-columns: 36px minmax(0, 1fr) 110px 22px !important; column-gap: 14px; }
.row-mono { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-weight: 650; font-size: 14px; background: var(--pos-bg); color: var(--pos); }
.card-income .row { padding: 8px 18px; }
.card-income .row + .row { border-top: 1px solid var(--border-2); }
.row-label { font-weight: 500; }
.card-income .row-label { font-weight: 600; font-size: 15px; }
.row-count {
  order: 2; flex: 1 0 100%; width: auto; text-align: left;
  font-size: 12.5px; color: var(--text-3); background: none; border: 0; padding: 0 0 0 4px; margin: -2px 0 2px -4px; cursor: pointer;
}
.row-count:hover { color: var(--accent); }
.row-labelwrap > .row-label { order: 1; }
.cat-rows .row-label { padding-top: 5px; padding-bottom: 5px; }
.amount[readonly] { font-weight: 500; }

/* two screens */
body[data-view="stand"] #monthBlock, body[data-view="stand"] #verdictLine, body[data-view="stand"] #asOf { display: none !important; }
body[data-view="month"] #overview { display: none !important; }
.overview { padding: 0; background: none; border-radius: 0; }
.overview .ov-head { padding: 0 4px; }
.overview .ov-head h2 { font-size: 22px; }
.ov-verdict, .ov-todo, .ov-where, #overviewBody { background: var(--panel); border-radius: 14px; box-shadow: 0 1px 0 var(--border); padding: 18px 20px; }
.ov-where { margin-top: 14px; }
.ov-todo { background: var(--warn-bg); }

/* the month arrives from the side it was asked for */
@keyframes month-from-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes month-from-left  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.month-block.is-switching > :not(.month-head):not(.month-sentinel) { animation: month-in .26s cubic-bezier(.2, .7, .3, 1) both; }
.month-block.is-switching.dir-next > :not(.month-head):not(.month-sentinel) { animation-name: month-from-right; }
.month-block.is-switching.dir-prev > :not(.month-head):not(.month-sentinel) { animation-name: month-from-left; }

/* the phone: a bar on top, tabs below, sheets from the bottom */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .topbar { display: block; }
  .topbar-inner { padding: 10px 16px; }
  .topbar .brand h1 { font-size: 16px; font-weight: 650; }
  .topbar .btn-primary { margin-left: auto; padding: 7px 14px; }
  .wrap { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .month-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .month-head-note { text-align: left; }
  .hero { padding: 20px 18px 18px; }
  .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero .tile-value { font-size: 40px; }
  .inout { flex-basis: 100%; }
  .cat-head { padding: 12px 14px; gap: 12px; }
  .cat-rows, .cat-lines .cat-empty { padding-left: 14px; padding-right: 14px; }
  .cat-lines .cat-more, .cat-lines .add-row { margin-left: 10px; }
  .card-income .row { padding: 8px 14px; }
  .tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .tabs button { display: grid; justify-items: center; gap: 3px; font: inherit; font-size: 11px; font-weight: 500; color: var(--text-3); background: none; border: 0; padding: 2px 0; cursor: pointer; }
  .tabs svg { width: 22px; height: 22px; }
  .tabs button.is-on { color: var(--accent); }
  .menu { left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); width: auto; max-height: 70vh; }
  @starting-style { .overlay:not([hidden]) .dialog { transform: translateY(28px); } }
}
@media print { .side, .tabs, .topbar, .menu { display: none !important; } .shell { display: block; } }

/* the phone's lines in a list: the name, then the figure, nothing stacked */
@media (max-width: 560px) {
  .cat-lines .row, .card-income .row {
    grid-template-columns: minmax(0, 1fr) 100px !important; grid-template-areas: none !important;
    gap: 2px 10px; padding: 8px 0;
  }
  .card-income .row { padding: 8px 14px; }
  .card-income .row.has-mono { grid-template-columns: 36px minmax(0, 1fr) 100px !important; }
  .cat-lines .row .row-labelwrap, .card-income .row .row-labelwrap { grid-area: auto; }
  .cat-lines .row .amount, .card-income .row .amount { grid-area: auto; min-height: 0; border-color: transparent; padding: 4px 0; }
  .cat-lines .row .row-del, .card-income .row .row-del { display: none; }
  .cat-lines .row .cell, .card-income .row .cell { display: none; }
  .row-note { opacity: 0; height: 0; pointer-events: none; }
  .row-labelwrap.has-note .row-note, .row-labelwrap:focus-within .row-note { opacity: 1; height: auto; pointer-events: auto; }
  .row-label { min-height: 0; }
}

/* the phone: a category's name fits its row, the figure keeps its place */
@media (max-width: 760px) {
  .cat-head { grid-template-columns: 36px minmax(0, 1fr) auto 18px; }
  .cat-head .cat-name { width: 100% !important; min-width: 0; text-overflow: ellipsis; }
  .cat-head .cat-del { display: none; }
  .cat-head:focus-within .cat-del { display: block; }
  .share { max-width: none; }
}

/* An x only where there is something it can do: a line or a category with
   charges filed in it this month is not deleted, so it offers no x. */
.row.has-charges .row-del, .row.is-standing .row-del, .cat-card.has-charges .cat-del, .cat-card.is-standing .cat-del { display: none !important; }

/* ── Flow: the month as the title, its figure as a sentence, Where we stand as a row under it ── */
.as-of { display: none !important; }
/* Where we stand is a door under the month's figures, not a banner over
   them: a row in the lists' own language (mark, name, line, chevron), whose
   line says which months it reads and that tax is set aside, so its figure
   does not read as contradicting the month's. */
.verdict-line { margin: 16px 0 0; display: block; }
.verdict-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  width: 100%; text-align: left; padding: 14px 16px 14px 14px; border: 0; font: inherit; color: inherit;
  background: var(--panel); border-radius: 14px; box-shadow: 0 1px 0 var(--border); cursor: pointer;
  transition: background .15s;
}
.verdict-band:hover { background: var(--surface-2); }
.verdict-band:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.verdict-mark { width: 36px; height: 36px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; }
.verdict-mark svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.verdict-text { display: grid; gap: 3px; min-width: 0; }
.verdict-sub { font-size: 13px; color: var(--text-2); }
.verdict-k { font-weight: 600; color: var(--text-1); }
.verdict-band #verdictLineText { font-family: var(--font-serif); font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--text); font-variant-numeric: proportional-nums; }
/* The figure as a sentence: the label says what it is, the line under it
   says what came in and went out. */
.hero .tile-value { margin: 6px 0 8px; }
.hero .inout { margin: 0 0 10px; font-size: 15px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.hero .inout:empty { display: none; }
.month-head { padding: 0 0 6px; margin: 0 0 14px; display: block; }
.month-head.is-stuck { padding-top: 10px; background: var(--bg); }
.month-nav { border: 0; background: none; padding: 0; gap: 6px; }
.month-nav .month-label { font-size: 26px; font-weight: 650; letter-spacing: -.02em; padding: 2px 8px; border-radius: 8px; }
.month-nav .icon-btn { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); font-size: 18px; }
.month-nav .icon-btn:hover { background: var(--surface-2); color: var(--text); }
.month-head-note { margin: 4px 0 0 8px; font-size: 13.5px; color: var(--text-2); }
.hero-empty { display: grid; gap: 14px; justify-items: start; padding: 6px 0 4px; }
.hero-empty p { font-size: 17px; color: var(--text-1); line-height: 1.45; max-width: 46ch; }
body.is-bare .hero .tile-label, body.is-bare .hero .tile-value, body.is-bare .hero .inout, body.is-bare .hero-line, body.is-bare .hero .tile-note,
body.is-bare .hero-side, body.is-bare .card-income, body.is-bare .card-outs, body.is-bare .tile-pace, body.is-bare .tile-month { display: none !important; }
body.is-bare .hero-grid { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .verdict-band { padding: 12px 14px; column-gap: 12px; }
  .verdict-band #verdictLineText { font-size: 17px; }
  .month-nav .month-label { font-size: 23px; }
  .month-head-note { margin-left: 0; }
}

/* Where it went: a thin ring of the month's shares, the total in the middle,
   a legend that names each share and opens its category. Text wears the
   text tokens; the mark beside it carries the identity. */
.mix { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 16px 20px 16px 18px; margin: 0 0 12px; background: var(--panel); border-radius: 14px; box-shadow: 0 1px 0 var(--border); }
.mix-ring { position: relative; width: 132px; height: 132px; }
.mix-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.mix-ring circle { fill: none; stroke-width: 13; stroke-linecap: butt; transition: stroke-dasharray .7s cubic-bezier(.2, .7, .2, 1), stroke-dashoffset .7s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
.mix-ring .mix-track { stroke: var(--surface-2); }
.mix-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; pointer-events: none; }
.mix-centre b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: proportional-nums; }
.mix-centre span { font-size: 11.5px; color: var(--text-2); }
.mix-side { min-width: 0; }
.mix-side .tile-label { margin: 0 0 4px; }
.mix-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.mix-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; margin: 0 -8px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; border-radius: 8px; cursor: pointer; min-width: 0; transition: background .15s; }
.mix-row:hover, .mix-row.is-hi { background: var(--surface-2); }
.mix-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mix-row.is-rest { cursor: default; color: var(--text-2); }
.mix-row.is-rest:hover { background: none; }
.mix-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--mc, var(--text-3)); flex: none; }
.mix-k { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.mix-k b { font-weight: 600; color: var(--text); }
.mix-amt { color: var(--text-2); }
.mix-row.is-rest .mix-k b { font-weight: 500; color: var(--text-2); }
.mix-v { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
.mix[data-hi] circle:not(.is-hi):not(.mix-track) { opacity: .28; }
.cat-card { scroll-margin-top: 96px; }
@media (max-width: 760px) {
  .mix { grid-template-columns: 104px minmax(0, 1fr); gap: 8px 14px; padding: 14px; }
  .mix-ring { width: 104px; height: 104px; }
  .mix-legend { grid-template-columns: minmax(0, 1fr); }
  /* One column, so a name and its amount wrap rather than being cut short. */
  .mix-row { align-items: flex-start; }
  .mix-row .mix-dot { margin-top: 5px; }
  .mix-k { white-space: normal; line-height: 1.3; }
  .mix-centre b { font-size: 14px; }
  .mix-centre span { font-size: 10.5px; }
  .cat-card { scroll-margin-top: 150px; }
}
@media (prefers-reduced-motion: reduce) { .mix-ring circle { transition: none; } }
@media print { .mix-row { cursor: default; } }