/* Freya's household conversation: plain text only, including simulated preview. */
.fy-screen{width:100%;min-width:0;display:grid;gap:var(--space-5)}
.fy-history{display:grid;gap:var(--space-3);min-height:var(--space-7);max-height:50vh;overflow:auto}
.fy-message{background:var(--menu-bg);border-radius:var(--r-bar);padding:var(--space-4);overflow-wrap:anywhere}
.fy-message p{white-space:pre-wrap;margin:var(--space-2) 0 0}
.fy-form{display:grid;gap:var(--space-3)}
.fy-message small,.fy-link small,.fy-screen .eyebrow small{font-size:var(--text-label);color:var(--text-secondary)}
.fy-form textarea{width:100%;min-height:var(--space-7);resize:vertical}
.fy-list{display:grid;gap:var(--space-3)}
.fy-link{display:block;overflow-wrap:anywhere}
@media(max-width:768px){.fy-form .actions{display:flex;flex-wrap:wrap}}
/* ── the page layer ── */
/* ══ THE PLATFORM · page layer ════════════════════════════════════════════════════════
   Everything a colour, a size, a weight, a radius or a space is a var() from tokens.css.

   THE FRAME IS IN frame.css, beside this file (moved from the design repo on 28 Sep 2026):
   the main bar, the sub menu, the page bar, the phone's header and section keys, Freya's
   dock, panel and page, and their sizes. This file keeps only the screens.

   ── WAITING FOR THE BRAND SYSTEM ──────────────────────────────────────────────────────
   Nothing, today. A new value or part the brand does not own is named here first, in one
   block, so promoting it stays one move: into source.py or components.css, rebuild, run
   refresh.py, and delete it here. */
*{box-sizing:border-box}
[hidden]{display:none!important}
.work:focus{outline:none}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:var(--weight-reading) var(--text-reading)/var(--lh-reading) var(--font);
  -webkit-font-smoothing:antialiased}
button{font-family:var(--font)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:var(--key-icon-l);height:var(--key-icon-l);flex:none}
/* a card's or a tile's own icon, in its top-right corner: a line icon at its drawn size (29 Sep 2026) */
:root{--card-icon:24px;--list-mark:32px}   /* --list-mark: a row's progress mark, the week's leaves (29 Sep 2026) */
/* ICONS ARE BLACK OR WHITE (Rose, 29 Sep 2026: "do not make icons green — they should stay black"): every
   interface icon takes the heading colour — black on the light ground, white on the dark. Green stays
   only where the colour carries meaning: Learn's progress marks, the charts, the keys and links an
   icon is part of, and the marks' green hover. */
.ic-section{width:var(--key-icon-xl);height:var(--key-icon-xl);flex:none}

.screen{gap:var(--space-6)}
.eyebrow-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* desk header additions: the standard it is held to */
/* THE STANDARD A DESK IS HELD TO — one quiet line under the desk's head, the eyebrow and
   the words, no ground behind it (25 Sep 2026: the mockup's Mint Cream box was the one
   boxed thing in an otherwise open head; every desk now reads like Home) */
.held{display:flex;gap:var(--space-2) var(--space-3);align-items:baseline;flex-wrap:wrap;margin:0;
  font-size:var(--text-label);color:var(--text-secondary)}

/* a desk's Suggested view opens with its name and its status on one line */
.title-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* ── SUGGESTED VIEWS AND OVERVIEWS — a grid of cards (build spec §2, "Suggested views") ────
   A fixed first arrangement for now; Freya's ranking, "Shown because" and Edit view follow.
   Two columns on a wide screen, one on a phone; a .wide card takes the full row. */
.sg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start}
.sg > .wide,.sg > .opens-next,.sg > .opens-next-wrap{grid-column:1 / -1}
@media (max-width:900px){.sg{grid-template-columns:minmax(0,1fr)}}
.sg-card{gap:var(--space-4);padding:var(--space-5);min-width:0}
@media (max-width:640px){.sg-card{padding:var(--space-4)}}
.sg-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
/* A CARD'S LINK AT THE ACTION SIZE (Rose, 29 Sep 2026: "way too small"): 15px, a key's label, where it
   was the 13px small print — it reads as the thing to press, above the eyebrow beside it */
.sg-h .link{font-size:var(--key-label-m)}
.sg-note{font:var(--weight-label) var(--text-label)/1.4 var(--font);color:var(--text-secondary)}
.sg-card .record:last-child{border-bottom:0}
.sg-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-top:auto}
.sg-foot .link{font-size:var(--text-label)}
.sg-line{font-size:var(--text-reading)}
.sg-line b{font-weight:var(--weight-label)}
.sg-figure{font:var(--weight-heading) var(--text-title)/1.1 var(--font);letter-spacing:var(--track-heading);color:var(--heading);font-variant-numeric:tabular-nums lining-nums}
.sg-total{border-top:var(--line-heavy) solid var(--text);padding-top:var(--space-2)}
.sg-total dt,.sg-total dd{font-weight:var(--weight-heading);color:var(--text)}
.sg-goal{margin:0 0 var(--space-2)}
.sg-goal span:first-child{color:var(--text);font-weight:var(--weight-label)}
/* a card that needs the household: the screen's one flag, as on Home's Today */
.sg-needs{border-color:var(--warning)}
/* why each card is there. The "Suggested · arranged by Freya" line is gone (27 Sep 2026): the order
   is a fixed rule in arrange(), so saying Freya arranged it overclaimed. */
.sg-why{margin:0;padding-top:var(--space-3);border-top:1px solid var(--border);font-size:var(--text-label);line-height:1.4;color:var(--text-tertiary)}
.opens-next-wrap{display:flex;flex-direction:column;gap:var(--space-2);grid-column:1 / -1}
.opens-next-wrap .sg-why{border-top:0;padding-top:0}
/* a section's first step, on day one: one plain sentence and its key, not a set of empty cards */
.sg-first{border-color:var(--primary-48);background:var(--primary-6)}
.sg-first .sg-line{font-size:var(--text-subhead);line-height:var(--lh-subhead);color:var(--heading);max-width:44ch}
.sg-first .sg-foot{justify-content:flex-start}
button.sg-rec{width:100%;text-align:left;background:none;border-inline:0;border-top:0;font:inherit;color:inherit;cursor:pointer}
button.sg-rec:hover{background:var(--bg-sunken)}
/* Edit view: a row per card, with its pin and show switches */
.ev-row .record-title,.ev-row .record-sub{white-space:normal;overflow:visible;text-overflow:clip}
.ev-ctl{display:flex;align-items:center;gap:var(--space-4)}
@media (max-width:520px){.ev-row{flex-wrap:wrap;row-gap:var(--space-2)}.ev-row .record-main{flex-basis:100%}.ev-row .ev-ctl{gap:var(--space-5)}}
.ev-sw{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-label);color:var(--text-secondary)}
.sg-needs > .sg-h .status-label{align-self:flex-start}
/* the route to investing, one step ahead: the next node grey, nothing deeper */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}

/* ── THE FAMILY TREE (build spec R11) — by generation, relationships drawn, not listed ──────
   The nodes are cards on the page; the lines are one path under them, laid out by the page
   once the nodes have a size. A wide family scrolls sideways inside its card, never the page. */
.ft-card{gap:var(--space-5)}
.ftree{position:relative;display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-2) var(--space-1) var(--space-3);overflow-x:auto;overscroll-behavior-x:contain}
.ft-row{position:relative;z-index:1;display:flex;justify-content:center;gap:var(--space-5);min-width:max-content;margin-inline:auto}
.ft-node{display:flex;align-items:center;gap:var(--space-3);width:clamp(148px,17vw,224px);padding:var(--space-3);
  border:1px solid var(--border-strong);border-radius:var(--r-card);background:var(--bg-raised);color:var(--text);text-decoration:none;
  transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
a.ft-node:hover{border-color:var(--primary-48);background:var(--primary-6)}
a.ft-node:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ft-node[aria-current]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.ft-av{flex:none;display:grid;place-items:center;width:var(--key-height-m);height:var(--key-height-m);border-radius:50%;background:var(--bg-sunken);color:var(--text-secondary)}
.ft-av .ic{width:var(--key-icon-m);height:var(--key-icon-m)}
.ft-node.is-member .ft-av{background:var(--primary-12);color:var(--text-selected)}
.ft-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ft-t b{font-weight:var(--weight-label);line-height:1.25;overflow-wrap:anywhere}
.ft-t small{font-size:var(--text-label);line-height:1.3;color:var(--text-tertiary)}
.ft-marks{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1)}
.ft-lines{position:absolute;left:0;top:0;z-index:0;pointer-events:none}
.ft-lines path{fill:none;stroke:var(--border-strong);stroke-width:1}
/* the Succession card's small tree: first names, roles marked */
.ft-mini{gap:var(--space-5);padding-top:0}
.ft-mini .ft-row{gap:var(--space-3)}
.ft-mini .ft-node{width:auto;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border-radius:var(--r-chip)}
.ft-mini .ft-av{width:var(--space-6);height:var(--space-6)}
.ft-mini .ft-av .ic{width:var(--key-icon-s);height:var(--key-icon-s)}
@media (max-width:640px){
  .ftree{gap:var(--space-5)}
  .ft-row{gap:var(--space-3)}
  .ft-node{width:clamp(112px,40vw,160px);flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .ft-mini .ft-node{flex-direction:row;align-items:center}
}
/* a person's card: everywhere they are named, one column per desk */
.fn-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:1100px){.fn-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fn-cols{grid-template-columns:minmax(0,1fr)}}
.fn-col{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.fn-h{font-size:var(--text-label);font-weight:var(--weight-label);color:var(--text-secondary)}
.chips a.status-label{text-decoration:none}
.fn-col .status-label{white-space:normal;text-align:left;line-height:1.3;height:auto;padding-block:var(--space-1)}
.chips a.status-label:hover{background:var(--primary-12);color:var(--text-selected)}

/* ── Home (build spec Figures 1 and 14; redone 28 Sep 2026 — its styles are the HOME block at the foot) ── */
/* on a phone the header carries the title, so the page starts with Freya's summary */
@media (max-width:768px){
  .page-head [data-act="edit-view"]{display:none}
  .page-head-actions:not(:has(> :not([data-act="edit-view"]))){display:none}
  .screen.home > .page-head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* the first week's "Not now", beside its key */
.today-later{border:0;background:none;padding:0;cursor:pointer;font-size:var(--text-label)}
.status-label .ic{width:var(--key-icon-s);height:var(--key-icon-s)}
/* PICK UP WHERE YOU LEFT OFF — the pages opened last, one tap from Home */
.recent{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
@media (max-width:760px){.recent{grid-template-columns:minmax(0,1fr)}}
.recent-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--key-height-l);
  padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-raised);
  color:var(--text);text-decoration:none;font-weight:var(--weight-label);transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
.recent-item .ic{color:var(--heading);width:var(--key-icon-m);height:var(--key-icon-m);flex:none}
.recent-item:hover{border-color:var(--primary-48);background:var(--primary-6)}
.recent-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* THE TREEMAPS (What you own · Your investments) — the website's ledger card, in the product:
   a switch that glides, flat blocks with room around them, the name and a line under it, the
   value large, the share pinned bottom-right; one green in steps (darkest the largest), the ink
   on each the token that clears 4.5:1 on it. Blocks travel between views; with reduced motion
   they simply change. */
.tv-card{gap:var(--space-4);padding:var(--space-5)}
@media (max-width:640px){.tv-card{padding:var(--space-4);gap:var(--space-3)}}
.tv-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.tv-bar > .link{font-size:var(--text-label)}
.seg-wrap{max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px}
.seg-wrap::-webkit-scrollbar{display:none}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto;width:max-content;padding:var(--space-1);
  border-radius:var(--r-pill);background:var(--black)}
/* on the light ground a grey ring inside the black track doubled its edge and read as jagged (28 Sep 2026);
   only the dark ground, where black meets near-black, keeps a ring to separate it */
:root[data-mode-now="dark"] .seg{box-shadow:inset 0 0 0 1px var(--border-strong)}
/* the thumb sits under the chosen label, measured (labels differ in width) */
.seg-thumb{position:absolute;top:var(--space-1);bottom:var(--space-1);left:var(--x,var(--space-1));width:var(--w,0);
  border-radius:var(--r-pill);background:var(--white);transition:left calc(var(--t-move) * 1.5) var(--ease),width calc(var(--t-move) * 1.5) var(--ease)}
.seg button{position:relative;z-index:1;min-height:var(--key-height-s);padding:0 var(--space-4);border:0;border-radius:var(--r-pill);background:none;
  font:var(--weight-heading) var(--text-label)/1 var(--font);color:var(--primary-24);white-space:nowrap;cursor:pointer;transition:color var(--t-state) var(--ease)}
.seg button:hover{color:var(--white)}
.seg button[aria-pressed="true"],.seg button[aria-pressed="true"]:hover{color:var(--black)}
.seg button:focus-visible{outline:2px solid var(--primary-48);outline-offset:2px}
.seg-s{display:none}
@media (max-width:640px){.seg button{padding:0 var(--space-2)}.seg-l{display:none}.seg-s{display:inline}}
.tv-head{display:flex;align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;min-height:var(--key-height-s)}
.tv-path{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-1) var(--space-2);font-size:var(--text-label);color:var(--text-secondary);min-width:0}
.tv-path [aria-current]{color:var(--heading);font-weight:var(--weight-heading)}
.tv-path .link{font-size:var(--text-label);padding:0;border:0;background:none;cursor:pointer}
.tv-sum{color:var(--text-secondary);margin-left:var(--space-1)}
.tv-hint{font-size:var(--text-label);color:var(--text-tertiary);margin-left:auto}
.tv-back{flex:none}
.tv-back-ic{transform:rotate(-90deg)}
@media (max-width:640px){.tv-hint{display:none}.tv-back{margin-left:auto}}
.tv{--tv-gap:var(--space-3);--tv-t:calc(var(--t-move) * 2.2);position:relative;width:100%;aspect-ratio:16 / 8}
@media (max-width:1100px){.tv{aspect-ratio:4 / 3}}
@media (max-width:640px){.tv{--tv-gap:var(--space-2);aspect-ratio:4 / 5}}
.tv:not(.ready){visibility:hidden}
.tv-t{position:absolute;margin:0;border:0;padding:var(--space-4) var(--space-4) var(--space-3);border-radius:var(--r-card);
  background:var(--tv-c);color:var(--tv-ink);text-align:left;cursor:pointer;overflow:hidden;font:inherit;
  transition:left var(--tv-t) var(--ease),top var(--tv-t) var(--ease),width var(--tv-t) var(--ease),height var(--tv-t) var(--ease),
    opacity var(--t-move) var(--ease),background-color var(--tv-t) var(--ease),outline-color var(--t-state) var(--ease);
  outline:2px solid transparent;outline-offset:2px}
.tv-t:hover{outline-color:var(--primary-48)}
.tv-t:focus-visible{outline-color:var(--primary)}
.tv-in{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.tv-in.is-arriving{animation:tvIn var(--t-move) var(--ease) calc(var(--tv-t) * .55) both}
@keyframes tvIn{from{opacity:0}to{opacity:1}}
.tv-n{font:var(--weight-label) var(--text-reading)/1.3 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none}
.tv-s{font-size:var(--text-label);line-height:1.4;opacity:.84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.tv-v{margin-top:var(--space-3);font:var(--weight-label) var(--text-title)/1.1 var(--font);letter-spacing:var(--track-heading);white-space:nowrap;flex:none}
.tv-vs{display:none}
.tv-p{margin-top:auto;align-self:flex-end;padding-top:var(--space-2);font-size:var(--text-reading);line-height:1.2;white-space:nowrap;flex:none}
.tv-t.fs .tv-vf{display:none}
.tv-t.fs .tv-vs{display:inline}
.tv-t.f1 .tv-s{display:none}
.tv-t.fn .tv-n{font-size:var(--text-label)}
.tv-t.f2 .tv-v{font-size:var(--text-subhead);margin-top:var(--space-2)}
.tv-t.f3 .tv-p{display:none}
.tv-t.f4{padding:var(--space-3) var(--space-3) var(--space-2)}
.tv-t.f5 .tv-v{font-size:var(--text-label);margin-top:var(--space-1)}
.tv-t.xs .tv-in{visibility:hidden}
/* a block too small for its name is never blank: it shows how many it stands for — +1, or +2 for
   the tail block — and the line under the map names them (27 Sep 2026) */
.tv-x{display:none}
.tv-t.xs .tv-x{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:var(--weight-label) var(--text-label)/1 var(--font);color:var(--tv-ink)}
/* the tail block — "2 more" — names nothing on its own; each is in the line under the map */
.tv-t.tv-tail{cursor:default}
.tv-t.tv-tail:hover{outline-color:transparent}
.tv-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:0;font-size:var(--text-label);line-height:1.4;color:var(--text-secondary)}
.tv-more[hidden]{display:none}
.tv-more-h{font-weight:var(--weight-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--text-link)}
.tv-more-i{display:inline-flex;align-items:center;gap:var(--space-2);padding:0;border:0;background:none;font:inherit;color:var(--text-secondary);cursor:pointer;text-align:left;border-radius:var(--space-1)}
.tv-more-i i{width:var(--space-3);height:var(--space-3);border-radius:var(--space-1);flex:none}
.tv-more-i b{color:var(--text);font-weight:var(--weight-label)}
.tv-more-i:hover{color:var(--text-link)}
.tv-more-i:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.tv-foot{margin:0;font-size:var(--text-label);line-height:1.5;color:var(--text-secondary)}
/* WHAT YOU OWE — its own treemap, to the scale of the map above, then owned − owed = net */
.tv-owe-wrap{display:flex;flex-direction:column;gap:var(--space-3);border-top:1px solid var(--border);padding-top:var(--space-4)}
.tv.tv-owe{--tv-owe-min:96px;aspect-ratio:auto;height:var(--tv-owe-min)}
@media (max-width:640px){.tv.tv-owe{--tv-owe-min:88px}}
.lg-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.lg-count{font-size:var(--text-label);color:var(--text-secondary)}
.lg-none{margin:0;padding:var(--space-3) 0;color:var(--text-secondary)}
.lg-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);width:100%;padding:var(--space-3) var(--space-1);
  border:0;border-bottom:1px solid var(--border);background:none;font:inherit;color:inherit;text-align:left}
.lg-lab{display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-lab b{font-weight:var(--weight-label)}
.lg-lab small{font-size:var(--text-label);color:var(--text-secondary)}
.lg-row.is-net{border-bottom:var(--line-heavy) double var(--border-strong);padding-top:var(--space-4)}
.lg-net{font:var(--weight-heading) var(--text-heading)/1 var(--font);letter-spacing:var(--track-heading);color:var(--heading);white-space:nowrap}
.lg-note{margin:var(--space-3) 0 0}
.lg-note .link{font-size:inherit;padding:0;border:0;background:none;cursor:pointer}
@media (max-width:640px){.lg-row{gap:var(--space-3)}.lg-net{font-size:var(--text-title)}}

.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.section-h h2{font:var(--weight-heading) var(--text-subhead)/var(--lh-subhead) var(--font);color:var(--heading)}
.section-h .link{font-size:var(--text-label)}
.block{display:flex;flex-direction:column;gap:var(--space-4)}

/* ── the statement: rows with a margin ─────────────────────────────────────────────── */
.statement{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0 var(--space-6)}
@media (max-width:900px){.statement{grid-template-columns:minmax(0,1fr)}}
.st-group{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin-top:var(--space-5)}
.st-group:first-child{margin-top:0}
.st-gh{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;border-bottom:1px solid var(--border-strong);
  padding-bottom:var(--space-2)}
.st-gh span{font:var(--weight-heading) var(--text-label)/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-link)}
.st-row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;
  border-bottom:1px solid var(--border);text-align:left;background:none;border-inline:0;border-top:0;
  padding:0;font:inherit;color:inherit;transition:background-color var(--t-state) var(--ease)}
.st-row:hover{background:var(--bg-sunken)}
button.st-main{border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
button.st-main:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.st-doc{color:var(--text-link);font-weight:var(--weight-label);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.st-doc:hover{text-decoration-thickness:2px}
.st-main{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-2);min-width:0}
.st-name{min-width:0}
.st-name b{display:block;font-weight:var(--weight-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-name small{display:block;font-size:var(--text-label);color:var(--text-tertiary)}
/* on a phone the name wraps instead of losing its end (phone pass, 29 Sep 2026) */
@media (max-width:560px){.st-name b{white-space:normal}}
.st-amt{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;text-align:right}
.st-margin{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-2) var(--space-2);
  font-size:var(--text-label);color:var(--text-tertiary)}
@media (max-width:900px){.st-margin{padding-top:0;padding-bottom:var(--space-3)}}
/* a line's source is a line of help text; only a stale value earns a label (the kit's
   attention status label) */
.st-src{line-height:1.4}
.st-total{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;border-top:var(--line-heavy) solid var(--text);margin-top:var(--space-4)}
.st-total .st-main{padding-block:var(--space-4)}
.st-total b{font-weight:var(--weight-heading);font-size:var(--text-subhead)}

/* ── bands: actual against the household's own range ───────────────────────────────── */
.bands{display:flex;flex-direction:column;gap:var(--space-5)}
.band-row{display:grid;grid-template-columns:170px minmax(0,1fr) 110px;align-items:center;gap:var(--space-4)}
/* on a phone the value column takes at most 40%: past that its range and label stack, so the name
   keeps room for itself and its "i" (phone pass, 29 Sep 2026: "Listed / shares" broke in two).
   The same cap holds in a narrow scene (.sc-vis, below). */
@media (max-width:640px){.band-row{grid-template-columns:minmax(0,1fr) fit-content(40%)}.band-track{grid-column:1 / -1;order:3}}
.band-name{font-weight:var(--weight-label)}
.band-name small{display:block;font-size:var(--text-label);color:var(--text-tertiary);font-weight:var(--weight-reading)}
.band-track{position:relative;height:28px;border-radius:var(--r-chip);background:var(--bg-sunken)}
.band-range{position:absolute;top:0;bottom:0;background:var(--primary-24);border-radius:var(--r-chip)}
.band-target{position:absolute;top:4px;bottom:4px;width:2px;background:var(--primary-72)}
.band-actual{position:absolute;top:-4px;bottom:-4px;width:4px;border-radius:2px;background:var(--primary-pressed);transform:translateX(-2px)}
.band-actual.out{background:var(--gold)}
.band-val{text-align:right;font-variant-numeric:tabular-nums}
.band-val b{display:block;font-weight:var(--weight-heading)}
.band-val small{font-size:var(--text-label);color:var(--text-tertiary)}
.band-val.out b{color:var(--heading)}
.band-val .status-label{margin-top:var(--space-1);margin-left:var(--space-2)}
.band-halo{position:absolute;top:-4px;bottom:-4px;width:4px;border-radius:2px;background:var(--gold);transform:translateX(-2px);pointer-events:none;animation:band-halo 2.6s ease-in-out infinite}
@keyframes band-halo{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.band-halo{animation:none}}
.band-axis{display:grid;grid-template-columns:170px minmax(0,1fr) 110px;gap:var(--space-4);font-size:var(--text-label);color:var(--text-tertiary)}
.band-axis div{display:flex;justify-content:space-between}
@media (max-width:640px){.band-axis{display:none}}
.band-key{display:flex;gap:var(--space-2) var(--space-5);flex-wrap:wrap;font-size:var(--text-label);color:var(--text-secondary)}
.band-key i{display:inline-block;width:18px;height:10px;border-radius:var(--space-1);margin-right:var(--space-2);vertical-align:0}
.band-key i.k-range{background:var(--primary-24)}
.band-key i.k-target{width:3px;background:var(--primary-72)}
.band-key i.k-now{width:4px;background:var(--primary-pressed)}
.band-key i.k-out{width:4px;background:var(--gold)}
/* on the dark ground today's mark is the heading ink, or it sinks into the track */
:root[data-mode-now="dark"] .band-actual:not(.out),:root[data-mode-now="dark"] .band-key i.k-now{background:var(--heading)}

/* ── the sheet: detail and forms, over the work ────────────────────────────────────── */
/* .scrim and .sheet (head, body) are the brand's: components.css, REV 54. Only the app's content for it is here. */

.hist{width:100%;border-collapse:collapse;font-size:var(--text-label)}
.hist th{text-align:left;color:var(--text-secondary);font-weight:var(--weight-label);padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:1px solid var(--border-strong)}
.hist td{padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:1px solid var(--border);vertical-align:top}
.hist td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hist tr.current td{color:var(--text);font-weight:var(--weight-label)}
.hist tr.old td{color:var(--text-tertiary)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4)}
.form-grid .span{grid-column:1 / -1}
@media (max-width:520px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}

/* the vault's foot: storage, and Freya's reading allowance */
.vault-foot{display:flex;flex-direction:column;gap:0}
.vault-file-actions{justify-content:flex-start;flex-wrap:wrap}
.vault-operation{position:fixed;z-index:10000;right:var(--space-4);bottom:var(--space-4);max-width:min(28rem,calc(100vw - 2 * var(--space-4)));padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-raised);color:var(--text);box-shadow:0 8px 24px color-mix(in srgb,var(--text) 15%,transparent);font-size:var(--text-label);pointer-events:none}
.vault-operation[hidden]{display:none}
.sheet.on ~ .vault-operation{display:none}
.vault-operation[data-state="error"]{border-color:var(--text-error);color:var(--text-error)}
.data-table td .status-label + .cell-sub{margin-top:var(--space-1)}
/* a date in a table keeps to one line */
.data-table .nw{white-space:nowrap}
/* a hidden input in a cell (the schedule uploads on Cover) is held by its own cell. Left to the
   page it is placed at the table's full width, outside the table's scroller, and the whole page
   scrolls sideways at tablet widths. */
