/* The Richest Man in Heaven : Plus look, "Above the Clouds" art layer (rev 2).
   Sky plates, frosted glass, the transparent Hero Window, the Cloud of Witnesses band art, and the motion that belongs to them.
   Every rule is scoped body.plus:not(.classic), so Classic Look is the untouched Current App. Loads after app-plus.css.
   Geometry is never changed here: only paint, light, and transform-only motion. */

/* ================= Tokens ================= */
body.plus:not(.classic){
  --pz-base:#0b1224;--glass-line:rgba(226,192,105,.16);--chrome:rgba(12,20,40,.92);
  --x-ink:#F4EFE2;--x-gold:#E2C069;--x-line:#E2C069;--x-mute:#D9D2C2;--gold-hi:#EBD08A;--xS:8,13,28;--leak:255,226,160;
  --bevc:255,226,160;--bev:.55;--x-shadow:0 1px 2px rgba(4,9,20,.5),0 10px 34px rgba(4,9,20,.42);
  background:var(--pz-base);
}
html[data-theme="light"] body.plus:not(.classic){
  --pz-base:#e8edf4;--glass-line:rgba(107,74,14,.14);--chrome:rgba(250,247,238,.92);
  --x-ink:#16233F;--x-gold:#6B4A0E;--x-line:#6E4E12;--x-mute:#2E3A55;--gold-hi:#6B4A0E;--xS:250,247,238;--leak:255,214,140;
  --bevc:255,255,255;--bev:.9;--x-shadow:0 1px 2px rgba(22,35,63,.08),0 8px 28px rgba(22,35,63,.12);
}
/* The page behind the page: overscroll and rubber-banding show sky color, never the Classic canvas. */
html:has(body.plus:not(.classic)){background:#0b1224}
html[data-theme="light"]:has(body.plus:not(.classic)){background:#e8edf4}

/* ================= Sky layer (plates are placed by x-app-premium.js) ================= */
#pz{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--pz-base);opacity:0;visibility:hidden;
  transition:opacity .38s var(--ease-io),visibility 0s .38s}
body.plus:not(.classic) #pz{opacity:1;visibility:visible;transition:opacity .6s var(--ease-io),visibility 0s}
/* The page color glides with the sky when Plus first appears, so the one hidden frame never shows a flat panel. */
body.plus.x-swap{transition:background-color .6s var(--ease-io)}
/* While a plate decodes (saved Plus visits), the sky is already its own colors: a stand-in gradient sampled from the plate, with the glow where the plate's glow will land. */
#pz[data-k="night-wide"]{background:radial-gradient(ellipse 46% 40% at var(--gx,60%) var(--gy,60%),#757069,rgba(117,112,105,0)),linear-gradient(#0c2138,#223851 25%,#67717b 55%,#8d715e 78%,#323543)}
#pz[data-k="night-tall"]{background:radial-gradient(ellipse 60% 30% at var(--gx,60%) var(--gy,60%),#c4a37d,rgba(196,163,125,0)),linear-gradient(#12263e,#30435b 25%,#6f747c 50%,#323f53 75%,#0f1f34)}
#pz[data-k="day-wide"]{background:radial-gradient(ellipse 46% 40% at var(--gx,60%) var(--gy,60%),#e6dac1,rgba(230,218,193,0)),linear-gradient(#95aec8,#bccedb 25%,#e4e6dd 50%,#d9ba98 75%,#8b8891)}
#pz[data-k="day-tall"]{background:radial-gradient(ellipse 60% 30% at var(--gx,60%) var(--gy,60%),#fbefd6,rgba(251,239,214,0)),linear-gradient(#bdd2e3,#dbe6e9 25%,#e0c9aa 50%,#9197a4 75%,#e0c1a4)}
#pz .pl{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-out);translate:0 var(--py,0px);transform-origin:var(--ox,50%) var(--oy,50%)}
#pz .pl.on{opacity:1}
#pz .pl.out{opacity:0}
#pz img{position:absolute;max-width:none;display:block;user-select:none}
#pz .gr{position:absolute;inset:0;background:url(../assets/x/app-premium-grain.png);opacity:.03}
#pz .vg{position:absolute;inset:0;background:radial-gradient(120% 90% at 60% 45%,transparent 55%,rgba(var(--xS),.35) 100%)}
html[data-theme="light"] #pz .vg{background:radial-gradient(120% 90% at 60% 45%,transparent 60%,rgba(var(--xS),.25) 100%)}
html[data-theme="light"] #pz::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(40,70,120,0),rgba(40,70,120,.18))}
/* The dolly: the plate settles from 4% closer over 2.4 s once Plus appears. */
#pz.x-settle .pl.on{animation:xap-dolly 2.4s var(--ease-out) 1 both}
@keyframes xap-dolly{from{scale:1.04}to{scale:1}}
body.plus:not(.classic) #app,body.plus:not(.classic) #auth{position:relative;z-index:1}

/* ================= Frosted glass ================= */
body.plus:not(.classic) :is(.card:not(.hero):not(.witness),.kpi){
  background:radial-gradient(ellipse 70% 90px at 0 0,rgba(var(--leak),.12),rgba(var(--leak),0)) no-repeat,var(--card);border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(var(--bevc),var(--bev)),inset 0 -18px 40px rgba(201,160,80,.06),var(--x-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  transition:background-color .6s var(--ease-io),border-color .6s var(--ease-io),box-shadow .24s var(--ease-out),transform .24s var(--ease-out)}
body.plus:not(.classic) :is(.sum,.impact-card,.badge,.ms,.step,.adm-row,.hero-card,.legacy){
  border-color:var(--glass-line);box-shadow:inset 0 1px 0 rgba(var(--bevc),var(--bev)),inset 0 -18px 40px rgba(201,160,80,.06),var(--x-shadow);
  transition:background-color .6s var(--ease-io),border-color .6s var(--ease-io),box-shadow .24s var(--ease-out),transform .24s var(--ease-out)}
body.plus:not(.classic) :is(.sum,.impact-card,.badge,.ms,.step,.adm-row,.hero-card,.legacy):not(.card *){-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
@media(hover:hover){
  body.plus:not(.classic) :is(.card:not(.hero):not(.witness),.kpi):hover{--bev:.8}   /* no lift on hover: tiles stay put */
  html[data-theme="light"] body.plus:not(.classic) :is(.card:not(.hero):not(.witness),.kpi):hover{--bev:1}
}
body.plus:not(.classic) aside{-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);transition:background-color .6s var(--ease-io),border-color .6s var(--ease-io)}
body.plus:not(.classic) :is(.m-topbar,.tabbar){background:var(--chrome);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* ================= Hero Window: no fill, one feathered pool behind the balance, halo-only type ================= */
body.plus:not(.classic) .card.hero{position:relative;isolation:isolate;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  background-image:radial-gradient(circle 260px at var(--mx,62%) var(--my,-30%),rgba(255,226,160,.08),rgba(255,226,160,0) 70%);background-repeat:no-repeat}
html[data-theme="light"] body.plus:not(.classic) .card.hero{background-image:radial-gradient(circle 260px at var(--mx,62%) var(--my,-30%),rgba(255,248,220,.22),rgba(255,248,220,0) 70%)}
body.plus:not(.classic) .card.hero::before{content:"";position:absolute;z-index:-1;left:-30px;top:-60px;width:560px;max-width:calc(100% + 60px);height:280px;pointer-events:none;
  background:radial-gradient(closest-side at 40% 50%,rgba(var(--xS),.42),rgba(var(--xS),.30) 45%,rgba(var(--xS),0) 100%)}
body.plus:not(.classic) .card.hero::after{content:"";position:absolute;z-index:-1;left:-15px;right:-15px;bottom:-36px;height:150px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--xS),.46) 0,rgba(var(--xS),.42) 58%,rgba(var(--xS),0) 100%)}
@media(max-width:640px){
  body.plus:not(.classic) .card.hero::before{left:-15px;max-width:calc(100% + 30px)}
}
@media(min-width:641px){
  body.plus:not(.classic) .card.hero::after{left:-14px;right:-14px;bottom:-40px;height:140px}
}
body.plus:not(.classic) .card.hero .bal{color:var(--x-ink);font-variant-numeric:tabular-nums}
body.plus:not(.classic) .card.hero .bal *{color:inherit}
body.plus:not(.classic) .card.hero .lbl,body.plus:not(.classic) .card.hero .lbl *{color:var(--gold-hi)}
body.plus:not(.classic) .card.hero .delta,body.plus:not(.classic) .card.hero .delta .up,body.plus:not(.classic) .card.hero .foot b{color:var(--x-gold)}
body.plus:not(.classic) .card.hero .delta .pct,body.plus:not(.classic) .card.hero .who{color:var(--x-mute)}
body.plus:not(.classic) .card.hero .foot{background:transparent;box-shadow:none;border-color:transparent;color:var(--x-ink)}
body.plus:not(.classic) .card.hero :is(.lbl,.bal,.delta,.who,.tabs button,.foot){text-shadow:0 0 1px rgba(var(--xS),1),0 0 2px rgba(var(--xS),1),0 0 4px rgba(var(--xS),.95),0 0 8px rgba(var(--xS),.9),0 0 18px rgba(var(--xS),.6)}
/* Day: a tight cream edge and one soft shoulder. The old 18 px ring read as a sticker glow around the balance. */
html[data-theme="light"] body.plus:not(.classic) .card.hero :is(.lbl,.bal,.delta,.who,.tabs button,.foot){text-shadow:0 0 1px rgba(var(--xS),.92),0 0 6px rgba(var(--xS),.55)}
body.plus:not(.classic) .card.hero .tabs{position:relative;background:transparent;border-bottom-color:transparent}
body.plus:not(.classic) .card.hero .tabs button{background:transparent;border-color:transparent;box-shadow:none;color:var(--x-ink);transition:color .24s var(--ease-out)}
body.plus:not(.classic) .card.hero .tabs button.on{color:var(--gold-hi);box-shadow:inset 0 -2px 0 var(--x-gold)}
/* The range underline slides to its tab (x-app-premium.js sets --ux and --uw); until it does, the tab's own underline stands in. */
body.plus:not(.classic) .card.hero .tabs.x-ul button.on{box-shadow:none}
body.plus:not(.classic) .card.hero .tabs::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--uw,0px);background:var(--x-gold);
  transform:translateX(var(--ux,0px));opacity:0;transition:transform var(--ut,.32s) var(--ease-out),width var(--ut,.32s) var(--ease-out),opacity .2s var(--ease-io);pointer-events:none}
