/* ============================================================
   PropFact calculator suite — shared design system
   One file. Every calculator imports it, nothing overrides
   the tokens. Page-specific rules live in each page's <style>.

   The palette is Deep Harbour, the same tokens the PropFact site
   and the five data tools use, so a calculator dropped into the
   /app/ shell is the same surface the client was already on.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root{
  /* Deep Harbour. Dark is the default here because it is the default
     everywhere else on PropFact; the light set below exists for the
     theme toggle and, more importantly, for print — these pages get
     handed to clients on paper, and paper is white. */
  --page:#071824;
  --ground:#071824;
  --wash-1:#0F3A4A;
  --wash-2:#14293F;
  --surface:#0C2131;          /* opaque: sticky table headers sit on it */
  --surface-2:#102A3C;
  --surface-3:#16374C;
  --glass:rgba(255,255,255,.045);
  --field:rgba(0,0,0,.22);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.20);
  --ink:#F2F8F6;
  --ink-2:#CFE3EC;
  --ink-3:#7FA3B3;
  --ink-4:#55707D;
  --accent:#4FD1C5;
  --accent-hi:#7FE0D6;
  --accent-soft:rgba(79,209,197,.12);
  --on-accent:#04141D;
  --gold:#D9A552;
  --sky:#8AB8FF;
  /* Tooltips invert against the page, so they need their own background —
     var(--ink) is near-white here and white-on-white is invisible. */
  --tip:#04141D;
  --tip-ink:#F2F8F6;

  /* categorical — grouped by who receives the money */
  --c-deposit:#4FD1C5;
  --c-gov:#8AB8FF;
  --c-lender:#D9A552;
  --c-prof:#E6857A;
  --c1:#4FD1C5; --c2:#8AB8FF; --c3:#D9A552; --c4:#E6857A; --c5:#3FBF72; --c6:#A796C9;
  --debt:#D9A552;

  --good:#3FBF72;
  --good-soft:rgba(63,191,114,.12);
  --crit:#EF6A5C;
  --crit-soft:rgba(239,106,92,.12);
  --warn:#D9A552;
  --warn-soft:rgba(217,165,82,.12);

  /* On a dark surface a drop shadow reads as mud; the borders do the work. */
  --shadow:0 1px 2px rgba(0,0,0,.28);
  --shadow-lg:0 18px 44px -20px rgba(0,0,0,.75);
  --r:14px;
  --r-sm:9px;
  --ease:cubic-bezier(.4,0,.2,1);

  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* PropFact's tools use no monospace — figures are the body face with
     tabular figures, which is what --num is for. --code is for the literal
     formula blocks, which really are code. */
  --num:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --code:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Read by the guard in each page: if this token is missing the
     stylesheet never loaded, which means assets/ is not beside the
     page — almost always a file opened from inside the ZIP. */
  --px-loaded:1;

  color-scheme:dark;
}

/* The light set. Reached by the theme toggle and forced on for print. */
:root[data-theme="light"]{
  --page:#F1F3F1;
  --ground:#F1F3F1;
  --wash-1:transparent;
  --wash-2:transparent;
  --surface:#FFFFFF;
  --surface-2:#F7F9F7;
  --surface-3:#ECF0EE;
  --glass:#FFFFFF;
  --field:#F7F9F7;
  --line:#DDE2DE;
  --line-strong:#C2CAC4;
  --ink:#0A1B24;
  --ink-2:#3E4E4A;
  --ink-3:#6C7B76;
  --ink-4:#8A9691;
  --accent:#10796E;
  --accent-hi:#0E6B5A;
  --accent-soft:#E2EFEA;
  --on-accent:#FFFFFF;
  --tip:#0A1B24;
  --tip-ink:#FFFFFF;
  --c-deposit:#10796E; --c-gov:#2E5A7D; --c-lender:#B07C2B; --c-prof:#8C4A52;
  --c1:#10796E; --c2:#2E5A7D; --c3:#B07C2B; --c4:#8C4A52; --c5:#4E7C5E; --c6:#6B5E8C;
  --debt:#B07C2B;
  --good:#2F7A50;  --good-soft:#E4F0E8;
  --crit:#9E3B36;  --crit-soft:#F6E7E6;
  --warn:#9A6B1E;  --warn-soft:#F7EDDC;
  --shadow:0 1px 2px rgba(16,30,27,.05), 0 8px 24px -12px rgba(16,30,27,.16);
  --shadow-lg:0 2px 4px rgba(16,30,27,.06), 0 20px 44px -20px rgba(16,30,27,.24);
  color-scheme:light;
}

