/* BRAND KIT V3 (October 2026): the colour and type names in this file are the JOBS, not the hues —
   cream = paper #F6F2EA, ink = Fjord Ink #12263A, burgundy = terracotta #A44723, petrol = Øresund
   #3F6E71 (both for data only), the main action = ink (raised navy on hover); Bricolage, Newsreader and
   Fraunces all read Space Grotesk now (upright); figures in tables Plex Mono, large ones Space Grotesk; square
   (app/theme.css). The v3 additions are at the end of the file. */
/* ============================================================
   household — skin for Conti di Casa, the household-finance tool.
   Loaded after app/theme.css (which defines --t-*). Four colours on cream,
   each with one job:
     cream    the page; surface for cards and panels
     ink      text and frame; the sidebar (and the phone's section strip) is ink
              with cream text, so it reads as the site's frame, like the top bar
     burgundy the brand and the main action: primary buttons (hover ink), the mark
     petrol   the selected state: the current section, chosen chips and toggles,
              adopted savings; also the calm sections (notices, "ways to save")
   Money: income and savings petrol, spending burgundy, with the signs exactly as
   the app prints them. Charts: income bars petrol, spending bars burgundy, the
   projection a petrol line between two dashed petrol edges (the range), what you
   pay in a dashed soft-ink line, the target an ink dotted line. Goals take
   petrol · burgundy · ink · soft ink in turn (the app's eight slots map onto
   those four), always next to their name.
   Status: on track = petrol tint + ✓ · tight = burgundy tint, dashed + ! ·
   short = solid burgundy + ✕. Findings use the same scale, and their colour emoji
   are swapped for the same glyphs. Burgundy and petrol are close in lightness, so
   neither carries meaning alone.
   Shapes and type follow the COMPONENTS block in brand.css, through its tokens:
   every button, chip and section tab is a pill (44, or 36 in the dense bank
   picker, for small buttons and on the phone's section strip); fields 44 with
   the small radius; small capitals are the label style; status pills are tags;
   cards are panels (20, or 12 nested in a card), framed in ink for the one that
   matters on each screen (the month on Overview, the capacity on Goals, the
   onboarding form, an open dialog); headings are the three sizes.
   One light theme: :root:root:root beats the app's prefers-color-scheme and
   [data-theme=dark] blocks, so their dark values never apply.
============================================================ */

/* ---------- 1. variable map (once) ---------- */
:root:root:root{
  color-scheme:light;
  --font:var(--t-sans);
  --bg:var(--t-bg);
  --panel:var(--t-surface);
  --inset:var(--t-sunken);
  --ink:var(--t-ink);
  --ink2:var(--t-ink-2);
  --ink3:var(--t-ink-2);              /* nothing lighter than soft ink: 5.4:1 */
  --line:var(--t-line);
  --line2:var(--t-line-2);
  --ring:color-mix(in srgb,var(--t-ink) 7%,transparent);
  --brand:var(--t-petrol);            /* the app's "brand" is mostly selection and links */
  --brand-ink:var(--t-cream);
  --brand-soft:var(--t-petrol-soft);
  --hero-a:var(--t-ink); --hero-b:var(--t-ink); --hero-c:var(--t-ink);
  --in:var(--t-petrol);
  --out:var(--t-burgundy);
  --s1:var(--t-petrol);
  --g1:var(--t-petrol); --g2:var(--t-burgundy); --g3:var(--t-ink); --g4:var(--t-ink-2);
  --g5:var(--t-petrol); --g6:var(--t-burgundy); --g7:var(--t-ink); --g8:var(--t-ink-2);
  --pos:var(--t-petrol);
  --neg:var(--t-burgundy);
  --warn:var(--t-burgundy);
  --alert-bg:var(--t-burgundy-soft);
  --warn-bg:var(--t-burgundy-soft);
  --ok-bg:var(--t-petrol-soft);
  --info-bg:var(--t-petrol-soft);
  --st-good:var(--t-petrol); --st-warn:var(--t-burgundy); --st-serious:var(--t-burgundy); --st-crit:var(--t-burgundy);
  --radius:var(--rr-radius);
  --shadow:none;
}
html,body{background:var(--t-bg);color:var(--t-ink)}
body{font:400 17px/1.5 var(--t-sans);letter-spacing:-.005em}
button,input,select{font-family:var(--t-sans)}
:focus-visible{outline:3px solid var(--t-petrol);outline-offset:2px}
.pos{color:var(--t-ink)}
.neg{color:var(--t-ink)}
.warn-text{color:var(--t-ink);font-weight:500}

