/* Olivra Plan — dark sage theme from the Claude Design "Olivra Plan App" (organic design system).
   Every colour is a token below; components never use a literal colour. */
@font-face { font-family: "Caprasimo"; src: url("/assets/caprasimo-latin-3e11362a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/figtree-latin-7367b47d.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0b0d0b; --header: #101410; --surface: #141914; --field: #0e120e;
  --line: #2e372e; --control: #6b7d6b;
  --ink: #f3e7d3; --ink-2: #d9ceb8; --ink-3: #c9c2ae; --muted: #b5b09f; --placeholder: #8d9a8a;
  --accent: #8fb083; --accent-hover: #a9c79a; --accent-ink: #0b0d0b;
  --highlight: #1c2a1f; --highlight-hover: #243324; --highlight-line: #4a6b4d; --highlight-strong: #6f9468;
  --brand: #34493b; --nav-current: #2a3d2d;
  --withdrawal: #e8b98a; --withdrawal-bg: #3a2c1c; --switch-off: #3a453a;
  --good: #b9e0ab; --good-bg: #1f3524;
  --building: #e6c46a; --building-bg: #33290f; --estimate: #c9a24a;
  --critical: #f2b19c; --critical-bg: #3a1f17;
  --critical-link: #e8a58a; --critical-link-hover: #f3c2ad; --critical-strong: #c67139; --critical-strong-hover: #d98550;
  --series-1: #8fb083; --series-2: #c67139;
  --overlay: rgb(5 8 5 / .55); --shadow: rgb(0 0 0 / .55);
  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-card: 20px; --radius-pill: 999px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font-body); }