.data-table td:has(.sr){position:relative}

/* ── notes, boundaries, coming next ────────────────────────────────────────────────── */
/* .note, .boundary (with its dark ground, ul and li) and .next-list / .next-item are the brand's:
   components.css, REV 54. What stays here is where the app differs. */
/* A PAGE THAT IS COMING (4 Oct 2026: Fees, Advisers): what it will do, in a few words, and nothing to act on */
.coming-page{display:flex;flex-direction:column;gap:var(--space-2);max-width:62ch;padding:var(--space-6);border-style:dashed}
.coming-page .coming-t{margin:0;font:var(--weight-label) var(--text-subhead)/1.4 var(--font);color:var(--heading);text-wrap:pretty}
.coming-page .help{margin:0}
@media (max-width:560px){.coming-page{padding:var(--space-5)}}
.boundary h3{font:var(--weight-heading) var(--text-subhead)/var(--lh-subhead) var(--font);color:var(--heading);margin-bottom:var(--space-2)}
.draft-tag{display:inline-block;font:var(--weight-heading) var(--text-label)/1 var(--font);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-secondary);background:var(--bg-sunken);border-radius:var(--r-chip);
  padding:var(--space-1) var(--space-2);margin-left:var(--space-2);vertical-align:2px}
/* on a phone the tag takes its own line under the heading, flush with it, and its two lines breathe */
@media (max-width:560px){.draft-tag{display:table;margin:var(--space-2) 0 0;line-height:1.3}}
/* A BRIEFING ON A PHONE IS ONE CARD, NOT TWO (phone pass, 29 Sep 2026): the numbered list is Freya's
   hairline card (frame.css), and inside a page's panel on a phone that second edge and its padding
   left the words a narrow column. There it drops its own card and uses the panel's. */
@media (max-width:560px){.panel > .fy-card{padding:0;border:0;background:none}}
.opens-next{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;border:1px solid var(--border-strong);
  border-radius:var(--r-card);padding:var(--space-4) var(--space-5)}
.opens-next .on-t{flex:1;min-width:220px}
.opens-next .on-t small{display:block;font:var(--weight-heading) var(--text-label)/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-link)}
.opens-next .on-t b{font-weight:var(--weight-label)}
.opens-next .on-t span{display:block;font-size:var(--text-label);color:var(--text-secondary)}

.meter{height:8px;border-radius:var(--space-1);background:var(--bg-sunken);overflow:hidden}
.meter i{display:block;height:100%;background:var(--primary)}
.progress-line{display:flex;justify-content:space-between;font-size:var(--text-label);color:var(--text-secondary);margin-top:var(--space-2)}

/* ── LEARN · THE MAP GROWS (29 Sep 2026) ────────────────────────────────────────────────────
   Built from the sandbox of 28 Sep (Finna_Learn_Map_Grows_Sandbox_Sep2026.html), drawn only from
   the brand's tokens. One family of marks for the Map, a path, a quest, the overview and the desks:
     the tree   the Map: The First Picture is the trunk, each desk a branch, read top to bottom
     a leaf     one quest answered, texture on the branch, never a thing to open
     a bud      the next path, dashed: one step ahead, and nothing deeper is drawn
     the rings  rank as growth rings: a ring closes, the next one starts outside it
     the seal   a certificate: the mark's own core inside a ring, the core in Bullion once earned
     the tag    a leaf in outline beside a topic, until its quest is answered
   The local names below are this layer's only new values; each maps onto a token. The legibility
   layer the sandbox tried (L-7, raising three text colours to 7:1) is not taken: that is Rose's
   ruling, and it belongs in the tokens if it is made. */
:root{
  --lm-trunk:var(--primary-pressed); --lm-done:var(--primary); --lm-open:var(--primary-72); --lm-ahead:var(--text-secondary);
  --lm-leaf:var(--primary); --lm-leaf-old:var(--primary-72); --lm-ring:var(--primary); --lm-track:var(--border-strong);
  --lm-seal-ring:var(--heading); --lm-canopy:var(--primary-12);
}
:root[data-mode-now="dark"]{--lm-trunk:var(--primary-48);--lm-done:var(--primary-48);--lm-leaf:var(--primary-48);--lm-ring:var(--primary-48)}

/* ── the marks ─────────────────────────────────────────────────────────────────────────── */
.lmk{width:var(--space-5);height:var(--space-5);flex:none;overflow:visible;display:block}
.lmk.is-big{width:var(--key-height-m);height:var(--key-height-m)}
.lmk.is-huge{width:80px;height:80px}
.lmk .b{fill:var(--bg-raised);stroke:var(--lm-done);stroke-width:1.6}
.lmk.is-progress .b{stroke:var(--lm-track);stroke-width:2.6}
.lmk .arc{fill:none;stroke:var(--lm-done);stroke-width:2.6;stroke-linecap:round}
.lmk.is-done .b{fill:var(--lm-done);stroke:var(--lm-done)}
.lmk .tick{fill:none;stroke:var(--bg-raised);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lmk.is-next .b{fill:none;stroke:var(--lm-ahead);stroke-width:1.4;stroke-dasharray:4.5 4}
.lmk .core{fill:none;stroke:var(--lm-done);stroke-width:1.3;stroke-linejoin:round}
.lmk.is-next .core{stroke:var(--lm-ahead);stroke-dasharray:2 2.2}
/* the seal, earned: the mark's black (white on the dark ground) round the core in Bullion */
.lmk.is-cert.is-done .b{fill:var(--bg-raised);stroke:var(--lm-seal-ring);stroke-width:1.6}
.lmk.is-cert.is-done .core{fill:var(--gold);stroke:var(--gold)}

/* ── the tree ──────────────────────────────────────────────────────────────────────────── */
.lm-screen{container-type:inline-size}
.lm-tabs{display:flex;gap:var(--space-2);align-items:center;overflow-x:auto;scrollbar-width:none;padding:2px 2px var(--space-2);margin:-2px -2px 0;overscroll-behavior-x:contain}
.lm-tabs::-webkit-scrollbar{display:none}
.lm-tabs > *{flex:none}
.lm-tab .ic-section{width:var(--key-icon-m);height:var(--key-icon-m)}
.lm-mapgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:var(--space-5);align-items:start}
@container (max-width:900px){.lm-mapgrid{grid-template-columns:minmax(0,1fr)}}
.lm-map{position:relative;min-width:0;background:var(--chart-bg);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--space-6) var(--space-5) var(--space-5);overflow:hidden}
.lm-canvas{position:relative;width:100%;min-height:240px;transition:height calc(var(--t-move) * 3) var(--ease)}
.lm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lm-stem{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lm-stem.s-trunk{stroke:var(--lm-trunk);stroke-width:3}
.lm-stem.s-done{stroke:var(--lm-done);stroke-width:2}
.lm-stem.s-next{stroke:var(--lm-ahead);stroke-width:1.5;stroke-dasharray:4 5}
.lm-stem.is-growing{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:lm-grow 900ms var(--ease) forwards}
.lm-stem.s-next.is-growing{stroke-dasharray:4 5;stroke-dashoffset:0;animation:lm-fade 500ms var(--ease) 700ms both}
@keyframes lm-grow{to{stroke-dashoffset:0}}
@keyframes lm-fade{from{opacity:0}to{opacity:1}}
.lm-leaf{fill:var(--lm-leaf)}
/* THE TUTORIAL LEADS (4 Oct 2026, Christian: two keys at once "is confusing … so that the user stays focused on the
   tutorial"): while its card is on screen (`data-tq-lead` on the root, set by freya-tutorial.js), Learn's own next-step
   keys (Start quest, Next quest, See the badge, Continue quest, See the branch grow) step out of the way, so the card's
   key is the only one to press. Answering stays on the page (Check my answer). They come back when it is paused or done.
   The other way round once a quest the tutorial set is answered: the page's own key carries the tutorial on (lmAfter,
   FT.afterKey, 'tq-next') and the card steps aside while it is there (Christian: "not show the tutorial bar with the CTA
   as long as there is a CTA relating to the tutorial on the screen"). */
:root[data-tq-lead] #view[data-zone="learn"] .key:not(.key-secondary):not(.key-quiet):not([data-act="check-answer"]){display:none}
.lm-leaf.is-old{fill:var(--lm-leaf-old)}
.lm-leaf.is-new{transform-box:fill-box;transform-origin:0% 50%;animation:lm-sprout 620ms var(--ease) both}
@keyframes lm-sprout{from{transform:scale(0);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
/* the latest step, in the tutorial (4 Oct 2026): its leaf sprouts slowly once the Map is drawn, then a ring breathes out of it
   three times; a path it finished has its mark draw itself, ringed the same way. Learn's green, as every leaf */
.lm-leaf.is-latest{transform-box:fill-box;transform-origin:0% 50%;animation:lm-sprout 1500ms var(--ease) 700ms both}
.lm-halo{fill:none;stroke:var(--lm-leaf);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:lm-halo 1800ms var(--ease) 2000ms 3}
@keyframes lm-halo{0%{opacity:.85;transform:scale(.5)}100%{opacity:0;transform:scale(2.4)}}
.lm-node.is-latest::after{content:"";position:absolute;left:var(--space-1);top:calc(50% - 12px);width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 1.5px var(--lm-done);opacity:0;pointer-events:none;animation:lm-ring 1800ms var(--ease) 1700ms 3}
@keyframes lm-ring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.lm-node.is-latest .lmk.is-draw .tick{stroke-dasharray:20;stroke-dashoffset:20;animation:lm-grow 900ms var(--ease) 900ms forwards}
.lm-node.is-latest .lmk.is-draw .b{transform-box:fill-box;transform-origin:center;animation:lm-pop 900ms var(--ease) 500ms both}
.lm-canopy.is-new{animation:lm-fade 2.4s var(--ease) both}
.lm-node{position:absolute;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);margin:calc(-1 * var(--space-1));
  border:0;border-radius:var(--r-chip);background:none;text-align:left;color:var(--text);cursor:pointer;font:inherit;min-height:32px;transition:background-color var(--t-state) var(--ease)}
.lm-node b{font:var(--weight-label) var(--text-reading)/1.3 var(--font);color:var(--heading)}
.lm-node.is-next b{font-weight:var(--weight-reading);color:var(--text-secondary)}
.lm-node.is-done b{font-weight:var(--weight-reading);color:var(--text)}
.lm-node:hover{background:color-mix(in srgb,var(--primary-12) 70%,transparent)}
.lm-node[aria-pressed="true"]{background:var(--bg-selected)}
.lm-node[aria-pressed="true"] b{color:var(--text-selected);font-weight:var(--weight-heading)}
.lm-node:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
.lm-node.is-arriving{animation:lm-arrive 560ms var(--ease) 650ms both}
@keyframes lm-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lm-node.is-changed .lmk{animation:lm-pop 700ms var(--ease) 200ms both}
@keyframes lm-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.lm-zone{position:absolute;transform:translateY(-100%);font:var(--weight-heading) var(--text-label)/1.25 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-link)}
.lm-zone.is-arriving{animation:lm-fade 560ms var(--ease) 650ms both}
.lm-key{list-style:none;margin:var(--space-4) 0 0;padding:var(--space-4) 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-label);color:var(--text-secondary)}
.lm-key li{display:inline-flex;align-items:center;gap:var(--space-2)}
.lm-key .lmk{width:var(--key-icon-m);height:var(--key-icon-m)}
.lm-key-leaf{width:14px;height:10px;overflow:visible}
@container (max-width:560px){
  .lm-map{padding:var(--space-5) var(--space-3) var(--space-4)}
  .lm-node{gap:var(--space-2);padding-right:var(--space-2)}
  .lm-node b{font-size:var(--text-label);line-height:1.3}
  .lm-zone{letter-spacing:.08em}
}
/* the card beside the map, and under it on a tablet and a phone */
.lm-card{position:sticky;top:var(--space-5);gap:var(--space-4);padding:var(--space-6)}
@container (max-width:900px){.lm-card{position:static}}
.lm-card-t{font:var(--weight-heading) var(--text-title)/1.15 var(--font);letter-spacing:var(--track-heading);color:var(--heading);margin:0}
.lm-card-b{font-size:var(--text-reading);line-height:1.5;margin:0}
.lm-card-l{font-size:var(--text-label);color:var(--text);margin:0}
.lm-card-f{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:0}
.lm-card-f div{padding:var(--space-3) var(--space-4);border-radius:var(--r-chip);background:var(--bg-sunken)}
.lm-card-f dt{font-size:var(--text-label);color:var(--text-secondary)}
.lm-card-f dd{margin:0;font:var(--weight-heading) var(--text-reading)/1.3 var(--font);color:var(--heading)}
.lm-card-k{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.lm-test-band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);flex-wrap:wrap;margin:0;padding:var(--space-3) var(--space-4);
  border-radius:var(--r-card);border:1px solid var(--gold);background:color-mix(in srgb,var(--gold-light) 18%,var(--bg-raised));font-size:var(--text-label);color:var(--text)}
.lm-test-band b{font-weight:var(--weight-heading)}

/* ── the rings and the week ────────────────────────────────────────────────────────────── */
.lm-rings{display:block;flex:none;overflow:visible}
.lm-rings .closed{fill:none;stroke:var(--lm-ring);stroke-width:1.5}
.lm-rings .closed.is-new{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:lm-grow 900ms var(--ease) forwards}
.lm-rings .track{fill:none;stroke:var(--lm-track);stroke-width:3}
.lm-rings .arc{fill:none;stroke:var(--lm-ring);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 900ms var(--ease)}
.lm-rings .pith{fill:var(--heading)}
/* THE WEEK'S LEAVES ARE LARGER (Rose, 29 Sep 2026: "way too small"): 32px, where they were 22 */
.lm-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(var(--list-mark),1fr));gap:var(--space-1);max-width:320px}
.lm-week li{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);font-size:var(--text-label);color:var(--text-secondary)}
.lm-week svg{width:var(--list-mark);height:var(--list-mark);overflow:visible}
.lm-week .d-yes{fill:var(--lm-leaf);stroke:var(--lm-leaf);stroke-width:1}
.lm-week .d-no{fill:none;stroke:var(--lm-ahead);stroke-width:1.2}
.lm-week .d-ahead{fill:none;stroke:var(--lm-ahead);stroke-width:1.2;stroke-dasharray:1.6 2.4}
.lm-week li.is-today{color:var(--heading);font-weight:var(--weight-heading)}
.lm-week .d-yes.is-new{transform-box:fill-box;transform-origin:50% 100%;animation:lm-sprout 620ms var(--ease) both}
.lm-head-st{display:flex;align-items:center;gap:var(--space-3)}
.lm-head-st p{margin:0}
.lm-head-st .t{font:var(--weight-heading) var(--text-reading)/1.25 var(--font);color:var(--heading)}
.lm-head-st .l{font-size:var(--text-label);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.lm-head-st .l b{font-weight:var(--weight-label);color:var(--text)}

/* ── the overview ──────────────────────────────────────────────────────────────────────── */
.lm-stand{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-6);align-items:center;flex-direction:row;padding:var(--space-6)}
.lm-rank{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.lm-rank small{font:var(--weight-heading) var(--text-label)/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-link)}
.lm-rank .t{font:var(--weight-heading) var(--text-title)/1.1 var(--font);letter-spacing:var(--track-heading);color:var(--heading)}
.lm-rank .xp{margin:0;font-size:var(--text-reading);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.lm-rank .xp b{color:var(--text);font-weight:var(--weight-label)}
.lm-rank .help{margin:0}
.lm-wk{display:flex;flex-direction:column;gap:var(--space-2)}
.lm-wk p{margin:0;font-size:var(--text-label);color:var(--text-secondary);max-width:30ch}
@container (max-width:760px){.lm-stand{grid-template-columns:auto minmax(0,1fr)}.lm-wk{grid-column:1 / -1}}
@container (max-width:520px){.lm-stand{grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding:var(--space-5)}.lm-stand .lm-rings{width:88px;height:88px}.lm-wk p{max-width:none}}
/* six tips, the five desks and the Financial Identity: six across, else three by two, else two by three */
.lm-tips-w{container-type:inline-size}
.lm-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@container (min-width:460px){.lm-tips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:800px){.lm-tips{grid-template-columns:repeat(6,minmax(0,1fr))}}
.lm-tip{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;padding:var(--space-4);border-radius:var(--r-card);background:var(--chart-bg);border:1px solid var(--border);
  color:var(--text);text-decoration:none;transition:border-color var(--t-state) var(--ease)}
.lm-tip:hover{border-color:var(--primary-48)}
.lm-tip:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
.lm-tip-h{display:flex;align-items:center;gap:var(--space-2);font:var(--weight-label) var(--text-label)/1.2 var(--font);color:var(--text-secondary)}
.lm-tip-h .ic-section{width:var(--key-icon-m);height:var(--key-icon-m);color:var(--heading)}
.lm-tip-stem{display:flex;flex-direction:column;padding-left:2px}
.lm-tip-row{position:relative;display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-1) 0}
.lm-tip-row .lmk{position:relative;z-index:1;width:18px;height:18px}
.lm-tip-row b{font:var(--weight-label) var(--text-label)/1.35 var(--font);color:var(--text)}
.lm-tip-row.is-next b{color:var(--text-secondary);font-weight:var(--weight-reading)}
.lm-tip-row + .lm-tip-row::before{content:'';position:absolute;left:8.25px;top:-7px;height:14px;border-left:1.5px solid var(--lm-open)}
.lm-tip-row + .lm-tip-row.is-next::before{border-left:1.5px dashed var(--lm-ahead)}
.lm-route{max-width:26rem}
.lm-why{display:flex;gap:var(--space-2);align-items:flex-start;margin:0;font-size:var(--text-label);color:var(--text-secondary)}
.lm-why .ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--heading)}
.lm-why .link{font-size:inherit}
.lm-earned{display:flex;gap:var(--space-4);flex-wrap:wrap}
.lm-earned-i{display:flex;align-items:center;gap:var(--space-3);min-width:0;color:var(--text);text-decoration:none;border-radius:var(--r-chip)}
.lm-earned-i b{display:block;font-weight:var(--weight-label);font-size:var(--text-reading)}
.lm-earned-i > span > span{display:block;font-size:var(--text-label);color:var(--text-secondary)}
.lm-earned-i:hover b{color:var(--text-link)}
.lm-earned-i:focus-visible{outline:2px solid var(--heading);outline-offset:3px}
.lm-switch{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lm-switch .record-sub{white-space:normal;overflow:visible;text-overflow:clip}

/* ── in progress, earned, a path ───────────────────────────────────────────────────────── */
.lp-items{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.lp-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--border)}
/* A ROW'S PROGRESS MARK IS LARGER (Rose, 29 Sep 2026: "way too small"): 32px, where it was 24 — the
   ring, the crest and the path marks all read at a glance beside a row's title. */
