/* Footing - spreadsheet look: one font, dark blue and very light blue, gridlines, square corners. */

:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --band: #F9FAFC;
  --hilite: #EDF3FB;
  --chip: #E4ECF6;
  --rec: #F3F7FC;
  --line: #E2E8F0;
  --line-2: #CBD5E1;
  --ink: #1B2433;
  --text: #334155;
  --slate: #64748B;
  --muted: #94A3B8;
  --navy: #1E3A5F;
  --navy-2: #2A4B75;
  --on-navy: #FFFFFF;
  --on-navy-2: #C9D6E6;
  --primary: #1E3A5F;
  --primary-hover: #2A4B75;
  --on-primary: #FFFFFF;
  --nav-on-bg: #EDF3FB;
  --nav-on-fg: #1E3A5F;
  --pos: #1F7A52;
  --neg: #B8433A;
  --due: #1E3A5F;
  /* Income green and expense red are kept soft: tints for rows, light fills for bars, a medium tone for thin lines. */
  --inc: #7CC4A2;
  --inc-ink: #2B7655;
  --inc-fill: #B5DFCB;
  --inc-tint: #F3FAF6;
  --inc-tint-2: #E4F3EB;
  --exp: #E39A91;
  --exp-ink: #A9473E;
  --exp-fill: #F5CAC4;
  --exp-tint: #FEF6F5;
  --exp-tint-2: #FBE8E5;
  /* Investments are a soft blue that belongs to the theme. */
  --inv: #7FA7D9;
  --inv-ink: #2F5E96;
  --inv-fill: #C6D9F1;
  --inv-tint: #F4F8FD;
  --inv-tint-2: #E3ECF8;
  /* Budgets are a warm sand, a neutral that sits between the green, red and blue. */
  --bud: #CDB48A;
  --bud-ink: #85652F;
  --bud-fill: #EADCC2;
  --bud-tint: #FCFAF6;
  --bud-tint-2: #F5EEE2;
  --bar: #6E9BD3;
  --pi0: #7CC4A2; --pi1: #B9E0CD; --pi2: #4F9F7B; --pi3: #D8EFE4; --pi4: #98D0B6; --pi5: #A3B0C2;
  --pe0: #5A82B3; --pe1: #A9C3E3; --pe2: #3B6496; --pe3: #D0DEF0; --pe4: #7FA3CF; --pe5: #A3B0C2;
  --focus: rgba(30, 58, 95, .25);
  --scrim: rgba(15, 23, 42, .45);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .18);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1621;
  --surface: #141E2B;
  --band: #172232;
  --hilite: #1B2B40;
  --chip: #20324B;
  --rec: #172741;
  --line: #263447;
  --line-2: #33465E;
  --ink: #E6EDF5;
  --text: #C5D0DD;
  --slate: #93A3B8;
  --muted: #6B7A8F;
  --navy: #1A3354;
  --navy-2: #24426A;
  --on-navy: #FFFFFF;
  --on-navy-2: #A9BBD2;
  --primary: #3D6EA8;
  --primary-hover: #4A7CB8;
  --on-primary: #FFFFFF;
  --nav-on-bg: #2F5585;
  --nav-on-fg: #FFFFFF;
  --pos: #5CC596;
  --neg: #F08C80;
  --due: #8FB4E3;
  --inc: rgba(77, 180, 135, .6);
  --inc-ink: #74CFA6;
  --inc-fill: rgba(77, 180, 135, .45);
  --inc-tint: rgba(77, 180, 135, .06);
  --inc-tint-2: rgba(77, 180, 135, .14);
  --exp: rgba(232, 128, 111, .6);
  --exp-ink: #F0A194;
  --exp-fill: rgba(232, 128, 111, .45);
  --exp-tint: rgba(232, 128, 111, .05);
  --exp-tint-2: rgba(232, 128, 111, .13);
  --inv: rgba(110, 155, 211, .65);
  --inv-ink: #8FB4E3;
  --inv-fill: rgba(110, 155, 211, .45);
  --inv-tint: rgba(110, 155, 211, .06);
  --inv-tint-2: rgba(110, 155, 211, .15);
  --bud: rgba(214, 186, 138, .55);
  --bud-ink: #DCC296;
  --bud-fill: rgba(214, 186, 138, .4);
  --bud-tint: rgba(214, 186, 138, .05);
  --bud-tint-2: rgba(214, 186, 138, .12);
  --bar: #6E9BD3;
  --pi0: #4DB487; --pi1: #3A8F69; --pi2: #7FCCA9; --pi3: #2C6E50; --pi4: #A9DEC5; --pi5: #6B7A8F;
  --pe0: #6E9BD3; --pe1: #4F7DB5; --pe2: #96B8E2; --pe3: #3A6296; --pe4: #BDD3EE; --pe5: #6B7A8F;
  --focus: rgba(110, 155, 211, .35);
  --scrim: rgba(0, 0, 0, .6);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
}

:root {
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r: 5px;      /* buttons, inputs and other small controls */
  --r-box: 8px;  /* boxes: tables, panels, charts, dialogs */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--font); }