a { color: var(--accent-hover); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 2.125rem; margin: 0 0 1rem; }
h2 { font-size: 1.375rem; margin: 0 0 .5rem; }
h3 { font-size: 1.1rem; }
.muted { color: var(--muted); font-size: .9rem; margin: 0 0 .75rem; }
.fine { font-size: .8rem; margin: .75rem 0 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.negative { color: var(--critical); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
::selection { background: var(--highlight-line); }
input::placeholder { color: var(--placeholder); }
select option { background: var(--surface); color: var(--ink); }

/* Top bar: logo mark, name and household, navigation with the current page as a filled pill */
.topbar { background: var(--header); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 5; }
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: .75rem max(1.5rem, env(safe-area-inset-right)) .75rem max(1.5rem, env(safe-area-inset-left)); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand-mark { flex: none; display: block; }
.brand-mark-tile { fill: var(--brand); }
.brand-mark-ring { fill: none; stroke: var(--ink); }
.brand-mark-dot { fill: var(--ink); }
.brand-name { display: block; font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.1; }
.brand small { display: block; color: var(--muted); font-size: .8rem; }
.topbar nav { display: flex; gap: .375rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.menu-toggle { display: none; }
.topbar nav a, .topbar nav button { color: var(--muted); text-decoration: none; font: inherit; background: none; border: 0; border-radius: var(--radius-pill); padding: .55rem 1rem; min-height: 0; cursor: pointer; white-space: nowrap; }
.topbar nav a:hover, .topbar nav button:hover { background: var(--highlight); color: var(--ink); }
.topbar nav a[aria-current] { color: var(--ink); background: var(--nav-current); font-weight: 700; }
.topbar nav a[aria-current]:hover { background: var(--brand); }
/* Language: an EN | PT pill toggle */
/* Account menu: initial in a circle, opens a panel with who you are, Manage account and Sign out (dropdown_controller.js) */
.account-menu { position: relative; }
.account-toggle { display: none; }
.topbar nav .account-toggle { width: 40px; height: 40px; padding: 0; justify-content: center; align-items: center; border-radius: var(--radius-pill); border: 1.5px solid var(--control); background: var(--nav-current); color: var(--ink); font-weight: 700; }
.topbar nav .account-toggle[aria-expanded="true"] { background: var(--brand); }
.dropdown-ready .account-toggle { display: inline-flex; }
.account-panel { display: flex; flex-direction: column; gap: 2px; }
.dropdown-ready .account-panel { display: none; position: absolute; right: 0; top: 50px; width: 270px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 8px; box-shadow: 0 12px 32px rgb(0 0 0 / .45); z-index: 10; }
.dropdown-ready .account-panel.is-open { display: flex; }
.account-who { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.account-email { font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.account-role { font-size: .8125rem; color: var(--accent-hover); }
.account-unverified { font-size: .8125rem; color: #e8b98a; }
.unverified-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e8a24a; flex: none; }
.account-toggle { position: relative; }
.account-toggle .unverified-dot { position: absolute; top: 0; right: 0; box-shadow: 0 0 0 2px var(--header); }
.account-panel a .unverified-dot { margin-left: auto; }
.topbar nav .account-panel a, .topbar nav .account-panel button { display: flex; justify-content: flex-start; color: var(--ink); border-radius: 12px; padding: 10px 12px; text-align: left; width: 100%; }
.topbar nav .account-panel .sign-out { margin: 0; }
.account-columns { max-width: 860px; }
.verify-card { max-width: 860px; border-color: #6b5530; background: #1d1912; }
.verify-card h2 { color: #e8b98a; }
.verify-card p { color: var(--ink-2); margin: 0 0 .75rem; }

/* Members: name (· Admin), email, login status tag, Resend / Copy invite link / Edit */
.member-row { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; }
.member-who { flex: 1 1 140px; min-width: 0; }
.member-role { font-size: .8125rem; color: var(--accent-hover); }
.member-email { font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.member-tag { font-size: .8125rem; border-radius: var(--radius-pill); padding: .2rem .7rem; white-space: nowrap; }
.member-tag-pending { background: #3a2c1c; color: #e8b98a; }
.member-tag-active { background: var(--highlight); color: var(--accent-hover); }
.member-tag-none { background: #2a2a24; color: var(--muted); }
.member-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.member-row form { margin: 0; flex: none; }
.member-actions .button, .member-actions button { margin: 0; }
button.small, .button.small { padding: .4rem .9rem; min-height: 0; font-size: .875rem; }
.member-add { display: flex; flex-direction: column; gap: .625rem; border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; }
.member-add .hint { font-size: .8125rem; color: var(--muted); margin: 0; }
.member-editor { display: block; }
.member-edit { max-width: 440px; }
.member-remove { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: 1rem; }
.link-danger { display: inline-block; color: var(--critical-link); padding: .375rem 0; text-decoration: none; }
.link-danger:hover { color: var(--critical-link-hover); text-decoration: underline; }
.member-removal-body { margin: 0 0 1rem; color: var(--ink-2); }
.member-removal-actions form { margin: 0; }
button.danger { background: var(--critical-strong); color: var(--accent-ink); }
button.danger:hover { background: var(--critical-strong-hover); color: var(--accent-ink); }
/* Edit member dialog (Households::MemberDialog): a centred card over the Household page. */
.member-dialog { width: 440px; max-width: calc(100% - 2rem); max-height: 90vh; padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 16px 48px var(--shadow); overflow: auto; }
.member-dialog::backdrop { background: var(--overlay); }
.member-dialog-open { overflow: hidden; }
.member-dialog-panel { position: relative; padding: 1.5rem; }
button.member-dialog-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: var(--radius-pill); border: 1.5px solid var(--control); background: none; color: var(--ink); }
button.member-dialog-close:hover { background: var(--highlight); color: var(--ink); }
.member-dialog-loading { margin: 0; padding-right: 3rem; color: var(--muted); }
.member-dialog .member-editor { display: flex; flex-direction: column; gap: .875rem; }
.member-dialog .member-editor h1 { font-size: 1.5rem; margin: 0; padding-right: 3rem; }
.member-dialog .member-edit { max-width: none; margin: 0; padding: 0; border: 0; background: none; }
.account-columns .form { grid-template-columns: 1fr; }

.locale-switch { display: flex; border: 1.5px solid var(--control); border-radius: var(--radius-pill); padding: 2px; margin: 0 .375rem; }
.topbar nav .locale-switch button { font-size: .8125rem; font-weight: 700; padding: .3rem .7rem; color: var(--muted); }
.topbar nav .locale-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
main { max-width: 1120px; margin: 0 auto; padding: 1.5rem max(1.5rem, env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)); }
.flash { padding: .75rem 1.1rem; border-radius: var(--radius-card); margin-bottom: 1.25rem; background: var(--highlight); border: 1px solid var(--highlight-line); }
.flash.alert { background: var(--critical-bg); border-color: var(--critical); color: var(--critical); }

/* Help: a round "?" button, in the bar on a wide screen and beside Menu on a phone (the copy beside Menu shows only
   once menu_controller.js has folded the navigation). The phone menu also lists About Olivra and Help as text. */
.help-button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-pill); border: 1.5px solid var(--control); color: var(--ink); background: none; }
.topbar nav a.help-button { padding: 0; color: var(--ink); border: 1.5px solid var(--control); }
.help-button:hover, .topbar nav a.help-button:hover { background: var(--brand); color: var(--ink); }
.help-button[aria-current], .topbar nav a.help-button[aria-current] { background: var(--nav-current); font-weight: 400; }
.topbar .topbar-help, .topbar nav .menu-only { display: none; }
/* Guests: Sign in (outlined) and Get started (filled) */
.topbar nav .sign-in-link { color: var(--ink); border: 1.5px solid var(--control); padding: .5rem 1.1rem; }
.topbar nav .get-started-link { background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: .6rem 1.25rem; }
.topbar nav .get-started-link:hover { background: var(--accent-hover); color: var(--accent-ink); }
/* Account menu: icon items in groups split by a line */
.account-group { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 6px; }
.account-group + .account-group { margin-top: 6px; }
.topbar nav .account-panel a, .topbar nav .account-panel button { gap: 12px; align-items: center; }
.icon { flex: none; display: block; }

/* Signed-out pages: a light header with no bar, holding the logo, About Olivra, the language switch and Help */
.auth-header { max-width: 1120px; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) 1rem max(1.5rem, env(safe-area-inset-left)); display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.auth-header .brand-name { font-size: 1.5rem; }
.auth-header-actions { display: flex; gap: .75rem; align-items: center; }
.auth-header-actions > a:not(.help-button) { color: var(--ink-2); text-decoration: none; }
.auth-header-actions > a:not(.help-button):hover { color: var(--ink); }
.auth-header .locale-switch { margin: 0; }
.auth-header .locale-switch button { background: none; color: var(--muted); border: 0; border-radius: var(--radius-pill); font-size: .8125rem; font-weight: 700; padding: .3rem .7rem; min-height: 0; }
.auth-header .locale-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Cards and tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.tile, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.25rem; }
.tile { display: flex; flex-direction: column; gap: .25rem; }
.tile-key { background: var(--highlight); border: 1.5px solid var(--highlight-strong); }
.tile-key .tile-label, .tile-key .tile-note { color: var(--ink-2); }
.tile-label { color: var(--muted); font-size: .875rem; }
.tile-value { font-size: 2.125rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile-note { color: var(--muted); font-size: .8125rem; }
.meter { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--line); margin: .35rem 0 .2rem; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.columns > *, .form > *, .form label, .tiles > * { min-width: 0; }
.dashboard { display: flex; flex-direction: column; gap: 1.25rem; }
.dashboard > *, .dashboard-tip .tip, .dashboard-actions .card { margin: 0; }
.card { margin-bottom: 1rem; }
.card > h2 { margin-bottom: .75rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rates .rate-value { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.rates .rate-value small { font-size: .75rem; }
.row-main { display: flex; flex-direction: column; }
.row-main strong, .row-main b { font-weight: 700; }
.row-main .muted { margin: 0; font-size: .8125rem; }
.card > .rows:first-child > li:first-child { border-top: 0; padding-top: 0; }

/* Controls: pill fields and buttons */
input, select, button, textarea { font: inherit; color: inherit; }
input, select, textarea { min-width: 0; background: var(--field); color: var(--ink); border: 1.5px solid var(--control); border-radius: var(--radius-pill); padding: .7rem 1.1rem; min-height: 2.75rem; width: 100%; }
textarea { border-radius: var(--radius-card); min-height: 5.5rem; }
input[type="date"] { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent); }
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, .button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius-pill); padding: .7rem 1.4rem; min-height: 2.75rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
button:hover, .button:hover { background: var(--accent-hover); color: var(--accent-ink); }
.button.secondary, button.secondary { background: none; color: var(--ink); border: 1.5px solid var(--control); font-weight: 400; }
.button.secondary:hover, button.secondary:hover { background: var(--highlight); color: var(--ink); }
.button:focus-visible, button:focus-visible { outline-color: var(--ink); }
.inline-form { display: flex; gap: .625rem; align-items: center; }
.inline-form input { width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; padding: .6rem 1rem; }
.inline-form input.text-input { width: 10rem; text-align: left; }
.inline-form input.code-input { width: 5rem; text-align: left; }
.deposit-form { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .25rem; flex-wrap: wrap; }
.deposit-form label { margin-right: auto; }
.adjustment-form { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; }
.adjustment-form summary { cursor: pointer; font-size: .9rem; color: var(--accent-hover); }
.adjustment-form .hint { font-size: .8rem; color: var(--muted); }
.adjustment-form .inline-form { flex-wrap: wrap; }
.adjustment-form label { font-size: .9rem; }
.form { max-width: 47.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.form > * { grid-column: 1 / -1; }
.form label { display: grid; gap: .375rem; font-size: .875rem; color: var(--ink-3); }
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 1rem; align-items: start; max-width: 1000px; }
.setup-grid > .card, .setup-grid .tip-slot { margin: 0; }
.setup-grid .form { max-width: none; }
.setup-grid .form label { align-content: start; }
.setup-join { margin-top: 1rem; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: 1fr; } }
.form .hint { font-size: .8125rem; color: var(--muted); }
.form .actions, .actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.errors { background: var(--critical-bg); color: var(--critical); border-radius: var(--radius-card); padding: .75rem 1.1rem; margin: 0; list-style-position: inside; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }

/* Tables */
.table-scroll { overflow-x: auto; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: .7rem .6rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: .8125rem; white-space: nowrap; }
th.num { text-align: right; }
tbody th { font-weight: 700; white-space: nowrap; }
td small { display: block; color: var(--muted); font-size: .75rem; }
tr.is-current { background: var(--highlight); }
.estimate { color: var(--estimate); font-size: .8125rem; font-weight: 500; }
.paid-dates { display: block; color: var(--muted); font-size: .75rem; }

/* "Already paying this?": a pill switch (checkbox role=switch), its hint, and the note of payments counted */
.already-paying { display: grid; gap: 1rem; }
.paying-switch { display: flex; gap: .75rem 1rem; align-items: center; flex-wrap: wrap; }
.paying-switch[hidden], .paying-details[hidden] { display: none; }
.form .switch { display: inline-flex; gap: .75rem; align-items: center; color: var(--ink); font-size: 1rem; cursor: pointer; margin: 0; }
.form .switch input { appearance: none; width: 44px; height: 26px; min-height: 0; padding: 0; margin: 0; flex: none; border: 0; border-radius: var(--radius-pill); background: var(--switch-off); position: relative; cursor: pointer; transition: background .15s; }
.form .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.form .switch input:checked { background: var(--accent); }
.form .switch input:checked::after { background: var(--accent-ink); transform: translateX(18px); }
.form .switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paying-details { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.paid-note { grid-column: 1 / -1; margin: 0; background: var(--highlight); border: 1px solid var(--highlight-line); border-radius: 16px; padding: .75rem 1rem; font-size: .875rem; }
.status { display: inline-block; font-size: .8125rem; border-radius: var(--radius-pill); padding: .2rem .65rem; white-space: nowrap; }
.status-good { background: var(--good-bg); color: var(--good); }
.status-critical { background: var(--critical-bg); color: var(--critical); }
.status-building { background: var(--building-bg); color: var(--building); }
.status-off { background: var(--line); color: var(--muted); }

/* Chart */
.chart { position: relative; }
.chart-scroll { overflow-x: auto; position: relative; }
.chart-canvas { position: relative; }
.chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.chart-legend { display: flex; gap: 1.25rem; font-size: .8125rem; color: var(--ink-2); flex-wrap: wrap; }
.swatch { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--series-1); vertical-align: middle; margin-right: .5rem; }
.swatch-target { border-top: 3px dashed var(--series-2); }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-zero { stroke: var(--muted); stroke-width: 1; }
.chart-tick { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; font-family: var(--font-body); }
.chart-balance { fill: none; stroke: var(--series-1); stroke-width: 3; stroke-linejoin: round; }
.chart-target { fill: none; stroke: var(--series-2); stroke-width: 2.5; stroke-dasharray: 7 5; }
.chart-cursor { stroke: var(--muted); stroke-width: 1; }
.chart-tip { position: absolute; top: .25rem; transform: translateX(-50%); background: var(--ink); color: var(--bg); font-size: .78rem; line-height: 1.35; padding: .35rem .7rem; border-radius: 12px; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Lead text, lessons and Method tips */
.lead { font-size: 1.05rem; color: var(--ink-2); }
.eyebrow { font-size: .85rem; margin: 0 0 .5rem; color: var(--muted); }
.toc ol, .steps { margin: 0; padding-left: 1.25rem; }
.toc li, .steps li { padding: .15rem 0; }
.help-topic, .lesson { scroll-margin-top: 5rem; }
.lesson-headline { font-weight: 700; }
.tip { background: var(--highlight); border: 1px solid var(--highlight-line); border-radius: var(--radius-card); padding: 1.25rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.tip p { margin: 0; }
.tip-label { color: var(--muted); font-size: .8125rem; }
.tip .lesson-headline, .tip strong { font-size: 1.125rem; }
.tip-actions { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: .375rem; }
.tip-dismiss { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.tip-forever { display: flex; gap: .5rem; align-items: center; font-size: .875rem; color: var(--ink-2); cursor: pointer; margin: 0; }
.tip-forever input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); margin: 0; }
.tip-actions .button { padding: .55rem 1.25rem; min-height: 0; }

@media (max-width: 1100px) {
  /* Top bar: brand + Menu button; the menu opens as a full-width panel (menu_controller.js) */
  .topbar-inner { gap: .5rem; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .brand { min-height: 44px; }
  .menu-ready .menu-toggle { display: inline-flex; min-width: 44px; min-height: 44px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--control); border-radius: 16px; font-weight: 400; padding: .6rem 1.1rem; }
  .menu-ready .menu-toggle[aria-expanded="true"] { background: var(--highlight); }
  .menu-ready nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .375rem; padding: .25rem 0 .5rem; }
  .menu-ready nav.is-open { display: flex; }
  .topbar nav a, .topbar nav button { display: flex; align-items: center; min-height: 44px; font-size: 1rem; }
  .menu-ready nav a { color: var(--ink); border-radius: 0; border-left: 3px solid transparent; padding: .75rem .875rem; }
  .menu-ready nav a[aria-current] { background: var(--highlight); border-left-color: var(--accent); box-shadow: none; }
  .menu-ready nav .locale-switch { align-self: flex-start; margin: .25rem 0; }
  .menu-ready nav .locale-switch button { min-height: 40px; padding: .4rem 1rem; }
  .menu-ready nav .sign-out button { width: 100%; justify-content: center; border: 1.5px solid var(--control); color: var(--ink-2); }
  /* In the phone menu the account panel sits inline: "Name · Role", then Manage account and Sign out as buttons */
  .menu-ready .dropdown-ready .account-toggle, .menu-ready .account-email { display: none; }
  .menu-ready .dropdown-ready .account-panel { display: flex; position: static; width: auto; background: none; border: 0; box-shadow: none; padding: .25rem 0 0; gap: .5rem; }
  .menu-ready .account-who { flex-direction: row; gap: .375rem; padding: .25rem .125rem; color: var(--muted); font-size: .875rem; }
  .menu-ready .account-who strong { font-weight: 400; }
  .menu-ready .account-who strong::after { content: " ·"; }
  .menu-ready .account-role { color: var(--muted); font-size: .875rem; }
  .menu-ready nav .account-panel a, .menu-ready nav .account-panel .sign-out button { justify-content: center; border: 1.5px solid var(--control); border-left-width: 1.5px; border-radius: var(--radius-pill); color: var(--ink-2); padding: .75rem; }
}

@media (max-width: 860px) {
  main { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  h1 { font-size: 1.875rem; }

  /* Tap targets and one-column forms */
  input, select, textarea, button, .button, .tip-actions button { min-height: 44px; }
  .form .pair { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; }
  .inline-form { flex-wrap: wrap; }
  .inline-form input, .inline-form input.text-input, .inline-form input.code-input { flex: 1 1 6rem; width: auto; min-width: 0; }
  .deposit-form label, .adjustment-form label { flex-basis: 100%; margin: 0; }
  .rows li > .inline-form { flex: 1 1 100%; }
  .adjustment-form summary { min-height: 44px; display: flex; align-items: center; }
  .tip-actions a, .rows a, td a { display: inline-flex; align-items: center; min-height: 44px; }
  .rows li > a:last-child { margin-left: auto; }
  .member-actions { flex: 1 1 100%; justify-content: flex-start; }
  .member-actions > * { margin-left: 0 !important; }

  /* Dashboard order on a phone: money now, what to record, the chart, then the twelve months */
  .tiles { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .tile { padding: 1rem; }
  .tile-key { grid-column: 1 / -1; order: -1; }
  .tiles .tile:last-child { grid-column: 1 / -1; }
  .tile-value { font-size: 1.5rem; }
  .columns { grid-template-columns: 1fr; }
  .dashboard-actions { order: 1; }
  .dashboard-tip { order: 2; }
  .dashboard-chart { order: 3; }
  .dashboard > .card:last-child { order: 4; }
  .chart-canvas { min-width: 600px; }
  .chart svg { touch-action: pan-x pan-y; }

  /* Tables: fewer columns; the twelve months keep month, deposit, leftover and a status icon */
  .wide-only { display: none; }
  .status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  th, td { padding: .55rem .35rem; }
  thead th, .projection tbody th, .projection td small { white-space: normal; }

  /* Commitments become cards: name and amount, then how often, status and Edit */
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stack-table tbody tr { display: grid; grid-template-columns: 1fr auto 3rem; grid-template-areas: "name amount amount" "freq status edit"; align-items: center; gap: 0 .75rem; border-top: 1px solid var(--line); padding: .5rem 0; }
  .stack-table tbody tr:first-child { border-top: 0; }
  .stack-table td, .stack-table th { border: 0; padding: .15rem 0; white-space: normal; }
  .stack-table .cell-name { grid-area: name; }
  .stack-table .cell-amount { grid-area: amount; white-space: nowrap; }
  .stack-table .cell-frequency { grid-area: freq; color: var(--muted); font-size: .9rem; }
  .stack-table .cell-status { grid-area: status; justify-self: end; }
  .stack-table .cell-edit { grid-area: edit; text-align: right; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Signed-out pages: form on the left, the olive tree on the right (below on a phone) */
.auth { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; padding-top: 1rem; }
.auth-main { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; gap: 1.1rem; }
.auth-main h1 { font-size: 2.5rem; margin: 0; }
.auth-motto { color: var(--muted); margin: 0; }
.auth-form { grid-template-columns: 1fr; gap: 1.1rem; }
.auth-form p { margin: 0; }
.auth-form .muted { color: var(--muted); font-size: 1rem; }
.auth-byline { font-size: .875rem; color: var(--placeholder); margin: 0; }
.auth-art { flex: 1 1 320px; max-width: 520px; }
.olive-tree { display: block; width: 100%; height: auto; }

/* Help Centre: four numbered "Start here" cards, then one folding card per topic, each ending with "Open X" */
.help { display: flex; flex-direction: column; gap: 1rem; }
.help > * { margin: 0; }
.help .lead, .help-topics { max-width: 45rem; }
.help h2 { font-size: 1.5rem; margin-top: .5rem; }
.help-start { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.help-start-card { background: var(--highlight); border: 1px solid var(--highlight-line); border-radius: var(--radius-card); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.help-start-card > * { margin: 0; }
.help-start-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; }
.help-start-card p { flex: 1; color: var(--ink-2); font-size: .875rem; }
.help-open.button { padding: .5rem 1rem; min-height: 0; }
.help-start-card .help-open { margin-top: .25rem; }
.help-start-card .help-open:hover { background: var(--nav-current); }
.help-topics { display: flex; flex-direction: column; gap: .625rem; }
.help-topic { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.help-topic summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; cursor: pointer; list-style: none; }
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary:hover { background: var(--highlight); }
.help-topic summary h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0; }
.help-body { padding: 0 1.25rem 1.125rem; color: var(--ink-2); display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; }
.help-body > *, .help-drawer-topic > * { margin: 0; }
.help-example { align-self: stretch; }
.help-example table { min-width: 330px; }
.help-example tbody th { font-weight: 400; white-space: normal; }
.help-example tfoot th, .help-example tfoot td { font-weight: 700; color: var(--ink); }

/* Help panel: the current screen's topics in a side panel over the page (help_drawer_controller.js) */
.help-drawer { position: fixed; inset: 0 0 0 auto; width: 440px; max-width: 100%; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: -16px 0 48px var(--shadow); }
.help-drawer::backdrop { background: var(--overlay); }
.help-drawer-open { overflow: hidden; }
.help-drawer-panel { display: flex; flex-direction: column; height: 100%; }
.help-drawer-header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 1.25rem 1.5rem .75rem; }
.help-drawer-header h2 { font-size: 1.5rem; margin: 0; }
button.help-drawer-close { flex: none; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: var(--radius-pill); border: 1.5px solid var(--control); background: none; color: var(--ink); }
button.help-drawer-close:hover { background: var(--highlight); color: var(--ink); }
.help-drawer-body { flex: 1; overflow: auto; padding: .25rem 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.help-drawer-topic { display: flex; flex-direction: column; gap: .625rem; color: var(--ink-2); }
.help-drawer-topic h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; color: var(--ink); }
.help-drawer-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--line); }
.help-drawer-footer .button { width: 100%; }
.help-button[aria-expanded="true"], .topbar nav a.help-button[aria-expanded="true"] { background: var(--nav-current); }

/* About Olivra: subtitle, the seven steps, three lessons to start with, every lesson folded, the motto */
.about { display: flex; flex-direction: column; gap: 1rem; }
.about > * { margin: 0; }
.about h1 { font-size: 2.375rem; }
.about .lead { max-width: 45rem; font-size: 1.125rem; }
.about h2 { font-size: 1.5rem; margin: .5rem 0 .75rem; }
.about-steps, .lesson-list, .about .motto-banner, .about-person { max-width: 45rem; }
.about-person { display: flex; flex-direction: column; gap: .875rem; margin-top: .75rem; }
.about-person h2 { margin: 0; }
.about-person p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.steps .step { display: flex; gap: .875rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: .875rem 1.1rem; }
.step-number { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.step strong { display: block; }
.step-text { display: block; font-size: .875rem; color: var(--muted); }
.featured-lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.featured-lesson { background: var(--highlight); border: 1px solid var(--highlight-line); border-radius: var(--radius-card); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.featured-lesson > * { margin: 0; }
.featured-label { font-size: .8125rem; color: var(--muted); }
.featured-lesson h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; text-wrap: pretty; }
.featured-text { color: var(--ink-2); }
.lesson-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.lesson-list summary, .lesson summary { display: flex; align-items: center; gap: .75rem; cursor: pointer; list-style: none; }
.lesson-list summary::-webkit-details-marker, .lesson summary::-webkit-details-marker { display: none; }
.lesson-list > summary { justify-content: space-between; padding: 1.125rem 1.25rem; }
.lesson-list > summary:hover { background: var(--highlight); }
.lesson-list > summary h2 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0; }
.disclosure-sign::before { content: "+"; color: var(--accent-hover); font-size: 1.25rem; line-height: 1; }
details[open] > summary .disclosure-sign::before { content: "\2212"; }
.lesson-items { list-style: none; margin: 0; padding: 0 1.25rem .75rem; }
.lesson-items > li { border-top: 1px solid var(--line); }
.lesson summary { padding: .625rem 0; }
.lesson summary h3 { flex: 1; font: inherit; margin: 0; }
.lesson summary:hover h3 { color: var(--accent-hover); }
.lesson-number { flex: none; width: 1.5rem; color: var(--accent-hover); }
.lesson-body { padding: 0 0 .75rem 2.25rem; color: var(--ink-2); }
.lesson-body p { margin: 0 0 .6rem; }
.lesson-body h4 { font-weight: 700; color: var(--ink); margin: .75rem 0 .25rem; }
.lesson-body .lesson-headline { color: var(--ink); }
.motto-banner { background: var(--highlight); border: 1px solid var(--highlight-line); border-radius: var(--radius-card); padding: 1.25rem; font-family: var(--font-heading); font-size: 1.375rem; }

@media (max-width: 1100px) {
  /* Phone top bar: "?" beside Menu; About Olivra and Help as text in the menu (About moves out of the account panel) */
  .menu-ready .topbar-help { display: inline-flex; width: 44px; height: 44px; }
  .menu-ready nav .help-button, .menu-ready nav .account-panel .account-about, .menu-ready .account-panel .icon { display: none; }
  .menu-ready nav .menu-only { display: flex; }
  .menu-ready .account-group { border: 0; padding: 0; margin: 0; gap: .5rem; }
  .menu-ready nav .sign-in-link, .menu-ready nav .get-started-link { justify-content: center; border-radius: var(--radius-pill); padding: .75rem; }
  .menu-ready nav .sign-in-link { border: 1.5px solid var(--control); }
  .menu-ready nav .get-started-link { border: 0; color: var(--accent-ink); }
}

@media (max-width: 860px) {
  .auth { gap: 1.5rem; padding-top: 0; }
  .auth-main h1 { font-size: 2rem; }
  .auth-art { max-width: 280px; margin: 0 auto; }
  .help-topic summary { min-height: 44px; }
  button.help-drawer-close, button.member-dialog-close { width: 44px; height: 44px; }
  .lesson-list > summary, .lesson summary { min-height: 44px; }
  .auth-header .locale-switch button { min-height: 40px; padding: .4rem 1rem; }
  .lesson-body { padding-left: 0; }
}

/* Goals: list of goal cards, a goal's page, the goal form and the deposit / withdrawal form */
.goals { display: flex; flex-direction: column; gap: 1.25rem; }
.goals .card { margin-bottom: 0; }
.goals h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; margin: 0 0 .5rem; }
.goals-head { align-items: flex-end; flex-wrap: wrap; margin-bottom: 0; }
.goals-head .muted { margin: .25rem 0 0; max-width: 32.5rem; font-size: 1rem; }
.goals-actions { display: flex; gap: .625rem; flex-wrap: wrap; align-items: center; }
.goals-actions form { margin: 0; }
.goals-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.goals-summary .tile-value { font-size: 1.75rem; }
.goals-intro { display: flex; flex-direction: column; gap: 1rem; max-width: 45rem; border-radius: 24px; }
.goals-intro p { margin: 0; color: var(--ink-2); }
.goals-intro h2 { font-size: 1.625rem; margin: 0; }
.goals-intro-icon { color: var(--accent); }
.goals-examples { display: flex; flex-wrap: wrap; gap: .5rem; }
.goals-examples span { background: var(--highlight); border-radius: var(--radius-pill); padding: .375rem .875rem; font-size: .875rem; color: var(--ink); }
.goals-invite { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; }
.goals-invite h2 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0; }
.goals-invite .muted { margin: 0; max-width: 32.5rem; }
.goal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 1rem; align-items: start; }
.goal-card { display: flex; flex-direction: column; gap: .875rem; }
.goal-card-head { display: flex; gap: .75rem; align-items: center; color: var(--ink); text-decoration: none; }
.goal-card-head:hover { color: var(--ink); }
.goal-card-head strong { display: block; font-size: 1.125rem; }
.goal-card-head small, .goal-closed-row small, .goal-history-row small { display: block; color: var(--muted); font-size: .8125rem; }
.goal-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--nav-current); color: var(--good); display: flex; align-items: center; justify-content: center; }
.goal-icon-large { width: 52px; height: 52px; }
.goal-progress p { margin: 0; }
.goal-amounts { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.goal-amounts strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.goal-amounts span { color: var(--muted); }
.goal-card .meter { height: 10px; }
.goal-progress-notes { display: flex; justify-content: space-between; font-size: .875rem; color: var(--ink-2); }
.goal-funded { background: var(--good-bg); border-radius: 16px; padding: .75rem .875rem; display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; }
.goal-funded strong { color: var(--good); }
.goal-funded p { margin: 0; font-size: .875rem; color: var(--ink-2); }
.goal-funded form { margin: 0; }
.goal-card-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: auto; }
.goal-card-actions .button { padding-inline: .5rem; min-width: 0; white-space: nowrap; }
.goal-card-actions-single { grid-template-columns: minmax(0, 1fr); }
.goals-closed { padding: 0; overflow: hidden; }
.goals-closed summary { cursor: pointer; font-weight: 700; padding: 1rem 1.25rem; min-height: 52px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.goals-closed summary::-webkit-details-marker { display: none; }
.goals-closed summary::after { content: "+"; color: var(--accent-hover); font-weight: 400; }
.goals-closed[open] summary::after { content: "\2212"; }
.goals-closed summary:hover { background: var(--highlight); }
.goals-closed .rows { padding: 0 1.25rem .5rem; }
.goal-closed-actions { display: flex; gap: .875rem; align-items: center; }
.goal-closed-actions form { margin: 0; }
.link-button, button.link-button { background: none; border: 0; color: var(--accent-hover); padding: .5rem .25rem; min-height: 44px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.link-button:hover, button.link-button:hover { background: none; color: var(--ink); }
.back-link { margin: 0; }
.back-link a { display: inline-flex; gap: .375rem; align-items: center; min-height: 32px; }
.goal-detail-head { display: flex; gap: .875rem; align-items: center; }
.goal-detail-head h1 { margin: 0; }
.goal-detail-head .muted { margin: .125rem 0 0; }
.goal-description { margin: 0; color: var(--ink-2); max-width: 40rem; }
.goal-status-note { margin: 0; align-self: flex-start; background: var(--good-bg); color: var(--good); border-radius: 16px; padding: .75rem 1rem; }
.goal-stats { display: flex; flex-direction: column; gap: .875rem; }
.meter-large { height: 14px; margin: 0; }
.goal-stats dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .875rem; margin: 0; }
.goal-stats dt { font-size: .875rem; color: var(--muted); }
.goal-stats dd { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.goal-history .rows li { flex-wrap: nowrap; }
.goal-history-row > div { flex: 1; min-width: 0; }
.history-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--good-bg); color: var(--good); }
.history-opening .history-icon { background: var(--nav-current); }
.history-withdrawal .history-icon { background: var(--withdrawal-bg); color: var(--withdrawal); }
.history-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.history-withdrawal .history-amount { color: var(--withdrawal); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.chips legend, .segmented-field legend { font-size: .875rem; color: var(--ink-3); margin-bottom: .5rem; padding: 0; }
.form .chip { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid var(--control); border-radius: var(--radius-pill); padding: .5rem 1rem; min-height: 44px; color: var(--ink); font-size: .9375rem; cursor: pointer; position: relative; }
.form .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form .chip:has(input:checked) { border-color: var(--accent); background: var(--nav-current); }
.form .chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented-field { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .375rem; }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--control); border-radius: var(--radius-pill); padding: 2px; align-self: flex-start; }
.form .segmented label { display: inline-flex; cursor: pointer; position: relative; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { font-size: .875rem; font-weight: 700; padding: .55rem 1rem; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); color: var(--ink-2); }
.segmented input:checked + span { background: var(--accent); color: var(--accent-ink); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: grid; gap: .375rem; }
.field-label { font-size: .875rem; color: var(--ink-3); }