/* ---------- 2. the frame: an ink sidebar with cream text, petrol for the current section ---------- */
@media (min-width:861px){
  /* the sidebar is sticky and 100vh tall; the column's ink runs the full height behind it */
  .layout{background:linear-gradient(90deg,var(--t-ink) 0 248px,transparent 248px)}
}
/* onboarding hides the sidebar: the form then takes the whole width, on the cream, centred */
.layout:has(>.nav[hidden]){background:none}
.nav[hidden]+.content{grid-column:1/-1;margin-inline:auto}
.nav{background:var(--t-surface);color:var(--t-ink);border-right:1px solid var(--t-line);padding:24px 14px}
.brand b{font:500 19px/1.15 var(--t-sans);letter-spacing:-.03em;color:var(--t-ink)}
.brand small{font:400 14px/1.3 var(--t-serif);color:var(--t-ink-2);margin-top:2px}
.brand-mark{background:var(--t-burgundy);border-radius:var(--rr-radius-sm);box-shadow:0 0 0 1.5px var(--t-ink)}
.brand-mark::after{border-color:var(--t-cream);border-top-color:transparent}
#nav-list{gap:4px}
/* a section is a control: 44 high; quiet (soft ink on the panel) until hovered or current */
.nav-item{height:var(--rr-control);min-height:0;padding:0 16px;border:1px solid transparent;border-radius:var(--rr-pill);background:none;color:var(--t-ink-2);font:var(--rr-control-font);letter-spacing:0;white-space:nowrap}
.nav-item:hover{background:none;border-color:var(--t-edge);color:var(--t-ink)}
.nav-item[aria-current="page"],.nav-item[aria-current="page"]:hover{background:var(--t-select);border-color:var(--t-select);color:var(--t-cream);font-weight:500}
.badge{background:var(--t-burgundy);color:var(--t-cream);box-shadow:0 0 0 1.5px var(--t-surface);font:var(--rr-tag-font);line-height:22px}
.status{font:400 14px/1.4 var(--t-read);color:var(--t-ink-2)}
.status .warn-text{color:var(--t-ink);text-decoration:underline wavy var(--t-burgundy-soft) 1px;text-underline-offset:3px}
.content{padding:28px 32px 72px}