.lp-item > :is(.lmk,.id-crest){width:var(--list-mark);height:var(--list-mark);flex:none}
.lp-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.lp-item-main .meter{max-width:24rem;margin-top:var(--space-1)}
.lp-item-t{font-weight:var(--weight-label);color:var(--text);text-decoration:none}
.lp-item-t:hover{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
.lp-item-sub{font-size:var(--text-label);color:var(--text-secondary)}
@media (max-width:520px){.lp-item{flex-wrap:wrap;align-items:flex-start;row-gap:var(--space-3)}.lp-item-main{flex:1 1 calc(100% - var(--list-mark) - var(--space-4))}.lp-item > .key{margin-left:calc(var(--list-mark) + var(--space-4))}}
.medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:var(--space-3)}
.medal{flex-direction:row;align-items:flex-start;gap:var(--space-4);padding:var(--space-5);text-decoration:none;color:var(--text)}
.medal.is-cert{border-color:var(--gold)}
.medal:hover{border-color:var(--primary-48)}
.medal:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.medal-t{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.medal-t b{font:var(--weight-heading) var(--text-reading)/1.3 var(--font);color:var(--heading)}
.medal-t > span:last-child{font-size:var(--text-label);color:var(--text-secondary)}
.eyebrow-row .link{font-size:var(--text-label)}
.lp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin:0}
.lp-facts > div{padding:var(--space-4);border-radius:var(--r-card);background:var(--bg-sunken);display:flex;flex-direction:column;gap:var(--space-1)}
.lp-facts dt{font-size:var(--text-label);color:var(--text-secondary)}
.lp-facts dd{margin:0;font:var(--weight-heading) var(--text-subhead)/1.2 var(--font);color:var(--heading)}
@media (max-width:760px){.lp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qtrack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.qt{position:relative;display:flex;gap:var(--space-4);align-items:flex-start;padding-bottom:var(--space-3)}
.qt:not(:last-child):not(.qt-stage)::after{content:'';position:absolute;left:calc(var(--space-5) / 2);top:calc(var(--space-5) + var(--space-1));bottom:var(--space-1);border-left:1.5px solid var(--border-strong)}
.qt.is-done:not(:last-child)::after{border-left-color:var(--primary-48)}
.qt-t{display:flex;min-width:0;text-decoration:none;color:var(--text);border-radius:var(--r-chip)}
.qt-t-in{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.qt-n{font-size:var(--text-label);color:var(--text-link);font-weight:var(--weight-label)}
.qt-q{font-weight:var(--weight-label);max-width:52ch}
.qt.is-open .qt-q{color:var(--text-secondary);font-weight:var(--weight-reading)}
.qt.qt-end .qt-n{color:var(--text-secondary);font-weight:var(--weight-reading)}
a.qt-t:hover .qt-q{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
a.qt-t:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.qt-stage{list-style:none;padding:var(--space-4) 0 var(--space-3)}
.qt-stage:first-child{padding-top:0}
.qt-stage .eyebrow{color:var(--text-link)}
.lm-track-p{padding:var(--space-5) var(--space-6)}
@media (max-width:640px){.lm-track-p{padding:var(--space-4)}}
.lp-ends{flex-direction:row;align-items:flex-start;gap:var(--space-4);padding:var(--space-5)}
.lp-ends.is-cert{border-color:var(--gold)}
.lp-ends .sg-line b{font-weight:var(--weight-label)}
.opens-next > .lmk{width:28px;height:28px}

/* ── a quest ───────────────────────────────────────────────────────────────────────────── */
.lm-qwrap{display:grid;grid-template-columns:minmax(0,42rem) 188px;gap:var(--space-7);align-items:start}
@container (max-width:900px){.lm-qwrap{grid-template-columns:minmax(0,1fr)}.lm-side{display:none}}
.lm-side{position:sticky;top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:var(--r-card);background:var(--chart-bg);border:1px solid var(--border)}
.lm-side .eyebrow{color:var(--text-link)}
.lm-side svg{display:block;width:100%;height:auto;overflow:visible}
.lm-side p{margin:0;font-size:var(--text-label);color:var(--text-secondary)}
.quest{max-width:42rem;display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.quest-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);flex-wrap:wrap}
.quest-top .link{font-size:var(--text-label)}
.lm-qwhere{font-size:var(--text-label);color:var(--text-secondary)}
.lm-qwhere b{font-weight:var(--weight-label);color:var(--text)}
.lm-qright{display:flex;align-items:center;gap:var(--space-4)}
.lm-xp{display:inline-flex;align-items:baseline;font:var(--weight-label) var(--text-label)/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;
  padding:var(--space-2) var(--space-3);border-radius:var(--r-pill,999px);background:var(--bg-sunken)}
.lm-xp.is-bump{animation:lm-pop 600ms var(--ease)}
.lm-fly{position:fixed;z-index:70;pointer-events:none;font:var(--weight-heading) var(--text-subhead)/1 var(--font);color:var(--text-link);transition:transform 900ms var(--ease),opacity 900ms var(--ease)}
.quest-chrome{display:flex;gap:var(--space-1)}
.quest-chrome i{flex:1;height:4px;border-radius:2px;background:var(--border)}
.quest-chrome i.done{background:var(--primary)}
.quest-chrome i.now{background:var(--primary-48)}
.quest-chrome.is-test i.done{background:var(--heading)}
.quest-chrome.is-test i.now{background:var(--gold)}
.quest-chip{align-self:flex-start;margin-top:var(--space-2)}
/* the question one rung down (Christian, 4 Oct 2026: four lines at the title's size pushed the answer's keys under
   Freya's bar): the subhead in the heading's weight still leads the answers, and a line holds more of it */
.quest-q{font:var(--weight-heading) var(--text-subhead)/1.3 var(--font);letter-spacing:var(--track-heading);color:var(--heading);max-width:44ch;margin:0;text-wrap:pretty}
.quest .help{margin:calc(-1 * var(--space-2)) 0 var(--space-1)}
.answers{display:flex;flex-direction:column;gap:var(--space-3)}
.answer{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;min-height:var(--key-height-xl);
  padding:var(--space-3) var(--space-4);border:1px solid var(--border-strong);border-radius:var(--r-card);background:var(--bg-raised);
  font:var(--weight-label) var(--text-reading)/1.35 var(--font);color:var(--text);cursor:pointer;
  transition:background-color var(--t-state) var(--ease),border-color var(--t-state) var(--ease)}
.answer:hover{background:var(--bg-sunken)}
.answer:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.answer .letter{width:28px;height:28px;border-radius:var(--r-chip);display:grid;place-items:center;flex:none;background:var(--bg-sunken);font-size:var(--text-label)}
.answer[aria-pressed="true"]{border-color:var(--primary);background:var(--bg-selected);box-shadow:inset 0 0 0 1px var(--primary)}
.answer[aria-pressed="true"] .letter{background:var(--primary);color:var(--white)}
.answer.correct{border-color:var(--primary);background:var(--primary-12);box-shadow:inset 0 0 0 1px var(--primary)}
.answer.correct .letter{background:var(--primary);color:var(--white)}
/* a wrong answer costs nothing: set aside in the attention tint (Bullion), never the error red */
.answer.wrong{border-color:var(--gold);background:color-mix(in srgb,var(--gold-light) 22%,var(--bg-raised));box-shadow:none;color:var(--text-secondary)}
.answer.wrong .letter{background:var(--gold-light);color:var(--black)}
.answer[disabled]{cursor:default}
.answer[disabled]:hover{background:inherit}
.answer.wrong[disabled]:hover{background:color-mix(in srgb,var(--gold-light) 22%,var(--bg-raised))}
.quest-foot{display:flex}
.quest-foot[hidden]{display:none}
@media (max-width:640px){.quest-foot .key{flex:1;justify-content:center}}
.feedback{border-radius:var(--r-card);padding:var(--space-4) var(--space-5);font-size:var(--text-reading);line-height:1.55}
.feedback.ok{background:var(--primary-12);color:var(--text-selected)}
.feedback.try{background:color-mix(in srgb,var(--gold-light) 30%,var(--bg-raised));border:1px solid var(--gold);color:var(--text)}
.feedback b{font-weight:var(--weight-heading)}
.lm-after-k{display:flex;align-items:center;gap:var(--space-3) var(--space-4);flex-wrap:wrap}
.lm-at{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-label)}
.lm-at .ic{width:16px;height:16px}
@media (max-width:640px){.lm-after-k .key{flex:1 1 100%;justify-content:center}}
.quest .sim{margin-top:var(--space-3)}

/* ── ceremonies: earned, brief, quiet (tone law T2) ────────────────────────────────────── */
.lm-cere{max-width:600px;margin:var(--space-5) auto 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;padding:var(--space-7) var(--space-6)}
.lm-cere h2{font:var(--weight-heading) var(--text-heading)/1.1 var(--font);letter-spacing:var(--track-heading);color:var(--heading);margin:0}
.lm-cere p{font-size:var(--text-reading);max-width:46ch;margin:0}
.lm-cere .meta{font-size:var(--text-label);color:var(--text-secondary)}
.lm-cere .row{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;justify-content:center;margin-top:var(--space-2)}
.lm-cere .feedback{align-self:stretch;text-align:left}
.lm-opens{width:100%;text-align:left;display:flex;flex-direction:column;border-top:1px solid var(--border);margin-top:var(--space-2)}
.lm-opens-i{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.lm-opens-i > .ic,.lm-opens-i > .ic-section{width:var(--key-icon-l,22px);height:var(--key-icon-l,22px);color:var(--heading);flex:none;margin-top:2px}
.lm-opens-i b{display:block;font-weight:var(--weight-label)}
.lm-opens-i span{display:block;font-size:var(--text-label);color:var(--text-secondary)}
.lm-cere .lmk.is-draw .tick{stroke-dasharray:20;stroke-dashoffset:20;animation:lm-grow 700ms var(--ease) 350ms forwards}
.lm-cere .lmk.is-draw .b{animation:lm-pop 800ms var(--ease) both}
.lm-cere .lmk.is-seal .core{fill-opacity:0;animation:lm-fill 900ms var(--ease) 500ms forwards}
@keyframes lm-fill{to{fill-opacity:1}}
.lm-cere.is-cert{max-width:940px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-6);align-items:start;text-align:left;border-color:var(--gold);
  box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 3px 0 var(--gold);padding:var(--space-7) var(--space-6) var(--space-6)}
.lm-cert-l,.lm-cert-r{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;align-items:flex-start}
.lm-cere.is-cert .row{justify-content:flex-start}
.lm-cere.is-cert .lm-opens{margin-top:0}
.lm-split{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);align-items:center}
.lm-split p{max-width:none}
@container (max-width:900px){.lm-cere.is-cert{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.lm-cere{padding:var(--space-6) var(--space-4);margin-top:0}.lm-cere .row{flex-direction:column;align-items:stretch;width:100%}.lm-cere .row .key{justify-content:center}.lm-cere .row .link{text-align:center}}
.lm-veil{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--space-5);background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lm-fade var(--t-move) var(--ease) both}
.lm-veil .panel{max-width:440px;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-6);box-shadow:0 10px 30px color-mix(in srgb,var(--black) 16%,transparent)}
.lm-veil h2{font:var(--weight-heading) var(--text-title)/1.15 var(--font);letter-spacing:var(--track-heading);color:var(--heading);margin:0}
.lm-veil p{margin:0;font-size:var(--text-reading);color:var(--text)}
.lm-test{gap:var(--space-4)}

/* ── the Learn tags ────────────────────────────────────────────────────────────────────── */
.lt{position:relative;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 6px;border-radius:999px;flex:none;vertical-align:middle;
  background:var(--primary-6);box-shadow:inset 0 0 0 1px var(--primary-24);color:var(--text-link);text-decoration:none;
  font:var(--weight-label) 12px/1 var(--font);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:background-color var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease)}
.lt svg{width:15px;height:15px;flex:none;overflow:visible;transform:rotate(38deg)}
.lt svg path{fill:none;stroke:currentColor;stroke-width:1.8}
.lt:hover{background:var(--primary-12);box-shadow:inset 0 0 0 1px var(--primary-48)}
.lt:hover svg path{fill:color-mix(in srgb,var(--primary) 30%,transparent)}
.lt:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
@media (pointer:coarse){.lt::after{content:"";position:absolute;inset:-10px -4px}}
/* the Learn tag on the dark ground: a green fill and a clear edge (29 Sep 2026: "too weak") */
:root[data-mode-now="dark"] .lt{background:color-mix(in srgb,var(--primary) 40%,var(--bg-raised));box-shadow:inset 0 0 0 1px var(--primary-48)}
.title-row .lt{align-self:center}
.section-h .sh-t{min-width:0}
.section-h .sh-t h2{display:inline}
.section-h .sh-t .lt{margin-left:var(--space-2);vertical-align:3px}

.gl-tip small{display:block;margin-bottom:2px;font:var(--weight-heading) 11px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* ── the desk that learning opened: Currency exposure (opens with Investment Foundation) ── */
.lm-cx{display:flex;flex-direction:column;gap:var(--space-3)}
/* Keep the earned badge readable inside this card, even on a phone. */
.lm-cx > .sg-h > .status-label{max-width:100%;white-space:normal;line-height:1.3}
.lm-bar2{display:flex;height:24px;gap:2px;border-radius:var(--space-1);overflow:hidden}
.lm-bar2 i{display:block;height:100%}
.lm-bar2 i:first-child{background:var(--you)}        /* the household's own currency: the line rule's blue (CHART COLOURS) */
.lm-bar2 i:last-child{background:var(--ref-1)}       /* other currencies: copper */
.lm-leg{display:flex;gap:var(--space-2) var(--space-5);flex-wrap:wrap;font-size:var(--text-label);color:var(--text-secondary)}
.lm-leg span{display:inline-flex;align-items:center;gap:var(--space-2)}
.lm-leg i{width:12px;height:12px;border-radius:3px;display:inline-block}

@media (prefers-reduced-motion:reduce){
  .lm-stem.is-growing,.lm-leaf.is-new,.lm-node.is-arriving,.lm-node.is-changed .lmk,.lm-zone.is-arriving,.lm-rings .closed.is-new,.lm-week .d-yes.is-new,.lm-canopy.is-new,
  .lm-cere .lmk.is-draw .tick,.lm-cere .lmk.is-draw .b,.lm-cere .lmk.is-seal .core,.lm-xp.is-bump,.lm-veil,
  .lm-leaf.is-latest,.lm-halo,.lm-node.is-latest::after,.lm-node.is-latest .lmk.is-draw .tick,.lm-node.is-latest .lmk.is-draw .b{animation:none!important;stroke-dashoffset:0!important;fill-opacity:1}
  .lm-halo,.lm-node.is-latest::after{display:none}
  .lm-canvas,.lm-rings .arc,.lm-fly{transition:none}
}


/* ══ LEARN · THE FINANCIAL IDENTITY BRANCH — its pictures (from the sandbox of 28 Sep 2026) ══
   On top of the Map's pictures (the lm- block above). Tokens only. Four new objects:
     the crest   the archetype inside a ring — dashed while a first reading, a second ring once
                 the record has checked it. Never gold: gold is evidence, and this evidences nothing
     a trait     a line with two good ends: a soft band while indicated, a point once firm, the line
                 dashed while not yet asked. No number anywhere, and a fixed order
     a piece     one object the household has built, outlined until it is
     the marks   the Family Charter (a page) and a check-up (a turn), in the Map's mark family */

/* ── the crest ─────────────────────────────────────────────────────────────────────────────── */
.id-crest{display:block;flex:none;overflow:visible}
.id-crest .o{fill:var(--bg-raised);stroke:var(--heading);stroke-width:1.6}
.id-crest.is-first .o{stroke-dasharray:5 4.2}
.id-crest .i{fill:none;stroke:var(--primary-48);stroke-width:1}
.id-crest .g{fill:none;stroke:var(--primary);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
:root[data-mode-now="dark"] .id-crest .g{stroke:var(--primary-48)}
.id-crest.is-new{animation:id-rise 900ms var(--ease) both}
@keyframes id-rise{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes id-glow{0%{box-shadow:0 0 0 0 var(--primary-48)}35%{box-shadow:0 0 0 5px color-mix(in srgb,var(--primary-48) 70%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* ── a trait ───────────────────────────────────────────────────────────────────────────────── */
.id-traits{display:flex;flex-direction:column;gap:var(--space-3)}
.id-tr{display:grid;grid-template-columns:5.4rem minmax(0,1fr) 7.4rem;column-gap:var(--space-3);row-gap:3px;align-items:center}
.id-tr-n{font:var(--weight-label) var(--text-label)/1.2 var(--font);color:var(--heading)}
.id-tr-t{position:relative;height:16px}
.id-tr-line{position:absolute;left:0;right:0;top:7px;height:2px;border-radius:1px;background:var(--border-strong)}
.id-tr.is-none .id-tr-line{height:0;background:none;border-top:2px dashed var(--border-strong)}
.id-tr-band{position:absolute;top:2px;height:12px;border-radius:6px;background:var(--primary-12);border:1.5px dashed var(--primary-72)}
.id-tr-band.is-firm{top:3px;height:10px;background:var(--primary-24);border:0}
.id-tr-dot{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--heading);box-shadow:0 0 0 2px var(--bg-raised)}
.id-tr-band.is-moved,.id-tr-dot.is-moved{animation:id-glow 1.6s var(--ease) 2}
.id-tr-s{font-size:var(--text-label);line-height:1.2;color:var(--text);text-align:right;white-space:nowrap}
.id-tr.is-none .id-tr-s,.id-tr.is-none .id-tr-n{color:var(--text-secondary)}
.id-tr-ends{grid-column:2;display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-label);line-height:1.3;color:var(--text)}
.id-tr-ends span:last-child{text-align:right}
.id-tr.is-none .id-tr-ends{color:var(--text-secondary)}
.id-tr.is-fresh{animation:lm-arrive 560ms var(--ease) 200ms both}
/* compact: name and state on one line, the line full width, its ends under it */
.id-traits.is-compact .id-tr,.id-diff .id-tr,.id-diffq .id-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
.id-traits.is-compact .id-tr-n,.id-diff .id-tr-n,.id-diffq .id-tr-n{grid-row:1;grid-column:1}
.id-traits.is-compact .id-tr-s,.id-diff .id-tr-s,.id-diffq .id-tr-s{grid-row:1;grid-column:2}
.id-traits.is-compact .id-tr-t,.id-diff .id-tr-t,.id-diffq .id-tr-t{grid-row:2;grid-column:1 / -1}
.id-traits.is-compact .id-tr-ends,.id-diff .id-tr-ends,.id-diffq .id-tr-ends{grid-row:3;grid-column:1 / -1}
.id-traits.is-compact .id-tr.is-none .id-tr-ends{display:none}
.id-traits.is-compact{gap:var(--space-3)}
/* two people on one line: never averaged, each marked with their initials */
.id-tr.is-pair .id-tr-t{height:30px}
.id-tr.is-pair .id-tr-line{top:18px}
.id-tr.is-pair .id-tr-band{top:13px}
.id-tr-band.c0{background:color-mix(in srgb,var(--primary-pressed) 16%,transparent);border-color:var(--primary-pressed)}
.id-tr-band.c1{background:color-mix(in srgb,var(--d-private) 16%,transparent);border-color:var(--d-private)}
:root[data-mode-now="dark"] .id-tr-band.c0{border-color:var(--primary-48)}
:root[data-mode-now="dark"] .id-tr-band.c1{border-color:var(--d-real)}
.id-tr-who{position:absolute;top:0;width:24px;height:24px;margin-left:-12px;border-radius:50%;display:grid;place-items:center;
  font:var(--weight-heading) 11px/1 var(--font);color:var(--white);background:var(--primary-pressed);box-shadow:0 0 0 2px var(--bg-raised)}
.id-tr-who.c1{background:var(--d-private)}

/* ── what the household has built ──────────────────────────────────────────────────────────── */
.id-built{display:flex;flex-direction:column;gap:var(--space-3)}
.id-built-st{display:flex;flex-direction:column;gap:var(--space-2)}
.id-built-h{font:var(--weight-label) var(--text-label)/1 var(--font);color:var(--text-secondary)}
.id-built-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr));gap:var(--space-2)}
.id-piece{display:flex;align-items:center;gap:var(--space-2);min-height:42px;padding:var(--space-2) var(--space-3);border-radius:var(--r-chip);border:1px dashed var(--border-strong);
  font-size:var(--text-label);line-height:1.25;color:var(--text-secondary)}
.id-piece .ic-section{width:20px;height:20px;flex:none;color:var(--text-secondary)}
.id-piece{text-decoration:none}
a.id-piece.is-on:hover{border-color:var(--primary-48)}
.id-piece.is-on{border:1px solid var(--primary-24);background:var(--primary-6);color:var(--text)}
.id-piece.is-on .ic-section{color:var(--heading)}
.id-piece.is-new{animation:lm-arrive 700ms var(--ease) 300ms both}

/* ── the member card ───────────────────────────────────────────────────────────────────────── */
.id-card{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6)}
.id-card .eyebrow,.id-reveal .eyebrow,.id-stagec .eyebrow,.id-art .eyebrow,.id-side > .eyebrow,.id-film .eyebrow{color:var(--text-secondary)}
.id-card-top{display:flex;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap}
.id-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--primary-pressed);color:var(--white);font:var(--weight-heading) var(--text-label)/1 var(--font)}
.id-av.c1{background:var(--d-private)}
.id-av.is-hh{background:var(--bg-dark);box-shadow:inset 0 0 0 1px var(--primary-48)}
.id-who{display:flex;flex-direction:column;gap:2px;min-width:9rem;flex:1}
.id-who b{font-weight:var(--weight-heading);color:var(--heading)}
.id-who span{font-size:var(--text-label);color:var(--text-secondary)}
.id-stage{margin-left:auto;flex:none}
.id-card-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);align-items:center}
.id-card-name{display:flex;flex-direction:column;min-width:0}
.id-title{margin-top:var(--space-2);font:var(--weight-heading) var(--text-title)/1.1 var(--font);letter-spacing:var(--track-heading);color:var(--heading)}
.id-title.is-new{animation:lm-arrive 600ms var(--ease) 300ms both}
.id-sig{margin-top:var(--space-1);font:var(--weight-label) var(--text-subhead)/1.3 var(--font);color:var(--text-link)}
.id-sig.is-new{animation:lm-arrive 600ms var(--ease) 500ms both}
.id-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.id-status{margin-top:var(--space-2);font-size:var(--text-label);line-height:1.4;color:var(--text)}
.id-card-bh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3)}
.id-card-bh b{font-weight:var(--weight-heading);color:var(--heading)}
.id-card-f{font-size:var(--text-label);line-height:1.5;color:var(--text);padding-top:var(--space-4);border-top:1px solid var(--border)}
.id-card.is-compact{padding:var(--space-5);gap:var(--space-4)}
.id-card.is-compact .id-card-id{gap:var(--space-4)}
.id-card.is-compact .id-title{font-size:var(--text-subhead);line-height:1.2}
.id-card.is-compact .id-sig{font-size:var(--text-reading)}
.id-card.is-compact .id-stage{display:none}
.id-count{font-size:var(--text-label);color:var(--text);padding-top:var(--space-3);border-top:1px solid var(--border)}
.id-count b{font-weight:var(--weight-heading);color:var(--heading)}

/* the household card */
.id-hh .id-card-name{gap:0}
.id-hh-ms{display:flex;flex-direction:column;gap:var(--space-2)}
.id-hh-m{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--r-chip);background:var(--bg-sunken)}
.id-hh-m .id-av{width:30px;height:30px}
.id-hh-m .id-who b{font-size:var(--text-label)}
.id-diff{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:var(--r-chip);border:1px solid var(--border)}
.id-diff p{font-size:var(--text-label);line-height:1.5;color:var(--text)}
.id-diff b{font-weight:var(--weight-heading);color:var(--heading)}
.id-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:0}
.id-facts div{padding:var(--space-3);border-radius:var(--r-chip);background:var(--bg-sunken)}
.id-facts dt{font-size:var(--text-label);color:var(--text)}
.id-facts dd{margin:2px 0 0;font:var(--weight-heading) var(--text-label)/1.35 var(--font);color:var(--heading)}

