/* app shell — NTFP design tokens + the stage spine + stage-specific styles.
   Stage modules (FHO, find-money) bring their own CSS; this styles the orchestrator. */
:root{
  /* editorial "financial statement" language — warm paper + espresso ink, muted
     semantic green/terracotta, serif figures. See graphics/DESIGN_LANGUAGE.md. */
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* espresso is the primary-action color (green/terracotta stay purely semantic) */
  --espresso:#393432; --navy:#393432; --navy2:#4a443e; --red:#393432; --red-d:#26221f; --red-soft:#efeae4;
  --ink:#393432; --muted:#6d655e; --faint:#a69d94; --line:#ddd9d3; --bg:#efeee9;
  --card:#fbfbf9; --good:#4c8d6e; --good-d:#3c7359; --warn:#c79a3a; --bad:#c3705a; --bad-d:#a85440;
  --navy-soft:#eeeae4; --good-soft:#e6efe9; --warn-soft:#f5eedd; --bad-soft:#f3e4de;
  --self:#7c6ba0; --self-soft:#efecf5; --step-now:#5f7fa6; --radius:12px; --shadow:0 1px 2px rgba(40,30,20,.05);
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:var(--font-sans);color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}
button{font-family:inherit}
/* editorial serif for headlines + big figures (the signature move) */
.stage-head h1{font-family:var(--font-serif)}
.hidden{display:none!important}