/* ---------- 3. type: Bricolage for interface and figures, Newsreader for reading, Fraunces italic accents ---------- */
/* the three heading sizes: the onboarding's title is the page's statement, a card's title a panel heading, the projection's a group */
#main h2,#modal h2{font:var(--rr-h1);letter-spacing:var(--rr-h1-ls)}
#main h3,#modal h3{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls);margin:0 0 6px}
#main h4,#modal h4{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls);margin:0 0 4px}
.sub,.disclaimer,.finding p,.opp-body p,.fix,.how li,.drop small,.promo p,.goal-facts p,.onb-hero p{font-family:var(--t-read);letter-spacing:0}
.sub{color:var(--t-ink-2);font-size:16px;line-height:1.45}
.disclaimer{color:var(--t-ink-2);font-size:15px;line-height:1.5}
.check{font:500 15px/1.35 var(--t-sans);color:var(--t-ink-2)}
/* a field's label is the label style, as in every lab; the control inside keeps the field font */
.field{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2);align-content:start}
/* small capitals: the label style, everywhere */
.field-label,.tag,.table thead th,.hero-stat span,.tile span,.acc-name{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2);opacity:1}
.tag.extra{color:var(--t-ink)}
.tag.warn{color:var(--t-ink)}
.tx-amt,.cat-val,.acc b,.tile b,.opp-val b,.goal-side b,.hero-big,.hero-stat b,.cap-big,.table,.bud,.slider span,.cap-row b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 4. controls: pills; burgundy is the main action, petrol is "on", the rest secondary ---------- */
.btn{height:var(--rr-control);min-height:0;padding:0 18px;border:var(--rr-hair);border-radius:var(--rr-pill);background:var(--t-surface);color:var(--t-ink);font:var(--rr-control-font);letter-spacing:0;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn:hover{border-color:var(--t-ink);color:var(--t-ink)}
.btn.primary{background:var(--t-action);border-color:var(--t-action);color:var(--t-cream)}
.btn.primary:hover{background:var(--t-action-hover);border-color:var(--t-action-hover);color:var(--t-on-action-hover);filter:none}
.btn.on{background:var(--t-select);border-color:var(--t-select);color:var(--t-cream)}
.btn.on:hover{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-cream)}
.btn.big{height:var(--rr-control);padding:0 22px;font:var(--rr-control-font)}
.btn.small{height:var(--rr-control-sm);padding:0 14px;font:var(--rr-control-font-sm)}
.cap-edit .btn.small{height:var(--rr-control);padding:0 18px;font:var(--rr-control-font)}   /* beside a 44 field: the full height */
.btn.danger{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-burgundy)}
.btn.danger:hover{background:var(--t-burgundy);border-color:var(--t-burgundy);color:var(--t-cream)}
.btn:disabled,.btn:disabled:hover{opacity:1;background:var(--t-sunken);color:var(--t-ink-2);border:1px dashed var(--t-edge)}
.link{color:var(--t-ink);font:500 16px var(--t-sans);text-decoration-thickness:1.5px;text-underline-offset:4px}
.link:hover{color:var(--t-ink)}
.link.danger{color:var(--t-ink)}
.chip{height:var(--rr-control);min-height:0;padding:0 16px;border:var(--rr-hair);border-radius:var(--rr-pill);background:var(--t-surface);color:var(--t-ink);font:var(--rr-control-font);white-space:nowrap}
.chip:hover{border-color:var(--t-ink)}
.chip.on{background:var(--t-select);border-color:var(--t-select);color:var(--t-cream)}
.chip.on:hover{background:var(--t-ink);border-color:var(--t-ink)}
/* the bank picker is a dense row: the small pill */
.onb .chip{height:var(--rr-control-sm);padding:0 14px;font:var(--rr-control-font-sm)}
.onb .chips+.field{margin-top:16px}
/* Settings marks the current language with the app's primary class: it is a toggle, so it takes the selected state */
.btn.primary[data-act="lang"]{background:var(--t-select);border-color:var(--t-select)}
.check input{accent-color:var(--t-petrol)}
.slider input{accent-color:var(--t-petrol);background:transparent}
/* list rows that open something are quiet controls: the hairline between them is the list's, drawn behind them */
.goals-mini .mini-goal{border-top:0;background:linear-gradient(var(--t-line),var(--t-line)) top/100% 1px no-repeat}
.goals-mini .mini-goal:first-of-type{background:none}
button.li{border-top:0;background:linear-gradient(var(--t-line),var(--t-line)) top/100% 1px no-repeat}
button.li:first-child{background:none}
button.li:hover{background-color:var(--t-sunken)}

/* ---------- 5. fields: 44 high, the small radius, an edge on surface ---------- */
input[type="text"],input[type="number"],input[type="date"],input[type="month"],input[type="search"],select{height:var(--rr-control);min-height:0;padding:0 12px;background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius-sm);color:var(--t-ink);font:var(--rr-field-font)}
.tx-cat select,.set-acc>input{font:var(--rr-field-font)}
input[type="text"]:hover,input[type="number"]:hover,input[type="search"]:hover,input[type="month"]:hover,input[type="date"]:hover,select:hover{border-color:var(--t-ink)}
input::placeholder{color:var(--t-ink-2);opacity:1}

