/* The Richest Man in Heaven : Plus look, rev 2 patch. A premium layer over the Current App.
   Rules: every visual rule is scoped body.plus:not(.classic), so Classic Look is the untouched Current App.
   Only the toggle button, the badge and the sky layer shell live outside that scope.
   This file holds tokens, AA ink, type floor, balance and the below-the-fold details. The sky, glass, Hero Window and witnesses art live in x-app-premium.css.
   Plus keeps the Current App's geometry (Hero Window, columns, stacking order, no wrapper spans). Orphans are handled with text-wrap. The only layout changes are even-row column counts on the Impact and Streaks tiles and a two-row Overview title bar at 821-919 px, all in x-app-premium.css. */

/* Opaque copies of the surface tokens, so modals and sidebar cards can stay solid while the page goes to glass. */
html{--card-op:var(--card);--side-op:var(--side);--canvas-op:var(--canvas)}
/* Motion plan: two curves only. Nothing linear, nothing bouncing. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* The shell sits above the sky layer in both looks, so fading the layer never flashes over content. */
body.plus .shell{position:relative;z-index:1}

/* ================= Glass fills (Plus only): art values, not a mix of the Current App tokens ================= */
html[data-theme="dark"] body.plus:not(.classic){--card:rgba(19,31,60,.64);--row-hover:rgba(19,31,60,.45);--hero-bg:transparent}
html[data-theme="light"] body.plus:not(.classic){--card:rgba(255,252,244,.72);--row-hover:rgba(255,246,220,.70);--hero-bg:transparent}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body.plus:not(.classic){--side:color-mix(in srgb,var(--side-op) 66%,transparent)}
  /* Surfaces that must stay solid: modals, form fields, toasts, and the cards that live inside the sidebar. */
  body.plus:not(.classic) :is(.modal-wrap,.modal-wrap.sheet .modal,.modal-wrap.tall .modal-head,.sheet-foot,.toggle,.hs-range,aside .rail,.toast,input,select,textarea,.seg,.live,.gauge){--card:var(--card-op)}
}
/* Readable secondary ink on glass (the Current App's mid-gray is below 4.5:1 once the card is see-through). */
html[data-theme="light"] body.plus:not(.classic){--ink-2:#2D3649;--ink-3:#363F53;--gold:#6F500B;--gold-2:#85600F;--btn-bg:#6F500B;--btn-hover:#5A410A;--sub-accent:#22365C;--gold-soft:#F0E4C6}
/* Night only: the two small gold labels that sat at 4.2 to 4.4:1 over the warm backdrop (11% marker, hero dollar sign) take the lighter gold */
html[data-theme="dark"] body.plus:not(.classic) :is(.gauge .tl.above,.card.hero .bal sup){color:var(--gold-2)}
html[data-theme="dark"] body.plus:not(.classic){--ink-2:#E6EAF4;--ink-3:#E1E6F2}
/* Page subtitles sit straight on the lit sky (no card), so they take the brightest ink. */
html[data-theme="dark"] body.plus:not(.classic) :is(.topbar .asof,.sub-hd .sub-cap){color:#EEF1F8}
/* Day sidebar: the Current App's pale-blue ink on steel blue is below 4.5:1, so Plus deepens the glass and lifts the ink. */
@supports (color:color-mix(in srgb,red 50%,blue)){
  html[data-theme="light"] body.plus:not(.classic) aside{--side:color-mix(in srgb,#2F4A74 93%,transparent);--ink-2:#E9F0FA;--ink-3:#D3DFF1}
}
/* AA on the sidebar glass and on the Scripture movement titles (Plus only; Classic keeps the Current App colors). */
html[data-theme="light"] body.plus:not(.classic) :is(aside .brand .wm .g){color:#F0D58A}
@supports (color:color-mix(in srgb,red 50%,blue)){
  html[data-theme="light"] body.plus:not(.classic) .movement .mv-hd h2{color:color-mix(in srgb,var(--pane-l) 48%,#000)}
  html[data-theme="dark"] body.plus:not(.classic) .movement .mv-hd h2{color:color-mix(in srgb,var(--pane-d) 55%,#fff)}
  html[data-theme="dark"] body.plus:not(.classic) .w-nm{color:color-mix(in srgb,var(--pane-d) 50%,#fff)}
  html[data-theme="dark"] body.plus:not(.classic) .sv-r{color:color-mix(in srgb,var(--accent-warm) 78%,#fff)}
}
html[data-theme="light"] body.plus:not(.classic) aside .rail{--ink:#16233F;--ink-2:#3F485B;--ink-3:#566074}
/* Words that sit straight on the sky (no card behind them) get a darker ink by day. */
html[data-theme="light"] body.plus:not(.classic) .asof{color:#2A3956}
html[data-theme="light"] body.plus:not(.classic) footer,html[data-theme="light"] body.plus:not(.classic) footer :is(a,.muted){color:#16233F}
body.plus:not(.classic) footer{text-shadow:0 0 6px var(--card),0 0 14px var(--card),0 0 22px var(--card)}
html[data-theme="light"] body.plus:not(.classic) .topbar h1{color:#101B33}

/* ================= Eternity chart ================= */
/* Chart labels hold 12 px on screen at every width (plus.js sets --k from the drawn width); the verse holds 13 px. */
body.plus:not(.classic) .chart :is(.axis,.axis-g){font-size:calc(12px*var(--k,1))}
body.plus:not(.classic) .chart .vs{font-size:calc(13px*var(--k,1));transform:translateY(calc(var(--k,1)*9.1px - 5px))}
/* The scaled verse and its reference drop with the label size, so they clear the dotted line and the gridline above them. */
body.plus:not(.classic) .chart text.axis[y="128"]{transform:translateY(calc(var(--k,1)*9.1px - 5px + max(var(--k,1)*12.8px - 16px,0px)))}
body.plus:not(.classic) .chart .hist{filter:url(#glowF)}
body.plus:not(.classic) .chart .mark{filter:url(#glowF)}
body.plus:not(.classic) .chart .proj{opacity:.7}
/* The end marker blooms: one soft ring that grows and fades, forever slow. */
body.plus:not(.classic) .chart .mark-ring{transform-box:fill-box;transform-origin:center;animation:none}
@keyframes plus-ring{0%{transform:scale(1);stroke-opacity:.6}100%{transform:scale(1.6);stroke-opacity:0}}

/* ================= KPIs: needle sweep and crown shine ================= */
body.plus:not(.classic) .meter{overflow:visible}
body.plus:not(.classic) .meter>div{position:relative;border-radius:3px;transition:width 1.2s var(--ease-out)}
body.plus:not(.classic) .meter>div::after{content:"";position:absolute;right:-1px;top:-4px;bottom:-4px;width:2px;border-radius:2px;background:var(--gold-2);box-shadow:0 0 8px var(--gold)}
body.plus:not(.classic) .kpi .s img.crown-mk{animation:plus-crown .9s var(--ease-io) 1.3s 1}
@keyframes plus-crown{0%,100%{filter:drop-shadow(0 0 0 rgba(226,192,105,0))}50%{filter:drop-shadow(0 0 5px rgba(226,192,105,.95))}}

/* ================= Route change: cross-fade with a slight lift (280 ms in all) ================= */
html.vt #view{view-transition-name:plus-view}
html.vt::view-transition{pointer-events:none}
html.vt::view-transition-old(root),html.vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt::view-transition-old(plus-view){animation:plus-vt-out .14s var(--ease-io) both}
html.vt::view-transition-new(plus-view){animation:plus-vt-in .28s var(--ease-out) both}
@keyframes plus-vt-out{to{opacity:0}}
@keyframes plus-vt-in{from{opacity:0;transform:translateY(8px)}}

/* ================= Brand block position ================= */
body.plus aside .brand{position:relative}


/* Type floor in Plus: body text 14 px, labels 12 px (plus.js marks the elements; Classic ignores the mark). Font size only. */
body.plus:not(.classic) [data-pf="12"]{font-size:12px!important}
body.plus:not(.classic) [data-pf="14"]{font-size:14px!important}
/* The hero's footnote line is one family: both halves at 12 px. */
body.plus:not(.classic) .card.hero .foot>span{font-size:12px!important}

/* ================= Balance (Plus only): CSS wrapping, no wrapper spans ================= */
body.plus:not(.classic) :is(h1,h2,h3,.lbl,.w-hd,.hd,.c-hd,.sub-hd){text-wrap:balance}
body.plus:not(.classic) :is(p,li,dd,summary,blockquote,figcaption,.lede,.story,.sub,.cap,.c-sub,.w-sub){text-wrap:balance}
body.plus:not(.classic) :is(footer,button,.btn,.btn-gold,.chip,.pill){text-wrap:balance}


/* ================= Below the fold: depth, light and motion (Plus only; Classic never sees any of it) =================
   plus.js feeds the styles three things and nothing else: --fill and --share (numbers read from the page), pathLength on the sparklines,
   and a .lit class the first time a card scrolls into view. Every state below rests in its finished look, so a screenshot with no scrolling is complete. */
html[data-theme="light"] body.plus:not(.classic){--pg:176,128,28;--pw:255,255,255;--sheen:.62;--bloom:.2}
html[data-theme="dark"] body.plus:not(.classic){--pg:226,192,105;--pw:255,236,190;--sheen:.07;--bloom:.18}

/* Every card: a gold hairline across the top, a soft sheen under it, and a one-time edge light when it arrives. */
body.plus:not(.classic) .view .card:not(.hero):not(.witness){position:relative}
body.plus:not(.classic) .view .card:not(.hero):not(.witness)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(var(--pg),.6) 50%,transparent 96%) top/100% 1px no-repeat,linear-gradient(180deg,rgba(var(--pw),var(--sheen)) 0,rgba(var(--pw),0) 70px)}
body.plus:not(.classic) .view .card:not(.hero):not(.witness)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(var(--pg),0)}
body.plus:not(.classic) .view .card:not(.hero):not(.witness).lit::after{animation:plus-edge 1.8s var(--ease-out) 1 both}
@keyframes plus-edge{
  0%{box-shadow:inset 0 0 0 1px rgba(var(--pg),0),inset 0 0 0 0 rgba(var(--pg),0)}
  28%{box-shadow:inset 0 0 0 1px rgba(var(--pg),.7),inset 0 0 30px 0 rgba(var(--pg),.16)}
  100%{box-shadow:inset 0 0 0 1px rgba(var(--pg),0),inset 0 0 0 0 rgba(var(--pg),0)}}

/* The Eleven Percent Line: a bloom under the knob, a shimmer along the fill, a halo that breathes on the knob. */
body.plus:not(.classic) .view .card:not(.hero):not(.witness).eleven::before{background:linear-gradient(90deg,transparent 4%,rgba(var(--pg),.6) 50%,transparent 96%) top/100% 1px no-repeat,
  radial-gradient(46% 120% at var(--fill,80%) 64%,rgba(var(--pg),var(--bloom)) 0,rgba(var(--pg),0) 72%),
  linear-gradient(180deg,rgba(var(--pw),var(--sheen)) 0,rgba(var(--pw),0) 70px)}
body.plus:not(.classic) .gauge .fill{overflow:hidden;box-shadow:0 0 14px rgba(var(--pg),.55)}
body.plus:not(.classic) .gauge .fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-110%);animation:none}
@keyframes plus-shim{0%{transform:translateX(-110%)}38%,100%{transform:translateX(110%)}}
body.plus:not(.classic) .gauge .knob::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(var(--pg),.85);opacity:0;animation:none}
@keyframes plus-halo{0%{transform:scale(.8);opacity:.85}100%{transform:scale(2.7);opacity:0}}
html[data-theme="dark"] body.plus:not(.classic) .eleven .erate .n{text-shadow:0 0 18px rgba(var(--pg),.5)}

/* Giving Positions: a share-of-total bar behind every fund, a gold rule under the header, sparklines that draw themselves. */
body.plus:not(.classic) .positions-card tbody tr{background:
  linear-gradient(90deg,rgba(var(--pg),.35),rgba(var(--pg),.85)) left bottom/calc(var(--share,0)*1%) 2px no-repeat,
  linear-gradient(90deg,rgba(var(--pg),.17),rgba(var(--pg),0)) left top/calc(var(--share,0)*1% + 10%) 100% no-repeat}
body.plus:not(.classic) .positions-card.lit tbody tr{animation:plus-bar 1.3s var(--ease-out) both}
body.plus:not(.classic) .positions-card.lit tbody tr:nth-child(2){animation-delay:.12s}
body.plus:not(.classic) .positions-card.lit tbody tr:nth-child(3){animation-delay:.24s}
body.plus:not(.classic) .positions-card.lit tbody tr:nth-child(4){animation-delay:.36s}
@keyframes plus-bar{from{background-size:0 2px,0 100%}}
body.plus:not(.classic) .positions-card thead th{border-bottom-color:rgba(var(--pg),.55)}
body.plus:not(.classic) .positions-card .spark path{stroke-dasharray:1;stroke-dashoffset:0}
body.plus:not(.classic) .positions-card.lit .spark path{animation:plus-draw 1.7s var(--ease-out) .2s both}
@keyframes plus-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
html[data-theme="dark"] body.plus:not(.classic) .positions-card .spark path{filter:drop-shadow(0 0 3px rgba(var(--pg),.7))}

/* The Two Columns: a glow under the heaven side, a ring around the arrow, and a gold current that only ever runs to the right. */
body.plus:not(.classic) .ledger{position:relative}
body.plus:not(.classic) .ledger::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--pg),.9),transparent) 0 0/34% 100% no-repeat,linear-gradient(90deg,rgba(var(--pg),.12),rgba(var(--pg),.3),rgba(var(--pg),.12));
  animation:none}
@keyframes plus-flow{0%{background-position:0 0,0 0}100%{background-position:100% 0,0 0}}
body.plus:not(.classic) .ledger .side.e{position:relative;isolation:isolate}
body.plus:not(.classic) .ledger .side.e::before{content:"";position:absolute;inset:-8px -6px;z-index:-1;border-radius:16px;background:radial-gradient(closest-side,rgba(var(--pg),var(--bloom)),rgba(var(--pg),0));animation:none}
@keyframes plus-breathe{0%,100%{opacity:.55}50%{opacity:1}}
body.plus:not(.classic) .ledger .ar{display:grid;place-items:center;justify-self:center;width:30px;height:30px;padding-bottom:3px;font-size:20px;line-height:1;border-radius:50%;
  border:1px solid rgba(var(--pg),.65);background:rgba(var(--pg),.13);box-shadow:0 0 14px rgba(var(--pg),.38);animation:none}
@keyframes plus-nudge{0%,100%{transform:translateX(-1px)}50%{transform:translateX(2px)}}

/* Recent Activity: a gold spine through the dots, and the dots arrive down the line. */
body.plus:not(.classic) .feed{position:relative}
body.plus:not(.classic) .feed::before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:1px;transform-origin:top;
  background:linear-gradient(180deg,rgba(var(--pg),0),rgba(var(--pg),.7) 14%,rgba(var(--pg),.7) 86%,rgba(var(--pg),0))}
body.plus:not(.classic) .evt .dot{position:relative;z-index:1;box-shadow:0 0 0 3px rgba(var(--pg),.17),0 0 9px rgba(var(--pg),.5)}
body.plus:not(.classic) .evt .dot.m{box-shadow:0 0 0 3px rgba(var(--pg),.22)}
body.plus:not(.classic) .activity-card.lit .feed::before{animation:plus-spine 1s var(--ease-out) both}
@keyframes plus-spine{from{transform:scaleY(0)}}
body.plus:not(.classic) .activity-card.lit .evt .dot{animation:plus-pop .55s var(--ease-out) both}
body.plus:not(.classic) .activity-card.lit .evt:nth-child(1) .dot{animation-delay:.1s}
body.plus:not(.classic) .activity-card.lit .evt:nth-child(2) .dot{animation-delay:.22s}
body.plus:not(.classic) .activity-card.lit .evt:nth-child(3) .dot{animation-delay:.34s}
body.plus:not(.classic) .activity-card.lit .evt:nth-child(4) .dot{animation-delay:.46s}
body.plus:not(.classic) .activity-card.lit .evt:nth-child(5) .dot{animation-delay:.58s}
@keyframes plus-pop{from{transform:scale(0)}}

/* Fruit Reports: each report gets a gold-ringed icon, a gradient hairline between reports, and a corner of light. */
body.plus:not(.classic) .view .card:not(.hero):not(.witness).fruit::before{background:linear-gradient(90deg,transparent 4%,rgba(var(--pg),.6) 50%,transparent 96%) top/100% 1px no-repeat,
  radial-gradient(60% 100% at 100% 0,rgba(var(--pg),var(--bloom)),rgba(var(--pg),0) 70%),
  linear-gradient(180deg,rgba(var(--pw),var(--sheen)) 0,rgba(var(--pw),0) 70px)}
body.plus:not(.classic) .fruit .fic{display:grid;place-items:center;width:30px;height:30px;margin-top:0;border-radius:50%;border:1px solid rgba(var(--pg),.6);background:rgba(var(--pg),.12);box-shadow:0 0 14px rgba(var(--pg),.32)}
body.plus:not(.classic) .fruit .frow{border-bottom:0;background:linear-gradient(90deg,transparent,rgba(var(--pg),.42) 22%,rgba(var(--pg),.42) 78%,transparent) bottom/100% 1px no-repeat}
body.plus:not(.classic) .fruit .frow:last-child{background:none}

/* The right-hand cards: a crown of light and a quotation mark behind the verse, a double ring on the portrait, round gold badges on the impact rows. */
body.plus:not(.classic) .view .card:not(.hero):not(.witness).scripture::before{content:"\201C";overflow:hidden;padding:2px 0 0 14px;font:italic 96px/1 var(--serif);color:rgba(var(--pg),.13);
  background:linear-gradient(90deg,transparent 4%,rgba(var(--pg),.6) 50%,transparent 96%) top/100% 1px no-repeat,
  radial-gradient(70% 80% at 50% 0,rgba(var(--pg),var(--bloom)),rgba(var(--pg),0) 72%),
  linear-gradient(180deg,rgba(var(--pw),var(--sheen)) 0,rgba(var(--pw),0) 70px)}
body.plus:not(.classic) .trey-av{box-shadow:0 0 0 3px rgba(var(--pg),.2),0 0 0 4.5px rgba(var(--pg),.55),0 0 18px rgba(var(--pg),.38)}
body.plus:not(.classic) .impact .ic{width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%}
html[data-theme="dark"] body.plus:not(.classic) .impact .n{text-shadow:0 0 14px rgba(var(--pg),.42)}

/* ================= Reduced motion: still premium, no movement ================= */
@media(prefers-reduced-motion:reduce){
  body.plus:not(.classic) .chart .mark-ring{animation:none}
  body.plus:not(.classic) .kpi .s img.crown-mk{animation:none}
  body.plus:not(.classic) .meter>div{transition:none}
  body.plus:not(.classic) .gauge .fill::after,body.plus:not(.classic) .gauge .knob::after{display:none}
  body.plus:not(.classic) .ledger::after,body.plus:not(.classic) .ledger .side.e::before,body.plus:not(.classic) .ledger .ar{animation:none}
  body.plus:not(.classic) .view .card:not(.hero):not(.witness).lit::after,body.plus:not(.classic) .positions-card.lit tbody tr,body.plus:not(.classic) .positions-card.lit .spark path,body.plus:not(.classic) .activity-card.lit .feed::before,body.plus:not(.classic) .activity-card.lit .evt .dot{animation:none}
  html.vt::view-transition-old(plus-view),html.vt::view-transition-new(plus-view){animation:none}
}

/* ================= Wave A S1: chart draw-in, label scrim, Day/Night control ================= */
/* The line draws itself on load; the projection and end marker fade in after it. */
body.plus:not(.classic) .chart .hist{stroke-dasharray:2400;stroke-dashoffset:2400;animation:plus-draw 1.6s var(--ease-out,ease-out) .15s forwards}
body.plus:not(.classic) .chart :is(.proj,.mark,.mark-ring){opacity:0;animation:plus-fade .6s ease-out 1.5s forwards}
@keyframes plus-draw{to{stroke-dashoffset:0}}
@keyframes plus-fade{to{opacity:1}}
body.plus:not(.classic) .chart .proj{animation-name:plus-fade-proj}
@keyframes plus-fade-proj{to{opacity:.7}}
/* Scrim: a soft card-colored wash behind the chart plus a halo on every label, so labels hold 4.5:1 over sky and glow. */
body.plus:not(.classic) .chart{background:color-mix(in srgb,var(--card) 78%,transparent);border-radius:8px}
body.plus:not(.classic) .chart :is(.axis,.axis-g,.vs){paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
body.plus:not(.classic) .chart .axis{fill:var(--ink-2)}
html[data-theme="light"] body.plus:not(.classic) .chart .axis-g,html[data-theme="light"] body.plus:not(.classic) .chart .vs{fill:#7A5410}
@media(prefers-reduced-motion:reduce){
  body.plus:not(.classic) .chart .hist{stroke-dashoffset:0;animation:none}
  body.plus:not(.classic) .chart :is(.proj,.mark,.mark-ring){opacity:1;animation:none}
  body.plus:not(.classic) .chart .proj{opacity:.7}
}
/* Day / Night control in the app header */

/* Round 2: on phones the hero chart gets a real scrim (the premium phone rule had replaced it), the verse note steps aside, and "$1,160,817" stays off the bright cloud. */
@media(max-width:743px),(max-width:820px) and (max-height:599px){
  html body.plus:not(.classic) .card.hero svg.chart{background:rgba(var(--xS),.6);border-radius:10px}
}
@media(max-width:600px){html body.plus:not(.classic) svg.chart :is(.vs,text.axis[y="128"]){display:none}}

/* Round 3: the top Day / Night control is the one switch on a desktop, so the sidebar copy goes. */