/* topbar */
/* espresso masthead — the top dark band of the "statement" language */
.topbar{height:62px;background:var(--espresso,#393432);border-bottom:1px solid #2b2724;display:flex;align-items:center;
  gap:14px;padding:0 24px;position:sticky;top:0;z-index:40}
.topbar img{height:34px} .topbar .divider{width:1px;height:28px;background:rgba(229,224,218,.22)}
.topbar .tool{font-size:13px;color:#c9c2ba;font-weight:600;letter-spacing:.2px} .topbar .tool b{color:#f3efe9}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#d8d2ca}
.who select{border:1px solid rgba(229,224,218,.28);border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit;
  background:rgba(255,255,255,.06);color:#f3efe9}
.who-new{border:1px solid rgba(229,224,218,.28);border-radius:9px;padding:8px 12px;font:inherit;font-size:12.5px;
  font-weight:700;color:#f3efe9;background:rgba(255,255,255,.06);cursor:pointer;white-space:nowrap;transition:.15s}
.who-new:hover{background:rgba(255,255,255,.14);border-color:rgba(229,224,218,.5)}
.chip{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;
  color:#e6c37a;border:1px solid rgba(199,154,58,.45);background:rgba(199,154,58,.14)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}

/* ── step spine ─────────────────────────────────────────────────────────── */
/* ruled editorial tabs — serif small-cap numerals, green check, baseline rule marks progress */
.spine{background:var(--card);border-bottom:1px solid var(--line);padding:13px 24px 0}
.steps{display:flex;align-items:stretch;gap:22px;max-width:1180px;margin:0 auto}
.step{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.step.locked{cursor:not-allowed}
.step-top{display:flex;align-items:center;gap:9px;min-height:30px}
.step-n{font-family:var(--font-serif);font-size:26px;font-weight:500;line-height:1;color:var(--faint);letter-spacing:.5px}
.step.active .step-n{color:var(--step-now,#5f7fa6)}
.step-check{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--good);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.step-now{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.step-t{font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--ink)}
.step.todo .step-t,.step.locked .step-t{color:var(--faint)}
.step-rule{height:3px;border-radius:2px;background:var(--line);transition:background .2s}
.step.done .step-rule{background:var(--good)}
.step.active .step-rule{background:var(--step-now,#5f7fa6)}
.step:not(.locked):hover .step-t{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:820px){.steps{gap:10px}.step-t{font-size:14px}.step-n{font-size:20px}}

/* page + generic */
.page{max-width:1180px;margin:0 auto;padding:26px 24px 90px}
.stage-head{margin-bottom:20px}
.crumb{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.stage-head h1{margin:7px 0 0;font-size:31px;font-weight:600;letter-spacing:-.2px;line-height:1.08}
.stage-head p.lead{margin:8px 0 0;color:var(--muted);font-size:14.5px;max-width:760px;line-height:1.5}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.placeholder-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--self);
  background:var(--self-soft);padding:3px 9px;border-radius:999px;margin-left:6px;vertical-align:middle}
.btnrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:10px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--faint)}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}.btn-primary:hover{background:var(--red-d)}
.btn-lg{font-size:15px;padding:13px 22px} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent}

/* ── stage 0 · goal cards (borrowed from mvp2) ──────────────────────────── */
.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.goal-grid{grid-template-columns:1fr}}
.goal-card{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:18px;
  cursor:pointer;transition:.16s;box-shadow:var(--shadow)}
.goal-card:hover{border-color:var(--red);transform:translateY(-2px)}
.goal-card.on{border-color:var(--red);background:var(--red-soft);box-shadow:0 0 0 3px var(--red-soft)}
.goal-card.locked{opacity:.55;cursor:not-allowed;background:#fafbfc}
.goal-card.locked:hover{border-color:var(--line);transform:none}
.goal-card .g-ic{font-size:26px}
.goal-card .g-label{font-weight:800;font-size:15.5px;margin:8px 0 4px;display:flex;align-items:center;gap:7px}
.goal-card .g-check{color:var(--red-d)}
.goal-card .g-blurb{font-size:12.5px;color:var(--muted);line-height:1.45}
.goal-card .g-soon{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;color:var(--navy2);
  background:var(--navy-soft);border-radius:999px;padding:3px 9px}
.ta{width:100%;min-height:70px;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-size:14px;
  font-family:inherit;resize:vertical;line-height:1.5}
.ta:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}

/* ── stage 2 · flags ────────────────────────────────────────────────────── */
.flag{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-left-width:4px;border-radius:13px;
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.flag.sev-high{border-left-color:var(--bad)} .flag.sev-medium{border-left-color:var(--warn)}
.flag .fmeta{flex:1;min-width:0}
.flag .ft{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flag .grade{font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--navy2);
  background:var(--navy-soft);border-radius:5px;padding:1px 6px}
.flag .fdet{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.5}
.flag .fq{font-size:13.5px;color:var(--navy2);font-weight:600;margin-top:9px}
.flag .fresp{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rbtn{border:1.5px solid var(--line);background:var(--card);font-family:inherit;font-weight:700;font-size:12.5px;
  padding:8px 13px;border-radius:9px;cursor:pointer;color:var(--muted)}
.rbtn:hover{border-color:var(--faint);color:var(--ink)}
.rbtn.on.confirm{background:var(--good-soft);border-color:#bfe6d4;color:var(--good-d)}
.rbtn.on.dismiss{background:var(--navy-soft);border-color:#d8dde6;color:var(--navy2)}
.flag.resolved{opacity:.6}

/* ── stage 3 · sources / options ────────────────────────────────────────── */
.opt{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;box-shadow:var(--shadow);margin-bottom:11px;transition:.15s}
.opt.on{border-color:var(--good);background:var(--good-soft)}
.opt-check{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  font-size:15px;font-weight:800;cursor:pointer;color:var(--muted)}
.opt-check.on{background:var(--good);border-color:var(--good);color:#fff}
.opt-main{flex:1;min-width:0}
.opt-h{font-size:14.5px;font-weight:700}
.opt-sub{font-size:12px;color:var(--faint);margin-top:3px}
.opt-save{flex:0 0 auto;text-align:right;font-size:18px;font-weight:800;color:var(--good-d);font-variant-numeric:tabular-nums}
.opt-save small{display:block;font-size:11px;color:var(--faint);font-weight:700}
.tally{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;border-radius:13px;
  padding:16px 20px;border:1px solid #bfe6d4;background:var(--good-soft)}
.tally b{font-size:24px;color:var(--good-d);font-variant-numeric:tabular-nums}

/* ── stage 4 · summary ──────────────────────────────────────────────────── */
.handout{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;
  box-shadow:0 8px 30px rgba(20,40,80,.12);max-width:760px;margin:0 auto}
.handout h2{margin:0 0 4px;font-size:22px} .handout .hsub{color:var(--muted);font-size:13px;margin-bottom:22px}
.handout .hsec{margin:20px 0}
.handout .ht{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.handout ul{margin:0;padding-left:20px}.handout li{margin:6px 0;font-size:14px}
.handout .figrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.handout .figrow b{font-variant-numeric:tabular-nums}
@media print{.topbar,.spine,.btnrow{display:none!important}.page{padding:0}.handout{box-shadow:none;border:0}}

.stage-note{display:flex;gap:11px;align-items:flex-start;background:var(--self-soft);border:1px solid #ded6ea;
  border-radius:12px;padding:12px 15px;font-size:12.5px;color:#5a4b78;font-weight:600;margin-bottom:18px;line-height:1.5}

/* ── app-v2 additions: real flags, take-home ─────────────────────────── */
.flag-intro{background:var(--navy-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:14px;font-size:14.5px;line-height:1.55;color:var(--navy)}
.flag .fhead{font-weight:800;font-size:13px;color:var(--red-d);margin:2px 0 8px}
.flag .fline{font-size:13.5px;line-height:1.5;margin-top:6px;color:var(--ink)}
.flag .fline b{color:var(--navy)}
.flag .fp{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--self);background:var(--self-soft);border-radius:6px;padding:2px 7px;vertical-align:middle}
.flag.ignored{opacity:.62}
.rbtn.ignore.on{background:var(--faint);border-color:var(--faint);color:#fff}
details.more{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:10px 0}
details.more summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--muted)}
details.more p{font-size:13px;line-height:1.55;color:var(--muted);margin:8px 0 2px}
.take-toggles{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.take-toggles .tgl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.handout [contenteditable]{outline:none;border-radius:6px;transition:background .15s}
.handout [contenteditable]:hover{background:var(--warn-soft)}
.handout [contenteditable]:focus{background:var(--card);box-shadow:0 0 0 2px var(--self-soft)}
@media print{.topbar,.spine,.btnrow,.take-toggles,.stage-head{display:none!important}
  .page{padding:0}.handout{box-shadow:none;border:0}}

/* flag → statement-line provenance */
details.prov{margin-top:10px}
details.prov summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--self);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
details.prov summary::before{content:'▸';font-size:10px;transition:transform .15s}
details.prov[open] summary::before{transform:rotate(90deg)}
.prov-list{margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.prov-row{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;
  padding:7px 12px;font-size:12.5px;border-top:1px solid var(--line)}
.prov-row:first-child{border-top:0}
.prov-d{color:var(--faint);font-variant-numeric:tabular-nums;font-size:11.5px}
.prov-desc{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prov-amt{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.prov-amt.out{color:var(--bad)} .prov-amt.in{color:var(--good-d)}
.prov-more{padding:7px 12px;font-size:11.5px;color:var(--faint);border-top:1px solid var(--line)}

/* honest-budget strip on the objective Overview */
.hbudget{margin-top:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.hb-head{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:14px}
.hb-note{font-weight:600;color:var(--faint);font-size:11.5px;margin-left:6px}
.hb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.hb-grid{grid-template-columns:1fr}}
.hb-cell{background:var(--bg);border-radius:12px;padding:11px 13px}
.hb-k{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.hb-v{font-size:21px;font-weight:600;color:var(--ink);line-height:1.15;font-family:var(--font-serif)}
.hb-v.pos{color:var(--good-d)} .hb-v.neg{color:var(--bad)}
.hb-num{font-variant-numeric:tabular-nums}
.hb-sub{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
.hb-cards{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.hb-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:7px 2px;font-size:13px}
.hb-cn{font-weight:700;color:var(--ink);align-self:center}
.hb-right{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hb-min{color:var(--muted);font-size:12.5px;font-weight:700}
/* payoff status sits below the min and slides out from underneath it */
.hb-pay{font-size:12px;font-weight:800;margin-top:2px;letter-spacing:.1px}
.hb-pay.on{color:var(--good-d)} .hb-pay.off{color:var(--bad)}

/* ── honest-budget reveal (JS adds .hb-pre then .hb-in) ─────────────────── */
.hbudget.hb-pre{opacity:0;transform:scale(.975) translateY(8px)}
.hbudget.hb-pre.hb-in{opacity:1;transform:none;transition:opacity .42s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.hb-cell.hb-pre{opacity:0;transform:translateY(9px)}
.hb-cell.hb-pre.hb-in{opacity:1;transform:none;transition:opacity .4s ease,transform .44s cubic-bezier(.22,1,.36,1)}
.hb-card.hb-pre{opacity:0;transform:translateY(7px)}
.hb-card.hb-pre.hb-in{opacity:1;transform:none;transition:opacity .36s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.hb-pay.hb-pre{opacity:0;transform:translateY(-9px)}
.hb-pay.hb-pre.hb-in{opacity:1;transform:none;transition:opacity .36s ease,transform .42s cubic-bezier(.22,1,.36,1)}

/* ── Upload-first intake (step 0) — single hero dropzone, no goal cards, no notes box ── */
.intake{max-width:1180px;margin:0 auto;padding:12px 0 10px;font-family:'Space Grotesk',var(--font-sans),sans-serif;color:#22303F}
.intake-head{margin:8px 0 0}
.intake-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:#A07E3E;margin-bottom:6px}
.intake-head h1{font-family:var(--font-serif);font-size:46px;font-weight:500;line-height:1.02;
  margin:0 0 10px;color:#22303F;letter-spacing:-.005em}
.intake-sub{margin:0;color:#5C6B80;font-size:16px}
.intake-sub b{color:#22303F;font-weight:600}
.intake-priv{margin:2px 0 0;font-size:16px}
.intake-priv i{font-family:var(--font-serif);color:#7E8CA0;font-style:italic;text-decoration:underline;text-underline-offset:3px}
/* glass dropzone */
.intake-drop{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:74px 40px;border:2px dashed rgba(100,128,170,.5);border-radius:26px;margin-top:34px;cursor:pointer;
  background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(233,240,248,.4));box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .15s,background .15s,box-shadow .15s}
.intake-drop:hover{border-color:rgba(79,107,146,.75);background:linear-gradient(155deg,rgba(255,255,255,.7),rgba(226,235,247,.5))}
.intake-drop.drag{border-color:#4F6B92;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 4px rgba(79,107,146,.16)}
.intake-drop.has-files{border-style:solid;border-color:#4F6B92}
.intake-drop>*{pointer-events:none}     /* keep drag events on the container, not its children */
.intake-ic{position:relative;width:78px;height:78px;border-radius:50%;background:rgba(120,150,200,.16);color:#41506A;
  display:flex;align-items:center;justify-content:center}
.intake-drop-t{position:relative;font-family:var(--font-serif);font-size:34px;color:#22303F;font-weight:600;margin-top:22px}
.intake-drop-s{position:relative;font-size:17px;color:#5C6B80;margin-top:8px}
.intake-browse{color:#2F7A57;font-weight:600;text-decoration:none}
.intake-browse:hover{color:#25603F}
.intake-hints{position:relative;display:flex;align-items:center;gap:14px;margin-top:22px;font-size:14px}
.intake-pill{position:relative;overflow:hidden;display:inline-flex;background:rgba(255,255,255,.75);
  border:1px solid rgba(60,72,96,.14);border-radius:999px;padding:8px 16px;font-weight:700;font-size:13px;color:#41506A}
.intake-pill-t{position:relative}
.intake-hints .muted{color:#7E8CA0}
.intake-files{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.intake-files li{background:rgba(255,255,255,.75);border:1px solid rgba(79,107,146,.4);color:#22303F;
  border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
.intake-foot{display:flex;align-items:flex-end;gap:24px;margin-top:34px}
.intake-name{display:flex;flex-direction:column;gap:9px;flex:1;max-width:520px}
.intake-name-lab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7E8CA0}
.intake-name-box{position:relative;overflow:hidden;display:block;border:1px solid rgba(60,72,96,.16);border-radius:14px;
  background:rgba(255,255,255,.6);box-shadow:inset 0 1px 2px rgba(60,72,96,.05)}
.intake-name-box:focus-within{border-color:#4F6B92;box-shadow:0 0 0 3px rgba(79,107,146,.18)}
.intake-name-in{position:relative;width:100%;border:0;background:transparent;padding:16px 20px;font-size:16px;
  font-family:inherit;color:#22303F}
.intake-name-in::placeholder{color:#9AA7B8}
.intake-name-in:focus{outline:none}
.intake-foot .up-status{margin-right:auto;align-self:center}
.intake-go{position:relative;overflow:hidden;margin-left:auto;border:0;border-radius:14px;color:#F2F5FA;
  background:linear-gradient(135deg,#33496B,#22303F);font-weight:700;font-size:16px;padding:16px 28px;
  box-shadow:0 12px 28px -12px rgba(34,48,63,.6)}
.intake-go-t{position:relative}
.intake-go:hover:not(:disabled){background:linear-gradient(135deg,#3B547A,#2A3B4F)}
.intake-go:disabled{opacity:.5}
.intake .up-progress{margin-top:16px}
@media(max-width:720px){
  .intake-head h1{font-size:34px}
  .intake-foot{flex-direction:column;align-items:stretch}
  .intake-name{flex:1 1 auto;max-width:none}
  .intake-foot .up-status{margin:0}
  .intake-go{margin-left:0;width:100%;justify-content:center}
}

/* statement upload (legacy Goal-stage card — kept for reference) */
.upload-card .up-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.upload-card input[type=file]{font-size:13px;flex:1;min-width:220px}
.up-actions{display:flex;align-items:center;gap:14px}
.up-status{font-size:13px}
.up-status.working{color:var(--warn)}
.up-status.working::before{content:'⏳ '}
.up-status.err{color:var(--bad)}
/* extraction progress bar + cycling phrases */
.up-progress{margin-top:14px}
.up-prog-track{height:8px;border-radius:6px;background:var(--navy-soft);overflow:hidden}
.up-prog-fill{height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--good),#27b27d);transition:width .5s ease}
.up-prog-phrase{margin-top:9px;font-size:13px;color:var(--muted);font-weight:600;
  display:flex;align-items:center;gap:8px}
.up-prog-phrase::before{content:'';width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--line);border-top-color:var(--good);animation:up-spin .8s linear infinite}
@keyframes up-spin{to{transform:rotate(360deg)}}

/* month/aggregate/range toggle */
.ov-toggle{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg-b{border:0;background:none;padding:7px 13px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-right:1px solid var(--line)}
.seg-b:last-child{border-right:0}
.seg-b.on{background:var(--navy);color:#fff}
.ov-range{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint)}
.ov-range input[type=date]{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-family:inherit;font-size:12px}
.btn.sm{padding:6px 10px;font-size:12px}

/* flags-on-overview: two columns */
.flags-cols{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:980px){.flags-cols{grid-template-columns:1fr}}
.flags-panel{position:sticky;top:12px;display:flex;flex-direction:column;gap:8px}
/* float-in transition (Overview↔Flags in place): transition lives on .flags-enter so
   toggling .flags-in animates BOTH directions — the rail slides in/out and the FHO
   column shrinks/grows to make room. */
.flags-cols.flags-enter{grid-template-columns:1fr 0px;gap:0;
  transition:grid-template-columns .5s cubic-bezier(.22,1,.36,1),gap .5s ease}
.flags-cols.flags-enter.flags-in{grid-template-columns:1fr 340px;gap:20px}
.flags-panel.flags-enter{opacity:0;transform:translateX(26px);overflow:hidden;min-width:0;
  transition:opacity .5s ease .08s,transform .55s cubic-bezier(.22,1,.36,1) .08s}
.flags-panel.flags-enter.flags-in{opacity:1;transform:none}
@media(max-width:980px){.flags-cols.flags-enter,.flags-cols.flags-enter.flags-in{grid-template-columns:1fr}}
.fp-head{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
/* calm dropdown card — collapsed shows only the problem phrase */
.fp-item{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.fp-item.active{border-color:var(--navy2);box-shadow:0 2px 10px rgba(20,40,80,.09)}
/* flash when a flag is auto-opened from a marker click on the left */
.fp-flash{animation:fpFlash .8s ease-out}
@keyframes fpFlash{0%{box-shadow:0 0 0 3px var(--step-now)}100%{box-shadow:0 0 0 3px rgba(95,127,166,0)}}
.fp-item.relevant{border-left:3px solid var(--good-d)}
.fp-item.notrel{opacity:.5}
.fp-row{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer}
.fp-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.fp-problem{font-weight:700;font-size:13.5px;color:var(--ink);flex:1;line-height:1.25}
.fp-tick{font-weight:800;color:var(--good-d)}
.fp-chevron{color:var(--faint);font-size:11px;flex:0 0 auto}
.fp-detail{padding:2px 14px 14px;cursor:default}
.fp-detailtext{font-size:13px;line-height:1.5;color:var(--ink)}
.fp-detailtext b{font-weight:800;color:var(--ink)}
.fp-q{font-size:13.5px;font-weight:700;color:var(--navy);margin-top:9px;line-height:1.45}
.fp-detail .fresp{display:flex;gap:8px;margin:11px 0 9px}
.fp-est{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);margin:4px 0 9px}
.fp-est-in{display:inline-flex;align-items:center;gap:2px;font-weight:800;border:1px solid var(--line);border-radius:8px;padding:3px 8px;background:var(--card)}
.fp-est-in input{border:0;width:64px;font-family:inherit;font-size:14px;font-weight:800;padding:0;background:transparent}
.fp-note{width:100%;min-height:52px;font-size:12.5px}
.fp-why{margin-top:10px}
.fp-why summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--faint)}
.fp-why p{font-size:12px;line-height:1.5;color:var(--muted);margin:7px 0 0}

/* ── urgency groups (expandable rectangles in the rail) ──────────────────── */
.fp-group{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.fp-grouphead{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;
  padding:11px 13px;font:inherit;text-align:left}
.fp-grouphead:hover{background:var(--bg)}
.fp-gdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.u-urgent .fp-gdot{background:var(--bad)} .u-moderate .fp-gdot{background:var(--warn)} .u-longterm .fp-gdot{background:var(--good)}
.u-firststeps .fp-gdot{background:#759ab5}
.fp-glabel{font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink)}
.fp-gblurb{flex:1;font-size:11px;color:var(--faint);font-weight:600}
.fp-gcount{font-weight:800;font-size:11.5px;color:var(--muted);background:var(--bg);border-radius:999px;padding:2px 9px;min-width:22px;text-align:center}
.fp-gchev{color:var(--faint);font-size:11px;transition:transform .2s ease}
.fp-group.open .fp-gchev{transform:rotate(90deg)}
/* animated collapse via grid-rows 0fr→1fr */
.fp-groupbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1)}
.fp-group.open .fp-groupbody{grid-template-rows:1fr}
.fp-groupbody-in{overflow:hidden;min-height:0}
.fp-group.open .fp-groupbody-in{padding:2px 8px 9px}
.fp-groupbody-in .fp-item{margin-top:8px}

/* ── left-side spotlight (dim the FHO, raise the flag's rows / figures) ───── */
.flags-left{position:relative}
.flags-left.has-spot > #fho-mount,.flags-left.has-spot > #fho-general{opacity:.1;transition:opacity .35s ease;pointer-events:none}
.flags-left > #fho-mount,.flags-left > #fho-general{transition:opacity .35s ease}
.flag-spot{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:8px 6px;opacity:0;transition:opacity .3s ease;z-index:5}
.flag-spot.in{opacity:1}
.fs-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.fs-head{font-family:var(--font-serif);font-weight:500;font-size:19px;line-height:1.3;color:var(--ink);max-width:52ch}
/* transaction rows raised as cards, staggered up */
.fs-rows{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fs-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:12px 15px;box-shadow:0 4px 14px rgba(40,30,20,.07);
  opacity:0;transform:translateY(14px) scale(.97);animation:fsRise .5s cubic-bezier(.22,1,.36,1) forwards}
.fs-date{font-size:12px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
.fs-desc{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-amt{font-family:var(--font-serif);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums;text-align:right}
.fs-amt.neg{color:var(--bad-d)} .fs-amt.pos{color:var(--good-d)}
.fs-more{justify-content:center;color:var(--muted);font-weight:700;font-size:12.5px;box-shadow:none;background:var(--bg)}
/* general figures raised as big value rectangles */
.fs-metrics{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.fs-metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;
  box-shadow:0 4px 14px rgba(40,30,20,.07);opacity:0;transform:translateY(16px) scale(.94);
  animation:fsRise .55s cubic-bezier(.22,1,.36,1) forwards}
.fs-mval{font-family:var(--font-serif);font-weight:600;font-size:34px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fs-metric.hero .fs-mval{font-size:44px}
.fs-mlabel{margin-top:7px;font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
@keyframes fsRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fs-row,.fs-metric{animation-duration:.001ms}}

/* calm flag badges beside legend rows + lines (one color per flag via inline bg; stack when several) */
.flag-badges{display:inline-flex;gap:3px;margin-left:7px;vertical-align:middle}
.flag-badge{width:9px;height:9px;border-radius:50%;display:inline-block;cursor:pointer;opacity:.85;
  transition:transform .12s,opacity .12s;box-shadow:0 0 0 1.5px #fff}
.flag-badge:hover{transform:scale(1.35);opacity:1}
.flag-badge.on{transform:scale(1.35);opacity:1;box-shadow:0 0 0 1.5px #fff,0 0 0 3px currentColor}
/* "General" row — whole-picture flags with no single category home */
.fho-general{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;
  background:var(--navy-soft);border:1px solid var(--line);border-radius:12px}
.fho-gen-label{font-size:12px;font-weight:700;color:var(--muted)}
.fho-gen-badges .flag-badge{width:11px;height:11px}

/* find-money referrals (first-steps, not budget cuts) */
.card.referrals{margin-top:14px;border-left:4px solid var(--self)}
.ref-item{font-size:13px;line-height:1.5;padding:5px 0;border-top:1px solid var(--line)}
.ref-item:first-of-type{border-top:0}
.ref-item b{color:var(--navy)}
.stage-note.working{color:var(--warn);background:var(--warn-soft);border-color:var(--warn)}

/* take-home broad-to-narrow builder */
.tk-cols{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start}
@media(max-width:940px){.tk-cols{grid-template-columns:1fr}}
.tk-controls{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px}
.tk-goal-fixed{background:var(--navy-soft);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--navy)}
.tk-phase{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.tk-phase>summary{cursor:pointer;font-weight:800;font-size:13.5px;padding:11px 14px;list-style:none;color:var(--ink)}
.tk-phase>summary::before{content:'▸ ';color:var(--faint)}
.tk-phase[open]>summary::before{content:'▾ '}
.tk-phase-body{padding:4px 14px 12px;display:flex;flex-direction:column;gap:7px}
.tk-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.tk-chk input{flex:0 0 auto}
.tk-norm{color:var(--self);font-style:italic;font-size:12px}
.tk-preview{min-width:0}

/* ── take-home sequential build (playTakeBuild) ──────────────────────────── */
.tk-controls.tk-slidein{opacity:0;transform:translateX(-28px)}
.tk-controls.tk-slidein.in{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.handout .hsec.tkb{opacity:0;transform:translateY(16px)}
.handout .hsec.tkb.in{opacity:1;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.hw-svg{transform-origin:50% 50%}
.hw-svg.tkb-hide{opacity:0}
.hw-svg.tkb-spin{animation:hwSpin .95s cubic-bezier(.22,1,.36,1) both}
@keyframes hwSpin{from{transform:rotate(-170deg) scale(.55);opacity:0}55%{opacity:1}to{transform:rotate(0) scale(1);opacity:1}}
.hw-li.tkb{opacity:0;transform:translateX(26px)}
.hw-li.tkb.in{opacity:1;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.htraj.tkb-draw{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s ease}
.htraj.tkb-draw.in{clip-path:inset(0 0 0 0)}
/* Take-home: coach-editable custom sections + drag reorder */
.handout .hsec[draggable]{cursor:grab;position:relative;border-radius:8px;transition:box-shadow .15s,background .15s}
.handout .hsec[draggable]:hover{background:var(--warn-soft)}
.handout .hsec[draggable]::before{content:"⠿";position:absolute;left:-16px;top:2px;color:var(--faint);font-size:12px;opacity:0;transition:opacity .15s}
.handout .hsec[draggable]:hover::before{opacity:.7}
.handout .hsec.dragging{opacity:.5;cursor:grabbing;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.handout .hsec-custom{border-left:2px solid var(--self-soft);padding-left:12px}
.hsec-del{position:absolute;right:0;top:0;border:0;background:none;color:var(--faint);font-size:16px;line-height:1;cursor:pointer;padding:2px 4px;opacity:0;transition:opacity .15s}
.handout .hsec-custom:hover .hsec-del{opacity:1}
.hsec-del:hover{color:var(--bad)}
.hsec-cbody{font-size:14px;min-height:20px;color:var(--ink)}
.hsec-cbody:empty::before{content:"Add details…";color:var(--faint)}
.hsec-ins{display:block;width:100%;border:0;background:none;color:var(--faint);font-size:13px;line-height:1;height:14px;margin:-4px 0;cursor:pointer;opacity:0;transition:opacity .15s}
.hsec-ins:hover{opacity:1;color:var(--self)}
.hsec-add{display:block;width:100%;margin-top:16px;padding:9px;border:1px dashed var(--line);background:none;border-radius:8px;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s}
.hsec-add:hover{border-color:var(--self);color:var(--self)}
.hnorm{display:block;color:var(--good-d);font-size:12.5px;font-style:italic;margin-top:2px}
.mini-budget{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.mb-row{display:flex;justify-content:space-between;font-size:13px;padding:2px 0;text-transform:capitalize}
.mb-cards{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}

/* take-home: coach note + resource under a flag */
.hnote{font-size:12px;font-style:italic;color:var(--muted);margin-top:3px}
.hres{font-size:12.5px;color:var(--good-d);margin-top:3px}

/* take-home graphics: spending wheel + debt trajectory */
.hwheel{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:4px}
.hw-svg{width:132px;height:132px;flex:0 0 auto}
.hw-tot{font-size:15px;font-weight:800;fill:var(--ink)}
.hw-tot-sub{font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;fill:var(--faint)}
.hw-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.hw-li{display:flex;align-items:center;gap:8px;font-size:12.5px;text-transform:capitalize}
.hw-li i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.hw-li span{flex:1;color:var(--ink)} .hw-li b{color:var(--ink);font-variant-numeric:tabular-nums}
.htraj{width:100%;max-width:340px;height:auto;margin-top:6px}
.htraj-lgd{display:flex;gap:16px;font-size:11px;color:var(--muted);margin-top:2px}
.htraj-lgd i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.htraj-lgd i.dash{background:repeating-linear-gradient(90deg,#8a93a3 0 4px,transparent 4px 8px)}
.hplan-vals{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.hpv{display:flex;flex-direction:column;gap:2px}
.hpv span{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--faint)}
.hpv b{font-size:16px;font-weight:800;color:var(--good-d)}
@media print{.htraj,.hw-svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* trajectory axis + annotation labels */
.ht-ax{font-size:9px;fill:var(--faint);font-family:inherit}
.ht-anno{font-size:10px;font-weight:800;fill:var(--ink);font-family:inherit}
.htraj{width:100%;max-width:400px;height:auto}

/* ── two-axis flag controls: validity (good flag?) + negotiability (can they move it?) ── */
.fp-axis{margin:12px 0 4px}
.fp-axis-q{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.2px;margin-bottom:7px}
.fp-axis .fresp{margin:0}
.fp-hint{font-size:11.5px;color:var(--warn);margin:6px 0 0;min-height:0;line-height:1.4}
.fp-hint:empty{display:none}
/* validity */
.rbtn.on.v-help{background:var(--good-soft);border-color:#bfe6d4;color:var(--good-d)}
.rbtn.on.v-soft{background:var(--navy-soft);border-color:#d8dde6;color:var(--navy2)}
.rbtn.on.v-wrong{background:var(--bad-soft);border-color:#f3c9ce;color:var(--red-d)}
/* negotiability */
.rbtn.on.n-yes{background:var(--good-soft);border-color:#bfe6d4;color:var(--good-d)}
.rbtn.on.n-no{background:var(--warn-soft);border-color:#f0d9b0;color:#a56516}

/* ── eval-mode wrap-up panel (only shown when embedded in the coach-eval shell) ── */
.eval-wrap{margin:26px 0 8px;padding:20px 22px;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--espresso);border-radius:var(--radius);box-shadow:var(--shadow)}
.eval-wrap-h{font-family:var(--font-serif);font-weight:600;font-size:18px;margin-bottom:4px}
.eval-wrap-sub{color:var(--muted);font-size:13.5px;margin:0 0 12px;max-width:66ch}
.eval-note{width:100%;min-height:90px;font-family:inherit;font-size:14px;border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;background:var(--paper);resize:vertical;margin-bottom:12px}
.eval-note:focus{outline:none;border-color:var(--muted)}
.eval-ok{color:var(--good-d);font-weight:600;font-size:13.5px}

/* ═══════════════════════════════════════════════════════════════════════════
   Overview · "Ivory Glass" (Compass Step 2). Scoped to the Overview stage:
   body.ov-mode paints the backdrop, .ov-glass is the one glass card holding the
   header, month toggle, money bars (fho.js), the per-card monthly-math grid, and
   notes. [data-spot] layers glow under the cursor (app.js spotlight controller).
   ═══════════════════════════════════════════════════════════════════════════ */
body.up-mode,body.ov-mode,body.fm-mode{background:linear-gradient(135deg,#E9EEF6 0%,#DDE4EF 50%,#E8E2D2 100%);background-attachment:fixed}

/* Find money · Ivory Glass header (sits on the gradient; the chart + find panels are their own glass cards).
   NB: uses fm-hero-* — .fm-head / .fm-title already exist in find-money.css (would collide). */
/* Find money = the design recreated at its native 1432px width, then ZOOMED to fit the viewport
   (fitFindMoney sets .fm-stage zoom). #page is unconstrained; the stage centres with the gradient
   showing outside it. Exact design layers: gradient FRAME (drop shadow) → glass card (inset only). */
body.fm-mode #page{max-width:none;padding:24px 0 70px}
.fm-stage{width:1432px;margin:0 auto;transform-origin:top center}
.fm-stage .btnrow{margin-top:22px;padding:0 6px}
.fm-frame{border-radius:28px;padding:6px;background:linear-gradient(135deg,#E9EEF6 0%,#DDE4EF 50%,#E8E2D2 100%);
  box-shadow:0 40px 90px -50px rgba(60,72,96,.5)}
.fm-glass{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.85),rgba(248,250,253,.62));
  border:1px solid rgba(255,255,255,.9);padding:40px 44px 44px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  font-family:'Space Grotesk',var(--font-sans),sans-serif;color:#22303F}
.fm-glass::before,.fm-glass::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.fm-glass::before{top:-130px;right:-50px;width:340px;height:340px;background:radial-gradient(circle,rgba(120,160,220,.22),transparent 68%)}
.fm-glass::after{bottom:-150px;left:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(196,164,110,.2),transparent 66%)}
.fm-glass #fm-mount{margin-top:28px}
.fm-hero{margin-bottom:0}
.fm-hero-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:#A07E3E}
.fm-hero-title{font-family:var(--font-serif);font-size:44px;font-weight:500;color:#22303F;line-height:1.02;
  margin:6px 0 0;letter-spacing:-.005em}
@media(max-width:760px){.fm-hero-title{font-size:32px}}

[data-spot]{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;border-radius:inherit}

.ov-glass{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;
  background:linear-gradient(155deg,rgba(255,255,255,.85),rgba(248,250,253,.62));
  border:1px solid rgba(255,255,255,.9);padding:36px 40px 34px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 90px -50px rgba(60,72,96,.5);
  font-family:'Space Grotesk',var(--font-sans),sans-serif;color:#22303F}
.ov-glass::before,.ov-glass::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.ov-glass::before{top:-130px;right:-50px;width:340px;height:340px;background:radial-gradient(circle,rgba(120,160,220,.22),transparent 68%)}
.ov-glass::after{bottom:-150px;left:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(196,164,110,.2),transparent 66%)}
.ov-glass>.ov-spot{z-index:-1}

/* header */
.ov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.ov-eyebrow{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:#A07E3E}
.ov-title{font-family:var(--font-serif);font-size:37px;font-weight:500;color:#22303F;line-height:1.02;
  margin:8px 0 0;letter-spacing:-.005em}
.ov-netchip{position:relative;overflow:hidden;text-align:right;background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);border-radius:14px;padding:12px 18px;box-shadow:0 8px 20px -12px rgba(60,72,96,.4)}
.ov-netchip[hidden]{display:none}
.ov-netchip-k{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7E8CA0}
.ov-netchip-v{font-family:var(--font-serif);font-size:30px;font-weight:600;line-height:1.1;color:#22303F}
.ov-netchip[data-sign=pos] .ov-netchip-v{color:#2F7A57}
.ov-netchip[data-sign=neg] .ov-netchip-v{color:#C25441}

/* month toggle — segmented pill + range chips */
.ov-glass #ov-toggle-host{margin-top:24px}
.ov-glass #fho-mount{margin-top:26px}
.ov-glass .ov-toggle{gap:10px;margin-bottom:0}
.ov-glass .seg{position:relative;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);border-radius:11px;
  overflow:hidden;box-shadow:0 6px 16px -12px rgba(60,72,96,.5)}
.ov-glass .seg .seg-b{position:relative}
.ov-glass .seg-b{padding:8px 15px;font-size:13px;font-weight:500;color:#5C6B80;border-right:0}
.ov-glass .seg-b.on{color:#fff;background:linear-gradient(135deg,#4F6B92,#33496B);font-weight:600}
.ov-glass .ov-range{gap:8px;color:#9AA7B8}
.ov-glass .ov-range input[type=date]{border:1px solid rgba(60,72,96,.14);border-radius:11px;padding:8px 12px;
  background:rgba(255,255,255,.6);color:#5C6B80;font-size:12.5px}
.ov-glass .ov-range .btn.ghost{position:relative;overflow:hidden;border:1px solid rgba(60,72,96,.14);border-radius:11px;
  padding:8px 15px;font-size:13px;font-weight:500;color:#5C6B80;background:rgba(255,255,255,.6)}

/* per-card monthly-math grid */
.ovc-wrap{position:relative;margin-top:28px}
.ovc-title{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7E8CA0;margin-bottom:12px}
.ovc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.ovc-card{position:relative;overflow:hidden;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.9);
  border-radius:15px;padding:16px 18px;box-shadow:0 10px 26px -18px rgba(60,72,96,.45)}
.ovc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ovc-name{display:flex;align-items:flex-start;gap:8px;font-size:16px;font-weight:600;color:#22303F;min-width:0}
.ovc-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
/* one line: the NAME ellipsizes as needed; the last-4 never shrinks and stays pinned at the end, so the
   "…" always cuts into the name, never the digits. */
.ovc-nm-row{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:5px}
.ovc-nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.ovc-l4{flex:0 0 auto;white-space:nowrap;line-height:1.2}
.ovc-apr{flex:0 0 auto;white-space:nowrap;font-family:var(--font-serif);font-size:15px;font-weight:600;color:#5C6B80}
.ovc-balrow{margin-top:12px;display:flex;align-items:flex-end;justify-content:space-between}
.ovc-k{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9AA7B8}
.ovc-bal{font-family:var(--font-serif);font-size:26px;font-weight:600;color:#22303F;line-height:1}
.ovc-split{text-align:right;font-size:11.5px;color:#8494A8;line-height:1.5}
.ovc-split .i{color:#C25441}.ovc-split .s{color:#3B6BB0}.ovc-split .p{color:#2F7A57}
.ovc-bars{position:relative;margin-top:14px;padding-top:15px;display:flex;flex-direction:column;gap:6px}
.ovc-min-lbl{position:absolute;top:0;transform:translateX(-50%);font-size:8.5px;font-weight:600;color:#7E8CA0;
  white-space:nowrap;pointer-events:none}
.ovc-track{position:relative;height:17px;border-radius:6px;background:rgba(60,72,96,.1)}
.ovc-fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.ovc-acc{background:#3B6BB0}              /* accrued (balance added) = blue */
.ovc-paid-climb{background:#C25441}       /* paid < accrued → balance grew → red */
.ovc-paid-down{background:#2F7A57}        /* paid ≥ accrued → paying down → green */
/* accrued/paid amounts sit INSIDE their bars (white + halo so they read on the fill or the light track) */
.ovc-inbar{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:9px;font-weight:600;color:#fff;
  text-shadow:0 0 3px rgba(20,30,45,.55),0 1px 1px rgba(20,30,45,.45);white-space:nowrap;pointer-events:none;z-index:2}
.ovc-min{position:absolute;top:-3px;bottom:-3px;border-left:2px dashed #22303F;z-index:3}
.ovc-net{margin-top:12px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:10px}
.ovc-net-k{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7E8CA0}
.ovc-net-v{font-family:var(--font-serif);font-size:19px;font-weight:600;display:flex;align-items:baseline;gap:6px}
.ovc-net-v em{font-family:'Space Grotesk',var(--font-sans),sans-serif;font-style:normal;font-size:9px;font-weight:600;text-transform:uppercase}
.ovc-net.climb{background:rgba(194,84,65,.1)} .ovc-net.climb .ovc-net-v{color:#C25441}
.ovc-net.down{background:rgba(47,122,87,.12)} .ovc-net.down .ovc-net-v{color:#2F7A57}
.ovc-net.flat{background:rgba(60,72,96,.08)} .ovc-net.flat .ovc-net-v{color:#5C6B80}
.ovc-none{margin-top:14px;font-size:12px;color:#9AA7B8}
.ovc-empty{opacity:.72}

@media(max-width:900px){.ovc-grid{grid-template-columns:1fr}}
@media(max-width:760px){.ov-glass{padding:26px 20px}.ov-title{font-size:29px}.ov-head{flex-direction:column;gap:12px}}