/* ---------- 6. panels: surface, a hairline edge, flat ---------- */
.card{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);box-shadow:none;padding:22px}
.banner{background:var(--t-petrol-soft);border:1px solid var(--t-petrol);border-radius:var(--rr-radius);color:var(--t-ink);font:500 15.5px/1.35 var(--t-sans);padding:10px 12px 10px 18px}

/* ---------- 7. onboarding ---------- */
.onb-hero h2{text-wrap:balance}
.onb-hero p{font-size:19px;line-height:1.45;color:var(--t-ink-2)}
.onb-mark{background:var(--t-burgundy);color:var(--t-cream);border-radius:var(--rr-radius);box-shadow:0 0 0 2px var(--t-surface),0 0 0 3.5px var(--t-burgundy)}
.onb .card{border:var(--rr-frame)}

/* ---------- 8. overview hero: the month's number on surface, framed in ink ---------- */
.hero{background:var(--t-surface);color:var(--t-ink);border:var(--rr-frame);border-radius:var(--rr-radius);box-shadow:none;padding:24px 26px 18px}
.hero::after{display:none}
.hero-label{opacity:1;font:500 16px/1.35 var(--t-sans);color:var(--t-ink-2)}
.hero-big{font:500 clamp(2.8rem,7vw,4.2rem)/1 var(--t-sans);letter-spacing:-.05em;color:var(--t-ink);margin-top:6px}
.hero-nav{border:var(--rr-hair);border-radius:var(--rr-pill);background:var(--t-surface);color:var(--t-ink);font:500 26px/1 var(--t-sans);padding:0 0 3px}
.hero-nav:hover:not(:disabled){border-color:var(--t-ink)}
.hero-nav:disabled{opacity:1;border:1px dashed var(--t-edge);color:var(--t-ink-2)}
.hero-stat{background:var(--t-sunken);border-radius:var(--rr-radius-sm);padding:14px 16px}
.hero-stat b{font:500 30px/1.1 var(--t-sans);letter-spacing:-.04em;margin:6px 0 4px}
.hero-row>.hero-stat:nth-child(1) b{color:var(--t-ink)}
.hero-row>.hero-stat:nth-child(2) b{color:var(--t-ink)}
.hero-stat small{opacity:1;font:400 14px/1.35 var(--t-read);color:var(--t-ink-2)}
.hero-ring small{opacity:1;font:500 13px/1.25 var(--t-sans);color:var(--t-ink-2)}
.hero .ring-track{stroke:var(--t-sunken)}
.hero .ring-val{stroke:var(--t-petrol)!important}    /* the app paints it white inline */
.hero .ring-label{fill:var(--t-ink)}
.hero-month{opacity:1;font:400 16px/1.3 var(--t-serif);color:var(--t-ink-2)}

/* ---------- 9. rings, bars, charts ---------- */
.ring-track{stroke:var(--t-sunken)}
.ring-label{fill:var(--t-ink);font:500 14px var(--t-sans)}
.chart .axis{fill:var(--t-ink-2);font:500 12px var(--t-sans)}
.chart .axis.strong{fill:var(--t-ink);font-weight:500;paint-order:stroke;stroke:var(--t-surface);stroke-width:4px;stroke-linejoin:round}   /* a surface halo: the target's figure stays legible where the projection crosses it */
.chart .grid{stroke:var(--t-edge);stroke-width:1;stroke-dasharray:1 4;stroke-linecap:round}   /* dotted, so it can be 3:1 and still recede */
.chart .base{stroke:var(--t-ink);stroke-width:1.5}
.chart .hit{fill:none;pointer-events:all}
.chart .hit:hover{fill:var(--ring)}
.b-in{fill:var(--t-petrol)}
.b-out{fill:var(--t-burgundy)}
.fan-band{fill:none;opacity:1;stroke:var(--t-petrol);stroke-width:1.25;stroke-dasharray:3 3}   /* the range drawn by its two dashed edges: a tint could not reach 3:1 */
.fan-mid{stroke:var(--t-petrol);stroke-width:3}
.fan-paid{stroke:var(--t-ink-2);stroke-width:2;stroke-dasharray:6 4}
.fan-target{stroke:var(--t-ink);stroke-width:1.75;stroke-dasharray:2 4;stroke-linecap:round}
.legend{font:500 14.5px var(--t-sans);color:var(--t-ink)}
.sw{border-radius:0}
.sw.b-in{background:var(--t-petrol)}
.sw.b-out{background:var(--t-burgundy)}
#tip{background:var(--t-ink);color:var(--t-cream);border-radius:var(--rr-radius-sm);font:500 14px/1.35 var(--t-sans);padding:8px 12px;box-shadow:none}

