/* The Richest Man in Heaven : app styling, matched to the mockup design system (direction-final.html). */
/* Part 1 : mockup design system, copied from the mockup's <style> block, with main/.hero/.brand scoped to avoid legacy-screen collisions. */
:root{
  /* Day - Institutional Light */
  --canvas:#FAF9F5; --card:#FFFFFF; --side:#FFFFFF;
  --ink:#16233F; --ink-2:#4A5468; --ink-3:#8A90A0;
  --hair:#E7E4DA; --hair-2:#EFEDE5; --grid:#EFEDE5;
  --gold:#8F6616; --gold-2:#B8862B; --gold-soft:#F5EDDA;
  --bal:#16233F; --bal-glow:none;
  --btn-bg:#8F6616; --btn-ink:#FFFFFF; --btn-hover:#B8862B;
  --avatar-bg:#16233F; --avatar-ink:#F3E9CF;
  --nav-on-bg:#F5EDDA; --nav-on-ink:#16233F; --nav-hover:#F4F2EA;
  --row-hover:#FBFAF5; --meter-track:#EFEDE5;
  --hero-bg:#FFFFFF; --milestone-dot:#16233F;
  --hs-bibles:#A97B1C; --hs-missions:#4E6A94; --hs-babies:#9E5A3C; --hs-church:#6486B2; --hs-hunger:#7F8F50; --hs-unsplit:var(--hair);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{
  /* Night - Private Terminal. Three distinct depths: sidebar (recessed) < canvas (deep blue) < card (raised). */
  --canvas:#131F3C; --card:#1B2749; --side:#0A1122;
  --ink:#EAE5D6; --ink-2:#AEB2C4; --ink-3:#6E7692;
  --hair:#2E3E64; --hair-2:#26334F; --grid:#243257;
  --gold:#D4AF5A; --gold-2:#E2C069; --gold-soft:#D4AF5A26;
  --bal:#F6F1E2; --bal-glow:0 0 24px #D4AF5A33;
  --btn-bg:#D4AF5A; --btn-ink:#131F3C; --btn-hover:#E2C069;
  --avatar-bg:#D4AF5A; --avatar-ink:#131F3C;
  --nav-on-bg:#D4AF5A26; --nav-on-ink:#D4AF5A; --nav-hover:#1E2C50;
  --row-hover:#1F2E5480; --meter-track:#16244A;
  --hero-bg:radial-gradient(120% 90% at 20% 0%,#26386A 0%,#1B2749 60%);
  --milestone-dot:#EAE5D6;
  --hs-missions:#5C7DB0; --hs-babies:#B65F3F; --hs-church:#9FBBE3;
}
/* Night depth: a restrained ambient shadow lifts the raised cards off the lighter deep-blue canvas (canvas/card no longer collapse to one value). */
[data-theme="dark"] .card,[data-theme="dark"] .kpi{box-shadow:0 1px 2px rgba(4,9,20,.5),0 6px 20px rgba(4,9,20,.34)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--canvas)}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background .35s}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--gold)}
.lbl{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.shell{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
/* sidebar */
aside{background:var(--side);border-right:1px solid var(--hair-2);padding:18px 14px;display:flex;flex-direction:column;gap:4px;transition:background .35s}
aside .brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;border-bottom:1px solid var(--hair-2);margin-bottom:12px}
aside .brand .wm{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.15;color:var(--ink)}
aside .brand .wm .g{color:var(--gold)}
aside .brand .crown-img{display:block;flex:none}
nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:500}
nav a svg{opacity:.8}
nav a svg *{stroke:currentColor}
nav a.on{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:600}
@media(hover:hover){nav a:hover{background:var(--nav-hover)}}
.side-foot{margin-top:auto;border-top:1px solid var(--hair-2);padding-top:12px;display:flex;flex-direction:column;gap:10px}
/* day/night switch */
.mode{display:flex;align-items:center;gap:9px;padding:2px 8px}
.mode .m-lbl{font-size:11px;color:var(--ink-3);font-weight:500}
.switch{position:relative;width:52px;height:26px;border-radius:14px;background:var(--meter-track);border:1px solid var(--hair);cursor:pointer;flex:none;transition:background .3s}
.switch .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));transition:left .3s;display:flex;align-items:center;justify-content:center}
[data-theme="dark"] .switch .knob{left:28px}
.switch .ic{width:11px;height:11px}
.switch .sun{display:block}.switch .moon{display:none}
[data-theme="dark"] .switch .sun{display:none}
[data-theme="dark"] .switch .moon{display:block}
.chip{display:flex;align-items:center;gap:9px;padding:6px 8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--avatar-bg);color:var(--avatar-ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.chip .nm{font-size:12.5px;font-weight:600;color:var(--ink)}
.chip .ac{font-size:11px;color:var(--ink-3)}
/* main */
.shell main{padding:18px 22px 30px;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.topbar h1{font-size:19px;font-weight:700;letter-spacing:-.01em}
.asof{font-size:12px;color:var(--ink-3)}
.topbar .sp{flex:1}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--gold);border:1px solid var(--hair);border-radius:20px;padding:4px 11px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
[data-theme="dark"] .live i{box-shadow:0 0 6px var(--gold)}
.btn-gold{background:var(--btn-bg);color:var(--btn-ink);border:none;border-radius:7px;padding:9px 16px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer}
@media(hover:hover){.btn-gold:hover{background:var(--btn-hover)}}
.content{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:18px;align-items:start}
.col-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.card{background:var(--card);border:1px solid var(--hair-2);border-radius:10px;transition:background .35s}
.card .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 18px 0}
.card .hd h2{font-size:13.5px;font-weight:600}
.card .hd .sub{font-size:11.5px;color:var(--ink-3)}
/* hero */
.card.hero{padding:18px 20px 14px;background:var(--hero-bg)}
.card.hero .bal{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-top:6px;color:var(--bal);text-shadow:var(--bal-glow)}
.card.hero .bal sup{font-size:20px;font-weight:600;vertical-align:22px;margin-right:1px;color:var(--gold)}
.card.hero .bal .cents{font-size:22px;vertical-align:0;color:var(--bal)}
.delta{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:13px;font-weight:600}
.delta .pct{color:var(--ink-3);font-weight:500}
.card.hero .who{font-size:12px;color:var(--ink-3);margin-top:3px}
.tabs{display:flex;gap:2px;margin:14px 0 8px;border-bottom:1px solid var(--hair-2)}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:7px 12px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-3);cursor:pointer}
.tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}
/* chart (theme-aware svg) */
.chart{width:100%;height:auto;display:block}
.chart .grid-line{stroke:var(--grid);stroke-width:1}
.chart .axis{font:10.5px var(--sans);fill:var(--ink-3)}
.chart .axis-g{font:10.5px var(--sans);fill:var(--gold);font-weight:600}
.chart .vs{font-style:italic;font-family:var(--serif);font-size:13px;fill:var(--gold)}
.chart .hist,.chart .proj{stroke:var(--gold)}
[data-theme="dark"] .chart .hist{filter:url(#glowF)}
.chart .mark{fill:var(--gold)}
[data-theme="dark"] .chart .mark{filter:url(#glowF)}
.chart .mark-ring{stroke:var(--gold)}
.chart .today-line{stroke:var(--hair)}
.card.hero .foot{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ink-3);margin-top:6px;flex-wrap:wrap;gap:6px}
/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{background:var(--card);border:1px solid var(--hair-2);border-radius:10px;padding:13px 15px;transition:background .35s}
.kpi .v{font-size:20px;font-weight:700;margin-top:5px}
.kpi .s{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.kpi .s .crown-mk{vertical-align:baseline}
.meter{height:5px;background:var(--meter-track);border-radius:3px;margin-top:8px;overflow:hidden}
.meter div{height:100%;width:74%;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
[data-theme="dark"] .meter div{box-shadow:0 0 8px #D4AF5A55}
.mk{display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink-3);margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
/* table */
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right;padding:10px 18px 8px;border-bottom:1px solid var(--hair)}
th:first-child{text-align:left}
td{padding:11px 18px;border-bottom:1px solid var(--hair-2);font-size:13px;text-align:right;white-space:nowrap}
td:first-child{text-align:left}
tr:last-child td{border-bottom:none}
@media(hover:hover){tr:hover td{background:var(--row-hover)}}
.fund{font-weight:600;color:var(--ink)}
.fund small{display:block;font-weight:400;font-size:11px;color:var(--ink-3);margin-top:1px}
.gain{color:var(--gold);font-weight:600}
.spark{display:block;margin-left:auto}
.spark path{stroke:var(--gold)}
[data-theme="dark"] .spark{filter:drop-shadow(0 0 3px #D4AF5A44)}
.tbl-foot{padding:10px 18px 12px;font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--hair)}
.tbl-foot b{color:var(--gold);font-weight:600}
/* ledger */
.ledger{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;padding:14px 18px 6px}
.ledger .side{text-align:center;padding:8px 4px}
.ledger .side .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.ledger .side .v{font-size:19px;font-weight:700;margin-top:4px}
.ledger .side.t .v{color:var(--ink-3)}
.ledger .side.e .v{color:var(--gold)}
[data-theme="dark"] .ledger .side.e .v{text-shadow:0 0 14px #D4AF5A33}
.ledger .ar{text-align:center;color:var(--gold);font-size:17px}
.ledger-cap{text-align:center;font-size:11.5px;color:var(--ink-3);padding:0 18px 14px}
/* activity */
.feed{padding:4px 0 6px}
.evt{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--hair-2);font-size:12.5px}
.evt:last-child{border-bottom:none}
.evt .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
[data-theme="dark"] .evt .dot{box-shadow:0 0 6px #D4AF5A66}
.evt .dot.m{background:var(--milestone-dot);box-shadow:none}
.evt .tx{flex:1;min-width:0}
.evt .tx b{font-weight:600}
.evt .tx svg path{stroke:var(--gold)}
.evt .amt{font-weight:700;color:var(--gold)}
.evt .dt{font-size:11px;color:var(--ink-3);flex:none}
/* rail */
.rail{display:flex;flex-direction:column;gap:18px;min-width:0}
.rail .card{padding:15px 17px}
.impact{margin-top:8px}
.impact .row{display:flex;align-items:baseline;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--hair-2)}
.impact .row:last-child{border-bottom:none}
.impact .n{font-size:17px;font-weight:700;color:var(--gold)}
.impact .l{font-size:12px;color:var(--ink-2)}
.scripture{text-align:center;padding:20px 17px 18px}
.scripture .crown-img{display:block;margin:0 auto}
.scripture .v{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.45;color:var(--ink)}
.scripture .r{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:10px}
.word p{font-size:12.5px;color:var(--ink-2);margin-top:8px;line-height:1.55}
.word .q{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink);margin-top:10px;line-height:1.5}
.word .q b{color:var(--gold);font-weight:600;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.word-hd{display:flex;align-items:center;gap:11px}
.trey-av{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:1.5px solid var(--gold);background:var(--gold-soft);box-shadow:0 1px 3px rgba(0,0,0,.12)}
[data-theme="dark"] .trey-av{box-shadow:0 0 10px #D4AF5A33}
.word .who{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.3}
footer{grid-column:1/-1;text-align:center;font-size:11px;color:var(--ink-3);padding-top:6px}
/* Round 4 - secondary accent + day depth (Jeremy: contrast on the white screen) */
:root{--accent-blue:#4E6A94;--accent-blue-light:#6486B2;--accent-warm:#E8D9A8;--sub-accent:var(--accent-blue)}
[data-theme="light"]{--canvas:#F2F3F6;--hair:#DCE1E9;--hair-2:#E6EAF0;--side:#F7F8FA}
html[data-theme="light"][data-blue="light"]{--sub-accent:var(--accent-blue-light);--canvas:#F1F5FA;--hair:#D8E2EF;--hair-2:#E3EBF4;--side:#F6F9FC}
[data-theme="dark"]{--sub-accent:var(--accent-warm)}
.lbl,th,.fund small,.tabs button{color:var(--sub-accent)}
[data-theme="light"] .card,[data-theme="light"] .kpi{box-shadow:0 1px 2px rgba(30,42,70,.05),0 3px 12px rgba(30,42,70,.05)}
/* Round 5 - day-mode canvas taste options (data-canvas switch; night mode untouched; cards stay white; all round-4 accents intact) */
html[data-theme="light"][data-canvas="current"]{--canvas:#F2F3F6;--side:#F7F8FA;--hair:#DCE1E9;--hair-2:#E6EAF0}
html[data-theme="light"][data-canvas="fullblue-light"]{--canvas:#DBE6F4;--side:#E7EFF9;--hair:#C5D5EB;--hair-2:#D4E0F0}
html[data-theme="light"][data-canvas="ivory"]{--canvas:#FAF9F5;--side:#FFFFFF;--hair:#E7E4DA;--hair-2:#EFEDE5}
/* deep steel - page & sidebar chrome go dark; white cards keep their dark ink because vars are only re-scoped to aside / page-level text */
html[data-theme="light"][data-canvas="fullblue-deep"]{--canvas:#3F5B84;--side:#37527B}
html[data-theme="light"][data-canvas="fullblue-deep"] aside{--ink:#F2F6FC;--ink-2:#CBD9ED;--ink-3:#9FB2CE;--hair:#557199;--hair-2:#4B678F;--nav-hover:#476186;--meter-track:#2E486E}
html[data-theme="light"][data-canvas="fullblue-deep"] .topbar h1{color:#F4F7FC}
html[data-theme="light"][data-canvas="fullblue-deep"] .asof{color:#C6D3E7}
html[data-theme="light"][data-canvas="fullblue-deep"] footer{color:#BBC9DF}
html[data-theme="light"][data-canvas="fullblue-deep"] .live{border-color:#5C78A2}

/* Cloud of Witnesses - stained-glass deck */
.witness{position:relative;overflow:hidden}
.witness .cross{position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);pointer-events:none;filter:blur(1.8px)}
.witness .cross path{fill:var(--ink);opacity:.05}
[data-theme="dark"] .witness .cross path{fill:var(--gold);opacity:.08}
[data-theme="dark"] .witness .cross{filter:blur(1.8px) drop-shadow(0 0 14px #D4AF5A44)}
.witness .w-sub{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.35}
.w-stage{position:relative;perspective:900px}
.w-flap{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.4,.1,.2,1)}
.w-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 2px}
[data-theme="dark"] .w-face{border-left-color:var(--pane-d)}
.w-face.back{transform:rotateX(180deg)}
.w-nm{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.2;color:var(--pane-l)}
[data-theme="dark"] .w-nm{color:var(--pane-d)}
.w-gv{font-size:12px;color:var(--ink-2);line-height:1.4}
.w-rf{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
#witnessBand{display:flex;align-items:center;gap:18px;padding:14px 18px}
#witnessBand .w-hd{flex:none;width:158px}
#witnessBand .w-stage{flex:1;height:68px;min-width:0}
@media (prefers-reduced-motion: reduce){
  .w-flap{transition:none}
  .w-face{transition:opacity .5s ease}
}
@media(max-width:560px){
  #witnessBand{flex-direction:column;align-items:stretch;gap:10px}
  #witnessBand .w-hd{width:auto}
  #witnessBand .w-stage{flex:none;height:84px}
}
@media(max-width:1120px){.content{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:743px),(max-width:820px) and (max-height:599px){
  .shell{display:block}
  aside{flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--hair-2);padding:10px 14px;overflow-x:auto}
  aside .brand{border:none;margin:0;padding:0 10px 0 0}
  aside .brand .wm br{display:none}
  nav{display:flex;gap:2px}
  nav a{padding:7px 9px}
  nav a span{display:none}
  .side-foot{margin:0 0 0 auto;border:none;padding:0;flex-direction:row;align-items:center;gap:6px}
  .mode .m-lbl{display:none}
  .chip .nm,.chip .ac{display:none}
  .shell main{padding:14px 14px 26px}
}
@media(max-width:560px){
  td:nth-child(3),th:nth-child(3){display:none}
  .kpis{grid-template-columns:1fr}
  .topbar h1{font-size:17px}
  .card.hero .bal{font-size:33px}
  .live{display:none}
}
/* ============ Round 6 - hybrid canvas (Jeremy's pick, now DEFAULT), pill fix, Scripture page, Fruit Reports, Eleven Percent Line ============ */
/* Hybrid canvas: deep steel sidebar + a lighter powder-steel page (the deep hue lifted ~22% toward white). Cards stay white. Night untouched. */
html[data-theme="light"][data-canvas="hybrid"]{--canvas:#C3CFE1;--side:#3F5B84;--hair:#DCE1E9;--hair-2:#E6EAF0}
html[data-theme="light"][data-canvas="hybrid"] aside{--ink:#F2F6FC;--ink-2:#CBD9ED;--ink-3:#9FB2CE;--hair:#557199;--hair-2:#4B678F;--nav-hover:#476186;--meter-track:#2E486E}
html[data-theme="light"][data-canvas="hybrid"] .asof{color:#3A4B6B}
html[data-theme="light"][data-canvas="hybrid"] footer{color:#41527A}
html[data-theme="light"][data-canvas="hybrid"] .card,
html[data-theme="light"][data-canvas="hybrid"] .kpi{box-shadow:0 1px 2px rgba(22,35,63,.08),0 4px 16px rgba(22,35,63,.10)}

/* Status pill - real chip surface so it reads on the blue canvas (and in night) */
.live{background:var(--card);color:var(--ink)}
[data-theme="light"] .live{box-shadow:0 1px 2px rgba(22,35,63,.06)}

/* SPA page swap */
.page[hidden]{display:none}

/* Trey quote attribution on its own line (no em dash) */
.word .q-attr{margin-top:7px}
.word .q-attr b{color:var(--gold);font-weight:600;font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* Eleven Percent Line - giving-rate gauge (gold + steel only, no gamification) */
.eleven .eh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 18px 0}
.eleven .eh .lbl-wrap .sub{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.eleven .erate{text-align:right;flex:none}
.eleven .erate .n{font-size:24px;font-weight:700;color:var(--gold);line-height:1}
.eleven .erate .s{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.gauge{position:relative;margin:30px 18px 30px;height:8px;border-radius:5px;background:var(--meter-track)}
.gauge .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
[data-theme="dark"] .gauge .fill{box-shadow:0 0 8px #D4AF5A55}
.gauge .knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--card);box-shadow:0 0 0 1px var(--gold);transform:translate(-50%,-50%);z-index:2}
.gauge .tk{position:absolute;top:-5px;height:18px;width:2px;background:var(--sub-accent)}
.gauge .tk.gen{background:var(--gold);top:-9px;height:26px}
.gauge .tl{position:absolute;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;transform:translateX(-50%)}
.gauge .tl.below{top:16px}
.gauge .tl.above{bottom:20px;color:var(--gold)}
.eleven .ecap{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink);padding:0 18px 15px;line-height:1.45}
.eleven .ecap b{font-family:var(--sans);font-style:normal;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-left:4px}

/* Fruit Reports - dividends of giving: a recorded gift later receives a note of what God did */
.fruit .frow{display:flex;gap:13px;padding:13px 18px;border-bottom:1px solid var(--hair-2)}
.fruit .frow:last-child{border-bottom:none}
.fruit .fic{flex:none;margin-top:2px}
.fruit .fic svg path{stroke:var(--gold)}
.fruit .fbody{min-width:0}
.fruit .fg{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub-accent)}
.fruit .fg .amt{color:var(--gold)}
.fruit .fn{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.fruit .ffoot{padding:11px 18px 12px;font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--hair)}

/* Scripture Encouragement page - the cathedral room: serif verses on open canvas, no card clutter */
/* Round 6 Fable fix: reading column centered with a proper measure so whitespace is symmetric; epigraph centered and larger */
.scripture-intro{max-width:720px;margin:12px auto 46px;text-align:center}
.scripture-intro .v{font-family:var(--serif);font-style:italic;font-size:32px;color:var(--ink);line-height:1.3}
.scripture-intro p{font-size:13px;color:var(--ink-2);margin:12px auto 0;max-width:560px;line-height:1.6}
.movement{max-width:720px;margin:0 auto 38px}
.mv-hd{padding:3px 0;margin-bottom:20px}
[data-theme="dark"] .mv-hd{border-left-color:var(--pane-d)}
/* .movement prefix keeps these ahead of the later, equal-specificity .view h2 rule
   (otherwise the jewel serif movement titles lose to plain navy .view h2). */
.movement .mv-hd h2{font-family:var(--serif);font-weight:600;font-size:25px;color:var(--pane-l);line-height:1.15}
[data-theme="dark"] .movement .mv-hd h2{color:var(--pane-d)}
.mv-hd p{font-size:12.5px;color:var(--ink-2);margin-top:5px;max-width:540px}
.mv-verses{display:flex;flex-direction:column;gap:22px;padding-left:20px;max-width:830px}
.sv-r{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sub-accent);margin-bottom:6px}
.sv-t{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink);max-width:620px}
.sv-d summary{list-style:none;cursor:pointer}
.sv-d summary::-webkit-details-marker{display:none}
.sv-more{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sub-accent);margin-left:7px;white-space:nowrap;vertical-align:2px}
.sv-rest{margin-top:11px}
.sv-d[open] .sv-more{display:none}
/* Round 6b - rail relocates into the sidebar's negative space at middle widths (821-1120px, via JS) */
aside .rail{margin-top:14px;gap:12px}
[data-theme="light"] aside .rail{--ink:#16233F;--ink-2:#4A5468;--ink-3:#8A90A0;--hair:#DCE1E9;--hair-2:#E6EAF0;--meter-track:#EFEDE5}
aside .rail .card{box-shadow:0 1px 2px rgba(12,20,40,.18),0 4px 14px rgba(12,20,40,.16)}
html[data-page="scripture"] aside .rail{display:none}
/* Round 6b - giving-impact icons: thin line icons in the label layer (steel by day, candlelight by night) */
.impact .row .l{display:inline-flex;align-items:center;gap:8px}
.impact .ic{color:var(--sub-accent);flex:none;display:inline-flex}
.impact .ic svg *{stroke:currentColor}
/* Round 6b - wordmark legibility on the deep steel sidebars: night-gold value + a soft candle glow for the crown and "in Heaven" */
html[data-theme="light"][data-canvas="hybrid"] aside .brand .wm .g,
html[data-theme="light"][data-canvas="fullblue-deep"] aside .brand .wm .g{color:#E2C069;text-shadow:0 0 12px rgba(212,175,90,.35)}
html[data-theme="light"][data-canvas="hybrid"] aside .brand .crown-img,
html[data-theme="light"][data-canvas="fullblue-deep"] aside .brand .crown-img{filter:drop-shadow(0 0 6px rgba(212,175,90,.4))}
@media(max-width:560px){
  .mv-verses{padding-left:0;max-width:none}
  .sv-t,.scripture-intro .v{max-width:none}
  .scripture-intro .v{font-size:22px}
  .movement .mv-hd h2{font-size:21px}
  .sv-t{font-size:17.5px}
  .eleven .eh{flex-wrap:wrap}
  .gauge{margin-left:14px;margin-right:14px}
}

/* ============================================================
   APP COMPONENTS · legacy screens repainted in mockup tokens
   ============================================================ */

/* buttons */
.btn{background:var(--btn-bg);color:var(--btn-ink);border:0;border-radius:7px;padding:11px 18px;
  font-family:var(--sans);font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s}
@media(hover:hover){.btn:hover{background:var(--btn-hover)}}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
@media(hover:hover){.btn.ghost:hover{background:var(--nav-hover)}}
.btn.full{width:100%}
.btn.small{padding:7px 13px;font-size:.85rem;border-radius:9px}
.btn.big{padding:14px 26px;font-size:1.05rem;border-radius:9px}
.link{background:none;border:0;color:var(--gold);cursor:pointer;font-size:.92rem;padding:4px 6px}
.row{display:flex;gap:10px;align-items:center}
.row.end{justify-content:flex-end;margin-top:14px}
.row.between{justify-content:space-between}

/* view chrome */
.view{width:100%}
/* Secondary (non-Overview) pages render bare cards into #view; cap them for readable measure. */
.view > h2:first-child,.view > .card,.view > section,.view > p{max-width:960px}
.view h2{font-family:var(--sans);font-size:19px;font-weight:700;color:var(--ink);margin:2px 0 12px}
.view h3{font-family:var(--sans);font-size:1.1rem;font-weight:700;color:var(--ink);margin:0 0 8px}
.app-foot{max-width:820px;margin:0 auto;padding:18px 16px 40px;color:var(--ink-3);font-size:.85rem;border-top:1px solid var(--hair)}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sub-accent)}

/* forms */
label{display:block;margin:10px 0;font-weight:600;color:var(--ink);font-size:.92rem}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--hair);border-radius:8px;
  font-size:1rem;font-family:var(--sans);margin-top:4px;background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.ck{display:flex;align-items:center;gap:8px;font-weight:500}
.ck input{width:auto;margin:0}

/* modal */
.modal-wrap{position:fixed;inset:0;background:rgba(11,16,34,.55);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:16px}
.modal{background:var(--card);border-radius:10px;max-width:480px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--hair)}
.modal-head h3{margin:0;color:var(--ink)}
.modal-head .x{background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink-3);line-height:1}
.modal-body{padding:18px}
/* sheet and tall (Phase 1): .sheet = bottom sheet, .tall = sticky head and footer. Both keep id modal-wrap. */
.modal-wrap.tall .modal-head{position:sticky;top:0;z-index:2;background:var(--card)}
.modal-wrap.tall .sheet-foot{position:sticky;bottom:0;z-index:2;background:var(--card);padding-bottom:max(12px,env(safe-area-inset-bottom))}
.modal-wrap.sheet{animation:sheet-dim .3s ease both}
.modal-wrap.sheet .modal{border-radius:30px 30px 0 0;animation:sheet-up .45s cubic-bezier(.22,1,.36,1) backwards;transition:transform .2s}
.sheet-grab{position:relative;width:40px;height:5px;border-radius:3px;background:var(--ink-3);opacity:.45;margin:10px auto 0;touch-action:none}
.sheet-grab::before{content:"";position:absolute;inset:-12px -20px}
.modal-wrap.sheet .modal-head{border-bottom:0}
.modal-wrap.sheet .modal-body{padding-bottom:max(20px,env(safe-area-inset-bottom))}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheet-dim{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.modal-wrap.sheet,.modal-wrap.sheet .modal{animation:none;transition:none}}
@media (max-height:520px){
  .modal-wrap.sheet{align-items:flex-end;padding:4px 16px 0}
  .modal-wrap.sheet .modal{max-width:760px;max-height:calc(100dvh - 8px)}
}

/* toast */
#toast-host{position:fixed;bottom:18px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:80;pointer-events:none}
.toast{background:var(--ink);color:var(--card);padding:11px 18px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.2);
  opacity:0;transform:translateY(12px);transition:all .3s;max-width:90%}
.toast.show{opacity:1;transform:translateY(0)}
.toast.warn{background:#b45309}
.toast.ok{background:var(--gold);color:var(--btn-ink)}
.toast.has-action{display:flex;align-items:center;gap:14px;pointer-events:auto}
.toast-act{background:none;border:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;min-height:44px;min-width:44px;padding:0 6px}
.toast-act:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}

.offline-banner{background:#b45309;color:#fff;text-align:center;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;font-size:.9rem}

/* goals: legacy meter scoped to .meter-card so it never clashes with the KPI .meter */
.meter-card .meter{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.meter-card .meter .dot{padding:6px 12px;border-radius:20px;background:var(--nav-hover);color:var(--ink-3);font-size:.85rem;font-weight:600}
.meter-card .meter.growing .dot.growing{background:var(--gold-soft);color:var(--sub-accent)}
.meter-card .meter.returning .dot.returning{background:var(--nav-hover);color:var(--sub-accent)}
.meter-card .meter.generous .dot.generous{background:var(--gold-soft);color:var(--gold)}
.meter-status{font-size:1.05rem;color:var(--ink)}
.progress{background:var(--meter-track);border-radius:20px;height:16px;overflow:hidden;margin:6px 0}
.progress .bar{background:linear-gradient(90deg,var(--gold-2),var(--gold));height:100%;border-radius:20px;transition:width .4s}

/* streaks */
.streak-card{text-align:center}
.streak-num{font-size:3.4rem;font-weight:800;color:var(--ink)}
.streak-num.up{color:var(--gold)}
.streak-label{color:var(--ink-3);font-weight:600}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.badge{background:var(--card);border:1px solid var(--hair-2);border-radius:10px;padding:14px;text-align:center;font-size:.85rem}
.badge .medal{display:block;font-size:1.8rem;margin-bottom:4px}
.badge.locked{opacity:.45}
.badge.earned{border-color:var(--gold);background:var(--gold-soft)}

/* analytics */
.stat-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:14px}
.stat{text-align:center}
.stat b{display:block;font-size:1.4rem;color:var(--ink)}
.stat span{color:var(--ink-3);font-size:.85rem}

/* impact */
.impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:480px){.impact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.impact-card{padding:14px 4px}.impact-card b{font-size:1.4rem}.impact-card span{font-size:11px}}
.impact-card{background:var(--card);border:1px solid var(--hair-2);border-radius:10px;padding:16px;text-align:center}
.impact-card b{display:block;font-size:2rem;color:var(--gold)}
.impact-card i{display:block;color:var(--ink-3);font-size:.78rem;font-style:normal;margin-top:4px}
.impact-card.off b{color:var(--ink-3)}

/* devotional */
.dev.done{border-color:var(--gold);background:var(--gold-soft)}
.dev blockquote{font-family:var(--serif);color:var(--ink);margin:8px 0;border:0}

/* desk */
.sec{margin:22px 0 4px;border-bottom:2px solid var(--hair);padding-bottom:6px}
.desk-list{list-style:none;margin:0;padding:0}
.desk-list li{padding:12px 0;border-bottom:1px solid var(--hair-2)}
.desk-list li span{display:block;color:var(--ink-3);font-size:.9rem}
.word .sign{color:var(--ink-3);font-style:italic;margin-top:8px}
.sign{display:block;margin-top:6px;color:var(--ink-3);font-style:italic}

/* story / disclosures / misc text */
.story p,.disclosures p{margin:10px 0}
.lead{font-size:1.25rem;color:var(--ink);font-weight:600;font-family:var(--serif)}
.public-page{max-width:820px;margin:0 auto;padding:28px 18px 60px}
.link.back{display:block;margin-top:14px;color:var(--ink-3)}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.crown{color:var(--gold)}
.warn-text{color:#b45309}
.tag{background:var(--nav-hover);color:var(--ink);border-radius:6px;padding:1px 6px;font-size:.75rem}

/* gift list / transactions */
.gift-list{list-style:none;margin:0;padding:0}
.gift-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair-2)}
.gift-row:last-child{border-bottom:0}
.g-amt{font-weight:700;color:var(--ink);font-size:1.05rem}
.g-meta{display:block;color:var(--ink-3);font-size:.85rem}
.g-actions{display:flex;gap:2px}
.txn-list{list-style:none;margin:8px 0;padding:0;max-height:300px;overflow:auto}
.txn{padding:10px;border-bottom:1px solid var(--hair-2)}
.txn.is-gift{background:var(--gold-soft)}
.txn .ck{font-weight:600}

/* dashboard summary row */
.summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:14px 0}
.sum{background:var(--card);border:1px solid var(--hair-2);border-radius:10px;padding:14px 16px}
.sum b{display:block;font-size:1.35rem;color:var(--ink)}
.sum span{color:var(--ink-3);font-size:.82rem}
.sum .up{color:var(--gold);font-size:.82rem;font-weight:600}

/* quick actions / invite / legacy hero card */
.quick-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.invite{background:var(--gold-soft);border-color:var(--hair);border-radius:10px}
.hero-card{background:var(--card);color:var(--ink);border:1px solid var(--hair-2);border-radius:10px;padding:22px;margin:14px 0}
.hero-card .eyebrow{color:var(--sub-accent)}
.legacy{background:var(--card)}
.legacy-num{font-size:2.4rem;font-weight:800;color:var(--ink);margin:8px 0 2px}

/* sidebar "More" divider + secondary nav links */
.nav-div{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:14px 10px 5px;margin-top:6px;border-top:1px solid var(--hair-2)}
nav a.sec{font-size:12.5px;padding:7px 10px}

/* settling pulse on the hero balance / transfer moment */
.card.hero.settling .bal,.ledger .side.e .v.settling{animation:rmih-pulse 1.3s ease}
@keyframes rmih-pulse{0%{text-shadow:0 0 0 transparent}35%{text-shadow:0 0 22px var(--gold)}100%{text-shadow:var(--bal-glow)}}

/* ============================================================
   AUTH + LANDING (pre-login marketing; navy is intentional here)
   ============================================================ */
#auth-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(160deg,#16233F,#0b1f4d);color:#fff}
.auth-head{padding:28px}
.auth-head .brand{font-size:1.2rem;color:#fff}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:16px}
.auth-card{background:var(--card);color:var(--ink);border-radius:10px;padding:26px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-card h2{margin-top:0}
.auth-links{display:flex;justify-content:space-between;margin-top:12px}
.auth-tag{font-family:var(--serif);font-style:italic;padding:0 16px 30px;text-align:center;color:#dbe7ff;max-width:480px}

/* landing hero (full-screen, pre-login). :not(.card) so it never matches the Overview hero card. */
.hero:not(.card){position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:#fff;text-align:center}
.slides{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease-in-out}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide-1{background:radial-gradient(120% 120% at 30% 20%,#16233F 0%,#0b1f4d 60%,#060f2b 100%)}
.slide-2{background:radial-gradient(120% 120% at 70% 30%,#23489f 0%,#0d2350 55%,#070d24 100%)}
.slide-3{background:linear-gradient(135deg,#0b1f4d 0%,#16233F 50%,#2a5298 100%)}
.slide-4{background:radial-gradient(100% 100% at 50% 0%,#2a4ba0 0%,#11265a 55%,#0a1530 100%)}
.slide-1::after,.slide-2::after,.slide-3::after,.slide-4::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 35%,rgba(158,113,27,.22),transparent 70%)}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,15,40,.35),rgba(7,15,40,.72))}
.hero-inner{position:relative;z-index:2;max-width:760px;padding:40px 22px}
.wordmark{font-weight:700;letter-spacing:.4px;color:#dbe7ff;margin-bottom:18px;font-size:1.05rem}
.hero h1{color:#fff;font-size:clamp(2.4rem,6vw,4rem);margin:6px 0;letter-spacing:-1px;line-height:1.05;font-family:var(--sans)}
.hero-sub{color:#dbe7ff;font-size:clamp(1.05rem,2.5vw,1.3rem);max-width:600px;margin:14px auto 22px}
.hero-cta{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero-cta.center{margin-top:18px}
.hero-foot{color:#aac4ff;font-size:.9rem;margin-top:22px;font-style:italic}
.btn.ghost-light{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(4px)}
.link.light{color:#dbe7ff}

/* landing sections */
.lp-sec{max-width:920px;margin:0 auto;padding:56px 20px;text-align:center}
.lp-sec.alt{background:var(--card);max-width:none}
.lp-sec.alt>*{max-width:920px;margin-left:auto;margin-right:auto}
.lp-sec h2,.lp-cta h2,.lp-band h2{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:10px;font-family:var(--sans)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:24px}
.step{background:var(--card);border:1px solid var(--hair-2);border-radius:10px;padding:24px}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--gold);color:var(--btn-ink);font-weight:700;font-size:1.1rem;margin-bottom:10px}
.step h4{color:var(--ink);margin:6px 0}
.step p{color:var(--ink-3);margin:0}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:24px;text-align:left}
.feat{background:var(--nav-hover);border-radius:10px;padding:20px}
.feat h4{color:var(--ink);margin:0 0 6px}
.feat p{color:var(--ink-3);margin:0}
.ten-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
  margin:24px auto 0;padding:0;max-width:760px;text-align:left}
.ten-list li{background:var(--card);border:1px solid var(--hair-2);border-radius:10px;padding:12px 16px;font-weight:600;color:var(--ink)}
.ten-list li::before{content:"\2726 ";color:var(--gold)}
.lp-band{background:linear-gradient(135deg,#16233F,#0b1f4d);color:#fff;text-align:center;padding:60px 20px}
.lp-band h2{color:#fff}
.lp-band p{max-width:680px;margin:10px auto 0;color:#dbe7ff;font-size:1.1rem}
.lp-sec.story .lead{font-family:var(--serif);font-size:1.4rem;color:var(--ink)}
.lp-sec.story p{max-width:720px;margin:12px auto;color:var(--ink);text-align:left}
.lp-cta{text-align:center;padding:60px 20px;background:var(--nav-hover)}
.lp-foot{text-align:center;padding:28px 20px;color:var(--ink-3);font-size:.9rem;background:var(--card);border-top:1px solid var(--hair)}

@media (max-width:760px){
  .hero:not(.card){min-height:80vh}
  .hero-cta .btn.big{width:100%}
  .balance{font-size:2.2rem}
}
@media (prefers-reduced-motion: reduce){
  .slide{transition:none}
}

/* hide microscopic in-chart labels below 640px */
@media(max-width:640px){.chart .vs,.chart .axis-g,.chart text.axis[y="128"]{display:none}}

/* Mobile nav: keep the day/night switch and chip pinned while the nav scrolls; hide the "More" divider inline. */
@media(max-width:743px),(max-width:820px) and (max-height:599px){
  aside{overflow:visible}
  nav{flex:1 1 auto;min-width:0;overflow-x:auto;flex-wrap:nowrap}
  nav .nav-div{display:none}
  nav a.sec{white-space:nowrap;padding:7px 9px}
  nav a.sec span{display:inline}
  .side-foot{flex:none}
}

/* Analytics projection finish-line caption */
.proj-finish{font-size:12.5px;color:var(--ink-3);padding:10px 2px 2px;text-align:center}
.proj-finish .up{font-weight:600}

/* =====================================================================
   ROUND 7 · GRAD SCHOOL: sub-page composition, custom controls, rhythm.
   One spacing scale (24 between cards, 24 card pad / 20 mobile, 16 inside,
   8 label->value). Nothing touches. No native chrome. Links are brand ink.
   ===================================================================== */

/* --- footer + inline links are brand ink, never browser blue --- */
.app-foot a,.view a.inline{color:var(--sub-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--sub-accent) 45%,transparent)}
@media(hover:hover){.app-foot a:hover,.view a.inline:hover{text-decoration-color:currentColor}}

/* --- unified sidebar nav: one language top to bottom, 4px gold active bar --- */
nav a{position:relative;min-height:40px;font-size:13px}
nav a.sec{font-size:13px;padding:8px 10px}
nav a.on{font-weight:600}
nav a.on::before{display:none}
[data-theme="dark"] nav a.on::before,html[data-canvas="hybrid"] nav a.on::before,html[data-canvas="fullblue-deep"] nav a.on::before{box-shadow:0 0 8px var(--gold)}
.nav-div{padding:16px 10px 6px}
@media(max-width:743px),(max-width:820px) and (max-height:599px){nav a.on::before{display:none}}

/* --- custom form controls: zero native chrome, brand focus rings --- */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid var(--hair);border-radius:6px;background:var(--card);position:relative;cursor:pointer;flex:none;margin:0;vertical-align:middle;transition:background .15s,border-color .15s}
@media(hover:hover){input[type=checkbox]:hover{border-color:var(--sub-accent)}}
input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:36%;top:14%;width:26%;height:50%;border:solid #fff;border-width:0 2.5px 2.5px 0;box-sizing:border-box;transform:rotate(45deg)}
[data-theme="dark"] input[type=checkbox]:checked::after{border-color:var(--card)}
input[type=checkbox]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238A90A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
[data-theme="dark"] select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23AEB2C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* date fields: swap the native calendar indicator for our thin-line glyph (same
   stroke family as the select chevron). The native indicator stays in place but
   invisible, so the picker remains fully tappable in every browser. */
input[type=date]{position:relative;min-width:0;max-width:100%;display:block;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5' stroke='%238A90A0' stroke-width='1.3'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3' stroke='%238A90A0' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:40px}
[data-theme="dark"] input[type=date]{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5' stroke='%23AEB2C4' stroke-width='1.3'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3' stroke='%23AEB2C4' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
input,select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}

/* --- the composed sub-page: eyebrow, title, subcaption, then a max-width column --- */
.subpage{max-width:980px}
.subpage.cathedral{max-width:760px;margin:0 auto}
.sub-hd{margin:2px 0 24px}
.sub-hd .eyebrow{display:block;margin-bottom:8px}
.sub-hd h1{font-family:var(--sans);font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.12}
.sub-hd .sub-cap{font-size:13px;color:var(--ink-3);margin-top:7px;line-height:1.5}
.sub-hd .hd-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.sub-body{display:flex;flex-direction:column;gap:24px}
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.sub-grid.thirds{grid-template-columns:2fr 1fr}
.sub-grid .span-2{grid-column:1/-1}
@media(max-width:760px){.sub-grid,.sub-grid.thirds{grid-template-columns:1fr}}

/* sub-page cards use the Overview recipe with a real 24px pad and interior rhythm */
.subpage .card{padding:24px}
@media(max-width:560px){.subpage .card{padding:20px}}
.subpage .card .c-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 16px;padding:0}
.subpage .card .c-hd h2,.subpage .card .c-hd h3{font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink);margin:0}
.subpage .card .c-hd .c-sub{font-size:11.5px;color:var(--ink-3);text-align:right;flex:none}
.subpage .card > h3{font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 16px}
.subpage .card p{font-size:13px;color:var(--ink-2);line-height:1.55}
.subpage .card p + p{margin-top:10px}
.subpage .card .note{font-size:11.5px;color:var(--ink-3);margin-top:14px;line-height:1.5}
.stack{display:flex;flex-direction:column;gap:16px}
.card-actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}

/* sub-page form fields: aligned label column, 8px label->control */
.subpage .fld{display:block;margin:0}
.subpage .fld + .fld{margin-top:16px}
.subpage .fld-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.subpage input,.subpage select{margin-top:0;font-size:.95rem;padding:11px 13px}
.subpage .ck{gap:11px;font-weight:500;color:var(--ink);font-size:13px;margin:0}
.subpage .ck + .fld,.subpage .fld + .ck,.subpage .ck + .ck{margin-top:16px}

/* --- a real segmented control (Goals: Tithe vs Generosity), never clips --- */
.seg{display:flex;background:var(--meter-track);border:1px solid var(--hair-2);border-radius:10px;padding:4px;gap:4px}
.seg .opt{flex:1;text-align:center;padding:10px 8px;border-radius:7px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap;transition:background .2s,color .2s}
.seg .opt .sm{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.seg .opt.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(22,35,63,.12)}
.seg .opt.on.gold{color:var(--gold)}
.seg .opt.on .sm{color:inherit;opacity:.85}
.gen-line{display:flex;align-items:baseline;gap:8px;margin-top:18px;font-size:14px;color:var(--ink)}
.gen-line b{color:var(--gold);font-weight:700}
.gen-line .pctv{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
.gen-quote{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink);line-height:1.5;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair-2)}
.gen-quote b{font-family:var(--sans);font-style:normal;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-left:6px}

/* goal progress ring/bar refined */
.subpage .progress{background:var(--meter-track);border-radius:20px;height:12px;overflow:hidden;margin:0}
.goal-figs{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.goal-figs .big{font-size:26px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
.goal-figs .of{font-size:12.5px;color:var(--ink-3)}
.goal-figs .of b{color:var(--ink-2);font-weight:600}
.goal-pct{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

/* --- Faithfulness: the keepsake streak, engraved feel --- */
.keepsake{text-align:center;padding:38px 24px 34px;position:relative;overflow:hidden}
.keepsake .rule{width:64px;height:1px;background:var(--hair);margin:0 auto;position:relative}
.keepsake .rule::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg)}
.keepsake .crown-lg{margin:0 auto 4px;display:block}
.keepsake .k-num{font-size:66px;font-weight:800;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:14px 0 6px}
[data-theme="dark"] .keepsake .k-num{text-shadow:0 0 26px #D4AF5A44}
.keepsake .k-unit{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.keepsake .k-say{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);margin-top:18px;line-height:1.5}
.milestones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.ms{border:1px solid var(--hair-2);border-radius:10px;padding:18px 14px;text-align:center;background:var(--card);transition:.2s}
.ms .crown-badge{margin-bottom:8px}
.ms.earned{border-color:var(--gold);background:var(--gold-soft)}
.ms.locked{opacity:.5}
.ms .ms-lbl{font-size:12px;font-weight:600;color:var(--ink);line-height:1.35}
.ms .ms-state{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.ms.earned .ms-state{color:var(--gold)}

/* --- Analytics KPI tiles reuse the Overview tile recipe --- */
.subpage .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:640px){.subpage .kpis{grid-template-columns:1fr}}
.subpage .kpi{padding:18px 18px}
.subpage .kpi .lbl{margin-bottom:8px}
.subpage .kpi .v{font-size:22px;font-weight:700;margin:0}
.subpage .kpi .s{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.chart-cap{font-size:11.5px;color:var(--ink-3);margin-top:14px;padding-top:12px;border-top:1px solid var(--hair-2);text-align:center}
.chart-cap .up{font-weight:600}
.nw{white-space:nowrap}
.evt .rcp{display:block}
.cap-l{display:block;text-wrap:balance}
.subpage .card .chart-cap + p.disc{text-align:center;font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:6px;text-wrap:balance}
.chart-wrap{margin-top:4px}

/* --- Impact: the rail icon language, larger --- */
.impact-lead{font-size:14px;color:var(--ink-2);margin-bottom:4px}
.impact-lead b{color:var(--gold);font-weight:700}
.impact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:480px){.impact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.impact-card{padding:14px 4px}.impact-card b{font-size:1.4rem}.impact-card span{font-size:11px}}
.impact-card{padding:20px 16px;border-color:var(--hair-2)}
.impact-card .ic{display:inline-flex;color:var(--sub-accent);margin-bottom:8px}
.impact-card .ic svg{width:22px;height:22px}
.impact-card .ic svg *{stroke:currentColor}
.impact-card b{font-size:1.9rem;line-height:1}
.impact-card span{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:6px}

/* --- Devotional + Steward's Desk: the cathedral reading column --- */
.reading{max-width:720px}
.reading.center{margin:0 auto}
.dev-card{padding:24px}
.dev-card .dev-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dev-card blockquote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);border:0;margin:0}
.dev-card cite{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sub-accent);font-style:normal;margin-top:12px}
.dev-card .reflection{font-size:13px;color:var(--ink-2);margin-top:16px;padding-top:16px;border-top:1px solid var(--hair-2);line-height:1.6}
.dev-card.done{border-color:var(--gold)}
.mark{background:none;border:0;color:var(--sub-accent);cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:7px}
@media(hover:hover){.mark:hover{background:var(--nav-hover)}}
.dev-card.done .mark{color:var(--gold)}
.desk-sec{margin-top:8px}
.desk-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sub-accent);margin:0 0 14px}
.desk-word{padding:24px}
.desk-word .w-date{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.desk-word h3{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);margin:8px 0 10px}
.desk-word .sign{display:block;margin-top:14px;font-family:var(--sans);font-style:italic;color:var(--ink-3);font-size:13px}
.desk-list{list-style:none;margin:0;padding:0}
.desk-list li{padding:16px 0;border-bottom:1px solid var(--hair-2)}
.desk-list li:first-child{padding-top:0}
.desk-list li:last-child{border-bottom:0;padding-bottom:0}
.desk-list li strong{font-size:13.5px;color:var(--ink);font-weight:600}
.desk-list li a{color:var(--sub-accent);text-decoration:none}
@media(hover:hover){.desk-list li a:hover{text-decoration:underline;text-underline-offset:3px}}
.desk-list li span{display:block;color:var(--ink-3);font-size:12px;margin-top:4px;line-height:1.5}

/* --- Account: settings-grade rows --- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair-2)}
.set-row:first-child{padding-top:0}
.set-row:last-child{border-bottom:0;padding-bottom:0}
.set-row .k{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.set-row .v{font-size:14px;color:var(--ink);font-weight:600;margin-top:3px}
.set-row .plan-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:var(--gold-soft);border-radius:20px;padding:4px 11px}
.legacy-card{text-align:center;padding:30px 24px}
.legacy-card .l-num{font-size:34px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;margin:12px 0 4px;line-height:1}
[data-theme="dark"] .legacy-card .l-num{text-shadow:0 0 22px #D4AF5A33}
.legacy-card .l-verse{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);line-height:1.5}

/* =====================================================================
   ROUND 7b · MOBILE = OPTION C ("The App"). At <=820px the app becomes a
   native-pattern shell: fixed bottom tab bar + slim sticky top row. Desktop
   (>820px) is untouched. Numbers still come from the live store (this is a
   navigation-shell + layout change, not a data change).
   ===================================================================== */

/* Sanctioned desktop fix (the ONLY desktop change this round): the secondary
   nav links (.sec) were inheriting the legacy .sec section underline. Kill it. */
nav a.sec{border-bottom:none}

/* Mobile chrome is hidden on desktop. */
.m-topbar,.tabbar{display:none}

/* new mobile pages (Positions list + More sheet); reachable at any width */
.subpage .pos-card{padding:8px 22px}
.pos-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair-2)}
.pos-row:last-of-type{border-bottom:none}
.pos-nm{font-weight:600;font-size:13.5px;color:var(--ink);min-width:0}
.pos-nm small{display:block;font-weight:400;font-size:11px;color:var(--ink-3);margin-top:2px}
.pos-spark{display:flex;align-items:center}
.pos-spark .spark{margin:0}
.pos-rt{text-align:right}
.pos-bal{font-weight:700;font-size:13.5px;color:var(--ink)}
.pos-gr{font-size:11.5px;font-weight:600;color:var(--gold);margin-top:2px}
.pos-foot{padding:14px 0 2px;font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--hair)}
.pos-foot b{color:var(--gold);font-weight:600}
.subpage .more-list{padding:6px 22px}
.more-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--hair-2);text-decoration:none;color:var(--ink);min-height:44px}
.more-row:last-child{border-bottom:none}
.more-tx strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.more-tx span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.more-ar{color:var(--gold);font-size:18px;flex:none}
@media(hover:hover){.more-row:hover{background:var(--row-hover)}}

@media(max-width:743px),(max-width:820px) and (max-height:599px){
  /* the desktop sidebar never renders on mobile (Option C law) */
  aside{display:none}
  .shell{display:block}
  .shell main{padding:14px 15px calc(84px + env(safe-area-inset-bottom))}


  /* slim sticky top row: serif wordmark + day/night (or a back affordance) */
  .m-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:40;padding:calc(11px + env(safe-area-inset-top)) 16px 11px;background:var(--canvas)}
  .m-topbar .m-wm{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink);line-height:1}
  .m-topbar .m-wm b{color:var(--gold);font-weight:600}
  .m-topbar .m-back{display:none;color:var(--sub-accent);font-weight:600;font-size:13.5px;text-decoration:none;
    align-items:center;min-height:44px}
  .m-topbar.has-back .m-back{display:inline-flex}
  .m-topbar.has-back .m-wm{display:none}
  .m-topbar .switch{margin:0}

  /* the page topbar (Overview title / as-of / live pill / send button) is
     replaced by the top row + Give tab on mobile */
  .view > .topbar{display:none}

  /* first screenful order (mockup C): hero, chart, KPI chips, activity, then
     eleven / witnesses / two-columns / fruit. Positions move to their own tab. */
  .content .col-main{gap:16px}
  .col-main > .hero{order:1}
  .col-main > .kpis{order:2}
  .col-main > .activity-card{order:3}
  .col-main > .eleven{order:4}
  .col-main > .witness{order:5}
  .col-main > .two-col{order:6}
  .col-main > .fruit{order:7}
  .col-main > footer{order:9}
  .col-main > .positions-card{display:none}

  /* KPI strip becomes ONE horizontal snap-scroll row of chips */
  .col-main > .kpis{display:flex;grid-template-columns:none;overflow-x:auto;gap:10px;
    padding-bottom:2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .col-main > .kpis .kpi{flex:0 0 calc((100% - 10px) / 2);min-width:0;scroll-snap-align:start}
  .col-main > .kpis::-webkit-scrollbar{height:0}

  /* Give opens the record-a-gift flow as a full-screen view, not a cramped modal */
  .modal-wrap{padding:0;align-items:stretch}
  .modal{max-width:none;border-radius:0;max-height:100vh;min-height:100vh}
  .modal-head{padding-top:calc(16px + env(safe-area-inset-top))}
  .modal-wrap.sheet{align-items:flex-end}
  .modal-wrap.sheet .modal{min-height:0;max-height:92dvh;border-radius:30px 30px 0 0}
  .modal-wrap.sheet .modal-head{padding-top:16px}
  .modal-wrap.sheet .modal-body{padding-bottom:max(20px,env(safe-area-inset-bottom))}

  /* fixed bottom tab bar: Overview · Positions · Give(center,raised gold) · Scripture · More */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;overflow:visible;
    align-items:flex-end;justify-content:space-around;
    padding:8px 6px calc(9px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--hair-2)}
  [data-theme="dark"] .tabbar{box-shadow:0 -2px 18px rgba(4,9,20,.4)}
  .tabbar a,.tabbar .give{display:flex;flex-direction:column;align-items:center;gap:3px;
    width:62px;min-height:44px;padding:4px 0;background:none;border:0;border-radius:0;cursor:pointer;
    text-decoration:none;font-family:var(--sans);font-size:10px;font-weight:600;
    letter-spacing:.04em;color:var(--ink-3)}
  /* labels under ALL five tabs (round-7b law). The legacy horizontal-sidebar rule
     `nav a span{display:none}` was hiding them because .tabbar is a <nav>. */
  .tabbar a span{display:block;font-size:12px;letter-spacing:.04em}
  /* the tab bar is a <nav>; neutralize the sidebar nav a.on/hover bleed (gold-only active) */
  .tabbar a.on{background:none;color:var(--ink-3)}
  @media(hover:hover){.tabbar a:hover{background:none;color:var(--ink-3)}}
  .tabbar a.on{color:var(--gold)}
  .tabbar a svg,.tabbar .give svg{width:22px;height:22px}
  .tabbar a svg *,.tabbar .give svg *{stroke:currentColor}
  .tabbar a svg circle{fill:currentColor;stroke:none}
  .tabbar .give{position:relative}
  .tabbar .give::before{content:"";display:block;width:22px;height:22px}
  .tabbar .give .gwrap{position:absolute;top:-26px;left:50%;margin-left:-26px;width:52px;height:52px;border-radius:50%;background:var(--gold);
    display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(158,113,27,.4)}
  [data-theme="dark"] .tabbar .give .gwrap{box-shadow:0 6px 18px rgba(212,175,90,.5)}
  .tabbar .give .gwrap svg *{stroke:var(--btn-ink)}
  .tabbar .give span{color:var(--gold);margin-top:0}

  /* the app footer sits above the fixed tab bar */
  .app-foot{padding-bottom:16px}
}

.by{display:flex;align-items:center;gap:8px;margin-top:10px}.by b{margin-left:0!important}
.trey-av.sm{width:30px;height:30px;border-width:1px}
.bio{display:flex;gap:18px;align-items:flex-start}.trey-av.lg{width:104px;height:104px}
@media(max-width:520px){.bio{flex-direction:column;align-items:center;text-align:center}}

/* Desktop: Day/Night switch and account chip stay pinned to the bottom of the side menu */
@media(min-width:821px),(min-width:744px) and (min-height:600px){.side-foot{position:sticky;bottom:0;z-index:2;background:var(--side);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);margin-left:-14px;margin-right:-14px;padding:12px 14px 16px;margin-bottom:-18px}}

/* Wave A S1: "This Week" rail on sub-pages (fills the empty right column on wide screens) */
.sub-wrap{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:24px;align-items:start}
.sub-wrap > .subpage{max-width:none}
.wk-rail .card{padding:15px 17px}
.wk-rail .wk-go{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;min-height:44px}
@media(max-width:1180px){.sub-wrap{grid-template-columns:1fr}.wk-rail{display:none}}

/* Wave A S1: Morning Light soft header band (Day sky asset under a gradient wash; fades into the canvas) */
body:not(.plus) .shell main{position:relative;isolation:isolate}
body:not(.plus) .shell main::before{content:"";position:absolute;inset:0 0 auto 0;height:240px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,249,245,0) 55%,var(--canvas) 100%),url(../assets/x/app-premium-sky-day-wide.webp) center 30%/cover}
[data-theme="dark"] body:not(.plus) .shell main::before{background:linear-gradient(180deg,#26386A 0%,var(--canvas) 100%);opacity:.7}

/* Wave A S1: balanced wrapping (no one- or two-word last lines) and 44px tap targets on phones */
.subpage p,.sub-hd .sub-cap,.mv-hd p,.disclosures p,.story p,.scripture-intro p,.note,.desk-word p{text-wrap:balance}
@media(max-width:900px){
  nav a,nav a.sec{min-height:44px}
  .switch{width:72px;height:44px;border-radius:22px}
  .switch .knob{width:36px;height:36px;top:3px;left:3px}
  [data-theme="dark"] .switch .knob{left:33px}
  .switch .ic{width:16px;height:16px}
  .app-foot a{position:relative;padding:0;text-decoration:none;background:linear-gradient(var(--ul),var(--ul)) 0 100%/100% 1px no-repeat;--ul:color-mix(in srgb,var(--sub-accent) 45%,transparent)}.app-foot a::before{content:"";position:absolute;inset:-12px -6px}
  .m-topbar .m-back{min-height:44px}
  .card.hero .tabs button,.tabs button{min-height:44px;min-width:44px}
}

/* Wave A S1: remaining 44px targets and balanced wraps */
@media(max-width:900px){
  .m-back{min-width:44px;justify-content:center}
  .btn,.sub-body button,.sub-body select,.sub-body input:not([type=checkbox]),.dev-card .mark,#add-gift{min-height:44px}
  input[type=checkbox]{width:28px;height:28px} .ck{min-height:44px}
}
.c-hd h2,.card .note,.sub-grid p{text-wrap:balance}
.milestones{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.milestones{grid-template-columns:repeat(2,1fr)}}
.c-hd h2,.card .note{text-wrap:balance;overflow-wrap:normal}
.card.lit .note{max-width:none}
.sub-body .c-hd h2{white-space:nowrap}
.sub-body .c-hd{flex-wrap:wrap;row-gap:4px}

/* Wave A fix round: rail extras, sidebar sky wash */
.rail .rail-streak{text-align:center}
.rail .rail-gifts .wk-go{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.rail-streak .rs-n{font-family:var(--sans);font-weight:700;font-size:40px;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--gold)}
.rail-streak .rs-u{color:var(--ink-2);font-size:13px;margin-bottom:6px}
.rail .wk-go{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;font-size:16px;border-radius:7px;text-decoration:none}
@media(min-width:821px),(min-width:744px) and (min-height:600px){
  body:not(.plus) aside{background-image:linear-gradient(180deg,var(--side) 0%,color-mix(in srgb,var(--side) 78%,transparent) 100%),url(../assets/x/app-premium-sky-day-wide.webp);background-size:auto,cover;background-position:center,left 30%}
  html[data-theme="dark"] body:not(.plus) aside{background-image:linear-gradient(180deg,var(--side),var(--side))}
}
.page-extras{display:none}
@media(min-width:1100px){.page-extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;margin-top:28px}}
.pe-col{display:grid;gap:24px;align-content:start}

@media(min-width:821px) and (max-height:520px){.side-foot{position:static;margin-bottom:0}}

/* Wave A S1 round 2: chart labels hold 11 px on a phone (--k is set by ui.js), the quote never leaves a lone word. */
@media(max-width:743px),(max-width:820px) and (max-height:599px){
  .chart .axis,.chart .axis-g{font-size:calc(11.5px*var(--k,1))}
  .chart .vs{font-size:calc(12px*var(--k,1))}
}

/* Round 2: the .sec desk heading rule (22px top margin) was also hitting every "More" nav link, spreading them out of the sidebar. */
nav a.sec{margin:0}

.scripture .v{text-wrap:balance}
@media(max-height:500px) and (max-width:900px){.topbar .live{display:none}}

/* Round 3: Morning subpages show the three-card row at every width 700px and up (stacked under 1000px), card padding, balanced footer. */
@media(min-width:700px){body:not(.plus) .page-extras{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;margin-top:24px}}
@media(min-width:700px) and (max-width:999px){body:not(.plus) .page-extras{grid-template-columns:repeat(2,minmax(0,1fr))}body:not(.plus) .page-extras>.card:last-child{grid-column:1/-1}}
@media(min-width:1000px){body:not(.plus) .page-extras{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.page-extras .wk-go{margin-top:10px}
.app-foot .muted{display:inline-block}.app-foot .muted span{display:inline-block}
.page-extras .card{padding:18px 20px}
.card.disclosures,.card.story{padding:22px 26px}
@media(max-width:560px){.card.disclosures,.card.story{padding:18px 20px}}
.app-foot,.quote-card .q,.scripture .v{text-wrap:balance}

.app-foot .fd{font-style:normal}
@media(max-width:1099px){.app-foot .fd{display:none}.app-foot .muted{display:block;margin-top:4px}}
@media(max-width:1099px){.page-extras .btn.small{display:inline-flex;align-items:center;min-height:44px}}
@media(max-width:560px){body:not(.plus) .story p{text-wrap:pretty}}

/* --- Scoreboards (Salvation, Missions, Local Church) --- */
.sb-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--meter-track);border:1px solid var(--hair-2);border-radius:10px;padding:4px}
.sb-tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-3);text-align:center;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
@media(hover:hover){.sb-tabs a:hover{color:var(--ink)}}
.sb-tabs a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(22,35,63,.12)}
.sb-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sb-hero{text-align:center;padding:34px 24px 30px;border-top:3px solid var(--gold)}
.subpage .sb-hero{padding:34px 24px 30px}
.sb-big{font-family:var(--sans);font-size:clamp(48px,9vw,72px);font-weight:700;line-height:1;color:var(--gold);margin:14px 0 10px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.subpage .sb-hero .sb-sub{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);text-wrap:balance}
.subpage .sb-hero .note{text-wrap:balance}
.sb-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:1500px){.sb-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sb-tiles .kpi .lbl{text-wrap:balance}
/* numbers line up across a row when one label wraps */
.sb-tiles .kpi{display:flex;flex-direction:column}
.sb-tiles .kpi .v{margin-top:auto}
.sb-tiles .kpi .v{color:var(--gold);font-size:24px}
.sb-tiles .kpi .s{text-wrap:balance}
.sb-prog .bar{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--gold-2),var(--gold));animation:sbgrow 1.1s ease-out both}
@keyframes sbgrow{from{width:0}}
.sb-act{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sb-act li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--hair-2)}
.sb-act li:first-child{border-top:0;padding-top:0}
.sb-act li:last-child{padding-bottom:0}
.sb-a-tx,.sb-a-rt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-a-rt{text-align:right;flex:none}
.sb-act strong{font-size:13.5px;font-weight:600;color:var(--ink)}
.sb-act small{font-size:11.5px;color:var(--ink-3)}
.sb-a-rt b{font-size:14px;color:var(--gold);font-weight:700}
.sb-empty{color:var(--ink-3);font-size:13px}
.sb-verse{text-align:center}
.sb-verse blockquote{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--ink);margin:12px 0 10px;text-wrap:pretty}
.sb-verse cite{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.sb-actions{display:flex;gap:12px}
.sb-actions .btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;text-align:center}
@media(max-width:420px){.sb-actions{flex-direction:column}}
.sb-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1180px){.sb-hub{grid-template-columns:minmax(0,1fr)}}
.sb-hub-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}
@media(hover:hover){.sb-hub-card:hover{border-color:var(--gold)}}
.sb-hub-n{font-family:var(--serif);font-size:38px;font-weight:700;color:var(--gold);line-height:1.05;margin-top:6px}
.sb-hub-s{font-size:12px;font-weight:600;color:var(--ink-2)}
.sb-hub-d{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:4px;text-wrap:pretty}
.sb-hub-go{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:700;color:var(--gold);min-height:44px;display:flex;align-items:flex-end}
@media(prefers-reduced-motion:reduce){.sb-prog .bar{animation:none}}
.sb-tabs a.on::before,.sb-tabs a::before{display:none!important}
.subpage.sb-page{margin:0 auto}