/* ── the marks this branch adds ────────────────────────────────────────────────────────────── */
.id-mk-doc .b{stroke-linejoin:round}
.id-mk-doc .c,.id-mk-doc .l{fill:none;stroke:var(--lm-done);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.id-mk-doc.is-done .c,.id-mk-doc.is-done .l{stroke:var(--bg-raised)}
.id-mk-doc.is-next .c,.id-mk-doc.is-next .l{stroke:var(--lm-ahead);stroke-dasharray:2.6 2.4}
.id-mk-cu .a,.id-mk-cu .h{fill:none;stroke:var(--lm-done);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.id-mk-cu.is-done .a,.id-mk-cu.is-done .h{stroke:var(--bg-raised)}
.id-mk-cu.is-next .a,.id-mk-cu.is-next .h{stroke:var(--lm-ahead)}

/* ── the Map: the card beside it, and the identity under the card ──────────────────────────── */
.id-qls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.id-ql{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start}
.id-ql .lmk{width:18px;height:18px;margin-top:2px}
.id-ql b{display:block;font-weight:var(--weight-label);font-size:var(--text-label);line-height:1.35;color:var(--heading)}
.id-ql span span{display:block;font-size:var(--text-label);line-height:1.35;color:var(--text-secondary)}
.id-ql.is-open b{color:var(--text)}
.lm-key .id-mk-doc,.lm-key .id-mk-cu{width:var(--key-icon-m);height:var(--key-icon-m)}

/* the path, whole */
.id-qt-b{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--text-label);color:var(--text-secondary)}
.id-qt-b .ic-section{width:16px;height:16px;flex:none;color:var(--heading)}
.id-qt-side .qt-q{color:var(--text)}
.id-band{padding:var(--space-4) var(--space-5);border-radius:var(--r-card);background:var(--bg-sunken);font-size:var(--text-label);line-height:1.5;color:var(--text)}

/* ── the quest: why it matters · the idea · about you · what Finna understood ─────────────── */
.id-qwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-7);align-items:start}
@media (max-width:1180px){.id-qwrap{grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-5)}}
.id-side{position:sticky;top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.id-side .id-facts{grid-template-columns:minmax(0,1fr)}
.id-side .id-card{padding:var(--space-5)}
.id-side .id-hh .id-title{font-size:var(--text-subhead);line-height:1.2}
.id-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.id-steps li{display:flex;flex-direction:column;gap:6px;font-size:var(--text-label);line-height:1.25;color:var(--text-secondary)}
.id-steps i{display:block;height:4px;border-radius:2px;background:var(--border)}
.id-steps li.done{color:var(--text)}
.id-steps li.done i{background:var(--primary)}
.id-steps li.now{color:var(--heading);font-weight:var(--weight-label)}
.id-steps li.now i{background:var(--primary-48)}
.id-film{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.id-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.id-picks .answer{min-height:58px}
.id-pick[disabled] > span:last-child{color:var(--text-secondary)}
.id-count-l{margin-top:calc(-1 * var(--space-2))}
.id-field{display:flex;flex-direction:column;gap:var(--space-2);font:var(--weight-label) var(--text-label)/1.35 var(--font);color:var(--text)}
.id-field em{font-style:normal;font-weight:var(--weight-reading);color:var(--text-secondary)}
.id-foot{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.id-moves{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.id-moves li{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:2px var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.id-moves b{grid-row:span 2;font-weight:var(--weight-heading);color:var(--heading)}
.id-moves span{color:var(--text)}
.id-moves em{font-style:normal;font-size:var(--text-label);color:var(--text-secondary)}
.id-pair{display:flex;flex-direction:column;gap:var(--space-3)}
.id-pair-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:center;padding:var(--space-4)}
.id-pair-i > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.id-pair-i .id-av{width:26px;height:26px;margin-bottom:var(--space-1)}
.id-pair-i b{font-size:var(--text-label);color:var(--text)}
.id-pair-i .id-t{font:var(--weight-heading) var(--text-reading)/1.25 var(--font);color:var(--heading)}
.id-pair-i .id-s{font-size:var(--text-label);color:var(--text-link)}
.id-diffq{padding:var(--space-5);gap:var(--space-3)}
.id-q2{margin-top:var(--space-2)}

/* ── the reveal and the stage ceremony ─────────────────────────────────────────────────────── */
.id-reveal,.id-stagec{max-width:1060px;margin:var(--space-5) auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-7);padding:var(--space-7) var(--space-6);align-items:start}
@media (max-width:1100px){.id-reveal,.id-stagec{grid-template-columns:minmax(0,1fr)}}
.id-stagec{border-color:var(--primary-48)}
.id-reveal-l,.id-stagec-l{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.id-reveal-l p,.id-stagec-l p{font-size:var(--text-reading);line-height:1.55}
.id-reveal-k{font:var(--weight-label) var(--text-reading)/1.3 var(--font);color:var(--text);margin-top:var(--space-2)}
.id-reveal .id-title,.id-stagec .id-title{font-size:var(--text-heading);margin-top:0}
.id-reveal .meta,.id-stagec .meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:var(--text-label);color:var(--text)}
.id-was{margin:0}
.id-was s{font:var(--weight-label) var(--text-subhead)/1.2 var(--font);color:var(--text-secondary)}
.id-reveal-r,.id-stagec-r{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.id-reveal .row,.id-stagec .row,.id-col .row{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.id-sum{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.id-sum div{display:grid;grid-template-columns:8.6rem minmax(0,1fr);gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border);font-size:var(--text-label);line-height:1.45}
.id-sum dt{color:var(--text-secondary)}
.id-sum dd{margin:0;color:var(--text)}
.id-stagec .lm-opens{display:flex;flex-direction:column;border-top:1px solid var(--border)}

/* ── Policy · Financial Identity, and the Family Charter ───────────────────────────────────── */
.id-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-5);align-items:start}
@media (max-width:1100px){.id-grid{grid-template-columns:minmax(0,1fr)}}
.id-col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.id-col .panel{gap:var(--space-3)}
.id-list{list-style:none;margin:0;padding:0}
.id-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.id-list li:first-child{padding-top:0}
.id-list b{font-weight:var(--weight-label);font-size:var(--text-label);color:var(--heading)}
.id-list span{grid-column:1;font-size:var(--text-label);line-height:1.45;color:var(--text)}
.id-list .link{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:var(--text-label)}
.id-next{display:flex;flex-direction:column;gap:var(--space-1)}
.id-next b{font:var(--weight-heading) var(--text-subhead)/1.2 var(--font);color:var(--heading)}
.id-next span{font-size:var(--text-label);line-height:1.45;color:var(--text)}
.id-hist{list-style:none;margin:0;padding:0}
.id-hist li{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border);font-size:var(--text-label);line-height:1.45}
.id-hist li:first-child{padding-top:0}
.id-hist li:last-child{border-bottom:0}
.id-hist .d{color:var(--text-secondary)}
.id-hist b{display:block;font-weight:var(--weight-label);color:var(--heading)}
.id-hist span span{display:block;color:var(--text)}
.id-h-t s{color:var(--text-secondary)}
.id-ver{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin:0 0 var(--space-4)}
.id-charter{padding:var(--space-6);gap:var(--space-5)}
.id-art{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-5);border-bottom:1px solid var(--border)}
.id-art h2{font:var(--weight-heading) var(--text-subhead)/1.3 var(--font);color:var(--heading)}
.id-art p{font-size:var(--text-reading);line-height:1.6;max-width:64ch}
.id-art p.id-art-src{font-size:var(--text-label);color:var(--text-secondary)}
.id-art.is-later{padding:var(--space-4) var(--space-5);border:1px dashed var(--border-strong);border-radius:var(--r-chip)}

/* ── the check-up ──────────────────────────────────────────────────────────────────────────── */
.id-cu{gap:var(--space-3);padding:var(--space-5)}
.id-cu-h{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.id-then{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);margin:0}
.id-then dt{font-size:var(--text-label);color:var(--text-secondary)}
.id-then dd{margin:2px 0 0;font-weight:var(--weight-label);line-height:1.4;color:var(--heading)}
.id-then dd span{display:block;margin-top:2px;font-size:var(--text-label);font-weight:var(--weight-reading);color:var(--text)}
.id-cu-k{display:flex;gap:var(--space-3);flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .id-crest.is-new,.id-title.is-new,.id-sig.is-new,.id-tr-band.is-moved,.id-tr-dot.is-moved,.id-tr.is-fresh,.id-piece.is-new{animation:none!important}
}

/* narrow columns: the household card beside a quest or a charter */
.id-col .id-hh .id-title,.id-side .id-hh .id-title{font-size:var(--text-subhead);line-height:1.2}
.id-col .id-hh .id-facts{grid-template-columns:minmax(0,1fr)}
.quest-top .lm-qright{flex:none}
.quest-top .lm-xp,.quest-top .lm-qright .link{white-space:nowrap}
.id-hh-m .id-who span{color:var(--text)}
:root[data-mode-now="dark"] .id-tr-band.is-firm{background:var(--primary-72)}

/* ── in the platform (29 Sep 2026): what the sandbox left to the shell ───────────────────────── */
.lm-stem.s-side{stroke:var(--lm-ahead);stroke-width:1.5;stroke-dasharray:1.5 5}
.lm-stem.s-side.is-growing{stroke-dasharray:1.5 5;stroke-dashoffset:0;animation:lm-fade 500ms var(--ease) 500ms both}
.lm-key .id-mk-doc,.lm-key .id-mk-cu{width:var(--key-icon-m);height:var(--key-icon-m)}
.id-film p{font-size:var(--text-reading);line-height:1.6;max-width:62ch;color:var(--text)}
.id-film .quest-q{margin:0}
.id-und small{display:block;margin-top:var(--space-2);font-size:var(--text-label);color:var(--text-secondary)}
.id-rec{gap:var(--space-3);padding:var(--space-5)}
.id-rec .sg-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.id-who-keys{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:calc(-1 * var(--space-2)) 0 var(--space-5)}
.id-who-keys .key[aria-current="page"]{background:var(--heading);border-color:var(--heading);color:var(--bg-raised)}
.id-qwrap .quest{min-width:0}
.id-foot .link{white-space:nowrap}
.id-reveal .note{font-size:var(--text-label);line-height:1.5}
.id-reveal h1.id-title,.id-stagec h1.id-title{margin:0}
.id-charter .id-card-f{border-top:0;padding-top:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.lm-card .id-qls{margin-top:var(--space-1)}

/* tablets: the quest and its side column stack once the column would be too thin */
@media (max-width:900px){
  .id-qwrap{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .id-side{position:static}
}
/* phones: every two-up row becomes one, and a trait reads name and state, then the line */
@media (max-width:640px){
  .id-card{padding:var(--space-5);gap:var(--space-4)}
  .id-card:not(.is-compact) .id-card-id{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .id-card-id .id-crest{width:60px;height:60px}
  .id-traits:not(.is-compact){gap:var(--space-4)}
  .id-title{font-size:var(--text-heading)}
  .id-card.is-compact .id-title{font-size:var(--text-subhead)}
  .id-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .id-tr-n{grid-row:1;grid-column:1}
  .id-tr-s{grid-row:1;grid-column:2}
  .id-tr-t{grid-row:2;grid-column:1 / -1}
  .id-tr-ends{grid-row:3;grid-column:1 / -1}
  .id-facts,.id-then,.id-picks{grid-template-columns:minmax(0,1fr)}
  .id-moves li{grid-template-columns:minmax(0,1fr)}
  .id-moves b{grid-row:auto}
  .id-built-row{grid-template-columns:repeat(auto-fill,minmax(8.4rem,1fr))}
  .id-reveal,.id-stagec{padding:var(--space-6) var(--space-5);gap:var(--space-5);margin-top:0}
  .id-reveal .id-crest,.id-stagec .id-crest{width:88px;height:88px}
  .id-sum div{grid-template-columns:minmax(0,1fr);gap:2px}
  .id-hist li{grid-template-columns:minmax(0,1fr);gap:2px}
  .id-steps{gap:6px}
  .id-charter{padding:var(--space-5)}
  .id-art.is-later{padding:var(--space-3) var(--space-4)}
  .id-foot{gap:var(--space-4)}
}


/* toast */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + var(--space-4));transform:translate(-50%,-8px);z-index:50;opacity:0;pointer-events:none;
  background:var(--bg-dark);color:var(--white);border-radius:var(--r-chip);padding:var(--space-2) var(--space-4);
  font:var(--weight-label) var(--text-label)/1.4 var(--font);transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}


/* ── ON A PHONE, A TABLE IS A LIST (Rose, 25 Sep 2026: "mobile views are PARAMOUNT") ──────
   Below 640px a data table stops being a table swiped sideways: each row stands as a record
   row — its first cell as the title, every other cell as its column's name beside its value
   (the names are written onto the cells by render() in app.js). Nothing is hidden. */
@media (max-width:640px){
  .data-table{border:0;border-radius:0;background:none;overflow:visible}
  .data-table table{min-width:0!important}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .data-table tbody tr,.data-table tfoot tr{display:flex;flex-direction:column;gap:var(--space-1);
    padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
  .data-table tbody tr:hover{background:none}
  /* name on the left, the cell's content stacked on the right — a date and its source
     stay one under the other instead of squeezing side by side */
  .data-table td{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-4);
    justify-items:end;align-items:baseline;padding:0;border:0;text-align:right}
  .data-table td::before{content:attr(data-label);grid-row:1 / span 6;justify-self:start;
    font-size:var(--text-label);color:var(--text-tertiary)}
  .data-table td .cell-sub{display:block}
  .data-table td:first-child{display:block;justify-items:start;text-align:left;padding-bottom:var(--space-1)}
  .data-table td:first-child::before{content:none}
  .data-table td:empty{display:none}
  /* the whole row answers a tap: the title's link reaches over it; any other control in the
     row sits above that reach */
  .data-table tbody tr{position:relative}
  .data-table td:first-child a::after{content:'';position:absolute;inset:0}
  .data-table td:not(:first-child) :is(a,button,input,select){position:relative;z-index:1}
}

/* ── TAP TARGETS (27 Sep 2026 audit) ───────────────────────────────────────────────────
   On a touch screen these small controls reach about 44px through an invisible hit area — the
   brand's own technique (.filter-tag in components.css). Nothing moves or changes size. */
@media (pointer:coarse){
  .tv-more{row-gap:var(--space-4)}
  .tv-more-i,.st-doc,.lp-item-t,.chips a.status-label,button.link,a.qt-t{position:relative}
  .tv-more-i::after{content:"";position:absolute;inset:-13px -4px}
  .st-doc::after,.lp-item-t::after,button.link::after{content:"";position:absolute;inset:-14px -4px}
  a.qt-t::after{content:"";position:absolute;inset:-4px 0}
  .chips a.status-label::after{content:"";position:absolute;inset:-10px -2px}
  .seg button::after{content:"";position:absolute;inset:-6px 0}
  .th-sort,.tb-part,.link-row{position:relative}
  .th-sort::after{content:"";position:absolute;inset:-10px -6px}
  .link-row::after{content:"";position:absolute;inset:-12px -4px}
}

/* ══ SCENES — the opener at the top of a desk page (Christian and Esben, 28 Sep 2026 · pilot) ══
   A light ground in the desk's own tint, the answer in plain words, and one moving picture of it,
   before the rows and tables (drawn by the scene functions in app.js). Every tint is a brand token
   mixed into --bg-raised, so dark mode follows by itself. One line per desk to change a ground:
     Records    a pale blue, the website's (Christian, 29 Sep 2026: "the new blue color for the
                Records desk"), written in OKLCH as there is no blue token; Home, its desk cards
                and pages outside the desks keep Primary 48%, a mint
     Policy     Gold light, a champagne
     Investment Primary 12%, the Open tag's green (Christian, 29 Sep 2026: the lime was too loud)
     Protection   Real assets slate, a periwinkle
     Succession Property earth, a sand
   The words sit left and the picture right once the scene is wide enough (a container query), and
   stack, words first, on a phone. Marks: 2px lines, 24px bars, 4px data ends, 2px gaps between
   touching fills; text wears text tokens, never the data colour. */
@property --tl{syntax:'<number>';inherits:false;initial-value:1}
/* .scene and the one desk colour for every desk are the brand's: components.css, REV 54 and 57. */
/* Records panels only. Leave --scene intact for existing chart strokes and icons. */
/* The other Records pages have existing content cards, not scenes. Tint only each first card. */
.records-screen > .page-head + .panel,
.records-screen > .page-head + .tb > .data-table,
.records-screen > .page-head + .help + div > .record:first-child{background:#DDEAF5}
:root[data-mode-now="dark"] .records-screen > .page-head + .panel,
:root[data-mode-now="dark"] .records-screen > .page-head + .tb > .data-table,
:root[data-mode-now="dark"] .records-screen > .page-head + .help + div > .record:first-child{background:#28323A}
.sc-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:center}
@container (min-width:760px){.sc-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7)}}
.sc-words{min-width:0}
.sc-answer{margin-top:var(--space-3);font:var(--weight-heading) var(--text-title)/1.18 var(--font);letter-spacing:var(--track-heading);color:var(--heading);max-width:22ch}
.sc-answer b,.sc-sub b{font-weight:inherit;white-space:nowrap}
/* a figure counting up (scCount): its final digits keep their place in the line, invisible, and
   the count is drawn over them, so the sentence is laid out once, as it ends (29 Sep 2026) */
.sc-slot{position:relative}
.sc-ghost{opacity:0}
.sc-roll{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;white-space:nowrap}
.sc-sub{margin-top:var(--space-3);font-size:var(--text-reading);line-height:var(--lh-reading);color:var(--text-secondary);max-width:48ch}
.sc-sub b{color:var(--text);font-weight:var(--weight-label)}
/* a strip across the foot of a scene: who and what is covered */
.sc-foot{margin-top:var(--space-6)}
.sc-foot > .sc-covered{margin-top:0}

/* the picture */
.sc-vis{position:relative;min-width:0;container-type:inline-size}
.sc-svg{display:block;max-width:100%;overflow:visible}
.sc-svg text{font-family:var(--font);font-size:var(--text-label);font-weight:var(--weight-reading);fill:var(--text-secondary)}
.sc-svg text.v{fill:var(--heading);font-weight:var(--weight-heading)}
.sc-svg .sc-dial-v{fill:var(--heading);font-size:var(--text-title);font-weight:var(--weight-heading);letter-spacing:var(--track-heading)}
.sc-svg [data-tip]{outline:none}
.sc-svg [data-tip]:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
.sc-track{fill:none;stroke:color-mix(in srgb,var(--heading) 9%,transparent)}
.sc-in-lbl{font-weight:var(--weight-label)!important;pointer-events:none}
.sc-in-lbl.sc-inv{fill:var(--white)!important}
.sc-in-lbl.sc-ink{fill:var(--black)!important}
.sc-owe{fill:var(--l-owed)}
.sc-net{fill:var(--primary-pressed)}
.sc-cut{fill:none;stroke:var(--border-strong);stroke-width:1}
.sc-line{stroke:color-mix(in srgb,var(--heading) 14%,transparent);stroke-width:3;stroke-linecap:round}
.sc-lived{fill:none;stroke:var(--primary-pressed);stroke-width:3;stroke-linecap:round}
.sc-ahead{stroke:var(--primary-48);stroke-width:3;stroke-linecap:round}
.sc-stem{stroke:color-mix(in srgb,var(--heading) 22%,transparent);stroke-width:1}
.sc-ev circle{fill:var(--primary-pressed);stroke:var(--scene);stroke-width:2}
.sc-ev.start circle,.sc-ev.end circle{fill:var(--scene);stroke:var(--primary-pressed);stroke-width:2.5}
.sc-ev.now circle{fill:var(--heading)}
.sc-ev .sc-halo{fill:none!important;stroke:var(--heading)!important;stroke-width:1.5!important}

/* the attention pulse, and the halo round a thing that is now — the only motion that stays */
@keyframes sc-pulse{0%,100%{opacity:1}50%{opacity:.42}}
.sc-pulse{animation:sc-pulse 2.6s ease-in-out infinite}
@keyframes sc-halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
.sc-halo{transform-box:fill-box;transform-origin:center;animation:sc-halo 2.4s cubic-bezier(.2,.7,.2,1) infinite}
@media (prefers-reduced-motion:reduce){.sc-pulse,.sc-halo{animation:none}.sc-halo{opacity:0}}

/* the will's line, standing up on a phone */
.sc-tl{list-style:none;margin:0;padding:0 0 0 var(--space-6);position:relative;display:grid;gap:var(--space-4)}
.sc-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:3px;border-radius:2px;background:color-mix(in srgb,var(--heading) 14%,transparent)}
.sc-tl::after{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--primary-pressed);transform-origin:top;transform:scaleY(var(--tl))}
.sc-tl li{position:relative;display:flex;flex-direction:column}
.sc-tl li::before{content:"";position:absolute;left:calc(-1 * var(--space-6) + 3px);top:5px;width:11px;height:11px;border-radius:50%;background:var(--primary-pressed);box-shadow:0 0 0 2px var(--scene);z-index:1}
.sc-tl li.start::before,.sc-tl li.end::before{background:var(--scene);box-shadow:inset 0 0 0 2.5px var(--primary-pressed),0 0 0 2px var(--scene)}
.sc-tl li.now::before{background:var(--heading)}
.sc-tl b{font-weight:var(--weight-heading);color:var(--heading)}
.sc-tl span{font-size:var(--text-label);color:var(--text-secondary)}

/* the tooltip: value first, then what it is */
.sc-tip{position:absolute;z-index:4;pointer-events:none;display:flex;flex-direction:column;gap:2px;max-width:260px;
  padding:var(--space-2) var(--space-3);border-radius:var(--r-chip);background:var(--bg-raised);
  box-shadow:0 8px 24px color-mix(in srgb,var(--black) 16%,transparent);font-size:var(--text-label);line-height:1.4}
.sc-tip b{font-size:var(--text-reading);font-weight:var(--weight-heading);color:var(--heading)}
.sc-tip span{color:var(--text-secondary)}
/* dark: the pressed green goes one step lighter so it still reads on the dark grounds */
:root[data-mode-now="dark"] .sc-ev circle{fill:var(--primary-72)}
:root[data-mode-now="dark"] .sc-lived{stroke:var(--primary-72)}
:root[data-mode-now="dark"] .sc-tl::after,:root[data-mode-now="dark"] .sc-tl li::before{background:var(--primary-72)}

/* ══ THE FINNA VISUALS (28 Sep 2026, from the approved sandbox: design repo
   mockups/finna-visuals-sandbox.html) — the map, the range, the line, the goal map, the tiles,
   the table and the input. Everything here is a token; outside a range is Bullion, never Fiery
   (Fiery is for errors); eyebrows are the brand green (--text-link), the site's rule. ══════════ */

/* the eyebrows: the brand green. The menus keep black and white (27 Sep rule), so the sub menu's
   group names stay neutral. */
.intro .eyebrow{color:var(--text-link)}
:where(.product) .submenu .eyebrow{color:var(--text-tertiary)}

/* a scene that stacks: the words and the tiles on top, the picture full width under them */
.scene.sc-stack .sc-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);align-items:end}
/* THE TILES GO UNDER THE WORDS (Rose, 29 Sep 2026: "too crowded and sloppy"). Beside the words the
   three tiles had half the width, about 140px each: their lines ran to three rows and a tile's chip,
   "i" and icon ran into each other. Under the words they take the full width, three across. */
.scene.sc-stack .sc-answer{max-width:none}
.scene.sc-stack .sc-top > .sc-facts{margin-top:0}
.sc-vis.sc-wide{margin-top:var(--space-6)}
.scene .gx-card{margin-top:var(--space-6)}

/* HIGHLIGHT TILES — the value large, what it is small, the name and an icon on top */
.sc-facts{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-2)}
/* A TILE IS NEVER NARROWER THAN 200px (29 Sep 2026): in a narrow column the tiles take a row each
   rather than squeezing side by side; roomier inside — 24px in, 8px between its lines. */
.sc-facts.hl{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));align-self:stretch;gap:var(--space-3)}
.sc-facts.hl li{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-5);container-type:inline-size;
  border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg-raised) 76%,transparent)}
.sc-facts.hl{container-type:inline-size}
@container (min-width:272px) and (max-width:411px){.sc-facts.hl li:last-child:nth-child(odd){grid-column:1 / -1}}
/* on a phone one tile to a row (two across left a chip, an "i" and an icon no room), 16px in */
@media (max-width:560px){.sc-facts.hl{gap:var(--space-2)}.sc-facts.hl li{padding:var(--space-4);gap:var(--space-1)}}
.hl-k{display:flex;align-items:center;gap:var(--space-2);min-height:22px;font-size:var(--text-label);font-weight:var(--weight-label);color:var(--text-secondary)}
.hl-kt{margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* THE TILE'S ICON: TOP RIGHT, 24px, BLACK (Rose, 29 Sep 2026: "way too small — they blur"): a line
   icon at the size it is drawn at, so its lines land on whole pixels; the heading colour. The same
   rule as the desk cards on Home (their plates at 32) and Freya's summary boxes. */
.hl-k .ic{flex:none;width:var(--card-icon);height:var(--card-icon);color:var(--heading)}
.hl-k .status-label{font-size:var(--text-label);white-space:nowrap;margin-right:auto}
.sc-facts.hl .hl-v{font:var(--weight-heading) min(var(--text-title),19cqi)/1.1 var(--font);letter-spacing:var(--track-heading);white-space:nowrap;color:var(--heading)}
.sc-facts.hl .hl-l{font-size:var(--text-label);line-height:1.4;color:var(--text-secondary)}
/* the one that needs you: the Needs-you card in miniature (option A) */
.sc-facts.hl li.att{background:color-mix(in srgb,var(--gold-light) 30%,var(--bg-raised));box-shadow:inset 0 0 0 1px var(--gold)}
.sc-facts.hl li.att .hl-kt{display:none}
.sc-facts.hl li:not(.att) .hl-k .status-label{display:none}
/* a text fact (the will): the name small, the words under it */
.sc-facts.txt{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
@container (min-width:760px){.sc-facts.txt{grid-template-columns:minmax(0,1fr)}}
.sc-facts.txt li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--space-3) var(--space-4);border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg-raised) 72%,transparent)}
.sc-facts.txt span{font-size:var(--text-label);line-height:1.4;color:var(--text-secondary)}
.sc-facts b.sc-t{font:var(--weight-label) var(--text-reading)/1.35 var(--font);color:var(--text)}

/* THE MAP inside a scene: no card of its own, on the scene's ground */
.tv-card.tv-bare{display:flex;flex-direction:column;gap:var(--space-4)}
.tv-bare .tv-owe-wrap{border-top-color:color-mix(in srgb,var(--heading) 12%,transparent)}
.tv-bare .lg-row{border-bottom-color:color-mix(in srgb,var(--heading) 12%,transparent)}
.tv.tv-pm{aspect-ratio:16 / 7}
@media (max-width:1100px){.tv.tv-pm{aspect-ratio:16 / 9}}
@media (max-width:640px){.tv.tv-pm{aspect-ratio:4 / 5}}

/* THE RANGE: a white card on the scene; a single rule is one row with its own scale */
.rg-card{padding:var(--space-5);border-radius:var(--r-card);background:var(--bg-raised);display:flex;flex-direction:column;gap:var(--space-4)}
@media (max-width:640px){.rg-card{padding:var(--space-4)}}
.rg-panel{gap:var(--space-4)}
.rg-singles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-4)}
.rg-one{padding:var(--space-5);border-radius:var(--r-card);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--border)}
.rg-one .band-row{grid-template-columns:minmax(0,1fr) auto}
.rg-one .band-track{grid-column:1 / -1;order:3}
.rg-one .rg-axis{display:flex;justify-content:space-between;margin-top:var(--space-2);font-size:var(--text-label);color:var(--text-tertiary)}
@container (max-width:520px){.sc-vis .band-row{grid-template-columns:minmax(0,1fr) fit-content(40%)}.sc-vis .band-track{grid-column:1 / -1;order:3}.sc-vis .band-axis{display:none}}

/* THE LINE: past in dark green, today with its halo, ahead in the lighter green, past the date in Bullion */
.tl-card{padding:var(--space-5)}
@media (max-width:640px){.tl-card{padding:var(--space-4)}}
.tl-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-5)}
.tl-count{font-size:var(--text-label);color:var(--text-secondary)}
.ln{--dot:13px;--rail:3px;list-style:none;margin:0;padding:0 0 0 calc(var(--space-6) + 4px);position:relative}
.ln::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:var(--rail);border-radius:2px;background:var(--primary-48);opacity:.55}
.ln .ln-lived{position:absolute;left:10px;top:8px;width:var(--rail);border-radius:2px;background:var(--primary-pressed);transform-origin:top}
.ln > li{position:relative;padding:var(--space-2) 0}
.ln > li.ln-year{padding:var(--space-5) 0 var(--space-1)}
.ln > li.ln-year:first-of-type{padding-top:0}
.ln-year b{font:var(--weight-heading) var(--text-title)/1 var(--font);letter-spacing:var(--track-heading);color:var(--heading)}
.ln > li.ln-month{padding:var(--space-3) 0 0;font:var(--weight-heading) var(--text-label)/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-link)}
.ln-it{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--space-3);align-items:baseline;padding:var(--space-3) var(--space-4);margin-left:calc(-1 * var(--space-2));
  border-radius:var(--r-tile);color:inherit;text-decoration:none;transition:background-color var(--t-state) var(--ease)}
