/* ============================================================
   CAPITAL ALLOCATION — MODULE PAGES (Stages 8–9)
   Shared components for Overview, Budget, Portfolio, and future modules.
   Requires tokens.css + components.css + shell.css.
   ============================================================ */

/* ---------- demo banner + notes ---------- */
.modBanner{display:flex;gap:12px;align-items:flex-start;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.35);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.modBanner b{color:var(--ca-text-1)}
.modBanner p{margin:0;font-size:13px;color:var(--ca-text-2);line-height:1.65}
.modBanner .ca-badge{flex:none}
.fineNote{font-size:11px;color:var(--ca-text-3);line-height:1.6;margin-top:8px}
.emptyNote{font-size:12.5px;color:var(--ca-text-3);line-height:1.7;padding:14px 4px}
.emptyNote a{color:var(--ca-lavender)}

/* ---------- KPI row ---------- */
/* Stage 106 — research: Details reads as one card of hairline cells */
.kpiGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:12px;background:var(--ca-card);border:var(--ca-line);border-radius:12px;overflow:hidden}
.kpiGrid > .kpi{background:transparent;border:0;border-radius:0;box-shadow:none;padding:11px 14px;border-right:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055)}
.kpiGrid > .kpi:nth-child(3n){border-right:0}
.kpiGrid > .kpi:nth-last-child(-n+3){border-bottom:0}
.kpi{background:var(--ca-card);border:var(--ca-line);border-radius:12px;padding:13px 16px;min-width:0;box-shadow:var(--ca-elev-1)}
.kpi__l{font-family:var(--ca-font-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ca-text-3);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi__v{font-family:var(--ca-font-display);font-weight:700;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi__s{display:block;font-size:10.5px;color:var(--ca-text-3);margin-top:3px;min-height:2.6em}
.vPos{color:var(--ca-success)}
.vNeg{color:var(--ca-danger)}

/* ---------- card grid + cards ---------- */
.cardGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:919.98px){.cardGrid{grid-template-columns:1fr}}
.modCard{background:var(--ca-card);border:var(--ca-line);border-radius:12px;padding:10px 12px;min-width:0;box-shadow:var(--ca-elev-1)}
.modCard--wide{grid-column:1/-1}
.modCard__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px}
.modCard__head h2{font:600 10.5px var(--ca-font-data);letter-spacing:.18em;text-transform:uppercase;color:var(--ca-text-3);margin:0}
.modCard__sub{font-size:11px;color:var(--ca-text-3)}
.chartBox{background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:10px}
.chartBox svg{display:block;width:100%;height:auto}
.chartLegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-family:var(--ca-font-data);font-size:10.5px;color:var(--ca-text-2)}
.chartLegend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.endRow{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.endRow .end{min-width:120px}
.endRow .end b{display:block;font-family:var(--ca-font-display);font-size:16px;font-variant-numeric:tabular-nums}
.endRow .end span{font-size:10px;color:var(--ca-text-3);font-family:var(--ca-font-data);letter-spacing:.08em;text-transform:uppercase}

/* ---------- quick controls ---------- */
.qcRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 2px}
@media(max-width:899.98px){.qcRow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:559.98px){.qcRow{grid-template-columns:minmax(0,1fr)}}
.qc{background:var(--ca-deep);border:var(--ca-line);border-radius:10px;padding:9px 11px}
.qc label{display:block;font-family:var(--ca-font-data);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-text-3);margin-bottom:5px}
.qc input{width:100%;background:transparent;border:none;color:var(--ca-text-1);font:inherit;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;padding:0}
.qc input:focus{outline:none}
.qc:focus-within{border-color:var(--ca-lavender)}

/* ---------- donut + list ---------- */
.donutWrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donutWrap svg{flex:none}
.donutLegend{display:flex;flex-direction:column;gap:7px;min-width:180px;flex:1}
.donutLegend .row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ca-text-2)}
.donutLegend .row i{flex:none;width:9px;height:9px;border-radius:3px}
.donutLegend .row b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ca-text-1)}
.donutLegend .row span{color:var(--ca-text-3);font-size:11px;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- stat rows / mini tables ---------- */
.statList{display:flex;flex-direction:column;gap:0}
.statList .sr{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--ca-border-subtle)}
.statList .sr:last-child{border-bottom:none}
.statList .sr span{font-size:12.5px;color:var(--ca-text-2)}
.statList .sr b{font-variant-numeric:tabular-nums;font-size:14px}
.tblWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--ca-line);border-radius:12px;background:var(--ca-deep)}
.modTbl{width:100%;border-collapse:collapse;font-size:12px;min-width:460px}
.modTbl th{font-family:var(--ca-font-data);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-text-3);text-align:right;padding:10px 12px;border-bottom:1px solid var(--ca-border)}
.modTbl th:first-child,.modTbl td:first-child{text-align:left}
.modTbl td{padding:9px 12px;border-bottom:1px solid var(--ca-border-subtle);text-align:right;font-variant-numeric:tabular-nums;color:var(--ca-text-2)}
.modTbl tr:last-child td{border-bottom:none}
.modTbl td:first-child{color:var(--ca-text-1)}

/* ---------- goals ---------- */
.goalRow{padding:11px 0;border-bottom:1px solid var(--ca-border-subtle)}
.goalRow:last-child{border-bottom:none}
.goalRow__top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:7px;flex-wrap:wrap}
.goalRow__top b{font-size:13.5px}
.goalRow__meta{font-size:11px;color:var(--ca-text-3);font-variant-numeric:tabular-nums}
.goalBar{height:7px;border-radius:99px;background:var(--ca-input);overflow:hidden}
.goalBar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ca-lavender),var(--ca-violet))}
.tag{display:inline-block;font-family:var(--ca-font-data);font-size:9px;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid var(--ca-border);color:var(--ca-text-3)}
/* s119: was var(--ca-success) = the positive-green on a STATUS pill ("targets add to 100%"),
   which is not a dollar value. The debt schedule had already been recoloured to accent in
   isolation; this makes that the global rule instead of a one-off. */
.tag--ok{color:var(--ca-accent);border-color:rgba(99,91,255,.42);background:rgba(99,91,255,.07)}
.tag--ahead{color:var(--ca-teal);border-color:rgba(100,227,210,.4)}
.tag--behind{color:var(--ca-danger);border-color:rgba(240,82,77,.45)}
.tag--need{color:#F59E0B;border-color:rgba(245,158,11,.4)}

/* ---------- insights ---------- */
.insGrid{display:grid;gap:8px}
@media(min-width:760px){.insGrid{grid-template-columns:1fr 1fr}}
.insCard{display:flex;gap:9px;align-items:flex-start;background:var(--ca-card-elev);border:var(--ca-line);border-left:2px solid var(--ca-lavender);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--ca-text-2);line-height:1.65}
.insCard b{color:var(--ca-text-1)}
.insCard svg{width:13px;height:13px;flex:none;margin-top:2px;stroke:var(--ca-lavender);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.tabBar{display:inline-flex;gap:2px;flex-wrap:wrap;margin-bottom:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05);border-radius:999px;padding:3px}
.tabBtn{flex:0 0 auto;min-width:0;min-height:28px;padding:0 13px;border:none;border-radius:999px;background:transparent;color:var(--ca-text-3);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}
.tabBtn:hover{color:var(--ca-text-1)}
.tabBtn[aria-selected="true"]{background:var(--ca-card-elev);color:var(--ca-text-1);box-shadow:var(--ca-elev-1)}
.tabBtn:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
/* s135: .tabPane had no display and no gap, and .modCard carries no margin \u2014 so sibling cards
   inside every tab pane sat flush against each other. Four cards were hand-spaced with inline
   margin-top:14px to compensate, which fixed those four and left the rest touching. One container
   gap at the canon 8px fixes every tab at once; the inline margins are removed so nothing doubles.
   [hidden] must keep winning over display:flex, hence the order and the explicit re-declaration. */
.tabPane{display:flex;flex-direction:column;gap:8px}
.tabPane[hidden]{display:none}

.pForm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1099.98px){.pForm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599.98px){.pForm{grid-template-columns:minmax(0,1fr)}}
.pField{background:var(--ca-deep);border:var(--ca-line);border-radius:10px;padding:7px 10px}
.pField label{display:block;font-family:var(--ca-font-data);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ca-text-3);margin-bottom:5px}
.pField input,.pField select{width:100%;background:transparent;border:none;color:var(--ca-text-1);font:inherit;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;padding:0}
.pField input:focus,.pField select:focus{outline:none}
.pField:focus-within{border-color:var(--ca-lavender)}
.pField select option{background:var(--ca-card)}
details.pAdv{margin-top:12px;border:var(--ca-line);border-radius:12px;background:var(--ca-card)}
details.pAdv summary{cursor:pointer;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--ca-text-2);list-style:none;display:flex;align-items:center;gap:8px;min-height:44px}
details.pAdv summary::before{content:"";width:7px;height:7px;border-right:1.6px solid var(--ca-text-3);border-bottom:1.6px solid var(--ca-text-3);transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
details.pAdv[open] summary::before{transform:rotate(45deg)}
details.pAdv .pForm{padding:4px 14px 14px}

.fireHero{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.fireHero__num{min-width:220px}
.fireHero__num .l{font-family:var(--ca-font-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ca-text-3);margin-bottom:6px}
.fireHero__num .v{font-family:var(--ca-font-display);font-weight:700;font-size:clamp(30px,5.4vw,44px);letter-spacing:-.015em;font-variant-numeric:tabular-nums;background:linear-gradient(92deg,var(--ca-lavender),var(--ca-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.fireHero__num .s{font-size:12px;color:var(--ca-text-3);margin-top:6px}
.ringWrap{position:relative;width:118px;height:118px;flex:none}
.ringWrap svg{display:block}
.ringWrap .ringTxt{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ca-font-display);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}

.presetGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.presetCard{background:var(--ca-deep);border:1px solid var(--ca-border);border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;color:var(--ca-text-2);font:inherit;transition:border-color .15s}
.presetCard:hover{border-color:var(--ca-lavender)}
.presetCard b{display:block;color:var(--ca-text-1);font-size:13px;margin-bottom:4px}
.presetCard span{font-size:11px;color:var(--ca-text-3);font-variant-numeric:tabular-nums}
.presetCard.on{border-color:var(--ca-lavender);box-shadow:0 0 0 1px var(--ca-lavender) inset}
.presetCard:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}

.msLine{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.msLine::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--ca-border)}
.msLine li{position:relative;padding:9px 0}
.msLine li::before{content:"";position:absolute;left:-17px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--ca-copper);box-shadow:0 0 0 3px rgba(199,104,58,.16)}
/* s120: #pfByAccount is a colour LEGEND, not a milestone timeline. .msLine's connector rail and
   copper node were rendering a second, meaningless dot beside each series swatch. */
#pfByAccount{padding-left:0}
#pfByAccount::before{display:none}
#pfByAccount li::before{display:none}
#pfByAccount li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.055)}
#pfByAccount li:first-child{border-top:0}
.msLine li b{font-variant-numeric:tabular-nums}
.msLine li span{color:var(--ca-text-3);font-size:12px}
.msLine li.msDim::before{background:var(--ca-text-3);box-shadow:none}

/* ---------- explanations ---------- */
.explain{display:grid;gap:10px;margin-top:12px}
@media(min-width:760px){.explain{grid-template-columns:1fr 1fr}}
.explain .ex{background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:13px 15px}
.explain .ex b{display:block;font-size:12.5px;margin-bottom:5px}
.explain .ex p{margin:0;font-size:12px;color:var(--ca-text-3);line-height:1.7}

/* ---------- Stage 12: goals + scenarios ---------- */
details.gCard,details.scnCard{border:var(--ca-line);border-radius:14px;background:var(--ca-card);margin-bottom:10px;box-shadow:var(--ca-elev-1)}
details.gCard summary,details.scnCard summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;min-height:48px}
details.gCard summary::-webkit-details-marker,details.scnCard summary::-webkit-details-marker{display:none}
details.gCard summary::after,details.scnCard summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--ca-text-3);border-bottom:1.6px solid var(--ca-text-3);transform:rotate(45deg);margin-left:auto;transition:transform .15s;flex:none}
details.gCard[open] summary::after,details.scnCard[open] summary::after{transform:rotate(-135deg)}
.gCard summary b,.scnCard summary b{font-size:14px}
.gCard__mini{flex:1 1 140px;min-width:120px;max-width:220px}
.gCard__body,.scnCard__body{padding:2px 15px 15px}
.gDel,.scnDel{margin-top:12px}
.chip{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--ca-font-data);font-size:10px;letter-spacing:.04em;color:var(--ca-text-3);background:var(--ca-deep);border:var(--ca-line);border-radius:999px;padding:4px 10px;font-variant-numeric:tabular-nums}
.chip b{color:var(--ca-text-1);font-size:11px}
.tplRow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
/* s119: "best" is a status, not a sign — this cell would have been green even on a negative figure. */
.cmpTbl td.best{color:var(--ca-accent);font-weight:700}
.cmpTbl td:first-child{white-space:nowrap}
.bbwRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.bbw{background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:12px 14px}
.bbw .l{font-family:var(--ca-font-data);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ca-text-3);margin-bottom:5px}
.bbw b{font-family:var(--ca-font-display);font-size:16px;font-variant-numeric:tabular-nums;display:block}
.bbw span{font-size:11px;color:var(--ca-text-3)}
.detLine{display:flex;gap:9px;align-items:flex-start;background:var(--ca-card-elev);border:var(--ca-line);border-left:2px solid var(--ca-teal);border-radius:10px;padding:10px 13px;font-size:12px;color:var(--ca-text-2);line-height:1.65;margin-bottom:14px}
.pField textarea{width:100%;background:transparent;border:none;color:var(--ca-text-1);font:inherit;font-size:13px;padding:0;resize:vertical;min-height:38px}
.pField textarea:focus{outline:none}