/* ---------- 2. BASE ---------- */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 18% -10%,var(--wash-1) 0%,transparent 60%),
    radial-gradient(900px 500px at 100% 10%,var(--wash-2) 0%,transparent 55%),
    var(--ground);
  /* Deliberately not background-attachment:fixed. A fixed gradient re-rasterises
     the whole viewport on every repaint, and these pages repaint on every
     keystroke and every mousemove across a chart. The site does not use one
     either — the wash reads the same scrolling with the page. */
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;
  text-wrap:balance;margin:0;color:var(--ink)}
/* PropFact's signature: the emphasised half of a headline runs teal → gold → sky.
   It is an <em> so it still reads as emphasis with the gradient unsupported. */
h1 em,h2 em,.grad{font-style:normal;
  background-image:linear-gradient(100deg,#4FD1C5,#D9A552 55%,#8AB8FF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] h1 em,:root[data-theme="light"] h2 em,
:root[data-theme="light"] .grad{
  background-image:linear-gradient(100deg,#0E6B5A,#8A5A12 55%,#2E5A7D)}
@media print{h1 em,h2 em,.grad{background:none;color:#000}}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hi)}
::selection{background:var(--accent);color:var(--on-accent)}
img,svg{max-width:100%}
.mono{font-family:var(--num);font-variant-numeric:tabular-nums}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px 80px}
@media (max-width:600px){.wrap{padding:0 16px 56px}}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. SUITE NAV ---------- */

/* Two rows, on purpose. The top one is the PropFact site's own menu, so a client
   who opened a calculator can still reach Plans, the free course, the data tools
   and Work With Us without going back first. The row under it belongs to this
   suite and is deliberately the quieter of the two -- smaller type on an inset
   ground -- so the two never read as one confusing strip of tabs.
   The header is what sticks and what carries the glass; the rows inside it are
   only colour, or the blur would be applied twice. */
.px-head{
  position:sticky;top:0;z-index:40;
  background:rgba(7,24,36,.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
:root[data-theme="light"] .px-head{background:rgba(255,255,255,.86)}

.px-site{border-bottom:1px solid var(--line)}
.px-site-in{
  max-width:1220px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:24px;min-height:58px;
}
@media (max-width:600px){.px-site-in{padding:0 16px;gap:14px}}
.px-site-links{display:flex;gap:2px;flex:1;min-width:0}
.px-site-links a{
  padding:9px 14px;border-bottom:2px solid transparent;text-decoration:none;
  white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--ink-3);
  transition:color .12s,border-color .12s;
}
.px-site-links a:hover{color:var(--ink)}
/* Gold under the section you are in, the same mark the site itself uses. */
.px-site-links a[aria-current=page]{color:var(--ink);border-bottom-color:var(--gold)}
.px-site-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.px-plain{
  font-size:13.5px;font-weight:600;color:var(--ink-3);text-decoration:none;
  padding:9px 6px;white-space:nowrap;transition:color .12s;
}
.px-plain:hover{color:var(--ink)}
.px-solid{
  font-size:13px;font-weight:700;border-radius:999px;padding:10px 20px;white-space:nowrap;
  background:var(--accent);color:var(--on-accent);text-decoration:none;
}
.px-solid:hover{background:var(--accent-hi);color:var(--on-accent)}
/* On a narrow screen the site row keeps only the wordmark and the one button;
   the tool row below still scrolls, so every calculator stays one tap away. */
@media (max-width:860px){.px-site-links,.px-plain{display:none}}

.px-nav{background:rgba(255,255,255,.03)}
:root[data-theme="light"] .px-nav{background:rgba(0,0,0,.03)}
.px-nav-in{
  max-width:1220px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:18px;min-height:46px;
}
@media (max-width:600px){.px-nav-in{padding:0 16px;gap:12px}}
.px-mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:none}
.px-mark svg{width:26px;height:26px;flex:none}
.px-mark b{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink)}
.px-mark b i{font-style:normal;color:var(--gold)}
.px-mark span{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;border-left:1px solid var(--line-strong);padding-left:9px;
}
@media (max-width:760px){.px-mark span{display:none}}
/* The wordmark in the site row goes back to the PropFact site; "Buyer tools"
   labels the row below it and goes to this suite's own index. */
.px-sub{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  font-weight:700;flex:none;text-decoration:none;transition:color .12s;
}
.px-sub:hover{color:var(--ink-2)}
@media (max-width:760px){.px-sub{display:none}}
.px-links{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.px-links::-webkit-scrollbar{display:none}
.px-links a{
  padding:9px 13px;border-bottom:2px solid transparent;text-decoration:none;
  white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--ink-3);
  transition:color .12s,border-color .12s;
}
.px-links a:hover{color:var(--ink)}
/* Gold under the live tab, the way the PropFact app marks its own. */
.px-links a[aria-current=page]{color:var(--ink);border-bottom-color:var(--gold)}
.px-tools{display:flex;gap:6px;align-items:center;flex:none}

.icon-btn{
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:999px;background:var(--glass);
  color:var(--ink-2);cursor:pointer;padding:0;
  transition:border-color .12s,color .12s;
}
.icon-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 4. PAGE HEAD ---------- */

.top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:30px 0 20px;border-bottom:1px solid var(--line);margin-bottom:26px;
}
.brand h1{font-size:30px;letter-spacing:-.025em;line-height:1.1}
@media (max-width:600px){.brand h1{font-size:24px}}
.brand p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px;max-width:62ch}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.stamp{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  white-space:nowrap;
}
.stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- 5. LAYOUT ---------- */

.grid{display:grid;grid-template-columns:352px minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:1000px){.grid{grid-template-columns:1fr}}
.panel{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
}
:root[data-theme="light"] .panel{background:var(--surface);box-shadow:var(--shadow)}
.rail{position:sticky;top:76px;padding:22px;max-height:calc(100vh - 96px);overflow-y:auto;
  scrollbar-width:thin}
@media (max-width:1000px){.rail{position:static;max-height:none;overflow:visible}}
.results{display:flex;flex-direction:column;gap:20px;min-width:0}

.p-head{padding:22px 26px 0}
.p-head h2{font-size:17px;letter-spacing:-.015em}
.p-head .cap{font-size:13px;color:var(--ink-3);margin:5px 0 0;max-width:74ch}
.p-body{padding:18px 26px 24px}
@media (max-width:600px){.p-head{padding:18px 18px 0}.p-body{padding:16px 18px 20px}}

/* ---------- 6. FORM CONTROLS ---------- */

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field:last-child{margin-bottom:0}
label,.lbl{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.hint{font-size:12px;color:var(--ink-3);margin:-1px 0 0;line-height:1.45}

.money-in{position:relative;display:flex;align-items:center}
.money-in .sig{
  position:absolute;left:13px;color:var(--ink-3);
  font-family:var(--num);font-size:15px;pointer-events:none;
}
.money-in.suf .sig{left:auto;right:13px}
input[type=text],input[type=email],input[type=number],select{
  width:100%;padding:10px 13px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--field);color:var(--ink);
  font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:500;
  transition:border-color .12s,background .12s;
}
input[type=text]:hover,input[type=email]:hover{border-color:var(--ink-3)}
.money-in input{padding-left:26px}
.money-in.suf input{padding-left:13px;padding-right:44px}
select{font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer}
input.name{font-family:var(--body);font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:invalid{border-color:var(--crit)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line);background:var(--glass);color:var(--ink-2);
  padding:6px 12px;border-radius:999px;cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:600;
  transition:background .12s,color .12s,border-color .12s;
}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line-strong);border-radius:2px}
input[type=range]::-moz-range-track{height:4px;background:var(--line-strong);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:3px solid var(--surface);margin-top:-7px;
  box-shadow:0 0 0 1px var(--line-strong);transition:transform .12s;
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line-strong);
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.slider-val{font-family:var(--num);font-size:14px;font-weight:600;color:var(--ink)}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.track{width:36px;height:20px;border-radius:999px;background:var(--line-strong);
  position:relative;transition:background .15s;flex:none}