a.ln-it:hover{background:var(--bg-sunken)}
a.ln-it:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px}
.ln-it::before{content:"";position:absolute;left:calc(-1 * (var(--space-6) + 4px) + 10px + var(--rail) / 2 - var(--dot) / 2);top:calc(var(--space-2) + var(--space-3) + 5px);
  width:var(--dot);height:var(--dot);border-radius:50%;background:var(--primary-48);box-shadow:0 0 0 3px var(--bg-raised)}
.ln-it.past::before{background:var(--primary-pressed)}
.ln-it.over::before{background:var(--gold)}
.ln-it .d{font:var(--weight-heading) var(--text-reading)/1.2 var(--font);color:var(--heading)}
.ln-it .d small{display:block;font-size:var(--text-label);font-weight:var(--weight-reading);color:var(--text-tertiary)}
.ln-it .t{font-weight:var(--weight-label);color:var(--text);min-width:0}
.ln-it .t small{display:block;font-size:var(--text-label);font-weight:var(--weight-reading);color:var(--text-secondary);margin-top:2px}
.ln-it .t small:empty{display:none}
.ln-it .status-label{justify-self:end}
.ln > li.ln-now{padding:var(--space-4) 0}
.ln-now .ln-now-in{display:flex;align-items:center;gap:var(--space-3);font-weight:var(--weight-heading);color:var(--heading)}
.ln-now .ln-now-in small{font-weight:var(--weight-reading);color:var(--text-secondary);font-size:var(--text-label)}
.ln-now::before,.ln-now::after{content:"";position:absolute;left:calc(-1 * (var(--space-6) + 4px) + 10px + var(--rail) / 2 - 8px);top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%}
.ln-now::before{background:var(--heading);box-shadow:0 0 0 3px var(--bg-raised)}
.ln-now::after{box-shadow:0 0 0 2px var(--heading);animation:ln-halo 2.4s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ln-halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.ln-now::after{animation:none;opacity:0}}
.ln > li[hidden]{display:none}
.ln-foot{margin-top:var(--space-4)}
/* a phone: the date and the desk share the first line, so the title has the whole width */
@media (max-width:640px){
  .ln-it{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--space-1);align-items:center;padding:var(--space-3)}
  .ln-it .d{grid-area:1 / 1}
  .ln-it .d small{display:inline;margin-left:var(--space-2)}
  .ln-it .status-label{grid-area:1 / 2}
  .ln-it .t{grid-area:2 / 1 / 3 / -1}
}
:root[data-mode-now="dark"] .ln .ln-lived,:root[data-mode-now="dark"] .ln-it.past::before{background:var(--primary-72)}

/* THE GOAL MAP */
.gx-card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.gx-plot{position:relative;min-width:0;padding:var(--space-4) var(--space-4) var(--space-2);border-radius:var(--r-card);background:var(--bg-raised)}
.gx-plot svg{display:block;overflow:visible}
.gx-svg text{font-family:var(--font);font-size:var(--text-label);fill:var(--text-secondary)}
.gx-svg text.v,.gx-svg text.lane{fill:var(--heading);font-weight:var(--weight-heading)}
.gx-svg text.short{fill:var(--heading);font-weight:var(--weight-label)}
.gx-svg text.ok{fill:var(--text-link);font-weight:var(--weight-label)}
.gx-grid{stroke:var(--border);stroke-width:1}
.gx-lane{fill:color-mix(in srgb,var(--heading) 3%,transparent)}
.gx-today{stroke:var(--heading);stroke-width:1.5}
.gx-goal{cursor:pointer;outline:none}
.gx-goal .gx-pop{transform-box:fill-box;transform-origin:center}
.gx-goal .rim{fill:var(--bg-raised)}
.gx-goal.need .rim{stroke:var(--primary-pressed);stroke-width:2.5}
.gx-goal.want .rim{stroke:var(--primary-72);stroke-width:2}
.gx-goal.wish .rim{stroke:var(--primary-48);stroke-width:1.5}
.gx-goal .fill{fill:var(--primary)}
.gx-goal.want .fill{fill:var(--primary-72)}
.gx-goal.wish .fill{fill:var(--primary-48)}
.gx-goal .pace{stroke:var(--heading);stroke-width:2;stroke-linecap:round;fill:none}
.gx-goal .pace.short{stroke:var(--gold)}
.gx-goal .sel{fill:none;stroke:var(--heading);stroke-width:2;opacity:0;transition:opacity var(--t-state) var(--ease)}
.gx-goal[aria-pressed="true"] .sel,.gx-goal:focus-visible .sel{opacity:1}
.gx-goal .pct{fill:var(--white);font-weight:var(--weight-heading)}
.gx-goal .pct.ink{fill:var(--heading)}
.gx-mark{fill:var(--heading)}
.gx-ring{fill:none;stroke:var(--heading);stroke-width:2}
.gx-k-rim{fill:var(--bg-raised);stroke:var(--primary-pressed);stroke-width:1.5}
.gx-k-fill{fill:var(--primary)}
.gx-list{display:flex;flex-direction:column;gap:var(--space-2)}
.gx-lrow{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3);border-radius:var(--r-tile);background:color-mix(in srgb,var(--heading) 3%,transparent)}
.gx-lh{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-label);font-weight:var(--weight-heading);color:var(--heading)}
.gx-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3);width:100%;margin:0;padding:var(--space-1) var(--space-2);border:0;border-radius:var(--r-tile);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.gx-item svg{display:block;overflow:visible}
.gx-item .pct{font-family:var(--font);font-size:var(--text-label)}
.gx-item[aria-pressed="true"]{background:var(--bg-raised)}
.gx-item:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px}
.gx-it{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--text-label);color:var(--text-secondary)}
.gx-it b{font-size:var(--text-reading);font-weight:var(--weight-heading);color:var(--heading);line-height:1.3}
.gx-it .short{color:var(--heading);font-weight:var(--weight-label)}
.gx-it .ok{color:var(--text-link);font-weight:var(--weight-label)}
.gx-none{margin:0;padding:var(--space-1) var(--space-2);font-size:var(--text-label);color:var(--text-secondary)}
.gx-key{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-3);font-size:var(--text-label);color:var(--text-secondary)}
.gx-key span{display:inline-flex;align-items:center;gap:var(--space-2)}
.gx-key svg{flex:none}
.gx-key .gx-k-line{display:inline-block;width:18px;height:2px;border-radius:1px;background:var(--heading)}
.gx-key .gx-k-line.short{background:var(--gold)}
.gx-detail{padding:var(--space-5);border-radius:var(--r-card);background:var(--bg-raised);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
@container (min-width:860px){.gx-detail{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.gx-h{margin-top:var(--space-3);font:var(--weight-heading) var(--text-title)/1.15 var(--font);letter-spacing:var(--track-heading);color:var(--heading)}
.gx-dl{margin-top:var(--space-1);color:var(--text-secondary)}
.gx-pace{margin-top:var(--space-4)}
.gx-bar{position:relative;height:12px;margin-top:var(--space-4);border-radius:6px;background:var(--bg-sunken)}
.gx-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--primary)}
.gx-bar u{position:absolute;top:-5px;bottom:-5px;width:3px;border-radius:2px;background:var(--heading)}
.gx-bar u.short{background:var(--gold)}
.gx-barl{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2);font-size:var(--text-label);color:var(--text-secondary)}
.gx-detail .pairs{margin:0}
.gx-draw dt{min-width:0}
.gx-draw dd{flex:none;padding-left:var(--space-3)}
/* on a phone the holder takes its own line under the line's name, without the dot — side by side,
   a long name pushed "· Michael" onto a line of its own, dot first (phone pass, 29 Sep 2026). The
   figure drops its extra inset there too: the pair's gap already parts them. */
@media (max-width:520px){.gx-who{display:block}.gx-dot{display:none}.gx-draw dd{padding-left:0}}
.gx-ctl{display:flex;flex-direction:column;gap:var(--space-2);align-self:end}
.gx-ctl-note{font-size:var(--text-label);line-height:1.5;color:var(--text-secondary);max-width:56ch}
:root[data-mode-now="dark"] .gx-goal.need .rim{stroke:var(--primary-48)}
:root[data-mode-now="dark"] .gx-goal .fill,:root[data-mode-now="dark"] .gx-k-fill{fill:var(--primary-72)}

/* THE TABLE: sorting from the headers, the share of the whole, the sum in the foot */
.tb .filter-tags:empty{display:none}
.data-table th[data-sort]{padding-block:8px}
.th-sort{display:inline-flex;align-items:center;gap:6px;min-height:28px;margin:0;padding:0 2px;border:0;border-radius:6px;background:none;
  font:inherit;color:inherit;cursor:pointer;white-space:nowrap;transition:color var(--t-state) var(--ease)}
.th-sort:hover{color:var(--text)}
.th-sort:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px}
.th-sort .th-ic{width:14px;height:14px;flex:none;color:var(--text-tertiary)}
.th-sort.on{color:var(--heading);font-weight:var(--weight-heading)}
.th-sort.on .th-ic{color:var(--heading)}
.tb-sortsel{display:none}
.sort-bar{display:none}
@media (max-width:640px){.tb-sortsel{display:block;flex:1 1 100%;width:100%}.sort-bar{display:block}.sort-bar .tb-sortsel{width:100%}}
/* the whole row opens it */
.data-table tbody tr:has(td:first-child :is(a,button)[data-act]){cursor:pointer}
.data-table tbody tr.is-lit{background:var(--primary-12)}
.link-row{padding:0;border:0;background:none;font:inherit;font-weight:var(--weight-label);color:var(--text);text-align:left;cursor:pointer}
.link-row:hover{color:var(--text-link)}
.link-row:focus-visible{outline:2px solid var(--focus,var(--primary));outline-offset:2px;border-radius:2px}
/* the share: a track that is everything, filled by the row's part of it */
.data-table .tb-share-h{min-width:112px}
.data-table td.tb-share{white-space:nowrap}
.tb-bar{display:inline-block;width:64px;height:6px;margin-right:var(--space-2);border-radius:3px;background:var(--bg-sunken);vertical-align:middle;overflow:hidden}
.tb-bar i{display:block;width:var(--w);min-width:2px;height:100%;border-radius:3px;background:var(--primary-72);transform-origin:left center}
.tb-pct{font-size:var(--text-label);color:var(--text-secondary);vertical-align:middle}
.data-table tfoot td{padding:14px var(--space-4);border-top:1px solid var(--border-strong);font-size:var(--text-reading);font-weight:var(--weight-heading);color:var(--heading);vertical-align:top}
.data-table tfoot td .cell-sub{font-weight:var(--weight-reading)}
.data-table tfoot[hidden]{display:none}
/* a tablet: the share folds into the value, so the table keeps to the width it has */
.tb,.block:has(> .data-table[data-sort-key]){container-type:inline-size}
.data-table td .tb-vsub{display:none}
@media (min-width:641px){
  @container (max-width:880px){
    .data-table .tb-share-h,.data-table td.tb-share{display:none}
    .data-table td .tb-vsub{display:block}
    /* and the table keeps to that width: tighter cells, a heading may take two lines */
    .data-table[data-sort-key] table{min-width:0}
    .data-table[data-sort-key] :is(th,td){padding-inline:10px}
    .data-table[data-sort-key] .th-sort{white-space:normal;text-align:inherit}
    .data-table[data-sort-key] tbody td:first-child{min-width:6.5em}
  }
}
/* THE MAP IN ONE LINE over a table whose rows add up to a whole */
.tb-strip-wrap{display:flex;flex-direction:column;gap:var(--space-2)}
.tb-strip-wrap[hidden]{display:none}
.tb-strip-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.tb-strip-hint{font-size:var(--text-label);color:var(--text-tertiary)}
.tb-strip{display:flex;gap:3px;height:60px}
.tb-part{min-width:5px;margin:0;border:0;border-radius:var(--r-chip);padding:0 var(--space-3);background:var(--tv-c);color:var(--tv-ink);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;overflow:hidden;cursor:pointer;font:inherit;text-align:left;
  outline:2px solid transparent;outline-offset:2px;transition:opacity var(--t-move) var(--ease),outline-color var(--t-state) var(--ease)}
.tb-part:hover{outline-color:var(--primary-48)}
.tb-part:focus-visible{outline-color:var(--primary)}
.tb-part.on{outline-color:var(--heading)}
.tb-part.off{opacity:.3}
.tb-pn{font-size:var(--text-label);font-weight:var(--weight-label);line-height:1.2;white-space:nowrap}
.tb-pv{font-size:var(--text-reading);font-weight:var(--weight-heading);line-height:1.2;white-space:nowrap}
.tv-more-i[aria-pressed="true"]{color:var(--heading)}
.tv-more-i[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--heading)}
@media (max-width:640px){
  .tb-strip{height:52px}
  .tv-more-h{flex-basis:100%}
  .tb-strip-hint{display:none}
  .tb .toolbar > select[data-filter]{flex:1 1 40%;min-width:0}
  .data-table tfoot tr{border-bottom:0;border-top:1px solid var(--border-strong)}
  .data-table tfoot td{padding:0;border:0}
  .data-table tfoot td:empty{display:none}
  .data-table td.tb-share{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2)}
  .data-table td.tb-share::before{margin-right:auto}
  .tb-bar{width:72px;margin-right:0}
}

/* THE INPUT: the unit in the field, what a new figure changes, numbers typed in a table */
.fx-affix{position:relative;display:block}
.fx-affix .fx-pre,.fx-affix .fx-suf{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;font:var(--weight-label) var(--key-label-m)/1 var(--font);color:var(--text-secondary);pointer-events:none}
.fx-affix .fx-pre{left:var(--space-4)}
.fx-affix .fx-suf{right:var(--space-4)}
.fx-affix .fx-pre + .input{padding-left:calc(var(--space-4) + 14px)}
.fx-affix .input:has(+ .fx-suf){padding-right:calc(var(--space-4) + 18px)}
/* what an investment account holds (3 Oct 2026): its four parts in a grid, under the legend's line */
[data-mix-fields] > .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-block:var(--space-3) var(--space-2)}
.ux-prev{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--r-card);background:var(--primary-6);box-shadow:inset 0 0 0 1px var(--primary-24)}
.ux-nw{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.ux-nw span{font-size:var(--text-label);color:var(--text-secondary)}
.ux-nw b{font:var(--weight-heading) var(--text-subhead)/1.25 var(--font);color:var(--heading)}
.ux-nw .ux-to{display:inline;font-size:inherit;color:var(--text-tertiary);font-weight:var(--weight-reading)}
.ux-nw small{font-size:var(--text-label);color:var(--text-secondary)}
.ux-band.bands{gap:0}
.ux-band .band-row{grid-template-columns:minmax(0,1fr) auto}
.ux-band .band-track{grid-column:1 / -1;order:3}
.ux-note{font-size:var(--text-label);line-height:1.5;color:var(--text-secondary)}
.band-was{position:absolute;top:-4px;bottom:-4px;width:4px;border-radius:2px;background:var(--heading);opacity:.22;transform:translateX(-2px)}
:root[data-mode-now="dark"] .ux-prev{background:color-mix(in srgb,var(--primary) 10%,var(--bg-raised));box-shadow:inset 0 0 0 1px var(--border-strong)}
.rx table{min-width:0}
.rx .rx-band-h{width:38%}
.rx-name{display:block;font-weight:var(--weight-label)}
.rx td{vertical-align:middle}
.rx-in{width:92px;margin-left:auto}
.rx-in .input{--kh:var(--key-height-m);height:var(--key-height-m);text-align:right;padding-left:var(--space-3)}
.rx-band{display:flex;flex-direction:column;gap:var(--space-2);min-width:150px}
.rx-band .band-track{height:22px;order:0}
.rx-state{font-size:var(--text-label)}
.rx-err{color:var(--text-error);font-weight:var(--weight-label)}
.rx tr.is-bad td{background:color-mix(in srgb,var(--warning) 5%,transparent)}
.rx .input[aria-invalid="true"]{border-color:var(--warning);box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 18%,transparent)}
.rx tfoot td{font-size:var(--text-label)}
.rx tfoot td::before{content:none!important}
/* in the side sheet (560px) the editor is a list: the class, its three numbers under their names,
   and its range the full width under them. A container query, so it holds at every screen width. */
form[data-form="edit-policy"]{container-type:inline-size}
@container (max-width:720px){
  .rx.data-table{border:0;border-radius:0;background:none;overflow:visible}
  .rx table{min-width:0!important}
  .rx thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rx tbody tr{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2) var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--border)}
  .rx tbody tr:hover{background:none}
  .rx tbody td{display:block;padding:0;border:0;text-align:left}
  .rx tbody td:first-child,.rx tbody td.rx-b{grid-column:1 / -1}
  .rx tbody td.num{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1)}
  .rx tbody td.num::before,.rx tbody td.rx-b::before{content:attr(data-label);display:block;font-size:var(--text-label);color:var(--text-tertiary)}
  .rx tbody td:first-child::before{content:none}
  .rx tbody td.rx-b::before{margin-bottom:var(--space-1)}
  .rx td.rx-b{justify-items:stretch}
  .rx tr.is-bad td{background:none}
  .rx tr.is-bad{background:color-mix(in srgb,var(--warning) 5%,transparent)}
  .rx-in{width:100%;margin-left:0}
  .rx-in .input{height:var(--input-height)}
  .rx-band{min-width:0}
  .rx tfoot tr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);padding:var(--space-4) 0 0;border:0}
  .rx tfoot td{display:block;padding:0;border:0;text-align:left}
  .rx tfoot td:empty{display:none}
}

/* THE DESK SUMMARY: a desk's Suggested view, in Freya's name (28 Sep 2026). The scene's ground and
   words; Freya's mark and name on top; then up to four boxes in order of importance. Two to a row
   in the column a desk page has, four only on a very wide one, one on a phone. The Needs-you box is
   the Needs-you card: Champagne, a Bullion hairline, the page's one bullion key. */
.brief .sc-words{display:flex;flex-direction:column}
.brief .sc-answer{max-width:28ch;text-wrap:balance}
.brief .sc-sub{max-width:58ch}
.br-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.br-head .fy-mk{width:40px;height:40px}
.br-who{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;margin-right:auto}
.br-when{font-size:var(--text-label);color:var(--text-secondary)}
.br-ask{flex:none}
.br-boxes{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.br-boxes > li:first-child:nth-last-child(odd){grid-column:1 / -1}
@container (min-width:1040px){.br-boxes{grid-template-columns:repeat(var(--n),minmax(0,1fr))}.br-boxes > li:first-child:nth-last-child(odd){grid-column:auto}}
@container (max-width:519px){.br-boxes{grid-template-columns:minmax(0,1fr)}}
.br-box{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-5);border-radius:var(--r-tile);
  background:color-mix(in srgb,var(--bg-raised) 78%,transparent);container-type:inline-size}
.br-box.att{background:color-mix(in srgb,var(--gold-light) 30%,var(--bg-raised));box-shadow:inset 0 0 0 1px var(--gold)}
.br-k{display:flex;align-items:center;gap:var(--space-2);min-height:24px}
.br-k .status-label{margin-right:auto;white-space:nowrap}
.br-k .ic{flex:none;width:var(--card-icon);height:var(--card-icon);color:var(--heading)}   /* the tile's icon, as on the Statement's tiles */
.br-k .br-kind-needs{background:var(--bg-raised);color:var(--heading)}
.br-bell{position:relative;display:inline-flex;flex:none}
.br-bell::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;
  background:var(--warning);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold-light) 30%,var(--bg-raised))}
.br-v{margin-top:var(--space-2);font:var(--weight-heading) min(var(--text-title),14cqi)/1.15 var(--font);letter-spacing:var(--track-heading);color:var(--heading);overflow-wrap:anywhere}
.br-l{font-size:var(--text-reading);line-height:var(--lh-reading);color:var(--text-secondary)}
.br-l b{font-weight:var(--weight-label);color:var(--text)}
.br-act{margin-top:auto;padding-top:var(--space-3)}
:root[data-mode-now="dark"] .br-box{background:color-mix(in srgb,var(--bg-raised) 64%,transparent)}
:root[data-mode-now="dark"] .br-box.att{background:color-mix(in srgb,var(--gold) 14%,var(--bg-raised))}
:root[data-mode-now="dark"] .br-bell::after{box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 14%,var(--bg-raised))}
@media (max-width:640px){
  .br-head .fy-mk{width:32px;height:32px}
  .br-ask{display:none}   /* Freya's bar is at the foot of a phone's screen already */
  .br-box{padding:var(--space-4)}
  .br-l{font-size:var(--text-label);line-height:1.5}
}

/* THE "i" TAGS (28 Sep 2026): the brand's info icon after a term, and one tip for the page. The icon
   is quiet (tertiary) until pointed at or open, when it takes the link green; on touch it reaches
   ~44px through an invisible hit area. The tip is the frame's tip: black with white words, Midnight
   Violet on the dark ground. */
.gl{white-space:nowrap}   /* holds the term's last word to its "i" — gl() in app.js wraps only that word */
/* A RAISED MARK, SOLID, AFTER THE PUNCTUATION (Rose, 29 Sep 2026: "can we not place the i just
   before a full stop, raise it a little, solid black or white, a little smaller"). It sits like a
   footnote mark: raised to the top of the capitals, after any full stop or comma that touches the
   term (app.js moves the punctuation in front of it), a solid circle in the heading colour with the
   "i" cut out in the page colour — black with a white i, white with a black i on the dark ground.
   16px in running text, 20px in a headline (was 20 and 26); a faint wash under the pointer.
   The raise is set by where the mark's top lands: just over the capitals of the text it follows
   (the em is that text's size — the key inherits it). In running text the mark is taller than the
   capitals, so it rises only a little; in a headline it sits clear above the line's middle. */
.gl-i{--gli:var(--key-icon-s);position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:calc(var(--gli) + var(--space-1));height:calc(var(--gli) + var(--space-1));margin:0;padding:0;border:0;border-radius:50%;
  background:none;color:var(--heading);cursor:default;font-size:inherit;vertical-align:calc(1em - var(--gli));transition:background-color var(--t-state) var(--ease)}
/* LOCKED (29 Sep 2026: on the Statement's tiles it came out green and small — the tile colours and
   sizes every icon in it). The mark always takes its own size and the heading colour, whatever it
   sits in: button.gl-i outranks any container's ".x .ic". */
button.gl-i .ic{width:var(--gli);height:var(--gli);color:inherit;stroke-width:1.75}
button.gl-i .ic circle{fill:currentColor;stroke:none}
button.gl-i .ic path{stroke:var(--bg);stroke-width:2.25}
.gl-i:hover,.gl-i[aria-expanded="true"]{background:color-mix(in srgb,var(--heading) 8%,transparent)}
.gl-i:focus-visible{outline:2px solid var(--heading);outline-offset:1px}
@media (pointer:coarse){.gl-i::after{content:"";position:absolute;inset:-12px}}
.sc-answer .gl-i{--gli:var(--key-icon-l);vertical-align:calc(.82em - var(--gli))}   /* in a headline: 20px */
/* THE QUESTION'S "i" (4 Oct 2026): after every quest's question, at a headline's size; its tip says what the
   question asks in plain words, then each money word in it, under a hairline */
.quest-q .gl-i{margin-left:var(--space-1)}
.gl-tip .gl-w{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid color-mix(in srgb,currentColor 24%,transparent)}
.gl-tip .gl-w b{margin-bottom:2px;font-size:var(--key-label-m)}
.hl-kn{display:inline-flex;align-items:center;min-width:0;margin-right:auto}
.hl-kn .hl-kt,.hl-kn .status-label{margin-right:0}
.gx-ctl-row{display:flex;align-items:center;gap:var(--space-1)}
.gl-tip{position:fixed;z-index:70;left:0;top:0;max-width:min(320px,calc(100vw - 24px));padding:var(--space-3) var(--space-4);border-radius:var(--r-chip);
  background:var(--heading);color:var(--bg);pointer-events:none;opacity:0;
  box-shadow:0 10px 30px color-mix(in srgb,var(--black) 22%,transparent);transition:opacity var(--t-move) var(--ease)}
/* only the opacity animates — the tip follows the pointer with no lag (the brand's Tip rule) */
.gl-tip.on{opacity:1}
/* THE ARROW THAT GROWS OVER AN "i" (29 Sep 2026; app.js, ARROW). While it shows, the real cursor is hidden —
   over the "i" itself, and everywhere for the moment it takes to shrink back. The wrapper follows the
   pointer with no delay; only the arrow inside animates, from its tip (the hotspot). */