h1 { font-size: 22px; font-weight: 600; line-height: 1.25; }
h2 { font-size: 15px; font-weight: 600; line-height: 1.3; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.st-active, .grid td.st-active { color: var(--pos); font-weight: 600; }
.dim { color: var(--slate); }
.due { color: var(--due); font-weight: 600; }
.strong { color: var(--ink); font-weight: 600; }
.spacer { flex: 1; }
.pad { padding: 8px 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
body.modal-open { overflow: hidden; }

/* ---------- icons and brand ---------- */
.ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mark { width: 26px; height: 26px; flex: none; }
.mark rect { fill: var(--navy); }
/* The logo: three rising bars, like a small chart. */
.mark path { fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; }
.side .mark rect, .topbar .mark rect { fill: #FFFFFF; }
.side .mark path, .topbar .mark path { stroke: var(--navy); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-size: 15px; font-weight: 600; }

/* ---------- buttons and controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r);
  font-size: 13.5px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn .ic { width: 15px; height: 15px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--surface); color: var(--navy); border-color: var(--line-2); }
[data-theme="dark"] .btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--hilite); }
.btn-quiet { background: none; color: var(--text); padding: 0 8px; }
.btn-quiet:hover { background: var(--hilite); }
.btn-quiet.danger, .link-btn.danger { color: var(--neg); }
.btn-danger { background: var(--neg); color: #FFFFFF; }
.btn-ghost.danger { color: var(--neg); }
.btn-ghost.danger:hover { background: var(--exp-tint-2); }
.btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn.busy { position: relative; color: transparent; }
.btn.busy::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--on-primary); border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--navy); cursor: pointer;
}
.icon-btn:hover { background: var(--hilite); }
a.icon-btn { text-decoration: none; }
.link-btn { border: 0; background: none; padding: 2px 4px; color: var(--navy); font-size: 13px; font-weight: 600; cursor: pointer; }
[data-theme="dark"] .link-btn:not(.danger) { color: var(--due); }
.link-btn:hover { text-decoration: underline; }
/* EN | SR switch: under the logo in the sidebar, in the top bars and next to the theme button on the account pages. */
.lang-switch { display: inline-flex; flex: none; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.lang-switch button { height: 28px; min-width: 36px; padding: 0 9px; border: 0; background: transparent; color: var(--slate); font-size: 12px; font-weight: 700; letter-spacing: .05em; cursor: pointer; }
.lang-switch button + button { border-left: 1px solid var(--line-2); }
.lang-switch button:hover { background: var(--hilite); }
.lang-switch button[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; cursor: default; }
[data-theme="dark"] .lang-switch button[aria-pressed="true"] { background: var(--primary); }
.side .lang-switch, .topbar .lang-switch { border-color: rgba(255, 255, 255, .3); }
.side .lang-switch button, .topbar .lang-switch button { color: var(--on-navy-2); }
.side .lang-switch button + button, .topbar .lang-switch button + button { border-left-color: rgba(255, 255, 255, .3); }
.side .lang-switch button:hover, .topbar .lang-switch button:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.side .lang-switch button[aria-pressed="true"], .topbar .lang-switch button[aria-pressed="true"] { background: #FFFFFF; color: var(--navy); }
.side .lang-switch { align-self: flex-start; margin: -12px 0 0 8px; }
.theme-btn .if-dark { display: none; }
[data-theme="dark"] .theme-btn .if-dark { display: block; }
[data-theme="dark"] .theme-btn .if-light { display: none; }

.field { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--slate); min-width: 0; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field select, .cat-add input, .ctl select, .mstep select, .imp-col select, .imp-row select, .imp-row input:not([type="checkbox"]), .imp-rep input:not([type="checkbox"]) {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 400;
}
.imp-row select, .imp-row input:not([type="checkbox"]), .imp-rep input:not([type="checkbox"]) { height: 32px; font-size: 13px; }
.imp-rep-txt input { font-weight: 600; }
.field select, .ctl select, .mstep select, .imp-col select, .imp-row select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
.field input:focus, .field select:focus, .cat-add input:focus, .ctl select:focus, .mstep select:focus, .money-in:focus-within,
.imp-col select:focus, .imp-row select:focus, .imp-row input:not([type="checkbox"]):focus, .imp-rep input:not([type="checkbox"]):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }
.field input:disabled { background: var(--band); color: var(--muted); }
.field.invalid input, .field.invalid .money-in, .field.invalid select { border-color: var(--neg); }
input[type="date"] { min-width: 0; }
.money-in { display: flex; align-items: center; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.money-in i { padding: 0 2px 0 10px; font-style: normal; font-weight: 400; color: var(--slate); }
.money-in i:last-child { padding: 0 10px 0 2px; }
.field .money-in input { height: 32px; border: 0; box-shadow: none; background: transparent; }
.hint { font-size: 12.5px; color: var(--slate); }
.form-error { padding: 8px 10px; border: 1px solid var(--neg); border-radius: var(--r); background: var(--surface); color: var(--neg); font-size: 13px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 400; color: var(--text); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.seg button { height: 32px; padding: 0 14px; border: 0; border-left: 1px solid var(--line-2); background: none; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--hilite); }
.seg button[aria-checked="true"] { background: var(--navy); color: #FFFFFF; }
[data-theme="dark"] .seg button[aria-checked="true"] { background: var(--primary); }

.ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--slate); }
.ctl select { width: auto; min-width: 190px; }

/* ---------- account pages: the forms (the page around them is in auth.css) ---------- */
.form { display: grid; gap: 16px; margin-top: 24px; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.form-row a, .auth-alt a { color: var(--navy); font-weight: 600; }
[data-theme="dark"] .form-row a, [data-theme="dark"] .auth-alt a { color: var(--due); }
.auth-alt { margin-top: 20px; color: var(--slate); font-size: 13.5px; }
.pw { position: relative; display: block; }
.pw input { padding-right: 60px; }
.pw-toggle { position: absolute; right: 4px; top: 4px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--band); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done h2 { margin-top: 22px; }
.form-done p { margin-top: 8px; color: var(--slate); line-height: 1.6; }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 18px 12px 14px; background: var(--navy); color: #FFFFFF; }
.side .brand { padding: 4px 8px; color: #FFFFFF; }
.nav { display: grid; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: var(--r); color: var(--on-navy-2); text-decoration: none; font-weight: 500; }
.nav-link:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.nav-link[aria-current="page"] { background: var(--nav-on-bg); color: var(--nav-on-fg); font-weight: 700; box-shadow: inset 4px 0 0 #FFFFFF; }
[data-theme="light"] .nav-link[aria-current="page"] { box-shadow: inset 4px 0 0 #6E9BD3; }
.side-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .15); }
.me-name { padding: 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #FFFFFF; overflow-wrap: anywhere; }
.side-tools { display: flex; gap: 8px; padding: 0 4px; }
.side .icon-btn, .topbar .icon-btn { background: transparent; border-color: rgba(255, 255, 255, .25); color: #FFFFFF; }
.side .icon-btn:hover, .topbar .icon-btn:hover { background: rgba(255, 255, 255, .1); }
.side .icon-btn[aria-current="page"], .topbar .icon-btn[aria-current="page"] { background: var(--nav-on-bg); border-color: var(--nav-on-bg); color: var(--nav-on-fg); }
.in-setup .nav, .in-setup .icon-btn[data-go] { visibility: hidden; }
.main { min-width: 0; }
.topbar, .mmenu { display: none; }

/* ---------- accounts: the switcher at the top left ---------- */
/* An account's first letter in a small square, so the accounts are easy to tell apart. */
.acct-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--r); background: var(--chip); color: var(--navy); font-size: 12.5px; font-weight: 700; line-height: 1; }
[data-theme="dark"] .acct-badge { color: var(--ink); }
.acct-btn { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r); background: transparent; color: #FFFFFF; font: inherit; text-align: left; cursor: pointer; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.acct-btn > .ic { width: 15px; height: 15px; margin-left: auto; color: var(--on-navy-2); transition: transform .15s; }
.acct-btn[aria-expanded="true"] > .ic { transform: rotate(180deg); }
.acct-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* In the side bar: the account's letter, the word "Account" and its name, across the full width. */
.side-acct { margin-top: -8px; }
.acct-side { width: 100%; padding: 7px 10px 7px 7px; }
.acct-side .acct-badge { width: 32px; height: 32px; background: #FFFFFF; color: var(--navy); font-size: 14px; }
.acct-txt { display: grid; min-width: 0; line-height: 1.3; }
.acct-txt small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-txt .acct-name { font-size: 14px; }
/* In the top bar on phones: the logo, then the open account's name. */
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acct-top { flex: 0 1 auto; height: 36px; padding: 0 9px 0 11px; gap: 6px; font-size: 15px; }
/* The list of accounts: just under the button in the side bar, or dropping down from the top bar on phones. */
.amenu { position: fixed; inset: 0; z-index: 40; }
.amenu[hidden] { display: none; }
.am-scrim { position: absolute; inset: 0; }
.am-panel { position: absolute; display: grid; gap: 4px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line-2); border-radius: var(--r-box); background: var(--surface); box-shadow: var(--shadow-lg); animation: menu-in .18s cubic-bezier(.2, .8, .2, 1) both; }
.am-panel:focus { outline: none; }
.am-head { padding: 4px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.am-list { display: grid; gap: 2px; }
.am-item, .am-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.am-item:hover, .am-link:hover { background: var(--hilite); }
.am-item[aria-checked="true"] { background: var(--hilite); font-weight: 600; }
.am-item[aria-checked="true"] .acct-badge { background: var(--navy); color: #FFFFFF; }
[data-theme="dark"] .am-item[aria-checked="true"] .acct-badge { background: var(--primary); }
.am-item > .ic { margin-left: auto; color: var(--navy); }
[data-theme="dark"] .am-item > .ic { color: var(--due); }
.am-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-foot { display: grid; gap: 2px; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.am-foot:empty { display: none; }
.am-link { color: var(--navy); font-size: 13.5px; font-weight: 600; }
[data-theme="dark"] .am-link { color: var(--due); }
.am-link .ic { width: 16px; height: 16px; margin: 0 5px; }
/* While another account loads, the page fades a little. */
body.acct-busy .view { opacity: .45; transition: opacity .2s; pointer-events: none; }
/* Accounts shared with the person: a people mark instead of the first letter, and whose account it is. */
.acct-badge .ic { width: 15px; height: 15px; }
.acct-sh { display: inline-flex; color: var(--on-navy-2); }
.acct-sh .ic { width: 16px; height: 16px; }
.am-txt { display: grid; min-width: 0; line-height: 1.3; }
.am-txt small { font-size: 12px; font-weight: 400; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-head + .am-list + .am-head { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- sharing ---------- */
/* The owner's window: what the person may do, the new link to copy, the people with access and unused links. */
.sh-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-box); }
.sh-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.sh-acts { display: flex; align-items: center; gap: 4px 8px; }
.sh-list li:first-child { border-top: 0; }
.sh-who { display: grid; min-width: 0; }
.sh-who b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-who small { font-size: 12.5px; color: var(--slate); overflow-wrap: anywhere; }
.sh-h { margin-top: 4px; font-size: 13px; color: var(--slate); }
.sh-perm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.sh-perm button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; }
.sh-perm .ic { width: 16px; height: 16px; }
.sh-perm-sel { height: 32px; padding: 0 28px 0 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 13px; color: var(--ink); font-size: 13px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sh-made { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-2); border-left: 4px solid var(--pos); border-radius: var(--r-box); background: var(--inc-tint); }
.sh-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sh-copy input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: 13px; font-family: ui-monospace, Consolas, monospace; }
.sh-copy .btn { height: 36px; }
/* Settings: the box to paste a link someone sent. */
.sh-claim { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 4px 0 12px; }
.sh-claim .btn { height: 34px; }
.sh-claim .form-error { grid-column: 1 / -1; }
/* The same box under the first setup step, for someone who signed up to open a shared account. */
.setup-share { margin-top: 14px; }
.setup-share-txt { grid-column: 1 / -1; }
.setup-share-txt b { color: var(--ink); }
.setup-share-txt p { margin-top: 2px; font-size: 13px; }
/* An account shared to view only: a note at the top of every page, and no buttons that change anything. */
.ro-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line-2); border-left: 4px solid var(--inv); border-radius: var(--r-box); background: var(--inv-tint-2); color: var(--ink); font-size: 13.5px; }
.ro-bar .ic { flex: none; width: 18px; height: 18px; color: var(--inv-ink); }
.ro .add-btn:not(.quiet), .ro .add-row, .ro .empty-actions, .ro .m-add, .ro .m-acts, .ro .mm-acts, .ro [data-act="import"], .ro .ov-ask, .ro [data-act="budget-new"], .ro .setup-imp { display: none !important; }
.ro .cv-btn { pointer-events: none; }
.ro .cv-btn .ic { display: none; }
.ro-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.ro-fs:disabled .kind-seg button, .ro-fs:disabled select, .ro-fs:disabled input { cursor: default; }
.ro-val { color: var(--ink); font-weight: 600; }
.ro-list li { grid-template-columns: minmax(0, 1fr) auto; }
/* ---------- phone menu ---------- */
/* Phones and tablets: one button in the top bar opens a panel that drops down from it, holding the pages,
   language, theme, Settings and Log out. The page behind is dimmed and does not scroll. */
body.menu-open { overflow: hidden; }
.menu-btn { width: 40px; height: 40px; }
.menu-btn .ic { width: 20px; height: 20px; }
.topbar .menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.mmenu { position: fixed; inset: 52px 0 0; z-index: 30; }
.mm-scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade-in .2s ease-out both; }
.mm-panel { position: absolute; top: 0; right: 0; display: grid; gap: 14px; width: min(440px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 0 0 16px 16px; background: var(--surface); box-shadow: var(--shadow-lg); animation: menu-in .22s cubic-bezier(.2, .8, .2, 1) both; }
.mm-panel:focus { outline: none; }
@keyframes menu-in { from { transform: translateY(-10px); opacity: 0; } }
.mm-user { display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px; border-bottom: 1px solid var(--line); }
.mm-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--navy); color: #FFFFFF; font-size: 16px; font-weight: 700; }
[data-theme="dark"] .mm-avatar { background: var(--primary); }
.mm-who { display: grid; gap: 1px; min-width: 0; }
.mm-who b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-who small { font-size: 12.5px; line-height: 1.4; color: var(--slate); overflow-wrap: anywhere; }
.mm-who a { color: var(--navy); font-weight: 700; }
[data-theme="dark"] .mm-who a { color: var(--due); }
.mm-add { height: 44px; font-size: 14.5px; }
.mm-add .ic { width: 16px; height: 16px; }
/* The six pages as tiles, three by two; the page you are on is filled in navy. */
.mm-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mm-tile { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; height: 72px; padding: 0 4px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--band); color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.mm-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tile .ic { width: 21px; height: 21px; color: var(--navy); }
[data-theme="dark"] .mm-tile .ic { color: var(--due); }
.mm-tile:hover, .mm-tile:active { background: var(--hilite); }
.mm-tile[aria-current="page"], [data-theme="dark"] .mm-tile[aria-current="page"] { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.mm-tile[aria-current="page"] .ic { color: #FFFFFF; }
[data-theme="dark"] .mm-tile[aria-current="page"] { border-color: var(--primary); background: var(--primary); }
.mm-prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-pref { display: grid; gap: 6px; min-width: 0; }
.mm-pref > span { font-size: 12px; font-weight: 600; color: var(--slate); }
.mm-pref .lang-switch, .mm-theme { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.mm-pref .lang-switch button, .mm-theme button { height: 38px; }
.mm-theme button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 6px; }
.mm-theme .ic { width: 15px; height: 15px; }
.mm-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-foot .btn { height: 42px; }
.mm-foot .btn[aria-current="page"] { background: var(--hilite); }
/* During the first-run setup there are no pages to go to yet. */
.in-setup .mm-add, .in-setup .mm-nav, .in-setup .mm-foot [data-go] { display: none; }
.in-setup .mm-foot { grid-template-columns: 1fr; }
.demo-bar { padding: 9px 32px; background: var(--hilite); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.demo-bar a { margin-left: 6px; color: var(--navy); font-weight: 700; }
[data-theme="dark"] .demo-bar a { color: var(--due); }
.view { max-width: 1720px; padding: 24px 24px 64px; }
.boot { display: grid; place-items: center; min-height: 100vh; }
.boot .mark { width: 40px; height: 40px; animation: breathe 1.4s ease-in-out infinite; }
/* The Footing logo files (assets/brand/). The lockup has one foot of clear space built in. */
.brand .logo { display: block; height: 40px; width: auto; margin: -6px 0 -6px -10px; }
.brand .logo-sym { display: block; height: 34px; width: 34px; margin: -4px -4px -4px -6px; }
.boot-mark { width: 56px; height: 56px; animation: breathe 1.4s ease-in-out infinite; }
.boot .if-dark { display: none; }
[data-theme="dark"] .boot .if-dark { display: block; }
[data-theme="dark"] .boot .if-light { display: none; }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } }
@keyframes breathe { 50% { opacity: .4; } }

/* ---------- page parts ---------- */
.page-head { margin-bottom: 18px; }
.page-head .sub { margin-top: 4px; color: var(--slate); max-width: 80ch; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.section { margin-top: 22px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.note { font-size: 13px; color: var(--slate); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.two > .section { margin-top: 22px; }
.two.flat { gap: 24px; margin-top: 12px; }

.kgrid { display: grid; border: 1px solid var(--line); background: var(--surface); }
.kgrid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kgrid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kcell { display: grid; gap: 2px; align-content: start; padding: 14px 16px 13px; border-left: 1px solid var(--line); }
.kcell:first-child { border-left: 0; }
.kcell.t-inc, .rp-tile.t-inc { box-shadow: inset 0 3px 0 var(--inc); }
.kcell.t-exp, .rp-tile.t-exp { box-shadow: inset 0 3px 0 var(--exp); }
.kcell.t-inv, .rp-tile.t-inv { box-shadow: inset 0 3px 0 var(--inv); }
.kcell.t-net, .rp-tile.t-net { box-shadow: inset 0 3px 0 var(--navy); }
[data-theme="dark"] .kcell.t-net, [data-theme="dark"] .rp-tile.t-net { box-shadow: inset 0 3px 0 var(--due); }
.klabel { font-size: 12px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; }
.kval { font-size: 20px; font-weight: 600; color: var(--ink); }
.kval.pos { color: var(--pos); }
.kval.neg { color: var(--neg); }
.ksub { font-size: 12.5px; color: var(--slate); }

.legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--slate); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; }
.sw-inc { background: var(--inc-fill); box-shadow: inset 0 0 0 1px var(--inc); }
.sw-exp { background: var(--exp-fill); box-shadow: inset 0 0 0 1px var(--exp); }
.sw-inv { background: var(--inv-fill); box-shadow: inset 0 0 0 1px var(--inv); }
/* Investment amounts and labels are written in the investment blue. */
.inv-ink, .grid td.inv-ink { color: var(--inv-ink); }
.sub-line { display: block; font-size: 12px; font-weight: 400; color: var(--slate); }

/* ---------- grid tables ---------- */
.grid-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th, .grid td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-weight: 400; }
.grid td.wrap { white-space: normal; min-width: 96px; }
.grid thead th { background: var(--navy); color: #FFFFFF; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: normal; vertical-align: bottom; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .12); }
.grid thead th:first-child { border-left: 0; }
.grid thead tr.sub-head th { background: var(--navy-2); }
.grid td + td, .grid th + td, .grid td + th { border-left: 1px solid var(--line); }
.grid .num { text-align: right; }
.grid td.amt { font-weight: 700; color: var(--ink); }
.grid .center { text-align: center; }
.grid tbody th[scope="row"] { color: var(--ink); font-weight: 600; }
.grid tr.rec td, .grid tr.rec th { background: var(--rec); }
.grid tr.click { cursor: pointer; }
.grid tr.click:hover td, .grid tr.click:hover th, .grid tr.click:focus td { background: var(--chip); }
.grid tr.click:focus { outline: none; }
.grid tr.click:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.grid tr.sec th { background: var(--chip); color: var(--navy); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
[data-theme="dark"] .grid tr.sec th, [data-theme="dark"] .grid tr.band th, [data-theme="dark"] .grid tr.band td { color: var(--ink); }
.grid tr.band th, .grid tr.band td { background: var(--surface); color: var(--navy); font-weight: 400; border-top: 1px solid var(--line-2); }
/* Transactions: each month is one block, alternating white and light blue, with its totals at the bottom. */
.grid tr.alt > td, .grid tr.alt > th { background: var(--hilite); }
.grid tr.mtotal th, .grid tr.mtotal td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line-2); }
.grid tr.mtotal td b { font-weight: 700; }
.grid tr.total th, .grid tr.total td { font-weight: 700; color: var(--ink); background: var(--band); border-top: 1px solid var(--navy); }
.grid tr.net th, .grid tr.net td { font-weight: 700; color: var(--ink); background: var(--hilite); border-top: 1px solid var(--navy); border-bottom: 3px double var(--navy); }
[data-theme="dark"] .grid tr.total th, [data-theme="dark"] .grid tr.total td, [data-theme="dark"] .grid tr.net th, [data-theme="dark"] .grid tr.net td { border-top-color: var(--line-2); border-bottom-color: var(--line-2); }
.grid tr.net td.pos, .grid tr.total td.pos { color: var(--pos); }
.grid tr.net td.neg, .grid tr.total td.neg { color: var(--neg); }
.grid tr.now th, .grid tr.now td { background: var(--hilite); }
/* Transactions: the balance carried in opens each month and the balance at its end closes it. */
.grid tr.carry-row td { color: var(--navy); }
.grid tr.carry-row td.dim { color: var(--slate); }
.carry-lbl { display: inline-flex; align-items: center; gap: 7px; }
.grid tr.carry-row .ic { width: 15px; height: 15px; }
[data-theme="dark"] .grid tr.carry-row td:not(.dim) { color: var(--due); }
.grid tr.mbal th, .grid tr.mbal td { font-weight: 700; color: var(--ink); }
.grid tr.mbal td b.neg, .grid tr.carry-row td.neg { color: var(--neg); }
.grid tr.ended td { color: var(--muted); }
.grid tr.ended td.strong { color: var(--slate); }
.grid tr.add-row td, .grid tr.more-row td { padding: 0; }
.add-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px;
  border: 0; border-top: 1px dashed var(--line-2); background: var(--surface); color: var(--navy);
  font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
}
[data-theme="dark"] .add-btn { color: var(--due); }
.add-btn:hover { background: var(--hilite); }
.add-btn .ic { width: 15px; height: 15px; }
.add-btn.quiet { border-top: 0; color: var(--slate); font-weight: 500; justify-content: center; }

/* ---------- statement (P&L) ---------- */
.grid .lv0 { padding-left: 14px; }
.grid .lv1 { padding-left: 26px; }
.grid .lv2 { padding-left: 40px; }
.statement .add-btn { padding-left: 38px; }
.grid td.fill { border-left-color: transparent; }
/* Every row in the Income section is green and every row in Expenses is red, in soft tints. */
.statement tr.in-inc > td, .statement tr.in-inc > th, .statement tr.in-inc .add-btn { background: var(--inc-tint); }
.statement tr.in-exp > td, .statement tr.in-exp > th, .statement tr.in-exp .add-btn { background: var(--exp-tint); }
.statement tr.in-inc.click:hover > td, .statement tr.in-inc.click:focus > td, .statement tr.in-inc .add-btn:hover { background: var(--inc-tint-2); }
.statement tr.in-exp.click:hover > td, .statement tr.in-exp.click:focus > td, .statement tr.in-exp .add-btn:hover { background: var(--exp-tint-2); }
.grid tr.sec.inc th { background: var(--inc-tint-2); color: var(--inc-ink); }
.grid tr.sec.exp th { background: var(--exp-tint-2); color: var(--exp-ink); }
.grid tr.total.inc th, .grid tr.total.inc td { background: var(--inc-tint-2); border-top-color: var(--inc); }
.grid tr.total.exp th, .grid tr.total.exp td { background: var(--exp-tint-2); border-top-color: var(--exp); }
.statement tr.in-inv > td, .statement tr.in-inv > th { background: var(--inv-tint); }
.grid tr.sec.inv th { background: var(--inv-tint-2); color: var(--inv-ink); }
.grid tr.total.inv th, .grid tr.total.inv td { background: var(--inv-tint-2); border-top-color: var(--inv); }
.statement tr.in-inv > td:first-child, .statement tr.sec.inv > th, .statement tr.total.inv > th { box-shadow: inset 3px 0 0 var(--inv); }
.statement tr.in-inc > td:first-child, .statement tr.sec.inc > th, .statement tr.total.inc > th, .statement tr.in-inc .add-btn { box-shadow: inset 3px 0 0 var(--inc); }
.statement tr.in-exp > td:first-child, .statement tr.sec.exp > th, .statement tr.total.exp > th, .statement tr.in-exp .add-btn { box-shadow: inset 3px 0 0 var(--exp); }
.statement .add-btn { border-top-color: var(--line); }

/* ---------- overview ---------- */
/* One month at a glance: the result first (net profit, with income and expenses as two bars on one scale),
   then where the money came from and went, biggest first, and on the side what has to be paid next. */
.ov { container-type: inline-size; }
.ov-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 24px; }
.ov-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.mstep { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mstep select { width: auto; min-width: 200px; font-weight: 600; }
.mstep .icon-btn { width: 34px; height: 34px; }
.mstep .icon-btn:disabled { opacity: .35; cursor: default; background: var(--surface); }
[data-theme="dark"] .mstep .icon-btn { color: var(--ink); }
.mstep .btn { margin-right: 4px; }
.mstep .btn.is-off { visibility: hidden; }
.mpick { position: relative; display: block; min-width: 0; }
.mpick-txt { display: none; }
/* Import beside the month picker; on a phone it moves to the title line, where there is room. */
.mstep .ov-imp { margin: 0 0 0 8px; }
.ov-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ov-imp-sm { display: none; }

.ov-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); overflow: hidden; }
.ov-net { display: grid; align-content: center; justify-items: start; gap: 6px; min-width: 0; padding: 24px 26px; }
/* A profit tints the result green, a loss red. */
.ov-net.gain { background: var(--inc-tint); }
.ov-net.loss { background: var(--exp-tint); }
.ov-big { font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.ov-big.pos { color: var(--pos); }
.ov-big.neg { color: var(--neg); }
.ov-say { font-size: 14px; color: var(--text); }
.ov-prev { margin-top: 4px; font-size: 12.5px; color: var(--slate); }
.ov-prev b { font-weight: 600; color: var(--ink); }
.ov-prev b.pos { color: var(--pos); }
.ov-prev b.neg { color: var(--neg); }
.ov-flow { display: grid; align-content: center; gap: 18px; min-width: 0; padding: 24px 26px; border-left: 1px solid var(--line); }
.flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.flow-head span { font-size: 13px; font-weight: 600; color: var(--slate); }
.flow-head b { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.flow-track { display: flex; height: 24px; border-radius: var(--r); background: var(--band); box-shadow: inset 0 0 0 1px var(--line); }
.flow-fill { flex: none; height: 100%; border-radius: var(--r); }
.t-inc .flow-fill { background: var(--inc-fill); box-shadow: inset 0 0 0 1px var(--inc); }
.t-exp .flow-fill { background: var(--exp-fill); box-shadow: inset 0 0 0 1px var(--exp); }
.t-inv .flow-fill { background: var(--inv-fill); box-shadow: inset 0 0 0 1px var(--inv); }
/* Investments start where expenses end, so the two read as one stretch of money going out. */
.flow-off { flex: none; height: 100%; }
/* The dashed part is the difference between the two bars: what was kept, or what the income was short by. */
.flow-gap { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; margin-left: 3px; border: 1px dashed; border-radius: var(--r); overflow: hidden; font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; }
.flow-gap.keep { border-color: var(--inc); background: var(--inc-tint); color: var(--inc-ink); }
.flow-gap.short { border-color: var(--exp); background: var(--exp-tint); color: var(--exp-ink); }

/* Under the bars, the month as a sum: carried over from last month + net profit = balance at the end. */
/* The balance at the end of the month is the result of the sum, so it sits in a white card with a navy
   badge, on a soft blue band. It stands out without outweighing the net profit above it. */
.ov-carry { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.3fr); align-items: center; gap: 0 12px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--hilite); }
.cv { display: grid; gap: 3px; min-width: 0; padding: 7px 8px; text-align: left; }
/* What the month started with can be changed: it is a button that lights up under the pointer. */
.cv-btn { border: 0; border-radius: var(--r-box); background: none; color: inherit; font: inherit; cursor: pointer; transition: background-color .15s; }
.cv-btn:hover { background: var(--surface); }
.cv-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
.cv-hl { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--r-box); background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.cv-badge { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-box); background: var(--navy); color: #FFFFFF; }
[data-theme="dark"] .cv-badge { background: var(--primary); }
.cv-badge .ic { width: 18px; height: 18px; }
.cv-body { display: grid; gap: 2px; min-width: 0; }
.cv-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; min-width: 0; }
.cv-label { font-size: 12.5px; font-weight: 600; color: var(--slate); }
.cv-note { font-size: 11.5px; font-weight: 600; color: var(--due); }
.cv-val { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-val b { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cv-hl .cv-val b { font-size: 21px; color: var(--navy); }
[data-theme="dark"] .cv-hl .cv-val b { color: var(--ink); }
.cv-val b.pos { color: var(--pos); }
.cv-val b.neg, .cv-hl .cv-val b.neg { color: var(--neg); }
.cv-val .ic { width: 15px; height: 15px; color: var(--slate); }
.cv-btn:hover .cv-val .ic { color: var(--navy); }
[data-theme="dark"] .cv-btn:hover .cv-val .ic { color: var(--due); }
.cv-op { font-size: 18px; font-weight: 600; color: var(--slate); }

/* Older accounts are asked once, above the month, for the money they have now. */
.ov-ask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-box); background: var(--hilite); }
.ov-ask h2 { font-size: 15px; }
.ov-ask-txt p { margin-top: 3px; font-size: 13px; color: var(--slate); }
.ov-ask-row { display: flex; align-items: center; gap: 8px; }
.ov-ask .money-in { width: 180px; }
.ov-ask .money-in input { width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--ink); font-size: 14px; outline: none; }
.ov-ask .form-error { grid-column: 1 / -1; }

