/* Money Plan styles. Barlow fonts self-hosted (SIL Open Font License), latin subset. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(barlow-400.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(barlow-500.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(barlow-600.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(barlow-700.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(barlow-condensed-500.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(barlow-condensed-600.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(barlow-condensed-700.woff2) format('woff2');}
:root{
  --paper:#F2F5F4; --surface:#FFFFFF; --sunk:#E8EDEB; --ink:#14262B; --muted:#5C6D71; --faint:#8A989B;
  --line:#D8E0DD; --teal:#0E5E63; --teal-2:#147A80; --teal-soft:#DCEDEC; --hi:#F0B429; --hi-soft:#FCF0CC;
  --debt:#B4432F; --debt-soft:#F6E1DC; --good:#2B7A4B; --good-soft:#DDEFE3; --c401:#6B5B95; --cheloc:#8A7F6A; --crep:#C77A2C;
  --shadow:0 1px 0 rgba(20,38,43,.06);
  --radius-lg:14px; --radius:9px; --radius-sm:6px;
  --font:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-cond:"Barlow Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1719; --surface:#152225; --sunk:#1B2B2F; --ink:#E3ECEA; --muted:#97A8AA; --faint:#6E8285;
    --line:#26383C; --teal:#4FB0A7; --teal-2:#6CC4BB; --teal-soft:#1D3A3B; --hi:#F2C14E; --hi-soft:#3A3220;
    --debt:#E2836A; --debt-soft:#3A2420; --good:#64BF88; --good-soft:#1C3527; --c401:#A497CF; --cheloc:#B7AC95; --crep:#E3A15A;
    --shadow:none; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1719; --surface:#152225; --sunk:#1B2B2F; --ink:#E3ECEA; --muted:#97A8AA; --faint:#6E8285;
  --line:#26383C; --teal:#4FB0A7; --teal-2:#6CC4BB; --teal-soft:#1D3A3B; --hi:#F2C14E; --hi-soft:#3A3220;
  --debt:#E2836A; --debt-soft:#3A2420; --good:#64BF88; --good-soft:#1C3527; --c401:#A497CF; --cheloc:#B7AC95; --crep:#E3A15A;
  --shadow:none; color-scheme:dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 110px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.45;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
button,input,select{ font:inherit; color:inherit; }
a{ color:var(--teal); }
:focus-visible{ outline:2px solid var(--hi); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- app bar ---------- */
.bar{ position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(8px); -webkit-backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); }
.bar-in{ max-width:1180px; margin:0 auto; padding:12px 20px 0; }
.brand{ display:flex; align-items:center; gap:14px; justify-content:space-between; }
.brand h1{ margin:0; font-family:var(--font-cond); font-weight:700; font-size:26px; letter-spacing:.2px; line-height:1; }
.brand h1 small{ font-family:var(--font); font-weight:500; font-size:14px; color:var(--muted); margin-left:8px; letter-spacing:0; }
.bar-tools{ display:flex; align-items:center; gap:8px; }
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); white-space:nowrap; }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--faint); }
.pill.ok .dot{ background:var(--good); } .pill.busy .dot{ background:var(--hi); } .pill.warn .dot{ background:var(--debt); }
.icon-btn{ border:1px solid var(--line); background:var(--surface); border-radius:999px; width:32px; height:32px; display:grid; place-items:center; cursor:pointer; }
.icon-btn svg{ width:16px; height:16px; }
nav.tabs{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; margin-top:10px; }
nav.tabs::-webkit-scrollbar{ display:none; }
nav.tabs button{ border:0; background:none; padding:10px 12px 11px; cursor:pointer; color:var(--muted); font-weight:600; font-size:14.5px; white-space:nowrap; border-bottom:3px solid transparent; }
nav.tabs button[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--hi); }
nav.tabs button:hover{ color:var(--ink); }

main{ max-width:1180px; margin:0 auto; padding:22px 20px 60px; }
.view{ display:grid; gap:18px; }
.sec-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:6px 0 2px; }
.sec-title h2{ margin:0; font-family:var(--font-cond); font-weight:700; font-size:22px; letter-spacing:.2px; }
.sec-title p{ margin:0; color:var(--muted); font-size:14px; }
.lede{ font-family:var(--font-cond); font-weight:600; font-size:clamp(26px, 3.4vw, 38px); line-height:1.12; margin:0; max-width:30ch; letter-spacing:.1px; }
.lede b{ font-weight:700; }
.sub{ color:var(--muted); margin:8px 0 0; max-width:70ch; }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px; min-width:0; }
.panel.flat{ background:transparent; border-style:dashed; box-shadow:none; }
.panel h3{ margin:0 0 10px; font-size:15px; font-weight:700; }
.panel h3 .hint{ font-weight:500; color:var(--muted); font-size:13px; margin-left:6px; }
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.split{ display:grid; grid-template-columns:minmax(0, 330px) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width: 900px){ .grid2, .grid3, .split{ grid-template-columns:minmax(0,1fr); } }