.track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:var(--surface);transition:transform .15s}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{transform:translateX(16px)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}
.switch .txt{font-size:14px;font-weight:500;color:var(--ink-2)}

.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-2 .field{margin-bottom:0}
.sect{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.sect > .lbl{display:block;margin-bottom:14px;color:var(--ink-2)}

details.adv{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
details.adv summary{
  cursor:pointer;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);list-style:none;
}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+ ";font-family:var(--num)}
details.adv[open] summary::before{content:"– "}
details.adv .field{margin-top:16px}
details.adv summary:hover{color:var(--accent)}

/* ---------- 7. BUTTONS ---------- */

button{font-family:var(--body);cursor:pointer}
.btn{
  padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  background:var(--glass);color:var(--ink-2);font-size:13.5px;font-weight:600;
  transition:border-color .12s,color .12s,background .12s;white-space:nowrap;
}
.btn:hover{border-color:var(--line-strong);color:var(--ink)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--on-accent)}
.btn.sm{padding:5px 13px;font-size:12.5px}
.btn.danger:hover{border-color:var(--crit);color:var(--crit)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- 8. HEADLINE / BIG NUMBER ---------- */

.headline{padding:26px 28px 24px}
@media (max-width:600px){.headline{padding:20px 18px}}
.big{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(38px,6vw,58px);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.big.pos{color:var(--good)}
.big.neg{color:var(--crit)}
.big.sec{color:var(--ink)}
.lbl.big-lbl{display:block;margin-bottom:7px}
.sub{margin-top:11px;color:var(--ink-2);font-size:14px;max-width:64ch}
.sub b{color:var(--ink);font-family:var(--num);font-weight:600}
.hl-note{margin-top:9px;font-size:13px;color:var(--ink-3)}
.hl-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:700px){.hl-2{grid-template-columns:1fr;gap:22px}}
.hl-2 > div + div{border-left:1px solid var(--line);padding-left:28px}
@media (max-width:700px){
  .hl-2 > div + div{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
}

.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;
  font-weight:700;letter-spacing:.01em;margin-right:8px}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad,.pill.short{background:var(--crit-soft);color:var(--crit)}

/* Two things wear this name. As a <p> under a headline it is prose, and prose
   wants a reading measure. As a <div> the pages redraw it into a bordered card,
   and a card capped at 74ch leaves half the row visibly empty beside it — so the
   measure belongs on the paragraph, not on the class. */
.verdict{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-2)}
p.verdict{max-width:74ch}
.verdict b{color:var(--ink)}

