/* Wireframe components, built only on design/tokens.css variables. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: var(--text-md)/var(--leading-body) var(--font-body); }
h1, h2, h3 { font-family: var(--font-head); line-height: var(--leading-head); font-weight: var(--weight-head); margin: 0; }
a { color: var(--color-primary); }
:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
/* No grey flash on tap and no double-tap zoom wait on phones. */
button, a, input, select, textarea, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Page chrome around the phones */
.wf-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-line); }
.wf-head h1 { font-size: var(--text-xl); }
.wf-head a, .wf-theme { min-height: var(--tap-min); display: inline-flex; align-items: center; }
.wf-theme { padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--color-muted-bg); color: var(--color-text); font: inherit; cursor: pointer; }
.wf-note { margin: var(--space-4); max-width: 60ch; color: var(--color-muted); }
.wf-states { display: flex; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-4); justify-content: center; align-items: flex-start; }
.wf-state { margin: 0; }
.wf-state figcaption { font-weight: var(--weight-bold); margin-bottom: var(--space-2); }

/* Phone frame */
.phone { width: 320px; max-width: calc(100vw - 2 * var(--space-4)); height: 700px; display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 28px; overflow: hidden; }
.screen { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; background: radial-gradient(circle at 90% 6%, color-mix(in srgb, var(--color-primary) var(--wash-blob-alpha), transparent) 0, transparent 45%), radial-gradient(circle at 5% 40%, color-mix(in srgb, var(--color-primary) var(--wash-blob-alpha), transparent) 0, transparent 40%), linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-bg) 100%), var(--color-bg); background-attachment: local; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-4) calc(56px + var(--space-2) + var(--space-5)); }
.screen::-webkit-scrollbar { display: none; }
.screen-title { font-size: var(--text-xl); }
.label, .hint { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

/* Surfaces and rows */
.card { background: color-mix(in srgb, var(--color-surface) var(--card-glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%); border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--weight-bold); }
.conv { background: var(--color-primary-soft); box-shadow: none; }
.conv .hero-top { align-items: center; }
.eye-btn { flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
.eye-btn[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary); }
.vis-btn { min-width: var(--tap-min); background: var(--color-muted-bg); color: var(--color-text); }
.vis-btn[aria-pressed="true"] { background: var(--color-muted-bg); color: var(--color-muted); }
/* Three across when they fit; on narrow phones two plus one full width, never clipped. */
.stat-list { margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.stat-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; }
.stat-list > div + div { border-top: 1px solid var(--color-line); }
.stat-list dt { color: var(--color-muted); font-size: var(--text-sm); }
.stat-list dd { margin: 0; font-weight: 700; }
.big { font-size: var(--text-xl); }
.hero { background: linear-gradient(135deg, var(--color-hero-from), var(--color-hero-to)); color: var(--color-on-hero); box-shadow: var(--shadow-md); }
.hero .label, .hero .hint, .hero .stat-list dt { color: var(--color-on-hero-muted); }
.hero .tip-btn { color: var(--color-on-hero); }
.hero .stat-list { background: color-mix(in srgb, var(--color-on-hero) var(--hero-glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.hero .stat-list > div + div { border-top-color: color-mix(in srgb, var(--color-on-hero) 18%, transparent); }
.big { margin: 0; font-family: var(--font-head); font-size: var(--text-2xl); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
.positive { color: var(--color-positive); }
.warning { color: var(--color-warning); }
.danger { color: var(--color-danger); }
.list { list-style: none; margin: 0; padding: 0; }
.screen a:not(.btn):not(.btn-quiet) { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.list li > a { flex: 1; align-self: stretch; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
.list li:last-child { border-bottom: 0; }
.list small { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.row-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.btn-small { min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-lg); background: var(--color-muted-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.list-title { font-size: var(--text-lg); }
.muted-item { color: var(--color-muted); }
.link-tap { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.amounts { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-muted-bg); font-size: var(--text-xs); color: var(--color-muted); }
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--color-line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--color-positive); }
.meter i.warning { background: var(--color-warning); }
.meter i.danger { background: var(--color-danger); }
/* Insights by month: blue, deeper for months with more spending (owner, 19 Oct). */
.month-bars .meter i { background: color-mix(in srgb, var(--color-primary) calc(35% + var(--share) * 0.65), var(--color-primary-soft)); }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label, .field legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field legend { padding: 0; }
.input { width: 100%; min-height: 48px; padding: 0 var(--space-3); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); font: inherit; }
/* iPhone (WebKit) gives date/time inputs and selects an intrinsic width that overflows their box, and zooms in on focus below 16px. */
.input, input[type="date"], input[type="time"], select { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; text-align: left; font-size: max(16px, 1rem); }
/* Date boxes: a fixed 44px with a matching line-height, so Safari centres the date instead of drawing it at the top. */
.input[type="date"] { height: 44px; min-height: 44px; line-height: 42px; }
.input[type="time"] { height: 44px; min-height: 44px; line-height: 42px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }
select.input { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
/* Amount and its currency in one box, one height, one label. */
.money-group { display: flex; align-items: stretch; min-height: 56px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; }
.money-group:focus-within { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.money-group .input { border: 0; border-radius: 0; min-height: 56px; background-color: transparent; }
.money-group .input:focus-visible { outline: none; }
.money-group select.currency { flex: 0 0 auto; width: auto; min-height: 40px; align-self: center; margin: 0 var(--space-2); padding-left: var(--space-3); border: 0; border-radius: var(--radius-pill); background-color: var(--color-muted-bg); font-weight: var(--weight-bold); }
select option { background: var(--color-surface); color: var(--color-text); }
.input::placeholder { color: var(--color-muted); opacity: 1; }
.input.amount { font-family: var(--font-head); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.input[aria-invalid="true"] { border: 2px solid var(--color-danger); }
.field-error { margin: 0; font-size: var(--text-sm); color: var(--color-danger); }
.calc { margin: 0; font-size: var(--text-xs); color: var(--color-positive); font-weight: var(--weight-bold); }
.calc[hidden] { display: none; }
/* A value the app worked out reads lighter than one you typed. */
.input.is-calculated { color: var(--color-muted); }
.picked { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.grid3 > * { min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-field .chips { display: none; }
.shop-field.open .chips { display: flex; margin-top: var(--space-2); }
.chip { min-height: var(--tap-min); display: inline-flex; align-items: center; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--color-muted-bg); color: var(--color-text); font: inherit; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--weight-bold); }
/* Date chips look 32px tall so Add stays short; the ::before keeps a 44px tap area. */
.date-chips .chip { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); position: relative; }
.date-chips .chip::before { content: ""; position: absolute; inset: -6px 0; }
/* "Other date": a transparent date input over the chip, its calendar button stretched to cover it, so the tap itself opens the native calendar (showPicker() is blocked inside the review frame). */
.chip-date { position: relative; display: inline-flex; }
.chip-date-input { position: absolute; inset: -6px 0; width: 100%; height: auto; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.chip-date-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); padding: var(--space-1); background: var(--color-muted-bg); border: 0; border-radius: var(--radius-lg); }
.seg button { min-height: var(--tap-min); border: 0; border-radius: calc(var(--radius-lg) - 4px); background: transparent; color: var(--color-muted); font: inherit; font-weight: var(--weight-bold); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--color-raised); color: var(--color-primary); box-shadow: var(--shadow-card); }
/* Top-level switch (Expense / Money in): underline tabs, a level above the pill switch below it. */
.seg.tabs { padding: 0; gap: 0; background: transparent; border-bottom: 1px solid var(--color-line); border-radius: 0; }
.seg.tabs button { border-radius: 0; color: var(--color-muted); }
.seg.tabs button[aria-pressed="true"] { background: transparent; color: var(--color-primary); box-shadow: inset 0 -3px 0 var(--color-primary); }
.toggle { display: flex; justify-content: space-between; align-items: center; min-height: var(--tap-min); gap: var(--space-2); }
.toggle input { width: 24px; height: 24px; accent-color: var(--color-primary); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); }
.choice input { width: 24px; height: 24px; margin: 0; accent-color: var(--color-primary); }
.choice label { flex: 1; min-height: var(--tap-min); display: flex; align-items: center; }
/* Inline: the padding gives a 44px target without making the sentence's line taller. */
.tip-btn { display: inline; padding: 12px 4px; margin: -12px 0; border: 0; background: none; color: var(--color-primary); font: inherit; text-decoration: underline; cursor: pointer; }
.tip { margin: 0; padding: var(--space-3); border-radius: var(--radius-lg); border: 0; background: var(--color-muted-bg); font-size: var(--text-sm); }

/* Buttons */
.btn { min-height: 52px; width: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary-glow), var(--color-primary)); color: var(--color-on-primary); font: inherit; font-weight: var(--weight-heavy); text-decoration: none; box-shadow: var(--shadow-sm); cursor: pointer; }
.btn-quiet { min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-lg); background: var(--color-muted-bg); color: var(--color-text); font: inherit; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(0.94); }
.btn-quiet:hover, .btn-small:hover, .chip:hover { background: var(--color-primary-soft); }
.chip[aria-pressed="true"]:hover { background: var(--color-primary-soft); filter: brightness(0.96); }
.btn:active, .btn-quiet:active, .btn-small:active, .chip:active, .seg button:active { transform: scale(0.98); }
@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-quiet, .btn-small, .chip, .seg button, .eye-btn { transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out); }
}
.btn-danger { background: var(--color-danger); color: var(--color-on-danger); }
.more { display: flex; flex-direction: column; gap: var(--space-3); }
.more[hidden] { display: none; }
.push-down { margin-top: auto; }