/* ---------- KPI strip ---------- */
.kpis{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; }
.kpi{ padding:14px 16px; border-left:1px solid var(--line); min-width:0; }
.kpi:first-child{ border-left:0; }
.kpi .k{ font-size:13px; color:var(--muted); }
.kpi .v{ font-family:var(--font-cond); font-weight:700; font-size:28px; line-height:1.05; margin-top:4px; white-space:nowrap; }
.kpi .v .to{ color:var(--faint); font-weight:500; font-size:20px; margin:0 4px; }
.kpi .d{ font-size:12.5px; color:var(--muted); margin-top:3px; }
@media (max-width: 900px){ .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } .kpi{ border-left:0; border-top:1px solid var(--line); } .kpi:nth-child(-n+2){ border-top:0; } .kpi:nth-child(even){ border-left:1px solid var(--line); } }

/* ---------- schedule (gantt) ---------- */
.sched-wrap{ overflow-x:auto; }
.sched{ min-width:760px; }
.sched svg{ display:block; width:100%; height:auto; }
.sched text{ font-family:var(--font); fill:var(--ink); }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--sunk); gap:2px; }
.seg button{ border:0; background:none; border-radius:999px; padding:5px 12px; cursor:pointer; font-weight:600; font-size:13.5px; color:var(--muted); }
.seg button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* ---------- tables ---------- */
.tbl-wrap{ overflow-x:auto; }
table.t{ width:100%; border-collapse:collapse; font-size:14px; }
table.t th, table.t td{ padding:7px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
table.t th:first-child, table.t td:first-child{ text-align:left; white-space:normal; }
table.t thead th{ font-weight:600; color:var(--muted); font-size:12.5px; border-bottom:1px solid var(--ink); position:sticky; top:0; background:var(--surface); }
table.t tr.total td{ font-weight:700; border-top:1px solid var(--ink); }
table.t tr.key td{ background:var(--hi-soft); font-weight:700; }
table.t tr.group td{ background:var(--sunk); font-weight:700; color:var(--ink); font-size:13px; }
table.t td.neg{ color:var(--debt); }
table.t td.pos{ color:var(--good); }
table.t td.dim{ color:var(--faint); }

/* ---------- budget lines ---------- */
.months{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.months button{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:7px 12px; cursor:pointer; text-align:left; min-width:92px; }
.months button b{ display:block; font-size:14px; }
.months button span{ font-size:12px; color:var(--muted); }
.months button[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.months button[aria-pressed="true"] span{ color:color-mix(in srgb, var(--paper) 75%, transparent); }
.cat{ border-top:1px solid var(--line); }
.cat:first-child{ border-top:0; }
.cat-h{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 0 6px; }
.cat-h h4{ margin:0; font-size:13px; font-weight:700; color:var(--teal); letter-spacing:.2px; }
.cat-h span{ font-size:12.5px; color:var(--muted); }
.ln{ display:grid; grid-template-columns:minmax(0,1fr) 104px 104px 96px; gap:10px; align-items:center; padding:5px 0; }
.ln .nm{ min-width:0; }
.ln .nm .l{ font-weight:500; }
.ln .nm .n{ font-size:12px; color:var(--muted); }
.ln .rem{ text-align:right; font-weight:600; }
.ln .rem.over{ color:var(--debt); }
.ln .barr{ grid-column:1 / -1; height:4px; background:var(--sunk); border-radius:4px; overflow:hidden; margin-top:-2px; }
.ln .barr i{ display:block; height:100%; background:var(--teal); border-radius:4px; }
.ln .barr i.over{ background:var(--debt); }
.ln-h{ display:grid; grid-template-columns:minmax(0,1fr) 104px 104px 96px; gap:10px; font-size:12px; color:var(--muted); padding:0 0 4px; border-bottom:1px solid var(--ink); }
.ln-h span{ text-align:right; }
.ln-h span:first-child{ text-align:left; }
@media (max-width: 560px){ .ln, .ln-h{ grid-template-columns:minmax(0,1fr) 84px 84px 74px; gap:6px; } }
.num, input.num{ text-align:right; font-variant-numeric:tabular-nums; }
input.num, input.txt, select.inp, input.date{ width:100%; border:1px solid transparent; border-bottom-color:var(--line); background:transparent; padding:5px 6px; border-radius:6px 6px 0 0; }
input.num:hover, input.txt:hover, select.inp:hover, input.date:hover{ background:var(--sunk); }
input.num:focus, input.txt:focus, select.inp:focus, input.date:focus{ outline:none; border-color:var(--teal); background:var(--surface); border-radius:6px; }
input.num.ro{ border-bottom-color:transparent; color:var(--muted); }
input.edit{ color:var(--teal); font-weight:600; }

/* ---------- income stub ---------- */
.stub .row{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:14px; }
.stub .row span:first-child{ color:var(--muted); }
.stub .row.total{ border-top:1px solid var(--ink); margin-top:4px; padding-top:8px; font-weight:700; }
.stub .row.total span:first-child{ color:var(--ink); }
.zero{ margin-top:14px; border-radius:var(--radius); padding:12px 14px; background:var(--good-soft); }
.zero.neg{ background:var(--debt-soft); }
.zero .k{ font-size:13px; color:var(--muted); }
.zero .v{ font-family:var(--font-cond); font-weight:700; font-size:30px; }
.zero p{ margin:4px 0 0; font-size:12.5px; color:var(--muted); }

/* ---------- chips, notes ---------- */
.chip{ display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--sunk); color:var(--muted); white-space:nowrap; }
.chip.g1{ background:var(--teal-soft); color:var(--teal); }
.chip.k4{ background:color-mix(in srgb, var(--c401) 18%, transparent); color:var(--c401); }
.chip.cash{ background:var(--hi-soft); color:color-mix(in srgb, var(--hi) 55%, var(--ink)); }
.chip.done{ background:var(--good-soft); color:var(--good); }
.chip.bad{ background:var(--debt-soft); color:var(--debt); }
.note{ font-size:13px; color:var(--muted); }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-top:8px; }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.callout{ border-left:3px solid var(--hi); background:var(--hi-soft); padding:10px 12px; border-radius:0 var(--radius) var(--radius) 0; font-size:14px; }
.callout.teal{ border-left-color:var(--teal); background:var(--teal-soft); }

/* ---------- scenario cards ---------- */
.scen{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; background:var(--surface); display:grid; gap:10px; align-content:start; position:relative; }
.scen.best{ border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal); }
.scen h4{ margin:0; font-size:16px; }
.scen .tag{ position:absolute; top:-10px; right:12px; background:var(--teal); color:var(--paper); font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
.scen .big{ font-family:var(--font-cond); font-weight:700; font-size:30px; line-height:1; }
.scen .kv{ display:grid; gap:6px; font-size:13.5px; }
.scen .kv div{ display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:6px; }
.scen .kv span{ color:var(--muted); }
.scen .kv b{ font-weight:600; white-space:nowrap; text-align:right; }
.u{ position:relative; display:block; }
.u input{ padding-right:20px; }
.u i{ position:absolute; right:6px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--muted); pointer-events:none; font-size:13px; }
@media (min-width: 901px){ .sticky-col{ position:sticky; top:118px; } }