/* ---------- 9. STAT TILES ---------- */

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1000px){.stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.stats.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.stat .n{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.stat .v{font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:21px;font-weight:600;letter-spacing:-.025em}
.stat .h{font-size:12.5px;color:var(--ink-3)}
.stat .v.pos,.stat .v.ok{color:var(--good)}
.stat .v.neg,.stat .v.bad{color:var(--crit)}
.stat.hero{background:var(--accent-soft)}
.stat.hero .v{color:var(--accent)}

/* ---------- 10. SCENARIO STRIP ---------- */

.scen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:760px){.scen{grid-template-columns:1fr;gap:16px}}
.sc{padding-top:13px;border-top:2px solid var(--line)}
.sc.on{border-top-color:var(--accent)}
.sc .n{font-size:12px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:5px}
.sc .v{font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:25px;font-weight:600;letter-spacing:-.03em;display:block;line-height:1.1}
.sc.on .v{color:var(--accent)}
.sc .h{font-size:12px;color:var(--ink-3);display:block;margin-top:5px;line-height:1.45}

/* ---------- 11. LEDGER ---------- */

.ledger{display:flex;flex-direction:column}
.lg-group{border-top:1px solid var(--line)}
.lg-group:first-child{border-top:none}
.lg-head{display:flex;align-items:center;gap:9px;padding:11px 8px 7px;
  border-radius:6px;transition:background .12s}
.lg-group:hover .lg-head{background:var(--surface-2)}
.swatch{width:9px;height:9px;border-radius:2px;flex:none}
.lg-name{font-weight:700;font-size:14px;flex:1;min-width:0}
.lg-amt{font-family:var(--num);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:14.5px}
.lg-pct{font-family:var(--num);font-size:11.5px;color:var(--ink-3);
  width:44px;text-align:right;flex:none}
.lg-item{display:flex;align-items:baseline;gap:9px;padding:3px 8px 3px 26px;
  font-size:13.5px;color:var(--ink-2)}
.lg-item .n{flex:1;min-width:0}
.lg-item .v{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:13px}
.lg-item.muted .n,.lg-item.muted .v{color:var(--ink-3);font-style:italic}
.lg-item.credit .n,.lg-item.credit .v{color:var(--good)}
.lg-group:last-of-type{padding-bottom:10px}
.lg-total{display:flex;align-items:baseline;gap:9px;margin-top:10px;padding:13px 8px 0;
  border-top:2px solid var(--line-strong)}
.lg-total .n{flex:1;font-weight:700;font-size:14px}
.lg-total .v{font-family:var(--num);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:19px;color:var(--accent)}

/* ---------- 12. CHARTS ---------- */

.donut{width:100%;max-width:250px;height:auto;display:block;margin:0 auto}
.donut circle{transition:opacity .18s,stroke-width .18s}
.donut.dim circle:not(.hot){opacity:.2}
.dc-total{font-family:var(--disp);font-weight:700;font-size:25px;
  letter-spacing:-.02em;fill:var(--ink)}
.dc-lbl{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.12em;fill:var(--ink-3)}

.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--ink-3)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;
  vertical-align:-1px;font-style:normal}