/* ---------- Stage 13: report ---------- */
.rptBar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.rptMeta{font-family:var(--ca-font-data);font-size:11px;color:var(--ca-text-3);letter-spacing:.03em}
.rptCard{display:block}
.rptCard__head{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:6px}
.rptCard p{margin:0 0 8px;font-size:13px;line-height:1.65;color:var(--ca-text-2)}
.rptAct{color:var(--ca-text-1)!important;background:var(--ca-deep);border:var(--ca-line);border-radius:9px;padding:9px 12px}
.rptSrc{font-family:var(--ca-font-data);font-size:10px;letter-spacing:.02em;color:var(--ca-text-3);border-top:1px dashed var(--ca-border);padding-top:7px;line-height:1.6}
.rptTwo{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
@media(max-width:860px){.rptTwo{grid-template-columns:1fr}}
@media print{
  .ca-sidebar,.ca-topbar,.ca-menu-btn,.rptBar button,.modBanner,.ca-status,.ca-skip{display:none!important}
  body,.ca-app,.ca-main,.modCard,.kpi,.insCard{background:#fff!important;color:#111!important;box-shadow:none!important}
  .ca-main{margin-left:0!important;padding:0!important}
  .modCard,.kpi,.insCard{border:1px solid #bbb!important;break-inside:avoid}
  h1,h2,h3,b,.kpi b,.rptAct{color:#111!important}
  .kpi .l,.kpi span,.modCard__sub,.fineNote,.rptSrc,.rptMeta,.rptCard p,.ca-page-sub,.ca-eyebrow{color:#333!important}
  .rptAct{background:#f3f3f3!important;border:1px solid #ccc!important}
  .ca-mobilebar,.ca-drawer,.ca-scrim,.ghostCta,.linkRow,.ca-btn{display:none!important}
  .kdef{color:#555!important}
  .kpiHero{border:1px solid #bbb!important;background:#fff!important;break-inside:avoid}
  .kpiHero__v,.kpiHero__l{color:#111!important}
  .ca-st{border:1px solid #999!important;color:#111!important;background:#fff!important}
  .tag{border:1px solid #888!important;color:#111!important;background:#fff!important}
  svg text{fill:#111!important}
  a{color:#111!important;text-decoration:none!important}
}

/* ---------- Stage 11: editors + bars ---------- */
.edHead{display:none;font-family:var(--ca-font-data);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ca-text-3);padding:0 2px 6px}
.edRow{display:grid;gap:8px;align-items:center;padding:8px;border:var(--ca-line);border-radius:11px;background:var(--ca-deep);margin-bottom:8px}
.edRow input,.edRow select{width:100%;background:var(--ca-card);border:var(--ca-line);border-radius:8px;color:var(--ca-text-1);font:inherit;font-size:13px;padding:8px 10px;min-height:31px}
.edRow input:focus,.edRow select:focus{outline:none;border-color:var(--ca-lavender)}
.edCalc{font-family:var(--ca-font-data);font-size:11px;color:var(--ca-text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.edRow--inc{grid-template-columns:1.2fr .7fr .8fr .9fr .6fr 1fr .8fr auto}
.edRow--exp{grid-template-columns:1.1fr .6fr .75fr .8fr .75fr .8fr .8fr 1fr .7fr auto}
.edRow--debt{grid-template-columns:1.1fr .8fr .6fr .7fr .9fr .5fr 1fr auto}
@media(min-width:861px){.edHead{display:grid;gap:8px}}
@media(max-width:860px){.edRow:not(.edRow--tgt){grid-template-columns:1fr 1fr}.edRow input[data-f="name"],.edRow input[aria-label="Income name"],.edRow input[aria-label="Expense name"],.edRow input[aria-label="Debt name"]{grid-column:1/-1}}
.barRow{display:grid;grid-template-columns:170px 1fr auto;gap:10px;align-items:center;margin-bottom:9px}
.barRow__l{font-size:12px;color:var(--ca-text-2)}
.barRow__t{height:12px;border-radius:999px;background:var(--ca-deep);border:var(--ca-line);overflow:hidden}
.barRow__t i{display:block;height:100%;border-radius:999px;transition:width .2s}
.barRow b{font-family:var(--ca-font-data);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:600px){.barRow{grid-template-columns:1fr auto}.barRow__t{grid-column:1/-1;order:3}}
.ctrlRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}

/* ---------- Stage 10: portfolio ---------- */
/* s119 targets row. Was: a 130px input in its own column with a separate "% target" span beside
   it, each row a bordered card. Three problems — the unit read as detached from the field it
   labelled, the native number spinner crowded a narrow field and cannot be spaced apart (it is
   browser UI), and one bordered card per target is the many-cards pattern the build sheet argues
   against. Now: hairline-separated rows in the one card, unit INSIDE the field, spinner retired
   (arrow keys still step the value). */
.edRow--tgt{grid-template-columns:1fr 118px;gap:14px;align-items:center;padding:0 2px;margin:0;min-height:46px;border:0;border-radius:0;background:transparent}
.edRow--tgt + .edRow--tgt{border-top:1px solid rgba(255,255,255,.055)}
.tgtField{position:relative;display:block}
.edRow--tgt input{width:100%;text-align:right;padding:8px 30px 8px 10px;font-variant-numeric:tabular-nums}
.tgtUnit{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-family:var(--ca-font-data);font-size:11px;color:var(--ca-text-3);pointer-events:none}
.edRow--tgt input::-webkit-outer-spin-button,.edRow--tgt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.edRow--tgt input[type=number]{-moz-appearance:textfield;appearance:textfield}
.edName{font-size:13px;color:var(--ca-text-1)}
.aBar{margin-bottom:13px}
.aBar__head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ca-text-2);margin-bottom:5px}
.aBar__head b{font-family:var(--ca-font-data);font-size:11px;font-variant-numeric:tabular-nums;color:var(--ca-text-3)}
.aBar__t{position:relative;height:13px;border-radius:999px;background:var(--ca-deep);border:var(--ca-line);overflow:visible}
.aBar__t i{display:block;height:100%;border-radius:999px}
.aBar__t u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ca-text-1);border-radius:2px;transform:translateX(-1px)}
/* s120: the 5/25 rebalance band sits UNDER the fill so the actual bar reads on top of it. Neutral
   white-alpha, not a hue \u2014 it is a tolerance region, not a category. */
.aBar__t s{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.09);border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);text-decoration:none;pointer-events:none}
.aBar__head b{display:inline-flex;align-items:center;gap:10px}
.aBar__flag{font-family:var(--ca-font-data);font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--ca-text-3)}
.aBar--out .aBar__flag{color:var(--ca-accent);border-color:rgba(99,91,255,.45);background:rgba(99,91,255,.08)}
.allocNote{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.055)}
.aLegend{display:inline-flex;align-items:center;gap:7px;font-family:var(--ca-font-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ca-text-3)}
.aLegend s{display:inline-block;width:16px;height:10px;background:rgba(255,255,255,.09);border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);text-decoration:none}
.aLegend u{display:inline-block;width:2px;height:12px;background:var(--ca-text-1);border-radius:2px}
.aSum{margin-left:auto;font-family:var(--ca-font-data);font-size:11px;color:var(--ca-text-2)}
@media(max-width:600px){.allocNote{gap:12px}.aSum{margin-left:0;width:100%}}
.calGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:600px){.calGrid{grid-template-columns:repeat(4,1fr)}}
.calCell{background:var(--ca-deep);border:var(--ca-line);border-radius:10px;padding:9px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:96px;justify-content:flex-end}
.calCell span{font-family:var(--ca-font-data);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-text-3);order:3}
.calCell i{width:16px;background:var(--ca-teal);border-radius:4px 4px 2px 2px;order:2}
.calCell b{font-family:var(--ca-font-data);font-size:10px;font-variant-numeric:tabular-nums;order:1}
.hDrawerWrap{position:fixed;inset:0;z-index:var(--ca-z-helpdrawer);pointer-events:none;overflow-x:clip  /* s154: the parked panel extended documentElement.scrollWidth by 10px \u2014 caught by the layout battery on the portfolio page */}
.hDrawerWrap .hScrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .18s}
.hDrawerWrap .hPanel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--ca-card);border-left:var(--ca-line);box-shadow:-18px 0 40px rgba(0,0,0,.45);transform:translateX(102%);transition:transform .2s;display:flex;flex-direction:column;max-width:100%}
.hDrawerWrap.is-open{pointer-events:auto}
.hDrawerWrap.is-open .hScrim{opacity:1}
.hDrawerWrap.is-open .hPanel{transform:none}
.hPanel__head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:var(--ca-line)}
.hPanel__body{padding:15px 17px;overflow:auto;flex:1}
.hPanel__foot{padding:13px 17px;border-top:var(--ca-line);display:flex;gap:10px;justify-content:space-between}
@media(prefers-reduced-motion:reduce){.hDrawerWrap .hPanel,.hDrawerWrap .hScrim{transition:none}}

/* Stage 21 · setup checklist + goal type chips */
/* s129: two orphaned @media prefixes were welded onto this rule when the s125 setup-card CSS
   was removed with end-of-line regexes that matched from the SELECTOR, leaving the wrapper behind.
   Everything below this point was swallowed into unterminated blocks and stopped applying. */
.typeChips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.typeChips button{background:var(--ca-deep);border:var(--ca-line);border-radius:999px;color:var(--ca-text-2);font:inherit;font-size:12.5px;padding:7px 13px;cursor:pointer}
.typeChips button:hover{border-color:var(--ca-lavender);color:var(--ca-text-1)}
.rptMissing{border:1px dashed var(--ca-border);border-radius:12px;padding:12px 14px;margin:0 0 14px}
.rptMissing b{font-size:13px}
.rptMissing ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.rptMissing li{font-size:13px;color:var(--ca-text-2)}
.rptMissing a{color:var(--ca-lavender);text-decoration:none}

/* Stage 22 · insight severity */
.insCard{align-items:flex-start}
.insCard .insDot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 8px;background:var(--ca-text-3)}
/* s125: severity dot on a Portfolio note — a status, not a dollar value. */
.ins--positive .insDot{background:var(--ca-accent)}
.ins--watch .insDot{background:var(--ca-blue)}
.ins--warning .insDot{background:var(--ca-amber)}
.ins--critical .insDot{background:var(--ca-pink)}
.insSum{color:var(--ca-text-2)}
.insSrc{display:block;margin-top:5px;font-family:var(--ca-font-data);font-size:10px;letter-spacing:.04em;color:var(--ca-text-3)}
.insAct{color:var(--ca-lavender);text-decoration:none;font-size:12.5px;white-space:nowrap}
.insAct:hover{text-decoration:underline}
.rptCat{margin:0 0 14px}
.rptCat h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ca-text-3);margin:0 0 8px;font-family:var(--ca-font-data)}
.rptCat .insCard{margin-bottom:8px}

@media (max-width:760px){.edRow--inc,.edRow--exp{grid-template-columns:1fr 1fr}.edRow--inc .edCalc,.edRow--exp .edCalc{grid-column:1/-1}}
.efBadge{display:inline-block;padding:4px 12px;border-radius:999px;font-family:var(--ca-font-data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.efBadge--critical{background:rgba(240,82,77,.14);color:var(--ca-pink)}
.efBadge--building{background:rgba(245,158,11,.14);color:var(--ca-amber)}
.efBadge--stable{background:rgba(47,128,237,.14);color:#7FB0FF}
/* s119: status badge, not a dollar value. */
.efBadge--strong{background:rgba(99,91,255,.14);color:var(--ca-accent)}

@media (max-width:760px){.edRow--debt{grid-template-columns:1fr 1fr}}

.kpiHero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:14px;align-items:start;border:var(--ca-line);border-radius:var(--ca-r-md);padding:14px 16px;margin-bottom:14px;background:linear-gradient(180deg,rgba(99,91,255,.06),rgba(99,91,255,0))}
.kpiHero__l{display:block;font-family:var(--ca-font-data);font-size:var(--ca-fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--ca-text-3)}
.kpiHero__v{display:block;font-family:var(--ca-font-data);font-size:30px;line-height:1.15;color:var(--ca-text-1);margin:4px 0 2px}
.kpiHero__s{display:block;font-size:var(--ca-fs-sm);color:var(--ca-text-2)}
.kpiHero__side{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.kpiHero__ctx{font-size:var(--ca-fs-xs);color:var(--ca-text-3);line-height:var(--ca-lh-loose)}
.defTag{font-family:var(--ca-font-data);font-size:10px;color:var(--ca-text-3);border:1px solid var(--ca-border-subtle);border-radius:5px;padding:1px 5px;vertical-align:middle}
@media (max-width:768px){.kpiHero{grid-template-columns:minmax(0,1fr)}}

/* -- Stage 41: weight chip -- */
.wtTag{font-family:var(--ca-font-data);font-size:11px;color:var(--ca-text-2);background:rgba(255,255,255,.06);border:1px solid var(--ca-border-subtle);border-radius:999px;padding:2px 8px}

/* -- Stage 42: duo hero + linkage row -- */
.kpiHero--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,260px)}
@media (max-width:900px){.kpiHero--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kpiHero--duo .kpiHero__side{grid-column:1/-1}}
@media (max-width:560px){.kpiHero--duo{grid-template-columns:minmax(0,1fr)}}
.linkLead{color:var(--ca-text-2);font-size:var(--ca-fs-sm);line-height:var(--ca-lh-loose);margin:0 0 10px}
.linkRow{display:flex;gap:10px;flex-wrap:wrap}
.linkRow .ca-btn{min-height:44px}

/* -- Stage 43: strategy difference line -- */
.stratDiff{grid-column:1/-1;font-size:var(--ca-fs-sm);color:var(--ca-text-2);line-height:var(--ca-lh-loose);border-top:var(--ca-line);padding-top:10px;margin-top:4px}

/* -- Stage 44: goal card hero + milestone ticks -- */
.glHero{display:flex;gap:16px;align-items:center;margin:2px 0 12px}
.glHero__ring svg{display:block}
.glHero__tx{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.glHero__pct{font-family:var(--ca-font-data);font-size:26px;line-height:1.1;color:var(--ca-text-1)}
.glHero__of{font-size:var(--ca-fs-xs);color:var(--ca-text-3)}
.goalBar{position:relative}
.goalBar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(25% - 1px),rgba(255,255,255,.14) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),rgba(255,255,255,.14) 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),rgba(255,255,255,.14) 75%,transparent calc(75% + 1px));pointer-events:none}
@media (max-width:480px){.glHero{gap:12px}.glHero__pct{font-size:22px}}