.gl-cursor{position:fixed;left:0;top:0;z-index:80;width:0;height:0;pointer-events:none;visibility:hidden}
.gl-cursor.on{visibility:visible}
.gl-cursor svg{position:absolute;left:-5px;top:-3px;width:24px;height:24px;overflow:visible;transform-origin:5px 3px;transition:transform var(--t-move) var(--ease)}
.gl-cursor.big svg{transform:scale(1.5)}
.gl-cursor path{fill:var(--black);stroke:var(--white);stroke-width:1.25;stroke-linejoin:round}
html.gl-cur .gl-i,html.gl-cur-hide,html.gl-cur-hide *{cursor:none!important}
.gl-tip b{display:block;margin-bottom:var(--space-1);font:var(--weight-heading) var(--text-reading)/1.3 var(--font)}
.gl-tip span{display:block;font:var(--weight-reading) var(--key-label-m)/1.5 var(--font)}
:root[data-mode-now="dark"] .gl-tip{background:var(--midnight-violet);color:var(--white)}
@media (prefers-reduced-motion:reduce){.gl-tip{transition:opacity var(--t-state) linear}}
/* a column's "i" tag on a phone: the first row shown carries it on the column's name (glFirst) */
.td-lab{display:none}
@media (max-width:640px){
  .data-table td.has-lab::before{content:none}
  .data-table td.has-lab > .td-lab{display:inline-flex;align-items:center;grid-row:1 / span 6;grid-column:1;justify-self:start;align-self:baseline;
    font-size:var(--text-label);color:var(--text-tertiary);text-align:left;white-space:nowrap}
  .data-table tbody tr:not(.gl-first) .td-lab .gl-i{display:none}
  .data-table td.tb-share.has-lab > .td-lab{margin-right:auto}
  .rx .td-lab{display:none!important}
}
/* two keys under a phone's page title share the row when their words fit, and stack when they do not
   ("Update the will record" ran out of its half) */
@media (max-width:520px){.page-head-actions .key{flex:1 1 auto}}

/* ══ THE WHAT-IF TOOLS (28 Sep 2026) ══════════════════════════════════════════════════════
   Set-aside planner (Wealth planning), Retirement runway (its page), Mix lab (its page), Cash
   runway (Safety check), The cost of waiting (a Learn quest). A tool is a scene in its desk's
   ground: the words and the tiles, then the controls beside the picture — controls left once the
   scene is wide enough (a container query), under the picture on a phone — then the legend every
   forecast carries, How the numbers work, the numbers and questions for Freya. Marks as the
   scenes: 2px lines in the pressed green, ranges in a wash, a loss in Fiery (the Mix lab's worst
   year, Christian's choice, 28 Sep 2026), the words of a loss in a table in the error words.
   Every colour is a token or a mix of tokens, so dark mode follows. */
.sim{--sim-line:var(--primary-pressed);--sim-band:color-mix(in srgb,var(--primary-48) 42%,transparent);--sim-soft:var(--primary-72);--sim-ref:var(--text-tertiary);
  --sim-loss:var(--warning);--sim-loss-wash:color-mix(in srgb,var(--warning) 14%,transparent);--sim-alt:var(--ref-1);--sim-alt-wash:color-mix(in srgb,var(--ref-1) 16%,transparent)}   /* a second line: copper, the line rule's first reference (CHART COLOURS) */
:root[data-mode-now="dark"] .sim{--sim-line:var(--primary-48);--sim-band:color-mix(in srgb,var(--primary-48) 30%,transparent);--sim-alt-wash:color-mix(in srgb,var(--ref-1) 26%,transparent)}
.sim-words{min-width:0}
.sim-words .sc-answer{max-width:32ch}
.sim-words .sc-answer b{white-space:normal}
.sim-words .sc-sub[hidden]{display:none}
.sim-loss{color:var(--sim-loss)}
.sim-facts li.loss .hl-v{color:var(--sim-loss)}
/* a tool's tiles say what they are in full, and a long value wraps rather than leaves its tile */
.sim-facts .hl-kt{white-space:normal;overflow:visible}
.sim-facts .hl-k{align-items:flex-start}
.sim-facts .hl-v,.sc-facts.hl.sim-facts .hl-v{white-space:normal}   /* the tile rule is more specific: without the second selector a long value ran out of its tile */
.sim-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);margin-top:var(--space-6)}
@container (min-width:760px){.sim-grid{grid-template-columns:minmax(248px,4fr) minmax(0,8fr);gap:var(--space-6);align-items:start}}
.sim-ctl{order:2;display:flex;flex-direction:column;gap:var(--space-5);min-width:0;padding:var(--space-5);border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg-raised) 76%,transparent)}
@container (min-width:760px){.sim-ctl{order:0}}
.sim-out{min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.sim-c{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.sim-c-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);font:var(--weight-label) var(--text-label)/1.35 var(--font);color:var(--text)}
.sim-c-h label,.sim-lbl{font:inherit;color:inherit}
.sim-c-h output{font-weight:var(--weight-heading);color:var(--heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-hint{margin:0;font-size:var(--text-label);line-height:1.45;color:var(--text-secondary)}
.sim .seg-wrap{align-self:flex-start;max-width:100%}
.sim-ctl .seg-l{display:none}.sim-ctl .seg-s{display:inline}
.sim-out > .sim-c{margin-bottom:var(--space-2)}
.record-sub.sim-wrap{white-space:normal}
.sim-money{font-weight:var(--weight-heading);color:var(--heading);font-variant-numeric:tabular-nums}
.sim-reset{font-size:inherit;padding:0;border:0;background:none;cursor:pointer}

/* the picture */
.sim-chart{position:relative;min-width:0}
.sim-svg{display:block;width:100%;height:auto;overflow:visible}
.sim-grid-l line{stroke:color-mix(in srgb,var(--heading) 9%,transparent);stroke-width:1}
.sim-zero{stroke:var(--border-strong);stroke-width:1}
.sim-ref{stroke:var(--text-secondary);stroke-width:1}
.sim-ref.dash{stroke-dasharray:6 4;stroke-width:1.5}
.sim-mark{stroke:var(--text-tertiary);stroke-width:1}
.sim-cross{stroke:var(--text-secondary);stroke-width:1}
.sim-dot{stroke:var(--scene,var(--bg-raised));stroke-width:2}
.sim-hit{fill:transparent;cursor:crosshair;outline:none}
.sim-hit:focus-visible{stroke:var(--heading);stroke-width:2}
.sc-svg text.sim-halo{paint-order:stroke;stroke:var(--scene,var(--bg-raised));stroke-width:4px;stroke-linejoin:round}
.sc-svg text.sim-loss-t{fill:var(--sim-loss)}
.sim-rng{stroke:var(--sim-band);stroke-width:10;stroke-linecap:round}
.sim-mid{fill:var(--sim-line);stroke:var(--scene,var(--bg-raised));stroke-width:2}
.pl-save{stroke:var(--heading);stroke-width:2}
.sim-tt{position:absolute;z-index:4;pointer-events:none;display:flex;flex-direction:column;gap:2px;min-width:160px;max-width:280px;
  padding:var(--space-2) var(--space-3);border-radius:var(--r-chip);background:var(--bg-raised);box-shadow:0 8px 24px color-mix(in srgb,var(--black) 16%,transparent);
  font-size:var(--text-label);line-height:1.4;color:var(--text);opacity:0;transition:opacity var(--t-state) var(--ease)}
.sim-tt.on{opacity:1}
.sim-tt-h{font-weight:var(--weight-label);color:var(--text-secondary);margin-bottom:2px}
.sim-tt-r{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.sim-tt-r i{display:inline-block;flex:none;width:14px}
.sim-tt-r i.ln{height:0;border-top:2px solid}
.sim-tt-r i.band{height:8px;border-radius:2px}
.sim-tt-r b{font-weight:var(--weight-heading);color:var(--heading)}
.sim-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:var(--text-label);color:var(--text-secondary)}
.sim-legend:empty{display:none}
.sim-legend span{display:inline-flex;align-items:center;gap:6px}
.sim-legend i{display:inline-block;flex:none;width:14px;height:0;border-top:2px solid}
.sim-legend i.sw{width:12px;height:12px;border:0;border-radius:3px}
.sim-legend i.band{height:10px;border:0;border-radius:2px}
.sim-legend i.area{height:10px;border:0;border-top:2px solid;border-radius:0}
.sim-legend i.dash{border-top-style:dashed}

/* the foot: the legend every forecast carries, the way to the method, the numbers, Freya */
.sim-foot{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.sim-legal{margin:0;font-size:var(--text-label);line-height:1.5;color:var(--text-secondary);max-width:92ch}
.sim-legal b{color:var(--text);font-weight:var(--weight-label)}
.sim-keys{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:flex-start}
.sim-num > summary{list-style:none;width:max-content;cursor:pointer}
.sim-num > summary::-webkit-details-marker{display:none}
.sim-num[open]{flex-basis:100%}
.sim-num-in{margin-top:var(--space-3);overflow-x:auto}
.sim-ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.sim-ask-h{display:inline-flex;align-items:center;gap:var(--space-2);margin-right:var(--space-2);font:var(--weight-label) var(--text-label)/1 var(--font);color:var(--text)}
.sim-ask-h .fy-mk{width:24px;height:24px}
.sim-ask .key{white-space:normal;text-align:left;height:auto;min-height:var(--key-height-s);padding-block:6px;line-height:1.3}

/* Mix lab: a slider a class, the track record under the range */
.sim-mix{display:flex;flex-direction:column;gap:var(--space-3)}
.sim-mixr{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:6px 10px;align-items:center}
.sim-mixr > i{width:12px;height:12px;border-radius:3px}
.sim-mixr label{font:var(--weight-label) var(--text-label)/1.25 var(--font);color:var(--text)}
.sim-mixr output{font:var(--weight-heading) var(--text-label)/1 var(--font);color:var(--heading);font-variant-numeric:tabular-nums}
.sim-mixr .slider{grid-column:2 / 4;height:24px}
.sim-track{margin-top:var(--space-7);display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.sim-h3{margin:0;font:var(--weight-heading) var(--text-subhead)/var(--lh-subhead) var(--font);color:var(--heading)}
.sim-h4{margin:var(--space-4) 0 0;font:var(--weight-heading) var(--text-reading)/1.3 var(--font);color:var(--heading)}
.sim-note{margin:0;color:var(--text-secondary);max-width:72ch}
.sim-facts.sim-facts-4{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.sim-deck-wrap{overflow-x:auto;border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg-raised) 82%,transparent)}
table.sim-deck{width:100%;border-collapse:collapse;font-size:var(--text-label)}
table.sim-deck th,table.sim-deck td{padding:10px var(--space-4);border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
table.sim-deck tr:last-child > *{border-bottom:0}
table.sim-deck thead th{font-weight:var(--weight-heading);color:var(--heading);border-bottom-color:var(--border-strong)}
table.sim-deck .num{text-align:right;font-variant-numeric:tabular-nums}
table.sim-deck th[scope=row]{font-weight:var(--weight-label);color:var(--text);white-space:nowrap}
table.sim-deck td.neg{color:var(--text-error);font-weight:var(--weight-label)}
@container (max-width:620px){
  table.sim-deck thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.sim-deck tbody tr{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:2px var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
  table.sim-deck tbody tr:last-child{border-bottom:0}
  table.sim-deck th,table.sim-deck td{padding:0;border:0}
  table.sim-deck th[scope=row]{grid-column:1 / -1;white-space:normal;margin-bottom:2px}
  table.sim-deck td.num{text-align:left}
  table.sim-deck td::before{content:attr(data-m);display:block;font-weight:var(--weight-reading);color:var(--text-tertiary)}
}

/* the Set-aside planner's staircase: a list of the eight ways to hold the money, each bar longer
   than the one before; two columns (everyday money · family office) from 640px, and steps side by
   side, rising, once the scene is wide enough for eight of them (1060px) */
.pl-stairs{margin-top:var(--space-6);padding:var(--space-5);border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg-raised) 76%,transparent);display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.pl-keys{display:flex;gap:var(--space-2)}
.pl-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);min-width:0}
.pl-grp{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.pl-grp.fo{padding-top:var(--space-4);border-top:2px solid var(--heading)}
.pl-gh{margin:0;font:var(--weight-heading) var(--text-label)/1.35 var(--font);color:var(--text-link)}
.pl-gh span{display:block;font-weight:var(--weight-reading);color:var(--text-secondary)}
.pl-row{display:flex;flex-direction:column;gap:var(--space-2)}
.pl-step{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-chip);border:1px solid var(--border-strong);
  background:var(--bg-raised);cursor:pointer;text-align:left;font:inherit;color:var(--text);transition:background var(--t-state) var(--ease),color var(--t-state) var(--ease)}
.pl-step:hover{border-color:var(--heading)}
.pl-bar{grid-column:1 / -1;grid-row:2;display:block;height:6px;width:var(--w);border-radius:4px;background:var(--primary-24)}
.pl-nm{font:var(--weight-label) var(--text-label)/1.25 var(--font)}
.pl-pc{font:var(--weight-heading) var(--text-reading)/1 var(--font);color:var(--heading);font-variant-numeric:tabular-nums}
.pl-step[aria-checked="true"]{background:var(--heading);border-color:var(--heading);color:var(--bg)}
.pl-step[aria-checked="true"] .pl-pc{color:var(--bg)}
.pl-step[aria-checked="true"] .pl-bar{background:var(--primary-48)}
.pl-step:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
@container (min-width:640px){
  .pl-steps{grid-template-columns:minmax(0,5fr) minmax(0,4fr);align-items:start}
  .pl-grp.fo{padding:0 0 0 var(--space-5);border-top:0;border-left:2px solid var(--heading)}
}
@container (min-width:1060px){
  .pl-steps{display:flex;align-items:flex-end}
  .pl-grp{flex:5 1 0}.pl-grp.fo{flex:3 1 0}
  .pl-row{flex-direction:row;align-items:flex-end}
  .pl-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:var(--space-2)}
  .pl-bar{height:var(--h);width:100%}
}
.pl-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border)}
@container (min-width:760px){.pl-stage{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.pl-st-a h3{margin:0;font:var(--weight-heading) var(--text-subhead)/var(--lh-subhead) var(--font);color:var(--heading)}
.pl-st-a p{margin:4px 0 0;font-size:var(--text-label);line-height:1.45;color:var(--text-secondary)}
.pl-mixbar{display:flex;gap:2px;height:14px;margin-top:var(--space-3)}
.pl-mixbar i{display:block;border-radius:3px;min-width:3px}
.pl-mixkey{display:flex;flex-wrap:wrap;gap:4px var(--space-3);margin-top:var(--space-2);font-size:var(--text-label);color:var(--text-secondary)}
.pl-mixkey span{display:inline-flex;align-items:center;gap:5px}
.pl-mixkey i{width:10px;height:10px;border-radius:2px;display:inline-block}
.pl-st-b{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-4)}
.pl-st-b dt{font:var(--weight-label) var(--text-label)/1.35 var(--font);color:var(--text-secondary)}
.pl-st-b dd{margin:2px 0 0;font:var(--weight-heading) var(--text-reading)/1.2 var(--font);color:var(--heading)}
.pl-st-b dd.neg{color:var(--sim-loss)}
.pl-st-b dd small{display:block;margin-top:2px;font:var(--weight-reading) var(--text-label)/1.35 var(--font);color:var(--text-tertiary)}
@container (max-width:420px){.pl-st-b{grid-template-columns:minmax(0,1fr)}}
.pl-goals{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}
.pl-goal{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"top move need" "bar bar bar" "meta meta meta";gap:6px var(--space-4);align-items:center;
  padding:var(--space-3) var(--space-4);border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg-raised) 82%,transparent)}
.pl-gtop{grid-area:top;display:flex;align-items:center;gap:var(--space-2);min-width:0;flex-wrap:wrap}
.pl-gname{font-weight:var(--weight-heading);color:var(--heading)}
.pl-gbar{grid-area:bar;display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--heading) 9%,transparent);overflow:hidden}
.pl-gbar i{display:block;height:100%;border-radius:3px}
.pl-gmeta{grid-area:meta;margin:0;font-size:var(--text-label);line-height:1.45;color:var(--text-secondary)}
.pl-gmove{grid-area:move;display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-label);color:var(--text-secondary)}
.pl-gdate{min-width:64px;text-align:center;color:var(--heading);font-weight:var(--weight-label)}
.pl-mv{min-width:var(--key-height-s);padding:0;font-size:var(--text-reading)}
.pl-gneed{grid-area:need;margin:0;font-weight:var(--weight-heading);color:var(--heading);text-align:right;white-space:nowrap;min-width:110px}
@container (max-width:640px){
  .pl-goal{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top need" "bar bar" "meta meta" "move move";align-items:start}
  .pl-gneed{min-width:0}
}

/* the way in, under a desk's summary */
.sim-try{margin-top:var(--space-6)}
.sim-try .section-h{margin-bottom:var(--space-3)}
.sim-try-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--space-3)}
.sim-try-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);border-radius:var(--r-card);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--border);
  color:var(--text);text-decoration:none;transition:box-shadow var(--t-state) var(--ease)}
.sim-try-card:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.sim-try-card:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
.sim-try-card b{font:var(--weight-heading) var(--text-reading)/1.4 var(--font);color:var(--heading)}
.sim-try-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--space-2);font:var(--weight-label) var(--text-label)/1 var(--font);color:var(--text-link)}
.sim-try-go .ic{width:16px;height:16px}

/* How the numbers work: the page and the sheet */
.sim-limits,.sim-src{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--space-2);color:var(--text);max-width:80ch}
.sim-src{font-size:var(--text-label)}
.sim-legend-box h3{margin-top:0}
.sim-sheet-p{margin:0 0 var(--space-3);line-height:var(--lh-reading);color:var(--text)}
.sim-sheet-h{margin:var(--space-5) 0 var(--space-3);font:var(--weight-heading) var(--text-reading)/1.3 var(--font);color:var(--heading)}
.sheet .sim-legal{margin-top:var(--space-4)}
.sim-empty .actions{margin-top:var(--space-5)}

/* The cost of waiting, inside its quest */
.quest .sim-wait{margin-top:var(--space-6)}

/* ══ HOME (redone 28 Sep 2026) ══════════════════════════════════════════════════════════
   The whole household in one screen: Freya's summary, the five desks and Learn as cards in their
   own grounds, what you own, what is coming up beside the what-if tools, and where you left off.
   Short on words: each card is a status, one figure, one line and one small picture, all drawn on
   the same 6px line. */
.screen.home{gap:var(--space-7)}
.screen.home > .page-head{margin-bottom:calc(-1 * var(--space-4))}
.hm-sec{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
/* (Was HOME'S BRIEF ON THE BRAND WASH, Rose 29 Sep 2026: the hero wash with white words.) */
/* LIGHT AGAIN (3 Oct 2026, after the deep user test: "too much dark green ... felt gloomy"). The wash
   made the first thing on the dashboard the darkest. Freya's summary sits on her own light grey, the
   grey of her glass, with a hairline edge; FREYA IS BLACK (Christian, 3 Oct 2026), so the colour roles
   at the end of this file make its keys and eyebrow black (white in dark). */
.hm-brief{--scene:var(--fy-ground);box-shadow:inset 0 0 0 1px var(--fy-edge)}
.hm-brief .sc-answer{max-width:26ch}
.hm-keys{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-5)}

/* the desks: three to a row on a desktop, two on a tablet, one on a phone */
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));gap:var(--space-3)}
.hm-desk{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;
  padding:var(--space-5);border-radius:var(--r-card);background:var(--scene);color:var(--text);text-decoration:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--t-state) var(--ease)}
/* the cards' colour, light and dark, is the brand's: the one desk colour (brand REV 59) */
.hm-desk:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--heading) 22%,transparent)}
.hm-desk:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
.hm-dh{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);min-height:28px;padding-right:calc(var(--hm-icon) + var(--space-2))}
/* THE DESK'S ICON: TOP RIGHT, LARGER, BLACK (Rose, 29 Sep 2026: "do not make icons green — they
   should stay black"; at 18px beside the name they were "way too small — they blur"). 32px in
   the card's top-right corner, in the heading colour (white on the dark ground); the name now
   starts at the card's left edge. Learn's line icon takes the plates' line weight, or at this
   size it would read heavier than the five desks beside it. */
.hm-desk{--hm-icon:32px}
.hm-dh .ic-section,.hm-dh > .ic{position:absolute;top:var(--space-4);right:var(--space-4);width:var(--hm-icon);height:var(--hm-icon);color:var(--heading)}
.hm-dh > .ic{stroke-width:1.4}
.hm-dh b{font:var(--weight-heading) var(--text-reading)/1.2 var(--font);color:var(--heading)}
.hm-st{align-self:flex-start;white-space:nowrap}
/* ON THE CARD'S TINT THE QUIET LABELS SIT ON WHITE (Rose, 29 Sep 2026: "too weak on that
   background"): neutral and ok take the page colour as their ground — white, the dark ground in
   dark mode — keeping their words; attention keeps its Champagne. */
.hm-st:is(.neutral,.ok){background:var(--bg)}
/* ON THE DARK GROUND A CHIP IS A CLEAR STEP UP FROM ITS CARD (Rose, 29 Sep 2026: "the chips are too
   weak"): the grey chip a light wash (white at 10%) over whatever card it sits on; the green chip a real
   green (the brand green at half) with white words. The light ground is unchanged. */
:root[data-mode-now="dark"] .status-label.neutral{background:color-mix(in srgb,var(--white) 10%,transparent)}
:root[data-mode-now="dark"] .status-label.ok{background:color-mix(in srgb,var(--primary) 50%,transparent);color:var(--white)}
.hm-v{margin-top:var(--space-1);font:var(--weight-heading) var(--text-title)/1.1 var(--font);letter-spacing:var(--track-heading);color:var(--heading);font-variant-numeric:tabular-nums}
.hm-l{font-size:var(--text-label);line-height:1.45;color:var(--text-secondary)}
.hm-l b{font-weight:var(--weight-label);color:var(--text)}
.hm-vis{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:var(--space-4)}
.hm-cap{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-label);line-height:1.3;color:var(--text-secondary)}
.hm-cap span:only-child{margin-left:0}
/* the six small pictures, one line each */
.hm-bar,.hm-mix,.hm-band,.hm-year,.hm-will,.hm-path{position:relative;display:flex;height:6px;border-radius:3px;background:color-mix(in srgb,var(--heading) 10%,transparent)}
.hm-bar{gap:2px;background:none}
.hm-bar i{display:block;height:100%;border-radius:3px;background:var(--primary-pressed)}
.hm-bar i:only-child{background:var(--primary-pressed)}
.hm-bar i.owe{background:var(--l-owed)}
.hm-mix{gap:2px;background:none}
.hm-mix i{display:block;height:100%;border-radius:3px;min-width:3px}
.hm-band i{position:absolute;top:0;bottom:0}
.hm-band .rng{border-radius:3px;background:var(--primary-48)}
.hm-band .tgt{width:2px;margin-left:-1px;top:-3px;bottom:-3px;background:var(--heading)}
.hm-band .now{width:12px;height:12px;margin:-3px 0 0 -6px;border-radius:50%;background:var(--heading);box-shadow:0 0 0 2px var(--scene)}
.hm-band .now.out{background:var(--gold)}
.hm-year i{position:absolute;top:-3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--primary-pressed);box-shadow:0 0 0 2px var(--scene)}
.hm-year i.soon{background:var(--gold)}
.hm-will .lived{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--primary-pressed)}
.hm-will .today{position:absolute;top:-3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--heading);box-shadow:0 0 0 2px var(--scene)}
.hm-path{gap:3px;background:none}
.hm-path i{flex:1;height:100%;border-radius:3px;background:color-mix(in srgb,var(--heading) 12%,transparent)}
.hm-path i.done{background:var(--primary-pressed)}
.hm-path i.now{background:var(--primary-48)}
:root[data-mode-now="dark"] :is(.hm-bar i,.hm-year i,.hm-will .lived,.hm-path i.done){background:var(--primary-72)}
:root[data-mode-now="dark"] .hm-bar i.owe{background:var(--l-owed-2)}
:root[data-mode-now="dark"] .hm-year i.soon,:root[data-mode-now="dark"] .hm-band .now.out{background:var(--gold)}
@media (max-width:640px){.hm-desk{padding:var(--space-4)}.hm-v{font-size:var(--text-subhead)}}

