/*
 * Brand tokens (docs/brand/BRAND.md): Lime Ink in light mode, Night Garden in dark, lime as the pop colour in both.
 * Components use these roles, never raw colours.
 */
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/figtree-latin.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
:root {
  /* colour roles */
  --base: #f5f6f8;          /* page */
  --surface: #ffffff;       /* cards, sheets' fields */
  --sunken: color-mix(in srgb, var(--ink) 6%, transparent); /* pills and tracks on the page colour */
  --ink: #0f1115;           /* text */
  --muted: #5b6270;         /* secondary text, 5.7:1 */
  --line: #e3e5ea;          /* dividers (decorative) */
  --house-ring: transparent; /* outline around house icons (dark mode only, so dark tiles don't vanish) */
  --brand: #7b5cff;         /* violet fills for large or bold things, tints */
  --brand-text: #6a4cf0;    /* links and small violet text, 5.0:1 */
  --brand-fill: #6a4cf0;    /* buttons with white text on them, 5.4:1 */
  --on-brand: #ffffff;
  --pop: #c8ff3d;           /* lime: one pop moment per screen, always with ink on it */
  --on-pop: #0f1115;
  --money-pos: #0e7f57;
  --money-neg: #d1343a;
  --danger: #d1343a;
  --lists: #c8ff3d;
  --projects: #ff6b5a;
  --events: #7b5cff;
  --claude: #d97757;        /* the ✳ Claude avatar only */
  --on-light: #0f1115;      /* text on a light user colour (avatars) */
  --on-dark: #ffffff;       /* text on a dark user colour */
  --focus: #6a4cf0;
  --scrim: rgba(11, 13, 16, .5);
  /* glass (D9: subtle; header on scroll, tab bar, toasts, menus). Solid where blur isn't supported or wanted (end of file).
     Text on glass is checked against black and white showing through (R10), hence the darker muted colour in light mode. */
  --glass: color-mix(in srgb, var(--base) 82%, transparent);
  --glass-line: color-mix(in srgb, var(--ink) 9%, transparent);
  --glass-muted: #4a505c;
  --glass-blur: blur(20px) saturate(180%);
  /* type */
  --font-display: "Bricolage Grotesque", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-text: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-display: 34px;
  --fs-title: 22px;
  --fs-body: 17px;
  --fs-label: 13px;         /* never smaller than this */
  /* shape (rounded tops, flat bottoms echo the arches) */
  --r-control: 12px;
  --r-card: 20px;
  --r-sheet: 28px;
  --r-pill: 999px;
  --radius: var(--r-card);
  /* spacing, 4-pt grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  /* motion: 200–300 ms, springy; all off with Reduce Motion (end of this file) */
  --dur-fast: 200ms;
  --dur: 250ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.15);
  /* shadows */
  --shadow-1: 0 1px 2px rgba(15, 17, 21, .06), 0 2px 8px rgba(15, 17, 21, .05);
  --shadow-2: 0 6px 20px rgba(15, 17, 21, .16);
  --shadow: var(--shadow-1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* the floating tab bar and the + beside it */
  --dock-h: 60px;
  --dock-side: max(12px, calc(50% - 268px));
  --dock-bottom: max(12px, var(--safe-bottom));
  --dock-clear: calc(var(--dock-h) + var(--dock-bottom) + 24px); /* room at the end of a page so the last row clears it */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --base: #0b0d10;
    --surface: #1a1d23;
    --ink: #edeef0;
    --muted: #a0a7b4;
    --line: #2a2e36;
    --house-ring: #3a3f4a;
    --brand: #d58cff;
    --brand-text: #d58cff;
    --brand-fill: #d58cff;
    --on-brand: #1a0b24;
    --money-pos: #4be3a3;
    --money-neg: #ff7a7f;
    --danger: #ff7a7f;
    --projects: #ffb547;
    --events: #d58cff;
    --focus: #c8ff3d;
    --scrim: rgba(0, 0, 0, .6);
    --glass-muted: var(--muted);
    --shadow-1: none;
    --shadow-2: 0 6px 24px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--base); color: var(--ink); }