/* ---------- forms ---------- */
.fields{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:4px 22px; }
.field{ display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.field label{ font-size:13.5px; }
.field label .n{ display:block; font-size:12px; color:var(--muted); }
.range{ display:grid; gap:4px; padding:8px 0; }
.range .top{ display:flex; justify-content:space-between; font-size:13.5px; }
.range .top b{ font-family:var(--font-cond); font-size:20px; }
input[type=range]{ width:100%; accent-color:var(--teal); }
.btn{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:8px 14px; cursor:pointer; font-weight:600; }
.btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.danger{ color:var(--debt); }
.btn.sm{ padding:4px 10px; font-size:13px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- todo ---------- */
.todo{ list-style:none; margin:0; padding:0; counter-reset:t; }
.todo li{ display:grid; grid-template-columns:28px 1fr; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); align-items:start; }
.todo li:last-child{ border-bottom:0; }
.todo input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--teal); }
.todo .tx{ font-size:14px; }
.todo .tx small{ display:block; color:var(--muted); font-size:12.5px; }
.todo li.done .tx{ color:var(--faint); text-decoration:line-through; text-decoration-color:var(--faint); }

/* ---------- charts ---------- */
.chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart text{ font-family:var(--font); font-size:11px; fill:var(--muted); }
.chart .axis{ stroke:var(--line); }
.chart .goal{ stroke:var(--hi); stroke-dasharray:4 4; stroke-width:1.5; }