/* coming up, beside the what-if tools; stacked on a tablet and a phone */
.hm-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
@media (min-width:1100px){.hm-pair:not(.one){grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-6);align-items:start}}
.hm-pair .sim-try{margin-top:0;display:flex;flex-direction:column;gap:var(--space-4)}
.hm-pair .sim-try .section-h{margin-bottom:0}
@media (min-width:1100px){.hm-pair:not(.one) .sim-try-list{grid-template-columns:minmax(0,1fr)}}
.hm-coming .tl-card{padding:var(--space-4) var(--space-5)}

/* PROFILE · THE FINE PRINT (29 Sep 2026): How the numbers work left Policy's menu for Profile, where
   it sits under "Fine print" in the sub menu and at the foot of the overview, the way a website
   ends on its footer: one quiet line over a hairline, never a card. */
.pf-fine{margin:var(--space-7) 0 0;padding-top:var(--space-4);border-top:var(--line-hairline) solid var(--border);max-width:none}
.pf-fine b{color:var(--text-secondary);font-weight:var(--weight-label)}
.pf-fine .link{font-size:inherit}

/* The live auth shell and tutorial save dialog also inherit .product; preserve their original green. */
.product :is(.auth-shell,.tutorial-review){
  --primary:var(--brand-green);--primary-hover:var(--brand-green-hover);--primary-pressed:var(--brand-green-pressed);
  --primary-72:var(--brand-72);--primary-48:var(--brand-48);--primary-24:var(--brand-24);--primary-12:var(--brand-12);--primary-6:var(--brand-6);
  --text-link:var(--brand-link);--bg-selected:var(--brand-sel);--text-selected:var(--brand-sel-text);--focus:var(--brand-link)
}


/* ── THE HOME WALK · the onboarding test (2 Oct 2026) ─────────────────────────────────────
   The look of the HOME WALK block in app.js. The walk is a modal <dialog> over the whole screen:
     · the spot — one box the size of the lit part whose shadow is the veil, so the page fades
       everywhere but there; its corner is the part's own. Round it, the brand link's focus ring
       (2px primary, 3px out: components.css .link:focus-visible);
     · the welcome — one raised card in the middle: the panel's face and corner (--bg-raised,
       --r-card), the strong border, Freya's mark, the subhead, reading text, an S key and a link;
     · the guide (direction B, Rose, 2 Oct 2026) — Freya's bar opening: a raised card as wide as her
       row, just above her bar, in the same place on every step. A head of her mark, a bar per step
       (4px and round, as the slider's track), the count and the close key; then the part's name as
       the eyebrow, the title rung for the headline (the subhead on a phone), reading text, and the
       ordinary M keys. It keeps one height through the walk (its tallest step's), so nothing in it
       moves but the words. On a tablet and up the words take the left and Back and Next sit at the foot
       on the right; on a phone the keys go under the words and Next fills the line. Dark mode lifts
       it off the page with the key's top edge, a hairline and a deeper shadow. On a short screen
       (760px high or less) it is tighter and its headline drops to the subhead, so the part keeps
       its room.
   THE VEIL IS A PROPOSAL (Rose chose it over the brand's 28% black scrim, 2 Oct 2026): light fades
   the page into its own ground, as Learn's veil does (.lm-veil, --bg at 72%), so the lit part is
   the one thing left in colour. Dark keeps a black dim, since a veil of the near-black ground
   would hardly show: 64%, until Rose picks between 48 and 64. Both become a brand REV when the
   walk is signed off; so does the 380px of the welcome and the hold's card, a component size the
   brand doesn't have yet (like --sheet-w). */
.walk,.walk-hold{--walk-dim:color-mix(in srgb,var(--bg) 72%,transparent);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:none;color:var(--text);overflow:hidden}
:root[data-mode-now="dark"] :is(.walk,.walk-hold){--walk-dim:color-mix(in srgb,var(--black) 64%,transparent)}
.walk::backdrop{background:none}
.walk[open]:not(.is-held){animation:walk-in var(--t-move) var(--ease)}
@keyframes walk-in{from{opacity:0}}
.walk-spot{position:absolute;left:var(--walk-x,50%);top:var(--walk-y,50%);width:var(--walk-w,0px);height:var(--walk-h,0px);
  transform:translateY(calc(-1 * var(--walk-sy,0px)));border-radius:var(--walk-r,var(--r-card));box-shadow:0 0 0 100vmax var(--walk-dim);
  outline:2px solid var(--primary);outline-offset:3px;pointer-events:none;
  transition:left var(--t-move) var(--ease),top var(--t-move) var(--ease),width var(--t-move) var(--ease),height var(--t-move) var(--ease),
    border-radius var(--t-move) var(--ease),outline-color var(--t-move) var(--ease)}
.walk:not([data-walk-at]) .walk-spot{outline-color:transparent}
.walk-card{position:absolute;box-sizing:border-box;width:min(380px,calc(100% - 2 * var(--space-4)));
  background:var(--bg-raised);border:var(--line-object) solid var(--border-strong);border-radius:var(--r-card);
  padding:var(--space-4) var(--space-5) var(--space-5);box-shadow:0 10px 30px color-mix(in srgb,var(--black) 12%,transparent)}
.walk-card[hidden]{display:none}
.walk-welcome{left:50%;top:50%;transform:translate(-50%,-50%);padding-top:var(--space-5)}
.walk-welcome .fy-mk{display:block;width:40px;height:40px}   /* her mark at the size it has in her summary's head */
.walk-title{margin:var(--space-1) 0 0;font:var(--weight-heading) var(--text-subhead)/var(--lh-subhead) var(--font);letter-spacing:var(--track-heading);color:var(--heading)}
.walk-welcome .walk-title{margin-top:var(--space-4)}
.walk-line{margin:var(--space-2) 0 0;font-size:var(--text-reading);line-height:var(--lh-reading);color:var(--text-secondary);text-wrap:pretty}
.walk-keys{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-5)}
.walk-welcome .walk-keys{justify-content:flex-start;gap:var(--space-5)}
.walk button.link{background:none;border-top:0;border-inline:0;padding-top:0;padding-inline:0;font-family:inherit;cursor:pointer}
/* the guide: Freya's bar opening */
.walk-guide{display:flex;flex-direction:column;padding:var(--space-4) var(--space-5) var(--space-5);box-shadow:0 10px 30px color-mix(in srgb,var(--black) 36%,transparent)}
:root[data-mode-now="dark"] .walk-guide{box-shadow:var(--key-edge),0 0 0 var(--line-object) color-mix(in srgb,var(--white) 6%,transparent),0 16px 48px color-mix(in srgb,var(--black) 72%,transparent)}
.wg-head{display:flex;align-items:center;gap:var(--space-3);min-height:var(--key-height-m)}
.wg-head .fy-mk{width:32px;height:32px}   /* Freya speaking: her mark at her panel head's size */
.wg-bars{display:flex;gap:var(--space-1);flex:1;min-width:0}
.wg-bars i{flex:1;height:4px;border-radius:2px;background:var(--border-strong)}
.wg-bars i.on{background:var(--primary)}
.wg-bars i.now{background:var(--primary-48)}
.wg-n{font:var(--weight-label) var(--text-label)/1 var(--font);color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
.walk-guide .walk-say{flex:1 0 auto;margin-top:var(--space-4)}   /* a shorter step's words keep the keys at the foot */
.wg-eb{margin:0;color:var(--text-link)}
.walk-guide .walk-title{margin:var(--space-2) 0 0;font-size:var(--text-title);line-height:1.15;max-width:26ch;text-wrap:balance}
.walk-guide .walk-line{max-width:52ch}
.walk-guide .walk-keys{margin-top:var(--space-5);gap:var(--space-3)}
@media (min-width:769px){
  .walk-guide{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:var(--space-6);padding:var(--space-5) var(--space-6) var(--space-6)}
  .walk-guide .wg-head{grid-column:1 / -1}
  .walk-guide .walk-say{grid-column:1;margin-top:var(--space-5)}
  .walk-guide .walk-keys{grid-column:2;align-self:end;margin-top:0}
}
@media (max-width:768px){
  .walk-guide .walk-title{font-size:var(--text-subhead);line-height:var(--lh-subhead)}
  .walk-guide .walk-line{font-size:var(--text-label);line-height:1.5}
  .walk-guide .walk-keys{margin-top:var(--space-4)}
  .walk-guide .walk-keys [data-walk="next"]{flex:1;justify-content:center}
}
/* a short screen (a laptop's 650–760px, a small phone): the guide gives room back to the part */
@media (max-height:760px){
  .walk-guide{padding-block:var(--space-4)}
  .walk-guide .walk-say{margin-top:var(--space-3)}
  .walk-guide .walk-title{font-size:var(--text-subhead);line-height:var(--lh-subhead);max-width:none}
}
@media (max-height:760px) and (max-width:768px){.walk-guide .walk-keys{margin-top:var(--space-3)}}
/* ── HOLDING FREYA'S MARK · the beta's secret way in (2 Oct 2026) ───────────────────────────
   The walk's own pieces, in the top layer over everything (a popover, so the page stays live under
   the finger): the dim with a hole round her key and its ring, and the raised card above her — the
   brand's Draft tag for "Beta", and the slider's track for the bar (4px, round, the primary fill on
   the border colour: components.css .slider). The dim and the card come in over the first third
   of the hold; the bar fills all the way. */
.walk-hold{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:none;overflow:hidden;color:var(--text);pointer-events:none;z-index:90}
.walk-hold:not(.is-on){display:none}
/* NO RING ROUND HER KEY WHILE IT IS HELD (Rose, 4 Oct 2026: "i dont like the stroked circle"): the dim
   opens round her soft key, and the key itself is the edge */
.walk-hold .walk-spot{opacity:var(--hold-dim,0);transition:none;outline:0}
.walk-hold-card{padding-top:var(--space-5);opacity:var(--hold-dim,0);translate:0 calc((1 - var(--hold-dim,0)) * var(--space-2))}
.walk-hold-t{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:0}
.walk-hold-t .walk-title{margin:0}
.walk-hold .draft-tag{display:inline-block;margin:0}
.walk-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:var(--space-4)}
.walk-bar i{display:block;height:100%;width:calc(var(--hold-p,0) * 100%);background:var(--primary)}
.walk-hold-hint{margin:var(--space-2) 0 0;font-size:var(--text-label);line-height:var(--lh-reading);color:var(--text-secondary)}
/* her key holds still under a long press: no callout, no text selection */
#fy-bar [data-act="fy-toggle"]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ══ COLOUR ROLES (3 Oct 2026) ═══════════════════════════════════════════════════════════════
   After the deep user test of 2 Oct ("too much dark green ... gloomy", "maybe some blue around the
   desks features and keep the green around the learn and Freya and the platform skeleton in black
   and white"), from the concept in design/mockups/first-minutes-sandbox.html, section 05:
     · the skeleton stays black and white (the bars, menus, pages, type and lines)
     · the desks are blue: their keys, links, tints, opener grounds, Home's desk cards and the map
     · FREYA IS BLACK (Christian, 3 Oct 2026: "freya is black as the desks are blue, its only Learn which
       is green"): her summary, her bar and panel, her page and her map, the walk and the tutorial, every
       Ask Freya key and her chips. Black in light, white in dark, like her mark and the menus' current
       place: a near-black face on a black shelf, words white (black on the white face in dark)
     · green is Learn's alone: Learn's pages, its card on Home, the tags, "Opens next", the XP, and the
       tutorial's steps on Learn
     · Bullion is unchanged; the chart colours (the map, the asset classes, the lines) are their own
       block, CHART COLOURS, at the end of this file (3 Oct 2026, second round)
   ── PROPOSED TOKEN · NOT A BRAND VALUE YET ── Harbour, a calm blue at the brand green's depth (7.0:1
   on white), ramped the way Primary is. Rose to confirm or change before it reaches tokens.css; the
   two alternatives in the concept are Fjord #1F6A8A and Slate #47578F, a one-line change here. */
:root{
  --desk:#2B5C8A;
  --desk-hover:color-mix(in srgb,var(--desk) 92%,var(--white));
  --desk-pressed:color-mix(in srgb,var(--desk) 66%,var(--black));
  --desk-72:color-mix(in srgb,var(--desk) 72%,var(--white));
  --desk-48:color-mix(in srgb,var(--desk) 48%,var(--white));
  --desk-24:color-mix(in srgb,var(--desk) 24%,var(--white));
  --desk-12:color-mix(in srgb,var(--desk) 12%,var(--white));
  --desk-6:color-mix(in srgb,var(--desk) 6%,var(--white));
  --desk-text:var(--desk);
  --desk-sel:var(--desk-12);--desk-sel-text:var(--desk-pressed);
  --desk-ground:color-mix(in srgb,var(--desk) 7%,var(--bg-raised));--desk-edge:var(--desk-24);
  /* the brand green, kept by name, so Freya's and Learn's places can take it back */
  --brand-green:var(--primary);--brand-green-hover:var(--primary-hover);--brand-green-pressed:var(--primary-pressed);
  --brand-72:var(--primary-72);--brand-48:var(--primary-48);--brand-24:var(--primary-24);--brand-12:var(--primary-12);--brand-6:var(--primary-6);
  --brand-link:var(--text-link);--brand-sel:var(--bg-selected);--brand-sel-text:var(--text-selected);
  --green-ground:color-mix(in srgb,var(--primary) 6%,var(--bg-raised));--green-edge:var(--primary-24);
  /* FREYA'S BLACK IS THE PLATFORM'S OWN RAMP, black to white through the greys (the chart-colours
     sandbox, 07 · Freya and the platform): every step a brand token, so it turns with the mode by
     itself. Her key: the text colour on a black shelf; her boxes: the grey of her glass (--menu-bg) */
  --fy:var(--text);--fy-hover:color-mix(in srgb,var(--text) 86%,var(--bg));--fy-pressed:var(--black);
  --fy-72:var(--text-secondary);--fy-48:var(--text-tertiary);--fy-24:var(--border-strong);--fy-12:var(--border);--fy-6:var(--bg-sunken);
  --fy-text:var(--heading);--fy-sel:var(--bg-sunken);--fy-sel-text:var(--heading);--fy-key-ink:var(--white);
  --fy-ground:color-mix(in srgb,var(--bg-sunken) 70%,var(--bg));--fy-edge:var(--border);
  /* the map's six blues moved to CHART COLOURS below (3 Oct 2026, second round) */
}
/* dark: the tints mix into the dark ground and words take the 48% step, as Primary does */
:root[data-mode="dark"]{
  --desk-12:color-mix(in srgb,var(--desk) 24%,#161616);--desk-6:color-mix(in srgb,var(--desk) 12%,#161616);
  --desk-text:var(--desk-48);--desk-sel:color-mix(in srgb,var(--desk) 32%,#161616);--desk-sel-text:var(--white);
  --desk-ground:color-mix(in srgb,var(--desk) 18%,var(--bg-raised));--desk-edge:color-mix(in srgb,var(--desk) 40%,var(--bg-raised));
  --green-ground:color-mix(in srgb,var(--primary) 16%,var(--bg-raised));--green-edge:color-mix(in srgb,var(--primary) 40%,var(--bg-raised));
  /* Freya in dark: the same tokens turn by themselves; only her key's shelf and words are set here (the
     white face takes black words on a grey shelf, as the brand's .key-white) */
  --fy-pressed:var(--text-secondary);--fy-key-ink:var(--black);
  /* the map's dark steps: CHART COLOURS below */
}
/* blue by default: everything that acts in the office is a desk's work */
.product{--primary:var(--desk);--primary-hover:var(--desk-hover);--primary-pressed:var(--desk-pressed);
  --primary-72:var(--desk-72);--primary-48:var(--desk-48);--primary-24:var(--desk-24);--primary-12:var(--desk-12);--primary-6:var(--desk-6);
  --text-link:var(--desk-text);--bg-selected:var(--desk-sel);--text-selected:var(--desk-sel-text);--focus:var(--desk-text)}
/* black where Freya speaks: her page and map, her bar and panel, her walks, her summaries and every
   Ask Freya key. Learn's marks drawn on her map (the stems) follow her black too */
.product :is(#view[data-zone="freya"],#section-keys[data-zone="freya"],.dock,.fy-panel,.walk,.walk-hold,.tq-pill,.hm-brief,.br-head,[data-act="ask"],.fy-chip){
  --primary:var(--fy);--primary-hover:var(--fy-hover);--primary-pressed:var(--fy-pressed);
  --primary-72:var(--fy-72);--primary-48:var(--fy-48);--primary-24:var(--fy-24);--primary-12:var(--fy-12);--primary-6:var(--fy-6);
  --text-link:var(--fy-text);--bg-selected:var(--fy-sel);--text-selected:var(--fy-sel-text);--focus:var(--fy-text);
  --lm-trunk:var(--fy-pressed);--lm-done:var(--fy);--lm-open:var(--fy-72);--lm-leaf:var(--fy);--lm-leaf-old:var(--fy-72);--lm-ring:var(--fy);--lm-canopy:var(--fy-12)}
/* a filled key in her black has white words; in dark her key is white, so its words turn black. A selected
   key (the pressed grey in dark) takes the same ink */
.product :is(#view[data-zone="freya"],#section-keys[data-zone="freya"],.dock,.fy-panel,.walk,.walk-hold,.tq-pill,.hm-brief,.br-head) :is(.key:not(.key-secondary,.key-quiet,.key-bullion,.key-white),.msg-q,.key[aria-pressed="true"],.key[aria-current="page"]),
.product .key[data-act="ask"]:not(.key-secondary,.key-quiet){color:var(--fy-key-ink)}
/* green where Learn speaks, and only there */
.product :is(#view[data-zone="learn"],#section-keys[data-zone="learn"],.hm-learn,.br-opens,.opens-next,.opens-next-wrap,.lt){
  --primary:var(--brand-green);--primary-hover:var(--brand-green-hover);--primary-pressed:var(--brand-green-pressed);
  --primary-72:var(--brand-72);--primary-48:var(--brand-48);--primary-24:var(--brand-24);--primary-12:var(--brand-12);--primary-6:var(--brand-6);
  --text-link:var(--brand-link);--bg-selected:var(--brand-sel);--text-selected:var(--brand-sel-text);--focus:var(--brand-link)}
/* the desks' grounds: Blue on the openers and on Home's desk cards (was Earth, brand REV 57/59), one
   colour for all five as before; Learn's card and Freya's summary on the light green */
.product :is(.scene-records,.scene-policy,.scene-investment,.scene-protection,.scene-succession),.product .hm-desk{--scene:var(--desk-ground);box-shadow:inset 0 0 0 1px var(--desk-edge)}
:root[data-mode="dark"] .product :is(.scene-records,.scene-policy,.scene-investment,.scene-protection,.scene-succession),:root[data-mode="dark"] .product .hm-desk{--scene:var(--desk-ground)}
.product .hm-desk.hm-learn{--scene:var(--green-ground);box-shadow:inset 0 0 0 1px var(--green-edge)}
:root[data-mode="dark"] .product .hm-desk.hm-learn{--scene:var(--green-ground)}
.product .hm-desk:hover{box-shadow:inset 0 0 0 1px var(--desk-48)}
.product .hm-desk.hm-learn:hover{box-shadow:inset 0 0 0 1px var(--brand-48)}
:root[data-mode="dark"] .product .hm-brief{--scene:var(--fy-ground)}
/* the add key beside Freya's bar is the office's own action (add what you have), so it stays blue */
.product .dock .fy-add{--primary:var(--desk);--primary-hover:var(--desk-hover);--primary-pressed:var(--desk-pressed);--focus:var(--desk-text);--fy-key-ink:var(--white)}


/* ══ CHART COLOURS (3 Oct 2026) ═══════════════════════════════════════════════════════════════
   From the chart-colours sandbox, second round (design repo, mockups/chart-colours-sandbox.html),
   approved by Christian. Every value was set in OKLCH and checked with the data-viz validator, light
   on white and dark on #202020. The question picks the family:
     How much do we have?        your wealth: one blue in six steps, --map-1…6 (darker is larger on
                                 light, lighter is larger on dark), owed in the brand's grey
     What are we invested in?    the asset classes, --c-*, in two families: liquid is green (cash lime,
                                 bonds jade, listed equities deep green), illiquid is blue (hedge funds
                                 sky, real estate lavender, private credit cerulean, private equity royal);
                                 always in order of liquidity
     What sits inside a class?   five shades of that class, --h-<class>-1…5, the largest first
     How did we do? The economy? one line rule: you in blue (--you, solid), the first reference in copper
                                 (--ref-1, solid), a second in grey (--ref-2, dashed); a third becomes
                                 small multiples. Gains and losses: --gain-*, --mid, --loss-*
   Every colour carries an ink token for words on it (--*-ink). Words never wear a data colour. In dark
   the two families use a wider lightness range than the validator's default band, on purpose: four
   blues cannot sit inside it and stay apart. Bullion and Fiery stay reserved; neither is ever a series.
   The record's classes take: equities → eq, fixed → bonds, cash → cash, private → pe, property → re,
   valuables and vehicles → --other (A.MIXC, A.CLS_TOK in app.js). */
:root{
  /* your wealth: one blue, six steps (largest first) */
  --map-1:#1D4A73;--map-2:#34618B;--map-3:#4B78A4;--map-4:#618FBC;--map-5:#76A5D3;--map-6:#8AB9E9;
  --map-ink-1:var(--white);--map-ink-2:var(--white);--map-ink-3:var(--white);--map-ink-4:var(--black);--map-ink-5:var(--black);--map-ink-6:var(--black);
  /* asset classes, liquid, green */
  --c-cash:#A2BF51;--c-cash-ink:var(--black);   /* Cash */
  --h-cash-1:#404F0A;--h-cash-2:#566A0D;--h-cash-3:#6D860F;--h-cash-4:#86A324;--h-cash-5:#A2BF51;
  --h-cash-1-ink:var(--white);--h-cash-2-ink:var(--white);--h-cash-3-ink:var(--black);--h-cash-4-ink:var(--black);--h-cash-5-ink:var(--black);
  --c-bonds:#2D9C75;--c-bonds-ink:var(--black);   /* Bonds */
  --h-bonds-1:#094631;--h-bonds-2:#0B6246;--h-bonds-3:#147F5C;--h-bonds-4:#2D9C75;--h-bonds-5:#43BA8E;
  --h-bonds-1-ink:var(--white);--h-bonds-2-ink:var(--white);--h-bonds-3-ink:var(--white);--h-bonds-4-ink:var(--black);--h-bonds-5-ink:var(--black);
  --c-eq:#0D6338;--c-eq-ink:var(--white);   /* Listed equities */
  --h-eq-1:#094627;--h-eq-2:#0D6338;--h-eq-3:#1C7F4C;--h-eq-4:#3F9B65;--h-eq-5:#5DB780;
  --h-eq-1-ink:var(--white);--h-eq-2-ink:var(--white);--h-eq-3-ink:var(--white);--h-eq-4-ink:var(--black);--h-eq-5-ink:var(--black);
  /* asset classes, illiquid, blue */
  --c-hf:#26C5E5;--c-hf-ink:var(--black);   /* Hedge funds */
  --h-hf-1:#0D505E;--h-hf-2:#156C7E;--h-hf-3:#16889F;--h-hf-4:#1EA6C2;--h-hf-5:#26C5E5;
  --h-hf-1-ink:var(--white);--h-hf-2-ink:var(--white);--h-hf-3-ink:var(--black);--h-hf-4-ink:var(--black);--h-hf-5-ink:var(--black);
  --c-re:#9889E3;--c-re-ink:var(--black);   /* Real estate */
  --h-re-1:#361B73;--h-re-2:#4C378F;--h-re-3:#6451AC;--h-re-4:#7D6CCA;--h-re-5:#9889E3;
  --h-re-1-ink:var(--white);--h-re-2-ink:var(--white);--h-re-3-ink:var(--white);--h-re-4-ink:var(--black);--h-re-5-ink:var(--black);
  --c-pc:#167FA6;--c-pc-ink:var(--black);   /* Private credit */
  --h-pc-1:#0A4961;--h-pc-2:#106383;--h-pc-3:#167FA6;--h-pc-4:#1C9CCC;--h-pc-5:#3BB9ED;
  --h-pc-1-ink:var(--white);--h-pc-2-ink:var(--white);--h-pc-3-ink:var(--black);--h-pc-4-ink:var(--black);--h-pc-5-ink:var(--black);
  --c-pe:#2746A7;--c-pe-ink:var(--white);   /* Private equity */
  --h-pe-1:#10288F;--h-pe-2:#2746A7;--h-pe-3:#3B60CA;--h-pe-4:#537CE9;--h-pe-5:#749BFB;
  --h-pe-1-ink:var(--white);--h-pe-2-ink:var(--white);--h-pe-3-ink:var(--white);--h-pe-4-ink:var(--black);--h-pe-5-ink:var(--black);
  --fam-liquid:#298954;--fam-illiquid:#2B58B1;--other:#A6A6A6;
  /* lines: you, the first reference (an index, or the indicator in focus), the second (dashed) */
  --you:var(--desk);--ref-1:#A95F23;--ref-2:#9A9A9A;
  /* gains and losses: three steps each way around a neutral grey, strongest first */
  --gain-1:#1F507C;--gain-2:#547EA8;--gain-3:#94B5D6;--mid:#ECECEC;
  --loss-1:#812A37;--loss-2:#B25D65;--loss-3:#DA9FA3;
}
:root[data-mode="dark"]{
  /* your wealth: one blue, six steps (largest first) */
  --map-1:#99C9F9;--map-2:#80B0DF;--map-3:#6A98C6;--map-4:#5481AE;--map-5:#406C98;--map-6:#2D5A84;
  --map-ink-1:var(--black);--map-ink-2:var(--black);--map-ink-3:var(--black);--map-ink-4:var(--black);--map-ink-5:var(--white);--map-ink-6:var(--white);
  /* asset classes, liquid, green */
  --c-cash:#C2DF72;--c-cash-ink:var(--black);   /* Cash */
  --h-cash-1:#C2DF72;--h-cash-2:#A4C34B;--h-cash-3:#89A628;--h-cash-4:#70890F;--h-cash-5:#586D0D;
  --h-cash-1-ink:var(--black);--h-cash-2-ink:var(--black);--h-cash-3-ink:var(--black);--h-cash-4-ink:var(--black);--h-cash-5-ink:var(--white);
  --c-bonds:#46B68C;--c-bonds-ink:var(--black);   /* Bonds */
  --h-bonds-1:#7AF3C2;--h-bonds-2:#5AD5A6;--h-bonds-3:#46B68C;--h-bonds-4:#169A70;--h-bonds-5:#147B5A;
  --h-bonds-1-ink:var(--black);--h-bonds-2-ink:var(--black);--h-bonds-3-ink:var(--black);--h-bonds-4-ink:var(--black);--h-bonds-5-ink:var(--white);
  --c-eq:#187C49;--c-eq-ink:var(--white);   /* Listed equities */
  --h-eq-1:#8DF1B2;--h-eq-2:#6FD395;--h-eq-3:#51B67A;--h-eq-4:#309960;--h-eq-5:#187C49;
  --h-eq-1-ink:var(--black);--h-eq-2-ink:var(--black);--h-eq-3-ink:var(--black);--h-eq-4-ink:var(--black);--h-eq-5-ink:var(--white);
  /* asset classes, illiquid, blue */
  --c-hf:#61E2FD;--c-hf-ink:var(--black);   /* Hedge funds */
  --h-hf-1:#61E2FD;--h-hf-2:#21C5E3;--h-hf-3:#1AA7C0;--h-hf-4:#1A889D;--h-hf-5:#136C7C;
  --h-hf-1-ink:var(--black);--h-hf-2-ink:var(--black);--h-hf-3-ink:var(--black);--h-hf-4-ink:var(--black);--h-hf-5-ink:var(--white);
  --c-re:#B0A2FD;--c-re-ink:var(--black);   /* Real estate */
  --h-re-1:#CCC6FD;--h-re-2:#B0A2FD;--h-re-3:#9584E5;--h-re-4:#7B69C6;--h-re-5:#614EA9;
  --h-re-1-ink:var(--black);--h-re-2-ink:var(--black);--h-re-3-ink:var(--black);--h-re-4-ink:var(--black);--h-re-5-ink:var(--white);
  --c-pc:#1696C4;--c-pc-ink:var(--black);   /* Private credit */
  --h-pc-1:#6ACFFC;--h-pc-2:#1CB3EA;--h-pc-3:#1696C4;--h-pc-4:#10799F;--h-pc-5:#115D7B;
  --h-pc-1-ink:var(--black);--h-pc-2-ink:var(--black);--h-pc-3-ink:var(--black);--h-pc-4-ink:var(--white);--h-pc-5-ink:var(--white);
  --c-pe:#3559C3;--c-pe-ink:var(--white);   /* Private equity */
  --h-pe-1:#BED1FC;--h-pe-2:#93B2FC;--h-pe-3:#6892FC;--h-pe-4:#4A74E7;--h-pe-5:#3559C3;
  --h-pe-1-ink:var(--black);--h-pe-2-ink:var(--black);--h-pe-3-ink:var(--black);--h-pe-4-ink:var(--black);--h-pe-5-ink:var(--white);
  --fam-liquid:#46A16B;--fam-illiquid:#4777D2;--other:#6E6E6E;
  /* lines: you, the first reference (an index, or the indicator in focus), the second (dashed) */
  --you:#6A98C6;--ref-1:#CB7B48;--ref-2:#6E6E6E;
  /* gains and losses: three steps each way around a neutral grey, strongest first */
  --gain-1:#96C3F0;--gain-2:#6697C7;--gain-3:#3D6D9A;--mid:#3A3A3A;
  --loss-1:#EDA9AD;--loss-2:#CC757C;--loss-3:#A24852;
}

/* ══ ONE DESK AT A TIME, AND FREYA'S RINGS (3 Oct 2026) ═══════════════════════════════════════
   The tutorial opens the desks one at a time (A.deskOpen). A locked desk is still there: in the bar
   with a small lock, on Home as a quiet card, and its page a peek with "Open it now". Freya's rings
   (VIEWS.fgRings) draw what she knows round her mark: five arcs for the desks, one inner ring for
   how you decide, in her green; her mark stays black or white. Tokens only. */
.mb-item[data-locked]{color:var(--text-secondary)}
.mb-item[data-locked] > .ic-section{opacity:.5}
.mb-lock{display:inline-flex;margin-left:auto;color:var(--text-tertiary)}
.mb-lock .ic{width:14px;height:14px}
.mb-item[aria-current="page"] .mb-lock{color:currentColor}
:where(.product)[data-mainbar="folded"] .mb-lock{position:absolute;right:2px;bottom:2px;margin:0;padding:1px;border-radius:50%;background:var(--menu-bg,var(--bg))}
:where(.product)[data-mainbar="folded"] .mb-lock .ic{width:11px;height:11px}
.product .hm-desk.is-locked{--scene:var(--bg-raised);box-shadow:none;outline:1px dashed var(--border-strong);outline-offset:-1px}
.product .hm-desk.is-locked:hover{outline-color:var(--desk-48)}
.hm-desk.is-locked .hm-dh .ic-section{opacity:.45}
.hm-desk.is-locked .hm-dh b{color:var(--text-secondary)}
.hm-desk.is-locked .hm-st{display:inline-flex;align-items:center;gap:4px}
.hm-desk.is-locked .hm-st .ic{width:12px;height:12px}
.hm-desk.is-locked .hm-v .ic{width:28px;height:28px;color:var(--text-tertiary);stroke-width:1.5}
.peek-lock{display:inline-flex;align-items:center;gap:var(--space-1)}
.peek-lock .ic{width:14px;height:14px}
.peek-scene .sc-sub{max-width:52ch}
.peek-keys{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin-top:var(--space-4)}
.peek-keys button.link{padding:0;border:0;background:none;cursor:pointer}
.peek-vis{display:grid;place-items:center;min-height:160px}
.peek-plate{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:color-mix(in srgb,var(--desk) 10%,var(--bg-raised));box-shadow:inset 0 0 0 1px var(--desk-24)}
.peek-plate .ic-section{width:56px;height:56px;color:var(--heading);opacity:.55}
.peek-badge{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--heading);color:var(--bg)}
.peek-badge .ic{width:18px;height:18px}
.peek-pages{margin-top:var(--space-5)}
.peek-pages ul{list-style:none;margin:var(--space-3) 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--space-3)}
.peek-pages li{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);border-radius:var(--r-chip);border:1px dashed var(--border-strong)}
.peek-pages li b{font:var(--weight-label) var(--text-label)/1.3 var(--font);color:var(--heading)}
.peek-pages li span{font-size:var(--text-label);line-height:1.4;color:var(--text-secondary)}

.fg-rings{display:block;flex:none;overflow:visible;--fg-c:var(--heading);--fg-y:var(--text-secondary)}   /* Freya is black (white in dark); the inner ring her grey */
.fg-rings circle{fill:none;stroke-linecap:butt}
.fg-rings .tr{stroke:var(--border-strong);stroke-width:7}   /* the tracks: the platform's strong edge */
.fg-rings .k{stroke:var(--fg-c);stroke-width:7}
.fg-rings .y-tr{stroke-width:4}
.fg-rings .y{stroke:var(--fg-y);stroke-width:4}
.fg-rings .is-grow{transition:stroke-dasharray 1600ms var(--ease)}
.fg-rings .k.is-hot{animation:fg-hot 1800ms var(--ease) 2}
@keyframes fg-hot{50%{stroke-width:10}}
.fg-rings > .fy-mk{width:44px;height:44px;color:var(--heading)}
.fy-know-slot{padding:0 var(--space-5) var(--space-2)}
.fy-know-slot:empty{display:none}
.fy-know{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border-radius:var(--r-chip);text-decoration:none;color:var(--text);
  background:color-mix(in srgb,var(--heading) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--heading) 12%,transparent);transition:background-color var(--t-state) var(--ease)}
