/* Aftertax — restyle overlay for the landing page and /tool.
   Reference points: Ramp, Nilus, Stripe payment links — light ground,
   generous whitespace, sentence-case labels (no letterspaced caps), one
   accent doing all the work. Here that accent is #920202.

   Loads after styles.css. Nothing structural changes: same rules, same
   geometry, same components. */

:root{
  --accent:#920202; --accent-deep:#7A0202;
  --accent-wash:rgba(146,2,2,.08);
  --accent-glow:transparent;
  --grad:var(--accent);

  /* Sidebar: the same ground as the page. Ramp, Nilus and Stripe all run the
     nav on the page colour and let a hairline plus type hierarchy do the
     separating — a dark slab against a light app was the thing reading as
     off. Text flips to ink accordingly. */
  --sidebar:#F6F7F9;

  /* Categorical ramp: neutral greys with the accent reserved for one
     series, so charts stay quiet and the red still means something. */
  --cat-cash:oklch(0.82 0.008 60);
  --cat-isa:var(--accent);
  --cat-taxable:oklch(0.66 0.006 250);
  --cat-pension:oklch(0.52 0.006 250);
  --cat-property:oklch(0.74 0.030 60);
  --cat-equity:oklch(0.34 0.006 250);

  --tl-prop:oklch(0.70 0.030 60);
  --tl-family:oklch(0.60 0.006 250);
  --tl-money:var(--accent);
  --tl-work:oklch(0.34 0.006 250);
}

/* ---------- logo ----------
   One quiet lowercase word, no mark — Ramp, Nilus and Stripe all do this.
   Set in Instrument Sans rather than Inter: a little more geometric, single-
   storey 'a', and it holds tight tracking at large sizes without the
   letterforms closing up. Sized up and pulled in hard, which is the whole
   trick in those three wordmarks. */
.wordmark,.sn-brand{
  font-family:'Instrument Sans','Inter',sans-serif;
  text-transform:lowercase;font-weight:600;
  font-size:25px;letter-spacing:-0.055em;line-height:1;}
.wordmark::before,.sn-brand::before,.sidenav .sn-brand::before{display:none;}
@media (max-width:900px){
  .sn-brand{font-size:20px;}
}