.legend i.dash{background:transparent;border:1px dashed var(--line-strong)}

/* ---------- 13. TABLE ---------- */

.tblwrap{overflow-x:auto;margin:0 -26px;padding:0 26px}
@media (max-width:600px){.tblwrap{margin:0 -18px;padding:0 18px}}
table{border-collapse:collapse;width:100%;font-size:13.5px}
/* Only a table that sits in a .tblwrap may refuse to shrink -- that wrapper is
   what gives it a sideways scroll. A form table (serviceability's debts and
   rates, exit-strategy's rates) has no wrapper, so a global min-width simply
   pushed the whole PAGE sideways on a phone. */
.tblwrap table{min-width:640px}
th,td{padding:7px 10px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;border-bottom:1px solid var(--line-strong);
  position:sticky;top:0;background:var(--surface);z-index:1}
td.num{font-family:var(--num);font-variant-numeric:tabular-nums}
tr.grp td{font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding-top:16px}
tr.sum td{border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:700}
tr.tot td{border-top:2px solid var(--line-strong);font-weight:700;font-size:14.5px}
tbody tr:not(.grp):hover td{background:var(--surface-2)}
td.neg{color:var(--crit)}
td.assum{font-family:var(--num);font-size:11px;color:var(--ink-3);text-align:right}

/* ---------- 14. NOTES / CTA / FOOT ---------- */

.note{padding:13px 18px;border-radius:var(--r-sm);background:var(--accent-soft);font-size:13px;
  color:var(--ink-2);display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;line-height:1.5}
.note b{color:var(--ink)}
.note.warn{background:var(--warn-soft)}