body.plus:not(.classic) .card.hero .tabs.x-ul::after{opacity:1}
/* Chart labels: a 3 px sky-color edge plus one soft shadow, so a label sits in the sky instead of on a hard dark tag. */
body.plus:not(.classic) .card.hero svg.chart{filter:drop-shadow(0 0 1px rgba(var(--xS),.55)) drop-shadow(0 0 6px rgba(var(--xS),.55))}
body.plus:not(.classic) .card.hero svg.chart text{fill:var(--x-ink);paint-order:stroke;stroke:rgba(var(--xS),.75);stroke-width:3px;stroke-linejoin:round}
html[data-theme="light"] body.plus:not(.classic) .card.hero svg.chart text{stroke:rgba(var(--xS),.85)}
/* The end-point dot: the shared SVG glow filter clips to a 13 px square around the 9 px dot, which shows as a tile in Day. A CSS drop-shadow has no tile. */
body.plus:not(.classic) .card.hero svg.chart .mark{filter:drop-shadow(0 0 3px rgba(226,192,105,.8))}
html[data-theme="light"] body.plus:not(.classic) .card.hero svg.chart .mark{filter:drop-shadow(0 0 3px rgba(201,150,47,.6))}
body.plus:not(.classic) .card.hero svg.chart .axis-g{fill:var(--x-gold)}
body.plus:not(.classic) .card.hero svg.chart .hist{stroke:var(--x-line)}
body.plus:not(.classic) .card.hero svg.chart .proj{stroke:var(--x-gold)}
body.plus:not(.classic) .card.hero svg.chart .grid-line{stroke:transparent}
/* Glint: one diagonal gold light sweeps the window once, 1.4 s (plus.js adds the empty <i class="x-glint"> and removes it). */
body.plus:not(.classic) .card.hero>.x-glint{position:absolute;inset:-6px;z-index:2;overflow:hidden;border-radius:12px;pointer-events:none}
body.plus:not(.classic) .card.hero>.x-glint::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;
  background:linear-gradient(100deg,rgba(255,226,160,0) 0,rgba(255,226,160,.22) 34%,rgba(255,240,200,.62) 50%,rgba(255,226,160,.22) 66%,rgba(255,226,160,0) 100%);
  mix-blend-mode:screen;transform:translateX(-120%) skewX(-18deg);animation:xap-glint 1.4s var(--ease-io) 1 both}
