/* Peeka on the web: the phone app's design system (lib/core/theme/app_colors.dart,
   the light look), for a desktop-sized window. Components use these classes and
   tokens; nothing sets a colour that is not here. */

@font-face { font-family: "Google Sans"; src: url("/assets/fonts/GoogleSansFlex-Variable-latin.woff2?v=95c78cb1ea") format("woff2"); font-weight: 100 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/GoogleSansFlex-Variable-latin-ext.woff2?v=37f5ed9c94") format("woff2"); font-weight: 100 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Variable-latin.woff2?v=87c506d88b") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-Variable-latin-ext.woff2?v=0bb2ef2eda") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* brand, identical in every look */
  --navy: #16213B; --navy-soft: #22304F; --ember: #D7582B; --ember-deep: #B84318; --ember-bright: #FF8A5B; --ember-dark: #C0451C; --green: #2E6E52;
  --ember-grad: linear-gradient(150deg, #FF8A5B, #D7582B 58%, #C0451C);
  /* the light look */
  --ground: #FFFFFF; --ground-mid: #FBF4ED; --ground-end: #EFE7DD;
  --card: #FDFAF6; --card-bright: #FFFDFA; --card-warm: #F9F3EC; --sunken: #F4EFE8;
  --ink: #16213B; --ink-2: #5C6577; --muted: #6F6455; --ghost: #988871; --sand-label: #88664F;
  --ember-text: #B84318; --green-text: #2E6E52; --ember-tint: #FDF2EA; --ember-tint-strong: #FBE6DD; --green-tint: #F1F6F2;
  --hairline: #EEECE8; --line: #E4E1DB; --line-strong: #D9D5CE; --dashed: #CFCAC2; --track: #ECE9E4; --bar: #E2DED7; --bar-strong: #D5D0C8; --icon-box: #F1EFEB;
  --shadow: 0 1px 2px rgba(22, 33, 59, .05), 0 8px 24px rgba(22, 33, 59, .06);
  --shadow-lift: 0 18px 44px rgba(22, 33, 59, .14);
  --radius: 22px; --radius-sm: 14px;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --text: "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --side: #F7F2EC;
  /* the page's wash at the top (a Spending view's own, the cream elsewhere) */
  --wash: #FFFFFF;
  /* the one deep colour a primary control wears (navy on light, cream on the darks) */
  --accent: #16213B; --on-accent: #FFFCF7;
  --scrim: rgba(22, 33, 59, .32); --glass-look: light;
  /* surfaces a control sits on, and the small inks the light look drew as literals */
  --field: #FFFFFF; --field-line: #E8E0D6; --side-line: #ECE4DA; --side-hover: #EFE8DF; --side-ink: #4A4F5C; --kbd: #F5F0EA; --hover-tint: rgba(22, 33, 59, .025);
  --danger-text: #A43A16; --danger-line: #F0D2C4; --toast: #16213B; --toast-action: #FFB59A; --sel: #F6CDB8;
  /* the knob of a switch or slider, a warm edge, the habit squares, the partner's slate, two view inks, a select's chevron */
  --knob: #FFFCF7; --ember-line: #F4D3BF; --green-line: #C9D6D1; --heat-1: #F5B99A; --heat-rest: #EFD7C4; --heat-future: #F5F3F0; --slate-tint: #E4E8EF; --slate-text: #3E4B63; --harbour-text: #3F5B85; --plum-text: #6B558A;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6455' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── The two darks (lib/core/theme/app_colors.dart: Dark blue, Black). Match
   device draws Dark blue before theme.js has run; after it, <html data-theme>
   decides. Ember is the same in every look; ember as words is lighter. ── */
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark;
  --ground: #0F1729; --ground-mid: #151D31; --ground-end: #232B3F; --card: #1F2A42; --card-bright: #243049; --card-warm: #2B2735; --sunken: #2A3652;
  --ink: #F6F3EE; --ink-2: #C6CDDC; --muted: #B7B3C1; --ghost: #A3A8BA; --sand-label: #D2BDA3;
  --ember-text: #FF9E76; --green-text: #72C89A; --ember-tint: #3A2833; --ember-tint-strong: #3A2429; --green-tint: #1D332F;
  --hairline: #33405C; --line: #3D4A68; --line-strong: #4D5B7B; --dashed: #56648A; --track: #2E3A57; --bar: #465474; --bar-strong: #5A6989; --icon-box: #2C3854;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28); --shadow-lift: 0 18px 44px rgba(0, 0, 0, .5);
  --side: #131C31; --wash: #0F1729; --accent: #F2EEE7; --on-accent: #16213B; --scrim: rgba(0, 0, 0, .55);
  --field: #243049; --field-line: #44516F; --side-line: #27324B; --side-hover: #222C44; --side-ink: #D3D8E3; --kbd: #2E3A57; --hover-tint: rgba(255, 255, 255, .05); --danger-text: #FF9E76; --danger-line: #4A3A38; --toast: #2A3552; --toast-action: #FFB59A; --sel: #5A3526;
  --knob: #E9E4DC; --ember-line: #5A3A36; --green-line: #2F4A44; --heat-1: #8A4A35; --heat-rest: #4A3A40; --heat-future: #151D31; --slate-tint: #2A3552; --slate-text: #B9C3D6; --harbour-text: #9DB4D8; --plum-text: #B9A6D8; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A29EAA' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } }
:root[data-theme="blue"] { color-scheme: dark;
  --ground: #0F1729; --ground-mid: #151D31; --ground-end: #232B3F; --card: #1F2A42; --card-bright: #243049; --card-warm: #2B2735; --sunken: #2A3652;
  --ink: #F6F3EE; --ink-2: #C6CDDC; --muted: #B7B3C1; --ghost: #A3A8BA; --sand-label: #D2BDA3;
  --ember-text: #FF9E76; --green-text: #72C89A; --ember-tint: #3A2833; --ember-tint-strong: #3A2429; --green-tint: #1D332F;
  --hairline: #33405C; --line: #3D4A68; --line-strong: #4D5B7B; --dashed: #56648A; --track: #2E3A57; --bar: #465474; --bar-strong: #5A6989; --icon-box: #2C3854;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28); --shadow-lift: 0 18px 44px rgba(0, 0, 0, .5);
  --side: #131C31; --wash: #0F1729; --accent: #F2EEE7; --on-accent: #16213B; --scrim: rgba(0, 0, 0, .55);
  --field: #243049; --field-line: #44516F; --side-line: #27324B; --side-hover: #222C44; --side-ink: #D3D8E3; --kbd: #2E3A57; --hover-tint: rgba(255, 255, 255, .05); --danger-text: #FF9E76; --danger-line: #4A3A38; --toast: #2A3552; --toast-action: #FFB59A; --sel: #5A3526;
  --knob: #E9E4DC; --ember-line: #5A3A36; --green-line: #2F4A44; --heat-1: #8A4A35; --heat-rest: #4A3A40; --heat-future: #151D31; --slate-tint: #2A3552; --slate-text: #B9C3D6; --harbour-text: #9DB4D8; --plum-text: #B9A6D8; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A29EAA' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="black"] { color-scheme: dark;
  --ground: #000000; --ground-mid: #080808; --ground-end: #161517; --card: #18181B; --card-bright: #1E1E22; --card-warm: #211D1A; --sunken: #28282D;
  --ink: #F6F3EE; --ink-2: #CFCCD4; --muted: #B9B5BE; --ghost: #A09CA6; --sand-label: #CBB9A4;
  --ember-text: #FF9E76; --green-text: #72C89A; --ember-tint: #2E1C14; --ember-tint-strong: #321C13; --green-tint: #17271F;
  --hairline: #2E2E33; --line: #3A3A41; --line-strong: #4A4A52; --dashed: #55555E; --track: #2A2A30; --bar: #44444C; --bar-strong: #56565F; --icon-box: #28282D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4); --shadow-lift: 0 18px 44px rgba(0, 0, 0, .6);
  --side: #0C0C0E; --wash: #000000; --accent: #F2EEE7; --on-accent: #121214; --scrim: rgba(0, 0, 0, .65);
  --field: #1E1E22; --field-line: #404048; --side-line: #232327; --side-hover: #1C1C20; --side-ink: #D6D3DA; --kbd: #2A2A30; --hover-tint: rgba(255, 255, 255, .06); --danger-text: #FF9E76; --danger-line: #4A342A; --toast: #232327; --toast-action: #FFB59A; --sel: #5A3526;
  --knob: #E9E4DC; --ember-line: #4A2C1E; --green-line: #24382E; --heat-1: #7E3F27; --heat-rest: #3A2A22; --heat-future: #0E0E10; --slate-tint: #23262E; --slate-text: #B8BECB; --harbour-text: #9DB4D8; --plum-text: #B9A6D8; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A39FA8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* The page's wash: a Spending view's (or an editor's) own tint at the top
   (--wash-tint, set inline), the ground elsewhere. On the darks it is only a
   trace of that tint in the dark ground, so the top of the page stays dark. */
.win, .panel { --wash: var(--wash-tint, var(--ground)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .win, :root:not([data-theme]) .panel { --wash: color-mix(in srgb, var(--wash-tint, var(--ground)) 12%, var(--ground)); } }
:root[data-theme="blue"] .win, :root[data-theme="blue"] .panel, :root[data-theme="black"] .win, :root[data-theme="black"] .panel { --wash: color-mix(in srgb, var(--wash-tint, var(--ground)) 12%, var(--ground)); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); font-family: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--ember-text); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--sel); }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-transform: none; } /* a figure keeps its mark's case in an uppercase heading: KSh, not KSH */
/* A figure (ui.jsx Amount): one type scale for money, the mark smaller and
   lighter than the number and level with its top. The box never scrolls: the
   figure is fitted to it (a smaller size, then the short form). */