/* ---------- sidebar ---------- */
.sidenav{background:var(--sidebar);border-right:1px solid var(--line);}
.sidenav::before{display:none;}
.sidenav .sn-brand{color:var(--ink-87);}
.sidenav .sn-eyebrow,.sn-foot p{color:var(--ink-56);}
.sn-foot{border-top:1px solid var(--line);}
.sn-foot a{color:var(--ink-56);}
.sn-foot a:hover{color:var(--accent);}
.sn-list .tab{color:var(--ink-60);}
.sn-list .tab:hover{background:rgba(11,14,20,.05);color:var(--ink-87);}
.sn-list .tab.active{background:var(--accent);color:#fff;}
.sn-list .tab.active:hover{background:#7A0202;color:#fff;}

@media (max-width:900px){
  .sidenav{box-shadow:0 1px 0 var(--line);border-right:none;border-bottom:1px solid var(--line);}
}

/* ---------- buttons: one accent ---------- */
.btn,.btn-primary,.qa-btn,.add-source,.alloc-add,.at-fix{
  background:var(--accent);border-color:var(--accent);color:#fff;}
.btn:hover,.btn-primary:hover,.qa-btn:hover,
.add-source:hover,.alloc-add:hover,.at-fix:hover{
  background:#7A0202;border-color:#7A0202;color:#fff;}
.btn-ghost,.btn-ghost-sm,.sc-btn{
  background:#fff;border:1px solid var(--line);color:var(--ink-87);}
.btn-ghost:hover,.btn-ghost-sm:hover,.sc-btn:hover{border-color:var(--accent);color:var(--accent);}
.sc-btn.primary,.btn.primary,.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.sc-btn.primary:hover,.btn.primary:hover,.btn-primary:hover{background:#7A0202;border-color:#7A0202;color:#fff;}

/* Selection / current state */
.seg-btn.active,.seg-btn.active:hover,
.tier-seg .seg-btn.active,
.mode-btn.active,.mode-btn.active:hover{background:var(--accent);color:#fff;}
.p-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.tier-seg{background:#ccc;}

/* ---------- washes on the accent ---------- */
.num-input:focus-within,
.signup-form input[type=email]:focus,
.cg-ctl input[type=number]:focus{box-shadow:0 0 0 3px var(--accent-wash);}
.hh-person.on{box-shadow:0 0 0 2px var(--accent-wash);}
.scen-note,.networth-block,.br-detail td,
.bridge-toggle,.drill{background:rgba(146,2,2,.035);}
.bridge-toggle:hover{background:rgba(146,2,2,.07);}
.bridge-table tr:hover td,.br-row:hover{background:rgba(146,2,2,.04);}
.br-row.open{background:rgba(146,2,2,.07);}
.ledger-row .chev,.fact-ico,.stamp,.pot-pc.pos,.at-sum,.fold-v{
  background:rgba(146,2,2,.07);}
.fact b::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);}
.kpi-cta{border-bottom-color:rgba(146,2,2,.40);}
.sc-menu button:hover{background:rgba(146,2,2,.05);}
.lp-badge i{background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);}
::selection{background:rgba(146,2,2,.15);}
.tl-line{background:linear-gradient(90deg,var(--accent) 0%,rgba(146,2,2,.25) 100%);}

/* ---------- type ---------- */
/* Sentence case throughout. The letterspaced mono caps were the loudest
   thing on the page; Ramp/Stripe set the same labels small, grey and plain. */
.fd-group,.you-lab,.hs-lab,.bd-grid2 h5,.hs-band-head span:first-child,
.insight-head span:first-child,.ins-sec-lab,
.ii-head,.app .eyebrow,.app .section-num{
  text-transform:none;letter-spacing:.01em;font-weight:600;}
.app .eyebrow,.app .section-num,
.tab-panel[data-panel="quick"]>.eyebrow{
  font-size:var(--fs-small);color:var(--ink-56);}

.topbar-title,.panel-h,
.tab-panel[data-panel="quick"]>.panel-h,
.app h1,.app h2{font-weight:800;letter-spacing:-0.025em;color:var(--ink-87);}
/* 28px here, 27px further down: on desktop the later rule simply wins and this
   line does nothing. Its only effect was below 900px, where it beat the base
   stylesheet's smaller mobile size — an override nobody wrote on purpose. */
@media (min-width:901px){ .topbar-title{font-size:28px;} }

.kpi-lead b,.nw-total b,.isa-opt b{color:var(--ink-87);}
.hh-person b{color:var(--accent);}
.nw-total{border-top-color:var(--ink-87);}

.appmain a{color:var(--accent);}
.appmain a:hover{color:#7A0202;}
.nav-cta{color:var(--accent);}

/* ---------- icons ----------
   1.5px on a 24 grid, drawn to one detail budget. The header mark is gone
   from the markup entirely, so there is nothing here to hide — the nav
   already names the section, and repeating its glyph beside the title said
   the same thing twice. */
.sn-ico svg{stroke-width:1.5;}
.sn-list .tab.active .sn-ico{color:#fff;}
/* Sized for the 238px rail. Below 900px the tabs stack their icon above a
   short label six-up across the screen, and the base stylesheet sizes them
   for that — so these must not reach it. */
@media (min-width:901px){
  .sn-ico,.sn-ico svg{width:18px;height:18px;}
  .sn-list .tab{gap:11px;}
}

/* The italic 'i' fact marker: upright, in the accent, on a red wash. */
.fact-ico{background:rgba(146,2,2,.07);color:var(--accent);font-style:normal;
  font-weight:600;font-family:var(--mono);font-size:12px;}

/* Sidebar footer links, Stripe-dashboard style: stacked, quiet, at the base
   of the nav rather than buried under the page.

   Desktop only, and the media query is load-bearing. This file loads after
   styles.css, so an unconditional `.sn-foot{display:flex}` here outranks the
   `.sn-foot{display:none}` inside that file's max-width:900px block — same
   specificity, later wins, media query or not. It did, and the result was
   three lines of desktop sidebar chrome stacked above the tab bar on every
   phone screen: about 300px of scrolling before the page began, on a nav the
   base stylesheet had already designed down to an icon bar. The page footer
   carries these same two links, so there is nothing to replace. */
@media (min-width:901px){
  .sn-foot{display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
}
.sn-foot a{font-size:12.5px;text-decoration:none;}
.sn-foot a:hover{text-decoration:underline;}

/* The projection card's title carries a select, so it was being sized as a
   control rather than as part of a card title — 14px/700 inside an 11.5px/600
   heading, which made the picker the loudest thing in a row that is meant to
   be a label. Match the title and let the picker read as the one interactive
   word in it. */
.app .ledger-title.card-title-row{color:var(--ink-60);}
.app .age-pick{font-size:inherit;font-weight:600;color:var(--ink-87);
  padding:3px 7px;border-radius:6px;letter-spacing:inherit;}

/* ---------- the projection ledger ----------
   A rule in styles.css sized every .ledger-row key and value at 17px, which
   flattened the table: sub-lines, subtotals and the net-worth total all shouted
   at once, while the row padding still varied 4px / 9.5px / 14px between them.
   Rebuild it as three deliberate levels — line, subtotal, total — on one
   rhythm, and let the qualifiers ("tax-free", "GIA or other") sit as muted
   notes rather than em-dashed clauses.

   One size throughout, though, which is where this departs from the pack. The
   pack stepped sub-lines and the range down to 11.5 and the total up to 19,
   so a single table carried three sizes — and a table of figures reads as one
   thing or it doesn't. Weight and colour do the levelling instead: 500 muted
   for a sub-line, 600 for a figure, 700 for a subtotal, 800 under the accent
   rule for the one number the card exists to give you. */
.app .ledger-card .ledger-row{padding:10px 0;align-items:baseline;
  border-bottom:1px solid var(--line-soft);}
.app .ledger-card .ledger-row .k{font-size:var(--fs-body);font-weight:500;color:var(--ink-60);
  display:inline-flex;align-items:baseline;gap:8px;}
.app .ledger-card .ledger-row .v{font-size:var(--fs-body);font-weight:600;color:var(--ink-87);
  font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.app .ledger-card .ledger-row .dot{align-self:center;}

/* The qualifier after a pot's name — smaller, quieter, no dash needed. */
.k-note{font-style:normal;font-size:var(--fs-micro);font-weight:500;color:var(--ink-56);}

/* Working lines under a pot: indented under the label, not prefixed with a
   dash, and clearly subordinate. */
.app .ledger-card .ledger-row.sub{padding:6px 0;border-bottom:none;}
.app .ledger-card .ledger-row.sub .k{font-size:var(--fs-body);color:var(--ink-56);
  padding-left:17px;position:relative;}
.app .ledger-card .ledger-row.sub .k::before{content:'';position:absolute;left:4px;top:.15em;
  bottom:.15em;width:1px;background:var(--line);}
.app .ledger-card .ledger-row.sub .v{font-size:var(--fs-body);font-weight:500;color:var(--ink-56);}
.app .ledger-card .ledger-row.sub .v.neg{color:var(--brick);}

/* Subtotal: same size as the lines it sums, but weighted and set off. */
.app .ledger-card .ledger-row.rowsub{padding:10px 0;margin-top:2px;
  border-top:1px solid var(--line-soft);border-bottom:none;}
.app .ledger-card .ledger-row.rowsub .k{font-weight:600;color:var(--ink-87);}
.app .ledger-card .ledger-row.rowsub .v{font-weight:700;}

/* The one figure the card exists to give you. */
.app .ledger-card .ledger-row.total{padding:14px 0 12px;margin-top:8px;
  border-top:1.5px solid var(--accent);border-bottom:none;}
.app .ledger-card .ledger-row.total .k{font-size:var(--fs-body);font-weight:600;color:var(--ink-87);}
.app .ledger-card .ledger-row.total .v{font-size:var(--fs-body);font-weight:800;
  letter-spacing:-0.01em;}

/* The range around it is context, not a result. */
.app .ledger-card .ledger-row.range-row{padding:7px 0;border-bottom:none;}
.app .ledger-card .ledger-row.range-row .k,
.app .ledger-card .ledger-row.range-row .v{font-size:var(--fs-body);font-weight:500;
  color:var(--ink-56);}
.app .ledger-card .ledger-row.range-row .v{font-weight:600;}
.app .ledger-card .ledger-row.range-row + .range-row{padding-top:0;}
.app .ledger-card .ledger-row:last-child{border-bottom:none;}

/* fmt() now writes negatives in brackets — (£1,234) — which is the accounting
   convention and survives a column better than a leading minus. The brick tint
   is therefore a second signal rather than the only one, and is kept for the
   same reason: brackets are easy to miss when skimming a wall of figures. */
.app .ledger-card .ledger-row .v.neg{color:var(--brick);}

/* The cashflow card gets the same treatment, because it sits directly above
   the projection ledger in the same column and the two are read as one thing.
   Its total was still stepping to 17 and its indented lines down to 11.5, so
   the screen carried three sizes even once the ledger carried one. Weight and
   colour again, not size. */
.app .cf-row.cf-leg .cf-k,.app .cf-row.cf-leg .cf-v{font-size:var(--fs-body);
  font-weight:500;color:var(--ink-56);}
.app .cf-row.total .cf-k{font-size:var(--fs-body);font-weight:600;color:var(--ink-87);}
.app .cf-row.total .cf-v{font-size:var(--fs-body);font-weight:800;letter-spacing:-0.01em;}

/* ---------- /about ----------
   The page was two stacked columns — 21 built items against 5 roadmap ones —
   so the boxes could never end level and the whole thing read as one long
   scroll of prose. It becomes a keyed ledger instead: the area on the left,
   short lines on the right, in the same grammar as the landing page's spec
   sheet. Nothing to misalign, and it can be scanned rather than read. */
.ab-hero{padding:56px 0 8px;max-width:760px;}
.ab-hero h1{font-size:clamp(34px,5vw,54px);font-weight:800;letter-spacing:-0.035em;
  line-height:1.08;color:var(--ink-87);margin:18px 0 18px;}
.ab-hero .lp-sub{margin-bottom:0;max-width:640px;}

.ab-sec{margin-bottom:22px;}
.ab-sec h2{margin:0;}
.ab-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;}
.ab-stamp{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:-0.01em;color:var(--accent);background:var(--accent-wash);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 12px;
  white-space:nowrap;}
.ab-stamp-quiet{color:var(--ink-56);background:var(--surface-sunk);}

.ab-ledger{border:1px solid var(--line-soft);border-radius:var(--radius-card);
  background:var(--surface);overflow:hidden;}
.ab-group{display:grid;grid-template-columns:172px 1fr;gap:22px;padding:18px 22px;
  border-bottom:1px solid var(--line-soft);}
.ab-group:last-child{border-bottom:none;}
.ab-gk{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:-0.01em;color:var(--accent-deep);padding-top:2px;}
.ab-gl{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.ab-gl li{font-size:var(--fs-body);line-height:1.5;color:var(--ink-60);
  padding-left:15px;position:relative;text-wrap:pretty;}
.ab-gl li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:1.5px;
  background:var(--accent);opacity:.55;}
.ab-gl b{color:var(--ink-87);font-weight:600;}

/* Roadmap: five short items in a wrapping row, so "not built" reads as a
   handful of things rather than a second essay. */
.ab-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius-card);overflow:hidden;}
.ab-item{background:var(--surface);padding:18px 20px 20px;}
.ab-item b{display:block;font-size:var(--fs-body);font-weight:650;letter-spacing:-0.01em;
  color:var(--ink-87);margin-bottom:5px;}
.ab-item span{display:block;font-size:var(--fs-small);line-height:1.55;color:var(--ink-56);
  text-wrap:pretty;}

@media (max-width:720px){
  .ab-group{grid-template-columns:1fr;gap:10px;}
  .ab-sec-head{flex-direction:column;gap:12px;}
}

/* ---------- utility bar + page head ----------
   Tier and scenario belong to the whole session, not to any one screen, so
   they sit in one thin strip above the content and read as chrome. The page
   head below it is then only ever a title, one line, and a hairline. */
.utilbar{display:flex;align-items:center;gap:10px;padding:10px 0 11px;
  border-bottom:1px solid var(--line-soft);}
.utilbar .ub-spacer{flex:1;}
.utilbar .scenario-bar{background:none;border:none;box-shadow:none;padding:0;margin:0;
  flex:0 0 auto;min-width:0;gap:7px;}
.utilbar .sc-label{display:none;}
.utilbar #scenarioSelect{background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;padding:6px 9px;}
.utilbar .sc-btn{font-size:12.5px;padding:6px 12px;}
.utilbar .sc-btn.sc-icon{padding:6px 10px;font-size:15px;}
.utilbar .sc-status{margin-left:4px;font-size:12px;}
.utilbar .sc-now{font-size:12.5px;padding:6px 10px;}
.tier-seg{order:0;background:var(--surface-sunk);
  box-shadow:none;padding:2px;border-radius:5px;}
/* The base stylesheet sets its own margins on this below 860px. */
@media (min-width:861px){ .tier-seg{margin-left:0;margin-right:0;} }
.tier-seg .seg-btn{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:3px;}
.tier-seg .seg-btn.active{box-shadow:none;}
.utilbar .ub-brand{display:none;}

/* Narrow screens: the strip is one nowrap row, so once the compare button
   joins it the scenario controls run past the edge and Save and ⋯ become
   unreachable — clipped rather than scrollable, so there is no way back to
   them. Wrap instead, tier on one line and the plan controls on the next. */
@media (max-width:720px){
  .utilbar{flex-wrap:wrap;row-gap:8px;}
  .utilbar .ub-spacer{display:none;}
  .utilbar .scenario-bar{flex:1 1 100%;flex-wrap:wrap;}
}

.topbar{display:block;margin-bottom:0;
  border-bottom:1px solid var(--line-soft);}
.topbar-title{letter-spacing:-0.025em;}
/* The pack's head is generous — 24px above a 27px title. The base stylesheet
   pulls both back below 900px, where that much air is most of a phone screen
   before any content, so this stays on the wide side of the same line. */
@media (min-width:901px){
  .topbar{padding:24px 0 18px;}
  .topbar-title{font-size:27px;}
}
.topbar-sub{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-56);
  max-width:58ch;text-wrap:pretty;}
.topbar-sub:empty{display:none;}
/* The head now carries this screen's title and line, so the panel no longer
   repeats them word for word. The first divider on each panel keeps its
   eyebrow and heading — those mark a section — but drops its sub. */
.tab-panel[data-panel="about"]>.section-divider{display:none;}
.tab-panel .section-divider.is-head>.sub{display:none;}
.tab-panel[data-panel="quick"]>.eyebrow,
.tab-panel[data-panel="quick"]>.panel-h{display:none;}
/* Quick's sub is a bare child rather than part of a divider, so it needs its
   own hook once the head above has taken the sentence. */
.tab-panel>.sub.is-head-sub{display:none;}

/* ---------- Quick Estimate: no rail ----------
   One screen, nothing to navigate. Rather than hiding the nav list and
   leaving an empty column, the rail goes and the column centres. */
body.tier-quick .sidenav{display:none;}
body.tier-quick .appmain{max-width:820px;margin:0 auto;}
body.tier-quick .utilbar{border-bottom:none;}
body.tier-quick .utilbar .ub-brand{display:block;font-family:'Instrument Sans',var(--sans);
  font-weight:600;font-size:25px;letter-spacing:-0.055em;text-transform:lowercase;
  color:var(--ink-87);text-decoration:none;margin-right:4px;}
body.tier-quick .utilbar .ub-brand:hover{color:var(--ink-87);}

/* ---------- insights ----------
   The inline slots lose their rail too, for the same reason the rows did. */
.ii-row{border-left:none;border-radius:var(--radius-input);
  padding:10px var(--space-3) 10px 0;}
.ii-row[data-lead]{border-left:none;}
.ii-row[data-lead] .ii-fig{color:var(--accent);}
.ii-row:hover{background:var(--surface-sunk);padding-left:var(--space-3);}

/* ---------- carried forward, not in the pack -------------------------------
   --green-ok is #0D9488, and the design does not touch it. Left alone it puts
   teal on every positive figure — 84 of them on /tool — against a page whose
   one accent is now oxblood, which is the same "84 teal cells" finding that
   started this exercise, in a new colour. Every negative already carries a
   minus sign and rose still marks the ones that matter, so positives stay ink.
   Scoped to the overlay, so reverting is one deletion. */
.app .pos,.app .v.pos,.app .bd-line.pos b,.app .cf-v.pos,
.app .ledger-row .v.pos,.app .bridge-table td.pos{color:var(--ink-87);}