.cta{padding:24px 28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
@media (max-width:760px){.cta{grid-template-columns:1fr}}
.cta h2{font-size:19px;letter-spacing:-.015em;margin-bottom:5px}
.cta p{margin:0;font-size:13.5px;color:var(--ink-2);max-width:54ch}
.cta-acts{display:flex;gap:9px;flex-wrap:wrap}

.fine{margin-top:24px;font-size:12px;line-height:1.65;color:var(--ink-3);max-width:90ch}
.fine b{color:var(--ink-2)}

.px-foot{
  border-top:1px solid var(--line);background:transparent;
  padding:22px 0;margin-top:0;
}
.px-foot-in{
  max-width:1220px;margin:0 auto;padding:0 24px;
  display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);
}
@media (max-width:600px){.px-foot-in{padding:0 16px}}
.px-foot-in a{color:var(--ink-2);text-decoration:none;font-weight:600}
.px-foot-in a:hover{color:var(--accent)}

/* ---------- 15. TOAST ---------- */

#px-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:999px;
  font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);z-index:100;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
#px-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 16. MOTION ---------- */

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- 17. PRINT ---------- */

@media print{
  /* A client gets this on paper. Paper is white whatever the screen was. */
  :root,:root[data-theme="dark"],:root[data-theme="light"]{
    --page:#fff;--ground:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#fff;
    --glass:#fff;--field:#fff;--wash-1:transparent;--wash-2:transparent;
    --line:#c8cfca;--line-strong:#9aa5a0;
    --ink:#000;--ink-2:#333;--ink-3:#555;--ink-4:#666;
    --accent:#0E6B5A;--accent-soft:#eef5f2;--on-accent:#fff;
    --tip:#000;--tip-ink:#fff;
    --c-deposit:#0E6B5A;--c-gov:#2E5A7D;--c-lender:#B07C2B;--c-prof:#8C4A52;
    --c1:#0E6B5A;--c2:#2E5A7D;--c3:#B07C2B;--c4:#8C4A52;--c5:#4E7C5E;--c6:#6B5E8C;
    --debt:#B07C2B;
    --good:#2F7A50;--crit:#9E3B36;--warn:#9A6B1E;
    --shadow:none;--shadow-lg:none;
    color-scheme:light;
  }
  body{background:#fff !important}
  .px-head,.px-nav,.px-tools,.cta,.no-print,details.adv,input[type=range]{display:none !important}
  body{background:#fff;font-size:11.5px}
  .wrap{max-width:none;padding:0}
  .grid{grid-template-columns:250px 1fr;gap:16px}
  .rail{position:static;max-height:none;overflow:visible;padding:14px}
  .panel{box-shadow:none;border:1px solid var(--line);background:#fff;break-inside:avoid}
  .results{gap:12px}
  .big{font-size:34px}
  section,.prop,.stats{break-inside:avoid}
  .fine{font-size:9.5px;color:#444}
  a[href]::after{content:""}
  .print-only{display:block !important}
}
.print-only{display:none}

/* ---- Owner rows in the tracker toolbar --------------------------------
   `input[type=text]` in the base sheet is width:100% and wins on specificity,
   so every rule here is qualified with the element to beat it. */
.owners{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.owner-row{display:flex;align-items:center;gap:4px;padding:3px 3px 3px 5px;
  border:1px solid var(--line);border-radius:999px}
.owner-row.is-trust{border-style:dashed}
.owner-row input.owner-name{width:10ch;flex:none;padding:5px 7px;
  font-family:var(--body);font-size:13px;font-weight:600;
  border:1px solid transparent;background:transparent;border-radius:var(--r-sm)}
.owner-row input.owner-name:hover{border-color:var(--line-strong);background:var(--surface-2)}
.owner-row input.owner-name:focus{border-color:var(--accent);background:var(--surface-2);outline:none}
.owner-row .money-in{width:118px;flex:none}
.owner-row .money-in input[type=text]{width:100%;min-width:0;
  padding:5px 8px 5px 22px;font-size:13px}
.owner-row .money-in .sig{font-size:12px}
.owner-tag{font-size:10.5px;color:var(--ink-3);white-space:nowrap;padding:0 4px;
  letter-spacing:.04em;text-transform:uppercase}
.owner-x{border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  font-size:15px;line-height:1;padding:2px 6px;border-radius:50%;flex:none}
.owner-x:hover{color:var(--crit);background:var(--crit-soft)}

/* ---- Inline "i" with a hover/focus explanation ------------------------ */
.info{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:5px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--ink-3);
  font-size:10px;font-weight:700;font-style:normal;line-height:1;
  cursor:help;position:relative;vertical-align:middle;user-select:none;flex:none}
.info:hover,.info:focus-visible{border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft);outline:none}
/* content:none while idle, not just visibility:hidden. A hidden-but-generated
   bubble still counts towards the page's scrollable width, and a 300px tip on a
   390px phone was what made Purchase brief, Borrowing power and Exit strategy
   scroll sideways. It is generated on hover/focus instead. */
.info::after{content:none;position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);width:max-content;max-width:min(300px,calc(100vw - 32px));
  padding:9px 11px;border-radius:8px;border:1px solid var(--line);
  background:var(--tip);color:var(--tip-ink);font-size:11.5px;font-weight:400;line-height:1.5;
  text-align:left;white-space:normal;letter-spacing:0;
  /* These often sit inside an uppercase label; a paragraph must not inherit it. */
  text-transform:none;font-style:normal;
  opacity:0;visibility:hidden;transition:opacity .12s ease;
  box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.18));z-index:60;pointer-events:none}