.fig { display: inline-block; max-width: 100%; min-width: 0; white-space: nowrap; font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; vertical-align: baseline; }
.fig-in { display: inline-block; }
.fig .fig-short, .fig[data-fit="short"] .fig-in:first-child { display: none; }
.fig[data-fit="short"] .fig-short { display: inline-block; }
.fig .cur { font-size: .56em; font-weight: 600; letter-spacing: 0; vertical-align: .54em; margin-right: .05em; }
.fig .wordy .cur, .money-row .cur.wordy, .mv-fig .cur.wordy { margin-right: .2em; } /* a word (KSh, CHF) needs a little air before the figure; a sign ($, €) sits close */
.fig-hero { font-size: 56px; letter-spacing: -.045em; }
.fig-card { font-size: 44px; }
.fig-figure { font-size: 30px; }
.fig-stat { font-size: 22px; letter-spacing: -.03em; }
.fig-centre { font-size: 34px; }
.fig-row { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.fig-row .cur { font-size: .86em; vertical-align: baseline; font-weight: inherit; }
@media (max-width: 1000px) { .fig-hero { font-size: 44px; } .fig-card { font-size: 40px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The window: sidebar, top bar, page, side panel ─────────────────── */
.win { display: flex; height: 100vh; overflow: hidden; }
.side { width: 244px; flex-shrink: 0; background: var(--side); border-right: 1px solid var(--side-line); display: flex; flex-direction: column; transition: width .18s ease; }
.side.narrow { width: 72px; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px; }
.side-brand img { width: 34px; height: 40px; object-fit: contain; }
.side-brand b { font-family: var(--display); font-size: 19px; letter-spacing: -.03em; }
.side-brand b i { font-style: normal; color: var(--ember); }
.side-search { margin: 4px 12px 10px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--field-line); color: var(--muted); cursor: pointer; font-size: 13px; }
.side-search kbd { margin-left: auto; font: 600 11px var(--text); color: var(--muted); background: var(--kbd); border-radius: 6px; padding: 2px 6px; }
.side nav { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 16px; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-label); padding: 4px 10px 6px; }
.side-item { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 12px; cursor: pointer; color: var(--side-ink); font-size: 14px; font-weight: 500; border: 0; background: none; width: 100%; text-align: left; }
.side-item:hover { background: var(--side-hover); }
.side-item.on { background: var(--field); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 33, 59, .06), 0 0 0 1px var(--field-line); }
.side-item .badge { margin-left: auto; min-width: 20px; height: 20px; border-radius: 100px; background: var(--ember-deep); color: #FFF; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.side-foot { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.side-me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; }
.side-me:hover { background: var(--side-hover); }
.side-me span { display: flex; flex-direction: column; min-width: 0; }
.side-me b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-me small { font-size: 12px; color: var(--muted); }
.side.narrow .hide-narrow { display: none !important; }
.side.narrow .side-item { justify-content: center; padding: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.main > .top { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 22px 0 16px; position: relative; z-index: 3; }
.main > .top h1 { margin: 0; font-family: var(--display); font-size: 22px; letter-spacing: -.03em; }
.main > .top .sub { font-size: 13px; color: var(--muted); }
.main > .top .grow { flex: 1; }
.page { flex: 1; min-height: 0; overflow: auto; background: linear-gradient(180deg, var(--wash) 0, var(--ground) 380px, var(--ground) 62%, var(--ground-mid) 88%, var(--ground-end) 100%); background-attachment: local; }
.main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 64px; background: var(--wash); z-index: 0; pointer-events: none; }
.page-in { max-width: 1240px; padding: 8px 32px 64px; display: flex; flex-direction: column; gap: 22px; }

/* ── Type ───────────────────────────────────────────────────────────── */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sand-label); }
.eyebrow.ember { color: var(--ember-text); }
.eyebrow.green { color: var(--green-text); }
.hero { display: flex; flex-direction: column; gap: 6px; }
.hero .big { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.hero .big > small { flex: none; white-space: nowrap; }
.hero .big small { font-size: 22px; letter-spacing: -.02em; color: var(--ink-2); margin-left: 6px; font-weight: 600; }
.hero .line { font-size: 14px; color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.hero .line b { color: var(--ink); font-weight: 600; }
.h2 { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* ── Surfaces ───────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.tight { padding: 14px 16px; gap: 10px; }
.card.flat { box-shadow: none; }
.card.warm { background: var(--card-warm); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head .link { font-size: 13px; font-weight: 600; color: var(--ember-text); cursor: pointer; background: none; border: 0; padding: 0; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.split { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.split > .grow { flex: 1 1 420px; min-width: 0; }
.split > .side-col { flex: 0 1 360px; min-width: 280px; }
.hair { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* list rows (a record, a subscription, a setting) */
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--hairline); cursor: pointer; border-radius: 0; }
.li:first-child { border-top: 0; }
.li:hover { background: var(--hover-tint); }
.li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.li .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .amt { font-family: var(--display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } /* a row's figure never gives way: the name beside it does */
.li .amt.in { color: var(--green-text); }
.li.on { background: var(--ember-tint); box-shadow: inset 3px 0 0 var(--ember); }
.day-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sand-label); padding: 16px 4px 6px; }

/* icon boxes */
.ibox { width: 40px; height: 40px; border-radius: 12px; background: var(--icon-box); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ibox.sm { width: 32px; height: 32px; border-radius: 10px; }
.ibox.lg { width: 52px; height: 52px; border-radius: 16px; }
.glyph { display: inline-flex; }
.glyph svg { width: 100%; height: 100%; fill: currentColor; }

/* ── Controls ───────────────────────────────────────────────────────── */
.btn { height: 40px; padding: 0 16px; border-radius: 100px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform .1s ease, box-shadow .15s ease, background .15s ease; }
.btn:active { transform: scale(.98); }
.btn.ember { background: var(--ember-grad); color: #FFF; box-shadow: 0 8px 20px rgba(215, 88, 43, .26); }
.btn.navy { background: var(--accent); color: var(--on-accent); }
.btn.quiet { background: var(--field); color: var(--ink); border: 1px solid var(--line); }
.btn.quiet:hover { border-color: var(--line-strong); }
.btn.ghost { background: none; color: var(--ember-text); padding: 0 8px; }
.btn.danger { background: var(--field); color: var(--danger-text); border: 1px solid var(--danger-line); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); flex-shrink: 0; }
.iconbtn:hover { border-color: var(--line-strong); color: var(--ink); }
.chip { height: 32px; padding: 0 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--field); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); white-space: nowrap; }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; background: var(--sunken); border-radius: 100px; padding: 3px; gap: 2px; }
.seg button { height: 30px; padding: 0 14px; border-radius: 100px; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--field); color: var(--ink); box-shadow: 0 1px 3px rgba(22, 33, 59, .12); }
.toggle { width: 46px; height: 28px; border-radius: 100px; background: var(--bar-strong); border: 0; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s ease; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px rgba(22, 33, 59, .25); transition: left .15s ease; }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 21px; }
.toggle[disabled] { opacity: .45; cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-label); }
.input { height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--field); outline: none; width: 100%; font-size: 14px; }
.input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(215, 88, 43, .12); }
textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; background-image: var(--chev); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
/* The phone's form: label on the left, value on the right, a chevron */
.form { background: var(--card-bright); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; }
.frow { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 16px; border-top: 1px solid var(--hairline); }
.frow:first-child { border-top: 0; }
.frow > label, .frow > .k { flex: 0 0 38%; font-weight: 500; color: var(--ink); }
.frow .v { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; text-align: right; }
.frow .v input, .frow .v select { border: 0; background: transparent; text-align: right; outline: none; font-weight: 600; min-width: 0; width: 100%; font-size: 14px; }
.frow .v select { appearance: none; cursor: pointer; direction: rtl; }
.frow .v input::placeholder { color: var(--ghost); font-weight: 500; }
.frow .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
/* A money field (ui.jsx MoneyIn): 52px until the figure would outgrow the
   field, then smaller, to a 24px floor; the mark .56 of it, level with its top. */
.money-field { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; container-type: inline-size; }
.money-row { display: flex; align-items: baseline; justify-content: center; max-width: 100%; font-size: clamp(24px, calc(100cqi / var(--ems, 3)), 52px); }
.money-row .cur { position: relative; top: -.52em; font-size: .56em; font-weight: 600; color: var(--ghost); margin-right: .1em; white-space: nowrap; }
.money-in { font-family: var(--display); font-weight: 700; font-size: 1em; letter-spacing: -.04em; border: 0; background: none; outline: none; width: 100%; max-width: 100%; min-width: 0; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.money-in::placeholder { color: var(--bar-strong); }

/* ── Side panel (editors) and dialogs ───────────────────────────────── */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; animation: fadeIn .14s ease; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--ground); z-index: 51; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(22, 33, 59, .18); animation: slideIn .2s cubic-bezier(.2, .8, .2, 1); }
.panel-head { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--hairline); }
.panel-head h2 { flex: 1; margin: 0; text-align: center; font-size: 16px; font-weight: 600; }
.panel-head .btn.ghost { min-width: 64px; }
.panel-body { flex: 1; min-height: 0; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 18px; background: linear-gradient(180deg, var(--wash) 0, var(--ground) 260px); }
.panel-body > *, .page-in > *, .stack > * { flex-shrink: 0; }
.panel-foot { flex-shrink: 0; padding: 14px 22px 18px; border-top: 1px solid var(--hairline); display: flex; gap: 10px; flex-wrap: wrap; }
.dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 440px; max-width: calc(100vw - 32px); background: var(--ground); border-radius: 22px; z-index: 52; box-shadow: var(--shadow-lift); padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: popIn .18s ease; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--toast); color: #FFFCF7; box-shadow: 0 14px 30px rgba(22, 33, 59, .3); animation: popIn .2s ease; font-size: 13.5px; }
.toast button { background: none; border: 0; color: var(--toast-action); font-weight: 600; cursor: pointer; }