.fy-know:hover{background:color-mix(in srgb,var(--heading) 8%,transparent)}
.fy-know:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
.fy-know-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fy-know-t b{font:var(--weight-label) var(--text-label)/1.3 var(--font);color:var(--heading)}
.fy-know-t small{font-size:var(--text-label);line-height:1.35;color:var(--text-secondary)}
.fy-know-go{display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap;font:var(--weight-label) var(--text-label)/1 var(--font);color:var(--heading)}
.fy-know-go .ic{width:16px;height:16px}
@media (max-width:768px){.fy-know-slot{padding:0 var(--space-4) var(--space-2)}.fy-know-go{display:none}}
.fy-page-rings{display:block;border-radius:50%;line-height:0}
.fy-page-rings:focus-visible{outline:2px solid var(--heading);outline-offset:4px}
.fy-page-know{margin:0;text-align:center;font-size:var(--text-label);color:var(--text-secondary);max-width:40ch}
.fy-page-know .link{font-size:inherit;display:inline-flex;align-items:center;gap:2px}
.fy-page-know .link .ic{width:14px;height:14px}
.fy-page.talking .fy-page-rings,.fy-page.talking .fy-page-know{display:none}

.fg-stand{display:flex;flex-direction:row;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.fg-stand .fg-rings{width:clamp(128px,24vw,168px);height:auto}
.fg-stand-t{flex:1 1 20rem;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.fg-big{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}
.fg-big b{font:var(--weight-heading) var(--text-title)/1 var(--font);color:var(--heading);font-variant-numeric:tabular-nums}
.fg-big small{font-size:var(--text-label);color:var(--text-secondary)}
.fg-sig{list-style:none;margin:var(--space-1) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.fg-sig li{padding:var(--space-1) var(--space-3);border-radius:var(--r-pill,999px);background:var(--bg-sunken);font-size:var(--text-label);color:var(--text-secondary)}
.fg-sig b{color:var(--heading);font-weight:var(--weight-label)}
.fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--space-4);margin-top:var(--space-5)}
.fg-card{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;--fg-c:var(--heading)}
.fg-card.fg-you{--fg-c:var(--text-secondary);background:var(--fy-ground)}
.fg-card-h{display:flex;align-items:center;gap:var(--space-2)}
.fg-card-h .ic-section{width:28px;height:28px;color:var(--heading)}
.fg-card-h > b{flex:1;min-width:0;font:var(--weight-heading) var(--text-reading)/1.2 var(--font);color:var(--heading)}
.fg-mk{display:inline-flex;width:28px;height:28px;color:var(--heading)}
.fg-mk .fy-mk{width:28px;height:28px}
.fg-pct{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.fg-pct b{font:var(--weight-heading) var(--text-subhead)/1 var(--font);color:var(--heading);font-variant-numeric:tabular-nums}
.fg-pct small{font-size:var(--text-label);color:var(--text-tertiary)}
.fg-meter i{background:var(--fg-c)}
.fg-lv{margin:0;font-size:var(--text-label);line-height:1.45;color:var(--text-secondary)}
.fg-stem{gap:0}
.fg-row{align-items:flex-start}
.fg-row-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.fg-row-t b{font:var(--weight-label) var(--text-label)/1.35 var(--font);color:var(--text)}
.fg-row-t small{font-size:var(--text-label);line-height:1.4;color:var(--text-tertiary)}
.fg-row.is-next .fg-row-t b{color:var(--text-secondary);font-weight:var(--weight-reading)}
.fg-facts summary{cursor:pointer;font:var(--weight-label) var(--text-label)/1.3 var(--font);color:var(--heading)}
.fg-facts ul{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.fg-facts li{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--text-label);line-height:1.35}
.fg-facts li .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--fg-c)}
.fg-facts li > i{width:14px;height:14px;flex:none;margin:2px 1px 0;border:1.5px dashed var(--border-strong);border-radius:50%}
.fg-facts li span{display:flex;flex-direction:column;min-width:0}
.fg-facts li b{font-weight:var(--weight-label);color:var(--text)}
.fg-facts li:not(.is-known) b{color:var(--text-secondary);font-weight:var(--weight-reading)}
.fg-facts li small{color:var(--text-tertiary)}
.fg-card > .link{margin-top:auto;font-size:var(--text-label);display:inline-flex;align-items:center;gap:2px}
.fg-card > .link .ic{width:14px;height:14px}
.fg-how{margin-top:var(--space-5);max-width:70ch}
@media (prefers-reduced-motion:reduce){.fg-rings .is-grow{transition:none}.fg-rings .k.is-hot{animation:none}}


/* ══ LEARN · THE VIDEOS (3 Oct 2026) ════════════════════════════════════════════════════════════
   Christian: "short videos with captions and the description underneath, which you can unfold and read
   instead". A path's page shows its video in full; a quest shows it folded above the answers. The frame is
   black in both modes, as a player is; while a video is in production the frame says so and the text under
   "Read it instead" carries it. Learn's green for the keys and links (COLOUR ROLES). */
.lv-frame{position:relative;aspect-ratio:16/9;width:100%;max-width:760px;border-radius:var(--r-card);overflow:hidden;background:var(--black);box-shadow:inset 0 0 0 1px var(--border)}
.lv-video{display:block;width:100%;height:100%;object-fit:contain;background:var(--black)}
.lv-ph{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:clamp(var(--space-3),3vw,var(--space-5));color:var(--white)}
.lv-play{place-self:center;display:grid;place-items:center;width:clamp(48px,9vw,72px);aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--white) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--white) 40%,transparent)}
.lv-play svg{width:46%;height:46%;fill:var(--white);margin-left:6%}
.lv-ph-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.lv-ph-t b{font:var(--weight-heading) var(--text-subhead)/1.2 var(--font);color:var(--white)}
.lv-ph-t small{font-size:var(--text-label);color:color-mix(in srgb,var(--white) 72%,transparent)}
.lv-cc{position:absolute;top:var(--space-3);right:var(--space-3);padding:2px var(--space-2);border-radius:var(--r-chip);font:var(--weight-heading) var(--text-label)/1.2 var(--font);letter-spacing:.06em;color:var(--black);background:color-mix(in srgb,var(--white) 86%,transparent)}
.lv-desc{margin:var(--space-3) 0 0;max-width:62ch;font-size:var(--text-reading);line-height:1.5;color:var(--text-secondary)}
.lv-read{margin-top:var(--space-2);max-width:62ch}
.lv-read summary{display:inline-flex;align-items:center;gap:var(--space-1);cursor:pointer;list-style:none;font:var(--weight-label) var(--text-label)/1.4 var(--font);color:var(--text-link);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;min-height:32px}
.lv-read summary::-webkit-details-marker{display:none}
.lv-read summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:-45deg;transition:rotate var(--t-state) var(--ease)}
.lv-read[open] summary::before{rotate:45deg}
.lv-read summary:focus-visible{outline:2px solid var(--focus,var(--text-link));outline-offset:2px;border-radius:2px}
.lv-text{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2) 0 var(--space-1) var(--space-4);border-left:2px solid var(--border)}
.lv-text p{margin:0;line-height:1.55;color:var(--text)}
.lv-full{gap:0}
.lv-full .lv-title{margin:var(--space-2) 0 var(--space-4);font:var(--weight-heading) var(--text-subhead)/var(--lh-subhead) var(--font);color:var(--heading)}
/* a quest's video, folded: one row, opened with a tap */
.lv-mini{margin-top:var(--space-4);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--border);background:var(--bg-raised)}
.lv-open{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--r-card);cursor:pointer;text-align:left;color:var(--text)}
.lv-open:hover{background:var(--bg-sunken)}
.lv-open:focus-visible{outline:2px solid var(--focus,var(--text-link));outline-offset:2px}
.lv-thumb{display:grid;place-items:center;width:64px;aspect-ratio:16/9;flex:none;border-radius:var(--r-chip);background:var(--black)}
.lv-thumb svg{width:16px;height:16px;fill:var(--white);margin-left:2px}
.lv-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lv-t small{font-size:var(--text-label);color:var(--text-link)}
.lv-t b{font:var(--weight-label) var(--text-reading)/1.3 var(--font);color:var(--heading)}
.lv-chev{width:var(--key-icon-s);height:var(--key-icon-s);flex:none;color:var(--text-tertiary);transition:rotate var(--t-state) var(--ease)}
.lv-open[aria-expanded="true"] .lv-chev{rotate:180deg}
.lv-body{padding:0 var(--space-3) var(--space-4)}
.lv-body .lv-frame{max-width:none}
.lv-mini + .id-grid{margin-top:var(--space-5)}
/* a finished film on a phone is its 9:16 cut, composed for the phone: as tall as most of the screen, centred */
.lv-frame[data-fmt="9x16"],.lv-body .lv-frame[data-fmt="9x16"]{aspect-ratio:9/16;width:auto;height:min(72vh,560px);max-width:100%;margin-inline:auto}
/* inside a what-if tool, the folded video sits on the scene's ground under the answer */
.sim > .lv-mini{margin:var(--space-4) 0 0}
@media (prefers-reduced-motion:reduce){.lv-read summary::before,.lv-chev{transition:none}}

/* ══ INVESTING THROUGH FINNA · COMING ═══════════════════════════════════════ */
.ivd-panel{container-type:inline-size;background:var(--bg-raised);border:var(--line-object) solid var(--border);border-radius:var(--r-card);padding:var(--space-6);min-width:0}
.ivd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:center}
.ivd-words{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);min-width:0}
.ivd-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.ivd-coming{flex:none}
.ivd-eyebrow > .eyebrow{color:var(--desk-text)}
.ivd-title{font:var(--weight-heading) var(--text-title)/var(--lh-subhead) var(--font);letter-spacing:var(--track-heading);color:var(--heading);max-width:20ch;text-wrap:balance}
.ivd-body{max-width:58ch;color:var(--text-secondary)}
.ivd-actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.ivd-notify{display:inline-flex;align-items:center;gap:var(--space-2);border:0;background:none;color:var(--text-secondary);padding:var(--space-2) 0;font:var(--weight-reading) var(--key-label-m)/1.4 var(--font);cursor:pointer;text-align:left}
.ivd-notify:hover{color:var(--heading)}
.ivd-notify:focus-visible,.ivr-title:focus-visible{outline:2px solid var(--desk-text);outline-offset:var(--space-1)}
.ivd-notify .ic{width:var(--key-icon-m);height:var(--key-icon-m)}
.ivd-confirm{cursor:default}
.ivd-fine{border-top:var(--line-hairline) solid var(--border);padding-top:var(--space-4);margin-top:var(--space-5);font-size:var(--text-label);line-height:var(--lh-reading);color:var(--text-tertiary)}
.ivd-inset{background:var(--chart-bg);border:var(--line-object) solid var(--border);border-radius:var(--r-card);padding:var(--space-5);min-width:0}
@container (min-width:720px){.ivd-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
@container (max-width:560px){.ivd-panel .ivd-inset{display:none}}
.ivd-access .sc-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.ivd-access .sc-vis{min-width:0}
.ivd-access .sc-answer{text-wrap:balance}
.ivd-access .ivd-inset{background:color-mix(in srgb,var(--bg-raised) 76%,transparent);border:0;padding:var(--space-6)}
.ivr-map{--primary:var(--brand-green);--primary-hover:var(--brand-green-hover);--primary-pressed:var(--brand-green-pressed);--text-link:var(--brand-link);list-style:none;margin:0;padding:0;display:grid;min-width:0}
.ivr-step{position:relative;display:grid;grid-template-columns:var(--list-mark) minmax(0,1fr);gap:var(--space-4);padding-bottom:var(--space-5)}
.ivr-step:not(:last-child)::after{content:"";position:absolute;top:var(--list-mark);bottom:0;left:calc(var(--list-mark) / 2);border-left:var(--line-hairline) dashed var(--border-strong)}
.ivr-step.is-done::after{border-left-style:solid;border-color:var(--brand-green)}
.ivr-step > .lmk{width:var(--list-mark);height:var(--list-mark)}
.ivr-map .lmk.is-cert.is-done .core{fill:var(--brand-link);stroke:var(--brand-link)}
.ivr-copy{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.ivr-title{font:var(--weight-reading) var(--text-reading)/1.4 var(--font);color:var(--heading);text-decoration:none;overflow-wrap:anywhere}
a.ivr-title:hover{color:var(--brand-link);text-decoration:underline;text-underline-offset:var(--space-1)}
.ivr-meta{font-size:var(--text-label);color:var(--text-tertiary)}
.ivr-step.is-next .ivr-title{color:var(--text-secondary)}
.ivr-more{align-items:start;color:var(--text-tertiary)}
.ivr-more > .ic{width:var(--list-mark);height:var(--list-mark)}
.ivr-door{grid-column:1 / -1;display:flex;gap:var(--space-3);align-items:flex-start}
.ivr-door-mark{width:var(--list-mark);height:var(--list-mark);flex:none;display:grid;place-items:center;border:var(--line-hairline) dashed var(--desk-text);border-radius:var(--r-chip);background:var(--desk-ground);color:var(--desk-text)}
.ivr-door-mark > svg{width:var(--card-icon);height:var(--card-icon)}
.ivr-door > svg{width:var(--list-mark);height:var(--list-mark);flex:none;color:var(--heading)}
.ivr-door .ivr-title{font-weight:var(--weight-heading)}
.ivr-door .ivd-eyebrow{gap:var(--space-2)}
.ivw-panel{padding:var(--space-6);border:var(--line-object) solid var(--border);border-radius:var(--r-card);background:var(--bg-raised)}
.ivw-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--space-4);align-items:center;border-top:var(--line-hairline) solid var(--border);padding:var(--space-5) 0}
.ivw-row:last-child{padding-bottom:0}
.ivw-row > svg{width:20px;height:20px;color:var(--heading)}
.ivw-row.ivw-path > svg{color:var(--brand-link)}
.ivw-copy{display:grid;gap:var(--space-1);min-width:0}
.ivw-copy b{font-weight:var(--weight-label);color:var(--heading)}
.ivw-copy p{color:var(--text-secondary)}
.ivw-link{display:inline-flex;gap:var(--space-2);align-items:center;font-size:var(--key-label-m)}
.product .ivw-learn{color:var(--brand-link)}
.ivh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--space-5);margin-top:var(--space-5)}
.ivh-card{border:var(--line-hairline) solid var(--border);border-radius:var(--r-card);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.ivh-card > svg{width:var(--list-mark);height:var(--list-mark);color:var(--heading)}
.ivh-card h3{font:var(--weight-label) var(--text-reading)/1.4 var(--font);color:var(--heading)}
.ivh-card p{color:var(--text-secondary)}
.lm-opens-i.ivd-certificate .ivd-coming{display:inline-flex}
@media(max-width:768px){.ivd-access .sc-in{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.ivd-panel,.ivw-panel{padding:var(--space-5)}.ivw-row{grid-template-columns:20px minmax(0,1fr)}.ivw-link{grid-column:2}.ivh-grid{grid-template-columns:minmax(0,1fr)}.ivd-access .ivd-inset{padding:var(--space-5)}}