/* categories: spending bars burgundy on a sunken track; over budget hatched with ink; the average an ink tick */
.cat-row{border-radius:var(--rr-radius-sm)}
.cat-row:hover{background:var(--t-sunken)}
.cat-name{font:500 16px/1.3 var(--t-sans);letter-spacing:-.01em}
.cat-name small{font:400 14px/1.35 var(--t-read);color:var(--t-ink-2)}
.cat-ico,.tx-ico,.opp-ico{background:var(--t-sunken)}
.cat-val{font:500 16px var(--t-sans);letter-spacing:-.02em}
.cat-bar{background:var(--t-sunken);box-shadow:inset 0 0 0 1px var(--t-line)}
.cat-bar .fill{background:var(--t-burgundy)}
.cat-bar .fill.over{background:repeating-linear-gradient(135deg,var(--t-burgundy) 0 6px,var(--t-ink) 6px 9px)}
.cat-bar .tick{background:var(--t-ink);box-shadow:0 0 0 2px var(--t-surface)}

/* ---------- 10. overview side: goals, savings promo, accounts ---------- */
.mini-goal b{font:500 16px/1.3 var(--t-sans);letter-spacing:-.01em}
.mini-goal small{font:400 15px/1.35 var(--t-read);color:var(--t-ink-2)}
.promo{background:var(--t-petrol-soft);border-color:var(--t-petrol)}
.promo p{font-size:17px}
.acc{background:var(--t-sunken);border-radius:var(--rr-radius-sm)}
.acc b{font:500 24px/1.2 var(--t-sans);letter-spacing:-.035em;margin:4px 0 2px}
.acc small{font:400 14px var(--t-read);color:var(--t-ink-2)}

/* status pills are tags: on track = petrol tint ✓ · tight = burgundy tint, dashed ! · short = solid burgundy ✕ */
.pill{display:inline-flex;align-items:center;height:var(--rr-tag);padding:0 10px;border:1px solid;border-radius:var(--rr-pill);font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase;white-space:nowrap}
.pill.ok,.pill.done{background:var(--t-petrol-soft);color:var(--t-ink);border-color:var(--t-petrol)}
.pill.tight{background:var(--t-burgundy-soft);color:var(--t-ink);border-color:var(--t-burgundy);border-style:dashed}
.pill.short{background:var(--t-burgundy);color:var(--t-cream);border-color:var(--t-burgundy)}
.pill::before{white-space:pre}

/* ---------- 11. findings, nested in a card: info plain · ok petrol tint · warn burgundy tint dashed · alert burgundy tint solid; the colour emoji become glyphs in a disc ---------- */
.finding{border-radius:var(--rr-radius-sm);padding:14px 16px;border:var(--rr-hair);background:var(--t-bg);color:var(--t-ink)}   /* info: plain, the petrol disc says it */
.finding.alert{background:var(--t-burgundy-soft);border-color:var(--t-burgundy)}
.finding.warn{background:var(--t-burgundy-soft);border:1px dashed var(--t-burgundy)}
.finding.ok{background:var(--t-petrol-soft);border-color:var(--t-petrol)}
.finding p{font-size:16.5px;line-height:1.45}
.finding .link{color:var(--t-ink)}
.finding .link:hover{color:var(--t-ink)}
.f-icon{font-size:0;line-height:0;color:var(--t-cream);flex:none;width:26px;height:26px;border-radius:0;display:grid;place-items:center;margin-top:1px;background:var(--t-petrol);box-shadow:0 0 0 2px var(--t-surface)}
.f-icon::before{content:"i";font:500 15px/1 var(--t-serif);color:var(--t-cream)}
.finding.ok .f-icon::before{content:"✓";font:500 14px/1 var(--t-sans)}
.finding.warn .f-icon{background:var(--t-surface);color:var(--t-ink);box-shadow:inset 0 0 0 2px var(--t-burgundy)}
.finding.warn .f-icon::before{content:"!";font:500 15px/1 var(--t-sans);color:var(--t-ink)}
.finding.alert .f-icon{background:var(--t-burgundy)}
.finding.alert .f-icon::before{content:"✕";font:500 13px/1 var(--t-sans);color:var(--t-cream)}
.rec-val{font:400 15px var(--t-read);color:var(--t-ink-2)}
.li{border-top-color:var(--t-line)}
.li small{font:400 14px var(--t-read);color:var(--t-ink-2)}