/* ── The account card (account_dot_card.dart, handoff 2b) ───────────── */
.acard { position: relative; height: 240px; border-radius: 22px; overflow: hidden; padding: 24px 26px 22px; display: flex; flex-direction: column; color: var(--c-ink); background: var(--c-ground); cursor: pointer; isolation: isolate; box-shadow: 0 12px 30px rgba(22, 33, 59, .14); transition: transform .12s ease; }
.acard:hover { transform: translateY(-2px); }
.acard::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, var(--c-lift) 0%, var(--c-start) 38%, var(--c-end) 72%, var(--c-sink) 100%);
  -webkit-mask: radial-gradient(circle at 8px 8px, #000 1.15px, transparent 1.6px) 0 0 / 14px 14px; mask: radial-gradient(circle at 8px 8px, #000 1.15px, transparent 1.6px) 0 0 / 14px 14px; opacity: .75; }
.acard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 18% 68%, var(--c-ground) 24%, color-mix(in srgb, var(--c-ground) 72%, transparent) 52%, transparent 86%); }
.acard .rings { position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-ring) 22%, transparent); z-index: -1; }
.acard .rings::after { content: ""; position: absolute; inset: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-ring) 14%, transparent); }
.acard-head { display: flex; align-items: flex-start; gap: 12px; }
.acard-head .name { flex: 1; text-align: right; font-weight: 600; font-size: 15px; color: var(--c-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acard .bal { flex: 0 1 auto; } /* the figure is an Amount, fitted to the card */
/* the balance, and under it (only for an account in another currency) what it is in the default one */
.acard-fig { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.acard .foreign { font-size: 12px; font-weight: 600; color: var(--c-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.acard .rule { margin: 14px 0; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--c-ink) 18%, transparent); overflow: hidden; }
.acard .rule i { display: block; height: 100%; background: var(--c-ink); }
.acard .foot { display: flex; gap: 10px; font-size: 13px; }
.acard .foot b { font-weight: 600; flex: 1; color: var(--c-soft); }
.acard .foot span { color: var(--c-quiet); }
.acard.new { border: 1.5px dashed var(--dashed); background: transparent; color: var(--ink-2); box-shadow: none; align-items: center; justify-content: center; gap: 10px; font-weight: 600; }
.acard.new::before, .acard.new::after { display: none; }

/* ── Charts ─────────────────────────────────────────────────────────── */
.donut { position: relative; }
.donut svg { display: block; width: 100%; height: auto; overflow: visible; }
.donut .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut .centre .big { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -.035em; line-height: 1; }
.donut .slice { transition: opacity .22s ease, transform .22s ease; cursor: pointer; }
.donut .slice:focus { outline: none; }
.donut .slice:focus-visible { opacity: 1 !important; filter: drop-shadow(0 0 3px var(--ember)); }
.bars { display: flex; align-items: flex-end; gap: 10px; padding-inline: 6px; } /* room for the first and last labels to spill */
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; cursor: pointer; min-width: 0; }
.bars .bar i { display: block; flex-shrink: 0; width: 100%; max-width: 64px; border-radius: 10px 10px 4px 4px; background: var(--bar); transition: background .2s ease, height .3s ease; }
.bars .bar.on i { background: var(--ember); }
.bars .bar.future i { background: transparent; border: 1.5px dashed var(--line-strong); }
/* The label and value rows keep their height when empty, so every bar stands on one
   baseline, and a label wider than its bar spills evenly into its unlabelled neighbours. */
.bars .bar .l { display: block; flex-shrink: 0; height: 16px; line-height: 16px; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars .bar.on .l { color: var(--ember-text); font-weight: 700; }
.bars .bar .v { display: block; flex-shrink: 0; height: 16px; line-height: 16px; font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.bars .bar.on .v { color: var(--ink); }
.bars .bar .v-short, .bars[data-fit] .bar .v:not(.v-short) { display: none; }
.bars[data-fit] .bar .v-short { display: block; }
.bars[data-fit="one"] .bar:not(.on) .v-short { visibility: hidden; }
.progress { height: 8px; border-radius: 100px; background: var(--track); overflow: hidden; display: flex; }
.progress i { display: block; height: 100%; border-radius: 100px; }
.progress.thin { height: 5px; }
.legend { display: flex; flex-direction: column; gap: 2px; }
.legend .li { cursor: pointer; padding: 9px 4px; }

/* ── Peeka ──────────────────────────────────────────────────────────── */
.peeka { display: block; object-fit: contain; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 20px; color: var(--ink-2); }
.empty .t { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); }

/* ── Motion ─────────────────────────────────────────────────────────── */
@keyframes popIn { 0% { opacity: 0; transform: translateY(8px) scale(.98); } 100% { opacity: 1; transform: none; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes slideIn { 0% { transform: translateX(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pkThink { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-2.5deg); } 75% { transform: translateY(-1px) rotate(2.5deg); } }
@keyframes pkDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* When the side column drops below the main one, its cards spread across the width. */
@media (max-width: 1240px) { .split > .side-col.stack { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; align-items: start; } }
@media (max-width: 1000px) { .page-in { padding: 8px 18px 48px; } .hero .big { font-size: 44px; } .panel { width: 100vw; } }

/* Sign out, at the foot of the sidebar. */
.side-out { color: var(--muted); }
.side-out:hover { color: var(--ember-text); }
/* The last minute before the idle sign-out (idle.js). */
.idle-warn { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: min(640px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 16px; background: var(--card-bright); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lift); animation: fadeIn .2s ease; }
.idle-warn > span { flex: 1 1 260px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.idle-warn b { color: var(--ink); }
.idle-warn .num { color: var(--ember-text); font-weight: 700; }

/* A phone-sized window: the page title keeps one line, the date goes. */
@media (max-width: 520px) { .main > .top .sub { display: none; } .main > .top h1 { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .main > .top { padding-right: 12px; } }
.side-back { color: var(--muted); text-decoration: none; }

/* The month picker (picker.jsx): arrows either side, the month opens a calendar. */
.mpick { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 3px; border-radius: 100px; background: var(--field); border: 1px solid var(--line); }
.mpick.big { height: 44px; }
.mpick-step { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex-shrink: 0; }
.mpick-step:hover:not([disabled]) { background: var(--sunken); color: var(--ink); }
.mpick-step[disabled] { opacity: .3; cursor: default; }
.mpick-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; height: 30px; padding: 0 10px; border: 0; border-radius: 100px; background: none; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.mpick.big .mpick-label { min-width: 190px; height: 36px; font-size: 19px; }
.mpick-label:hover, .mpick-label[aria-expanded="true"] { background: var(--sunken); }
.mpick-label .glyph { color: var(--muted); }
.mpick-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 292px; padding: 14px; border-radius: 18px; background: var(--card-bright); border: 1px solid var(--line); box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 12px; animation: fadeIn .14s ease; }
.mpick-seg { align-self: stretch; } .mpick-seg button { flex: 1; }
.mpick-head { display: flex; align-items: center; justify-content: space-between; }
.mpick-head b { font-size: 15px; }
.mpick-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mpick-months button, .mpick-days button { height: 40px; border: 0; border-radius: 12px; background: var(--sunken); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.mpick-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mpick-days button { height: 34px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.mpick-days .wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.mpick-months button:hover:not([disabled]), .mpick-days button:hover:not([disabled]) { background: var(--line); }
.mpick-months button.now, .mpick-days button.now { box-shadow: inset 0 0 0 1.5px var(--ember); }
.mpick-months button.on, .mpick-days button.on { background: var(--accent); color: var(--on-accent); }
.mpick-months button[disabled], .mpick-days button[disabled] { opacity: .35; cursor: default; }
.mpick-foot { display: flex; justify-content: flex-end; }
@media (max-width: 520px) { .mpick-pop { width: min(292px, calc(100vw - 100px)); } .mpick-label { min-width: 0; } }

/* Subscriptions: the next 30 days, every icon on the one line. */
.sb-line { position: relative; height: 76px; margin: 0 18px; }
.sb-rail { position: absolute; left: 0; right: 0; top: 29px; height: 2px; background: var(--track); border-radius: 2px; }
.sb-tick { position: absolute; top: 56px; transform: translateX(-50%); white-space: nowrap; }
.sb-spot { position: absolute; top: 12px; transform: translateX(-50%); display: flex; }
.sb-spot button { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 12px; box-shadow: 0 0 0 3px var(--card); display: block; transition: transform .15s ease; }
.sb-spot button + button { margin-left: -6px; }
.sb-spot button:hover, .sb-spot button:focus-visible { transform: translateY(-3px); position: relative; z-index: 1; }
.sb-cancel { font-size: 12px; font-weight: 600; color: var(--ember-text); text-decoration: none; margin-top: 3px; white-space: nowrap; }
.sb-cancel:hover { text-decoration: underline; }
/* A shorter window: the sidebar tightens so every destination shows without scrolling it. */
@media (max-height: 1000px) { .side nav { gap: 10px; } .side-item { height: 34px; } .side-label { padding-top: 2px; padding-bottom: 4px; } .side-foot { gap: 2px; padding-top: 6px; } .side-me { padding: 6px 10px; } }
@media (max-height: 820px) { .side nav { gap: 6px; } .side-item { height: 31px; font-size: 13.5px; } .side-brand { padding-top: 12px; padding-bottom: 8px; } .side-search { margin-bottom: 6px; } }
@media (max-height: 740px) { .side-search { display: none; } .side-item { height: 29px; } .side-me small { display: none; } .side-label { font-size: 10px; } }
/* The folded sidebar keeps its groups: a hairline between them and the group's
   name in small caps, so Spending, Shared and Insights still read as three. */
.side.narrow .side-group + .side-group { border-top: 1px solid var(--side-line); padding-top: 8px; }
.side.narrow .side-label { display: block; padding: 0 0 4px; text-align: center; font-size: 8px; letter-spacing: .06em; overflow: hidden; white-space: nowrap; text-overflow: clip; }

/* A phone-wide window (the web app points phones at the stores, but a narrow
   window still has to hold its figures): every grid and split falls to one
   column, and nothing asks for more width than the window has. */
@media (max-width: 560px) {
  .page-in { padding: 8px 14px 48px; }
  .split > .grow, .split > .side-col { flex: 1 1 100%; min-width: 0; }
  /* a row that says how a category moved puts that under its name, not beside its figure */
  .in-vs .li { flex-wrap: wrap; row-gap: 2px; } .in-vs .li .s { white-space: normal; } .in-vs .in-change { order: 5; flex: 1 1 100%; padding-left: 44px; }
  /* Move money's two accounts one above the other */
  .mv-tiles { flex-direction: column; } .mv-swap { transform: rotate(90deg); }
  .ex-row { gap: 8px; } .ex-row .ex-check { display: none; } /* choosing several at once is for a wider window */
  .hb-week { gap: 4px; } .hb-day { flex: 1 1 0; min-width: 0; } .hb-day .hb-sq { width: 100% !important; max-width: 40px; height: auto !important; aspect-ratio: 1; }
  /* a hero takes the whole width, and what stood beside it goes under it */
  .page-in .hero, .page-in [style*="min-width:280px"], .page-in [style*="min-width:300px"] { min-width: 0 !important; flex-basis: 100% !important; }
}

/* ── capture.css ── */
/* Say it and Snap it on the New record panel (editors/capture.jsx). */
.cap { display: flex; flex-direction: column; gap: 10px; }
.cap-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-mic, .cap-btn { position: relative; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 100px; font-weight: 600; font-size: 13.5px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.cap-mic { border: 1.5px solid var(--ember); background: var(--ember-tint); color: var(--ember-text); }
.cap-mic.on { background: var(--ember-grad); color: #FFF; border-color: transparent; box-shadow: 0 0 0 6px var(--ember-tint-strong); }
.cap-mic:disabled { opacity: .55; cursor: default; }
.cap-btn { border: 1px solid var(--line); background: var(--card-bright); color: var(--ink); }
.cap-btn:hover, .cap-mic:hover:not(:disabled) { border-color: var(--line-strong); }
.cap-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cap-btn:focus-within { outline: 2px solid var(--ember); outline-offset: 2px; }
.cap-hear { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); background: var(--sunken); border-radius: 14px; padding: 10px 12px; min-height: 42px; }
.cap-dots { display: inline-flex; gap: 3px; } .cap-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); animation: capDot 1s ease-in-out infinite; } .cap-dots i:nth-child(2) { animation-delay: .15s; } .cap-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes capDot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.cap-tip { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ink-2); background: var(--sunken); border-radius: 12px; padding: 10px 12px; }
.cap-tip.warn { color: var(--ember-text); background: var(--ember-tint); }
.cap-read { display: flex; gap: 12px; align-items: center; background: var(--sunken); border-radius: 14px; padding: 10px; }
.cap-read img { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; background: var(--card); }
.cap-bar { height: 5px; border-radius: 5px; background: var(--track); overflow: hidden; } .cap-bar i { display: block; height: 100%; background: var(--ember); border-radius: 5px; transition: width .2s; }
.rec-photo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; background: var(--sunken); border-radius: 14px; padding: 8px; }
.rec-photo img { width: 48px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .cap-dots i { animation: none; } }

/* ── debts.css ── */
/* Debts and Budget (views/debts.jsx, views/budget.jsx, editors/debt.jsx,
   editors/income.jsx). Everything is prefixed db- so it never meets another
   area's classes. Colours come from app.css tokens, or from a debt's own tint
   passed in as --t-tint / --t-crest / --t-deep. */

/* ── A range slider in the phone's look: a track that fills to the thumb ── */
.db-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; --fill: var(--ink); --pct: 0%; }
.db-range:focus-visible { outline: none; }
.db-range::-webkit-slider-runnable-track { height: 6px; border-radius: 100px; background: linear-gradient(90deg, var(--fill) 0 var(--pct), var(--track) var(--pct) 100%); }
.db-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--knob); border: 2px solid var(--fill); box-shadow: 0 1px 4px rgba(22, 33, 59, .22); }
.db-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(215, 88, 43, .22); }
.db-range::-moz-range-track { height: 6px; border-radius: 100px; background: var(--track); }
.db-range::-moz-range-progress { height: 6px; border-radius: 100px; background: var(--fill); }
.db-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--knob); border: 2px solid var(--fill); box-shadow: 0 1px 4px rgba(22, 33, 59, .22); }
.db-range[disabled] { opacity: .45; cursor: default; }