body {
  font: var(--fs-body)/1.4 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
body.sheet-open { overflow: hidden; }
a { color: var(--brand-text); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
/*
 * Behave like an installed app on phones, never zooming: iPhones zoom into any text box under 16px when it's tapped
 * (and don't zoom back out), so every box is 16px whatever its class; pinch and double-tap zoom are off (see also
 * preventZoom in ui.jsx); text doesn't resize on rotation; and long-pressing buttons or tabs doesn't select their text.
 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { touch-action: pan-x pan-y; }
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
button, .tabbar, .chip, .topbar, .segmented { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (display-mode: standalone) { html, body { overscroll-behavior: none; } }
h1, h2 { margin: 0; font-family: var(--font-display); letter-spacing: -.02em; }
/* visible keyboard focus everywhere (mouse and touch taps don't show it) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible, .money-input input:focus-visible, .quick-add input:focus-visible { outline: 0; }
.money-input:has(input:focus-visible), .quick-add:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.app { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: var(--dock-clear); }
.splash { display: grid; place-items: center; height: 100vh; font-size: 48px; }
.splash img { display: block; }
.ico { display: block; flex: none; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-weight: 500; }

/* ---------- top bar: large title on the page, a glass bar with the small title once it scrolls under ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--base); color: var(--ink);
  padding: calc(var(--safe-top) + 6px) 6px 6px;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
html.scrolled .topbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-line); }
.topbar-row { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.topbar-title {
  flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 17px/1.2 var(--font-display); letter-spacing: -.01em;
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
html.scrolled .topbar-title { opacity: 1; transform: none; }
.topbar-actions { display: flex; align-items: center; min-width: 44px; justify-content: flex-end; }
.topbar .icon-btn { color: var(--ink); }
.hero { padding: 0 0 2px; }
.large-title { font-size: var(--fs-display); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; padding: 2px 16px 6px; overflow-wrap: anywhere; }
.topbar-sub { display: flex; align-items: center; gap: 10px; padding: 4px 16px 0; font-size: var(--fs-label); color: var(--muted); }
.topbar-sub .progress { flex: 1; }

.icon-btn { flex: none; border: 0; background: none; width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--r-control); font-size: 20px; color: var(--muted); line-height: 1; }
.icon-btn.placeholder { visibility: hidden; }
/* small icon buttons look small but keep a 44×44 hit area; the negative margin keeps rows from growing */
.icon-btn.small { margin: -8px -8px -8px 0; }
.icon-btn.small .ico { width: 18px; height: 18px; }
.icon-btn.danger { color: var(--danger); }

.segmented { display: flex; margin: 8px 8px 0; background: var(--sunken); border-radius: var(--r-pill); padding: 2px; }
.segmented button { flex: 1; border: 0; background: none; color: var(--muted); min-height: 44px; padding: 7px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; }
.segmented button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- floating glass tab bar, with the + beside it; both slide away while scrolling down ---------- */
.tabbar {
  position: fixed; z-index: 20; bottom: var(--dock-bottom); left: var(--dock-side); right: var(--dock-side); height: var(--dock-h);
  display: flex; align-items: stretch; gap: 2px; padding: 4px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); border-radius: var(--r-pill); box-shadow: var(--shadow-2);
  transition: transform var(--dur) var(--ease-spring);
}
.app:has(.fab) .tabbar { right: calc(var(--dock-side) + var(--dock-h) + var(--s2)); }
.tabbar a { flex: 1 1 auto; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 4px; border-radius: var(--r-pill); font-size: var(--fs-label); line-height: 1.15; color: var(--glass-muted); font-weight: 600; white-space: nowrap; }
.tabbar a.active { color: var(--ink); }
.tab-icon { display: grid; place-items: center; width: 48px; height: 28px; border-radius: var(--r-pill); transition: background var(--dur-fast) var(--ease); }
.tabbar a.active .tab-icon { background: var(--pop); color: var(--on-pop); }
/* narrow phones: icons only (the names stay as labels for screen readers); German and Italian don't fit beside the + */
@media (max-width: 359px) {
  .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab-icon { height: 36px; }
}
html.bar-hidden .tabbar, html.bar-hidden .fab { transform: translateY(calc(100% + var(--dock-bottom) + 16px)); }

/* ---------- page & cards ---------- */
.page { padding: 14px 14px 24px; }
.cards { display: grid; gap: 10px; }
.card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
.card-emoji { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--base); border-radius: var(--r-control); }
.card-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-main .muted { font-size: 14px; }
.chev { color: var(--muted); display: inline-grid; }
.progress { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.progress div { height: 100%; background: var(--brand); border-radius: 3px; transition: width var(--dur-slow) var(--ease); }
.progress.light { margin: 0; }
/* Lists: archive mode and Archived lists (− / + on the left, or swipe the card sideways) */
.swipe-row { display: flex; align-items: center; gap: 10px; touch-action: pan-y; }
.swipe-card { flex: 1; min-width: 0; transition: transform var(--dur) var(--ease-spring); }
.swipe-card > .card { width: 100%; }
.swipe-sign { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 0; color: var(--surface); animation: sign-in var(--dur) var(--ease-spring); }
.swipe-sign.minus { background: var(--money-neg); }
.swipe-sign.plus { background: var(--money-pos); }
@keyframes sign-in { from { transform: scale(.4); opacity: 0; } }

.pill { font-size: var(--fs-label); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--base); color: var(--muted); white-space: nowrap; }
.pill.active { background: color-mix(in srgb, var(--projects) 22%, transparent); color: var(--ink); }
.pill.planning { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--ink); }