.ov-cols { display: grid; align-items: start; gap: 18px; margin-top: 18px; }
.ov-main, .ov-side { display: grid; align-content: start; gap: 18px; min-width: 0; }
@container (min-width: 780px) {
  .ov-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
@container (max-width: 640px) {
  .ov-hero { grid-template-columns: 1fr; }
  .ov-flow { border-left: 0; border-top: 1px solid var(--line); }
  .ov-net, .ov-flow { padding: 18px; }
  .ov-big { font-size: 32px; }
  /* In a narrow box the sum reads top to bottom, like a receipt, with the balance as its last line. */
  /* In a narrow box the sum reads top to bottom, like a receipt, and the balance card is its total. */
  .ov-carry { grid-template-columns: 1fr; gap: 0; padding: 6px 12px 12px; }
  .cv-op { display: none; }
  .cv:not(.cv-hl) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 6px; }
  .cv:not(.cv-hl) .cv-txt { display: grid; gap: 1px; }
  .cv-btn { border-radius: var(--r); }
  .cv-hl { margin-top: 6px; }
}

.ov-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); overflow: hidden; container-type: inline-size; }
.ov-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); transition: border-color .25s; }
.ov-count { font-size: 12.5px; color: var(--slate); }
.ov-total { margin-left: auto; font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* Income cards are green and expense cards red, in soft tints, with a colored top edge like the summary boxes. */
.ov-card.t-inc { border-top: 3px solid var(--inc); background: linear-gradient(var(--inc-tint), var(--inc-tint)), var(--surface); }
.ov-card.t-exp { border-top: 3px solid var(--exp); background: linear-gradient(var(--exp-tint), var(--exp-tint)), var(--surface); }
.ov-card.t-inv { border-top: 3px solid var(--inv); background: linear-gradient(var(--inv-tint), var(--inv-tint)), var(--surface); }
.ov-card.t-inc .ov-card-head { background: var(--inc-tint-2); }
.ov-card.t-exp .ov-card-head { background: var(--exp-tint-2); }
.ov-card.t-inv .ov-card-head { background: var(--inv-tint-2); }
.ov-card.t-inc h2 { color: var(--inc-ink); }
.ov-card.t-exp h2 { color: var(--exp-ink); }
.ov-card.t-inv h2 { color: var(--inv-ink); }
.ov-list { display: grid; }
.ov-empty { padding: 16px 18px; font-size: 13.5px; color: var(--slate); }
/* Fold: the title is a button with an arrow. Folded, the details slide shut and only the title row stays. */
.ov-fold { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 -4px -6px; padding: 4px 8px 4px 4px; border: 0; border-radius: var(--r); background: none; color: inherit; font: inherit; cursor: pointer; }
.ov-fold:hover { background: rgba(15, 23, 42, .06); }
[data-theme="dark"] .ov-fold:hover { background: rgba(255, 255, 255, .08); }
.ov-fold .ic { width: 16px; height: 16px; transition: transform .2s ease; }
.ov-card.folded .ov-fold .ic { transform: rotate(-90deg); }
.ov-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.ov-card.folded .ov-body { grid-template-rows: 0fr; }
.ov-body-in { min-height: 0; overflow: hidden; }
.ov-card.folded .ov-card-head { border-bottom-color: transparent; }
.ov-card .add-btn { padding-left: 18px; background: transparent; }
.ov-card.t-inc .add-btn:hover { background: var(--inc-tint-2); }
.ov-card.t-exp .add-btn:hover { background: var(--exp-tint-2); }
.ov-card.t-inv .add-btn:hover { background: var(--inv-tint-2); }

.ov-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "meta pct" "bar bar";
  align-items: baseline; gap: 1px 16px; width: 100%; padding: 11px 18px;
  border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ov-row:first-child { border-top: 0; }
.ov-row:focus-visible, .up-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.t-inc .ov-row:hover { background: var(--inc-tint-2); }
.t-exp .ov-row:hover { background: var(--exp-tint-2); }
.t-inv .ov-row:hover { background: var(--inv-tint-2); }
.ov-name { grid-area: name; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-meta { grid-area: meta; min-width: 0; font-size: 12.5px; color: var(--slate); }
.ov-amt { grid-area: amt; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
.ov-pct { grid-area: pct; font-size: 12px; color: var(--slate); text-align: right; }
.ov-bar { grid-area: bar; align-self: center; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ov-bar i { display: block; height: 100%; border-radius: 4px; }
.t-inc .ov-bar i { background: var(--inc-fill); box-shadow: inset 0 0 0 1px var(--inc); }
.t-exp .ov-bar i { background: var(--exp-fill); box-shadow: inset 0 0 0 1px var(--exp); }
.t-inv .ov-bar i { background: var(--inv-fill); box-shadow: inset 0 0 0 1px var(--inv); }
/* In a wide card the bar sits between the name and the amount, and the details run underneath. */
@container (min-width: 540px) {
  .ov-row { grid-template-columns: minmax(0, 1.1fr) minmax(48px, 1fr) minmax(88px, auto); grid-template-areas: "name bar amt" "meta meta pct"; }
  .ov-bar { margin-top: 0; }
}

.up-card { border-top: 3px solid var(--navy); }
[data-theme="dark"] .up-card { border-top-color: var(--due); }
.up-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.up-row:first-child { border-top: 0; }
.up-row:hover { background: var(--hilite); }
.up-day { display: grid; justify-items: center; align-content: center; gap: 3px; width: 42px; height: 42px; border-radius: var(--r); background: var(--hilite); color: var(--navy); line-height: 1; }
.up-day b { font-size: 16px; font-weight: 700; }
.up-day small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.up-row:hover .up-day { background: var(--chip); }
.up-row.today .up-day { background: var(--navy); color: #FFFFFF; }
[data-theme="dark"] .up-day { color: var(--due); }
[data-theme="dark"] .up-row.today .up-day { background: var(--primary); color: #FFFFFF; }
.up-main { display: grid; min-width: 0; }
.up-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-meta { font-size: 12.5px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row.today .up-meta { color: var(--due); font-weight: 600; }
.up-row.inv .up-day { background: var(--inv-tint-2); box-shadow: inset 0 0 0 1px var(--inv); color: var(--inv-ink); }
.up-kind { color: var(--inv-ink); font-weight: 600; }
.grid td.amt.inv-ink { color: var(--inv-ink); }
.up-amt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.up-more { padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--slate); }
.up-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-2); background: var(--band); color: var(--ink); font-weight: 700; }
.up-foot b { font-size: 16px; }
/* The total sits in the footer; folded, the footer is shut, so the total shows in the title row instead. */
.up-card .ov-total { display: none; }
.up-card.folded .ov-total { display: block; }

/* ---------- budgets ---------- */
/* The Overview card, in sand: each budget's spending against what it can spend this month. */
.ov-card.t-bud { border-top: 3px solid var(--bud); background: linear-gradient(var(--bud-tint), var(--bud-tint)), var(--surface); }
.ov-card.t-bud .ov-card-head { background: var(--bud-tint-2); }
.ov-card.t-bud h2 { color: var(--bud-ink); }
.ov-card.t-bud .add-btn:hover { background: var(--bud-tint-2); }
.bd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "bar bar" "meta meta"; align-items: baseline; gap: 2px 12px; width: 100%; padding: 11px 16px 12px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bd-row:first-child { border-top: 0; }
.bd-row:hover { background: var(--bud-tint-2); }
.bd-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.bd-name { grid-area: name; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-amt { grid-area: amt; text-align: right; white-space: nowrap; }
.bd-amt b { font-weight: 700; color: var(--ink); }
.bd-amt small { font-size: 12.5px; color: var(--slate); }
.bd-bar { grid-area: bar; height: 8px; margin: 7px 0 5px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.bd-bar i { display: block; max-width: 100%; height: 100%; border-radius: 4px; background: var(--bud-fill); box-shadow: inset 0 0 0 1px var(--bud); }
.bd-row.over .bd-bar i { background: var(--exp-fill); box-shadow: inset 0 0 0 1px var(--exp); }
.bd-meta { grid-area: meta; font-size: 12.5px; color: var(--slate); }
.bd-meta .neg { font-weight: 600; }
/* The window: its two parts, the month's totals and the expenses to tick. */
.modal-card.bd-win { width: min(640px, 100%); }
.bd-steps button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.bd-steps li:has(button):hover { background: var(--hilite); }
.bd-steps li:has(button) { cursor: pointer; }
.imp-chip.t-bud { box-shadow: inset 3px 0 0 var(--bud); }
.imp-chip.over b { color: var(--neg); }
.bd-list { border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; }
.bd-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; border-top: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.bd-pick:first-child { border-top: 0; }
.bd-pick:hover { background: var(--hilite); }
.bd-pick.on { background: var(--bud-tint-2); box-shadow: inset 3px 0 0 var(--bud); }
.bd-pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
.bd-pick-main { display: grid; min-width: 0; }
.bd-pick-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pick-meta { font-size: 12.5px; color: var(--slate); }
.bd-pick-meta em { font-style: normal; font-weight: 600; color: var(--bud-ink); }
.bd-pick-amt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.bd-none { padding: 4px 0; }

/* Played once when a month is shown: the boxes rise in and the bars grow. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.ov-anim .ov-hero, .ov-anim .ov-card { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.ov-anim .ov-main > .ov-card:nth-child(1) { animation-delay: .07s; }
.ov-anim .ov-main > .ov-card:nth-child(2) { animation-delay: .14s; }
.ov-anim .ov-main > .ov-card:nth-child(3) { animation-delay: .21s; }
.ov-anim .ov-side > .ov-card { animation-delay: .21s; }
.ov-anim .ov-side > .ov-card:nth-child(2) { animation-delay: .28s; }
.ov-anim .bd-bar i { transform-origin: left; animation: grow-x .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.35s + var(--i, 0) * 60ms); }
.ov-anim .flow-fill { transform-origin: left; animation: grow-x .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
.ov-anim .t-exp .flow-fill { animation-delay: .22s; }
.ov-anim .t-inv .flow-fill { animation-delay: .34s; }
.ov-anim .flow-gap { animation: fade-in .5s ease-out .85s both; }
.ov-anim .ov-bar i { transform-origin: left; animation: grow-x .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.25s + var(--i, 0) * 60ms); }

/* ---------- reports ---------- */
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes dash-in { from { stroke-dasharray: 0 100; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.chart-box { padding: 16px 16px 8px; border: 1px solid var(--line); background: var(--surface); }
.chart-hint { margin-top: 6px; font-size: 12.5px; color: var(--slate); }
.empty-note { padding: 32px 18px; color: var(--slate); text-align: center; }
.empty-panel { display: grid; gap: 8px; justify-items: start; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* The year's summary: the results first, net profit and the balance at the end of the year, then the
   totals that make them. The gaps between the boxes draw the lines. */
.rp-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.rp-tile { grid-column: span 3; display: grid; gap: 7px; align-content: start; min-width: 0; padding: 16px 18px; background: var(--surface); }
.rp-sum.n4 .rp-tile.t-inc, .rp-sum.n4 .rp-tile.t-exp, .rp-sum.n4 .rp-tile.t-inv { grid-column: span 2; }
.rp-tile.t-bal { box-shadow: inset 0 3px 0 var(--navy); }
[data-theme="dark"] .rp-tile.t-bal { box-shadow: inset 0 3px 0 var(--due); }
.rp-big { font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.rp-big.pos { color: var(--pos); }
.rp-big.neg { color: var(--neg); }
.bstack.inc { background: var(--inc-fill); box-shadow: inset 0 0 0 1px var(--inc); }
.bstack.exp { background: var(--exp-fill); box-shadow: inset 0 0 0 1px var(--exp); }
.bstack.inv { background: var(--inv-fill); box-shadow: inset 0 0 0 1px var(--inv); }
.rp-net { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rp-net-txt { display: grid; gap: 6px; min-width: 0; }
.ring { width: 68px; height: 68px; flex: none; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 3.4; }
.ring-val { fill: none; stroke: var(--inc); stroke-width: 3.4; animation: dash-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.ring-val.neg { stroke: var(--exp); }
.ring text { font-family: var(--font); font-size: 8px; font-weight: 700; fill: var(--ink); }

.bars { position: relative; height: 260px; padding-left: 56px; }
.bars-grid { position: absolute; inset: 0 0 28px 56px; display: flex; flex-direction: column-reverse; justify-content: space-between; pointer-events: none; }
.bars-grid span { position: relative; height: 0; border-top: 1px solid var(--line); }
.bars-grid span::before { content: attr(data-v); position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--slate); white-space: nowrap; }
.bars-cols { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 100%; }
.bcol { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.bcol:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.bpair { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--line-2); }
.bcol.now .bpair { background: var(--hilite); }
.bcol:hover .bpair { background: var(--chip); }
.bstack { display: block; width: clamp(5px, 30%, 22px); transform-origin: bottom; animation: grow-y .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.blabel { height: 28px; line-height: 28px; text-align: center; font-size: 11.5px; color: var(--slate); }
.bcol.now .blabel { color: var(--ink); font-weight: 700; }
.bars.three .bpair { gap: 2px; }
.bars.three .bstack { width: clamp(4px, 26%, 16px); }

.donut-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 22px; padding: 16px 18px; }
.donut { position: relative; width: 170px; height: 170px; }
.donut svg { width: 100%; height: 100%; overflow: visible; }
.dtrack { fill: none; stroke: var(--line); stroke-width: 4.4; }
.dseg { fill: none; stroke: var(--c); stroke-width: 4.4; animation: dash-in .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 110ms); transition: stroke-width .15s; }
.dseg:hover { stroke-width: 5.6; }
.donut-mid { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; pointer-events: none; }
.donut-mid b { max-width: 118px; font-size: 14.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.donut-mid span { font-size: 12px; color: var(--slate); }
.legend-list { list-style: none; margin: 0; padding: 0; min-width: 0; }
.legend-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 50px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.legend-list li:first-child { border-top: 0; }
.dot { width: 10px; height: 10px; background: var(--c); }
.lg-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-val { text-align: right; white-space: nowrap; }
.lg-pct { text-align: right; color: var(--slate); }
/* In a narrow box the legend goes under the donut, so the category names have room. */
.two > .section { container-type: inline-size; }
@container (max-width: 560px) {
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .legend-list { width: 100%; }
}

.lc { padding-left: 56px; }
.lc-plot { position: relative; height: 220px; }
.lc-grid { position: absolute; inset: 0; pointer-events: none; }
.lc-grid span { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.lc-grid span.zero { border-top-color: var(--line-2); }
.lc-grid span::before { content: attr(data-v); position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--slate); white-space: nowrap; }
.lc-draw { position: absolute; inset: 0; animation: reveal 1.2s cubic-bezier(.3, .6, .2, 1) both; }
.lc-draw svg { width: 100%; height: 100%; overflow: visible; }
.lc-area { fill: var(--hilite); }
.lc-line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--navy); border-radius: 50%; background: var(--surface); animation: fade-in .4s ease-out both; animation-delay: calc(.3s + var(--i) * 70ms); }
.lc-dot:hover, .lc-dot.first { background: var(--navy); }
[data-theme="dark"] .lc-line { stroke: var(--due); }
[data-theme="dark"] .lc-dot { border-color: var(--due); }
[data-theme="dark"] .lc-dot:hover, [data-theme="dark"] .lc-dot.first { background: var(--due); }
.lc-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 28px; line-height: 28px; text-align: center; font-size: 11.5px; color: var(--slate); }

.toplist { list-style: none; margin: 0; padding: 6px 18px; }
.toplist li { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.toplist li:first-child { border-top: 0; }
.tl-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar { height: 12px; background: var(--band); }
.tl-bar i { display: block; height: 100%; background: var(--bar); transform-origin: left; animation: grow-x .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 80ms); }
.tl-val { min-width: 92px; text-align: right; white-space: nowrap; }
.tl-val small { display: inline-block; min-width: 44px; margin-left: 8px; font-size: 12px; color: var(--slate); }
.inv-list .tl-bar i { background: var(--inv-fill); box-shadow: inset 0 0 0 1px var(--inv); }

.numbers summary { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--navy); font-weight: 600; cursor: pointer; list-style: none; }
.numbers summary::-webkit-details-marker { display: none; }
.numbers summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.numbers[open] summary::before { transform: rotate(45deg); }
.numbers[open] summary { border-bottom: 0; }
.numbers summary:hover { background: var(--hilite); }
[data-theme="dark"] .numbers summary { color: var(--due); }

.tip { position: fixed; z-index: 90; display: grid; gap: 3px; min-width: 190px; max-width: 280px; padding: 9px 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); font-size: 12.5px; pointer-events: none; }
.tip[hidden] { display: none; }
.tip > b { color: var(--ink); font-size: 13px; }
.tip-row { display: flex; justify-content: space-between; gap: 16px; }
.tip-row b { color: var(--ink); font-weight: 600; }
.tip-row b.pos { color: var(--pos); }
.tip-row b.neg { color: var(--neg); }
.tip-sub { font-size: 12px; color: var(--slate); }

/* ---------- settings ---------- */
.panel { padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); }
.panel + .panel, .two + .panel { margin-top: 18px; }
.two > .panel + .panel { margin-top: 0; }
.form-panel { display: grid; gap: 14px; align-content: start; }
.form-actions { display: flex; justify-content: flex-end; }
.pref { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 12px 0; }
.pref + .pref { border-top: 1px solid var(--line); }
.panel h2 + .pref { margin-top: 6px; }
.pref b { color: var(--ink); font-weight: 600; }
.pref .dim { font-size: 13px; }
@media (min-width: 1200px) {
  .two.cats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cat-col h3 { margin-bottom: 6px; }
.cat-list { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--line); }
.cat-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--line); }
.cat-list li:first-child { border-top: 0; }
.cat-list .dim { font-size: 12.5px; }
.cat-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.acct-list .cat-name { display: flex; align-items: center; gap: 10px; }
/* Own accounts: name, note, Share, Rename and Delete. Shared ones: name, note and Leave. */
.acct-list li { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
.acct-list li.is-shared { grid-template-columns: minmax(0, 1fr) auto auto; }
.acct-pref > div:first-child { flex: 1 1 300px; max-width: 640px; }
#accounts { scroll-margin-top: 16px; }
.cat-add { display: flex; gap: 8px; }
.cat-add input { height: 34px; }

/* ---------- setup ---------- */
.setup { max-width: 760px; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--line); background: var(--surface); }
.steps li { padding: 9px 12px; border-left: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--slate); }
.steps li:first-child { border-left: 0; }
.steps li.now { background: var(--navy); color: #FFFFFF; }
.steps li.done { background: var(--hilite); color: var(--navy); }
.setup-card { display: grid; gap: 14px; }
.setup-card .sub { color: var(--slate); max-width: 64ch; }
.start-field { max-width: 320px; }
.cur-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line-2); }
.cur { display: grid; gap: 2px; padding: 12px; border: 0; border-left: 1px solid var(--line-2); background: var(--surface); text-align: left; cursor: pointer; }
.cur:first-child { border-left: 0; }
.cur b { color: var(--ink); font-size: 15px; }
.cur span { font-size: 12.5px; color: var(--slate); }
.cur:hover { background: var(--hilite); }
.cur[aria-checked="true"] { background: var(--navy); }
.cur[aria-checked="true"] b, .cur[aria-checked="true"] span { color: #FFFFFF; }
.setup-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
/* With more than one account, which one is being set up. */
.setup-for { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 13.5px; color: var(--slate); }
.setup-for b { color: var(--ink); }
/* A question, with a short explanation under it in smaller letters. */
.setup-q { display: grid; gap: 4px; }
.setup-q .note { max-width: 62ch; font-size: 12.5px; line-height: 1.55; }
.count-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(400px, 100%); }
.count-seg button { height: 46px; padding: 0; font-size: 17px; font-weight: 700; }
.acct-names { max-width: 600px; }

/* ---------- modal, lists, toasts ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal-scrim { position: absolute; inset: 0; background: var(--scrim); }
.modal-card { position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(100vh - 40px); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.modal-card.narrow { width: min(460px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--navy); }
.modal-head h2 { color: #FFFFFF; font-size: 15px; }
.modal-head .icon-btn { background: transparent; border-color: rgba(255, 255, 255, .3); color: #FFFFFF; width: 28px; height: 28px; }
.modal-head .icon-btn:hover { background: rgba(255, 255, 255, .1); }
/* Rows keep their full height and the body scrolls; otherwise boxes that clip their content get squeezed. */
.modal-body { display: grid; grid-auto-rows: max-content; align-content: start; gap: 14px; padding: 16px; overflow-y: auto; }
.modal-body > p { line-height: 1.6; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--band); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.span2 { grid-column: 1 / -1; }
.preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--hilite); }
.preview.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv { display: grid; gap: 2px; padding: 9px 12px; border-left: 1px solid var(--line); min-width: 0; }
.pv:first-child { border-left: 0; }
.pv span { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
.pv b { font-weight: 600; color: var(--ink); font-size: 13.5px; }
/* Expense, income or investment: three equal buttons, each with its color. */
.kind-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kind-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 10px; }
.kdot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.k-exp .kdot { background: var(--exp-fill); box-shadow: inset 0 0 0 1.5px var(--exp); }
.k-inc .kdot { background: var(--inc-fill); box-shadow: inset 0 0 0 1.5px var(--inc); }
.k-inv .kdot { background: var(--inv-fill); box-shadow: inset 0 0 0 1.5px var(--inv); }
.kind-seg button[aria-checked="true"] .kdot { box-shadow: 0 0 0 2px #FFFFFF; }
.combo { position: relative; }
.combo-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 5; max-height: 230px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.combo-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: 13.5px; font-weight: 400; }
.combo-opt:first-child { border-top: 0; }
.combo-opt:hover, .combo-opt:focus { background: var(--hilite); outline: none; }
.combo-opt.create { color: var(--navy); font-weight: 600; }
[data-theme="dark"] .combo-opt.create { color: var(--due); }
.combo-opt .ic { width: 14px; height: 14px; }
.combo-empty { padding: 9px 10px; font-size: 13px; font-weight: 400; color: var(--slate); }
.toasts { position: fixed; left: 50%; bottom: 22px; z-index: 80; display: grid; gap: 8px; width: min(460px, calc(100% - 32px)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; background: var(--navy); color: #FFFFFF; box-shadow: var(--shadow-lg); font-size: 13.5px; pointer-events: auto; }
.toast.error { background: var(--neg); }
.toast button { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.toast.out { opacity: 0; transition: opacity .3s; }

/* ---------- phone lists ---------- */
/* On a phone the wide tables become lists: Transactions is one card per month, newest first, and Expenses,
   Income and Investments are one row per item, recurring first. Rows are whole buttons, easy to tap. */
.m-stack { display: grid; gap: 14px; }
.kgrid + .m-stack { margin-top: 18px; }
.m-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
.m-list { display: grid; }
.m-empty { padding: 18px 16px; font-size: 13.5px; color: var(--slate); }
.m-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border: 1px dashed var(--line-2); border-radius: var(--r-box); background: var(--surface); color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
[data-theme="dark"] .m-add { color: var(--due); }
.m-add .ic { width: 16px; height: 16px; }
.m-more { height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-box); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.m-add:active, .m-more:active, .m-row:active, .m-item:active, button.m-num:active { background: var(--hilite); }
.m-row:focus-visible, .m-item:focus-visible, .m-num:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.m-name { min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-meta { min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--slate); }
.m-amt { font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
.m-stat { white-space: nowrap; }
.m-amt s { font-weight: 400; color: var(--muted); }
.m-amt.neg { color: var(--neg); }

/* A month: the header stays in view while its payments scroll past. */
.m-head { position: sticky; top: 52px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); border-radius: var(--r-box) var(--r-box) 0 0; background: var(--band); }
.m-head h2 { font-size: 14.5px; }
.m-month.now { border-color: var(--line-2); }
.m-month.now .m-head { background: var(--hilite); }
.m-now { padding: 2px 8px; border-radius: 10px; background: var(--navy); color: #FFFFFF; font-size: 11px; font-weight: 700; white-space: nowrap; }
[data-theme="dark"] .m-now { background: var(--primary); }
.m-netline b.pos, .m-top b.pos, .m-totals b.pos { color: var(--pos); }
.m-netline b.neg, .m-top b.neg { color: var(--neg); }
.m-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.m-row:first-child { border-top: 0; }
.m-main { display: grid; gap: 1px; min-width: 0; }
/* The day is colored like the kind of payment: green income, red expense, blue investment. */
.m-day { display: grid; justify-items: center; align-content: center; gap: 3px; width: 40px; height: 40px; border-radius: var(--r); line-height: 1; }
.m-day b { font-size: 15px; font-weight: 700; }
.m-day small { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.k-inc .m-day { background: var(--inc-tint-2); box-shadow: inset 0 0 0 1px var(--inc); color: var(--inc-ink); }
.k-exp .m-day { background: var(--exp-tint-2); box-shadow: inset 0 0 0 1px var(--exp); color: var(--exp-ink); }
.k-inv .m-day { background: var(--inv-tint-2); box-shadow: inset 0 0 0 1px var(--inv); color: var(--inv-ink); }
.k-inc .m-amt { color: var(--pos); }
.k-inv .m-amt { color: var(--inv-ink); }
/* The month's totals side by side under its payments, and the net profit as the bottom line. */
.m-foot { border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-box) var(--r-box); background: var(--band); }
.m-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-totals.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-netline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 14px 11px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.m-netline b { font-size: 15px; white-space: nowrap; }
.m-balline { border-top: 1px solid var(--line-2); }
/* The balance carried in from last month: a navy badge with an arrow instead of a day. */
.m-carry .m-day { background: var(--hilite); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--navy); }
[data-theme="dark"] .m-carry .m-day { color: var(--due); }
.m-carry .m-day .ic { width: 18px; height: 18px; }
.m-totals > span { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 9px 12px; border-left: 1px solid var(--line); }
.m-totals > span:first-child { border-left: 0; }
.m-totals small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-totals b { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.m-totals b.inv-ink { color: var(--inv-ink); }

/* An item: name and amount, what it is and its status, then its dates like lines on a receipt. */
.m-gtitle { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 14px; }
.m-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--chip); color: var(--navy); font-size: 11.5px; font-weight: 700; }
[data-theme="dark"] .m-count { color: var(--ink); }
.m-item { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.m-item:first-child { border-top: 0; }
.m-top, .m-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.m-top .m-name, .m-sub .m-meta { flex: 1; }
.m-st { flex: none; font-size: 12px; font-weight: 600; color: var(--slate); }
.m-st.on { color: var(--pos); }
.m-st.due { color: var(--due); }
.m-st.off { color: var(--muted); }
.m-item.ended .m-name, .m-item.ended .m-amt { color: var(--slate); }
.m-facts { display: grid; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.m-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--slate); }
.m-fact b { font-weight: 600; color: var(--ink); text-align: right; }

/* Reports, the numbers month by month: each month's net profit with its three totals underneath. */
.numbers .m-card { border-top: 0; border-radius: 0 0 var(--r-box) var(--r-box); }
.m-num { display: grid; gap: 6px; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.m-num:first-child { border-top: 0; }
.m-num .m-top > b { font-weight: 700; white-space: nowrap; }
.m-top > b { color: var(--ink); }
.m-num.now { background: var(--hilite); }
.m-num.total { border-top: 1px solid var(--navy); border-radius: 0 0 var(--r-box) var(--r-box); background: var(--band); cursor: default; }
[data-theme="dark"] .m-num.total { border-top-color: var(--line-2); }
.m-num .m-totals > span { padding: 0 8px 0 0; border: 0; }
.m-bal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--slate); }
.m-bal b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.m-bal b.neg { color: var(--neg); }

/* ---------- importing a file ---------- */
/* One window with three steps: the file, what each column holds, and the rows to import. */
.modal-card.imp-card { width: min(1000px, 100%); }
.imp-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); background: var(--band); }
.imp-steps li { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 9px 8px; font-size: 12.5px; font-weight: 600; color: var(--slate); }
.imp-steps b { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--line); color: var(--slate); font-size: 11px; }
.imp-steps li.now { color: var(--ink); }
.imp-steps li.now b { background: var(--navy); color: #FFFFFF; }
.imp-steps li.done b { background: var(--pos); color: #FFFFFF; }
[data-theme="dark"] .imp-steps li.now b { background: var(--primary); }
.imp-body { gap: 14px; }
/* Step 1: a big box to drop the file on, which also opens the file picker. */
.imp-drop { display: grid; justify-items: center; gap: 8px; padding: 34px 20px; border: 2px dashed var(--line-2); border-radius: var(--r-box); background: var(--band); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.imp-drop:hover, .imp-drop.over, .imp-drop:focus-within { border-color: var(--primary); background: var(--hilite); }
.imp-drop b { font-size: 15px; color: var(--ink); }
.imp-drop u { color: var(--navy); font-weight: 600; }
[data-theme="dark"] .imp-drop u { color: var(--due); }
.imp-drop-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--navy); }
[data-theme="dark"] .imp-drop-ic { color: var(--due); }
.imp-drop-ic .ic { width: 22px; height: 22px; }
.imp-drop.busy { cursor: progress; }
.imp-drop.busy .imp-drop-ic { animation: breathe 1.2s ease-in-out infinite; }
/* Step 2: the options, a line saying what will be imported, and one row per column. */
.imp-file { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--slate); }
.imp-file b { color: var(--ink); overflow-wrap: anywhere; }
.imp-file .ic { width: 16px; height: 16px; flex: none; }
.imp-eg { font-size: 12px; font-style: normal; font-weight: 400; color: var(--slate); }
.imp-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: var(--r); background: var(--inc-tint-2); color: var(--ink); font-size: 13px; }
.imp-status b { color: var(--inc-ink); }
.imp-status.bad { background: var(--exp-tint-2); color: var(--exp-ink); font-weight: 600; }
.imp-h { font-size: 13.5px; }
.imp-cols, .imp-rows { border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; }
.imp-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 240px); align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.imp-col:first-child, .imp-row:first-child { border-top: 0; }
.imp-col.on { box-shadow: inset 3px 0 0 var(--primary); }
.imp-col-txt { display: grid; gap: 1px; min-width: 0; }
.imp-col-txt b { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-col-txt span { font-size: 12.5px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Step 3: totals, payments that repeat, filters, and the rows themselves, each edged in its kind's color. */
.imp-sum { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-chip { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
.imp-chip small { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.imp-chip b { font-size: 18px; color: var(--ink); }
.imp-chip i { font-size: 13px; font-style: normal; color: var(--slate); }
.imp-chip.t-inc { box-shadow: inset 3px 0 0 var(--inc); }
.imp-chip.t-exp { box-shadow: inset 3px 0 0 var(--exp); }
.imp-chip.t-inv { box-shadow: inset 3px 0 0 var(--inv); }
.imp-reps { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-box); background: var(--hilite); }
.imp-reps h3 { font-size: 14px; }
.imp-reps > p { font-size: 12.5px; }
.imp-rep { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(140px, 200px); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.imp-rep.off > :not(input[type="checkbox"]) { opacity: .5; }
.imp-rep .m-day { width: 32px; height: 32px; }
.imp-rep .m-day .ic { width: 16px; height: 16px; }
.imp-rep-txt { display: grid; gap: 3px; min-width: 0; }
.imp-rep-txt span { font-size: 12.5px; color: var(--slate); }
.imp-rep input, .imp-row > input[type="checkbox"], .imp-all input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
.imp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-tabs button { height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 15px; background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.imp-tabs button span { margin-left: 2px; font-weight: 500; color: var(--slate); }
.imp-tabs button[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.imp-tabs button[aria-selected="true"] span { color: var(--on-navy-2); }
[data-theme="dark"] .imp-tabs button[aria-selected="true"] { border-color: var(--primary); background: var(--primary); }
.imp-all { font-size: 13px; }
.imp-row { display: grid; grid-template-columns: auto 124px minmax(0, 1.6fr) minmax(0, 1fr) 120px 128px; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--line); background: var(--surface); }
.imp-row.k-inc { box-shadow: inset 3px 0 0 var(--inc); }
.imp-row.k-exp { box-shadow: inset 3px 0 0 var(--exp); }
.imp-row.k-inv { box-shadow: inset 3px 0 0 var(--inv); }
.imp-row.off { background: var(--band); box-shadow: none; }
.imp-row.off > :not(input[type="checkbox"]) { opacity: .5; }
.imp-when { display: grid; font-size: 12.5px; white-space: nowrap; }
.imp-when small { font-size: 11px; font-weight: 600; color: var(--due); }
.imp-amt { display: grid; justify-items: end; font-weight: 700; color: var(--ink); white-space: nowrap; }
.imp-amt small { font-size: 11px; font-weight: 600; color: var(--slate); }
.imp-row.k-inc .imp-amt { color: var(--pos); }
.imp-row.k-inv .imp-amt { color: var(--inv-ink); }
/* The ways in: next to "Add a payment", in the menu, in Settings and in the setup. */
.ctl-end { margin-left: auto; }
.m-acts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.mm-acts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
.setup-imp { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; color: var(--slate); }
.setup-imp .link-btn, .imp-hist .link-btn { display: inline-flex; align-items: center; gap: 6px; }
.setup-imp .ic { width: 14px; height: 14px; }
.imp-hist-h { margin: 12px 0 6px; font-size: 13.5px; }
.imp-hist { margin: 0; }

/* ---------- rounded corners ---------- */
.grid-wrap, .kgrid, .panel, .chart-box, .rp-sum, .modal-card, .steps, .cur-grid, .preview, .cat-list, .numbers summary { border-radius: var(--r-box); }
/* Clip the colored bands and cells inside to the rounded edge. */
.kgrid, .rp-sum, .modal-card, .steps, .cur-grid, .preview, .cat-list, .seg { overflow: hidden; }
.toast, .tip, .combo-list { border-radius: var(--r); }
.numbers[open] summary { border-radius: var(--r-box) var(--r-box) 0 0; }
.numbers .grid-wrap { border-radius: 0 0 var(--r-box) var(--r-box); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kgrid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgrid.k4 .kcell:nth-child(3) { border-left: 0; }
  .kgrid.k4 .kcell:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 14px; background: var(--navy); color: #FFFFFF; }
  .topbar .brand { color: #FFFFFF; }
  .mmenu:not([hidden]) { display: block; }
  /* The account list drops down from the top bar on the left, under the account's name, like the menu does on the right. */
  .amenu { inset: 52px 0 0; }
  .am-scrim { background: var(--scrim); animation: fade-in .2s ease-out both; }
  .am-panel { top: 0; left: 0; width: min(360px, 100%); max-height: 100%; gap: 6px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); border: 0; border-radius: 0 0 16px 16px; }
  .am-item, .am-link { min-height: 48px; font-size: 15px; }
  .am-item .acct-badge { width: 32px; height: 32px; font-size: 14px; }
  #accounts { scroll-margin-top: 68px; }
  .view { padding: 18px 14px calc(40px + env(safe-area-inset-bottom)); }
  .demo-bar { padding: 9px 14px; }
  .toasts { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .two { grid-template-columns: 1fr; }
  .two > .section + .section { margin-top: 4px; }
}

@media (max-width: 600px) {
  /* 16px text in boxes stops phones from zooming in on them; taller boxes and buttons are easier to tap. */
  .field input, .field select, .cat-add input, .ctl select, .mstep select { height: 40px; font-size: 16px; }
  /* Importing on a phone: each column and each row stacks, and boxes use 16px text so the phone does not zoom. */
  .imp-col select, .imp-row select, .imp-row input:not([type="checkbox"]), .imp-rep input:not([type="checkbox"]) { height: 38px; font-size: 16px; }
  .imp-rep { grid-template-columns: auto auto minmax(0, 1fr); align-items: start; }
  .imp-rep > input[type="checkbox"] { margin-top: 11px; }
  .imp-rep-cat { grid-column: 3; }
  .imp-col { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; }
  .form-grid.imp-opts { grid-template-columns: 1fr; }
  .imp-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "on name name" "on when amt" "on cat kind"; gap: 6px 8px; padding: 10px 12px 10px 10px; }
  .imp-row > input[type="checkbox"] { grid-area: on; align-self: start; margin-top: 11px; }
  .imp-name { grid-area: name; }
  .imp-when { grid-area: when; }
  .imp-amt { grid-area: amt; }
  .imp-cat { grid-area: cat; }
  .imp-row select { grid-area: kind; }
  .imp-drop { padding: 26px 16px; }
  .imp-chip { padding: 7px 12px; }
  .imp-hist li > [data-act="imp-remove"] { grid-area: del; }
  .mm-acts .btn { padding: 0 8px; }
  .money-in { height: 40px; }
  .field .money-in input { height: 38px; }
  .btn { height: 38px; }
  .btn-lg { height: 46px; font-size: 15px; }
  .view { padding-top: 16px; }
  .page-head { margin-bottom: 14px; }
  .page-head .sub { font-size: 13.5px; }
  /* Two dropdowns side by side, each with its label above. */
  .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .ctl { display: grid; gap: 4px; min-width: 0; }
  .ctl select { width: 100%; min-width: 0; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; padding: 16px 14px; }
  .donut { width: 160px; height: 160px; }
  .legend-list { width: 100%; }
  .bars { height: 220px; padding-left: 42px; }
  .bars-grid { left: 42px; }
  .bars-grid span::before, .lc-grid span::before { right: calc(100% + 6px); font-size: 10.5px; }
  .blabel, .lc-labels { font-size: 10px; }
  .chart-box { padding: 14px 12px 6px; }
  .lc { padding-left: 42px; }
  .lc-plot { height: 180px; }
  .rp-tile { gap: 4px; padding: 13px 14px; }
  .rp-big { font-size: 19px; }
  .rp-tile.t-net .rp-big, .rp-tile.t-bal .rp-big { font-size: 26px; }
  /* Net profit and the balance each take the full width, then income and expenses side by side. */
  .rp-sum .rp-tile.t-net, .rp-sum .rp-tile.t-bal, .rp-sum.n4 .rp-tile.t-inv { grid-column: 1 / -1; }
  .rp-sum.n4 .rp-tile.t-inc, .rp-sum.n4 .rp-tile.t-exp { grid-column: span 3; }
  /* The question for older accounts: the money box and its buttons go on their own line. */
  .ov-ask { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .ov-ask-row { grid-column: 1 / -1; }
  .ov-ask .money-in { flex: 1; width: auto; }
  .ov-ask .money-in input { height: 38px; font-size: 16px; }
  .ov-ask-row .btn { height: 40px; }
  .ring { width: 60px; height: 60px; }
  /* Biggest expenses and investment types: the name and amount on one line, the bar under them. */
  .toplist { padding: 4px 14px; }
  .toplist li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 6px 12px; padding: 10px 0; }
  .tl-name { grid-area: name; white-space: normal; }
  .tl-val { grid-area: val; min-width: 0; }
  .tl-bar { grid-area: bar; height: 8px; }
  /* Three boxes: the first across the top, the other two side by side. */
  .kgrid.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgrid.k3 .kcell:first-child { grid-column: 1 / -1; }
  .kgrid.k3 .kcell:nth-child(2) { border-left: 0; border-top: 1px solid var(--line); }
  .kgrid.k3 .kcell:nth-child(3) { border-top: 1px solid var(--line); }
  .kcell { padding: 12px 14px; }
  .kval { font-size: 18px; }
  .hide-sm { display: none; }
  .grid th, .grid td { padding: 7px 8px; }
  .statement { font-size: 12.5px; }
  .statement th, .statement td { padding-left: 6px; padding-right: 6px; }
  .statement tr.total th, .statement tr.net th { white-space: normal; }
  .statement td.wrap { min-width: 0; }
  .grid .lv0 { padding-left: 8px; }
  .grid .lv1 { padding-left: 12px; }
  .grid .lv2 { padding-left: 18px; }
  .statement .add-btn { padding-left: 16px; }
  /* Overview: the month picker fills the width with big arrows; "This month" is the list's first choice anyway. */
  .mstep { width: 100%; }
  .mstep .icon-btn { width: 40px; height: 40px; }
  .mstep .btn { display: none; }
  .ov-imp-sm { display: inline-flex; height: 36px; padding: 0 12px; }
  .mpick { flex: 1; }
  .mpick-txt {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 30px 0 12px;
    border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px;
  }
  .mpick-txt > span { overflow: hidden; text-overflow: ellipsis; }
  .mpick-txt i { flex: none; padding: 2px 7px; border-radius: 10px; background: var(--navy); color: #FFFFFF; font-size: 10.5px; font-style: normal; font-weight: 700; }
  [data-theme="dark"] .mpick-txt i { background: var(--primary); }
  .mpick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .mpick:focus-within .mpick-txt { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }
  .ov-net, .ov-flow { padding: 16px; }
  .ov-flow { gap: 14px; }
  .ov-cols { gap: 14px; margin-top: 14px; }
  .ov-main, .ov-side { gap: 14px; }
  .ov-card-head { padding: 12px 14px; }
  .ov-row { padding: 10px 14px; }
  .ov-card .add-btn { height: 42px; padding-left: 14px; }
  .up-row { padding: 9px 12px; }
  /* Settings: the choices share the width equally and stay on one line; the buttons fill the width. */
  .panel { padding: 16px; }
  .panel + .panel, .two + .panel { margin-top: 14px; }
  .two.flat { gap: 18px; }
  .pref { gap: 10px; }
  .pref > div:first-child { flex: 1 1 100%; }
  .pref .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .pref .seg button { height: 38px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pref > .btn, .form-actions .btn { width: 100%; }
  /* A category: its name with the number of items under it, and the two actions on the right. */
  .cat-list li { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name ren del" "count ren del"; gap: 0 4px; padding: 7px 6px 7px 12px; }
  .cat-list li > .cat-name { grid-area: name; overflow-wrap: anywhere; }
  .cat-list li > .dim { grid-area: count; font-size: 12px; }
  .cat-list li > [data-act="cat-rename"], .cat-list li > [data-act="acct-rename"] { grid-area: ren; }
  .cat-list li > [data-act="cat-delete"], .cat-list li > [data-act="acct-delete"] { grid-area: del; }
  .acct-list li > .dim:empty { display: none; }
  .acct-list li { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "name share ren del" "count share ren del"; padding-top: 9px; padding-bottom: 9px; }
  .acct-list li.is-shared { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name del" "count del"; }
  .cat-list li > [data-act="acct-share"] { grid-area: share; }
  .cat-list li > [data-act="acct-leave"] { grid-area: del; }
  /* Sharing on a phone: the paste box and its button stack; a person's row puts the choice under the name. */
  .sh-claim { grid-template-columns: 1fr; }
  .sh-claim .btn, .sh-copy .btn, .sh-copy input { height: 40px; }
  .sh-copy input { font-size: 16px; }
  .sh-list li { grid-template-columns: auto minmax(0, 1fr); }
  .sh-acts { grid-column: 2; justify-content: space-between; }
  .sh-perm-sel { height: 38px; font-size: 16px; }
  .sh-acts .link-btn { padding: 9px 6px; }
  .ro-list li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "count"; }
  .cat-list .link-btn { padding: 9px 6px; }
  .cat-add .btn { height: 40px; }
  /* Setup: only the current step is named; the currencies two by two. */
  .cur-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cur:nth-child(odd) { border-left: 0; }
  .cur:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .cur:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-left: 0; }
  .steps li:not(.now) { display: none; }
  .setup-card { gap: 12px; }
  .count-seg { width: 100%; }
  .acct-names { grid-template-columns: 1fr; }
  /* Windows slide up from the bottom as a sheet. Pairs of short fields stay side by side. */
  .modal { place-items: end stretch; padding: 0; }
  .modal-card, .modal-card.narrow { width: 100%; max-height: 92vh; border-bottom: 0; border-radius: 14px 14px 0 0; animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1) both; }
  .modal-head { padding: 14px 16px; }
  .modal-foot { flex-wrap: wrap; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { height: 42px; }
  .form-grid { align-items: end; gap: 12px; }
  .sm-full { grid-column: 1 / -1; }
  .kind-seg button { height: 40px; padding: 0 6px; gap: 6px; }
  .preview { grid-template-columns: 1fr; }
  .pv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-left: 0; border-top: 1px solid var(--line); }
  .pv:first-child { border-top: 0; }
  .pv b { text-align: right; }
}

@keyframes sheet-up { from { transform: translateY(48px); opacity: 0; } }
.modal-card:focus { outline: none; }

/* Narrow phones: a choice that does not fit takes two lines, and each currency shows its symbol under its code. */
@media (max-width: 400px) {
  .pref .seg button { height: auto; min-height: 38px; padding: 5px 4px; line-height: 1.25; white-space: normal; }
  .cur-sym { display: block; font-size: 11.5px; font-weight: 500; }
}

/* Very narrow phones: the month picker drops its "This month" tag. */
@media (max-width: 359px) {
  .mpick-txt i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}