/* ── The debt card (spending_debts_view.dart _DebtCard): the card cream, the
   debt's own glyph as a large faint watermark, payment pips in its colour ── */
.db-card { position: relative; height: 240px; border-radius: 22px; overflow: hidden; padding: 20px 22px 18px; display: flex; flex-direction: column; background: var(--card-bright); border: 1px solid var(--hairline); box-shadow: var(--shadow); cursor: pointer; isolation: isolate; transition: transform .12s ease, box-shadow .15s ease; min-width: 0; }
.db-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(22, 33, 59, .05), 0 14px 30px rgba(22, 33, 59, .10); }
.db-card.on { box-shadow: 0 0 0 3px var(--t-deep), var(--shadow); }
.db-card .wm { position: absolute; top: -34px; right: -30px; width: 128px; height: 128px; opacity: .09; z-index: -1; color: var(--t-deep); pointer-events: none; }
.db-card .name { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 40px; }
.db-card .owed { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.db-card .owed > span:not(.fig) { flex: none; font-size: 12.5px; color: var(--muted); }
.db-card .due { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ghost); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-card .due.next { color: var(--t-deep); }
.db-card .foot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.db-card.new { border: 1.5px dashed var(--dashed); background: transparent; box-shadow: none; align-items: center; justify-content: center; gap: 8px; color: var(--ink-2); font-weight: 600; }
.db-card.new:hover { box-shadow: none; border-color: var(--line-strong); }
.db-pips { display: flex; gap: 2px; height: 10px; margin-top: 22px; }
.db-pips i { flex: 1; border-radius: 2px; background: var(--t-tint); min-width: 2px; }
.db-pips i.paid { background: var(--t-deep); }
.db-pips i.now { background: var(--card-bright); box-shadow: inset 0 0 0 1.5px var(--t-deep); }
.db-pips i.fade { flex: 6; background: linear-gradient(90deg, var(--t-tint), transparent); }
.db-pipline { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.db-pipline b { font-weight: 700; color: var(--ink); }

/* a debt's colour as a note under a figure (RecordsNote) */
.db-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--t-tint, var(--sunken)); color: var(--t-deep, var(--ink-2)); font-size: 13px; line-height: 1.5; }
.db-note b { font-weight: 700; }

/* colour swatches (the debt colour picker) */
.db-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 10px; }
.db-swatch { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--field); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.db-swatch.on { box-shadow: 0 0 0 2px var(--ember); }

/* the lever and other quiet rows with an action at the end */
.db-lever { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card-warm); border: 1px solid var(--hairline); }
.db-lever .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-lever .grow b { font-weight: 600; }
.db-lever .grow span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.db-door { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--dashed); background: transparent; cursor: pointer; text-align: left; width: 100%; color: var(--ink); }
.db-door:hover { border-color: var(--line-strong); }
.db-door.solid { border: 1px solid var(--hairline); background: var(--card-bright); }
.db-door .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-door .grow b { font-weight: 600; }
.db-door .grow span { font-size: 12.5px; color: var(--muted); }

/* ── The loan calculator ── */
.db-calc-out { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 16px; border-radius: 18px; background: var(--card-warm); text-align: center; }
.db-calc-out .big { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; max-width: 100%; min-width: 0; line-height: 1; }
.db-calc-out .big small { font-family: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); margin-left: 6px; }
.db-calc-row { display: flex; flex-direction: column; gap: 4px; }
.db-calc-row .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.db-calc-row .hd span { font-size: 13px; font-weight: 600; }
.db-calc-row .hd input { width: 120px; text-align: right; border: 1px solid var(--line); border-radius: 10px; height: 32px; padding: 0 10px; background: var(--field); font-family: var(--display); font-weight: 600; font-size: 14px; outline: none; }
.db-calc-row .hd input:focus { border-color: var(--ember); }
.db-calc-row .ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ghost); }