/* -- Stage 45: scenario deltas -- */
.chip--pos{color:var(--ca-pos);border-color:rgba(47,209,107,.35)}
.chip--neg{color:var(--ca-neg);border-color:rgba(240,82,77,.35)}
/* s119: decorative card chrome. */
.scnCard--pos{border-left:3px solid rgba(99,91,255,.55)}
.scnCard--neg{border-left:3px solid rgba(240,82,77,.55)}
#scnHero{margin-bottom:14px}

/* -- Stage 46: report spec cards + print -- */
.kdef{display:block;font-size:var(--ca-fs-xs);color:var(--ca-text-3);line-height:var(--ca-lh-loose);margin:2px 0 6px}

@media(max-width:640px){#plOut .statList{grid-template-columns:1fr}}
#tabRetire .presetGrid{display:flex;gap:0;border:var(--ca-line-strong);border-radius:12px;overflow:hidden;background:var(--ca-deep)}
#tabRetire .presetCard{flex:1 1 0;border:0;border-right:1px solid rgba(255,255,255,.07);border-radius:0;background:transparent;padding:11px 13px;transition:background .2s ease}
#tabRetire .presetCard:last-of-type{border-right:0}
#tabRetire .presetCard:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
#tabRetire .presetCard.is-on{background:rgba(255,255,255,.055);box-shadow:0 0 0 1px var(--ca-lavender) inset}
#tabRetire .presetCard.is-on b{color:var(--ca-lavender)}
#tabRetire #preCustom{flex:0 0 auto;border-right:0;border-left:1px solid rgba(255,255,255,.07);opacity:.85}
@media(max-width:640px){#tabRetire .presetGrid{flex-wrap:wrap}#tabRetire .presetCard{flex:1 1 46%;border-bottom:1px solid rgba(255,255,255,.07)}}
.detBadge{display:inline-block;background:var(--ca-deep);border:var(--ca-line);border-radius:999px;padding:8px 14px;margin-top:12px}
#tabRetire .chartBox{background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:12px 12px 4px;position:relative}
#tabRetire .chartBox .fxline{stroke-dasharray:1400;stroke-dashoffset:1400}
#tabRetire .chartBox.is-in .fxline{animation:plDraw 900ms ease forwards}
@keyframes plDraw{to{stroke-dashoffset:0}}
#tabRetire .pField input,#tabRetire .pField select{min-height:32px;transition:border-color .18s ease}
#tabRetire .pField input:focus-visible,#tabRetire .pField select:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
@media(prefers-reduced-motion:reduce){#tabRetire .chartBox .fxline{stroke-dasharray:none;stroke-dashoffset:0}#tabRetire .chartBox.is-in .fxline{animation:none}#tabRetire .presetCard,#plOut .sr,#tabRetire .pField input,#tabRetire .pField select{transition:none}}

/* -- Stage 52: portfolio premium visual pass (zero logic) -- */
#pfRoot .tabBtn{position:relative}
#pfRoot .tabBtn::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:2px;background:transparent;transition:background .2s ease}
#pfRoot .tabBtn[aria-selected="true"]::after{background:var(--ca-lavender)}
#pfRoot .kpiHero__v{font-family:var(--ca-font-display);font-size:clamp(28px,4vw,40px);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.mvChip{display:inline-block;align-self:flex-start;font-family:var(--ca-font-data);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-text-3);border:var(--ca-line);border-radius:999px;padding:5px 10px;margin-bottom:6px}
#pfKpis .kpi{min-height:96px;display:flex;flex-direction:column;justify-content:center;transition:border-color .2s ease}
#pfKpis .kpi:hover{border-color:rgba(255,255,255,.17)}
#pfKpis .kpi b{font-variant-numeric:tabular-nums}
#pfPaneHold .tblWrap{max-height:560px;overflow:auto;border:var(--ca-line);border-radius:12px}
#pfPaneHold .modTbl th{position:sticky;top:0;background:var(--ca-card);z-index:2}
@media(min-width:769px){#pfPaneHold .modTbl tbody tr{transition:background .15s ease}#pfPaneHold .modTbl tbody tr:hover td{background:rgba(255,255,255,.025)}#pfPaneHold .modTbl td{text-align:right;font-variant-numeric:tabular-nums}#pfPaneHold .modTbl td:first-child,#pfPaneHold .modTbl th:first-child{text-align:left}}
#pfRoot .wtTag{border:1px solid rgba(255,255,255,.14);background:var(--ca-deep)}
#pfPaneOver .donutWrap{opacity:0;transform:scale(.96);transition:opacity .45s ease,transform .45s ease}
#pfPaneOver .donutWrap.is-in{opacity:1;transform:scale(1)}
#pfDonutLegend span{border:var(--ca-line);border-radius:999px;padding:6px 11px;background:var(--ca-deep)}
/* s115 dividends: the two cards sit side by side, ~50% each. The calendar renders ONE row of six
   months and pages through the year — twelve auto-fit cells previously wrapped and stranded DEC
   alone on a second row. #divKpis runs 2-up here because four tiles in a 3-column grid orphan the
   fourth, which is what left the large empty area beside "In 10 years". */
.divTwo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
#divKpis{grid-template-columns:repeat(2,minmax(0,1fr))}
#divCal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.divCalCard .modCard__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.divCalCtl{display:flex;align-items:center;gap:6px}
.divCalYear[hidden]{display:none}
.divCalYear{font-family:var(--ca-font-data);font-size:11px;padding:5px 8px;border-radius:8px;background:var(--ca-deep);border:var(--ca-line);color:var(--ca-text-2)}
.divCalNav{width:30px;min-width:30px;height:30px;min-height:30px;font-size:15px;border-radius:50%}
.divCalRange{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.055)}
.divCalRange span{font-family:var(--ca-font-data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ca-text-3)}
.divCalRange b{font-family:var(--ca-font-data);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ca-text-1)}
@media(max-width:1099.98px){.divTwo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:719.98px){#divCal{grid-template-columns:repeat(3,minmax(0,1fr))}}
#divCal .calCell{background:var(--ca-deep);border:var(--ca-line);border-radius:11px;padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s ease}
#divCal .calCell:hover{border-color:rgba(255,255,255,.17)}
#divCal .calCell span{font-family:var(--ca-font-data);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--ca-text-3)}
#divCal .calCell b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums}
#divCal .calCell.cal--now{box-shadow:0 0 0 1px rgba(255,255,255,.28) inset}
#divCal .calCell.cal--now span{color:var(--ca-text-1)}
#divCal .calCell.cal--top{background:rgba(100,227,210,.08)}
#divCal .calCell.cal--top b{color:var(--ca-teal)}
#pfPaneDiv .chartBox,#pfPaneDiv .modCard .chartBox{background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:12px 12px 4px;position:relative}
#pfPaneDiv .chartBox{opacity:0;transition:opacity .45s ease}
#pfPaneDiv .chartBox.is-in{opacity:1}
#pfPaneDiv .chartBox .fxline{stroke-dasharray:1400;stroke-dashoffset:1400}
#pfPaneDiv .chartBox.is-in .fxline{animation:plDraw 900ms ease forwards}
#pfPaneTgt .modTbl td,#pfPaneAlloc .modTbl td{font-variant-numeric:tabular-nums}
@media(max-width:640px){#pfRoot .tabBtn{min-width:0;font-size:12px}}
@media(prefers-reduced-motion:reduce){#pfRoot .tabBtn::after{transition:none}#pfPaneOver .donutWrap,#pfPaneDiv .chartBox{opacity:1;transform:none;transition:none}#pfPaneDiv .chartBox .fxline{stroke-dasharray:none;stroke-dashoffset:0;animation:none}#pfKpis .kpi,#divCal .calCell{transition:none}}

/* -- Stage 53: spending premium visual pass (zero logic) -- */
#spRoot .kpiHero__v{font-family:var(--ca-font-display);font-variant-numeric:tabular-nums}
#spRoot #spHeroRate{font-size:clamp(30px,4.6vw,44px);letter-spacing:-.015em}
#spRoot #spHeroSurplus{font-size:clamp(22px,3vw,30px)}
.rateBar{display:block;width:min(240px,100%);height:6px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:9px;overflow:hidden}
.rateBar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ca-blue),var(--ca-teal));transition:width .5s ease}
#spKpis .kpi{min-height:92px;display:flex;flex-direction:column;justify-content:center;transition:border-color .2s ease}
#spKpis .kpi:hover{border-color:rgba(255,255,255,.17)}
#spKpis .kpi b{font-variant-numeric:tabular-nums}
#spRoot .catBar{display:block;height:5px;border-radius:999px;background:var(--ca-steel);opacity:.85;margin-top:6px;width:var(--w);transform:scaleX(0);transform-origin:left;transition:transform .55s ease}
#spRoot .is-in .catBar{transform:scaleX(1)}
#spRoot .modTbl tr.is-top td{background:rgba(47,128,237,.06)}
#spRoot .modTbl tr.is-top td:first-child{color:var(--ca-text-1)}
@media(min-width:769px){#spRoot .modTbl td:nth-child(2),#spRoot .modTbl td:nth-child(3),#spRoot .modTbl td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}}
#spRecurring .recRow{display:flex;align-items:center;gap:10px;background:var(--ca-deep);border:var(--ca-line);border-radius:11px;padding:10px 13px;margin-bottom:8px}
#spRecurring .recRow b{flex:1;font-size:13px}
.cadChip{font-family:var(--ca-font-data);font-size:9px;letter-spacing:.11em;text-transform:uppercase;border:var(--ca-line);border-radius:999px;padding:4px 9px;color:var(--ca-text-3)}
.recAmt{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;color:var(--ca-text-1)}
#spRoot #spLink{position:relative}
.linkIco{position:absolute;top:-2px;right:2px;font-size:15px;color:var(--ca-text-3);border:var(--ca-line);border-radius:9px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
#spRoot .modCard #spLink .linkLead{padding-right:38px}
#spBars{opacity:0;transition:opacity .45s ease}
#spBars.is-in{opacity:1}
#spRoot .pField input,#spRoot .pField select{min-height:32px}
@media(prefers-reduced-motion:reduce){.rateBar i,#spRoot .catBar,#spBars,#spKpis .kpi{transition:none}#spRoot .catBar{transform:scaleX(1)}#spBars{opacity:1}}

/* -- Stage 54: debt premium visual pass (zero logic) -- */
#dbRoot .kpiHero__v{font-family:var(--ca-font-display);font-variant-numeric:tabular-nums}
#dbRoot #dbHeroDate{font-size:clamp(26px,3.8vw,38px);letter-spacing:-.01em}
#dbRoot #dbHeroInt{font-size:clamp(24px,3.4vw,34px)}
#dbKpis .kpi{min-height:92px;display:flex;flex-direction:column;justify-content:center;transition:border-color .2s ease}
#dbKpis .kpi:hover{border-color:rgba(255,255,255,.17)}
#dbKpis .kpi b{font-variant-numeric:tabular-nums}
.srOnlySel{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dbSeg{position:relative;display:flex;margin-top:6px;border:var(--ca-line-strong);border-radius:12px;background:var(--ca-deep);overflow:hidden;min-height:44px}
.dbSeg__btn{flex:1 1 0;position:relative;z-index:1;border:0;background:transparent;color:var(--ca-text-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:10px 8px;transition:color .2s ease}
.dbSeg__btn.is-on{color:var(--ca-text-1)}
.dbSeg__btn:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
.dbSeg__thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(33.333% - 4px);border-radius:9px;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--ca-lavender) inset;transition:transform .25s ease;z-index:0}
#dbCompare{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
#dbCompare .presetCard{display:flex;flex-direction:column;gap:7px;min-height:150px;transition:border-color .2s ease,background .2s ease}
#dbCompare .presetCard b{min-height:34px}
#dbCompare .presetCard > span{font-variant-numeric:tabular-nums}
#dbCompare .presetCard.is-on{border-color:var(--ca-lavender);box-shadow:0 0 0 1px var(--ca-lavender) inset}
#dbCompare .stratDiff{grid-column:1/-1;position:relative;background:rgba(199,104,58,.07);border:1px solid rgba(199,104,58,.35);border-left:3px solid var(--ca-copper);border-radius:12px;padding:13px 15px 13px 46px;line-height:1.7}
.sdIco{position:absolute;left:14px;top:12px;font-size:16px;color:var(--ca-copper)}
#dbPaneOver .chartBox{background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:12px 12px 4px;position:relative;opacity:0;transition:opacity .45s ease}
#dbPaneOver .chartBox.is-in{opacity:1}
#dbPaneOver .chartBox .fxline{stroke-dasharray:1400;stroke-dashoffset:1400}
#dbPaneOver .chartBox.is-in .fxline{animation:plDraw 900ms ease forwards}
#dbPaneSched .tblWrap{max-height:560px;overflow:auto;border:var(--ca-line);border-radius:12px}
#dbPaneSched .modTbl th{position:sticky;top:0;background:var(--ca-card);z-index:2}
@media(min-width:769px){#dbPaneSched .modTbl td{text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(255,255,255,.05)}#dbPaneSched .modTbl td:first-child,#dbPaneSched .modTbl td:nth-child(2),#dbPaneSched .modTbl th:first-child,#dbPaneSched .modTbl th:nth-child(2){text-align:left}}

#dbRoot .ctrlRow input,#dbRoot .ctrlRow select,#dbRoot .pField input{min-height:32px}
@media(prefers-reduced-motion:reduce){.dbSeg__thumb,#dbCompare .presetCard,#dbKpis .kpi{transition:none}#dbPaneOver .chartBox{opacity:1;transition:none}#dbPaneOver .chartBox .fxline{stroke-dasharray:none;stroke-dashoffset:0;animation:none}}

/* -- Stage 55: goals premium visual pass (zero logic) -- */
#goalList{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
#goalList details{margin:0}
#goalList details[open]{grid-column:1/-1}
#goalList summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:64px;background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:12px 14px;transition:border-color .2s ease,transform .2s ease}
#goalList details:not([open]) summary:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
#goalList summary [data-stag]{margin-left:auto}
#goalList .goalRow__meta{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;color:var(--ca-text-2)}
#goalList .gCard__mini{flex-basis:100%}
.inflChip{font-family:var(--ca-font-data);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;border:1px dashed rgba(255,255,255,.22);border-radius:999px;padding:3px 8px;color:var(--ca-text-3)}
#goalList .glHero{align-items:center}
#goalList .glHero__of{font-size:var(--ca-fs-sm);color:var(--ca-text-2)}
#goalList .statList .sr{display:flex;justify-content:space-between;gap:14px}
#goalList .statList .sr b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;text-align:right}
#goalList .glHero .fxring{transition:none}
#goalList .glHero.is-in .fxring{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease}
#goalList .pField input,#goalList .pField select{min-height:32px}
@media(prefers-reduced-motion:reduce){#goalList summary,#goalList .glHero.is-in .fxring{transition:none}#goalList .glHero .fxring{stroke-dashoffset:0!important}}

/* -- Stage 56: scenarios premium visual pass (zero logic) -- */
#scnHero .kpiHero__v{font-family:var(--ca-font-display);font-size:clamp(26px,3.8vw,38px);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.detBadge--sm{align-self:flex-start;padding:5px 11px;margin:0 0 7px;font-family:var(--ca-font-data);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-text-3)}
#scnList{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
#scnList .scnCard{display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease}
#scnList .scnCard:hover{border-color:rgba(255,255,255,.18)}
#scnList .scnCard--open{box-shadow:0 0 0 1px var(--ca-lavender) inset;grid-column:1/-1}
#scnList .scnCard .sr{display:flex;justify-content:space-between;gap:12px;min-height:32px;align-items:center;border-bottom:1px solid rgba(255,255,255,.05)}
#scnList .scnCard .sr b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;text-align:right}
#scnList .scnCard .sr:first-of-type b{font-size:15px}
#scnList .scnCard .sr:first-of-type{background:rgba(255,255,255,.025);border-radius:8px;padding:0 8px}
#scnList .chip--pos,#scnList .chip--neg{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.chartBox:has(> #scnChart){background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:12px 12px 4px;position:relative;opacity:0;transition:opacity .45s ease}
.chartBox:has(> #scnChart).is-in{opacity:1}
.chartBox:has(> #scnChart) .fxline{stroke-dasharray:1400;stroke-dashoffset:1400}
.chartBox:has(> #scnChart).is-in .fxline{animation:plDraw 900ms ease forwards}
#scnList .pField input,#scnList .pField select{min-height:32px;font-variant-numeric:tabular-nums;transition:border-color .18s ease}
#scnList .pField input:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
@media(prefers-reduced-motion:reduce){#scnList .scnCard,#scnList .pField input{transition:none}.chartBox:has(> #scnChart){opacity:1;transition:none}.chartBox:has(> #scnChart) .fxline{stroke-dasharray:none;stroke-dashoffset:0;animation:none}}

.kpiStrip{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:900px){.kpiStrip{grid-template-columns:1fr}}
.kCard{background:var(--ca-card);border:var(--ca-line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-height:118px;transition:border-color .2s ease}
.kCard:hover{border-color:rgba(255,255,255,.16)}
.kLabel{font-family:var(--ca-font-data);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ca-text-3)}
.kVal{font-family:var(--ca-font-display);font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.kVal--accent{color:var(--ca-lavender)}
.kVal.vPos{color:var(--ca-pos,#2FD16B)}
.kVal.vNeg{color:var(--ca-neg,#FF6B9D)}
.kVal2{font-family:var(--ca-font-display);font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kSub{font-size:12px;color:var(--ca-text-2)}
.kCtx{font-size:11.5px;color:var(--ca-text-3);line-height:1.55;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media(max-width:1020px){.plGrid{grid-template-columns:1fr}}
.heroInput .bigInput{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.heroInput .bigInput b{font-family:var(--ca-font-display);font-size:clamp(44px,6.5vw,64px);letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1}
.heroInput .bigUnit{font-family:var(--ca-font-data);color:var(--ca-text-3);font-size:15px}
.yrPill{font-family:var(--ca-font-data);font-size:12.5px;color:var(--ca-lavender);border:1px solid rgba(99,91,255,.45);background:rgba(99,91,255,.10);border-radius:999px;padding:6px 13px;font-variant-numeric:tabular-nums}
.rangeEnds{display:flex;justify-content:space-between;font-family:var(--ca-font-data);font-size:10.5px;color:var(--ca-text-3);margin-top:-4px}
.quickRow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.quickRow .chip,.agePills .chip{font:600 12.5px/1 var(--ca-font-data);color:var(--ca-text-2);background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:11px 16px;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease;min-height:38px}
.quickRow .chip:hover,.agePills .chip:hover{border-color:var(--ca-lavender);color:var(--ca-text-1)}
.quickRow .chip.is-on,.agePills .chip.is-on{background:#FFFFFF;border-color:#FFFFFF;color:#0B0B0D}
.customRow{display:flex;align-items:flex-end;gap:12px;border-top:1px solid rgba(255,255,255,.07);margin-top:12px;padding-top:12px;flex-wrap:wrap}
.customRow .pField{flex:1 1 180px;margin:0}
.hintTxt{font-size:11px;color:var(--ca-text-3);padding-bottom:10px}
.chartCard .chartHead{display:flex;flex-direction:column;gap:4px;margin:2px 0 10px}
.agePills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
@media(prefers-reduced-motion:reduce){.kCard,.quickRow .chip,.agePills .chip{transition:none}}

/* -- Stage 58 remnants: only selectors still live (interim strip/sankey, rail bars, banner, delete) -- */
.bgStrip .kit-outcome-val{font-size:clamp(26px,3vw,38px)}
.bgFlowCard{margin-top:14px}
.bgSankey svg{width:100%;height:auto;display:block}
.bgRem--inc{color:var(--ca-text-2)}
.bgDel{order:-1;grid-column:1;background:transparent;border:0;color:var(--ca-text-3);opacity:.45;font-size:13px;cursor:pointer;border-radius:6px;min-height:24px;width:20px;padding:0}
.bgDel:hover{color:var(--ca-neg,#F0524D);opacity:1}
.bgGearSm:hover{color:var(--ca-text-1);border-color:rgba(255,255,255,.18)}
.bgBars{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.bgBarRow{display:flex;justify-content:space-between;font-size:12px;color:var(--ca-text-2)}
.bgTrack{height:7px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.bgTrack i{display:block;height:100%;border-radius:999px;background:var(--ca-accent,#635BFF);transition:width .25s ease}
/* s121: expenses rendered in four different colours depending on the surface — copper here,
   accent purple on category rows, blue on the Spending page, red on the totals. One canonical
   spend colour now covers every PROGRESS FILL: --ca-steel. Income keeps the brand purple, so the
   two still read apart. Red stays reserved for the over-budget warning and negative dollar
   values, which is the signal it would lose if every expense bar were permanently red. */
.bgTrack i.bgExpBarFill{background:var(--ca-steel)}
.bgSample{font-size:11px;color:var(--ca-text-3);padding:0 2px;margin:0 0 6px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.bgBarTrack i,.bgTrack i{transition:none}}
/* -- Stage 65 Part A: budget one-for-one rebuild (REF-BUDGET grammar) -- */
.bgHeadBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.bgHeadBar .bgMonthLbl{font-family:var(--ca-font-display);font-size:22px;min-width:170px}
.bgHeadNav{display:flex;gap:6px}
.bgViewSeg{display:flex;gap:0;border:1px solid rgba(255,255,255,.14);border-radius:999px;overflow:hidden}
.bgViewSeg .kit-hpill{border:0;border-radius:0}
.bgGearBtn{margin-left:auto}
.bgMain{min-width:0}
.bgSec{background:transparent;border:0;border-radius:0;padding:0;margin-bottom:12px}
/* s110: ONE source of truth for the budget row grid. Previously .bgSecHead/.bgGrpHead/.bgRow/.bgTotRow
   each declared the same 6-column template but with four different horizontal paddings (16/0/8/10) and
   two different gaps (12/12/10/10). Because .bgCols is justify-items:end and .bgNum is text-align:right,
   that put the PLANNED/ACTUAL/REMAINING labels 12px/10px/8px off from the values they label. Any future
   change must move all four together — that is the point of these variables. */
#bgRoot{--bgr-cols:22px 26px minmax(0,1fr) 112px 96px 112px;--bgr-gap:10px;--bgr-padx:10px}
.bgSecHead{display:grid;grid-template-columns:var(--bgr-cols);align-items:center;gap:var(--bgr-gap);padding:9px var(--bgr-padx);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:12px}
.bgSecHead h2{font-size:15px;margin:0}
.bgCols{display:grid;grid-template-columns:112px 96px 112px;gap:10px;justify-items:end}
.bgCols--labels span{font-family:var(--ca-font-data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ca-text-3)}
.bgChev{background:transparent;border:0;color:var(--ca-text-2);cursor:pointer;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;width:26px;min-height:26px;border-radius:8px;transition:transform .18s ease}
.bgChev.is-closed{transform:rotate(-90deg)}
/* s114: horizontal padding dropped from 12px to 0. .bgGroup and .bgSecHead are siblings inside
   .bgSec, so a 12px group inset pushed every expense row 12px inboard of the PLANNED|ACTUAL|
   REMAINING labels naming them (group 12 + row 10 = 22 vs the header's 10). Rows carry their own
   --bgr-padx, so the card still breathes. #bgIncomeList mirrors this exactly: Income rows had no
   surface at all and floated on the bare page ground with nothing to read them against. */
.bgGroup,#bgIncomeList{background:var(--ca-card);border:var(--ca-line);border-radius:12px;padding:2px 0 4px;margin-bottom:6px}
#bgIncomeList:empty{display:none}
.bgGrpHead{display:grid;grid-template-columns:var(--bgr-cols);align-items:center;gap:var(--bgr-gap);padding:9px var(--bgr-padx)}
.bgGrpName{font-weight:700;font-size:14.5px}
.bgGearSm{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--ca-text-2);cursor:pointer;border-radius:8px;min-height:24px;font:600 10.5px var(--ca-font-data);letter-spacing:.08em;text-transform:uppercase;padding:0 9px}
.bgGearSm:hover,.bgChev:hover{color:var(--ca-text-1)}
.bgCols--vals b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
.bgRow{display:grid;grid-template-columns:var(--bgr-cols);gap:var(--bgr-gap);align-items:center;padding:5px var(--bgr-padx);position:relative}
.bgRow + .bgRow{border-top:1px solid rgba(255,255,255,.035)}
.bgEmoji{width:100%;text-align:center;font-size:16px;overflow:hidden}
.bgName{background:transparent;border:0;color:var(--ca-text-1);font-size:13.5px;font-weight:600;min-width:0}
.bgPlanBox{display:block}
.bgNum{background:var(--ca-card);border:var(--ca-line);border-radius:10px;color:var(--ca-text-1);font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:13px;padding:6px 10px;min-height:31px;text-align:right;width:100%}
.bgNum--bare{background:transparent;border-color:transparent}
.bgNum--bare:hover{border-color:rgba(255,255,255,.14)}
.bgNum:focus-visible,.bgName:focus-visible{outline:none;box-shadow:var(--ca-focus-ring);border-radius:8px}
.bgRem{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:13px;text-align:right;justify-self:end;padding:7px 12px;border-radius:999px;min-height:32px;display:inline-flex;align-items:center;gap:5px}
.bgRem--ro.vPos{background:rgba(47,209,107,.10);border:1px solid rgba(47,209,107,.35)}
.bgRem--ro.vNeg{background:rgba(240,82,77,.10);border:1px solid rgba(240,82,77,.35)}
.roIco{font-style:normal;font-size:12px;opacity:.85;font-family:system-ui,-apple-system,sans-serif}
.bgBarTrack{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.bgBarTrack i{display:block;height:100%;border-radius:999px;background:var(--ca-steel);transition:width .25s ease}
.bgBarTrack i.over{background:var(--ca-neg,#F0524D)}
.bgUnb{background:transparent;border:0;color:var(--ca-text-3);font-size:12.5px;cursor:pointer;padding:10px 0 2px 42px;min-height:36px}
.bgUnb:hover{color:var(--ca-text-1)}
.bgAddBtn{margin-top:10px}
.bgRailTabs{display:flex;gap:6px;margin:10px 0 4px}
.bgRailTabs .kit-hpill.is-on{background:#FFFFFF;border-color:#FFFFFF;color:#0B0B0D}
.bgViewSeg .kit-hpill.is-on{background:#FFFFFF;color:#0B0B0D}
.bgBarRow--gap{margin-top:12px}
.bgInfo{font-style:normal;cursor:help;opacity:.7}
.bgInterim{margin-top:18px;border-top:1px dashed rgba(255,255,255,.12);padding-top:12px}
.bgInterimNote{margin-bottom:10px}
.bgYearWrap{background:var(--ca-card);border:var(--ca-line);border-radius:16px;padding:12px;overflow-x:auto}
.bgYearTbl{border-collapse:collapse;min-width:1080px;width:100%}
.bgYearTbl th,.bgYearTbl td{font-family:var(--ca-font-data);font-size:11px;font-variant-numeric:tabular-nums;padding:7px 8px;text-align:right;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.bgYearTbl th:first-child,.bgYearTbl td:first-child{text-align:left;font-family:inherit;font-weight:600}
.bgYearTbl td span{display:block}
.bgYearTbl td span + span{color:var(--ca-text-3)}
.bgYrInc td{color:var(--ca-pos,#2FD16B)}
.bgModalWrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:80}
.bgModalCard{background:var(--ca-card,#141519);border:1px solid var(--ca-line-c,#2A2B33);border-radius:16px;max-width:560px;width:100%;max-height:82vh;overflow:auto;padding:18px}
.bgModalHead{display:flex;align-items:center;justify-content:space-between}
.bgModalHead h2{margin:0;font-size:16px}
.bgMGrp{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;margin-top:12px}
.bgMGrpHead{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.bgMName{flex:1;background:var(--ca-deep,#121317);border:var(--ca-line);border-radius:10px;color:var(--ca-text-1);font-size:12.5px;padding:8px 10px;min-height:38px;min-width:0}
.bgMCat{display:flex;gap:8px;align-items:center;padding:5px 0}
.bgMEmoji{width:52px;text-align:center;background:var(--ca-deep,#121317);border:var(--ca-line);border-radius:10px;color:var(--ca-text-1);padding:8px 4px;min-height:38px}
.bgMRo{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ca-text-2);white-space:nowrap}
.bgMBtns{display:flex;gap:4px}
.bgMBtns button{background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:var(--ca-text-2);cursor:pointer;min-width:30px;min-height:30px}
.bgMBtns button:disabled{opacity:.3;cursor:default}
.bgMAdd{margin-top:8px}
@media(max-width:700px){
.bgSecHead{grid-template-columns:26px 1fr}
.bgSecHead .bgCols--labels{display:none}
.bgGrpHead{grid-template-columns:26px 1fr auto}
.bgGrpHead .bgCols--vals{grid-column:2/-1;justify-items:start;grid-template-columns:repeat(3,auto);gap:16px}
.bgIndent{display:none}
.bgSecHead>h2,.bgGrpMain{grid-column:2/-1}
.bgTotRow .bgTotName{grid-column:1/-1}
.bgSecHead .bgCols--labels,.bgTotRow .bgCols{grid-column:1/-1}
.bgGrpHead .bgCols--vals b::before{content:attr(data-l);display:block;font-family:var(--ca-font-data);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-text-3);font-weight:400}
.bgRow{grid-template-columns:30px minmax(0,1fr) 104px;grid-auto-rows:auto;background:var(--ca-deep);border:var(--ca-line);border-radius:12px;padding:12px;margin:8px 0;position:relative}
.bgRow + .bgRow{border-top:var(--ca-line)}
.bgRow::before{content:'Planned';grid-column:2;grid-row:2;align-self:end;font-family:var(--ca-font-data);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-text-3);padding-top:8px}
.bgRow::after{content:'Actual';grid-column:3;grid-row:2;align-self:end;justify-self:end;font-family:var(--ca-font-data);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ca-text-3);padding-top:8px}
.bgPlanBox{grid-column:2;grid-row:3}
.bgNum--bare{grid-column:3;grid-row:3;background:var(--ca-card);border:var(--ca-line)}
.bgRem{grid-column:3;grid-row:1}
.bgRow[data-kind="inc"]{padding-right:46px}
.bgRow[data-kind="inc"] .bgDel{position:absolute;top:8px;right:4px}
.bgBarTrack{grid-column:1/-1;grid-row:4}
.bgSummaryCard{position:static}
.bgTabs{gap:22px}
.bgTab{font-size:17px}
.bgTab--title{font-size:22px}
.bgHeadCtl{gap:8px}
.bgGearTxt{display:none}
.bgVRight{margin-left:0;width:100%}
.bgNum,.bgName,.bgSel,.bgMName,.bgMEmoji{font-size:16px}
.bgMCat{flex-wrap:wrap}
.bgMCat .bgMName{flex-basis:100%}
}
body.bgModalOpen{overflow:hidden}
@media(prefers-reduced-motion:reduce){.bgChev{transition:none}}

/* -- Stage 65 hotfix: full-width layout + hidden-attribute guards -- */
#bgRoot{max-width:1400px}
#bgRoot [hidden]{display:none!important}
.bgModalWrap[hidden]{display:none!important}
.bgBody{grid-template-columns:minmax(0,1fr) 340px;gap:18px}
.bgSummaryCard{position:sticky;top:76px}
@media(max-width:1000px){.bgBody{grid-template-columns:1fr}.bgSummaryCard{position:static}}

/* -- Stage 65B: breakdown views (tabs + pie/bars/trends, REF Reports grammar) -- */
.bgTabs{display:flex;align-items:baseline;gap:22px;margin:0 0 10px;overflow-x:auto;white-space:nowrap}
.bgTab{background:transparent;border:0;color:var(--ca-text-2);font:500 20px var(--ca-font-display);padding:8px 2px 12px;cursor:pointer;border-bottom:3px solid transparent;min-height:44px}
.bgTitleWrap{margin:0;display:inline}
.bgTab--title{font-size:26px;font-weight:700;color:#FFFFFF}
.bgTab--title.is-on{border-bottom-color:transparent}
.bgTab:hover{color:var(--ca-text-1)}
.bgTab.is-on{color:var(--ca-accent,#635BFF);border-bottom-color:var(--ca-accent,#635BFF)}
.bgVCard{padding:18px 20px 22px}
.bgVCtl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bgVSeg{display:flex;gap:2px;align-items:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05);border-radius:999px;padding:3px}
.bgVSeg .kit-hpill{border:0;border-radius:999px;background:transparent;color:var(--ca-text-2)}
.bgVSeg .kit-hpill.is-on{background:#FFFFFF;color:#0B0B0D;font-weight:600}
.bgVSeg--joined{gap:0;border:1px solid rgba(255,255,255,.14);border-radius:999px;overflow:hidden}
.bgVSeg--joined .kit-hpill{border-radius:999px}
.bgVDiv{width:1px;height:22px;background:rgba(255,255,255,.12)}
.bgVRight{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.bgSel{background:var(--ca-card);border:var(--ca-line);border-radius:999px;color:var(--ca-text-1);font-family:var(--ca-font-data);font-size:12px;padding:9px 14px;min-height:38px}
.bgSel:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
.bgPieWrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:start}
.bgPieBox{flex:0 0 300px;display:flex;justify-content:center;position:relative}
.bgLegGrid{flex:1;min-width:260px;display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:26px 28px}
.bgLegEntry{display:grid;grid-template-columns:16px 1fr;align-items:center;gap:4px 8px}
.bgLegDot{width:10px;height:10px;border-radius:50%;display:inline-block}
.bgLegName{font-size:14.5px;color:var(--ca-text-1)}
.bgLegAmt{grid-column:2;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:15.5px;font-weight:600}
.bgVBars{padding:4px 2px}
.bgVBarRow{display:grid;grid-template-columns:16px minmax(140px,240px) 1fr 96px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.bgVBarTrack{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.bgVBarTrack i{display:block;height:100%;border-radius:999px}
.bgVBarRow .bgLegAmt{grid-column:auto;text-align:right}
.bgTrendWrap svg{width:100%;height:auto;display:block}
.bgTrendLeg{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.bgLegChip{display:inline-flex;align-items:center;gap:6px;font-family:var(--ca-font-data);font-size:11.5px;color:var(--ca-text-2)}
.bgVEmpty{padding:24px 4px}
@media(max-width:700px){.bgPieWrap{flex-direction:column;gap:22px}.bgPieBox{flex-basis:auto}.bgLegGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));width:100%}.bgVBarRow{grid-template-columns:16px minmax(0,1fr) 96px}.bgVBarRow .bgVBarTrack{grid-column:1/-1}}

/* -- Stage 65 polish: usability hovers + focus -- */
.bgRow:hover{background:rgba(255,255,255,.035)}
.bgGrpHead:hover .bgGrpName{color:#FFFFFF}
.bgVBarRow:hover{background:rgba(255,255,255,.02)}
.bgTab:focus-visible,.bgSel:hover{border-color:rgba(255,255,255,.28)}
.bgTab:focus-visible{outline:none;box-shadow:var(--ca-focus-ring);border-radius:8px}
.bgLegEntry{border-radius:10px;padding:2px 4px}
.bgLegEntry:hover{background:rgba(255,255,255,.03)}

/* -- Stage 65 identical-structure pass: header cluster, group cards, $ boxes, rail card -- */
.bgHeadBar{justify-content:space-between}
.bgHeadCtl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* s114: .bgCirc is a 40px target but the arrow glyph inherited font:600 11px from .kit-hpill,
   so the arrows read as tiny marks. Size the glyph explicitly and give the control a visible
   resting surface so it reads as a button, not a character. */
.bgCirc{width:40px;min-width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;display:inline-flex;align-items:center;font-size:19px;line-height:1;font-weight:500;color:var(--ca-text-2);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.bgCirc:hover{background:rgba(255,255,255,.10);color:var(--ca-text-1);border-color:rgba(255,255,255,.18)}
.bgLeftCard{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:20px 14px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.bgLeftCard .kit-outcome-val{font-size:clamp(30px,3vw,40px)}
.bgLeftLbl{font-size:13px;color:var(--ca-text-2)}
.bgVTitle{font:600 10px var(--ca-font-data);letter-spacing:.17em;text-transform:uppercase;color:var(--ca-text-3);margin:0 0 10px}
@media(max-width:700px){.bgHeadBar{justify-content:flex-start}.bgGroup{padding:8px 12px}}

/* -- Stage 65 market standards: touch targets, focus, tap feel -- */
#bgRoot *{-webkit-tap-highlight-color:transparent}
#bgRoot ::selection{background:rgba(99,91,255,.35);color:#FFFFFF}
.bgCirc{min-height:40px}
.bgChev:focus-visible,.bgGearSm:focus-visible,.bgDel:focus-visible,.bgUnb:focus-visible,.bgCirc:focus-visible,.bgMBtns button:focus-visible,.bgMEmoji:focus-visible,.bgMName:focus-visible{outline:none;box-shadow:var(--ca-focus-ring);border-radius:8px}
@media(max-width:700px){.bgChev,.bgGearSm,.bgDel,.bgUnb,.bgSel,.bgCirc,.bgMBtns button,.bgMEmoji,.bgMName{min-height:44px;min-width:44px}}

/* -- Stage 66: portfolio tracker zone (reference grammar) -- */
#pfRoot{max-width:1400px}
/* s131: the left card, the donut and the right rail read as three columns, but the outer two were
   360px and 250px while the donut took every remaining pixel — so the middle dominated. Both outer
   columns are now the same width and the donut takes what is left, which is narrower than before.
   The chart SVG itself is unchanged; only its container shrinks, which is what was asked for. */
.pfRefZone{display:grid;grid-template-columns:320px minmax(0,1fr);gap:8px;margin-top:8px;align-items:start}
.pfRefLeft{display:flex;flex-direction:column;gap:8px}
/* s133: stretch, so the Returns + actions rail ends level with the donut card rather than
   running past it. The rail's own stack pushes the actions to its bottom edge. */
.pfRefTop{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:8px;align-items:stretch}
.pfStatCol{min-width:0}
.pfStatCol>.pfStatStack{height:100%;display:flex;flex-direction:column}
.pfStatStack>.pfRetCard{flex:1 1 auto;min-height:0}

.pfLink{background:transparent;border:0;color:var(--ca-text-2);font-size:12.5px;cursor:pointer;min-height:44px}
.pfLink:hover{color:#FFFFFF}
.pfGoalVal{display:flex;align-items:baseline;gap:6px;margin:4px 0 14px}
.pfGoalVal b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:clamp(24px,2.6vw,32px);color:#FFFFFF}
.pfGoalVal span{font-family:var(--ca-font-data);font-size:15px;color:var(--ca-text-2)}
.pfGoalBar{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.08);margin:10px 0 14px}
.pfGoalBar i{display:block;height:100%;border-radius:999px;background:var(--ca-accent,#635BFF);transition:width .35s ease}
.pfGoalChip{position:absolute;top:50%;transform:translate(-60%,-50%);background:#1E1F26;border:1px solid var(--ca-line-c,#2A2B33);color:#FFFFFF;font:600 11px var(--ca-font-data);padding:4px 9px;border-radius:999px;font-style:normal;white-space:nowrap}
.pfGoalNote{font-size:12.5px;color:var(--ca-text-2);margin:0}
.pfFormRow{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ca-text-2);margin-top:10px}
.pfFormBtns{display:flex;gap:8px;margin-top:12px}
.pfRetChip{font-family:var(--ca-font-data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ca-text-3);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 10px}
.pfRetRow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 6px;border:0;border-radius:12px;margin-top:4px;background:transparent}
/* s119: the Total row tint is chrome — it stayed green even when the total was a loss. */
.pfRetRow.isTotal{background:rgba(99,91,255,.07);border:1px solid rgba(99,91,255,.35);padding:12px 12px;margin-top:9px}
.pfRetLbl{font-weight:600;font-size:13.5px}
.pfRetVal{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:600;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.pfRetVal i{font-style:normal;font-size:11px;font-weight:400;color:var(--ca-text-2)}
.pfDonutCard{display:flex;align-items:center;justify-content:center;padding:10px}
.pfDonutWrap{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center}
.pfDonutWrap svg{overflow:visible}
.pfChip{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;background:#141519;border:1px solid var(--ca-line-c,#2A2B33);border-radius:999px;padding:3px 9px;font:500 10.5px var(--ca-font-data);color:#FFFFFF;white-space:nowrap}
.pfChip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.pfStatCol{display:flex;flex-direction:column;gap:16px}
.pfStat{display:flex;flex-direction:column;gap:3px;padding:9px 12px;flex:1;justify-content:center}
.pfStat .kit-outcome-val{font-size:clamp(20px,2.2vw,26px)}
/* s133: pinned to the bottom of the rail so Returns fills the space above and the pair ends
   level with the donut card. Compacted so the two together never outrun that height. */
.pfStatStack>.pfActs{display:flex;gap:8px;padding:10px 12px 12px;margin-top:auto}
.pfActs{display:flex;gap:8px;padding:12px}
/* s133: tightened from 12px/64px so the rail's Returns block keeps the room it needs. */
.pfAct{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--ca-deep);border:var(--ca-line);border-radius:12px;color:var(--ca-text-1);cursor:pointer;padding:9px 6px;min-height:56px;font-size:10px}
.pfAct i{font-style:normal;font-size:14px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(99,91,255,.14)}
.pfAct:hover{border-color:rgba(255,255,255,.24)}
.pfSortWrap{display:flex;align-items:center;gap:10px}
.pfPrevRow{display:grid;grid-template-columns:44px minmax(0,1.3fr) 76px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.pfPrevRow:hover{background:rgba(255,255,255,.02)}
.pfBadge{width:38px;height:38px;border-radius:50%;border:0;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;font:700 9.5px var(--ca-font-data);letter-spacing:.02em}
.pfPrevName{display:flex;flex-direction:column;min-width:0}
.pfPrevName b{font-size:13.5px}
.pfSub{font-size:11px;color:var(--ca-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfPrevPct{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:13px;text-align:right}
.pfPrevPos,.pfPrevRet,.pfPrevUpd{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums}
.pfPrevPos b,.pfPrevRet b{font-size:13.5px}
.pfMore{margin-top:12px;width:100%}
@media(max-width:1100px){.pfRefZone{grid-template-columns:1fr}.pfRefTop{grid-template-columns:1fr}}
@media(max-width:700px){.pfDonutWrap{width:250px;height:250px}.pfChip{font-size:9.5px;padding:2px 7px}.pfPrevRow{grid-template-columns:38px minmax(0,1fr) minmax(0,1fr)}.pfPrevPct,.pfPrevUpd{display:none}.pfPrevPos{align-items:flex-start}.pfActs{flex-wrap:wrap}.pfAct{min-height:64px;flex-basis:30%}}
@media(prefers-reduced-motion:reduce){.pfGoalBar i{transition:none}}

/* -- Stage 66b: history card + account scope -- */
.pfHistCard{margin-top:14px}
.pfHistCtl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pfHistChg{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:12.5px}
.pfHistCard #pfHistChart svg{width:100%;height:auto;display:block}
.pfScopeBar{display:flex;align-items:center;gap:10px;margin-top:4px;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:10px}
.pfScopeLbl{font-size:14px;font-weight:600}
.pfScopeRight{display:flex;align-items:center;gap:10px}
@media(max-width:700px){.pfScopeBar{justify-content:flex-start}}

/* -- Stage 65 pan ranges: the sankey pans on every width that would squash it; the year table hints whenever it scrolls -- */
@media(max-width:960px){
.bgSankey{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bgSankey svg{min-width:900px}
.bgFlowCard::after{content:'\2190 swipe to pan \2192';display:block;text-align:center;font-family:var(--ca-font-data);font-size:10px;color:var(--ca-text-3);padding-top:6px}
}
@media(max-width:1150px){
.bgYearWrap::after{content:'\2190 swipe to pan \2192';display:block;text-align:center;font-family:var(--ca-font-data);font-size:10px;color:var(--ca-text-3);padding-top:6px}
}

/* -- Stage 67: reference aesthetic (eyebrow heads, pill tabs, catalog chips) -- */
#pfRoot .modCard__head h2{font:650 17px var(--ca-font-display,inherit);letter-spacing:0;text-transform:none;color:#FFFFFF}
#pfRoot .tabBtn{background:transparent;border:0;border-radius:999px;padding:0 13px;color:var(--ca-text-3);min-height:28px}
#pfRoot .tabBtn.is-on{background:#FFFFFF;color:#0B0B0D}
#pfRoot .tabBtn::after{display:none}
#pfRoot .tabBtn[aria-selected="true"]{background:var(--ca-card);border-color:var(--ca-line-c,#2A2B33);color:#FFFFFF}
#pfRoot .tabBtn:hover{color:#FFFFFF}
.pfCatChip{display:inline-flex;align-items:center;background:rgba(99,91,255,.10);border:1px solid rgba(99,91,255,.30);border-radius:999px;padding:3px 9px;font:500 10.5px var(--ca-font-data);color:var(--ca-text-1)}
.pfCatSlot{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pfCatNotes{margin:8px 0 0;padding-left:18px}
.pfCatNotes li{font-size:12px;color:var(--ca-text-2);margin-top:5px}
#pfCatNotes .fineNote{margin-top:10px}

/* -- Stage 67b: one-for-one cleanup (toolbar-first order, flat returns, table header, icon tints) -- */
.pfGoalNote--tgt{color:var(--ca-accent,#635BFF);margin-top:2px}
.pfPrevHead{border-bottom:1px solid rgba(255,255,255,.08);padding:4px 0 8px}
.pfPrevHead span{font:600 9.5px var(--ca-font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--ca-text-3)}
.pfPrevHead .pfPrevPos,.pfPrevHead .pfPrevUpd,.pfPrevHead .pfPrevRet{align-items:flex-end}
.pfActs .pfAct:nth-child(1) i{background:rgba(99,91,255,.16)}
.pfActs .pfAct:nth-child(2) i{background:rgba(100,227,210,.14)}
.pfActs .pfAct:nth-child(3) i{background:rgba(245,158,11,.14)}
@media(max-width:700px){.pfPrevHead{display:none}}

/* -- Stage 68: overview command zone -- */
#ovRoot{max-width:1400px}
#ovRoot .modCard__head h2{font:600 10.5px var(--ca-font-data);letter-spacing:.18em;text-transform:uppercase;color:var(--ca-text-3)}
.ovHeroRow{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-bottom:16px;align-items:stretch}
.ovHeroRow--b{grid-template-columns:minmax(0,1fr) 380px}
#ovHeroChart svg{width:100%;height:auto;display:block}
.ovMonthCard{display:flex;flex-direction:column}
.ovNetLine{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.ovNetLine b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:22px}
.ovMinis{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:16px}
.ovMiniDonut{display:flex;justify-content:center;padding:6px 0 10px}
.ovMiniLeg{list-style:none;margin:0;padding:0}
.ovMiniLeg li{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ovMiniLeg li i{width:9px;height:9px;border-radius:50%;flex:none}
.ovMiniLeg li b{margin-left:auto;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:12.5px}
.ovMiniLink{display:inline-block;margin-top:8px;font-size:12px;color:var(--ca-text-2);text-decoration:none;line-height:1.7}
.ovMiniLink:hover{color:#FFFFFF}
.ovAllocatorBody{display:flex;flex-direction:column;gap:6px}
.ovActs{display:flex;gap:8px;padding:12px}
.ovActs .pfAct{text-decoration:none;justify-content:center}
.ovDetailsHead{font:600 10.5px var(--ca-font-data);letter-spacing:.18em;text-transform:uppercase;color:var(--ca-text-3);margin:22px 0 12px}
@media(max-width:1000px){.ovHeroRow,.ovHeroRow--b{grid-template-columns:1fr}}

/* -- Stage 67c: pixel fidelity to the tracker reference -- */
.pfPrevRetPct{display:block}
.pfRetL{display:flex;align-items:center;gap:7px;font-size:14.5px}
.pfRetR{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums}
.pfRetR b{font-size:15.5px}
.pfRetR i{font-style:normal;font-size:12px;margin-top:1px}
#pfScope{background:transparent;border:0;color:#FFFFFF;font-weight:600;font-size:13.5px;padding:4px 2px;min-height:44px}

/* -- Stage 68b: grid-item overflow guards (grid items default to min-width:auto and can push past minmax(0,1fr) tracks) -- */
.kpiHero__main{min-width:0}
/* s133: this had no display and no gap, so .pfRefTop and the Holdings card below it sat flush
   against each other \u2014 the two blocks the owner saw touching. 8px is the canon gap used by
   .pfRefZone, .pfRefLeft and .pfRefTop; this container was simply never given one. */
.pfRefRight{min-width:0;display:flex;flex-direction:column;gap:8px}

/* -- Stage 70: inline editable cells (select-to-edit, live totals) -- */
.pfCell{width:100%;max-width:120px;background:transparent;border:1px solid transparent;border-radius:8px;padding:4px 7px;color:var(--ca-text-1);font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:13px;text-align:right;min-height:31px}
.pfCell::placeholder{color:var(--ca-text-3);font-size:11.5px}
.pfCell:hover{border-color:var(--ca-line-c,#2A2B33);background:rgba(255,255,255,.03);cursor:text}
.pfCell:focus{outline:none;border-color:var(--ca-accent,#635BFF);background:var(--ca-deep);box-shadow:0 0 0 3px rgba(99,91,255,.16)}
td.pfEd{white-space:nowrap}
td.pfEd .pfEdX{color:var(--ca-text-3);padding:0 3px;font-size:11px}
td.pfEd .pfCell{max-width:88px}
@media(max-width:700px){.pfCell{max-width:none;min-height:44px;font-size:16px}td.pfEd .pfCell{max-width:none}}

/* -- Stage 71: dashboard to the research blueprint (hero → KPI strip → modules) -- */
/* s152 layout battery: the hero's own margin-bottom stacked on the column's flex gap \u2014 16px
   above 8px everywhere else, the exact uneven spacing the owner reported. The gap owns rhythm. */
.ovHeroCard{background:linear-gradient(180deg,rgba(99,91,255,.06),rgba(99,91,255,0));border:var(--ca-line);border-radius:12px;padding:11px 13px}
.ovHeroTop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.ovEyebrow{font:600 10.5px var(--ca-font-data);letter-spacing:.18em;text-transform:uppercase;color:var(--ca-text-3)}
.ovHeroVal{display:block;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.01em;color:#FFFFFF;margin:0}

.ovKpiStrip{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,1.8fr) repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:0}
.ovKpi{background:var(--ca-card);border:var(--ca-line);border-radius:11px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ovKpi__l{font:600 9.5px var(--ca-font-data);letter-spacing:.13em;text-transform:uppercase;color:var(--ca-text-3);margin-bottom:1px}
.ovKpi__v{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:clamp(19px,3vw,24px);font-weight:700;letter-spacing:-.01em;color:#FFFFFF}
.ovKpi__s{font-size:10.5px;color:var(--ca-text-3);margin-top:2px}
.ovRow2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.ovRow2>.modCard{min-width:0}
.ovSpentBar{background:var(--ca-neg,#F0524D)!important}
@media(max-width:1000px){.ovKpiStrip{grid-template-columns:repeat(2,minmax(0,1fr))}.ovRow2{grid-template-columns:1fr}}
@media(max-width:560px){.ovKpiStrip{grid-template-columns:1fr}}

/* -- Stage 72: editable report figures (Spending / Income) -- */
.bgLegEdit{background:transparent;border:1px solid transparent;border-radius:8px;padding:4px 7px;color:var(--ca-text-1);font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:13px;text-align:right;width:100px;min-height:31px}
.bgLegEdit:hover{border-color:var(--ca-line-c,#2A2B33);background:rgba(255,255,255,.03);cursor:text}
.bgLegEdit:focus{outline:none;border-color:var(--ca-accent,#635BFF);background:var(--ca-deep);box-shadow:0 0 0 3px rgba(99,91,255,.16)}
@media(max-width:700px){.bgLegEdit{min-height:44px;font-size:16px;width:120px}}
@media(max-width:700px){.ovMiniLink{min-height:44px;line-height:44px}}

/* -- Stage 73: Origin grammar — inline delta, pills under the chart, eyebrow card heads, dense rows -- */
.ovHeroValRow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:1px 0 6px}
.ovDelta{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}
.ovPillRow{display:flex;justify-content:center;margin-top:8px}

/* -- Stage 74: Origin main+rail architecture (direct copy, house palette) -- */
.ovShell{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,318px);column-gap:8px;row-gap:8px;align-items:start}
.ovRail .ovKpiStrip{grid-template-columns:1fr;margin-bottom:0}
.ovChev,.ovChevLink{color:var(--ca-text-3);text-decoration:none;font-size:11px}
.ovWideBtn{display:block;text-align:center;margin-top:8px;padding:7px 10px;border:var(--ca-line);border-radius:10px;color:var(--ca-text-2);font-size:12.5px;text-decoration:none}
.ovWideBtn:hover{border-color:var(--ca-line-c,#2A2B33);color:var(--ca-text-1)}
.ovSplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.ovInvVal{display:block;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:clamp(19px,3vw,24px);font-weight:650;color:#FFFFFF}
#ovInvChart svg{width:100%;height:auto;display:block}
@media(max-width:1000px){.ovShell{grid-template-columns:1fr}.ovSplit{grid-template-columns:1fr}}

/* -- Stage 75: Origin TIME PERIOD month strip (paired income/spend bars) -- */
.bgPeriodCard{margin-bottom:0;padding:6px 8px}
.bgPeriod{display:flex;gap:3px;overflow-x:auto;padding:0}
.bgMon{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 5px;cursor:pointer}
.bgMon:hover{background:rgba(255,255,255,.03)}
.bgMon.is-on{border-color:var(--ca-line-c,#2A2B33);background:var(--ca-deep)}
.bgMonBars{display:flex;align-items:flex-end;gap:2px;height:14px}
.bgMonBars i{display:block;width:4px;border-radius:1px;background:var(--ca-pos,#00C805)}
.bgMonBars i.e{background:var(--ca-blue,#2979FF);opacity:.85}
.bgMonLbl{font:600 8.5px var(--ca-font-data);letter-spacing:.04em;text-transform:uppercase;color:var(--ca-text-3)}
.bgMon.is-on .bgMonLbl{color:var(--ca-text-1)}

/* -- Stage 76: reference-exact budget grammar (gauge, row order, cash-flow rail) -- */
.bgRow>.bgBarTrack{grid-column:1/-1;order:9;margin:0}
.bgGaugeWrap svg{width:100%;height:auto;display:block}
.bgCfCard{gap:7px}
.bgCfRow{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.bgCfRow b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums}
.bgCfBar{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.bgCfBar i{display:block;height:100%;width:0;border-radius:999px;background:var(--ca-blue,#2979FF)}

/* s76: section head mirrors the reference row template */
.bgSecHead>*:last-child{grid-column:3/-1;justify-self:end}
.bgGrpHead>*:last-child{grid-column:3/-1;justify-self:end}

/* -- Stage 77: modern Spending/Income rows (tinted icon, share bar, direct % label) -- */
.bgRepList{display:flex;flex-direction:column;gap:4px;min-width:0}
.bgRepRow{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:10px;transition:background .15s ease}
.bgRepRow:hover{background:rgba(255,255,255,.03)}
.bgRepIc{flex:0 0 26px;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:14px}
.bgRepIc i{width:9px;height:9px;border-radius:999px;display:block}
.bgRepMain{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bgRepTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bgRepName{font-size:13px;color:var(--ca-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgRepBarW{display:flex;align-items:center;gap:8px}
.bgRepBar{flex:1;display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.bgRepBar i{display:block;height:100%;border-radius:999px}
.bgRepPct{flex:0 0 32px;text-align:right;font:600 10.5px var(--ca-font-data);font-variant-numeric:tabular-nums;color:var(--ca-text-3)}
@media(max-width:919.98px){.bgPieWrap{grid-template-columns:1fr}}

/* -- Stage 78: modern polish (segmented tracks, donut halo, row micro-motion) -- */
.bgPieBox::before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,rgba(41,121,255,.09),transparent 62%);pointer-events:none}
.bgRepTop .bgLegAmt{font-weight:650;font-size:13.5px}

/* -- Stage 80: layout compression — strip and gauge share one row; quiet sample note -- */
.bgTopRow .bgPeriodCard,.bgTopRow .bgGaugeCard{margin-bottom:0}
.bgGaugeSvg{display:block;width:100%;max-width:196px;height:auto;margin:0 auto}
.bgSample b{color:var(--ca-text-2);font-weight:600}
@media(max-width:1000px){.bgTopRow{grid-template-columns:1fr}}

/* -- Stage 82: Allocator block grammar — hairline-separated sections inside one card -- */
.ovColL,.ovColR{display:flex;flex-direction:column;gap:8px;min-width:0}
.ovStack{padding:0}
.ovStack>section{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.055)}
.ovStack>section:last-child{border-bottom:0}
.ovStackHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.ovStackHead h2{font:600 10.5px var(--ca-font-data);letter-spacing:.18em;text-transform:uppercase;color:var(--ca-text-3);margin:0}
.ovStack .ovMiniLink{margin-top:6px}
.ovStack .ovMiniDonut{max-width:132px;margin:0 auto}
.ovKpi:first-child .ovKpi__v{font-size:clamp(19px,2.2vw,26px);color:var(--ca-accent,#635BFF)}
@media(max-width:1000px){.ovShell{grid-template-columns:1fr}}

/* -- Stage 85: rail visuals — gauge over pie, both compact -- */
.bgRailViz{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.055)}
.bgPie{display:flex;flex-direction:column;align-items:center;gap:6px}
.bgPie svg{width:168px;height:auto}
.bgPieLeg{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:3px}
.bgPieLeg li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ca-text-2)}
.bgPieLeg li i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.bgPieLeg li b{margin-left:auto;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;color:var(--ca-text-1)}

/* -- Stage 86: standalone Total rows, reference grammar -- */
.bgTotRow{display:grid;grid-template-columns:var(--bgr-cols);gap:var(--bgr-gap);align-items:center;padding:9px var(--bgr-padx);background:var(--ca-card);border:var(--ca-line);border-radius:12px;margin:6px 0 10px}
.bgTotName{grid-column:1/3;font-size:14px;font-weight:700;color:var(--ca-text-1)}
/* s113: was 3/-1, i.e. the money block started at the NAME column and its inner 112/96/112 grid
   (340px) sat left-aligned inside a much wider span. Columns 4-6 are 112+10+96+10+112 = 340px,
   so spanning 4/-1 makes the inner tracks land exactly on the parent's money columns. */
.bgSecHead .bgCols--labels,.bgGrpHead .bgCols--vals,.bgTotRow .bgCols{grid-column:4/-1}
/* the six-column contract: 1 indent/chev · 2 emoji · 3 name · 4 planned · 5 actual · 6 remaining.
   Every row type must honour it or the labels stop describing the values beneath them. */
.bgIndent{display:block}
.bgSecHead>h2{grid-column:2/4;min-width:0}
.bgGrpMain{grid-column:2/4;display:flex;align-items:center;gap:8px;min-width:0}
.bgGrpMain .bgGrpName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgTotRow .bgTotName{grid-column:1/4;min-width:0}

/* -- Stage 88: Portfolio on the Allocator block grammar -- */
.pfStack{padding:0}
.pfStack>.modCard,.pfStack>.pfStat,.pfStack>.pfActs{background:transparent;border:0;border-radius:0;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.055);padding:9px 12px;margin:0}
.pfStack>*:last-child{border-bottom:0}
.pfStatStack{display:flex;flex-direction:column}

/* -- Stage 90: Origin Home overhaul -- */
.ovColR .ovKpiStrip{grid-column:auto;display:flex;flex-direction:column;gap:8px;margin:0}
.ovForecastBtn{margin-left:auto}
.ovTxList{display:flex;flex-direction:column;gap:2px;min-width:0}
.ovTxRow{display:flex;align-items:center;gap:9px;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.045)}
.ovTxRow:last-child{border-bottom:0}
.ovTxIc{flex:0 0 26px;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ca-text-2)}
.ovTxMain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ovTxName{font-size:12.5px;color:var(--ca-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovTxSub{font-size:10.5px;color:var(--ca-text-3)}
.ovTxAmt{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
.ovRailVal{display:flex;align-items:baseline;gap:6px;font-family:var(--ca-font-data);font-variant-numeric:tabular-nums}
.ovRailVal b{font-size:clamp(17px,2vw,21px);font-weight:700;color:#FFFFFF}
.ovRailVal span{font-size:11px;color:var(--ca-text-3)}
.ovRailBar{position:relative;display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:7px 0 4px}
.ovRailBar i{display:block;height:100%;border-radius:999px;background:var(--ca-accent,#635BFF)}
.ovRailBar i.over{background:var(--ca-neg,#F0524D)}
.ovRailPct{font:600 10.5px var(--ca-font-data);color:var(--ca-text-3)}

/* -- Stage 91: Details grid divides evenly — 3 × 3, never a ragged orphan row -- */
@media(max-width:900px){.kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kpiGrid{grid-template-columns:1fr}.kpi__s{min-height:0}}

/* -- Stage 95: Cash Flow strip + heading, reference grammar -- */
.bgCfKpi{align-items:flex-start;text-align:left}
.bgCfKpi .kit-outcome-val{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.bgCfKpi .kit-eyebrow{margin:0;font-size:9.5px;letter-spacing:.16em}
.bgFlowHead{margin:0 0 8px}
.bgFlowHead .kit-eyebrow{margin:0 0 3px;display:block}
.bgFlowTitle{display:block;font-family:var(--ca-font-display);font-weight:700;font-size:clamp(15px,1.7vw,19px);color:var(--ca-text-1)}

/* -- Stage 99: portfolio details divide evenly, three across -- */
/* Stage 106 — research: one card of hairline cells, not six bordered boxes */
#pfKpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--ca-card);border:var(--ca-line);border-radius:12px;overflow:hidden}
#pfKpis > .kpi{background:transparent;border:0;border-radius:0;box-shadow:none;min-height:0;padding:11px 14px;border-right:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055)}
#pfKpis > .kpi:nth-child(3n){border-right:0}
#pfKpis > .kpi:nth-last-child(-n+3){border-bottom:0}
#pfKpis > .kpi:first-child .kpi__v{font-size:clamp(23px,2.7vw,30px);color:var(--ca-accent,#635BFF)}
@media(max-width:900px){#pfKpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#pfKpis{grid-template-columns:1fr}}

/* -- Stage 100: Settings — modern toggle, compact fields -- */
.setHeadRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.setSwitch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.setSwitch input{position:absolute;opacity:0;width:0;height:0}
.setSwitchTrack{position:relative;display:block;width:38px;height:21px;border-radius:999px;background:rgba(255,255,255,.12);transition:background .18s ease}
.setSwitchTrack::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#FFFFFF;transition:transform .18s ease}
.setSwitch input:checked + .setSwitchTrack{background:var(--ca-accent,#635BFF)}
.setSwitch input:checked + .setSwitchTrack::after{transform:translateX(17px)}
.setSwitch input:focus-visible + .setSwitchTrack{box-shadow:0 0 0 3px rgba(99,91,255,.35)}
.setSwitchLbl{font:600 10.5px var(--ca-font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--ca-text-3)}
.defGrid.is-off{opacity:.42;pointer-events:none}
@media(max-width:700px){.pField select{min-height:44px}}
@media(max-width:700px){.bgNum{min-height:44px;font-size:16px;padding:9px 11px}}
@media(max-width:700px){.edRow input,.edRow select{min-height:44px;font-size:16px}}

/* -- Stage 102: tab bars on the reference segmented grammar -- */
.tabBtn.is-on{background:#FFFFFF;color:#0B0B0D;font-weight:650}
.tabBtn:hover:not(.is-on){color:var(--ca-text-1)}
@media(max-width:700px){.tabBar{display:flex;width:100%}.tabBtn{flex:1;min-height:38px}}
@media(max-width:700px){#pfRoot .tabBtn{min-height:38px}}

/* -- Stage 103: dashboard insights become one rotating block -- */
.insRot{grid-template-columns:1fr!important}
.insRot > .insCard{display:none}
.insRot > .insCard.is-cur{display:flex}
.insNav{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.insNavBtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--ca-text-2);border-radius:999px;width:24px;height:24px;line-height:1;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.insNavBtn:hover{color:var(--ca-text-1);border-color:rgba(255,255,255,.18)}
.insNavPos{font:600 10.5px var(--ca-font-data);letter-spacing:.1em;color:var(--ca-text-3);min-width:52px;text-align:center}

/* -- Stage 106: research canon — even column counts at every breakpoint -- */
@media(max-width:900px){.kpiGrid,#pfKpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpiGrid > .kpi:nth-child(3n),#pfKpis > .kpi:nth-child(3n){border-right:1px solid rgba(255,255,255,.055)}
.kpiGrid > .kpi:nth-child(2n),#pfKpis > .kpi:nth-child(2n){border-right:0}
.kpiGrid > .kpi:nth-last-child(-n+3),#pfKpis > .kpi:nth-last-child(-n+3){border-bottom:1px solid rgba(255,255,255,.055)}
.kpiGrid > .kpi:nth-last-child(-n+2),#pfKpis > .kpi:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:560px){.kpiGrid,#pfKpis{grid-template-columns:1fr}
.kpiGrid > .kpi,#pfKpis > .kpi{border-right:0;border-bottom:1px solid rgba(255,255,255,.055)}
.kpiGrid > .kpi:last-child,#pfKpis > .kpi:last-child{border-bottom:0}}

/* -- Stage 107: research canon — groups read as divided blocks, sections by rhythm -- */
.bgGroup + .bgGroup{margin-top:-2px}
.bgGrpHead{border-bottom:1px solid rgba(255,255,255,.055)}

/* -- Stage 108: Settings on the research canon — compact grouped sections -- */
.setCard{padding:12px 14px;border-radius:12px;margin-bottom:8px}
.setCard .ca-section-head{margin:0 0 8px}
.setCard .ca-section-head h2{font-size:14px;font-weight:700;letter-spacing:-.005em}
.setFine{font-size:11.5px;line-height:1.5;color:var(--ca-text-3);margin:0 0 8px}
.setRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.setRow + .setRow{margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05)}
.setMsg{margin-top:8px;font-size:11.5px}
.defGrid{gap:8px}
.setCard .ca-btn{min-height:32px}
@media(max-width:700px){.setCard .ca-btn{min-height:44px}}

/* -- Stage 109: holdings table on the research canon (column priority + Carbon row spec) -- */
#holdTbl .modTbl td{padding:6px 12px}
#holdTbl .modTbl th,#holdTbl .modTbl td{white-space:nowrap}
#holdTbl .modTbl tbody tr{height:32px}
#holdTbl .modTbl th:first-child,#holdTbl .modTbl td:first-child{text-align:left;white-space:normal}
/* priority hiding: drop the lowest-value columns from the right as width shrinks,
   always keeping Holding, Manual value, Gain/loss, Weight and Actions */
/* s110 column-priority hiding, remapped in lockstep with the canon column order:
   1 Holding · 2 Qty · 3 Price · 4 Market value · 5 Cost basis · 6 Return $ · 7 Return % ·
   8 Weight · 9 Class · 10 Target % · 11 Drift · 12 Est. dividend · 13 Actions
   Drops from the right by value, never by position. Holding, Market value, Return $, Weight
   and Actions always survive — "Name and Market Value are top priority" (build sheet). */
@media(max-width:1400px){#holdTbl .modTbl th:nth-child(12),#holdTbl .modTbl td:nth-child(12){display:none}}
@media(max-width:1320px){#holdTbl .modTbl th:nth-child(11),#holdTbl .modTbl td:nth-child(11){display:none}}
@media(max-width:1240px){#holdTbl .modTbl th:nth-child(10),#holdTbl .modTbl td:nth-child(10){display:none}}
@media(max-width:1160px){#holdTbl .modTbl th:nth-child(9),#holdTbl .modTbl td:nth-child(9){display:none}}
@media(max-width:1080px){#holdTbl .modTbl th:nth-child(5),#holdTbl .modTbl td:nth-child(5){display:none}}
@media(max-width:980px){#holdTbl .modTbl th:nth-child(3),#holdTbl .modTbl td:nth-child(3){display:none}}
@media(max-width:880px){#holdTbl .modTbl th:nth-child(2),#holdTbl .modTbl td:nth-child(2){display:none}}
@media(max-width:780px){#holdTbl .modTbl th:nth-child(7),#holdTbl .modTbl td:nth-child(7){display:none}}
@media(max-width:700px){#holdTbl .modTbl tbody tr{height:auto}#holdTbl .modTbl td{padding:9px 12px}}

/* ---- s116: Holdings Basic / Advanced ------------------------------------------------------
   Mirrors the Allocator's modeswitch so the two pages teach the same gesture. Basic exposes three
   inputs (shares, price paid, price now); Advanced keeps the full thirteen-column canon table. */
.modeswitch{display:flex;gap:4px;background:var(--ca-deep);border:var(--ca-line);border-radius:999px;padding:4px;width:fit-content}
.modeswitch button{background:none;border:0;color:var(--ca-text-3);font-family:var(--ca-font-data);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;cursor:pointer;border-radius:999px;transition:background .18s ease,color .18s ease}
.modeswitch button:hover{color:var(--ca-text-1)}
.modeswitch button.on{background:var(--ca-text-1);color:var(--ca-bg);font-weight:600}
.modeswitch button:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
.pfModeNote{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--ca-text-3);max-width:74ch}
/* the "i" affordance. Empty textContent on purpose so table-header assertions still read the
   plain column name; the accessible name comes from aria-label. */
.infoDot{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--ca-text-3);font-family:var(--ca-font-data);font-size:9px;line-height:1;cursor:help;vertical-align:middle;transition:border-color .15s ease,color .15s ease}
.infoDot::before{content:'i'}
.infoDot:hover,.infoDot:focus-visible{border-color:var(--ca-accent);color:var(--ca-text-1)}
.infoDot:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
/* WCAG 2.2 target size: the 15px dot carries a 24px hit area via a transparent pseudo-element. */
.infoDot::after{content:'';position:absolute;width:24px;height:24px;margin:-4.5px}
.infoDot{position:relative}
.pfTip{position:fixed;z-index:60;background:var(--ca-card);border:var(--ca-line);border-radius:10px;padding:9px 11px;font-size:11.5px;line-height:1.5;color:var(--ca-text-2);box-shadow:0 10px 28px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .14s ease}
.pfTip.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.modeswitch button,.infoDot,.pfTip{transition:none}}
@media(max-width:700px){.modeswitch button{padding:10px 16px;min-height:44px}.infoDot{width:20px;height:20px;font-size:11px}}

/* ---- s122 portfolio details ---------------------------------------------------------------
   Six cells fill the 3 -> 2 -> 1 grid exactly. Two carry a share bar so a proportional figure
   reads before it is parsed, and the unit is de-emphasised so the number itself carries weight. */
.kpiMeter{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:9px 0 2px}
.kpiMeter i{display:block;height:100%;border-radius:999px}
.kpiUnit{font-size:.52em;font-weight:500;letter-spacing:.06em;color:var(--ca-text-3);margin-left:3px}
/* the history card carries no chart until a second snapshot exists — do not reserve chart height */
/* s127: only collapse when there is genuinely nothing to draw */
.pfHistCard.is-empty #pfHistChart:empty{min-height:0}
.emptyNote--tight{margin:2px 0 0;padding:0;font-size:12px;line-height:1.55;color:var(--ca-text-3)}
@media(prefers-reduced-motion:reduce){.kpiMeter i{transition:none}}

/* ---- s127: By asset class, relocated into the short left column -----------------------------
   .pfRefZone is align-items:start, so the narrow left column ended after two cards while the
   holdings list ran long beside it — that dead space is where this now lives. Sized for a
   300-360px column: smaller donut, legend as hairline rows rather than a wrapping chip list. */
.pfAllocCard .donutWrap{display:flex;justify-content:center;padding:6px 0 2px}
.pfAllocCard .donutWrap svg{width:150px;height:150px}
.pfAllocCard .donutLegend{display:block;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055)}
.pfAllocCard .donutLegend .row{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 0;font-size:12px;border-top:1px solid rgba(255,255,255,.045)}
.pfAllocCard .donutLegend .row:first-child{border-top:0}
.pfAllocCard .donutLegend .row i{width:9px;height:9px;border-radius:50%;display:block}
.pfAllocCard .donutLegend .row b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ca-text-1);display:flex;align-items:baseline;gap:8px}
.pfAllocCard .donutLegend .row b em{font-style:normal;font-weight:400;font-size:11px;color:var(--ca-text-3);min-width:44px;text-align:right}
.pfAllocCard .donutLegend .row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ca-text-2)}
@media(max-width:1100px){.pfAllocCard .donutWrap svg{width:170px;height:170px}}

/* s127: the one-snapshot state. The card previously rendered nothing until a second day existed,
   which read as a broken chart rather than a chart waiting for data. */
.pfSeedChart{width:100%;height:120px;display:block}
.pfSeedNote{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.pfSeedNote b{font-family:var(--ca-font-data);font-variant-numeric:tabular-nums;font-size:15px;color:var(--ca-text-1)}
.pfSeedNote span{font-size:11.5px;color:var(--ca-text-3)}

/* s132: the editor obeys the Basic/Advanced switch. Hidden, not disabled — a disabled field still
   occupies the form and still reads as something the user is expected to deal with. */
.hPanel.is-basic .pField[data-adv]{display:none}
.hModeNote{margin:0 0 14px;font-size:11.5px;line-height:1.55;color:var(--ca-text-3)}
.hModeNote:empty{display:none}

/* s136: dimension switcher on the Allocation tab. Asset class and sector are orthogonal axes —
   a holding has both — so they get a switcher rather than being crammed into one dropdown. */
.allocDim{display:flex;gap:4px;background:var(--ca-deep);border:var(--ca-line);border-radius:999px;padding:3px}
.allocDim button{background:none;border:0;color:var(--ca-text-3);font-family:var(--ca-font-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease}
.allocDim button:hover{color:var(--ca-text-1)}
.allocDim button.on{background:var(--ca-text-1);color:var(--ca-bg);font-weight:600}
.allocDim button:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
@media(prefers-reduced-motion:reduce){.allocDim button{transition:none}}

/* ---- s139 BROKERAGES -------------------------------------------------------------------------
   Repainted from the source design's brand colours (neon green, orange, hot pink, red) onto the
   site's purple-anchored institutional ramp. Each card carries ONE accent via --bk, used for the
   rule, the name dot and the button — so the page reads as one family rather than six logos. */
.bkChips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.bkChips__l{font-family:var(--ca-font-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ca-text-3);margin-right:4px}
.bkGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bkCard{position:relative;display:flex;flex-direction:column;padding:20px 22px 22px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.01) 42%,rgba(255,255,255,0) 100%),var(--ca-card);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px -16px rgba(0,0,0,.85);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease}
.bkCard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bk);opacity:.85}
.bkCard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14)}
.bkCard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.bkCard__top h2{display:flex;align-items:center;gap:9px;margin:0;font-size:18px;letter-spacing:-.01em}
.bkCard__top h2 i{width:9px;height:9px;border-radius:50%;background:var(--bk);flex:none}
.bkTag{font-family:var(--ca-font-data);font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--bk);color:var(--bk);white-space:nowrap}
.bkLine{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--ca-text-2)}
.bkList{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.bkList li{position:relative;padding-left:22px;font-size:12.5px;line-height:1.55;color:var(--ca-text-2)}
.bkList li::before{content:'';position:absolute;left:4px;top:.5em;width:7px;height:7px;border-radius:2px;border:1.5px solid var(--bk);border-top:0;border-right:0;transform:rotate(-45deg) translateY(-2px)}
.bkGo{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:12px;
  background:var(--bk);color:#fff;text-decoration:none;font-weight:600;font-size:13.5px;transition:filter .18s ease}
.bkGo:hover{filter:brightness(1.12)}
.bkGo:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
.bkNotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.bkNotes p{margin:0 0 10px;font-size:12px;line-height:1.65;color:var(--ca-text-3)}
.bkNotes p:last-child{margin-bottom:0}
@media(max-width:900px){.bkGrid,.bkNotes{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.bkCard,.bkGo{transition:none}.bkCard:hover{transform:none}}

/* s142: category autofill chips in the budget settings drawer. Setup friction — typing a name
   and picking an emoji for every category — is the named reason budget apps lose users during
   onboarding. Chips disappear once used, so the row shrinks as the budget fills in. */
.bgSuggest{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.bgSuggest__l{font-family:var(--ca-font-data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ca-text-3);margin-right:2px}
.bgSuggestChip{background:var(--ca-deep);border:1px dashed rgba(255,255,255,.16);border-radius:999px;color:var(--ca-text-2);font:inherit;font-size:12px;padding:6px 11px;cursor:pointer;min-height:32px;transition:border-color .16s ease,color .16s ease,background .16s ease}
.bgSuggestChip:hover{border-style:solid;border-color:var(--ca-accent);color:var(--ca-text-1);background:rgba(99,91,255,.08)}
.bgSuggestChip:focus-visible{outline:none;box-shadow:var(--ca-focus-ring)}
@media(max-width:700px){.bgSuggestChip{min-height:44px}}
@media(prefers-reduced-motion:reduce){.bgSuggestChip{transition:none}}

/* s146: dashboard preview banner. Same role as the Budget page's "Sample month" strip — sample
   figures are fine, unlabelled sample figures are not. */
.ovPreview{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border-radius:12px;
  background:rgba(99,91,255,.09);border:1px solid rgba(99,91,255,.32);font-size:13px;line-height:1.6;color:var(--ca-text-2)}
.ovPreview b{color:var(--ca-text-1)}
.ovPreview[hidden]{display:none}
.ovPreview__go{margin-left:auto;white-space:nowrap;color:var(--ca-accent);text-decoration:none;font-weight:600}
.ovPreview__go:hover{text-decoration:underline}

/* ── s151 dashboard rebuild ─────────────────────────────────────────────────
   Goal panel and the source-provenance table. The table is the page explaining
   where each figure came from, so it is styled as reference material — quiet,
   monospaced keys, a status dot that reads on/off without relying on colour
   alone (the dot is paired with its status sentence). */
.ovGoalRow{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
/* s152: 22px poured '$158,003 of $2,000,000' off the 280px rail \u2014 owner-reported. 18px + wrap. */
.ovGoalRow b{font-family:var(--ca-font-data);font-size:18px;line-height:1.1;letter-spacing:-.01em}
.ovGoalPct{margin-top:6px;font-size:12px;color:var(--ca-text-dim)}
.ovSrcCard{margin-top:12px}
.ovSrcTbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ovSrcTbl th{text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ca-text-dim);padding:0 10px 7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ovSrcTbl td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top;color:var(--ca-text-dim)}
.ovSrcTbl tr:last-child td{border-bottom:0}
.ovSrcTbl td b{color:var(--ca-text)}
.ovSrcTbl code{font-family:var(--ca-font-data);font-size:11.5px;color:var(--ca-text-dim);background:rgba(255,255,255,.04);border-radius:4px;padding:1px 5px}
.ovSrcGo{font-size:11px;color:var(--ca-accent);text-decoration:none;white-space:nowrap}
.ovSrcGo:hover{text-decoration:underline}
.ovSrcDot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
.ovSrcDot.is-on{background:var(--ca-accent)}
.ovSrcDot.is-off{background:transparent;border:1px solid rgba(255,255,255,.28)}
@media (max-width:700px){
  .ovSrcTbl,.ovSrcTbl tbody{display:block;width:100%}
  .ovSrcTbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ovSrcTbl tr{display:block;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .ovSrcTbl td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0}
  .ovSrcTbl td::before{content:attr(data-label);color:var(--ca-text-dim);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
}
.ovCatList{margin:10px 0 4px;border-top:1px solid rgba(255,255,255,.06);padding-top:8px}
.ovCatRow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px;color:var(--ca-text-dim)}
.ovCatRow b{font-family:var(--ca-font-data);color:var(--ca-text)}

/* ── s152 dashboard additions ───────────────────────────────────────────────
   Income-vs-spending legend, net-worth composition strip, KPI delta chips,
   and the goal-card overflow fix the owner reported (letters pouring off the
   block): the value drops to 18px and the row wraps instead of clipping. */
.ovLegend{display:flex;gap:16px;align-items:center;margin-top:8px;font-size:11.5px;color:var(--ca-text-dim);flex-wrap:wrap}
.ovLegDot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.ovLegSub{margin-left:auto;font-size:11px}
.ovCompo{margin-top:12px;border-top:1px solid rgba(255,255,255,.06);padding-top:10px}
.ovCompoHead{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ca-text-dim);margin-bottom:7px}
.ovCompoRow{display:flex;align-items:center;gap:10px;padding:3px 0;min-width:0}
.ovCompoLbl{flex:0 0 76px;font-size:12.5px;color:var(--ca-text-dim)}
.ovCompoTrack{flex:1 1 auto;height:6px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden;min-width:0}
.ovCompoBar{display:block;height:100%;border-radius:3px}
.ovCompoVal{flex:0 0 auto;font-family:var(--ca-font-data);font-size:12.5px}
.ovKpi__chip{display:block;font-size:11px;margin-top:3px;color:var(--ca-text-dim)}
.ovKpi__chip b{font-family:var(--ca-font-data);font-weight:600}
.ovKpi{min-width:0}
.ovKpi__v{overflow-wrap:anywhere}

/* ── s153 recent-changes feed ── */
.ovFeedRow{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);min-width:0}
.ovFeedRow:last-child{border-bottom:0}
.ovFeedMsg{font-size:12.5px;color:var(--ca-text);min-width:0;overflow-wrap:anywhere}
.ovFeedTime{font-family:var(--ca-font-data);font-size:10.5px;color:var(--ca-text-dim);white-space:nowrap;flex:0 0 auto}

/* ── s154 positions-table contract ── */
.pfUnnamed{color:var(--ca-text-3);font-style:italic;font-weight:400}
.modTbl tfoot td{border-top:1px solid rgba(255,255,255,.14);font-weight:600;white-space:nowrap;padding-top:9px}
.pfTotRow td{border-top:1px solid rgba(255,255,255,.14);font-weight:600;padding-top:9px}
.tblWrap .pfCell{min-width:98px;width:100%;box-sizing:border-box}

/* ── s154: on narrow screens the 14-column positions table stays a TABLE inside its scrolling
   wrapper (every brokerage does this) — the stacked-card pattern that serves 5-column tables
   cannot hold this one, and was the source of the 10px page bleed the layout battery caught. */
@media (max-width:700px){
  #holdTbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #holdTbl table.tcard{display:table;width:max-content;min-width:100%}
  #holdTbl .tcard thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  #holdTbl .tcard tr{display:table-row;border:0;padding:0;margin:0}
  #holdTbl .tcard td,#holdTbl .tcard th{display:table-cell;width:auto;white-space:nowrap}
  #holdTbl .tcard td::before{content:none}
}

/* s154: five tabs at min-content ran 392px wide on a 390px phone — the last body-level bleed the
   layout battery found. The bar scrolls its own overflow like every mobile tab strip. */
@media (max-width:700px){.tabBar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabBar::-webkit-scrollbar{display:none}}

/* s154 shell invariant, battery-enforced: the app shell never scrolls horizontally — regions that
   need width (the positions table, the tab strip) own their own overflow. Declared at the main
   region so no stray descendant can ever put a horizontal scrollbar on the page itself. */
.ca-main{overflow-x:clip}