.waterfall .row{ display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:14px; }
.waterfall .row span:last-child{ text-align:right; font-weight:600; }
.waterfall .row.res{ border-bottom:0; border-top:1px solid var(--ink); font-weight:700; font-size:15px; }

.toast{ position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:999px; font-size:13.5px; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show{ opacity:1; }
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.right{ text-align:right; }
.mt0{ margin-top:0; }
details.more summary{ cursor:pointer; color:var(--teal); font-weight:600; font-size:14px; padding:6px 0; }
textarea.json{ width:100%; min-height:140px; font-size:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--sunk); padding:8px; }

/* ---------- small screens ---------- */
@media (max-width: 560px){
  .bar-in{ padding:10px 14px 0; }
  .brand h1{ font-size:24px; }
  .brand h1 small{ display:none; }
  main{ padding:16px 14px 48px; }
  .panel{ padding:14px; }
  .kpi{ padding:12px; }
  .kpi .v{ font-size:22px; white-space:normal; }
  .kpi .v .to{ font-size:16px; }
  .ln{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 8px; padding:8px 0 6px; }
  .ln .nm{ grid-column:1 / -1; }
  .ln-h{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ln-h span:first-child{ display:none; }
  .ln-h span{ text-align:right; }
  .field{ grid-template-columns:minmax(0,1fr) 104px; }
}
.grid2.top{ align-items:start; }

/* ---------- goals ---------- */
.goals{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.goal{ border:1px solid var(--line); border-radius:var(--radius); padding:12px; display:grid; gap:8px; }
.goal-h{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.goal-h b{ font-size:14px; }
.goal-h span{ font-family:var(--font-cond); font-weight:700; font-size:18px; color:var(--teal); white-space:nowrap; }
.gbar{ height:8px; border-radius:8px; background:var(--sunk); overflow:hidden; }
.gbar i{ display:block; height:100%; background:var(--teal); border-radius:8px; }
.goal-f{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); }

/* ---------- year + phase bars ---------- */
.yearbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.phasebar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chip.ph-home{ background:var(--teal-soft); color:var(--teal); }
.chip.ph-vacant{ background:color-mix(in srgb, var(--crep) 18%, transparent); color:var(--crep); }
.chip.ph-apt{ background:color-mix(in srgb, var(--cheloc) 22%, transparent); color:color-mix(in srgb, var(--cheloc) 70%, var(--ink)); }
.chip.ph-newhome{ background:var(--good-soft); color:var(--good); }
.chip{ font-size:12px; }
.phasebar .chip{ font-size:13px; padding:4px 10px; }

/* ---------- milestones timeline ---------- */
.tl{ list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--line); display:grid; gap:10px; }
.tl li{ position:relative; display:grid; grid-template-columns:86px 1fr; gap:10px; font-size:14px; }
.tl li::before{ content:""; position:absolute; left:-21px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--teal); border:2px solid var(--surface); }
.tl li.k-home::before{ background:var(--hi); } .tl li.k-move::before{ background:var(--crep); } .tl li.k-save::before{ background:var(--good); } .tl li.k-rent::before{ background:var(--cheloc); }
.tl li b{ font-family:var(--font-cond); font-size:15px; }

/* ---------- calendar ---------- */
.calgrid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin-top:12px; }
.cal-h{ font-size:11.5px; color:var(--muted); text-align:center; font-weight:600; }
.cal-d{ border:1px solid var(--line); border-radius:6px; padding:4px 5px; min-height:54px; display:grid; align-content:space-between; font-size:11.5px; background:var(--surface); }
.cal-d .dn{ font-weight:700; color:var(--muted); }
.cal-d .db{ font-family:var(--font-cond); font-weight:700; font-size:14px; text-align:right; }
.cal-d .de{ color:var(--debt); letter-spacing:1px; line-height:1; }
.cal-d.pay{ background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 40%, var(--line)); }
.cal-d.neg{ background:var(--debt-soft); border-color:var(--debt); }
.cal-d.neg .db{ color:var(--debt); }
@media (max-width:560px){ .cal-d{ min-height:44px; padding:3px; } .cal-d .db{ font-size:12px; } }
table.t td a{ color:var(--teal); font-weight:600; text-decoration:none; }
th a{ color:inherit; text-decoration:none; }
@media (max-width:560px){ .kpis[style]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .goals{ grid-template-columns:1fr; } .tl li{ grid-template-columns:74px 1fr; } }
/* ---------- section switcher (Money · Schedule · Home · Health) ---------- */
.sections{margin-bottom:2px}
.sections button[aria-current="page"]{font-weight:700}