@media(min-width:641px){body:not(.plus) .card.hero svg.chart text.axis-g[x="712"]{transform:translateY(-4px)}}

/* Audit 2026-10-23 fixes */
html,body,button,a,.more-row,.tabbar a,.chip{touch-action:manipulation}
.view a.inline{color:var(--gold);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.btn,.more-row{min-height:44px}
html[data-theme="dark"]{--ink-3:#9AA1BA;--meter-track:rgba(255,255,255,.14)}
html[data-theme="dark"] .btn.ghost{border-color:rgba(234,229,214,.35)}
html[data-theme="light"]{--ink-3:#646B7D}

/* Audit round 2 */
@media(max-width:743px),(max-width:820px) and (max-height:599px){.impact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sub-grid.solo{grid-template-columns:1fr}
.scripture-intro .r{font-size:12px;letter-spacing:.06em;color:var(--ink-3);margin-top:8px}

/* Phone hero graph (Mockup A, 2026-10-23) */
.hg-quote{display:none}
.chart.hg{--gtxt:#7A5510;--sub:#4A5468;overflow:hidden}
[data-theme="dark"] .chart.hg{--gtxt:#E2C069;--sub:#AEB2C4}
.chart.hg .g{stroke:var(--grid)}
.chart.hg .ln{fill:none;stroke:url(#hgLg);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:hgdraw 3.6s cubic-bezier(.4,.1,.2,1) .3s forwards}
[data-theme="dark"] .chart.hg .ln{filter:url(#hgGlow)}
[data-theme="light"] .chart.hg .ln{filter:drop-shadow(0 2px 5px rgba(184,134,43,.45))}
.chart.hg .fill{opacity:0;animation:hgfade 1.6s ease 2s forwards}
.chart.hg .fade{opacity:0;animation:hgfade .8s ease forwards}
.chart.hg .l1{animation-delay:1s}.chart.hg .l2{animation-delay:3.7s}.chart.hg .l3{animation-delay:3.2s}
@keyframes hgdraw{to{stroke-dashoffset:0}}
@keyframes hgfade{to{opacity:1}}
.chart.hg .t{font:600 calc(12.5px*var(--k,1)) var(--sans);fill:var(--sub)}
.chart.hg .t.tg{fill:var(--gtxt)}
.chart.hg .v{font:700 calc(14px*var(--k,1)) var(--sans);fill:var(--gtxt)}
.chart.hg .vb{font:700 calc(17px*var(--k,1)) var(--sans);fill:var(--gtxt)}
[data-theme="dark"] .chart.hg .vb{filter:drop-shadow(0 0 6px rgba(226,192,105,.55))}
.chart.hg .today{stroke:var(--sub);stroke-width:1;stroke-dasharray:2 4;opacity:.7}
.chart.hg .crown{opacity:0;animation:hgfade 1s ease 3.6s forwards}
@media(prefers-reduced-motion:reduce){.chart.hg *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}
@media(max-width:640px){
.hg-quote{display:block;margin:6px 0 0;padding:8px 12px;background:var(--gold-soft);border-radius:10px}
.hg-quote q{display:block;font:italic 500 17px/1.25 var(--serif);color:var(--ink);quotes:none;text-wrap:balance}
.hg-quote cite{display:block;margin-top:2px;font:600 12px var(--sans);font-style:normal;color:#7A5510;letter-spacing:.04em;text-transform:uppercase}
[data-theme="dark"] .hg-quote cite{color:#E2C069}
.card.hero .foot{font-size:12px;margin-top:4px;gap:2px 6px}
}


/* ---- Salvations tracker (device-only) ---- */
.sv-card .sv-sub{margin:-4px 0 6px;color:var(--ink-3);text-wrap:balance}
.sv-card .sv-hero{border:0;padding:8px 0 14px;text-align:center}
.sv-card .sb-big{font-size:72px;margin:4px 0 8px}
.sv-card .sb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-card .sb-tiles .kpi{text-align:center}
.sv-h{font-size:15px;margin:18px 0 6px}
.sv-list{list-style:none;margin:0;padding:0}
.sv-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 4px;background:none;border:0;border-bottom:1px solid var(--line,rgba(128,128,128,.2));color:inherit;font:inherit;text-align:left;cursor:pointer}
.sv-list li:last-child .sv-row{border-bottom:0}
.sv-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--card,#fff);font-weight:700;font-size:14px}
.sv-who{display:flex;flex-direction:column;min-width:0}
.sv-who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-who .mut{color:var(--ink-3);font-weight:600}
.sv-who small,.sv-when{color:var(--ink-3);font-size:13px}
.sv-fine{margin:10px 0 14px;text-wrap:balance}
.sv-card .btn.full{width:100%;min-height:48px}
.sv-funded{font-size:15px;margin:22px 0 -4px;font-family:var(--serif);color:var(--ink-2)}
.sv-rail .sv-big{font-family:var(--sans);font-size:44px;font-weight:700;line-height:1;color:var(--gold);margin:8px 0 4px;font-variant-numeric:tabular-nums}
.sv-rail .sv-cap{color:var(--ink-3);font-size:13px}
.sv-rail .sv-none{color:var(--ink-3);margin:8px 0}
.sv-rail-act{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.sv-rail-act .btn{min-height:44px}
.sv-rail-act .btn{text-decoration:none;align-self:stretch;flex:1 1 0;min-width:0;padding-left:10px;padding-right:10px;justify-content:center}
.sv-err{color:#b3261e;min-height:1em}
#modal-wrap .seg button,#modal-wrap .fld input{min-height:44px}
@media(max-height:520px){
  .sv-card .sb-big{font-size:56px}
  .sv-card .sv-hero{padding:0 0 8px}
}
@media(max-height:520px) and (min-width:700px){
  .sv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
#modal-wrap .seg button{flex:1;border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--ink-3);padding:10px 8px;border-radius:7px;cursor:pointer;white-space:nowrap}
#modal-wrap .seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(22,35,63,.12)}
.sv-card .sb-tiles{margin-bottom:18px}
@media (max-height:520px) and (min-width:700px){
  #modal-wrap:has(#sv-save) .modal-body{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  #modal-wrap:has(#sv-save) .modal-body>.note,#modal-wrap:has(#sv-save) .modal-body>.sheet-foot,#modal-wrap:has(#sv-save) .modal-body>.fld:has(.seg){grid-column:1/-1}
}

/* ---- Heart Split control (heart.js) ---- */
.hs-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:6px 0 10px}
.hs-title{font-family:var(--serif);font-size:1.25rem;margin:0;outline:none}
.hs-acts{display:flex;gap:4px;flex-wrap:wrap}
.hs-text{background:none;border:0;color:var(--gold);font:600 .9rem var(--sans);min-height:44px;padding:0 10px;cursor:pointer}
.hs-donut{position:relative;width:150px;height:150px;border-radius:50%;margin:4px auto 14px;background:var(--hair)}
.hs-hole{position:absolute;inset:26px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hs-hole b{font:700 26px/1.1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.hs-hole span{font-size:12px;color:var(--ink-3)}
.hs-row{padding:6px 0;border-bottom:1px solid var(--hair-2)}
.hs-row:last-child{border-bottom:0}
.hs-l1{display:flex;align-items:center;gap:8px;min-height:44px}
.hs-dot{width:10px;height:10px;border-radius:50%;flex:none}
.hs-name{font-weight:600;flex:1;min-width:0}
.hs-read{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right;white-space:nowrap}
.hs-lock{width:44px;height:44px;flex:none;display:grid;place-items:center;background:none;border:0;border-radius:8px;color:var(--ink-3);cursor:pointer}
.hs-lock.on{color:var(--gold)}
.hs-lock:not(.on) .hs-sh{transform:translate(2px,-2px) rotate(18deg);transform-origin:8px 11px}
.hs-l2{display:flex;align-items:center;gap:6px}
.hs-step{width:44px;height:44px;flex:none;border-radius:50%;background:var(--card);border:1px solid var(--hair);color:var(--ink);font:600 1.25rem var(--sans);cursor:pointer;display:grid;place-items:center;padding:0}
.hs-step:disabled,.hs-range:disabled{opacity:.4;cursor:default}
.hs-row.locked .hs-name,.hs-row.locked .hs-read{color:var(--ink-3)}
.hs-range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.hs-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--c) var(--p,0%),var(--meter-track) var(--p,0%));border:1px solid var(--hair)}
.hs-range::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--c) var(--p,0%),var(--meter-track) var(--p,0%));border:1px solid var(--hair)}
.hs-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;border:2px solid var(--card);background:var(--gold);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hs-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);background:var(--gold);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hs-range:focus-visible,.hs-step:focus-visible,.hs-lock:focus-visible,.hs-text:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hs-hint{min-height:1.4em;margin:6px 0 0;font-size:.9rem;color:var(--ink-2)}
.hs-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-height:520px) and (min-width:700px){.hs-donut{width:120px;height:120px}.hs-hole{inset:22px}.hs-hole b{font-size:22px}}

/* Phase 6: Heart Split switch, quick amounts, quiet link, invite card */
.toggle{position:relative;flex:none;width:51px;height:31px;border-radius:16px;border:0;padding:0;background:var(--hair);cursor:pointer;transition:background .2s}
.toggle::after{content:"";position:absolute;inset:-7px -4px}
.toggle .knob{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.toggle[aria-checked="true"]{background:var(--gold)}
.toggle[aria-checked="true"] .knob{transform:translateX(20px)}
.sub-body .toggle,.toggle{min-height:0}
.toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.qa-chips{display:flex;gap:8px;margin:-4px 0 14px}
.qa-chip{flex:1 1 0;min-height:44px;border:1px solid var(--hair);border-radius:7px;background:transparent;color:var(--ink);font:600 .9rem var(--sans);cursor:pointer}
.hs-quiet{margin:-4px 0 14px}
.hs-link{background:none;border:0;padding:0;color:var(--gold);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;min-height:44px}
.hs-sec{margin:6px 0 14px}
.hs-defrow{display:flex;justify-content:flex-end}
.hs-fine{margin:0 0 12px}
.hs-invite{border:1px solid var(--hair);border-radius:9px;padding:12px 14px;margin:2px 0 14px}
.hs-inv-t{font:600 1.05rem var(--serif);color:var(--ink);margin-bottom:4px}
.hs-invite p{margin:0 0 10px;font-size:13.5px;color:var(--ink-2);text-wrap:pretty}
.hs-invite .row.end{justify-content:flex-start;flex-wrap:wrap;gap:8px}
.hs-invite .row.end{flex-direction:column;align-items:stretch}.hs-invite .btn{width:100%;min-height:44px}

/* Phase 7: Heart Split on the dashboard, Edit Split sheet */
.hs-card-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hs-card-hd .lbl{margin:0}
.hs-edit-btn{white-space:nowrap;flex:none}
.hs-chip{display:inline-block;margin:2px 0 8px;padding:4px 10px;border-radius:999px;border:1px solid var(--hair);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.hs-mini{margin:12px 0 8px}
.hs-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--hair);transform-origin:left;animation:hs-grow .6s ease-out}
.hs-bar i{display:block;height:100%}
@keyframes hs-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hs-bar{animation:none}}
.hs-legend{margin:8px 0 0}
.hs-lg{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-height:28px;font-size:13.5px}
.hs-lgn{flex:1;min-width:0;font-weight:600}
.hs-lgv{color:var(--ink-2);white-space:nowrap}
.hs-dot-x{background-image:repeating-linear-gradient(135deg,transparent 0 3px,var(--card) 3px 5px)}
.hs-lg .hs-text{flex-basis:100%;text-align:left;padding:0;min-height:44px}
.hs-hr{border:0;border-top:1px solid var(--hair-2);margin:14px 0 0}
.hs-basis{margin:12px 0 0;font-size:12.5px;text-wrap:pretty}
.hs-impact-card{margin-bottom:16px}
.es-cols{display:block}
#modal-wrap .es-tabs{display:flex;margin:0 0 6px}
.es-cap{margin:2px 0 12px;text-wrap:pretty}
.es-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#modal-wrap .fld select,#modal-wrap .fld input[type=date],#modal-wrap .fld input[type=text]{min-height:44px;width:100%}
#modal-wrap .es-left .fld,#modal-wrap .es-left #es-scope .fld{margin:0 0 12px}
.es-prev{margin:4px 0 12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.es-start{margin:0 0 10px;text-align:center}
#es-save:disabled{opacity:.45}
@media(max-height:520px) and (min-width:700px){
  .es-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  #modal-wrap .es-left .fld{margin-bottom:8px}
  #modal-wrap #es-host .hs-donut{width:96px;height:96px;margin:0 auto 6px}
  #modal-wrap #es-host .hs-hole{inset:18px}
  #modal-wrap #es-host .hs-hole b{font-size:18px}
  #modal-wrap #es-host .hs-hole span{font-size:10px}
}

/* fix round 1: V3 non-text contrast, A-5 wrapping, A-9 shrink, composite polish */
.hs-bar{box-shadow:inset 0 0 0 1px var(--ink-3)}
.hs-bar i+i{box-shadow:inset 1px 0 0 var(--card)}
.hs-chip{border-color:var(--ink-3)}
.toggle{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.toggle[aria-checked="true"]{box-shadow:none}
.qa-chip{border-color:var(--ink-3)}
.qa-chip.on{border-color:var(--gold);background:var(--gold);color:var(--card,#fff)}
.sub-grid.solo,.sub-grid.solo>*,.sb-card,.goals-card{min-width:0}
.sv-card h2,.sv-card .c-hd,.sv-who strong,.sv-card .sb-tiles .kpi{overflow-wrap:anywhere}
.sv-h,.sb-page h1,.page-hd h1{font-family:var(--serif)}
.sv-av{background:linear-gradient(135deg,var(--gold-2,var(--gold)),var(--gold))}
.sv-card .btn.full.gold{background:linear-gradient(135deg,var(--gold-2,var(--gold)),var(--gold));color:#1a1408;border:0;font-weight:700}
#modal-wrap:has(#sv-save) .sheet-foot{flex-direction:column-reverse;align-items:stretch}
#modal-wrap:has(#sv-save) .sheet-foot .btn{width:100%;min-height:48px}
.modal-wrap.tall .sheet-foot{padding-top:10px}
.sheet-foot .note{flex:1 1 100%;margin:0 0 6px;text-align:left}
@media(orientation:landscape) and (max-height:520px){
  .sv-card .sb-big{font-size:44px;margin:0}
  .sv-card .sb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
}
.sv-card .btn.full.gold{background:linear-gradient(180deg,#d9a93f,#b98a26);color:#1a1408;box-shadow:0 2px 8px rgba(120,80,0,.25)}
.sv-card .sb-tiles .kpi .v,.sv-card .sb-tiles .kpi strong,.sv-card .sb-tiles .kpi b{font-family:var(--serif)}
.sv-card .sb-tiles{gap:10px}
.sheet-foot{flex-wrap:wrap}
.sheet-foot .btn{white-space:nowrap}
.sheet-foot .hs-fine{flex:1 1 100%;order:-1;margin:0 0 6px;text-align:center}
.modal-wrap:has(#sv-save) .modal-head h3,.modal-wrap:has(.hs-sec) .modal-head h3,.hs-title{font-family:var(--serif);font-size:1.35rem}
.modal-wrap:has(#sv-save) .seg button.on{background:linear-gradient(180deg,#d9a93f,#b98a26);color:#1a1408;font-weight:700}
.modal-wrap:has(#sv-save) #sv-save,.modal-wrap:has(.hs-sec) #g-save,.modal-wrap:has(.hs-sec) .btn:not(.ghost){background:linear-gradient(180deg,#d9a93f,#b98a26);color:#1a1408;font-weight:700}
.qa-chip.on{background:linear-gradient(180deg,#d9a93f,#b98a26);color:#1a1408}
.sv-card .sb-tiles .kpi .v,.sv-card .sb-tiles .kpi strong,.sv-card .sb-tiles .kpi b{font-size:34px;line-height:1.1}
.sv-h{font-family:var(--serif);font-size:20px}
@media(orientation:landscape) and (max-height:520px){
  #modal-wrap:has(#sv-save) .sheet-foot{flex-direction:row;justify-content:flex-end;align-items:center}
  #modal-wrap:has(#sv-save) .sheet-foot .btn{width:auto;min-height:44px;padding:0 22px}
  #modal-wrap:has(#sv-save) .modal-body{padding-bottom:0}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  #modal-wrap.tall .modal:has(.hs-sec){max-width:880px;max-height:100vh}
  #gift-form:has(.hs-sec){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:22px;align-items:start}
  #gift-form:has(.hs-sec)>.hs-sec{grid-column:2;grid-row:1/span 6}
  #gift-form:has(.hs-sec)>label,#gift-form:has(.hs-sec)>.qa-chips{grid-column:1}
  #gift-form:has(.hs-sec)>.sheet-foot{grid-column:1/-1}
}
@media(orientation:landscape) and (max-height:520px){
  .hs-donut{max-width:130px;max-height:130px;margin-inline:auto}
  .sheet-foot .hs-fine{order:0;flex:1 1 auto;text-align:left;margin:0}
  .sv-card .sb-tiles .kpi .v,.sv-card .sb-tiles .kpi strong,.sv-card .sb-tiles .kpi b{font-size:26px}
}
.sv-card .sv-h{font-family:var(--serif) !important;font-size:20px}
.modal-wrap.sheet .btn:not(.ghost):not(.del){background:linear-gradient(180deg,#d9a93f,#b98a26);color:#1a1408;font-weight:700}
/* fix-round-1: goals page 360 overflow */
.sub-body>*{min-width:0}
.seg .opt{min-width:0}
@media(max-width:380px){.seg .opt{padding:10px 4px}.seg .opt .sm{white-space:normal;text-wrap:balance}}
/* segment sub-labels wrap at phrase boundaries instead of spilling out of their cell */
.seg .opt .sm{white-space:normal;text-wrap:balance}
@media(max-height:520px) and (min-width:700px){.sv-list li:last-child:nth-child(odd){grid-column:1/-1}}
#gift-form:not(:has(.hs-sec)) .sheet-foot{padding-top:0}
/* fix-round-1: 200% text zoom (about 195px wide) must not scroll sideways */
@media(max-width:300px){.content,.col-main,.card,.kpi,.sub-grid>*,.sb-tiles>*{min-width:0}.card *,.sub-body *{overflow-wrap:anywhere}.card span,.card div,.card button{white-space:normal}.sb-tiles{grid-template-columns:minmax(0,1fr)}.sub-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:300px){.tabs{flex-wrap:wrap}.card span[style*="nowrap"],.hero span[style*="nowrap"],#view span[style*="nowrap"]{white-space:normal !important}}
/* fix-round-1 V4: outline legend dots so every dot reads against the card in all themes; each dot also sits beside a text label with its percent */
.hs-dot{box-shadow:0 0 0 1px var(--ink-3)}
/* fix-round-1 V4: text contrast on modal tabs, placeholders, and salvation initials */
#modal-wrap .seg button:not(.on){color:var(--ink-2)}
[data-theme="dark"] #g-recip::placeholder,[data-theme="dark"] #sv-name::placeholder{color:var(--ink-2);opacity:1}
.sv-av{color:#fff;opacity:1}
[data-theme="dark"] .sv-av{color:#131F3C}
.seg .opt:not(.on){color:var(--ink-2)}
/* fix-round-2 V3/V4: graphics at 3:1 or better in Day and Dusk, muted text at 4.5:1 */
:root{--hs-church:#55789F;--hs-hunger:#6B7A3E;--hs-unsplit:#76808D;--tg-off:#8A8378}
[data-theme="dark"]{--hs-bibles:#D9A93F;--hs-missions:#8FB0E0;--hs-babies:#E08A66;--hs-church:#B9D0F0;--hs-hunger:#A9BC72;--hs-unsplit:#C3CADB;--tg-off:#8590AD}
.toggle{background:var(--tg-off)}
.toggle[aria-checked="true"]{background:var(--gold)}
.hs-bar{background:var(--hs-unsplit)}
.hs-dot-x{background-color:var(--hs-unsplit)}
html[data-theme="dark"] body.plus:not(.classic){--ink-2:#E6EAF4;--ink-3:#E1E6F2}
html[data-theme="dark"] body.plus:not(.classic) .btn.ghost{background:rgba(13,22,48,.78)}
html[data-theme="light"] body.plus:not(.classic) .lbl{color:#6F500B}
.note.hs-fine,.hs-fine{color:var(--ink-2)}
[data-theme="dark"]{--ink-2:#CDD2E3}
[data-theme="dark"]{--ink-3:#BCC3D9}
html:not([data-theme="dark"]) body:not(.plus) .btn,html:not([data-theme="dark"]) body:not(.plus) .btn-gold{background:#8F6616}
/* fix-round-2 composites: lining figures on Salvations numbers, no label collision */
.sb-big,.sb-tiles .kpi .v{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1}
.sb-big{line-height:1.12;margin:12px 0 14px}
@media(orientation:landscape) and (max-height:500px){.sb-hero{padding:22px 24px 20px}.sb-big{font-size:clamp(44px,7vh,56px)}}
@media(orientation:landscape) and (max-height:500px){.sv-card #sv-log{position:sticky;bottom:10px;z-index:2;box-shadow:0 6px 18px rgba(22,35,63,.22)}.sv-card .sb-tiles{gap:10px}.sv-card .sb-tiles .kpi{padding:10px 14px}}

/* design-fix round 3: gold gradient, card treatment, landscape layouts */
:root{--gold-grad:linear-gradient(135deg,#d9a940,#a97712);--gold-shadow:0 6px 18px rgba(169,119,18,.35)}
[data-theme="dark"]{--gold-grad:linear-gradient(135deg,#f0d283,#c79a36);--gold-shadow:0 6px 18px rgba(199,154,54,.3)}
.sv-card .btn.full.gold,.modal-wrap:has(#sv-save) #sv-save,.modal-wrap:has(.hs-sec) #g-save,.modal-wrap:has(.hs-sec) .btn:not(.ghost),.modal-wrap.sheet .btn:not(.ghost):not(.del),.modal-wrap:has(#sv-save) .seg button.on,.qa-chip.on{background:var(--gold-grad);color:#1a1408;font-weight:700}
.sv-card .btn.full.gold,.modal-wrap:has(#sv-save) #sv-save,.modal-wrap:has(.hs-sec) #g-save,.modal-wrap.sheet .btn:not(.ghost):not(.del){border-radius:16px;box-shadow:var(--gold-shadow);border:0}
.qa-chip,.modal-wrap:has(#sv-save) .seg button{border-radius:12px}
.modal-wrap:has(#sv-save) .seg,.modal-wrap:has(.hs-sec) .seg{border-radius:16px}
.sv-card .sb-hero,.sv-card .card,.hs-impact-card,.hs-invite{border-radius:22px}
.sv-card .sb-tiles .kpi{border-radius:20px}
.sv-card .sb-tiles .kpi .k,.sv-card .sb-tiles .kpi .lbl{letter-spacing:.12em;font-size:11px}
.hs-chip{background:var(--gold-soft,transparent)}
.hs-card-hd{flex-wrap:wrap}
.hs-card-hd .lbl{white-space:nowrap}
.hs-donut{box-shadow:0 8px 24px rgba(22,35,63,.12)}
.hs-hole{border:1px solid var(--hair)}
.hs-hole span{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--ink-2)}
/* Edit Split donut label never clips */
.hs-hole b{white-space:nowrap}.hs-hole span{white-space:nowrap}
@media(max-height:520px) and (min-width:700px){
  #modal-wrap #es-host .hs-donut{width:112px;height:112px}
  #modal-wrap #es-host .hs-hole{inset:15px}
  #modal-wrap #es-host .hs-hole b{font-size:17px}
  #modal-wrap #es-host .hs-hole span{font-size:9px;letter-spacing:.04em}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  #modal-wrap.tall .modal:has(.hs-sec){max-width:min(840px,100vw)}
  #gift-form:has(.hs-sec){grid-template-columns:minmax(0,.9fr) minmax(0,.75fr) minmax(0,1.5fr);column-gap:16px}
  #gift-form:has(.hs-sec) .hs-sec,#gift-form:has(.hs-sec) #hs-host,#gift-form:has(.hs-sec) .hs-ctl,#gift-form:has(.hs-sec) .hs-head{display:contents}
  #gift-form:has(.hs-sec) .hs-title{grid-column:2;grid-row:1;margin:0;font-size:1.05rem;align-self:center}
  #gift-form:has(.hs-sec) .hs-acts{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-self:start}
  #gift-form:has(.hs-sec) .hs-donut{grid-column:2;grid-row:3;width:112px;height:112px;margin:0 auto 6px}
  #gift-form:has(.hs-sec) .hs-hole{inset:16px}
  #gift-form:has(.hs-sec) .hs-hole b{font-size:18px}
  #gift-form:has(.hs-sec) .hs-hole span{font-size:9px;letter-spacing:.04em}
  #gift-form:has(.hs-sec) .hs-hint{grid-column:2;grid-row:4;margin:0;min-height:0}
  #gift-form:has(.hs-sec) .hs-rows{grid-column:3;grid-row:1/span 5;align-self:start}
  #gift-form:has(.hs-sec)>label,#gift-form:has(.hs-sec)>.qa-chips,#gift-form:has(.hs-sec)>.hs-quiet{grid-column:1}
  #gift-form:has(.hs-sec)>label:last-of-type{grid-column:2;grid-row:5}
  #gift-form:has(.hs-sec) .hs-row{display:grid;grid-template-columns:minmax(0,1fr) 32px 96px;align-items:center;padding:0;column-gap:6px}
  #gift-form:has(.hs-sec) .hs-l1{display:contents}
  #gift-form:has(.hs-sec) .hs-name{grid-column:1;grid-row:1;font-size:13px;white-space:nowrap}
  #gift-form:has(.hs-sec) .hs-lock{grid-column:2;grid-row:1;width:32px;height:44px}
  #gift-form:has(.hs-sec) .hs-read{grid-column:3;grid-row:1;font-size:12.5px}
  #gift-form:has(.hs-sec) .hs-l2{grid-column:1/-1;grid-row:2}
  #gift-form:has(.hs-sec) .hs-step{width:32px;height:32px;font-size:1rem}
  #gift-form:has(.hs-sec) .hs-range{height:32px}
  #gift-form:has(.hs-sec) .hs-range::-webkit-slider-thumb{margin-top:-10px}
  #gift-form:has(.hs-sec) .hs-dot{display:none}
}
/* Salvation page: bottom padding so the sticky Log button never covers tiles */
@media(orientation:landscape) and (max-height:520px){.sv-card{padding-bottom:84px}}
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  #gift-form:has(.hs-sec) .hs-row{grid-template-columns:116px 30px minmax(60px,1fr) 78px;column-gap:4px}
  #gift-form:has(.hs-sec) .hs-l2{grid-column:3;grid-row:1}
  #gift-form:has(.hs-sec) .hs-step{display:none}
  #gift-form:has(.hs-sec) .hs-read{grid-column:4;font-size:12px}
  #gift-form:has(.hs-sec) .hs-lock{grid-column:2}
  #gift-form:has(.hs-sec) .hs-title{font-size:1rem;white-space:nowrap}
  #gift-form:has(.hs-sec) .hs-acts{grid-row:2}
  #gift-form:has(.hs-sec) .hs-donut{width:104px;height:104px}
}
.hs-range{border:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  #gift-form:has(.hs-sec) .hs-row{grid-template-columns:128px 28px minmax(60px,1fr) 76px}
  #gift-form:has(.hs-sec) .hs-lock{width:28px}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  #modal-wrap:has(.hs-sec) .modal-body{padding-top:10px;padding-bottom:0}
  #gift-form:has(.hs-sec){row-gap:6px;align-content:start}
  #gift-form:has(.hs-sec)>label{margin:0;font-size:13px;gap:2px}
  #gift-form:has(.hs-sec)>label input{min-height:40px;margin-top:2px}
  #gift-form:has(.hs-sec)>label .muted{display:none}
  #gift-form:has(.hs-sec)>.qa-chips{margin:0}
  #gift-form:has(.hs-sec) .qa-chip{min-height:40px}
  #gift-form:has(.hs-sec) .hs-row{padding:0}
  #gift-form:has(.hs-sec) .hs-l1,#gift-form:has(.hs-sec) .hs-lock{min-height:40px}
  #gift-form:has(.hs-sec) .hs-range{height:40px}
  #gift-form:has(.hs-sec) .hs-title{display:block}
  #gift-form:has(.hs-sec) .hs-text{min-height:36px}
  #gift-form:has(.hs-sec)>label:last-of-type{grid-row:5}
  #gift-form:has(.hs-sec)>.sheet-foot{padding-top:6px;padding-bottom:10px}
  #gift-form:has(.hs-sec) .hs-defrow{display:none}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  #gift-form:has(.hs-sec){row-gap:4px}
  #gift-form:has(.hs-sec)>label:nth-of-type(1){grid-row:1}
  #gift-form:has(.hs-sec)>.qa-chips{grid-row:2}
  #gift-form:has(.hs-sec)>label:nth-of-type(2){grid-row:3}
  #gift-form:has(.hs-sec)>label:nth-of-type(3){grid-row:4}
  #gift-form:has(.hs-sec)>label:last-of-type{grid-row:4;grid-column:2}
  #gift-form:has(.hs-sec) .hs-title{grid-row:1;align-self:start}
  #gift-form:has(.hs-sec) .hs-acts{grid-row:1;align-self:end;justify-self:start}
  #gift-form:has(.hs-sec) .hs-donut{grid-row:2/span 2}
  #gift-form:has(.hs-sec) .hs-hint{display:none}
  #gift-form:has(.hs-sec) .hs-rows{grid-row:1/span 4}
  #gift-form:has(.hs-sec)>label input,#gift-form:has(.hs-sec) .qa-chip{min-height:38px}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  #modal-wrap:has(.hs-sec) .modal-body{padding-top:6px}
  #gift-form:has(.hs-sec)>label input{height:38px;box-sizing:border-box}
  #gift-form:has(.hs-sec) .hs-read{font-size:11.5px}
}

/* design-fix round 3: Recent Entries heading matches mockup serif */
.sv-card .sv-h{font-size:22px !important;font-weight:600;margin:18px 0 8px;text-wrap:balance}

/* Guest mode (Explore Without an Account) */
.guest-gate{max-width:560px;margin:8vh auto 0;padding:0 16px}
.guest-gate .card{display:grid;gap:14px;text-align:center;justify-items:center;padding:28px 22px}
.guest-gate h1{margin:0;font-size:26px;text-wrap:balance}
.guest-gate p{margin:0;text-wrap:pretty}
.guest-gate .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.guest-home{display:grid;gap:16px;max-width:760px;margin:0 auto;padding:0 0 24px}
.guest-home .g-verse{margin:0;font-style:italic;text-wrap:pretty}
.guest-home .g-cta{display:grid;gap:12px;border:1px solid var(--gold);text-align:center;justify-items:center}
.guest-home .g-cta h2,.guest-home .g-cta p{margin:0}
.more-legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:14px 0 0;padding:0 14px;background:var(--card);border-radius:14px}
.more-legal a{padding:12px 4px;min-height:44px;display:inline-flex;align-items:center}
.more-row.del{color:var(--bad,#b3261e);width:100%;background:none;border:0;border-bottom:none;font:inherit;text-align:left;cursor:pointer}

/* Phase 6 design and tests: landscape Salvations 2 columns, donut label fit */
@media(orientation:landscape) and (max-height:520px) and (min-width:700px){
  .sv-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:20px;align-items:start;padding-bottom:20px}
  .sv-card .sv-hero,.sv-card .sb-tiles,.sv-card #sv-log{grid-column:1}
  .sv-card .sv-hero{grid-row:1}.sv-card .sb-tiles{grid-row:2}.sv-card #sv-log{grid-row:3;margin-top:10px}
  .sv-card #sv-log{position:static;box-shadow:var(--gold-shadow)}
  .sv-card .sv-h{grid-column:2;grid-row:1;margin:0 0 6px}
  .sv-card .sv-list{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr)}
  .sv-card .sv-fine{grid-column:2;grid-row:3;margin:6px 0 0}
}
@media(max-height:520px) and (min-width:700px){
  #modal-wrap #es-host .hs-donut{width:124px;height:124px}
  #modal-wrap #es-host .hs-hole{inset:15px;padding:0 4px}
  #modal-wrap #es-host .hs-hole b{font-size:17px}
  #modal-wrap #es-host .hs-hole span{font-size:8.5px;letter-spacing:0}
}
.hs-hole{padding:0 6px;box-sizing:border-box;text-align:center}
/* Phase 6: gold deltas vs mockup (contrast-safe golds) */
.sb-page .sub-hd .eyebrow,.sv-card .sb-lbl,.sv-card .sb-tiles .kpi .lbl{color:var(--gold)}
.sv-card .sb-big{color:#A97712}
.sv-av{background:var(--gold-grad);color:#131F3C}
@media(max-height:520px) and (min-width:700px){#gift-form:has(.hs-sec) .hs-hole{inset:13px;padding:0 2px}#gift-form:has(.hs-sec) .hs-hole span{font-size:8.5px;letter-spacing:0}}

/* Native feel: no double-tap or pinch zoom (2026-10-27) */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}

/* Empty Overview (guest, or no gifts yet): hero top card plus roomy cards. */
.card.hero.start-hero{display:grid;gap:10px;padding:22px 20px 20px}
.start-hero .bal{margin:0}
.start-hero h2{margin:6px 0 0;font:600 27px/1.15 var(--serif);color:var(--ink);text-wrap:balance}
.start-hero p{margin:0;text-wrap:pretty}
.start-hero .btn-gold{justify-self:start;padding:12px 20px;font-size:14px;margin-top:4px}
.start-hero .sh-note{font-size:12px;color:var(--ink-3)}
.start-hero .hg-quote{display:block;margin-top:6px}
.guest-home .card:not(.hero){padding:20px}
.guest-home .card.more-list{padding:4px 20px}
.start-hero :is(h2,p,.lbl,.bal){text-shadow:0 1px 3px rgba(var(--xS),.55),0 0 14px rgba(var(--xS),.5)}
body.plus:not(.classic) .card.hero.start-hero{background:rgba(var(--xS),.42);border:1px solid var(--glass-line,rgba(226,192,105,.25));-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-radius:14px}
.card.hero p.hero-disc{font-size:11px;margin:6px 0 0;text-wrap:balance}

/* Time Invested page (2026-11-01) */
.sv-card .tm-grid{margin:16px 0}
.sv-card:has(.tm-grid){overflow:hidden}
.modal-wrap:has(#tm-save) .seg button.on{background:var(--gold-grad);color:#1a1408;font-weight:700}

/* Past Giving Estimator */
.pg-total{text-align:center}
.pg-big{font-size:40px;font-weight:700;color:var(--gold);margin:6px 0}
.pg-count{justify-content:center;margin-top:14px}
.pg-stage .pg-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.pg-stage h3{margin:0 0 4px}
.pg-sub{text-align:right;flex:none}
.pg-sub .num{font-size:20px;font-weight:700;color:var(--gold)}
.pg-stage .row{flex-wrap:wrap;margin-top:12px}
.pg-stage .row .btn{min-height:44px;white-space:nowrap}
.pg-warn{margin-top:10px}
.pg-incl{margin:2px 0 8px}
.pg-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg-age{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ink-3)}
.pg-age input{width:72px;min-height:44px}
.pg-live{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 8px;text-align:center}
.pg-live .num{font-size:20px;font-weight:700;color:var(--gold)}
#modal-wrap .pg-pair input,#modal-wrap .pg-pair select,#modal-wrap #pg-label,#modal-wrap #pg-birth,#modal-wrap #pg-end{min-height:44px}
.sub-body > .row{margin-top:14px;flex-wrap:wrap}
.subpage .sub-body > .row .btn-gold{min-height:44px}
.card .row .btn[href]{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.pg-link{margin-top:14px}
#modal-wrap .ck input[type=checkbox]:not(:checked){border:1.5px solid var(--ink-3);border-radius:4px;background:transparent}

#modal-wrap [hidden]{display:none!important}
.pg-birth{padding-top:8px;padding-bottom:8px}
#pg-birthp{min-height:44px}

/* ===== More (Option 1 Hybrid) and page infographics (Option A). Prefixes: mo- and ig- ===== */
.mo-page .i,.mo-chip .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mo-page{display:grid;gap:14px;align-content:start}
.mo-mast{border-radius:18px;padding:22px 20px;color:#fff;background:linear-gradient(rgba(14,20,38,.62),rgba(14,20,38,.78)),url(../../../assets/x/app-premium-sky-night-wide.webp) center/cover #15203a}
.mo-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#E8D9A8}
.mo-mast h2{font-family:var(--serif);font-size:clamp(22px,6vw,30px);line-height:1.15;margin:8px 0 16px;color:#fff;text-wrap:balance}
.mo-mast h2 em{font-style:normal;color:#E8D9A8;white-space:nowrap}
.mo-st{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mo-st div{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;font-size:11.5px;color:#E6EAF5;letter-spacing:.02em}
.mo-st b{display:block;font-size:20px;color:#fff;font-weight:700;margin-bottom:2px}
.mo-cols{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.mo-list{display:grid;gap:10px;align-content:start}
.mo-en,.mo-t,.mo-pn,.mo-chip{background:var(--card);border:1px solid var(--hair);color:var(--ink);text-decoration:none;border-radius:14px}
.mo-en{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px}
.mo-n{font-family:var(--serif);font-size:22px;color:var(--gold);min-width:30px}
.mo-en h3,.mo-t h3,.mo-pn h3{font-size:15.5px;margin:0;font-family:var(--serif);color:var(--ink)}
.mo-en p,.mo-t p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2);text-wrap:pretty}
.mo-v{text-align:right;font-size:18px;font-weight:700;color:var(--gold);line-height:1.1}
.mo-v small{display:block;font-size:10.5px;font-weight:600;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.mo-pn{position:relative;padding:16px;display:flex;flex-direction:column;gap:8px}
.mo-new{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:var(--gold-soft,rgba(143,102,22,.14));color:var(--gold);padding:3px 9px;border-radius:99px}
.mo-stretch{color:inherit;text-decoration:none}
.mo-stretch::after{content:"";position:absolute;inset:0;border-radius:14px}
.mo-lede{margin:0;font-size:13px;color:var(--ink-2)}
.mo-tl{list-style:none;margin:2px 0;padding:0;display:grid;gap:8px}
.mo-tl li b{display:block;font-size:13px;color:var(--ink)}
.mo-tl li span{font-size:12.5px;color:var(--ink-2)}
.mo-tot{font-family:var(--serif);font-size:24px;color:var(--gold);font-weight:700}
.mo-tot small{font-family:var(--sans);font-size:10.5px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;margin-left:8px}
.mo-dis{margin:0;font-size:11.5px;color:var(--ink-2)}
.mo-btn{position:relative;z-index:1;align-self:flex-start;min-height:44px;padding:0 18px;border-radius:99px;border:0;background:var(--btn-bg,var(--gold));color:#fff;font:700 13px var(--sans);cursor:pointer}
.mo-desk{align-items:stretch}
.mo-bkw{display:flex;justify-content:center}
.mo-bk{width:min(120px,40%);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.mo-qt{display:flex;gap:12px;align-items:center}
.mo-qt img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.mo-qt q{font-family:var(--serif);font-size:14px;color:var(--ink);display:block}
.mo-qt cite{display:block;font-size:11.5px;color:var(--ink-2);font-style:normal;margin-top:3px}
.nw{white-space:nowrap}
.mo-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mo-t{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-content:start;padding:14px;position:relative}
.mo-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--gold);background:var(--gold-soft,rgba(143,102,22,.14))}
.mo-tv{grid-column:1/-1;font-size:13px;font-weight:700;color:var(--gold)}
.mo-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mo-chip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:99px;font:600 13px var(--sans);cursor:pointer;text-align:center}
.mo-chip.del{color:#B3261E;border-color:#B3261E}
[data-theme="dark"] .mo-chip.del{color:#FF9A92;border-color:#FF9A92}
[data-theme="dark"] .mo-mast{background:linear-gradient(rgba(8,12,24,.5),rgba(8,12,24,.72)),url(../../../assets/x/app-premium-sky-night-wide.webp) center/cover #0e1424}
/* page infographics */
.ig{display:grid;gap:12px;position:relative;overflow:hidden}
.ig-k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.ig-giant{font-family:var(--serif);font-size:clamp(40px,12vw,64px);line-height:1;color:var(--ink);font-weight:700}
.ig-giant sup{font-size:.45em;vertical-align:top;color:var(--gold);margin-right:2px}
.ig-cap{margin:0;font-size:12.5px;color:var(--ink-2)}
.ig-ch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ig-ch span{background:var(--gold-soft,rgba(143,102,22,.12));border-radius:12px;padding:10px;font-size:11.5px;color:var(--ink-2);text-align:center}
.ig-ch b{display:block;font-size:18px;color:var(--ink)}
.ig-goal{grid-template-columns:130px minmax(0,1fr);align-items:center;gap:16px}
.ig-ring{position:relative;width:130px;height:130px}
.ig-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ig-ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ig-ring .tr{stroke:var(--hair)}
.ig-ring .pr{stroke:var(--gold-2,var(--gold));stroke-dasharray:408.4}
.ig-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ig-ring b{font-size:24px;color:var(--ink);font-family:var(--serif)}
.ig-ring small{font-size:10.5px;color:var(--ink-2)}
.ig-tx{display:grid;gap:6px;justify-items:start}
.ig-big{font-family:var(--serif);font-size:clamp(24px,6vw,32px);font-weight:700;color:var(--ink);line-height:1.1}
.ig-of{font-size:.5em;font-weight:600;color:var(--ink-2);font-family:var(--sans)}
.ig-meter{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;align-items:end;height:44px;margin:12px 0 4px}
.ig-meter i{display:block;border-radius:3px;background:var(--hair);height:40%}
.ig-meter i.f{background:var(--gold-2,var(--gold));height:100%}
.ig-nx{margin:0;font-size:12.5px;color:var(--ink-2);text-align:center}
.ig-an{gap:14px}
.ig-bars{display:flex;gap:10px;align-items:flex-end;height:140px}
.ig-bars>div{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:11px;color:var(--ink-2)}
.ig-bars i{display:block;width:100%;max-width:44px;border-radius:6px 6px 0 0;background:var(--gold-2,var(--gold))}
.ig-bars i.est{background:repeating-linear-gradient(45deg,var(--gold-2,var(--gold)) 0 4px,transparent 4px 8px);border:1.5px dashed var(--gold);border-bottom:0}
.ig-bv{font-size:10.5px;color:var(--ink)}
.ig-pgc{margin-top:8px}
.ig-chart{display:block;width:100%;height:100px}
.ig-area{fill:var(--gold-soft,rgba(143,102,22,.18));stroke:none}
.ig-ln{fill:none;stroke:var(--gold-2,var(--gold));stroke-width:2.5}
.ig-base{fill:none;stroke:var(--hair);stroke-width:2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.ig-sg{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-2);margin-top:4px}
.ig-desk{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}
.ig-pics{position:relative;width:132px;height:118px}
.ig-face{position:absolute;left:0;top:0;width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--card)}
.ig-bk{position:absolute;right:0;bottom:0;width:70px;border-radius:5px;box-shadow:0 8px 18px rgba(0,0,0,.3)}
.ig-desk q{font-family:var(--serif);font-size:16px;color:var(--ink);display:block}
.ig-desk cite{display:block;font-size:12px;color:var(--ink-2);font-style:normal;margin-top:4px}
@media (min-width:600px){.mo-st{grid-template-columns:repeat(4,1fr)}.mo-chips{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:no-preference){
  .mo-page>*{animation:moRise .5s ease-out backwards}
  .mo-page>*:nth-child(2){animation-delay:.06s}.mo-page>*:nth-child(3){animation-delay:.12s}
  .ig-ring .pr{animation:igRing 1s ease-out backwards}
  .ig-meter i.f{animation:igGrow .6s ease-out backwards}
  .ig-bars i{animation:igGrow .7s ease-out backwards;transform-origin:bottom}
  @keyframes moRise{from{opacity:0;transform:translateY(10px)}}
  @keyframes igRing{from{stroke-dashoffset:408.4}}
  @keyframes igGrow{from{transform:scaleY(.1)}}
}

/* ---- fix round 1: masthead per frame-H, tiles, empty states, gold ring ---- */
.mo-page .mo-mast{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 8px 28px rgba(20,30,60,.18);
  background:linear-gradient(0deg,rgba(16,26,52,.92) 0%,rgba(16,26,52,.76) 45%,rgba(16,26,52,.5) 68%,rgba(16,26,52,.08) 90%),url(../assets/x/app-premium-sky-day-tall.webp) center 40%/cover #15203a}
[data-theme="dark"] .mo-page .mo-mast{background:linear-gradient(0deg,rgba(8,13,28,.92) 0%,rgba(8,13,28,.55) 50%,rgba(8,13,28,.05) 85%),url(../assets/x/app-premium-sky-night-tall.webp) center 30%/cover #0e1424}
.mo-page .mo-mast>*{position:relative;z-index:1}
html body .mo-page.mo-page .mo-mast h2{font-weight:600;letter-spacing:-.01em;line-height:1.02;font-size:clamp(30px,9vw,44px);margin:10px 0 18px}
.mo-page .mo-mast h2 em{font-style:italic;color:#F1D78E}
.mo-k{color:#F8E3A6}
.mo-st{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.mo-st div{background:none;border-radius:0;padding:0;font-size:12px;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(8,14,30,.6)}
.mo-st b{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.05;margin-bottom:3px}
.mo-t{grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:start;gap:12px 8px}
.mo-t>div{grid-column:1/-1}
.mo-tv{grid-column:2;grid-row:1;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--gold);white-space:nowrap}
html body .mo-page.mo-page.mo-page .mo-t h3{font-family:var(--sans);font-weight:700;font-size:15px;white-space:nowrap}
.mo-tiles{align-items:stretch}
.ig-empty{margin:8px 0 0;text-align:center;font-size:13px;color:var(--ink-2)}
.ig-ring .tr{stroke:rgba(143,102,22,.2)}
[data-theme="dark"] .ig-ring .tr{stroke:rgba(212,175,90,.22)}
.ig-goal{background:radial-gradient(120% 90% at 50% 0%,rgba(255,206,120,.28),transparent 70%),var(--card)}
[data-theme="dark"] .ig-goal{background:radial-gradient(120% 90% at 50% 0%,rgba(212,175,90,.16),transparent 70%),var(--card)}
@media (prefers-reduced-motion:no-preference){
  .mo-page .mo-mast::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,224,160,.3) 50%,transparent 65%);background-size:250% 100%;mix-blend-mode:screen;pointer-events:none;animation:moSweep 7s ease-in-out infinite}
  @keyframes moSweep{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
}
@media (min-width:600px){.mo-st{display:flex;flex-wrap:wrap;gap:14px 34px}.mo-st b{font-size:32px}}