/* stacked bars: each year of a loan (principal under interest) */
.db-ybars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.db-ybars .y { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.db-ybars .y .col { width: 100%; max-width: 44px; display: flex; flex-direction: column-reverse; border-radius: 8px 8px 3px 3px; overflow: hidden; }
.db-ybars .y .col i { display: block; width: 100%; }
.db-ybars .y span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.db-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.db-key i { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }

/* ── Budget ── */
.db-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 100px; font-family: var(--display); font-size: 13px; font-weight: 600; background: var(--sunken); color: var(--muted); }
.db-pill.over { background: var(--ember-tint-strong); color: var(--ember-text); }
.db-pill.done { background: var(--green-tint); color: var(--green-text); }
.db-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 6px 28px; }
.db-job { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 14px; border-top: 1px solid var(--hairline); min-width: 0; }
.db-job .head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.db-job .head .n { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-job .head .v { font-family: var(--display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-job .spent { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.db-job .spent .over { color: var(--ember-text); font-weight: 600; }
.db-stream { display: flex; height: 44px; border-radius: 14px; overflow: hidden; gap: 2px; background: var(--track); }
.db-stream button { border: 0; padding: 0; cursor: pointer; min-width: 3px; transition: opacity .2s ease; }
.db-saved { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--green-tint); color: var(--green-text); font-weight: 600; font-size: 13.5px; }
.db-rows { display: flex; flex-direction: column; gap: 12px; }
.db-got { display: flex; flex-direction: column; gap: 5px; }
.db-got .hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 13px; } /* the figures drop under the name when both do not fit */
.db-got .hd b { font-weight: 600; }
.db-got .hd span { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.db-job .progress { height: 4px; }

/* The page is its own container, so a side column that has wrapped under the
   main one takes the whole row instead of leaving a gap beside it. */
.db-page { container-type: inline-size; }
@container (max-width: 820px) { .db-split > .side-col { flex-basis: 100%; min-width: 0; } }

/* ── expenses.css ── */
/* Expenses (views/expenses.jsx) and Categories & tags (editors/category.jsx).
   Built on app.css's tokens; nothing here sets a colour app.css does not have. */

/* ── the month picker: ‹ September 2026 › ── */
.ex-month { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 3px; border-radius: 100px; background: var(--field); border: 1px solid var(--line); }
.ex-month > span { min-width: 138px; text-align: center; font-weight: 700; font-size: 15px; padding: 0 6px; }
.ex-month button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.ex-month button:hover:not([disabled]) { background: var(--sunken); color: var(--ink); }
.ex-month button[disabled] { opacity: .3; cursor: default; }

/* ── the three small figures beside the hero ── */
.ex-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ex-stats > div { display: flex; flex-direction: column; gap: 4px; min-width: 118px; max-width: 100%; padding: 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--hairline); }
.ex-stats b { font-weight: 700; } /* figures are Amounts at the stat size */

/* ── the breakdown ── */
.ex-donut { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.ex-donut .donut { flex-shrink: 0; margin: 0 auto; }
.ex-donut .legend { max-height: 300px; overflow: auto; }
.ex-over { display: inline-block; margin-left: 6px; padding: 0 7px; height: 18px; line-height: 18px; border-radius: 100px; background: var(--ember-tint-strong); color: var(--ember-text); font-weight: 700; font-size: 11px; white-space: nowrap; vertical-align: 1px; }
.ex-rank { width: 18px; text-align: center; font-weight: 700; color: var(--ghost); font-size: 13px; flex-shrink: 0; }

/* ── the waiting queue ── */
.ex-queue { background: linear-gradient(170deg, var(--card-bright), var(--ember-tint)); border-color: var(--ember-line); }

/* ── the records: search, filters, rows ── */
.ex-records { gap: 12px; position: relative; }
.ex-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ex-search { flex: 1 1 280px; min-width: 220px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-radius: 100px; background: var(--field); border: 1px solid var(--line); }
.ex-search:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(215, 88, 43, .12); }
.ex-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 14px; }
.ex-search input::placeholder { color: var(--ghost); }
.ex-search button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sunken); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ex-search kbd { font: 600 11px var(--text); color: var(--ghost); background: var(--sunken); border-radius: 6px; padding: 2px 7px; margin-right: 4px; }
.ex-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 32px; }
.ex-cats .chip { flex-shrink: 0; }
.ex-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--ember-tint); color: var(--ink); font-size: 13.5px; }
.ex-note .link { font-size: 13.5px; font-weight: 600; color: var(--ember-text); cursor: pointer; background: none; border: 0; padding: 0; }
.ex-count { color: var(--ghost); font-weight: 600; }

.ex-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; cursor: pointer; }
.ex-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--ember); cursor: pointer; }
.ex-row { padding: 10px 6px; }
.ex-row .ex-check { opacity: .35; transition: opacity .12s ease; }
.ex-row:hover .ex-check, .ex-row.chosen .ex-check, .ex-records:has(.ex-bulk) .ex-row .ex-check { opacity: 1; }
.ex-row.chosen { background: var(--ember-tint); }
.ex-row.waiting { background: linear-gradient(90deg, var(--ember-tint), transparent 60%); }
.ex-row .amt.move { color: var(--ink-2); font-weight: 500; }
.ex-chev { display: inline-flex; width: 16px; justify-content: center; opacity: .6; }
.ex-badge { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; margin-left: 8px; border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--ember-text); background: var(--ember-tint-strong); vertical-align: 1px; }
.ex-badge.quiet { color: var(--ink-2); background: var(--sunken); }
.ex-tags { display: flex; gap: 4px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.ex-tag { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--sunken); border-radius: 100px; padding: 2px 8px; white-space: nowrap; }

/* the bulk bar: sticks to the foot of the window while rows are chosen */
.ex-bulk { position: sticky; bottom: 18px; z-index: 4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; padding: 8px 8px 8px 18px; border-radius: 100px; background: var(--toast); color: #FFFCF7; box-shadow: 0 14px 30px rgba(22, 33, 59, .3); animation: popIn .16s ease; }
.ex-bulk b { font-weight: 600; margin-right: 6px; }
.ex-bulk button, .ex-bulk select { height: 34px; padding: 0 14px; border-radius: 100px; border: 0; background: rgba(255, 252, 247, .12); color: #FFFCF7; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ex-bulk button:hover, .ex-bulk select:hover { background: rgba(255, 252, 247, .2); }
.ex-bulk button.quiet { background: none; color: var(--toast-action); }
.ex-bulk select { appearance: none; padding-right: 14px; }
.ex-bulk select option, .ex-bulk select optgroup { color: var(--ink); background: var(--field); }

/* ── Categories & tags (editors/category.jsx) ── */
.cat-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--field); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FFFFFF; padding: 0; }
.cat-check.on { background: var(--ember); border-color: var(--ember); }
.cat-check[disabled] { opacity: .45; cursor: default; }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; }
.cat-sub { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 8px; border-radius: 100px; background: var(--sunken); border: 1px solid transparent; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cat-sub:hover { border-color: var(--line-strong); }
.cat-sub.on { background: var(--field); border-color: var(--ember); color: var(--ink); }
.cat-sub.add { background: none; border: 1.5px dashed var(--dashed); color: var(--muted); padding: 0 14px; }
.cat-sub small { font-weight: 500; color: var(--ghost); }
.cat-swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 3px solid var(--field); box-shadow: 0 0 0 1px var(--line); padding: 0; }
.cat-swatch.on { box-shadow: 0 0 0 2px var(--ember); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 236px; overflow: auto; padding: 2px; }
.cat-grid button { height: 46px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--field); border: 2px solid var(--hairline); color: var(--ink); padding: 0; }
.cat-grid button:hover { border-color: var(--line-strong); }
.cat-grid button.on { border-color: var(--ember); background: var(--ember-tint); }
.cat-inline { display: flex; gap: 8px; align-items: center; }
.cat-inline .input { height: 38px; }
.cat-tag-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cat-tag-x:hover { background: var(--sunken); color: var(--ink); }

/* the month's days as bars: thirty of them need a closer step than app.css's */
.ex-days .bars { gap: clamp(1px, .5vw, 3px) !important; }
.ex-days .bars .bar i { border-radius: 5px 5px 2px 2px; }
.ex-days .bars .bar .l { font-size: 10.5px; height: 15px; line-height: 15px; }

/* ── savings.css ── */
/* Savings and Transfers: the goal tiles (spending_savings_view.dart _GoalTile),
   the goal editor's mark, and the Move money card (move_money_card.dart). */

/* Two columns that stay two while there is room, then one full-width column
   (the shared .split leaves a narrow side card on a row of its own). */
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 350px); gap: 22px; align-items: start; }
.sv-split > * { min-width: 0; }
@media (max-width: 1020px) { .sv-split { grid-template-columns: minmax(0, 1fr); } }

/* ── Goal tiles: each on its own colour, the ring at the top right ── */
.sv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.sv-tile { position: relative; min-height: 196px; border-radius: 20px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; box-shadow: 0 10px 22px rgba(22, 33, 59, .09); transition: transform .12s ease, box-shadow .15s ease; text-align: left; border: 0; font: inherit; min-width: 0; }
.sv-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(22, 33, 59, .13); }
.sv-tile.on { outline: 3px solid var(--ember); outline-offset: 3px; }
.sv-tile-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: auto; padding-bottom: 12px; }
.sv-tile-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-tile-fig { line-height: 1.1; } /* an Amount at the stat size, fitted to the tile */
.sv-tile-sub { font-size: 11.5px; line-height: 1.35; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-tile-add { align-self: flex-start; margin-top: 8px; height: 28px; padding: 0 11px; border-radius: 100px; border: 0; display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--text); cursor: pointer; }
.sv-tile-add:hover { filter: brightness(1.06); }
.sv-tile.new { background: color-mix(in srgb, var(--card) 60%, transparent); border: 1.5px dashed var(--green-line); box-shadow: none; align-items: center; justify-content: center; gap: 8px; color: var(--green-text); font-weight: 600; font-size: 13px; }
.sv-tile.new:hover { transform: none; border-color: var(--green); }
.sv-plus { width: 36px; height: 36px; border-radius: 50%; background: var(--card); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.sv-pace { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--green-tint); }
.sv-over { flex-direction: row; align-items: center; gap: 12px; }
.sv-mark { width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(22, 33, 59, .12); }