.empty { text-align: center; padding: 40px 24px; color: var(--muted); }
.empty-icon { font-size: 44px; margin-bottom: 8px; }
.empty-icon .ico { margin: 0 auto; color: var(--muted); }
.empty strong { color: var(--ink); font-size: 18px; font-family: var(--font-display); }
.empty p { margin: 6px 0 0; }

.section-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px 8px; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- rows (expenses etc.) ---------- */
.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.row:last-child { border-bottom: 0; }
.row-icon { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--base); border-radius: 50%; }
.row-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.row-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.row-main .muted { font-size: 13px; }
.row-amount { font-variant-numeric: tabular-nums; }
.rows.compact .row { padding: 8px 12px; cursor: default; }


/* balances */
.balances { list-style: none; margin: 0; padding: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.balance { padding: 8px 0; }
.balance-name { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.balance-bar { position: relative; }
.balance-bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.balance-bar > div { position: absolute; top: 0; height: 100%; border-radius: 6px; min-width: 4px; display: flex; align-items: center; }
.balance-bar .pos { left: 50%; background: color-mix(in srgb, var(--money-pos) 22%, transparent); }
.balance-bar .neg { right: 50%; background: color-mix(in srgb, var(--money-neg) 22%, transparent); justify-content: flex-end; }
.balance-name .pos { color: var(--money-pos); }
.balance-name .neg { color: var(--money-neg); }
.balance-name strong { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.balance-bar { height: 14px; }

/* ---------- checklist items ---------- */
.items { list-style: none; margin: 0; padding: 0; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.page > .items, .page > .items.done { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.item:last-child { border-bottom: 0; }
.item-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.qty { display: inline-block; margin-left: 8px; font-size: var(--fs-label); font-weight: 600; color: var(--brand-text); background: color-mix(in srgb, var(--brand) 10%, transparent); padding: 1px 7px; border-radius: var(--r-pill); }
.items.done .item-text, .item.is-done .item-text { color: var(--muted); text-decoration: line-through; }
.items.done .avatar { opacity: .8; }
.price { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* swipe items: right = tick (green behind), left = delete (red behind) */
.swipe-item { padding: 0; position: relative; touch-action: pan-y; }
.swipe-item.to-tick { background: color-mix(in srgb, var(--money-pos) 25%, var(--surface)); }
.swipe-item.to-delete { background: color-mix(in srgb, var(--money-neg) 25%, var(--surface)); }
.swipe-face { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; background: var(--surface); transition: transform var(--dur) var(--ease-spring); }
.swipe-item .item-text { cursor: text; }
.item.renaming { cursor: default; padding: 6px 8px 6px 14px; }
.item.landed { animation: landed var(--dur-slow) var(--ease-spring); }
@keyframes landed { from { transform: translateY(-14px) scale(.97); opacity: .3; } }
.swipe-hint { margin: 4px 2px 8px; }
.shop-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.shopping-now { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-text); font-weight: 600; font-size: 14px; }
.shopping-now.banner { display: flex; margin: 0 0 10px; }
.list-card.is-shopping { box-shadow: 0 0 0 2px var(--brand-text), var(--shadow); }
.avatar-stack { display: inline-flex; flex: 0 0 auto; }
.avatar-stack .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
/* Shopping mode: bigger rows and text, a bar on top, a flash when someone else ticks or adds */
.shopping-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; margin-bottom: 12px; background: var(--pop); color: var(--on-pop); border-radius: var(--radius); }
.shopping-bar-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; flex: 1 1 160px; min-width: 0; }
.shopping-mode .swipe-face { padding: 18px 16px; gap: 14px; font-size: 21px; }
.shopping-mode .check { transform: scale(1.25); }
html.shop-flash .page { animation: shop-flash .7s var(--ease); }
@keyframes shop-flash { 30% { background: color-mix(in srgb, var(--pop) 35%, transparent); } }
.inline-edit { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px 8px; background: var(--base); }

/* 44×44 hit area around a 26 px circle; the negative margin keeps the row height as it was */
.check {
  flex: none; width: 44px; height: 44px; margin: -9px; border: 0; background: none; padding: 0;
  display: grid; place-items: center; color: var(--on-pop); border-radius: 50%;
}
.check-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--muted);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.check:active .check-dot { transform: scale(.9); }
.check.on .check-dot { background: var(--lists); border-color: var(--lists); }
.check-dot .ico { width: 16px; height: 16px; stroke-width: 3; }

.quick-add { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: var(--radius); padding: 4px 6px 4px 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.quick-add-plus { color: var(--brand-text); display: inline-grid; }
.quick-add input { flex: 1; border: 0; outline: 0; background: none; padding: 10px 0; min-height: 44px; min-width: 0; }

.avatar { flex: none; border-radius: 50%; color: var(--on-dark); display: inline-grid; place-items: center; font-weight: 700; line-height: 1; }

/* ---------- projects ---------- */
.project .block { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; }
.block h2 { font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.block h2 .count { margin-left: auto; font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.block .items { margin: 0 -14px 8px; border-top: 1px solid var(--line); }
.block .items:empty { display: none; }
.block .item { background: none; padding: 10px 14px; min-height: 54px; }
.block .quick-add { box-shadow: none; background: var(--base); margin: 0; }
.block .rows { box-shadow: none; margin: 0 -14px 10px; border-radius: 0; border-top: 1px solid var(--line); background: none; }
.block .rows:empty { display: none; }
.block > .btn { margin-right: 6px; }
.notes { width: 100%; min-height: 90px; border: 0; resize: none; background: var(--base); border-radius: var(--r-control); padding: 12px; line-height: 1.5; }
.event { cursor: default; }
.dates { list-style: none; margin: 0 -14px 8px; padding: 0; border-top: 1px solid var(--line); }
.dates:empty { display: none; }
.date-row { border-bottom: 1px solid var(--line); }
.date-row .swipe-face { align-items: flex-start; }
.date-row .row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.date-row .row-main strong { overflow-wrap: anywhere; }
.cal-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; min-height: 44px; }
.bought-btn { min-height: 44px; flex: 0 0 auto; }
.date-badge { width: 48px; text-align: center; background: var(--base); border-radius: var(--r-control); padding: 4px 0; line-height: 1.1; }
.date-badge span { display: block; font-size: var(--fs-label); text-transform: uppercase; color: var(--brand-text); font-weight: 700; }
.date-badge strong { font-size: 18px; font-family: var(--font-display); }

/* settings */
.page > .block { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; }
.page > .block p { margin: 8px 0; }
.me-row { display: flex; align-items: center; gap: 12px; }
.me-row input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--base); border-radius: var(--r-control); padding: 10px; min-height: 44px; font-weight: 600; }
/* 44×44 button around a 30 px swatch */
.color-pick { width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; }
.color-pick span { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 1px var(--line); }
.color-pick.on span { border-color: var(--ink); }
.steps { padding-left: 20px; margin: 8px 0; }
.steps li { margin: 4px 0; }
.secret { display: flex; align-items: center; gap: 6px; background: var(--base); padding: 8px 10px; border-radius: var(--r-control); }
.secret code { flex: 1; font-size: var(--fs-label); overflow-wrap: anywhere; }

/* ---------- buttons, chips, fields ---------- */
.btn { border: 0; background: var(--base); color: var(--brand-text); min-height: 44px; min-width: 44px; padding: 10px 16px; border-radius: var(--r-control); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.block .btn, .card .btn { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.btn.primary { background: var(--brand-fill); color: var(--on-brand); }
.btn.big { padding: 14px 24px; font-size: 17px; }
.btn.small { padding: 7px 12px; font-size: 15px; }
.btn.tiny { padding: 4px 10px; font-size: var(--fs-label); white-space: nowrap; }
.btn.danger { color: var(--danger); }
.btn.wide { width: 100%; background: var(--surface); box-shadow: var(--shadow); }
.link { border: 0; background: none; color: var(--brand-text); min-height: 44px; min-width: 44px; padding: 6px 8px; font-weight: 600; }
.link.light { color: var(--ink); }
.link.strong { font-weight: 700; }
.link.small { font-size: var(--fs-label); padding: 0 0 0 8px; }

.fab {
  position: fixed; z-index: 20; right: var(--dock-side); bottom: var(--dock-bottom);
  width: var(--dock-h); height: var(--dock-h); border-radius: 50%; border: 0;
  background: var(--pop); color: var(--on-pop); display: grid; place-items: center; padding: 0;
  box-shadow: var(--shadow-2); transition: transform var(--dur) var(--ease-spring);
}
.fab .ico { width: 28px; height: 28px; stroke-width: 2.5; }
.fab:active { transform: scale(.94); transition-duration: var(--dur-fast); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: var(--fs-label); font-weight: 600; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.field input:not([type=checkbox]), .field select { border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; border-radius: var(--r-control); padding: 11px 12px; min-height: 44px; outline: 0; width: 100%; min-width: 0; }
.field input:focus, .field select:focus { border-color: var(--brand-text); }
/* drawn selects (WebKit ignores the height of native ones), with a chevron in the muted colour */
.field select, .map-select {
  -webkit-appearance: none; appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select:disabled { opacity: .7; }
.login .field { text-align: left; }
.house-currency { margin: 12px 0 4px; }
.foreign-toggle { margin-top: 10px; }
.amount-row { display: flex; gap: 8px; }
.amount-row input { flex: 1; }
.field .amount-row select { width: auto; flex: 0 0 auto; }
.fx-note { margin: 2px 0 0; }
.receipt { margin-top: 6px; }
.receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0; }
.receipt-head .link { flex: 0 0 auto; }
.receipt-row { display: flex; align-items: center; gap: 8px; }
.receipt-row .row-main { flex: 1; min-width: 0; }
.receipt-row.off .receipt-name, .receipt-row.off .money-input { text-decoration: line-through; opacity: .55; }
.receipt-name { min-width: 0; overflow-wrap: anywhere; }
.receipt-sum { margin: 6px 0 2px; }
.receipt-add { padding: 8px 0 2px; }
.receipt-name-input { flex: 1; min-width: 0; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; padding: 6px 0 !important; }
.receipt-row .icon-btn.small { flex: 0 0 auto; }
.receipt-row .money-input input { border: 0; padding: 8px 0; background: none; width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.receipt-off { color: var(--danger); margin: 2px 0 0; }
.receipt-row.by-item { flex-wrap: wrap; padding-bottom: 10px; }
/* Split by item: who each line is for. Chips that don't fit wait (invisible, still measurable) behind "+N". */
.item-who { flex-basis: 100%; }
.item-who-chips { position: relative; gap: 6px; }
.item-chip { padding: 4px 12px 4px 6px; font-size: 15px; font-weight: 600; }
.item-chip:first-child, .item-chip[aria-expanded] { padding: 4px 14px; }
.item-chip:first-child.on { padding: 4px 10px; gap: 4px; } /* the ✓ shouldn't push a person behind +N */
.item-chip.spill { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.item-chip-name { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-check { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--on-brand); color: var(--brand-fill); }
.item-for { margin: 4px 0 0; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); min-height: 44px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--brand-fill); color: var(--on-brand); border-color: var(--brand-fill); }
.emoji-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.emoji-pick { border: 2px solid transparent; background: var(--base); width: 44px; height: 44px; border-radius: var(--r-control); font-size: 22px; padding: 0; }
.emoji-pick.on { border-color: var(--brand-text); }
.split-toggle { flex-direction: row !important; align-items: center; gap: 10px; min-height: 44px; }
.split-toggle input[type=checkbox], .split-toggle input[type=radio] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--brand-fill); }
.item-default { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.item-default legend { padding: 0; font-weight: 600; }
.push { margin-left: auto; }
.share-input { width: 90px; min-height: 44px; text-align: right; border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px 8px; background: var(--surface); }

/* ---------- bottom sheet ---------- */
/* Never under the status bar or notch: the backdrop keeps --safe-top clear (installed iPhone app, viewport-fit=cover),
   and its bottom follows the keyboard (--kb), so the footer's Save stays above it. */
.sheet-backdrop { position: fixed; top: var(--vvtop, 0px); left: 0; right: 0; bottom: var(--kb, 0px); z-index: 50; background: var(--scrim); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: calc(var(--safe-top) + 8px); animation: fade var(--dur-fast) var(--ease); }
.sheet {
  width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; outline: none;
  background: var(--base); border-radius: var(--r-sheet) var(--r-sheet) 0 0; animation: up var(--dur) var(--ease-spring);
  padding-bottom: var(--safe-bottom); transition: transform var(--dur-fast) var(--ease), height var(--dur) var(--ease);
}
.sheet.full { height: 100%; }
.sheet.dragging { transition: none; }
.sheet-top { flex-shrink: 0; touch-action: none; cursor: grab; border-bottom: 1px solid var(--line); }
.sheet-grab { width: 36px; height: 5px; border-radius: var(--r-pill); background: var(--muted); opacity: .5; margin: 6px auto 0; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; padding: 2px 8px 6px; }
.sheet-head strong { font-size: 17px; font-family: var(--font-display); text-align: center; }
.sheet-head-end { justify-self: end; }
.sheet-body { flex: 1; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.sheet-foot { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.sheet-foot .btn { flex: 1; min-height: 50px; font-size: 17px; }
.sheet-foot .btn:not(.primary) { background: var(--surface); }
.sheet-foot .btn:disabled, .sheet-head-end .link:disabled { opacity: .5; }
.confirm-text { margin: 0 0 12px; white-space: pre-line; }
.sheet-actions { display: flex; gap: 8px; margin-top: 8px; }
.sheet-actions .btn { flex: 1; background: var(--surface); }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- toasts: glass pills just above the tab bar ---------- */
.toasts { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(var(--dock-bottom) + var(--dock-h) + 12px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  max-width: 528px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); color: var(--ink); padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; animation: drop var(--dur) var(--ease-spring); box-shadow: var(--shadow-2);
}
@keyframes drop { from { transform: translateY(12px); opacity: 0; } }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--base); }
.login-card { background: var(--surface); border-radius: var(--r-card); padding: 36px 28px; text-align: center; max-width: 360px; width: 100%; box-shadow: var(--shadow-2); }
.login .logo { display: block; margin: 0 auto 4px; }
.login .logo img { display: block; width: 200px; height: auto; margin: 0 auto; }
.login h1 { font-size: 28px; margin: 18px 0 4px; letter-spacing: -.03em; }
.login p { color: var(--muted); margin: 0 0 24px; }

/* ---------- Claude ---------- */
.ask-card { width: 100%; border: 0; text-align: left; margin-bottom: 12px; font: inherit; }
.ask-card .card-emoji { color: var(--claude); background: color-mix(in srgb, var(--claude) 14%, transparent); font-size: 26px; }
.ai-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-control); cursor: pointer; }
.ai-busy { color: var(--brand-text); font-weight: 600; animation: pulse 1.2s infinite alternate; }
@keyframes pulse { from { opacity: .45; } }
.ai-note { background: color-mix(in srgb, var(--brand) 10%, transparent); padding: 10px 12px; border-radius: var(--r-control); margin: 0 0 14px; }
.items.draft { border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.items.draft .item { cursor: default; padding: 8px 12px; gap: 8px; }
.items.draft .inline-edit { min-width: 0; }
.items.draft .qty-edit { flex: 0 0 72px; }
.small { font-size: var(--fs-label); }
.paid-btn { margin-top: 18px; }
.field.scan { flex: 0 0 auto; }
.field.scan .btn { padding: 11px 12px; }
button:disabled { opacity: .5; }

/* ---------- houses & photos ---------- */
img.avatar { object-fit: cover; background: var(--line); }
.house-pill { flex: none; border: 0; background: var(--sunken); color: var(--ink); height: 44px; min-width: 44px; padding: 0 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 20px; }
.house-pill .ico { width: 16px; height: 16px; color: var(--muted); }
.tick { color: var(--brand-text); display: inline-grid; }
.member-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.member-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 500; }
.member-name { min-width: 0; overflow-wrap: anywhere; }
.wide-primary { width: 100%; margin: 4px 0 8px; }
.page > .block > .btn.wide { margin-top: 8px; background: var(--base); box-shadow: none; }
.login-card form { text-align: left; margin-top: 8px; }
.legal-links { text-align: center; font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.legal-links a { color: var(--muted); text-decoration: underline; }
.danger-text { color: var(--danger) !important; }
.segmented.light { margin: 12px 0; }

.map-select { max-width: 55%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px 32px 6px 8px; background-color: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.pos-text { color: var(--money-pos); font-variant-numeric: tabular-nums; }
.neg-text { color: var(--money-neg); font-variant-numeric: tabular-nums; }
.skip-list { font-size: 14px; color: var(--muted); padding-left: 18px; }
.member-actions { display: inline-flex; gap: 8px; }
.member-list .pill { padding: 2px 7px; }
.merge-box { background: var(--base); border-radius: var(--r-control); padding: 10px 12px; margin-bottom: 10px; }
.merge-box p { margin: 0 0 8px; }
.guest-add { box-shadow: none; background: var(--base); margin-bottom: 12px; }

/* ---------- Money: balance hero, confetti ---------- */
.hero-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: var(--r-card, var(--radius)); box-shadow: var(--shadow); padding: 18px 18px 12px; margin-bottom: 14px; }
.hero-label { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hero-amount { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero-card.owed .hero-amount { color: var(--money-pos); }
.hero-card.owe .hero-amount { color: var(--money-neg); }
.hero-people { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.hero-people li { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.hero-people li > span { min-width: 0; overflow-wrap: anywhere; }
.hero-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; font-size: 14px; }
.hero-month { font-variant-numeric: tabular-nums; }
.hero-foot .link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti span { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; background: var(--pop); animation: confetti-fall 2.4s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms); }
.confetti span:nth-child(3n) { background: var(--brand); }
.confetti span:nth-child(3n+1) { background: var(--money-pos); }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }

/* ---------- Money: amount-first sheets ---------- */
.amount-hero { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 6px; }
.amount-hero-field { display: flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 0; flex: 0 1 auto; }
.amount-hero-cur { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--muted); }
.amount-hero .amount-hero-field input:not([type=checkbox]) { font-family: var(--font-display); font-size: 48px !important; /* beats the 16px floor (line ~115); bigger is fine for iOS */ font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  border: 0; background: none; color: var(--ink); max-width: 100%; min-width: 0; padding: 0; text-align: left; }
.amount-hero-field input:focus-visible { outline: 0; }
.amount-hero-field:focus-within { box-shadow: 0 3px 0 0 var(--brand-text); }
.amount-hero-currency { flex: 0 0 auto; width: auto; font-size: 16px; min-height: 44px; }
.center-row { display: flex; justify-content: center; margin: 4px 0 12px; }
.center-text { text-align: center; }
.chips.center { justify-content: center; }
.chips.scroll-row { flex-wrap: nowrap; overflow-x: auto; margin: 4px -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
.chips.scroll-row::-webkit-scrollbar { display: none; }
.chips.scroll-row .chip { flex: 0 0 auto; }
.summary { list-style: none; margin: 4px 0 12px; padding: 0; background: var(--base); border-radius: var(--radius); }
.summary > li + li { border-top: 1px solid var(--line); }
.summary-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; }
.summary-label { color: var(--muted); flex: 0 0 auto; }
.summary-value { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; text-align: right; }
.summary-row .ico { color: var(--muted); transition: transform var(--dur-fast) var(--ease); flex: 0 0 auto; }
.summary-row[aria-expanded=true] .ico { transform: rotate(90deg); }
.summary-pick { padding: 0 14px 12px; }
.summary-pick .field { margin-bottom: 0; }

/* ---------- Money: balances and record a payment ---------- */
.balance-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pay-pair { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); flex: 0 0 auto; }
.pay-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-person { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600; max-width: 40%; text-align: center; overflow-wrap: anywhere; }

/* keyboard open (set by keepFocusedFieldVisible): no home-indicator padding needed under the sheet */
html.kb-open .sheet { padding-bottom: 0; }
html.kb-open .sheet-body { padding-bottom: 24px; }
.house-icons { gap: 4px; margin: 10px 0 4px; }
.house-icons .emoji-pick { font-size: 20px; padding: 0; }
.house-icon { display: block; border-radius: 22%; box-shadow: 0 0 0 1px var(--house-ring); }
.house-emoji { line-height: 1; }
.row-icon:has(.house-icon) { background: none; }
h2.with-icon { display: flex; align-items: center; gap: 8px; }

/* ---------- money inputs, custom split, settle ---------- */
.money-input { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); padding: 0 12px; min-height: 44px; }
.money-input:focus-within { border-color: var(--brand-text); }
.money-input .cur { color: var(--muted); font-weight: 600; }
.field .money-input input:not([type=checkbox]) { border: 0; padding: 11px 0; background: none; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.money-input.small { flex: 0 0 120px; padding: 0 10px; }
.field .money-input.small input:not([type=checkbox]) { padding: 8px 0; text-align: right; }
.split-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.split-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.split-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.split-total { margin: 8px 2px 0; font-size: 14px; font-weight: 600; }
.split-total.ok { color: var(--money-pos); }
.split-total.off { color: var(--danger); }
.settle-who { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.settle-arrow { color: var(--muted); display: inline-grid; }
.settle-text { text-align: center; margin: 0 0 16px; }
.toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.toast.offline { display: flex; align-items: center; gap: 8px; }
.toast-action { border: 0; background: var(--pop); color: var(--on-pop); font-weight: 700; border-radius: var(--r-pill); min-height: 36px; padding: 5px 14px; }

/* ---------- header ⋯ menu ---------- */
.menu-wrap { position: relative; }
.menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 200px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; padding: 6px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); border-radius: var(--r-card); box-shadow: var(--shadow-2);
  transform-origin: top right; animation: pop var(--dur-fast) var(--ease-spring);
}
.menu-item { min-height: 44px; border: 0; background: none; color: var(--ink); text-align: left; padding: 10px 14px; border-radius: var(--r-control); font-weight: 600; white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--sunken); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }

/* ---------- loading skeletons ---------- */
.skeleton { display: grid; gap: 10px; }
.sk {
  height: 72px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--sunken) 30%, color-mix(in srgb, var(--ink) 11%, transparent) 50%, var(--sunken) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
.sk-row { height: 52px; }
.sk-block { height: 140px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- screen changes (data-nav on <html>, set by the router) ----------
   Only the new screen's content moves, and only by transform and opacity: the bars stay put, nothing blocks a tap,
   and the fixed + and sheets (siblings of .page) aren't carried along. */
html[data-nav] .view > .hero, html[data-nav] .view > .page { animation: view-in var(--dur) var(--ease) both; }
html[data-nav=forward] .view > :is(.hero, .page) { animation-name: view-from-right; }
html[data-nav=back] .view > :is(.hero, .page) { animation-name: view-from-left; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes view-from-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes view-from-left { from { opacity: 0; transform: translateX(-32px); } }

/* solid instead of glass: no blur support, Reduce Transparency, or Increase Contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: var(--surface); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass: var(--surface); --glass-blur: none; --glass-line: var(--line); --glass-muted: var(--muted); }
  html.scrolled .topbar { background: var(--base); }
}

/* Reduce Motion: no animations or transitions anywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Settings: grouped rows and sub-pages ---------- */
.settings-rows { margin-bottom: 16px; }
.settings-row { color: var(--ink); text-decoration: none; min-height: 56px; }
.settings-row.danger-text strong { color: var(--money-neg); }
.settings-icon { display: inline-grid; flex: 0 0 auto; }
.settings-value { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 0; }
.member-head { display: flex; justify-content: center; margin: 4px 0 12px; }
.sheet-list { display: grid; gap: 8px; }
.danger-zone .btn { margin-top: 8px; }

/* ---------- Money: Spending ---------- */
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.month-nav strong { font-family: var(--font-display); font-size: var(--fs-title); text-transform: capitalize; text-align: center; }
.month-nav .icon-btn:disabled { opacity: .35; }
.spending-hero { gap: 4px; }
.bars { list-style: none; margin: 0 0 8px; padding: 12px 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.bar-label { min-width: 0; overflow-wrap: anywhere; }
.bar-value { font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 10px; border-radius: 6px; background: var(--base); overflow: hidden; }
.bar-track span { display: block; height: 100%; min-width: 4px; border-radius: 6px; background: var(--brand); }

/* ---------- Money: recurring bills ---------- */
.recurring-row { gap: 8px; }
.recurring-row.is-paused .row-main { opacity: .7; }
.link-row { border: 0; background: none; font: inherit; color: var(--ink); text-align: left; padding: 0; display: flex; flex-direction: column; min-height: 44px; justify-content: center; }

/* ---------- Settings → Notifications ---------- */
.notify-types { display: grid; gap: 10px; margin-top: 12px; }
.notify-types .split-toggle { align-items: flex-start; min-height: 44px; }