html[data-theme="light"] body.plus:not(.classic) .card.hero>.x-glint::before{mix-blend-mode:normal;
  background:linear-gradient(100deg,rgba(255,214,140,0) 0,rgba(255,214,140,.26) 34%,rgba(255,236,176,.8) 50%,rgba(255,214,140,.26) 66%,rgba(255,214,140,0) 100%)}
@keyframes xap-glint{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}

/* ================= Cloud of Witnesses: the band becomes a painted scene ================= */
body.plus:not(.classic) #witnessBand{background:#0b1224 url(../assets/x/app-premium-witnesses-band.webp) var(--bx,50%) 55%/cover no-repeat;border-color:rgba(226,192,105,.28);
  box-shadow:0 10px 30px rgba(4,8,20,.28);position:relative;isolation:isolate;-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:560px){body.plus:not(.classic) #witnessBand{background-image:url(../assets/x/app-premium-witnesses-band-portrait.webp);background-position:50% 50%}}
body.plus:not(.classic) #witnessBand .cross{display:none}
body.plus:not(.classic) #witnessBand>*{position:relative;z-index:1}
body.plus:not(.classic) #witnessBand::before,body.plus:not(.classic) #witnessBand::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;opacity:.15;
  background:url(../assets/x/app-premium-witnesses-lightsA.webp) var(--bx,50%) 55%/cover no-repeat;animation:none;
  translate:var(--lx,0%) 0;
  -webkit-mask-image:radial-gradient(ellipse calc(var(--cw,160px)*.7) calc(var(--ch,16px)*1.4) at var(--cx,50%) var(--cy,50%),transparent 0,transparent 55%,#000 100%);
  mask-image:radial-gradient(ellipse calc(var(--cw,160px)*.7) calc(var(--ch,16px)*1.4) at var(--cx,50%) var(--cy,50%),transparent 0,transparent 55%,#000 100%)}
body.plus:not(.classic) #witnessBand::after{background-image:url(../assets/x/app-premium-witnesses-lightsB.webp);animation-delay:2.4s}
@media(max-width:560px){
  body.plus:not(.classic) #witnessBand::before{background-image:url(../assets/x/app-premium-witnesses-portrait-lightsA.webp);background-position:50% 50%}
  body.plus:not(.classic) #witnessBand::after{background-image:url(../assets/x/app-premium-witnesses-portrait-lightsB.webp);background-position:50% 50%}
}
@keyframes xap-tw{0%,100%{opacity:.15}50%{opacity:1}}
body.plus:not(.classic) #witnessBand.x-off::before,body.plus:not(.classic) #witnessBand.x-off::after{animation-play-state:paused}
body.plus:not(.classic) #witnessBand .w-hd::before{content:"";position:absolute;z-index:-1;left:-40px;top:-30px;right:-40px;bottom:-30px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(8,13,28,.62),rgba(8,13,28,.40) 55%,rgba(8,13,28,0))}
body.plus:not(.classic) #witnessBand .w-sub{position:relative;isolation:isolate}
body.plus:not(.classic) #witnessBand .w-sub::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;top:-40%;bottom:-40%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,12,28,.45),rgba(6,12,28,0))}
body.plus:not(.classic) #witnessBand .w-stage::before{content:"";position:absolute;z-index:-1;left:-24px;top:-30px;bottom:-40px;width:min(420px,calc(100% + 24px));pointer-events:none;
  background:radial-gradient(closest-side at 45% 50%,rgba(8,13,28,.68),rgba(8,13,28,.5) 60%,rgba(8,13,28,0))}
body.plus:not(.classic) #witnessBand,body.plus:not(.classic) #witnessBand *{color:#F4EFE2;text-shadow:0 0 1px rgba(8,13,28,1),0 0 3px rgba(8,13,28,.9),0 0 8px rgba(8,13,28,.8),0 0 18px rgba(8,13,28,.6)}
body.plus:not(.classic) #witnessBand .w-hd :first-child{color:#EBD08A}

/* ================= Motion that belongs to the page (all transform and opacity) ================= */
/* Cards below the first screen wait unseen until they scroll into view, then rise in (x-app-premium.js plays the rise). */
body.plus:not(.classic) .x-pre{opacity:0}
@media print{body.plus .x-pre{opacity:1!important}}

/* ================= Send It Ahead: the canvas lives for 1.2 s ================= */
.xap-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;mix-blend-mode:screen}

/* ================= Wrap balance and nav icon (Plus only, no geometry change) ================= */
body.plus:not(.classic) .card.hero .foot span,body.plus:not(.classic) .kpi .s,body.plus:not(.classic) .card.hero .who{text-wrap:balance}
/* text-wrap is inherited, so one rule on the view, the footer and the rail balances every caption, label, quote and Scripture line, not only paragraphs. */
body.plus:not(.classic) :is(#view,.app-foot,aside){text-wrap:balance}
/* The longer "Classic Look" label would touch the wordmark at 360 px: let the wordmark shrink a little on narrow phones. */
@media(max-width:380px){body.plus:not(.classic) .m-wm{font-size:clamp(13px,4vw,16px)}}
body.plus:not(.classic) aside nav a svg{flex:none}
body.plus:not(.classic) aside nav a,body.plus:not(.classic) .w-hd .w-sub{text-wrap:balance}

/* With the right rail (1121 px and up) the two footers used to sit on different centers; left-align both to the card edge so the page ends in one clean line. */
@media(min-width:1121px){body.plus:not(.classic) .app-foot{max-width:none;padding-left:0;padding-right:0;text-align:left}body.plus:not(.classic) .col-main>footer{text-align:left}}

/* The Positions table (14 px type) needs 636 px but its card is only 545-624 px wide from 821 to 1239 px, so the Since column scrolled out of sight. Tighter cell padding and a 64 px sparkline keep every column in view. */
@media(min-width:821px) and (max-width:1239px),(min-width:744px) and (min-height:600px) and (max-width:1239px){
  body.plus:not(.classic) .positions-card :is(th,td){padding-left:9px;padding-right:9px}
  body.plus:not(.classic) .positions-card :is(th,td):first-child{padding-left:16px}
  body.plus:not(.classic) .positions-card :is(th,td):last-child{padding-right:16px}
  body.plus:not(.classic) .positions-card .spark{width:64px;height:auto}
}
/* ================= Even rows (Plus only): no 5+3, 4+2 or 5+1 tile rows, no lone button ================= */
@media(min-width:1160px){body.plus:not(.classic) .impact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:578px){body.plus:not(.classic) .milestones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:821px) and (max-width:919px) and (min-height:481px),(min-width:744px) and (max-width:919px) and (min-height:600px){
  body.plus:not(.classic) .view>.topbar .asof{flex:1 1 calc(100% - 112px)}
}

/* A card heading whose caption is longer than the room (Goals, Tithe vs. Generosity) drops the caption under it instead of running off the page. */
body.plus:not(.classic) .subpage .card .c-hd{flex-wrap:wrap;row-gap:2px}
body.plus:not(.classic) .subpage .card .c-hd .c-sub{flex:0 1 auto;min-width:0;margin-left:auto}

/* Two inherited rough edges, fixed for Plus only: The Story and Disclosures cards had no padding (text touched the border), and the More links in the side rail inherited a section-heading margin that spaced them wider than the links above. */
body.plus:not(.classic) :is(.card.story,.card.disclosures){padding:22px 26px}
@media(max-width:560px){body.plus:not(.classic) :is(.card.story,.card.disclosures){padding:18px 20px}}
body.plus:not(.classic) aside nav a.sec{margin:0;border-bottom:none}

/* x-app-premium.js sets --xap-pr on a long paragraph whose last line would be an orphan; this trims its right edge by that much (padding, so any max-width or centering it has stays). */
body.plus:not(.classic) [style*="--xap-pr"]{padding-right:var(--xap-pr)}

/* ================= Legible over the sun glow: small text on glass gets a tight halo in the glass color; light-theme footer gets a cream halo ================= */
html[data-theme="dark"] body.plus:not(.classic) :is(.card,.kpi,.sum,.impact-card,.badge,.ms,.step,.legacy,.hero-card) :is(.gain,.dt,.sub,.note,.muted,.ar,.c-sub,.cap){text-shadow:0 0 3px rgba(13,22,48,.9),0 0 3px rgba(13,22,48,.9),0 0 9px rgba(13,22,48,.8),0 0 16px rgba(13,22,48,.6)}
html[data-theme="light"] body.plus:not(.classic) footer{text-shadow:0 0 3px rgba(255,251,242,.95),0 0 3px rgba(255,251,242,.95),0 0 9px rgba(255,251,242,.9),0 0 18px rgba(255,251,242,.8)}
html[data-theme="light"] body.plus:not(.classic) footer,html[data-theme="light"] body.plus:not(.classic) footer :is(a,.muted){color:#0A1226}
html[data-theme="light"] body.plus:not(.classic) .ar{color:#5A3F06}

/* Scripture page: Classic sets the verses on open canvas. In Plus the canvas is the sky, so the epigraph and each movement sit on frosted glass (the same glass as every card) and serif text never rides bare cloud. */
body.plus:not(.classic) :is(.movement,.scripture-intro){background:var(--card);border:1px solid var(--glass-line);border-radius:10px;padding:24px 28px;max-width:760px;box-shadow:inset 0 1px 0 rgba(var(--bevc),var(--bev)),var(--x-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
body.plus:not(.classic) .scripture-intro{margin:12px auto 24px}
body.plus:not(.classic) .movement{margin:0 auto 24px}
@media(max-width:560px){body.plus:not(.classic) :is(.movement,.scripture-intro){padding:18px 16px}}
html[data-theme="dark"] body.plus:not(.classic) footer{text-shadow:0 0 3px rgba(13,22,48,.92),0 0 3px rgba(13,22,48,.92),0 0 8px rgba(13,22,48,.9),0 0 16px rgba(13,22,48,.8),0 0 26px rgba(13,22,48,.6)}

/* Small gold and muted labels (Earned, Member, impact numbers, dollar amounts) take the lighter gold and the same tight halo; the impact numbers keep their glow, but underneath the halo. */
html[data-theme="dark"] body.plus:not(.classic) :is(.impact .n,.ms.earned .ms-state,.pos-gr,.plan-tag,.fruit .fg .amt,.evt .amt,.subpage .card .note b,.tbl-foot b,.pos-foot b){color:var(--gold-hi)}
html[data-theme="dark"] body.plus:not(.classic) :is(.ms-state,.pos-gr,.plan-tag,.amt,.n,.eyebrow,.desk-eyebrow,.sub-cap){text-shadow:0 0 3px rgba(13,22,48,.9),0 0 3px rgba(13,22,48,.9),0 0 9px rgba(13,22,48,.8)}
html[data-theme="dark"] body.plus:not(.classic) .impact .n{text-shadow:0 0 3px rgba(13,22,48,.9),0 0 3px rgba(13,22,48,.9),0 0 14px rgba(var(--pg),.42)}
/* The footer rides the brightest cloud on the page, so Night gives it one feathered pool of sky color (a pseudo-element: no geometry change, hairline untouched). */
html[data-theme="dark"] body.plus:not(.classic) footer{position:relative;isolation:isolate}
html[data-theme="dark"] body.plus:not(.classic) footer::before{content:"";position:absolute;z-index:-1;left:-15px;right:-15px;top:-30px;bottom:-34px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--xS),.6) 0,rgba(var(--xS),.56) 66%,rgba(var(--xS),0) 100%)}
/* Day gets the same pool in cream: a small dot like the footer separator has almost no halo of its own, and the cloud bank behind a short page is mid-gray. */
html[data-theme="light"] body.plus:not(.classic) footer{position:relative;isolation:isolate}
html[data-theme="light"] body.plus:not(.classic) footer::before{content:"";position:absolute;z-index:-1;left:-15px;right:-15px;top:-30px;bottom:-34px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--xS),.58) 0,rgba(var(--xS),.54) 80%,rgba(var(--xS),0) 100%)}
@media(min-width:821px),(min-width:744px) and (min-height:600px){html body.plus:not(.classic) footer::before{left:-40px;right:-40px}}
/* Night, tablet and phone: the fixed sky puts bright cloud behind a card at some window sizes, so below the two-column breakpoint the glass goes deeper (phone deeper again, next block), and every small gold label takes the lighter gold (the token, so none is missed). */
@media(max-width:1120px){html[data-theme="dark"] body.plus:not(.classic){--card:rgba(19,31,60,.78)}}
@media(min-width:561px) and (max-width:1120px){html[data-theme="dark"] body.plus:not(.classic) .kpi{--card:rgba(19,31,60,.84)}}
/* Night: the KPI captions take a lighter champagne so the one beside a bright cloud edge still holds 4.5:1. */
html[data-theme="dark"] body.plus:not(.classic) .kpi .lbl{color:#F4E8C2}
/* Day: the KPI target marker (10%) takes full ink so it holds 4.5:1 where a bright cloud rides the card edge. */
html[data-theme="light"] body.plus:not(.classic) .kpi .mk{color:#16233F}
html[data-theme="dark"] body.plus:not(.classic){--gold:var(--gold-hi);--nav-on-ink:var(--gold-hi)}
/* Phone, Night: cards go a little deeper, and each sub-page header gets the same feathered pool, because the sky is brightest right behind it. */
@media(max-width:560px){
  html[data-theme="dark"] body.plus:not(.classic){--card:rgba(19,31,60,.76)}
  html[data-theme="dark"] body.plus:not(.classic) .sub-hd{position:relative;isolation:isolate}
  html[data-theme="dark"] body.plus:not(.classic) .sub-hd::before{content:"";position:absolute;z-index:-1;left:-15px;right:-15px;top:-12px;bottom:-10px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(var(--xS),0),rgba(var(--xS),.5) 16px,rgba(var(--xS),.5) calc(100% - 16px),rgba(var(--xS),0))}
}
/* On the phone the range tabs ride a bright cloud streak at some widths (the sky plate is fixed, so the streak moves with the window), so they get one feathered pool of sky color: a pseudo-element, no geometry change, the sliding underline (::after) untouched. */
@media(max-width:560px){
  body.plus:not(.classic) .card.hero .tabs{isolation:isolate}
  body.plus:not(.classic) .card.hero .tabs::before{content:"";position:absolute;z-index:-1;left:-15px;right:-15px;top:-22px;bottom:-20px;pointer-events:none;
    background:radial-gradient(closest-side,rgba(var(--xS),.4) 0,rgba(var(--xS),.34) 55%,rgba(var(--xS),0) 100%)}
}
/* Night: the small arrow glyph takes the lighter gold. Day: the active tab label, the Give label and the "in Heaven" half of the wordmark take the deeper gold so they hold 4.5:1 on the frosted bar over the brightest cloud. */
html[data-theme="dark"] body.plus:not(.classic) .ar{color:var(--gold-hi)}
html[data-theme="light"] body.plus:not(.classic) :is(.tabbar a.on,.tabbar .give span,.m-wm b){color:#4F3506}
/* Day: the range tab and the chart's 11% marker sit on the brightest cloud, so they take a deeper gold; sub-page captions take full ink. */
html[data-theme="light"] body.plus:not(.classic) :is(.card.hero .tabs button.on,.gauge .tl.above){color:#4F3506}
html[data-theme="light"] body.plus:not(.classic) .sub-hd .sub-cap{color:#16233F}

/* ================= The rail is glass (Plus only, paint only: width, padding and the 1 px border stay) ================= */
/* Night: deep sky glass with a gold edge on the right and a gold-tinted pill for the page you are on. */
html[data-theme="dark"] body.plus:not(.classic) aside{
  --side:rgba(12,20,40,.55);--hair:rgba(226,192,105,.16);--hair-2:rgba(226,192,105,.16);
  --nav-hover:rgba(226,192,105,.09);--nav-on-bg:linear-gradient(180deg,rgba(230,176,64,.28),rgba(150,100,25,.2));--nav-on-ink:#F6E4AE;border-right-color:rgba(201,150,47,.35)}
html[data-theme="dark"] body.plus:not(.classic) aside nav a.on{box-shadow:inset 0 1px 0 rgba(255,236,190,.22),inset 0 0 0 1px rgba(226,192,105,.30),0 2px 10px rgba(4,9,20,.35)}
/* Day: cream glass over the sky, deep navy ink, gold-brown hairlines (the Current App's steel slab is Classic only). */
html[data-theme="light"] body.plus:not(.classic) aside{
  --side:rgba(255,250,240,.45);--ink:#16233F;--ink-2:#2D3649;--ink-3:#363F53;
  --hair:rgba(107,74,14,.22);--hair-2:rgba(107,74,14,.22);
  --nav-hover:rgba(201,150,47,.14);--nav-on-bg:rgba(201,150,47,.22);--nav-on-ink:#4F3506;border-right-color:rgba(201,150,47,.35)}
/* The rail edge: one inner gold hairline that fades out top and bottom, and a warm cloud-lit glow pinned to the bottom of the window (paint layers only). */
@media(min-width:821px),(min-width:744px) and (min-height:600px){
  body.plus:not(.classic) aside{background-image:linear-gradient(to bottom,rgba(226,192,105,0),rgba(226,192,105,.25) 14%,rgba(226,192,105,.25) 86%,rgba(226,192,105,0)),
    radial-gradient(ellipse 100% 260px at 50% 100%,rgba(255,226,160,.16),rgba(255,226,160,0));
    background-position:right top,left bottom;background-size:1px 100%,216px 100vh;background-repeat:no-repeat;background-attachment:scroll,fixed}
  html[data-theme="light"] body.plus:not(.classic) aside{background-image:linear-gradient(to bottom,rgba(201,150,47,0),rgba(201,150,47,.3) 14%,rgba(201,150,47,.3) 86%,rgba(201,150,47,0)),
    radial-gradient(ellipse 100% 260px at 50% 100%,rgba(255,236,190,.5),rgba(255,236,190,0))}
}
html[data-theme="light"] body.plus:not(.classic) aside nav a.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(201,150,47,.38),0 1px 6px rgba(107,74,14,.12)}
html[data-theme="light"] body.plus:not(.classic) :is(aside .brand .wm .g){color:#4F3506;text-shadow:none}
html[data-theme="light"] body.plus:not(.classic) aside .brand svg{filter:none}
html[data-theme="light"] body.plus:not(.classic) aside .brand svg path{stroke:#6B4A0E}
html[data-theme="light"] body.plus:not(.classic) aside .brand svg circle{stroke:#6B4A0E;fill:#6B4A0E}
body.plus:not(.classic) aside nav a{transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out),color .3s var(--ease-out)}

/* ================= Reduced motion: the finished picture, standing still ================= */
@media(prefers-reduced-motion:reduce){
  body.plus:not(.classic) aside,body.plus:not(.classic) aside nav a{transition:none}
  #pz,#pz .pl{transition:none}
  #pz.x-settle .pl.on{animation:none}
  body.plus:not(.classic) :is(.card:not(.hero):not(.witness),.kpi),body.plus:not(.classic) :is(.sum,.impact-card,.badge,.ms,.step,.adm-row,.hero-card,.legacy){transition:none}
  body.plus:not(.classic) :is(.card:not(.hero):not(.witness),.kpi):hover{transform:none}
  body.plus:not(.classic) .card.hero>.x-glint{display:none}
  body.plus:not(.classic) .card.hero .tabs::after{transition:none}
  body.plus:not(.classic) #witnessBand::before,body.plus:not(.classic) #witnessBand::after{animation:none;opacity:.5}
}

/* ================= Rev 3 (fix round 2): contrast, orphans, positions on small phones ================= */
/* Positions on a phone: the 14 px type floor made the name column 96 px wide at 360 px, so every name broke one word per line. A slimmer sparkline and a tighter gap give the name its room back; under 340 px the sparkline steps aside. */
@media(max-width:400px){
  body.plus:not(.classic) .pos-row{gap:10px}
  body.plus:not(.classic) .pos-row .pos-spark .spark{width:48px;height:auto}
  body.plus:not(.classic) .pos-nm{text-wrap:balance}
}
@media(max-width:340px){
  body.plus:not(.classic) .pos-row{grid-template-columns:minmax(0,1fr) auto}
  body.plus:not(.classic) .pos-row .pos-spark{display:none}
}
/* Night: the Steward's Desk eyebrow and the hero's gain line take the champagne gold with a short halo, so both hold 4.5:1 over the brightest cloud. */
html[data-theme="dark"] body.plus:not(.classic) .desk-eyebrow{color:#F6E9C0}
html[data-theme="dark"] body.plus:not(.classic) .card.hero :is(.delta,.delta .up,.foot b){color:var(--gold-hi)}

/* ================= Rev 4 (fix round 2): the art critic's list ================= */

/* Impact tiles: all eight tiles keep the glass box; the soft gold halo behind each number and the embossed gold coin behind each icon stay. */
body.plus:not(.classic) .impact-card{position:relative;isolation:isolate}
body.plus:not(.classic) .impact-card b{position:relative}
body.plus:not(.classic) .impact-card b::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:170px;height:120px;margin:-60px 0 0 -85px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--pg),.18),rgba(var(--pg),0))}
body.plus:not(.classic) :is(.impact-card .ic,.impact .ic){position:relative;isolation:isolate;color:#3B2A06}
body.plus:not(.classic) .impact-card .ic::before{content:"";position:absolute;inset:-7px;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#f6dc94,#c9962f);
  box-shadow:inset 0 0 0 1px rgba(255,246,214,.75),inset 0 -3px 5px rgba(110,72,8,.38),0 2px 6px rgba(4,9,20,.3)}
body.plus:not(.classic) .impact .ic{background:radial-gradient(circle at 34% 28%,#f6dc94,#c9962f);
  box-shadow:inset 0 0 0 1px rgba(255,246,214,.75),inset 0 -2px 3px rgba(110,72,8,.38),0 1px 4px rgba(4,9,20,.3)}
/* The label "Missionaries Supported" is 144 px wide; the tile's side padding (the narrowest tile is 158 px) kept it from fitting on one line. */
body.plus:not(.classic) .impact-card{padding-left:4px;padding-right:4px}

/* Four KPI tiles do not fit beside the right rail (1121 to 1419 px): two by two, so no caption wraps to a lone word. */
@media(min-width:1121px) and (max-width:1419px){body.plus:not(.classic) .col-main>.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phone chart: a brighter 2.5 px line with a soft gold bloom, the end figure back in Cormorant with its own glow, the verse restored, and two feathered pools of sky color so the verse and the axis never ride a bright cloud. */
@media(max-width:640px){
  body.plus:not(.classic) .card.hero svg.chart .hist{stroke-width:2.5px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 calc(6px*var(--k,1)) rgba(255,214,140,.6))}
  html[data-theme="light"] body.plus:not(.classic) .card.hero svg.chart .hist{filter:drop-shadow(0 0 calc(6px*var(--k,1)) rgba(201,150,47,.55))}
  body.plus:not(.classic) .card.hero svg.chart{background:radial-gradient(ellipse 80px 36px at 74% 53%,rgba(var(--xS),.3),rgba(var(--xS),0)),radial-gradient(ellipse 70px 24px at 49% 95%,rgba(var(--xS),.3),rgba(var(--xS),0))}
}
@media(min-width:641px){body.plus:not(.classic) .card.hero svg.chart text.axis-g[x="712"]{transform:translateY(-5px)}}

/* ================= Rev 5 (fix round 2): last orphans, reduced-motion safety ================= */
/* The dashboard footer uses the orphan-proof wrap (balance leaves "advice." alone at 560). The Fruit Reports title stays on one line and its caption gives way. */
body.plus:not(.classic) .col-main>footer{text-wrap:pretty}
body.plus:not(.classic) .card.fruit .hd h2{white-space:nowrap;flex-shrink:0}
@media(prefers-reduced-motion:reduce){
  body.plus:not(.classic) #witnessBand::before,body.plus:not(.classic) #witnessBand::after{translate:none}
  body.plus:not(.classic) .card.hero{transform:none}
}

/* 2026-10-23 Jeremy: the dark band was jarring in day mode. Day gets a soft, light version of the scene; night is unchanged. */
html[data-theme="light"] body.plus:not(.classic) #witnessBand{background-image:none;background-color:#f3ead6;border-color:rgba(176,138,60,.35);box-shadow:0 10px 30px rgba(60,48,20,.12)}
html[data-theme="light"] body.plus:not(.classic) #witnessBand::before{background:url(../assets/x/app-premium-witnesses-band.webp) 50% 55%/cover no-repeat;
  inset:-14px;filter:blur(6px) saturate(.7);opacity:.4;mix-blend-mode:normal;translate:none;-webkit-mask-image:none;mask-image:none;animation:none}
html[data-theme="light"] body.plus:not(.classic) #witnessBand::after{background:linear-gradient(100deg,rgba(250,245,233,.9) 0,rgba(250,245,233,.72) 55%,rgba(250,245,233,.45) 100%);
  opacity:1;mix-blend-mode:normal;translate:none;-webkit-mask-image:none;mask-image:none;animation:none}
@media(max-width:560px){html[data-theme="light"] body.plus:not(.classic) #witnessBand::before{background-image:url(../assets/x/app-premium-witnesses-band-portrait.webp)}
  html[data-theme="light"] body.plus:not(.classic) #witnessBand::after{background-image:linear-gradient(180deg,rgba(250,245,233,.88) 0,rgba(250,245,233,.74) 60%,rgba(250,245,233,.5) 100%)}}
html[data-theme="light"] body.plus:not(.classic) #witnessBand  *{text-shadow:none}
html[data-theme="light"] body.plus:not(.classic) #witnessBand :is(.w-sub,.w-nm,.w-gv,.w-rf){color:var(--ink)}
html[data-theme="light"] body.plus:not(.classic) #witnessBand .lbl{color:#6F500B}
html[data-theme="light"] body.plus:not(.classic) #witnessBand :is(.w-hd,.w-sub,.w-stage)::before{content:none}
body.plus:not(.classic) .card.hero p.hero-disc{color:var(--x-ink);text-shadow:0 0 1px rgba(var(--xS),1),0 0 2px rgba(var(--xS),1),0 0 4px rgba(var(--xS),.95),0 0 8px rgba(var(--xS),.9)}
/* content fades softly into the phone tab bar instead of stopping at a hard edge */
body.plus:not(.classic) .tabbar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:30px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--chrome))}

/* gauge end labels, subtitle aligned under its heading, breathing room under Log a Salvation */
.gauge .tl.end-l{transform:none}
.gauge .tl.end-r{transform:translateX(-100%)}
.subpage .card .c-hd.c-stack,body.plus:not(.classic) .subpage .card .c-hd.c-stack{flex-direction:column;align-items:flex-start;row-gap:4px}
.subpage .card .c-hd.c-stack .c-sub,body.plus:not(.classic) .subpage .card .c-hd.c-stack .c-sub{margin-left:0;text-align:left}
.sv-card #sv-log{margin-bottom:22px}