/* ── Move money: two tiles in the accounts' own colours, no card behind ── */
.mv { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mv-page { min-width: 0; }
.sv-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.sv-wrap .li .s { white-space: normal; line-height: 1.4; }
.mv-tiles { display: flex; align-items: stretch; gap: 8px; }
.mv-side { flex: 1 1 0; min-width: 0; position: relative; display: flex; }
.mv-tile { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 13px; border-radius: 18px; border: 0; cursor: pointer; text-align: left; font: inherit;
  color: var(--c-ink); background: linear-gradient(135deg, var(--c-lift) 0%, var(--c-start) 40%, var(--c-end) 100%); box-shadow: 0 8px 20px rgba(22, 33, 59, .12); transition: transform .12s ease; }
.mv-tile:hover { transform: translateY(-1px); }
.mv-tile.open { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--c-start), 0 10px 24px rgba(22, 33, 59, .16); }
.mv-tile.none { background: var(--sunken); color: var(--ink-2); box-shadow: none; border: 1.5px dashed var(--dashed); }
.mv-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-quiet, var(--sand-label)); }
.mv-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mv-name b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-line { font-size: 12px; line-height: 1.35; color: var(--c-soft, var(--muted)); font-variant-numeric: tabular-nums; } /* wraps before its word, never through its figure (the mark is joined by a no-break space) */
.mv-swap { align-self: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--field); color: var(--harbour-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 12px rgba(22, 33, 59, .12); }
.mv-swap:hover { color: var(--ink); }
.mv-swap[disabled] { opacity: .4; cursor: default; }
.mv-list { position: absolute; top: calc(100% + 8px); z-index: 5; width: max(100%, 280px); max-height: 320px; overflow: auto; background: var(--card-bright); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-lift); padding: 6px; display: flex; flex-direction: column; animation: popIn .14s ease; }
.mv-list.from { left: 0; }
.mv-list.to { right: 0; }
.mv-opt { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.mv-opt:hover:not([disabled]) { background: var(--sunken); }
.mv-opt.on { background: var(--ember-tint); }
.mv-opt[disabled] { opacity: .4; cursor: default; }
.mv-opt .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.mv-dot { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; }
.mv-goals { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--hairline); }
.mv-amt { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 4px; container-type: inline-size; }
/* the typed figure takes up to 60% of the row, the rest is the "of … in …" note */
.mv-fig { display: inline-flex; align-items: baseline; font-weight: 700; font-size: clamp(20px, calc(60cqi / var(--ems, 3)), 32px); letter-spacing: -.04em; cursor: text; min-width: 0; max-width: 60%; }
.mv-fig > .cur { position: relative; top: -.52em; font-size: .56em; font-weight: 600; color: var(--ghost); margin-right: .08em; white-space: nowrap; }
.mv-fig input { border: 0; background: none; outline: none; font: inherit; font-family: var(--display); color: var(--ink); padding: 0; min-width: 2ch; max-width: 100%; }
.mv-fig input::placeholder { color: var(--bar-strong); }
.mv-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 100px; margin: 4px 0; cursor: pointer; background: linear-gradient(90deg, var(--fill) var(--pct), var(--track) var(--pct)); }
.mv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--knob); box-shadow: 0 2px 8px rgba(22, 33, 59, .28), 0 0 0 1px rgba(22, 33, 59, .06); cursor: grab; }
.mv-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--knob); border: 0; box-shadow: 0 2px 8px rgba(22, 33, 59, .28); cursor: grab; }
.mv-slider[disabled] { opacity: .45; cursor: default; }
.mv-slider:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.mv-rate { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--card-warm); border: 1px solid var(--hairline); }
.mv-rate-in { display: flex; flex-direction: column; gap: 4px; width: 128px; flex-shrink: 0; }
.mv-rate-in .input { height: 36px; text-align: right; font-family: var(--display); font-weight: 600; }
.mv-warn { color: var(--ember-text); font-weight: 600; line-height: 1.45; }
.mv-go { height: 46px; font-size: 15px; }

/* ── settings.css ── */
/* Settings (views/settings.jsx): the groups on the left, the chosen group on
   the right, the phone's rows, its plan card and its "ledger is yours" card. */

.set-page { max-width: 1120px; }
.set-wrap { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1000px) { .set-wrap { grid-template-columns: 208px minmax(0, 1fr); gap: 20px; } }