/* Password field with a show/hide eye button (Shared::PasswordField) */
.password-field { position: relative; display: block; font-size: .875rem; }
.password-field input { padding-right: 3rem; }
.password-field button.password-toggle { position: absolute; bottom: calc((1.4rem + 1.5em + 3px - 2.75rem) / 2); right: .15rem; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); font-weight: 400; }
.password-field button.password-toggle:hover { background: var(--highlight); color: var(--ink); }
.password-field button.password-toggle[hidden] { display: none; }
.password-toggle .password-eye { display: inline-flex; }
.password-toggle .password-eye-off, .password-toggle[aria-pressed="true"] .password-eye { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-off { display: inline-flex; }

.readonly-field { margin: 0; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: .75rem 1.1rem; min-height: 44px; color: var(--ink); }
.form textarea { border-radius: var(--radius-card); }
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.goal-movement { display: flex; flex-direction: column; gap: 1.25rem; }
.goal-movement h1 { margin: 0; }
.goal-movement-form { max-width: 30rem; }
.amount-input { font-size: 1.375rem; font-weight: 700; min-height: 52px; }
.quick-amounts { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip-button, button.chip-button { background: var(--highlight); border: 1px solid var(--highlight-line); color: var(--ink); font-weight: 400; font-size: .875rem; padding: .5rem .875rem; min-height: 40px; }
.chip-button:hover, button.chip-button:hover { background: var(--nav-current); color: var(--ink); }
.movement-summary { margin: 0; background: var(--highlight); border-radius: 16px; padding: .75rem .875rem; font-size: .875rem; font-weight: 700; display: flex; flex-direction: column; }

@media (max-width: 860px) {
  .goals-head .goals-actions { width: 100%; }
  .goal-movement-form { max-width: none; }
  .chip-button, button.chip-button, .segmented span { min-height: 44px; }
}

/* Goals plan: how this month's leftover is shared, each card's suggestion, the goal page's projection */
.goals-plan { display: flex; flex-direction: column; gap: .875rem; }
.goals-plan h2 { margin: 0; }
.plan-lines { display: flex; flex-direction: column; gap: .625rem; margin: 0; }
.plan-lines > div { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.plan-lines dt small { display: block; color: var(--muted); font-size: .8125rem; }
.plan-lines dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-lines .muted-amount { font-weight: 400; color: var(--ink-2); }
.plan-available { border-top: 1px solid var(--line); padding-top: .625rem; }
.plan-available dt { font-weight: 700; }
.plan-available dd { font-size: 1.25rem; }
.treat-form { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; margin: 0; }
.treat-form select { width: auto; min-height: 40px; padding-block: .4rem; }
.plan-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--line); gap: 2px; }
.plan-bar i { display: block; height: 100%; }
.plan-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem 1rem; font-size: .8125rem; color: var(--ink-2); }
.plan-legend li { display: flex; align-items: center; gap: .375rem; }
.plan-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.goals-plan .muted { margin: 0; }
.plan-message { margin: 0; background: var(--highlight); border: 1px solid var(--highlight-line); border-radius: 16px; padding: .875rem 1rem; }
.plan-warning { background: var(--building-bg); border-color: #6b5230; }
.goal-suggestion { background: var(--highlight); border-radius: 16px; padding: .75rem .875rem; display: flex; flex-direction: column; gap: .375rem; }
.goal-suggestion-head { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: .625rem; font-size: .875rem; color: var(--ink-2); }
.goal-suggestion-head strong { font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.goal-suggestion-notes { display: flex; justify-content: space-between; gap: .625rem; font-size: .8125rem; color: var(--muted); flex-wrap: wrap; align-items: flex-start; }
.goal-suggestion-actions { display: flex; gap: .75rem; align-items: flex-start; }
.goal-suggestion-actions form { margin: 0; }
.goal-suggestion-actions .link-button { min-height: 0; padding: 0; font-size: .8125rem; }
.plan-adjust summary { cursor: pointer; color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.plan-adjust summary::-webkit-details-marker { display: none; }
.plan-adjust[open] summary { margin-bottom: .5rem; }
.plan-adjust-form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.plan-adjust-form input { width: 7.5rem; min-height: 40px; text-align: right; border-color: var(--accent); }
.plan-adjust-form button { min-height: 40px; padding: .4rem 1rem; }
.goal-projection p { margin: 0 0 .25rem; font-size: .875rem; color: var(--ink-2); }
.goal-projection .muted { color: var(--muted); }
.goal-detail-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.goal-detail-plan { display: flex; flex-direction: column; gap: 1rem; }
.goal-projection-card { display: flex; flex-direction: column; gap: .75rem; }
.goal-projection-card p, .goal-schedule p { margin: 0; }
.what-if { background: var(--highlight); border-radius: 16px; padding: .875rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.what-if-head { display: flex; justify-content: space-between; align-items: baseline; gap: .625rem; font-size: .875rem; color: var(--ink-2); }
.what-if-head strong { font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.what-if input[type="range"] { width: 100%; height: 32px; accent-color: var(--accent); padding: 0; border: 0; background: none; min-height: 32px; }
.what-if form { margin: 0; }
.goal-schedule small, .schedule-amounts small { display: block; color: var(--muted); font-size: .8125rem; }
.schedule-amounts { text-align: right; font-variant-numeric: tabular-nums; }
.history-amount small { display: block; font-weight: 400; color: var(--muted); font-size: .8125rem; }
.history-amount { text-align: right; }
.goal-form-layout { display: grid; grid-template-columns: minmax(0, 47.5rem) minmax(0, 22rem); gap: 1.25rem; align-items: start; }
.goal-fit { background: var(--highlight); border-color: var(--highlight-line); display: flex; flex-direction: column; gap: .625rem; }
.goal-fit h2 { margin: 0; }
.goal-fit p { margin: 0; }
.goal-fit-line { display: flex; justify-content: space-between; gap: .625rem; color: var(--ink-2); }
.goal-fit-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.movement-summary p { margin: 0; }
.movement-versus { font-weight: 400; color: var(--ink-2); margin-top: .25rem !important; }

@media (max-width: 1000px) {
  .goal-form-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Emergency Fund suggestion */
.emergency-fund { background: var(--highlight); border-color: var(--highlight-line); border-radius: 24px; display: flex; flex-direction: column; gap: 1rem; }
.emergency-fund[hidden] { display: none; }
.emergency-fund-head { display: flex; gap: .875rem; align-items: flex-start; }
.emergency-fund-head h2 { font-size: 1.5rem; margin: 0 0 .375rem; }
.emergency-fund-head p { margin: 0 0 .375rem; color: var(--ink-2); max-width: 40rem; }
.emergency-fund-head .muted { color: var(--muted); }
.emergency-fund-icon { flex: none; color: var(--accent-hover); }
.emergency-fund-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .75rem; }
.emergency-fund-options .tile-value { font-size: 1.75rem; }
.emergency-fund-options .tile-note { color: var(--ink-2); font-size: .875rem; margin-bottom: .5rem; }
.emergency-fund-options form { margin: 0; }
.emergency-fund-options button { width: 100%; }
.emergency-fund-actions { display: flex; gap: .625rem; flex-wrap: wrap; align-items: flex-start; }
.emergency-fund-custom summary { list-style: none; cursor: pointer; }
.emergency-fund-custom summary::-webkit-details-marker { display: none; }
.emergency-fund-custom[open] summary { margin-bottom: .625rem; }
.emergency-fund-custom-form { display: flex; gap: .625rem; flex-wrap: wrap; margin: 0; }
.emergency-fund-custom-form input { width: 11.25rem; }
.emergency-fund-explain summary { cursor: pointer; color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; list-style: none; min-height: 32px; }
.emergency-fund-explain summary::-webkit-details-marker { display: none; }
.emergency-fund-explain[open] summary { margin-bottom: .75rem; }
.reserve-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.reserve-comparison-item { border: 1px solid var(--highlight-line); border-radius: 16px; padding: .875rem 1rem; }
.reserve-comparison-item p { margin: .25rem 0 0; font-size: .875rem; color: var(--ink-2); }
.emergency-fund-hidden { margin: 0; }
.emergency-fund-hidden .link-button { min-height: 0; padding: 0; }

/* Phone: bottom tab bar (layout) and the floating Deposit button on Goals. Hidden on wider screens. */
.tab-bar, .goals-fab { display: none; }

@media (max-width: 860px) {
  body:has(.tab-bar) main { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  .tab-bar { display: flex; justify-content: space-around; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--header); border-top: 1px solid var(--line); padding: .5rem max(.375rem, env(safe-area-inset-right)) calc(.875rem + env(safe-area-inset-bottom)) max(.375rem, env(safe-area-inset-left)); }
  .tab-bar .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 44px; padding: .25rem .5rem; border-radius: 16px; color: var(--muted); font-size: .75rem; text-decoration: none; }
  .tab-bar .tab:hover { color: var(--ink); }
  .tab-bar .tab[aria-current="page"] { color: var(--good); background: var(--highlight); }
  .tab-bar .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .goals-fab { display: inline-flex; position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(5.25rem + env(safe-area-inset-bottom)); z-index: 19; min-height: 48px; padding: .875rem 1.25rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
}