/* ---------- 12. transactions: income petrol, spending burgundy, signs as the app prints them ---------- */
.txs,.tx{border-color:var(--t-line)}
.tx-main{border-radius:var(--rr-radius-sm)}
.tx-main:hover{background:var(--t-sunken)}
.tx.open{background:color-mix(in srgb,var(--t-petrol-soft) 45%,transparent);border-radius:var(--rr-radius-sm)}
.tx-desc{font:500 16px/1.3 var(--t-sans);letter-spacing:-.01em}
.tx-desc small{font:400 14px/1.4 var(--t-read);color:var(--t-ink-2);margin-top:2px}
.tx-amt{font:500 16.5px var(--t-sans);letter-spacing:-.02em;color:var(--t-ink)}
.tx-amt.pos{color:var(--t-ink)}
.tx.excl{opacity:1}
.tx.excl .tx-desc,.tx.excl .tx-amt{color:var(--t-ink-2);text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- 13. budget, savings ---------- */
.bud{border-top-color:var(--t-line)}
.bud.total{border-top:2px solid var(--t-ink);font-weight:500}
.bud-bar small{font:400 14px var(--t-read);color:var(--t-ink-2);margin-top:4px}
.tile{background:var(--t-sunken);border-radius:var(--rr-radius-sm)}
.tile b{font:500 34px/1.15 var(--t-sans);letter-spacing:-.045em;margin:6px 0 2px}
.tile small{font:400 14px var(--t-read);color:var(--t-ink-2)}
.tile.accent{background:var(--t-petrol-soft);box-shadow:inset 0 0 0 1px var(--t-petrol)}
.tile.accent b{color:var(--t-ink)}
.opp{border:var(--rr-hair);border-radius:var(--rr-radius-sm);background:var(--t-surface)}
.opp.adopted{border:1px solid var(--t-petrol);background:var(--t-petrol-soft)}
.opp-ico{border-radius:var(--rr-radius-sm)}
.opp-body p{font-size:16.5px;line-height:1.45}
.opp-val b{font:500 24px var(--t-sans);letter-spacing:-.035em;color:var(--t-ink)}
.opp-val small{font:400 14px var(--t-read);color:var(--t-ink-2)}
.split label{background:var(--t-sunken);border-radius:var(--rr-radius-sm);font:500 15px var(--t-sans)}
.table{font:500 15px var(--t-sans)}
.table th,.table td{border-bottom-color:var(--t-line)}
.table thead th{border-bottom:2px solid var(--t-ink)}
.table td.num{font-weight:500}

/* ---------- 14. goals ---------- */
.cap{background:var(--t-surface);border:var(--rr-frame)}
.cap-big{font:500 clamp(2.2rem,5vw,2.8rem)/1.05 var(--t-sans);letter-spacing:-.05em;margin:6px 0 4px}
.cap-big small{font:400 17px var(--t-serif);letter-spacing:0;color:var(--t-ink-2)}
.alloc{background:var(--t-sunken);height:18px;border-radius:var(--rr-pill);gap:3px;box-shadow:inset 0 0 0 1px var(--t-line)}
.cap-row{font:500 15.5px var(--t-sans);color:var(--t-ink-2)}
.cap-row b{color:var(--t-ink);font-weight:500}
.cap-row .neg,.cap-row .neg b{color:var(--t-ink)}
.goal{background:var(--t-surface);border:var(--rr-hair);border-left:6px solid var(--gc);border-radius:var(--rr-radius);box-shadow:none}
.goal-head:hover{background:var(--t-sunken)}
.goal-title b{font:500 19px/1.25 var(--t-sans);letter-spacing:-.025em}
.goal-title small{font:400 15px/1.4 var(--t-read);color:var(--t-ink-2)}
.goal-side b{font:500 17px var(--t-sans);letter-spacing:-.02em}
.goal-facts p b{font-weight:500}
.goal-chart{border-top-color:var(--t-line)}
.fix{background:var(--t-burgundy-soft);border:1px dashed var(--t-burgundy);border-radius:var(--rr-radius-sm);color:var(--t-ink)}

/* ---------- 15. import, settings, dialog ---------- */
.drop{background:var(--t-sunken);border:1px dashed var(--t-edge);border-radius:var(--rr-radius-sm)}
.drop.over,.drop:hover{background:var(--t-petrol-soft);border-color:var(--t-petrol)}
.drop>span:not(.drop-icon){font:500 17px var(--t-sans)}
.drop u{color:var(--t-ink);text-decoration-thickness:1.5px;text-underline-offset:4px}
.drop small{font-size:15px;color:var(--t-ink-2)}
.drop-icon{background:var(--t-burgundy);color:var(--t-cream);border-radius:var(--rr-radius-sm)}
.how li{font-size:16.5px;line-height:1.45}
.mapping summary{font:500 16px var(--t-sans);color:var(--t-ink)}
.mapping summary::marker{color:var(--t-ink)}
.set-acc{border-top-color:var(--t-line)}
#modal{z-index:50}   /* above the site's bar (z 40), so the dialog is never tucked under it on a phone */
.modal-back{background:var(--t-scrim)}
.modal{border:var(--rr-frame)}
::-webkit-scrollbar-thumb{background:var(--t-edge);border-radius:0}

/* ---------- 16. phones: the sidebar becomes an ink strip of small pills, the current section petrol ---------- */
@media (max-width:860px){
  .nav{padding:8px 10px;border-bottom:0;box-shadow:0 2px 0 var(--t-ink)}
  .brand-mark{border-radius:0}
  #nav-list{gap:4px}
  .nav-item{flex-direction:row;gap:6px;height:var(--rr-control-sm);min-height:0;padding:0 12px;font:var(--rr-control-font-sm)}
  .nav-item .ico{width:18px;height:18px}
  .nav-item .badge{position:static;margin-left:2px;min-width:18px;padding:0 5px;font-size:11px;line-height:18px}
  .content{padding:16px 16px 56px}
}
@media (max-width:640px){
  body{font-size:16px}
  .card{padding:18px 16px}
  .hero{padding:18px 16px 14px}
  .hero-big{font-size:2.7rem}
  .hero-stat{padding:12px}
  .hero-stat b{font-size:24px}
  .hero-ring small{font-size:15px}
  .banner{padding:10px 12px}
  .tile b{font-size:30px}
  .cap-big{font-size:2.2rem}
}

/* ---------- v3 (brand kit, October 2026): figures in Plex Mono; the house mark ink, never a large terracotta fill ---------- */
.tx-amt,.cat-val,.acc b,.tile b,.opp-val b,.goal-side b,.hero-big,.hero-stat b,.cap-big,.bud,.cap-row b{font-family:var(--t-mono);font-weight:500;letter-spacing:-.01em}
.brand-mark,.onb-mark,.drop-icon{background:var(--t-ink);box-shadow:none}
.badge{box-shadow:none}

/* ---------- v3, second pass (October 2026): the two colour families everywhere in the tool ----------
   Grounds, edges and words are navy and ivory; terracotta and Øresund only in the pictures: bars, the split,
   rings, and the small square that marks a status, a habit or a finding. Figures of 28px and up are Space
   Grotesk 500 tabular; smaller figures stay Plex Mono. */
:focus-visible{outline:2px solid var(--t-ink);outline-offset:2px}
.hero-big,.tile b,.cap-big,.hero-stat b{font-family:var(--t-sans);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* notices, the savings promo, a highlighted tile, an adopted saving, the drop zone: a sunken well with a hairline */
.banner,.promo,.tile.accent,.opp.adopted{background:var(--t-sunken);border:var(--rr-hair);box-shadow:none}
.drop.over,.drop:hover{background:var(--t-sunken);border-color:var(--t-ink)}
/* status tags: neutral, the colour in the square before the word */
.pill,.pill.ok,.pill.done,.pill.tight,.pill.short{background:var(--t-surface);color:var(--t-ink);border:1px solid var(--t-edge);border-style:solid;gap:6px}
.pill::before{content:"";display:inline-block;width:8px;height:8px;flex:none;background:var(--t-petrol)}
.pill.tight::before{background:none;box-shadow:inset 0 0 0 1.5px var(--t-burgundy)}
.pill.short::before{background:var(--t-burgundy)}
/* findings: neutral panels; the square in front says how much it matters */
.finding,.finding.ok,.finding.warn,.finding.alert{background:var(--t-surface);border:var(--rr-hair)}
.fix{background:var(--t-sunken);border:var(--rr-hair)}
.f-icon{background:var(--t-petrol);box-shadow:none}
.finding.warn .f-icon{background:var(--t-surface);box-shadow:inset 0 0 0 2px var(--t-burgundy)}
.finding.alert .f-icon{background:var(--t-burgundy)}

/* the month: money in and money out as two bars under the figure */
.hero-label,.flow-k{opacity:1;color:var(--t-ink-2)}
.flow-k{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase}
.flow-bar{background:var(--t-sunken);height:10px}
.flow-bar i.in{background:var(--t-petrol)}
.flow-bar i.out{background:var(--t-burgundy)}
.flow-v{font:500 16px/1.2 var(--t-mono);color:var(--t-ink);font-variant-numeric:tabular-nums}
/* four habits: a square each, Øresund when it is fine, terracotta when it is not, an outline when unknown */
.habit{border-bottom-color:var(--t-line)}
.habit p,.steps li p{font:400 16.5px/1.45 var(--t-sans)}
.habit-mark{width:10px;height:10px;margin-top:7px}
.habit.ok .habit-mark{background:var(--t-petrol)}
.habit.no .habit-mark{background:var(--t-burgundy)}
.habit.na .habit-mark{background:none;border:0;box-shadow:inset 0 0 0 1.5px var(--t-ink-2)}
/* what to do next: numbered in ink, one button each */
.steps li{border-bottom-color:var(--t-line)}
.step-n{width:26px;height:26px;background:var(--t-ink);color:var(--t-cream);font:500 13px/1 var(--t-mono)}
/* how the money divides up: essentials slate, wants terracotta, put aside Øresund; the rule underneath, lighter */
.split-k,.split-legend dt{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
.split-bar{background:none}
.split-bar .need,.split-legend .sw.need{background:var(--rr-slate)}
.split-bar .want,.split-legend .sw.want{background:var(--rr-terracotta)}
.split-bar .save,.split-legend .sw.save{background:var(--rr-oresund)}
.split-row.guide .split-bar{opacity:.45}
.split-legend .sw{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:0}
.split-legend dt{display:flex;align-items:center}
.split-legend dd{font:500 16px/1.3 var(--t-mono);color:var(--t-ink);font-variant-numeric:tabular-nums}
/* the quick start: a field with its € beside it */
.eur-in span{font:500 15px var(--t-mono);color:var(--t-ink-2)}
.quick-cta{border:var(--rr-hair)}
/* table numbers and the small figures in lists in Plex Mono */
.table td.num,.bud-bar small,.li b{font-family:var(--t-mono);font-variant-numeric:tabular-nums}