.info:hover::after,.info:focus-visible::after{content:attr(data-tip);opacity:1;visibility:visible}
/* Keep the bubble on screen for the last card in a row. */
.val-acts .info::after{left:auto;right:-8px;transform:none}
@media print{.info{display:none}}
.offset-line{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-top:8px;
  padding:7px 10px;border-radius:8px;background:var(--accent-soft);
  color:var(--ink-2);font-size:12px;line-height:1.5}

/* An "i" sitting inside the button it explains, after the label — the pair reads as
   one control. It is a span, not a button, because a button cannot nest one; the
   click is swallowed in JS so tapping the "i" never fires the action behind it. */
.info.in-btn{width:14px;height:14px;margin-left:7px;font-size:9px;
  border-color:currentColor;color:inherit;opacity:.5;background:transparent;
  box-shadow:none;vertical-align:baseline;position:static}
.btn:hover .info.in-btn{opacity:.75}
.info.in-btn:hover{opacity:1}
/* The bubble anchors to the button. Plain selector rather than :has(), which the
   print stylesheet and older engines do not all resolve. */
.val-acts .btn{position:relative;overflow:visible}
.info.in-btn::after{bottom:calc(100% + 10px);left:auto;right:-4px;transform:none}


/* ---- Shared crosshair readout (PX.crosshair) --------------------------- */
.px-xh{display:none}
.px-xh.on{display:block}
.px-xh-line{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.px-xh-dot{stroke:var(--surface);stroke-width:2;pointer-events:none}
.px-xh-hit{fill:transparent;cursor:crosshair}
.px-xh-tip{position:absolute;top:50%;z-index:6;pointer-events:none;
  min-width:180px;padding:10px 12px;border-radius:8px;
  background:var(--tip);color:var(--tip-ink);font-family:var(--body);font-size:12px;
  font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;text-align:left;
  box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.18))}
.px-xh-tip .px-xh-h{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;
  margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.22)}
.px-xh-tip .px-xh-r{display:flex;justify-content:space-between;gap:14px;white-space:nowrap}
.px-xh-tip .px-xh-r b{font-family:var(--num);font-variant-numeric:tabular-nums}
.px-xh-tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;
  vertical-align:0;font-style:normal}
.px-xh-tip .px-xh-n{margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.22);
  font-size:11.5px;opacity:.9}
@media print{.px-xh,.px-xh-tip{display:none}}


/* ---------- 18. FRAMED IN THE PROPFACT APP SHELL ----------------------
   /app/ puts each tool in an iframe and supplies the brand bar and the tab
   strip itself. A tool that keeps its own would show the client two. */
body.embedded .px-head,
body.embedded .px-nav,
body.embedded .px-foot{display:none}
body.embedded{background:transparent}
body.embedded .wrap{padding-top:22px}