/* Empty and error states */
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); padding: var(--space-5) var(--space-3); }
.empty h3 { font-size: var(--text-lg); }
.empty p { margin: 0; color: var(--color-muted); }
.alert { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); border: 2px solid var(--color-danger); background: var(--color-surface); }
.alert strong { color: var(--color-danger); }
.alert p { margin: 0; }
.alert-warn { border-color: var(--color-warning); }
.alert-warn strong { color: var(--color-warning); }

/* Bottom tab bar: Home, Add, Receipts, Insights, More */
.tabbar { position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); background: var(--color-surface); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { position: relative; min-height: 56px; border: 4px solid transparent; border-radius: var(--radius-xl); background-clip: padding-box; display: flex; align-items: center; justify-content: center; font-size: 0; color: var(--color-muted); text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Icons only (owner, 19 Oct); the name shows in a bubble on long press, hover or keyboard focus. */
.tab-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap; background: var(--color-text); color: var(--color-bg); box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.tabbar a:hover .tab-tip, .tabbar a:focus-visible .tab-tip, .tabbar a.show-tip .tab-tip { opacity: 1; }
.tabbar a:first-child .tab-tip { left: 0; transform: none; }
.tabbar a:last-child .tab-tip { left: auto; right: 0; transform: none; }
/* Tab icons: 20px line icons (24px box, 2px stroke), drawn with a mask so they take the label's colour. */
.tabbar a[data-tab="home"], .tabbar a[href="home.html"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010.5%2012%203l9%207.5V20a1%201%200%200%201-1%201h-5v-6h-6v6H4a1%201%200%200%201-1-1z%27%2F%3E%3C%2Fsvg%3E"); }
.tabbar a[data-tab="add"], .tabbar a[href="add.html"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%208v8M8%2012h8%27%2F%3E%3C%2Fsvg%3E"); }
.tabbar a[data-tab="receipts"], .tabbar a[href="receipts.html"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h12v18l-3-2-3%202-3-2-3%202z%27%2F%3E%3Cpath%20d%3D%27M9%208h6M9%2012h6%27%2F%3E%3C%2Fsvg%3E"); }
.tabbar a[data-tab="insights"], .tabbar a[href="insights.html"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2020v-8M12%2020V5M19%2020v-11%27%2F%3E%3C%2Fsvg%3E"); }
.tabbar a[data-tab="budgets"], .tabbar a[href="budgets.html"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%203v9h9%27%2F%3E%3C%2Fsvg%3E"); }
.tabbar a[data-tab="more"], .tabbar a[href="settings.html"] { --tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2712%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2712%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E"); }
.tabbar a::before { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--tab-icon) center / contain no-repeat; mask: var(--tab-icon) center / contain no-repeat; }
.tabbar a[aria-current="page"] { color: var(--color-primary); font-weight: var(--weight-bold); background-color: var(--color-primary-soft); }
.screen > .row:first-child:has(.screen-title) { position: sticky; top: calc(-1 * var(--space-5)); z-index: 2; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) 0; padding: var(--space-4); }
/* Frosted glass on the bars (owner's pick): content scrolls behind them; amounts stay on solid cards. */
.tabbar, .screen > .row:first-child:has(.screen-title) { background: color-mix(in srgb, var(--color-surface) var(--glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%); }
@media (prefers-reduced-transparency: reduce) {
  .card { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabbar, .screen > .row:first-child:has(.screen-title) { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--color-surface); }
  .tabbar, .screen > .row:first-child:has(.screen-title) { background: var(--color-surface); }
}
.facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts small { display: block; font-weight: 400; color: var(--color-muted); }
.list li > span:first-child { min-width: 0; overflow-wrap: break-word; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.top-row { align-items: flex-start; }
.show-in { flex: 0 0 auto; width: 9.5rem; }
.move-pair { display: flex; flex-direction: column; gap: 2px; }
.move-pair button { min-width: var(--tap-min); min-height: 24px; padding: 0; font-size: 0.7rem; line-height: 1; }
.move-pair.single button { min-height: var(--tap-min); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.row.stack { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.row-link { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; min-height: var(--tap-min); }
.row-link::after { content: "\203A"; color: var(--color-muted); font-size: 1.25rem; }
.row-link > :first-child { flex: 1; min-width: 0; overflow-wrap: break-word; } /* the amount sits by the arrow, not mid-row */
.list li > a.row-link { align-self: stretch; }
.card { position: relative; }
.card-edit { align-self: flex-end; font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; }
.card-edit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.period { display: flex; flex-direction: column; gap: var(--space-2); }
.period-btn { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-lg); background: var(--color-muted-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: left; }
.period-btn .label { color: var(--color-muted); }
.period-btn span:nth-child(2) { flex: 1; }
.period-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.period-panel, .include-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.period-panel[hidden], .include-panel[hidden] { display: none; }
.meter.tall { height: 24px; overflow: visible; }
.meter.tall i { position: relative; border-radius: var(--radius-pill); background: var(--color-primary); }
.meter.tall i span { position: absolute; font-style: normal; top: 0; right: var(--space-3); line-height: 24px; white-space: nowrap; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-on-primary); }
.meter.tall i.short span { right: auto; left: 100%; margin-left: var(--space-2); color: var(--color-text); }
.period-range { margin: 0; }
.period-custom[hidden] { display: none; }
.seg-bar { display: flex; gap: 2px; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-line); }
.seg-bar i { display: block; height: 100%; }
.seg-bar .needs { background: var(--color-primary); }
.seg-bar .wants { background: color-mix(in srgb, var(--color-primary) 60%, var(--color-surface)); }
.seg-bar .savings { background: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface)); }
.row[class*="key-"] > span:first-child::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: var(--radius-pill); }
.row.key-needs > span:first-child::before { background: var(--color-primary); }
.row.key-wants > span:first-child::before { background: color-mix(in srgb, var(--color-primary) 60%, var(--color-surface)); }
.row.key-savings > span:first-child::before { background: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface)); }
.facts { grid-template-columns: repeat(6, 1fr); }
.facts div { grid-column: span 2; }
.facts dt { font-size: var(--text-xs); }
.facts dd { font-size: var(--text-md); }
.facts dd small { font-size: var(--text-xs); }
.facts dd.best, .facts dd.worst { font-weight: 700; }
.phone { position: relative; }
.tour-focus { position: relative; z-index: 2; box-shadow: 0 0 0 100vmax rgba(8, 16, 32, 0.62); border-radius: var(--radius-xl); }
.tour-card { position: absolute; left: var(--space-3); right: var(--space-3); bottom: 72px; z-index: 3; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.tour-card h3, .tour-card p { margin: 0; }
.tour-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-muted); }
li.tour-focus { padding-inline: var(--space-3); }

/* Figures stay on one line so the fit rule (wireframe.js, format.js) can measure them and shrink the text. */
.big, .facts dd { white-space: nowrap; }
.facts dd small { white-space: normal; }

.help-btn { position: relative; flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); text-decoration: none; font: italic 700 1rem/1 Georgia, serif; }
.help-btn::before { content: ""; position: absolute; inset: -6px; }
.month-switch { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); padding: 0 var(--space-2); border-radius: var(--radius-lg); background: var(--color-muted-bg); font-weight: var(--weight-bold); }
.month-switch .btn-small { min-width: var(--tap-min); min-height: var(--tap-min); font-size: 1.5rem; line-height: 1; }
.month-switch small { display: block; font-weight: 400; color: var(--color-muted); text-align: center; }

/* Number format: the picked way of showing numbers is bold, the other is quiet. */
.card[data-mode="full"] .row > span:first-child, .card[data-mode="short"] .row > .num { color: var(--color-text); font-weight: var(--weight-bold); }
.card[data-mode="full"] .row > .num, .card[data-mode="short"] .row > span:first-child { color: var(--color-muted); font-weight: 400; }
.card[data-mode="short"] .row > .num { color: var(--color-primary); }
.nf-head .label { margin: 0; }

/* Top bar: title on the left; currency pill, eye and guide on the right. */
.top-row { align-items: center; }
.top-actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; margin-left: auto; }
.top-row > div:first-child { min-width: 0; }
.top-actions .show-in { width: auto; }
.top-actions .show-in select.input { min-height: 36px; width: auto; padding: 0 26px 0 var(--space-3); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; border: 0; border-radius: var(--radius-pill); background-color: var(--color-muted-bg); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-bold); appearance: none; -webkit-appearance: none; }
.top-actions .eye-btn { position: relative; width: 36px; height: 36px; background: var(--color-muted-bg); }
.top-actions .eye-btn::before { content: ""; position: absolute; inset: -4px; }
.top-actions .eye-btn[aria-pressed="true"] { background: var(--color-primary-soft); }