/* the left column */
.set-nav { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 12px; }
.set-search { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); cursor: text; }
.set-search:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(215, 88, 43, .12); }
.set-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 14px; }
.set-search input::placeholder { color: var(--ghost); }
.set-clear { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--sunken); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.set-groups { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 6px; box-shadow: var(--shadow); }
.set-group { height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 0; background: none; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--side-ink); text-align: left; width: 100%; }
.set-group span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-group:hover { background: var(--sunken); }
.set-group.on { background: var(--ember-tint); color: var(--ink); font-weight: 650; box-shadow: inset 3px 0 0 var(--ember); }
.set-status { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12.5px; color: var(--muted); }
.set-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.set-status.off i { background: #C9A227; }
.set-status span { color: var(--ghost); }

/* the right column */
.set-body { min-width: 0; max-width: 760px; }
.set-stack { gap: 20px; }
.set-head { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.set-title { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.set-line { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
.set-sec { display: flex; flex-direction: column; gap: 8px; }
.set-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; padding: 0 4px; }
.set-note a { font-weight: 600; }

/* a row: picture, words, and what sits on the right */
.set-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none; transition: background .12s ease; }
.set-row:first-child { border-top: 0; }
.set-row.tap { cursor: pointer; }
.set-row.tap:hover { background: var(--hover-tint); }
.set-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row-t b { font-weight: 600; font-size: 14px; }
.set-row-t b.danger { color: var(--danger-text); }
.set-row-t > span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.set-row-v { flex-shrink: 0; display: flex; align-items: center; gap: 8px; max-width: 55%; }
.set-val { font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.set-where { display: inline; font-weight: 600; color: var(--sand-label); white-space: nowrap; }
.set-where .glyph { vertical-align: -2px; margin-right: 4px; }
.set-where.block { display: block; margin-top: 3px; }
.set-in { height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--field); outline: none; font-size: 14px; font-weight: 600; width: 220px; max-width: 100%; }
.set-in:focus, .set-select:focus { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(215, 88, 43, .12); }
.set-select { height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 30px 0 10px; background: var(--field) var(--chev) no-repeat right 10px center; appearance: none; outline: none; font-size: 13.5px; font-weight: 600; width: 230px; max-width: 100%; cursor: pointer; }

/* a row found by the search, flashed once */
.set-hl { animation: setFlash 1.8s ease; }
@keyframes setFlash { 0%, 35% { background-color: var(--ember-tint-strong); } 100% { background-color: transparent; } }
.set-me.set-hl, .set-plan.set-hl, .set-yours.set-hl { animation: setRing 1.8s ease; }
@keyframes setRing { 0%, 40% { box-shadow: 0 0 0 3px var(--ember); } 100% { box-shadow: var(--shadow); } }

/* profile */
.set-me { flex-direction: row; align-items: center; gap: 20px; padding: 22px; }
.set-me-name { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-me label.btn { position: relative; }
.set-me .btn.disabled { opacity: .45; pointer-events: none; }

/* language */
.set-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; }
.set-lang { height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; border: 0; border-top: 1px solid var(--hairline); background: none; cursor: pointer; font-size: 14px; font-weight: 500; text-align: left; }
.set-lang:hover { background: var(--hover-tint); }
.set-lang.on { font-weight: 700; color: var(--ember-text); }

/* rules */
.set-rule { display: flex; align-items: flex-start; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--hairline); }
.set-rule:first-child { border-top: 0; }
.set-rule-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.set-rule-t b { font-weight: 600; }
.set-rule-t > span { color: var(--ink-2); font-size: 13.5px; }
.set-pill { flex-shrink: 0; height: 24px; padding: 0 10px; border-radius: 100px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; }
.set-pill.on { background: var(--green-tint); color: var(--green-text); }
.set-pill.off { background: var(--sunken); color: var(--muted); }
.set-empty { flex-direction: row; align-items: center; gap: 14px; }

/* Ask history */
.set-loading { padding: 28px 16px; text-align: center; }
.set-day { padding: 0; gap: 0; overflow: hidden; }
.set-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; border: 0; background: none; cursor: pointer; }
.set-caret { display: inline-flex; transition: transform .15s ease; }
.set-caret.open { transform: rotate(90deg); }
.set-turns { display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 18px; border-top: 1px solid var(--hairline); }
.set-turn { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.set-q { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.set-q span { background: var(--accent); color: var(--on-accent); padding: 9px 14px; border-radius: 16px 16px 4px 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.set-q small { font-size: 11px; color: var(--ghost); }
.set-a { align-self: flex-start; max-width: 88%; background: var(--card-warm); border: 1px solid var(--hairline); padding: 10px 14px; border-radius: 16px 16px 16px 4px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* the plan card (account_plan_screen.dart: the deep ember card) */
.set-plan { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border-radius: 22px; color: #FFFCF7; background: linear-gradient(150deg, #C9522A, #B84318 60%, #A43A16); box-shadow: 0 14px 30px rgba(184, 67, 24, .26); }
.set-plan-t { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.set-plan-pill { height: 32px; padding: 0 14px; border-radius: 100px; background: rgba(0, 0, 0, .16); display: inline-flex; align-items: center; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.set-plan-line { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.set-plan-body { font-size: 13.5px; line-height: 1.55; opacity: .94; max-width: 62ch; }

/* the privacy card (privacy_screen.dart: "Your ledger is yours") */
.set-yours { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; border-radius: 22px; color: #FFFCF7; background: linear-gradient(150deg, #2E6E52, #1F5A41); box-shadow: 0 14px 30px rgba(31, 90, 65, .22); line-height: 1.55; }
.set-yours > .row b { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.set-yours .num { font-size: 26px; font-weight: 700; }
.set-yours small { font-size: 12.5px; opacity: .85; }

/* password */
.set-pw { display: flex; flex-direction: column; gap: 12px; padding: 18px; max-width: 520px; }
.set-pw-t { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.set-pw .muted { line-height: 1.5; }
.set-warn { font-size: 13px; line-height: 1.5; color: var(--danger-text); background: var(--ember-tint); border: 1px solid var(--danger-line); border-radius: 12px; padding: 10px 12px; }

/* deleting the account */
.set-del { width: 540px; max-height: calc(100vh - 40px); overflow: auto; }
.set-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.set-list li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; font-size: 13.5px; }
.set-list li .glyph { margin-top: 3px; }
.set-first { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-warm); border: 1px solid var(--hairline); }
.set-first .small { flex: 1; line-height: 1.45; }

/* Appearance: four tiles, each a small Home in its own colours. */
.set-looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 4px 0; }
@media (max-width: 720px) { .set-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-look { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 12px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--card-bright); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink); }
.set-look:hover { border-color: var(--line-strong); }
.set-look.on { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-tint-strong); }
.set-pic { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.set-mini { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; }
.set-mini i { display: block; border-radius: 3px; }
.set-mini b { font-family: var(--display); font-size: 17px; letter-spacing: -.03em; line-height: 1; }
.set-mini > span { display: flex; align-items: center; gap: 7px; border-radius: 9px; padding: 7px 8px; }
/* a phone-wide window: the groups above the chosen one */
@media (max-width: 560px) { .set-wrap { grid-template-columns: minmax(0, 1fr); } .set-nav { position: static; } .set-where { white-space: normal; } .set-me .small { overflow-wrap: anywhere; } }

/* ── shared.css ── */
/* Shared (Habits, Couples) and Insights (News, Learn, Currency): the phone's
   together_* and trends_* pages for a desktop window. Only tokens from app.css. */

/* When the side column no longer fits beside the main one, it takes the
   whole width and lays its cards side by side instead of one narrow stack. */
.sh-page { container-type: inline-size; }
@container (max-width: 812px) {
  .split > .side-col.sh-side { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: start; }
}

/* ── Habits: the squares (together_streak.dart) ─────────────────────── */
.hb-sq { display: inline-block; border-radius: 30%; flex-shrink: 0; background: var(--track); }
.hb-sq.hb-strong { background: var(--ember); }
.hb-sq.hb-light { background: var(--heat-1); }
.hb-sq.hb-rest { background: var(--heat-rest); }
.hb-sq.hb-none { background: var(--track); }
.hb-sq.hb-future { background: var(--heat-future); border: 1.5px dashed var(--line-strong); }
.hb-sq.today { box-shadow: 0 0 0 3px rgba(215, 88, 43, .22); }
.hb-letter { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--ghost); text-align: center; }

/* the hero: Peeka and his health beside the run */
.hb-hero { flex-direction: row; gap: 28px; align-items: stretch; flex-wrap: wrap; padding: 24px 26px; background: linear-gradient(165deg, var(--card-bright), var(--ember-tint) 130%); }
.hb-stage { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; position: relative; padding-top: 6px; }
.hb-stage .peeka { position: relative; z-index: 1; }
.hb-worn { width: auto !important; height: 210px !important; max-width: 200px; }
.hb-shadow { position: absolute; bottom: 52px; width: 130px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 33, 59, .14), transparent); }
.hb-health { text-align: center; }
.hb-bar { width: 150px; height: 6px; border-radius: 100px; background: var(--track); overflow: hidden; display: block; }
.hb-bar i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--heat-1), var(--ember)); }
.hb-run { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hb-link { font-size: 13px; font-weight: 600; color: var(--ember-text); cursor: pointer; background: none; border: 0; padding: 0; }
.hb-big { font-weight: 700; font-size: 64px; line-height: .9; letter-spacing: -.05em; }
.hb-big small { font-size: 22px; letter-spacing: -.02em; color: var(--ink-2); margin-left: 8px; font-weight: 600; }
.hb-line { flex: 1; min-width: 200px; font-size: 14px; color: var(--ink-2); line-height: 1.5; padding-bottom: 4px; }
.hb-week { display: flex; justify-content: space-between; gap: 8px; max-width: 460px; }
.hb-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hb-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.hb-counts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-counts .num { font-size: 24px; font-weight: 700; }
.hb-counts span:last-child { font-size: 12px; color: var(--muted); }

/* the full calendar, a few months side by side */
.hb-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 22px; }
.hb-month { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hb-grid { display: grid; grid-template-columns: repeat(7, 22px); gap: 5px; justify-content: start; }
.hb-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--muted); }
.hb-legend span { display: inline-flex; align-items: center; gap: 7px; }

/* the wardrobe shelf */
.hb-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hb-piece { border: 1px solid var(--hairline); background: var(--card-bright); border-radius: 18px; padding: 12px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center; min-width: 0; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.hb-piece:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hb-piece b { font-size: 13px; font-weight: 600; }
.hb-pic { height: 118px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hb-pic img { max-height: 118px; max-width: 100%; object-fit: contain; }
.hb-piece.locked .hb-pic img { opacity: .32; filter: saturate(.3); }
.hb-piece.locked b { color: var(--muted); }
.hb-piece.worn { border-color: var(--heat-1); background: var(--ember-tint); box-shadow: 0 0 0 2px rgba(215, 88, 43, .18); }
.hb-state { font-size: 11.5px; font-weight: 600; color: var(--green-text); }
.hb-piece.worn .hb-state { color: var(--ember-text); }
.hb-need { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.3; width: 100%; }
.hb-meter { display: block; width: 80%; height: 4px; border-radius: 100px; background: var(--track); overflow: hidden; }
.hb-meter i { display: block; height: 100%; border-radius: 100px; background: var(--ember); }
.hb-next-pic { height: 96px; width: auto; object-fit: contain; flex-shrink: 0; }
.hb-stage-row { padding: 6px 10px; border-radius: 10px; }
.hb-stage-row.on { background: var(--ember-tint); color: var(--ember-text); }

/* the scoreboard */
.hb-rank { padding: 10px 6px; }
.hb-pos { width: 18px; font-weight: 700; color: var(--ghost); text-align: center; }
.hb-rank.on .hb-pos, .hb-rank.on .hb-score { color: var(--ember-text); }
.hb-score { font-size: 18px; font-weight: 700; }
.hb-note { display: flex; gap: 12px; align-items: flex-start; background: var(--sunken); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* ── Couples ─────────────────────────────────────────────────────────── */
.cp-sample { display: flex; align-items: center; gap: 10px; background: var(--card-warm); border: 1px dashed var(--dashed); color: var(--ink-2); border-radius: 14px; padding: 10px 14px; font-size: 13px; font-weight: 500; }
.cp-view { display: flex; align-items: center; gap: 10px; background: var(--sunken); border-radius: 14px; padding: 10px 14px; font-size: 13px; color: var(--ink-2); }
.cp-ring { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.cp-faces { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 220px; }
.cp-face { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 8px 10px; cursor: pointer; }
.cp-face:hover { background: var(--hover-tint); }
.cp-face.on { background: var(--ember-tint); }
.cp-face .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-face .fig { flex: 0 1 auto; }
.cp-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cp-cat { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr auto; gap: 12px; align-items: center; padding: 8px 2px; }
.cp-cat .nm { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-split { display: flex; height: 10px; border-radius: 100px; overflow: hidden; background: var(--track); }
.cp-split i { display: block; height: 100%; }
.cp-payer { font-size: 10px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-payer.you { background: var(--ember-tint-strong); color: var(--ember-text); }
.cp-payer.them { background: var(--slate-tint); color: var(--slate-text); }
.cp-shelf { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--hairline); }
.cp-shelf:first-child { border-top: 0; }
.cp-shelf .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-shelf .grow b { font-weight: 600; }
.cp-shelf .grow span { font-size: 13px; font-weight: 500; }
.cp-scope { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--hairline); }
.cp-scope:first-child { border-top: 0; }
.cp-scope .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-scope .grow span { font-size: 12px; color: var(--muted); }
.cp-pill { font-size: 11.5px; font-weight: 700; border-radius: 100px; padding: 3px 10px; white-space: nowrap; }
.cp-pill.on { background: var(--green-tint); color: var(--green-text); }
.cp-pill.off { background: var(--sunken); color: var(--muted); }
.cp-goal { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.cp-goal:first-child { border-top: 0; padding-top: 0; }
.cp-pair { display: flex; justify-content: center; }

/* Sharing & access, linking and unlinking (editors/sharing.jsx) */
.sa-row { cursor: pointer; }
.sa-row:hover { background: var(--card-warm); }
.sa-row.dead { cursor: default; }
.sa-row.dead:hover { background: none; }
.sa-row.dead .k { color: var(--muted); }
.sa-name .v input { border-bottom: 1px dashed var(--dashed); padding: 4px 0; }
.sa-name .v input:focus { border-bottom-color: var(--ember); }
.sa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sa-why { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sa-why .glyph { margin-top: 2px; }
.sa-err { font-size: 12.5px; line-height: 1.45; color: var(--ember-text); font-weight: 500; }
.sa-note { display: flex; flex-direction: column; gap: 8px; background: var(--sunken); border-radius: 18px; padding: 14px 16px; font-size: 13px; color: var(--ink-2); }
.sa-item { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.sa-item b { font-weight: 600; color: var(--ink-2); }
.sa-view .frow { min-height: 44px; }
.sa-view .k { color: var(--ink-2); }
.sa-leave { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--card-bright); border: 1px solid var(--hairline); border-radius: 18px; padding: 16px; }
.sa-code { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--ember-tint); border: 1px dashed var(--dashed); border-radius: 18px; padding: 18px 16px; width: 100%; max-width: 420px; align-self: center; }
.sa-code-big { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: .08em; color: var(--ink); user-select: all; }
.sa-code-in { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; height: 48px; }
.sa-door { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.sa-door:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.sa-door.dead { cursor: default; opacity: .55; }
.sa-door.dead:hover { box-shadow: none; transform: none; border-color: var(--hairline); }
.sh-page .form + .sa-why, .card .sa-why { margin-top: -2px; }

/* ── Insights ────────────────────────────────────────────────────────── */
.in-change { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.in-change.up { color: var(--ember-text); }
.in-change.down { color: var(--green-text); }
.in-change.flat { color: var(--muted); }
.in-notice { display: flex; gap: 12px; align-items: flex-start; }
.in-notice img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--ember-tint); flex-shrink: 0; }
.in-notice b { font-weight: 600; line-height: 1.45; display: block; }
.in-notice span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.in-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.in-article { display: flex; gap: 14px; align-items: flex-start; padding: 14px 6px; border-top: 1px solid var(--hairline); cursor: pointer; border-radius: 10px; }
.in-article:first-child { border-top: 0; }
.in-article:hover { background: var(--hover-tint); }
.in-article .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.in-article .kick { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-label); }
.in-article .ttl { font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -.015em; line-height: 1.3; }
.in-article .dek { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.in-shelves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 18px; align-items: start; }
.in-num { width: 22px; font-family: var(--display); font-weight: 700; color: var(--ember-text); padding-top: 10px; text-align: center; flex-shrink: 0; }
.in-conv { gap: 18px; }
.in-conv-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; }
.in-amount-box { min-width: 0; container-type: inline-size; } /* the typed figure shrinks to the column (ui.jsx moneyEms) */
.in-amount { font-family: var(--display); font-weight: 700; font-size: clamp(22px, calc(100cqi / var(--ems, 3)), 44px); letter-spacing: -.04em; border: 0; background: none; outline: none; width: 100%; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; border-bottom: 2px solid var(--hairline); padding: 2px 0; }
.in-amount:focus { border-bottom-color: var(--ember); }
.in-result { min-width: 0; text-align: right; color: var(--ember-text); line-height: 1.1; } /* an Amount at the card size, fitted to the column */
.in-becomes { display: flex; align-items: center; gap: 14px; }
.in-becomes .hair { flex: 1; }
.in-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.in-quick button { border: 1px solid var(--line); background: var(--field); border-radius: 14px; padding: 10px 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-quick button:hover { border-color: var(--line-strong); }
.in-quick button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.in-quick b { font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-quick span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── The reader: an article or a Learn piece, in a sheet from the right ── */
.rd { position: fixed; top: 0; right: 0; bottom: 0; width: 680px; max-width: 100vw; background: var(--card-bright); z-index: 51; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(22, 33, 59, .18); animation: slideIn .2s cubic-bezier(.2, .8, .2, 1); }
.rd-head { height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 22px; border-bottom: 1px solid var(--hairline); }
.rd-close { height: 34px; padding: 0 16px; border-radius: 100px; border: 0; background: var(--ember-grad); color: #FFF; font-weight: 600; cursor: pointer; }
.rd-body { flex: 1; min-height: 0; overflow: auto; padding: 30px 44px 56px; display: flex; flex-direction: column; gap: 18px; }
.rd-body > * { flex-shrink: 0; }
.rd-title { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -.03em; margin: 0; }
.rd-dek { font-size: 17px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.rd-why { display: flex; gap: 12px; align-items: flex-start; background: var(--green-tint); border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rd-why b { color: var(--ink); }
.rd-p { font-size: 16.5px; line-height: 1.7; margin: 0; color: var(--ink); }
.rd-quote { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.35; letter-spacing: -.015em; color: var(--ember-text); border-left: 3px solid var(--ember); padding: 4px 0 4px 18px; margin: 6px 0; }
.rd-know { background: var(--sunken); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.rd-know li { line-height: 1.5; margin-left: -4px; }
.rd-know ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rd-foot { font-size: 12.5px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--hairline); padding-top: 14px; }
.rd-fig { background: var(--sunken); border-radius: 18px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.rd-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.rd-fig .cap { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.rd-fig .leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rd-fig .leg span { display: inline-flex; align-items: center; gap: 6px; }
.rd-fig .leg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.rd-piles { display: flex; align-items: flex-end; gap: 6px; }
.rd-piles div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.rd-piles img { height: 70px; width: 100%; object-fit: contain; object-position: bottom; }
.rd-piles span { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.3; }
/* A blog post's body in the reader (/blog/feed.json, written by tools/blog.mjs):
   the same looks as the pieces drawn field by field above. */
.rd-html { display: flex; flex-direction: column; gap: 18px; }
.rd-html > p, .rd-html li { font-size: 16.5px; line-height: 1.7; margin: 0; color: var(--ink); }
.rd-html h2, .rd-html h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 8px 0 0; color: var(--ink); }
.rd-html h2 { font-size: 21px; } .rd-html h3 { font-size: 18px; }
.rd-html a { color: var(--ember-text); text-decoration: underline; text-underline-offset: 3px; }
.rd-html code { font-size: .9em; background: var(--sunken); border-radius: 6px; padding: 1px 6px; }
.rd-html .money { white-space: nowrap; }
.rd-html ul, .rd-html ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.rd-html .pull { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.35; letter-spacing: -.015em; color: var(--ember-text); border-left: 3px solid var(--ember); padding: 4px 0 4px 18px; margin: 6px 0; }
.rd-html .know { background: var(--sunken); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.rd-html .know .know-h { margin: 0; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sand-label); line-height: 1.4; }
.rd-html .know ul { padding-left: 20px; }
.rd-html .know li { font-size: inherit; line-height: 1.5; margin-left: -4px; }

@media (max-width: 1000px) { .hb-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-conv-row { grid-template-columns: 1fr; } .rd-body { padding: 24px 22px 48px; } .in-shelves { grid-template-columns: 1fr; } }

/* Couples before anyone is linked: the person's own status, and what linking would give. */
.cp-before { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
@media (max-width: 1240px) { .cp-before { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cp-before > :last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .cp-before { grid-template-columns: 1fr; } }
.cp-status { gap: 14px; }
.cp-open { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; padding: 10px 12px; border-radius: 12px; }
.cp-open.yes { background: var(--green-tint); color: var(--green-text); }
.cp-open.no { background: var(--ember-tint); color: var(--ember-text); }
.cp-open .glyph { margin-top: 1px; }
.cp-facts { display: flex; gap: 28px; }
.cp-facts span { display: flex; flex-direction: column; }
.cp-facts b { font-size: 24px; font-weight: 700; }
.cp-facts small { font-size: 12px; color: var(--muted); }
.cp-on { margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--green-text); background: var(--green-tint); border-radius: 100px; padding: 2px 7px; vertical-align: 1px; }
.cp-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 720px; margin-top: 10px; text-align: left; }
@media (max-width: 700px) { .cp-doors { grid-template-columns: 1fr; } }
.cp-before .li .t, .cp-before .li .s { white-space: normal; overflow: visible; text-overflow: clip; }
.cp-before .li > .small.num { max-width: 46%; white-space: normal; }
.cp-before .li { align-items: flex-start; }
.cp-on { display: inline-block; white-space: nowrap; }

/* ── standing.css ── */
/* Standing moves: the list on Transfers (spending_transfers_view.dart) and the
   transfer editor (transfer_edit_screen.dart). Colours are the theme's tokens only. */

/* ── The list: a row opens its editor; a paused or waiting move reads quieter ── */
.st-row { cursor: pointer; }
.st-row.st-off { opacity: .62; }
.st-row .st-top { align-self: flex-start; }
.st-row .amt.st-top { margin-top: 2px; }
.st-act { width: 32px; height: 32px; }

/* ── The editor ── */
.st-repeat { display: flex; flex-direction: column; gap: 8px; }
.st-note { gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--sunken); color: var(--ink-2); line-height: 1.45; }
.st-note .glyph { margin-top: 1px; }
.st-dim { opacity: .75; }
.st-go { align-self: stretch; justify-content: center; }
.st-foot { text-align: center; line-height: 1.45; }