/* Milestone Church app prototype v2: shared design tokens + components.
   Dark-first, immersive. Token names map 1:1 to a future Flutter ThemeData/ThemeExtension.
   Fonts are self-hosted WOFF2: Enkel display, Gotham body, Exalted Extended secondary display. */
@font-face{font-family:'Enkel';src:url('../assets/fonts/Enkel-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Enkel';src:url('../assets/fonts/Enkel-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Enkel';src:url('../assets/fonts/Enkel-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Enkel';src:url('../assets/fonts/Enkel-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Enkel';src:url('../assets/fonts/Enkel-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Enkel';src:url('../assets/fonts/Enkel-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Exalted Extended';src:url('../assets/fonts/ExaltedExtended-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Exalted Extended';src:url('../assets/fonts/ExaltedExtended-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Exalted Extended';src:url('../assets/fonts/ExaltedExtended-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Exalted Extended';src:url('../assets/fonts/ExaltedExtended-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../assets/fonts/Gotham-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../assets/fonts/Gotham-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../assets/fonts/Gotham-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../assets/fonts/Gotham-Ultra.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{
  /* Brand: primary */
  --c-blue:#356186; --c-blue-shade1:#356186; --c-blue-shade2:#3D3D3D; --c-blue-tint1:#5B7685; --c-blue-tint2:#88A3BA;
  --c-charcoal:#3D3D3D; --c-feather:#E8E8E0;
  /* Brand: secondary */
  --c-soft-blue:#88A3BA; --c-smoke:#BFBFB8; --c-rust:#BA6A3F; --c-rust-shade1:#356186; --c-rust-tint:#88A3BA; --c-moss:#D4D9B7; --c-ivory:#F4F4E7; --c-dusty:#5B7685;
  /* Dark theme (default), ink derived from Blue shade2 */
  --ink:#252525; --ink-2:#252525; --ink-3:#252525; --ink-line:rgba(232,232,224,.09);
  --on-ink:#F4F4E7; --on-ink-2:rgba(244,244,231,.7); --on-ink-3:rgba(244,244,231,.56);
  /* Light theme (Option B) */
  --paper:#F4F4E7; --on-paper:#1F1F1F; --on-paper-2:#5B7685;
  --accent:var(--c-rust-tint); /* rust tint on ink = 6.9:1 */
  --glass:rgba(24,24,24,.62);
  --inv:#F4F4E7; --on-inv:#1F1F1F; --line-strong:rgba(244,244,231,.22);
  --bar-bg:rgba(24,24,24,.72); --bar-fg:rgba(244,244,231,.6); --bar-on-bg:rgba(244,244,231,.1); --bar-on-fg:#F4F4E7; --bar-on-ic:var(--c-rust-tint); --bar-shadow:0 12px 34px rgba(18,18,18,.45),inset 0 0 0 1px rgba(244,244,231,.07);
  --card-shadow:none; --hero-end:var(--ink); --hero-r:0; --logo-filter:none; --btn2-bg:var(--glass); --btn2-fg:#F4F4E7;
  --tag-ok-bg:rgba(212,217,183,.16); --tag-ok-fg:#D4D9B7; --tag-full-bg:rgba(136,163,186,.16); --tag-full-fg:#88A3BA; --tag-blue-bg:rgba(136,163,186,.18); --tag-blue-fg:#BFBFB8;
  color-scheme:dark;
}
/* Light tokens: OS light (unless forced dark) or forced light */
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--ink:#F4F4E7; --ink-2:#F4F4E7; --ink-3:#E8E8E0; --ink-line:rgba(24,24,24,.09);
  --on-ink:#252525; --on-ink-2:#5B7685; --on-ink-3:#5B7685;
  --accent:var(--c-rust-shade1); /* 5.4:1 on paper */
  --inv:#252525; --on-inv:#F4F4E7; --line-strong:rgba(24,24,24,.22);
  --bar-bg:rgba(244,244,231,.74); --bar-fg:#5B7685; --bar-on-bg:rgba(24,24,24,.06); --bar-on-fg:#252525; --bar-on-ic:var(--c-rust-shade1); --bar-shadow:0 10px 30px rgba(61,61,61,.14),inset 0 0 0 1px rgba(24,24,24,.06);
  --card-shadow:0 1px 2px rgba(61,61,61,.05),0 8px 24px rgba(61,61,61,.07); --hero-end:rgba(24,24,24,.82); --hero-r:0 0 32px 32px; --logo-filter:invert(1) brightness(.25); --btn2-bg:#F4F4E7; --btn2-fg:#252525;
  --tag-ok-bg:#E8E8E0; --tag-ok-fg:#3D3D3D; --tag-full-bg:#E8E8E0; --tag-full-fg:#BA6A3F; --tag-blue-bg:#E8E8E0; --tag-blue-fg:#356186;
  color-scheme:light;}}
:root[data-theme=light]{--ink:#F4F4E7; --ink-2:#F4F4E7; --ink-3:#E8E8E0; --ink-line:rgba(24,24,24,.09);
  --on-ink:#252525; --on-ink-2:#5B7685; --on-ink-3:#5B7685;
  --accent:var(--c-rust-shade1); /* 5.4:1 on paper */
  --inv:#252525; --on-inv:#F4F4E7; --line-strong:rgba(24,24,24,.22);
  --bar-bg:rgba(244,244,231,.74); --bar-fg:#5B7685; --bar-on-bg:rgba(24,24,24,.06); --bar-on-fg:#252525; --bar-on-ic:var(--c-rust-shade1); --bar-shadow:0 10px 30px rgba(61,61,61,.14),inset 0 0 0 1px rgba(24,24,24,.06);
  --card-shadow:0 1px 2px rgba(61,61,61,.05),0 8px 24px rgba(61,61,61,.07); --hero-end:rgba(24,24,24,.82); --hero-r:0 0 32px 32px; --logo-filter:invert(1) brightness(.25); --btn2-bg:#F4F4E7; --btn2-fg:#252525;
  --tag-ok-bg:#E8E8E0; --tag-ok-fg:#3D3D3D; --tag-full-bg:#E8E8E0; --tag-full-fg:#BA6A3F; --tag-blue-bg:#E8E8E0; --tag-blue-fg:#356186;
  color-scheme:light;}
:root{
  /* Type (Enkel primary display, Gotham body, Exalted Extended secondary display).
     Scale is authored in rem off the root font-size so the text-size stepper (--fs)
     and the browser/OS text-size + zoom all scale type. Guide px shown for reference. */
  --f-display:'Enkel',system-ui,sans-serif; --f-body:'Gotham',system-ui,sans-serif; --f-tag:'Exalted Extended',sans-serif;
  --fs:1; /* text-size multiplier, set by the stepper (Settings / Notes) */
  /* Guide roles → rem: Body 16px=1rem, Caption 14px=.875rem, H03 22px=1.375rem,
     H04 18px=1.125rem, H02/display 30px≈1.875rem, app hero ≈40px=2.5rem. */
  --t-hero:2.5rem; --t-display:1.875rem; --t-h2:1.375rem; --t-h3:1.125rem; --t-body:1rem; --t-cap:.875rem; --track:-0.025em;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px; /* pill ≥ half-height = brand 50px pill */
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* 100% = the user's browser base size (respects OS/accessibility text size); --fs is our
   on-screen stepper on top; browser zoom scales px too. Everything rem-based scales from here. */
html{font-size:calc(100% * var(--fs,1))}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--f-body);font-size:var(--t-body);background:var(--ink);color:var(--on-ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
[hidden]{display:none!important}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Screen shell */
.screen{width:390px;height:844px;margin:0 auto;position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink)}
.screen.light{background:var(--paper);color:var(--on-paper);--on-ink:#1F1F1F;--on-ink-2:#5B7685;--on-ink-3:#5B7685;--ink-line:rgba(18,18,18,.08);--ink-2:#F4F4E7;--ink-3:#E8E8E0;--accent:var(--c-rust-shade1)}
.scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;padding-bottom:130px}
.scroll::-webkit-scrollbar{display:none}
.statusbar{position:absolute;top:0;left:0;right:0;height:47px;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 34px;font:600 0.9375rem var(--f-display);color:#F4F4E7;pointer-events:none}
.statusbar.auto{color:var(--on-ink)}
.pad{padding-left:var(--s5);padding-right:var(--s5)}
/* Type */
.hero-t{font:800 var(--t-hero)/1.0 var(--f-display);letter-spacing:-0.035em}
.display{font:800 var(--t-display)/1.04 var(--f-display);letter-spacing:var(--track)}
.h2{font:700 var(--t-h2)/1.15 var(--f-display);letter-spacing:-0.015em}
.h3{font:700 var(--t-h3)/1.2 var(--f-display);letter-spacing:-0.01em}
.cap{font-size:var(--t-cap);color:var(--on-ink-2);line-height:1.4}
.eyebrow{font:700 0.6875rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tagline{font:500 0.75rem var(--f-tag);letter-spacing:.02em;color:var(--on-ink-3)}
/* Top bar (overlays hero) */
.topbar{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:55px var(--s5) var(--s3);transition:background .25s,backdrop-filter .25s,box-shadow .25s}
.scrolled .topbar:not(.sticky){background:var(--bar-bg);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 1px 0 var(--ink-line)}
.scrolled .topbar:not(.sticky) .campus{color:var(--on-ink)}.scrolled .topbar:not(.sticky) .gbtn{background:var(--btn2-bg);color:var(--btn2-fg)}
.scrolled .statusbar{color:var(--on-ink)}
.topbar.sticky{position:sticky;top:0;padding-top:55px;padding-bottom:var(--s4);background:color-mix(in srgb,var(--ink) 82%,transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
.scrolled .topbar.sticky{box-shadow:0 1px 0 var(--ink-line)}
.campus{display:flex;flex-direction:column;line-height:1.15;color:#F4F4E7}
.topbar .campus.campus-hero{height:44px;padding:0 14px;justify-content:center;border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px);color:#F4F4E7}
.campus small{font-size:0.6875rem;opacity:.7}.campus b{font:700 0.9375rem var(--f-display);display:flex;align-items:center;gap:4px}
.topbar.sticky .campus,.campus.auto{color:var(--on-ink)}
.row{display:flex;align-items:center;gap:var(--s2)}
.gbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px);color:#F4F4E7;position:relative}
.gbtn svg.i{width:19px;height:19px}
.gbtn.auto{background:var(--btn2-bg);color:var(--btn2-fg);box-shadow:var(--card-shadow)}
.gbtn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--c-rust-tint)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 0.875rem var(--f-display);color:#F4F4E7;background:linear-gradient(135deg,var(--c-blue-tint1),var(--c-blue-shade1));box-shadow:0 0 0 2px rgba(244,244,231,.18)}
/* Buttons: brand pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:var(--r-pill);font:700 0.875rem var(--f-display);letter-spacing:-.005em;transition:transform .15s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-white{background:#F4F4E7;color:#1F1F1F}.btn-ink{background:#1F1F1F;color:#F4F4E7}
.btn-glass{background:rgba(244,244,231,.16);backdrop-filter:blur(14px);color:#F4F4E7}
.btn-blue{background:var(--c-blue);color:#F4F4E7}.btn-rust{background:var(--c-rust);color:#F4F4E7}
.btn-line{color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-solid{background:var(--inv);color:var(--on-inv)}
.btn-sm{height:34px;padding:0 15px;font-size:0.7813rem}.btn-block{width:100%}
.chip-glass{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-pill);background:rgba(244,244,231,.16);backdrop-filter:blur(12px);font:600 0.7188rem var(--f-body);color:#F4F4E7}
/* Placeholder art: brand gradients + poster type, never photos */
.art{position:relative;overflow:hidden;isolation:isolate;color:#F4F4E7}
.art::before{content:"";position:absolute;inset:-20%;z-index:-1;background:var(--g);animation:drift 18s ease-in-out infinite alternate}
.art::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 60% at 80% 0%,rgba(244,244,231,.18),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translate(6%,-4%) scale(1.08) rotate(2deg)}}
.g-blue{--g:radial-gradient(70% 60% at 30% 30%,#5B7685,transparent 70%),radial-gradient(60% 60% at 80% 80%,#3D3D3D,transparent 70%),linear-gradient(160deg,#356186,#252525)}
.g-rust{--g:radial-gradient(60% 60% at 25% 25%,#88A3BA,transparent 70%),radial-gradient(70% 60% at 80% 85%,#3D3D3D,transparent 70%),linear-gradient(160deg,#BA6A3F,#3D3D3D)}
.g-moss{--g:radial-gradient(60% 60% at 30% 20%,#E8E8E0,transparent 70%),radial-gradient(60% 70% at 80% 90%,#5B7685,transparent 70%),linear-gradient(160deg,#D4D9B7,#5B7685)}
.g-dusty{--g:radial-gradient(60% 60% at 70% 20%,#BFBFB8,transparent 70%),linear-gradient(160deg,#5B7685,#252525)}
.g-night{--g:radial-gradient(55% 45% at 75% 22%,rgba(136,163,186,.9),transparent 70%),radial-gradient(70% 55% at 15% 35%,#5B7685,transparent 70%),radial-gradient(80% 60% at 50% 100%,#252525,transparent 70%),linear-gradient(170deg,#356186,#252525)}
.g-mono{--g:radial-gradient(60% 50% at 30% 30%,#3D3D3D,transparent 70%),linear-gradient(160deg,#3D3D3D,#181818)}
.poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font:900 1.875rem/.9 var(--f-display);letter-spacing:-.04em;text-transform:uppercase;color:rgba(244,244,231,.92);padding:14px;z-index:0}
.ph-tag{position:absolute;right:10px;top:10px;font:700 0.5313rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,244,231,.55)}
/* Full-bleed hero */
.hero{position:relative;height:600px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--s5) var(--s8)}
.hero .fade{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(24,24,24,.45) 0%,transparent 22%,transparent 45%,rgba(24,24,24,.75) 75%,var(--hero-end) 100%)}
.hero{border-radius:var(--hero-r)}
.hero>*:not(.fade):not(.poster):not(.herobar){position:relative;z-index:1}
.hero .hero-t{margin:10px 0 10px;max-width:320px}
.hero p{color:rgba(244,244,231,.78);line-height:1.45;max-width:300px;margin-bottom:20px}
.hero .poster{font-size:4rem;align-items:flex-start;padding-top:170px;opacity:.16}
.dots{display:flex;gap:6px;margin-top:22px}.dots i{width:6px;height:6px;border-radius:3px;background:rgba(244,244,231,.3)}.dots i.on{width:20px;background:#F4F4E7}
/* Section + edge-to-edge rails */
.sec{margin-top:var(--s10)}
.sec+.sec{margin-top:var(--s10)}
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s5);margin-bottom:var(--s4);min-height:32px}
.sec-head .h2{font-size:1.375rem}
.see{height:30px;padding:0 13px;border-radius:var(--r-pill);background:var(--ink-3);font:600 0.75rem var(--f-body);display:inline-flex;align-items:center;color:var(--on-ink)}
.rail{display:flex;gap:var(--s4);padding-bottom:var(--s1)!important;overflow-x:auto;padding:0 var(--s5);scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 var(--s5)}
.rail::-webkit-scrollbar{display:none}.rail>*{flex:none;scroll-snap-align:start}
/* Rails whose section header carries a "See all" arrow (.fit) show whole cards only:
   the arrow is the "more" affordance, so cards are sized to a fraction of the visible
   area — two fit exactly (+1 gap) — and scroll-snap lands each card's left edge at the
   start. No card is left half-clipped beside the arrow; titles wrap rather than
   truncate. Arrow-less rails keep their fixed-width cards and next-card peek as the
   scroll cue. Same approach as the daily.html day strip. */
/* Match the gap to the side padding so the next card starts beyond the rail edge. */
.rail.fit{gap:var(--s5)}
.rail.fit>*{width:calc((100% - var(--s5))/2)!important;min-width:0}
/* Poster card (events, series) */
.pcard{width:200px}
.pcard .art{height:250px;border-radius:var(--r-md)}
.pcard .poster{font-size:1.625rem}
.pcard .t{margin-top:var(--s3)}
.t{font:700 0.9375rem/1.25 var(--f-display);letter-spacing:-.01em}
.wide .art{width:300px;height:170px;border-radius:var(--r-md)}
.wide{width:300px}
/* Next-step card */
.step{width:284px;height:356px;border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s6)}
.step .poster{font-size:2.75rem;align-items:flex-start;padding-top:40px;opacity:.22}
.step>*:not(.poster){position:relative}
.step h3{font:800 1.5rem/1.05 var(--f-display);letter-spacing:-.03em;margin:8px 0 6px}
.step p{font-size:0.8125rem;color:rgba(244,244,231,.8);margin-bottom:14px}
.step .eyebrow{color:#F4F4E7;opacity:.8}
/* Live / message */
.live{margin:0 var(--s5);height:220px;border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:space-between;padding:var(--s5)}
.live>*:not(.poster){position:relative}
.live-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:6px;background:#BA6A3F;font:800 0.6563rem var(--f-body);letter-spacing:.1em;color:#F4F4E7}
.live-badge i{width:6px;height:6px;border-radius:50%;background:#F4F4E7;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.playbtn{width:52px;height:52px;border-radius:50%;background:#F4F4E7;color:#1F1F1F;display:grid;place-items:center}
.playbtn svg{width:18px;height:18px;fill:#1F1F1F;margin-left:3px}
.progress{height:3px;border-radius:2px;background:rgba(244,244,231,.25);margin-top:8px}.progress i{display:block;height:100%;width:42%;background:var(--c-rust-tint);border-radius:2px}
/* List rows (no boxes; hairlines) */
.lrow{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--ink-line)}
.lrow:last-child{border-bottom:0}
.thumb{width:56px;height:56px;border-radius:12px;flex:none;display:grid;place-items:center}
.thumb .poster{font-size:0.6875rem;padding:4px}
.ic{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--ink-3);color:var(--on-ink)}
.ic svg.i{width:20px;height:20px}
.meta{flex:1;min-width:0}
.meta .cap{margin-top:2px}
.when{font:600 0.75rem var(--f-body);color:var(--on-ink-2);text-align:right;white-space:nowrap}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font:700 0.6563rem var(--f-body);letter-spacing:.02em;background:var(--ink-3);color:var(--on-ink)}
.tag-ok{background:var(--tag-ok-bg);color:var(--tag-ok-fg)}.tag-full{background:var(--tag-full-bg);color:var(--tag-full-fg)}.tag-blue{background:var(--tag-blue-bg);color:var(--tag-blue-fg)}

.chev{color:var(--on-ink-3)}
/* Group surface (iOS grouped list) */
.group{box-shadow:var(--card-shadow);background:var(--ink-2);border-radius:var(--r-md);padding:0 var(--s4)}
.group .lrow{padding:var(--s4) 0}
/* Growth Track ring */
.gt{display:flex;gap:18px;align-items:center}
.ring{width:76px;height:76px;flex:none;border-radius:50%;background:conic-gradient(var(--c-rust-tint) 0 33%,var(--ink-3) 0);display:grid;place-items:center}
.ring::before{content:"";grid-area:1/1;width:62px;height:62px;border-radius:50%;background:var(--ink)}
.ring b{grid-area:1/1;position:relative;font:800 1.25rem var(--f-display)}

.gt-dots{display:flex;gap:6px;margin:10px 0 12px}.gt-dots span{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--ink-3);font:600 0.7188rem var(--f-body);color:var(--on-ink-2)}
.gt-dots span.done{background:rgba(186,106,63,.18);color:var(--accent)}
/* Prayer */
.prayer{width:280px;border-radius:var(--r-lg);padding:var(--s6);background:var(--ink-2);box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:12px;min-height:190px}
.prayer p{font:600 1rem/1.35 var(--f-display);letter-spacing:-.01em;flex:1}
.ini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 0.75rem var(--f-display);color:#F4F4E7}
.pray{align-self:flex-start;height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink-3);font:700 0.7813rem var(--f-display);display:inline-flex;gap:6px;align-items:center;transition:.2s var(--ease)}
.pray.done{background:var(--c-moss);color:#1F1F1F}
/* Tab bar: floating glass pill */
.tabbar{position:absolute;left:14px;right:14px;bottom:24px;height:66px;border-radius:33px;z-index:55;display:flex;align-items:center;padding:0 6px;background:var(--bar-bg);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:var(--bar-shadow)}
.tab{flex:1;height:54px;border-radius:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 0.625rem var(--f-body);color:var(--bar-fg);transition:.2s var(--ease)}
.tab svg.i{width:22px;height:22px}
.tab.on{color:var(--bar-on-fg);background:var(--bar-on-bg)}
.tab.on svg.i{color:var(--bar-on-ic)}
.tabbar.light{background:rgba(244,244,231,.78);box-shadow:0 10px 30px rgba(18,18,18,.12),inset 0 0 0 1px rgba(18,18,18,.05)}
.tabbar.light .tab{color:#5B7685}.tabbar.light .tab.on{background:rgba(18,18,18,.05);color:#1F1F1F}.tabbar.light .tab.on svg.i{color:var(--c-rust-shade1)}
.tab-give .fab{width:52px;height:52px;border-radius:50%;background:var(--c-rust);color:#F4F4E7;display:grid;place-items:center;box-shadow:0 6px 16px rgba(186,106,63,.45)}
.tab-give .fab svg.i{width:22px;height:22px;color:#F4F4E7}
/* nav variant B: raise the round Give button above the bar */
.tabbar.navb .tab-give{overflow:visible}
.tabbar.navb .tab-give .fab{width:58px;height:58px;margin-top:-22px;box-shadow:0 8px 20px rgba(186,106,63,.5),0 0 0 5px var(--bar-bg)}
/* Split bar (Option C): pill nav + separate round Give */
.navsplit{position:absolute;left:14px;right:14px;bottom:24px;z-index:55;display:flex;gap:10px}
.navsplit .tabbar{position:static;flex:1}
.navsplit .give{width:66px;height:66px;border-radius:50%;background:var(--c-rust);display:grid;place-items:center;color:#F4F4E7;box-shadow:0 12px 30px rgba(186,106,63,.45)}
.fpill{position:absolute;right:18px;bottom:104px;z-index:54;height:40px;padding:0 15px;border-radius:var(--r-pill);background:var(--inv);color:var(--on-inv);font:700 0.8125rem var(--f-display);display:inline-flex;gap:7px;align-items:center;box-shadow:0 8px 24px rgba(18,18,18,.3)}
.fpill svg.i{width:17px;height:17px}
.optlabel{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:70;background:var(--c-rust-shade1);color:#F4F4E7;font:800 0.5938rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none}
/* Day strip (Option C) */
.days{display:flex;gap:8px;overflow-x:auto;padding:0 var(--s5);scrollbar-width:none}
.day{flex:none;width:50px;height:68px;border-radius:16px;background:var(--ink-2);box-shadow:var(--card-shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
.day small{font:600 0.6563rem var(--f-body);color:var(--on-ink-2)}.day b{font:800 1.1875rem var(--f-display)}
.day.on{background:var(--inv);color:var(--on-inv)}.day.on small{color:inherit;opacity:.7}
.day i{position:absolute;bottom:8px;width:5px;height:5px;border-radius:50%;background:var(--c-rust-tint)}
/* Daily: streak set as typography into the photo hero — no box, border or chip;
   a large numeral over "day streak", white, reading over the existing hero scrim. */
.streak-hero{align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:14px;color:#F4F4E7;text-shadow:0 1px 14px rgba(24,24,24,.6)}
.streak-hero b{display:block;font:800 3rem/0.95 var(--f-display);letter-spacing:-.03em}
.streak-hero small{font:700 0.75rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,244,231,.88)}
/* Daily: today date strip with prev/next arrows; today sits centered on load */
.daystrip-wrap{display:flex;align-items:center;gap:10px;padding:0 var(--s5)}
/* The scroller owns its own clip; min-width:0 keeps the flex item from growing
   past its slot (which let cards slide under the arrows). Cards are sized so
   exactly 4 (+3 gaps) fill the scroller, and scroll-snap aligns each card's left
   edge to the start — so a whole number of day cards is always visible and no
   card is ever clipped at either edge. Arrows step by whole cards (see proto.js). */
.daystrip-wrap .days{flex:1 1 0;min-width:0;padding:4px 0;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;scroll-padding-inline:0}
.daystrip-wrap .days .day{width:calc((100% - 24px)/4);scroll-snap-align:start}
.dnav{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink-2);box-shadow:var(--card-shadow);color:var(--on-ink)}
.dnav svg.i{width:18px;height:18px}
.dnav[disabled]{opacity:.32;pointer-events:none}
/* Chips / search */
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--s5);scrollbar-width:none}
.chip{flex:none;height:36px;padding:0 16px;border-radius:var(--r-pill);background:var(--ink-2);box-shadow:var(--card-shadow);font:600 0.8125rem var(--f-body);display:inline-flex;align-items:center;color:var(--on-ink-2)}
.chip.on{background:var(--inv);color:var(--on-inv)}
/* "Pick a time" chips (Growth Track) are selectable targets, not a scroll rail.
   A scroll rail clips the a11y ::after hit overlay to the 36px chip height, so
   these wrap instead and stand a full 44px tall to clear the ≥44px tap minimum. */
.chips.times{overflow:visible;flex-wrap:wrap;row-gap:8px}
.chips.times .chip{height:44px}
.search{height:46px;border-radius:var(--r-pill);background:var(--ink-2);box-shadow:var(--card-shadow);display:flex;align-items:center;gap:10px;padding:0 18px;color:var(--on-ink-3)}
/* Detail */
.dhero{position:relative;height:520px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--s5) var(--s6)}
.dhero .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,24,24,.4),transparent 25%,transparent 50%,var(--hero-end) 100%)}
.dhero{border-radius:var(--hero-r);margin-bottom:8px}
.dhero>*:not(.fade):not(.poster):not(.herobar){position:relative}
.dhero .poster{font-size:4.375rem;align-items:flex-start;padding-top:150px;opacity:.18}
.facts .lrow{padding:14px 0}
.cta-dock{position:absolute;left:0;right:0;bottom:calc(90px + env(safe-area-inset-bottom));z-index:55;padding:16px var(--s5) 8px;background:linear-gradient(transparent,var(--ink) 30%);display:flex;gap:12px;align-items:center}
/* Sheet */
.scrim{position:absolute;inset:0;z-index:80;background:rgba(18,18,18,.55);opacity:0;pointer-events:none;transition:.3s}
.sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:81;border-radius:34px;background:var(--ink-2);padding:10px 22px 26px;transform:translateY(110%);transition:transform .45s var(--ease);box-shadow:0 -10px 40px rgba(18,18,18,.5)}
.open .scrim{opacity:1;pointer-events:auto}.open .sheet{transform:none}
.sheet[hidden]{display:none}  /* named sheets: only the opened one shows under .open */
.grab{width:38px;height:5px;border-radius:3px;background:var(--on-ink-3);margin:0 auto 18px}
.box{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-ink-3);display:grid;place-items:center;flex:none}
.box.on{background:var(--c-rust-tint);box-shadow:none}.box svg{width:12px;height:12px;stroke:#1F1F1F;stroke-width:3;fill:none;opacity:0}.box.on svg{opacity:1}
.paybtn{height:54px;border-radius:var(--r-pill);background:var(--inv);color:var(--on-inv);font:700 1.0625rem var(--f-display);display:flex;align-items:center;justify-content:center;gap:4px;width:100%}
.toast{position:absolute;left:14px;right:14px;top:54px;z-index:90;border-radius:20px;padding:14px 16px;background:rgba(24,24,24,.9);backdrop-filter:blur(20px);color:#F4F4E7;font:600 0.875rem var(--f-display);display:flex;gap:10px;align-items:center;transform:translateY(-200%);transition:.4s var(--ease)}
.toast.show{transform:none}
.toast .ok{width:26px;height:26px;border-radius:50%;background:var(--c-moss);color:#1F1F1F;display:grid;place-items:center;flex:none}
/* More tiles */
.mtile{height:150px;border-radius:var(--r-lg);padding:var(--s4);display:flex;flex-direction:column;justify-content:space-between}
.mtile>*{position:relative}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Entrance motion */
.rise{animation:rise .7s var(--ease) both}.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.mono-logo{filter:var(--logo-filter)}

/* Appearance (light/dark/auto) lives in Settings → Appearance and the ?theme= review
   override. The old floating theme pill was removed: it overlapped scroll content
   (Growth Track card, Notes fill-ins) and could never be docked without covering it. */
/* Skeleton loading */
.skel{background:linear-gradient(100deg,var(--ink-3) 30%,color-mix(in srgb,var(--ink-3) 55%,var(--ink-2)) 50%,var(--ink-3) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-md)}
@keyframes shimmer{to{background-position:-150% 0}}
.skel-line{height:12px;border-radius:6px;margin-top:10px}
/* Watch */
.topic{height:88px;border-radius:var(--r-md);padding:var(--s4);display:flex;align-items:flex-end}
.topic span{position:relative;font:800 1rem var(--f-display)}
.switch{width:44px;height:26px;border-radius:13px;background:var(--ink-3);position:relative;flex:none;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#F4F4E7;box-shadow:0 1px 3px rgba(18,18,18,.3);transition:.2s var(--ease)}
.switch.on{background:var(--c-rust)}.switch.on::after{left:21px}
.cw{width:240px}.cw .art{height:136px;border-radius:var(--r-md)}
.player{position:relative;height:220px;display:grid;place-items:center}
.scrub{height:4px;border-radius:2px;background:rgba(244,244,231,.25);position:absolute;left:16px;right:16px;bottom:16px}.scrub i{display:block;width:30%;height:100%;background:#F4F4E7;border-radius:2px}
.captionbar{position:absolute;left:16px;right:16px;bottom:44px;text-align:center;color:#F4F4E7;font:600 0.8125rem/1.4 var(--f-body);background:rgba(18,18,18,.55);padding:6px 10px;border-radius:8px}
.chip-glass.on{background:var(--accent);color:#F4F4E7}
/* Icon-only player controls (captions, mini player): keep the ≥44px tap target
   from .chip-glass::after while showing just an icon; min-width stops the two
   adjacent hit areas from colliding. */
.pill-icon{min-width:40px;padding:0;justify-content:center}
.pill-icon svg.i{width:18px;height:18px}
.player.audio{filter:grayscale(.45);opacity:.92}
.seg{display:flex;background:var(--ink-3);border-radius:var(--r-pill);padding:4px}.seg span{flex:1;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;font:700 0.8125rem var(--f-display);color:var(--on-ink-2)}.seg span.on{background:var(--ink-2);color:var(--on-ink);box-shadow:var(--card-shadow)}
/* ===== v3 · image-first, minimal words ===== */
.tile{display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--r-md);padding:var(--s4);flex:none;box-shadow:var(--card-shadow)}
.tile.big{border-radius:var(--r-lg);padding:var(--s6)}
.tile>*:not(.poster){position:relative;z-index:1}
.tile .poster{font-size:2.5rem;opacity:.28;align-items:flex-start;padding-top:32px}
.tile.big .poster{font-size:4rem;padding-top:64px;opacity:.22}
.tile .tfade{position:absolute!important;inset:0;z-index:0!important;background:linear-gradient(180deg,transparent 45%,rgba(24,24,24,.55) 100%)}
.tcap{display:flex;flex-direction:column;gap:4px;color:#F4F4E7}
.tcap b{font:800 1.25rem/1.05 var(--f-display);letter-spacing:-.025em}
.tile.big .tcap b{font-size:2rem}
.tcap small{font:600 0.75rem var(--f-body);opacity:.85}
.tl{position:absolute!important;top:var(--s4);left:var(--s4)}.tile.big .tl{top:var(--s6);left:var(--s6)}
.ttag{position:absolute!important;top:12px;right:12px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:rgba(18,18,18,.4);backdrop-filter:blur(10px);font:700 0.6875rem var(--f-body);color:#F4F4E7}
.ttag svg.i{width:13px;height:13px;stroke-width:2.6}
.ttag.full{background:#BA6A3F}.ttag.ok{background:rgba(244,244,231,.92);color:#1F1F1F}
.tl2{left:var(--s6);right:auto;top:var(--s6)}
.go{position:absolute!important;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(244,244,231,.2);backdrop-filter:blur(10px);display:grid;place-items:center;color:#F4F4E7}
.go svg.i{width:18px;height:18px}
.tic{position:absolute!important;top:16px;left:16px;color:#F4F4E7}.tic svg.i{width:28px;height:28px}
.wide1{margin:0 var(--s5)}
.see svg.i{width:16px;height:16px}.see{width:32px;padding:0;justify-content:center}
.pbtn-s{position:absolute!important;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;background:rgba(244,244,231,.9);display:grid;place-items:center}
.pbtn-s svg{width:15px;height:15px;fill:#1F1F1F;margin-left:2px}
.tprog{position:absolute!important;left:16px;right:16px;bottom:16px;margin:0}
.qr{position:absolute!important;top:16px;left:16px;width:48px;height:48px;border-radius:10px;background:#F4F4E7;padding:6px}.qr div{width:100%;height:100%;background:conic-gradient(#1F1F1F 25%,#F4F4E7 0 50%,#1F1F1F 0 75%,#F4F4E7 0) 0 0/9px 9px}
.hero .hero-t{font-size:2.75rem;margin:8px 0 24px}
.when2{color:rgba(244,244,231,.8);margin-top:8px;font:600 0.875rem var(--f-body)}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.fact{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--ink-2);box-shadow:var(--card-shadow);font:600 0.8125rem var(--f-body)}
.fact svg.i{width:18px;height:18px;color:var(--accent)}
.mtile{height:160px;color:#F4F4E7}.mtile.g-moss{color:#1F1F1F}
.mic svg.i{width:28px;height:28px}
.player{height:380px}
.seg span svg.i{width:20px;height:20px}
.ibtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink-3);color:var(--on-ink);flex:none}.ibtn svg.i{width:20px;height:20px}
.topbar.sticky .display{font-size:2rem}
/* v3.1 Home element set */
.ring{--p:66;width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--ink-3) 0)}
.ring b{width:50px;height:50px;border-radius:50%;background:var(--ink-2);display:grid;place-items:center;font:800 1rem var(--f-display)}
.gtc{display:flex;gap:16px;align-items:center;background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-lg);padding:16px;color:var(--on-ink)}
.steps{display:flex;gap:6px;margin-top:8px}.steps span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 0.6875rem var(--f-display);background:var(--ink-3);color:var(--on-ink-2)}
.steps span.done{background:var(--accent);color:#F4F4E7}.steps span.done svg{width:14px;height:14px;stroke:#F4F4E7;fill:none;stroke-width:2}
.mini{display:flex;flex-direction:column;gap:2px}.mini b{font:800 1rem var(--f-display)}.mini small{font-size:0.75rem;color:var(--on-ink-2)}
/* Growth Track cinematic hero: a brand-colored progress ring built into the photo */
.gt-prog{display:flex;align-items:center;gap:16px;margin-top:6px}
.gtring{--p:66;width:104px;height:104px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from -90deg,var(--c-rust-tint) 0,var(--c-rust) calc(var(--p)*1%),rgba(244,244,231,.22) 0);box-shadow:0 14px 34px rgba(18,18,18,.42)}
.gtring-face{grid-area:1/1;width:82px;height:82px;border-radius:50%;background:rgba(24,24,24,.52);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#F4F4E7}
.gtring-face b{font:800 2.375rem/1 var(--f-display)}
.gtring-face small{font:700 0.625rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;opacity:.82;margin-top:4px}
.gt-prog-txt{color:#F4F4E7;text-shadow:0 1px 14px rgba(24,24,24,.6)}
.gt-prog-txt b{display:block;font:800 1.0625rem var(--f-display)}
.gt-prog-txt span{font:500 0.875rem/1.4 var(--f-body);color:rgba(244,244,231,.84)}
/* Richer step cards: a numbered medallion that fills in brand accent when done */
.gtsteps{display:flex;flex-direction:column;gap:14px}
.gtnum{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 0.9375rem var(--f-display);background:var(--ink-3);color:var(--on-ink-2)}
.rstep.done .gtnum,.rstep.signed .gtnum{background:var(--accent);color:#F4F4E7}
.sched{display:flex;gap:10px;overflow-x:auto;padding:0 var(--s5);scrollbar-width:none}
.sitem{flex:none;width:120px;border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--card-shadow);padding:12px;display:flex;flex-direction:column;gap:6px;color:var(--on-ink)}
.sitem .si{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#F4F4E7}.sitem .si svg.i{width:17px;height:17px}
.sitem b{font:800 0.875rem var(--f-display)}.sitem small{font-size:0.7188rem;color:var(--on-ink-2)}
.prow{display:flex;gap:10px;overflow-x:auto;padding:0 var(--s5);scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--s5)}
.prow::-webkit-scrollbar{display:none}
.pc{flex:none;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px;border-radius:var(--r-pill);background:var(--ink-2);box-shadow:var(--card-shadow);color:var(--on-ink)}
.pc .pray{height:30px;padding:0 12px}
.bell{position:relative}.bell em{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:8px;background:var(--c-rust);color:#F4F4E7;font:800 0.625rem/16px var(--f-display);font-style:normal;text-align:center;padding:0 4px}
.ngc{display:flex;align-items:center;gap:14px}
.sys{display:flex;gap:8px;justify-content:center;padding:20px var(--s5) 0}
.sys a{display:inline-flex;gap:6px;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--ink-3);font:600 0.6875rem var(--f-body);color:var(--on-ink-2)}.sys svg.i{width:13px;height:13px}
.regb{position:absolute!important;top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:3;height:28px;padding:0 11px;border-radius:var(--r-pill);background:#F4F4E7;color:#1F1F1F;font:700 0.7188rem var(--f-display);display:inline-flex;align-items:center}
.notes-pill{display:inline-flex;gap:6px;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);background:rgba(244,244,231,.18);backdrop-filter:blur(10px);color:#F4F4E7;font:700 0.75rem var(--f-display)}.notes-pill svg.i{width:14px;height:14px}
/* Live card: the artwork is a clean image area on top; the title + Notes/play row
   sit BELOW it in a solid Milestone Blue band, so no text ever overlaps the art. */
.live-card{position:relative;flex-direction:column;justify-content:stretch;padding:0;overflow:hidden}
.live-card .live-art{position:relative;flex:1 1 auto;min-height:0}
.live-card .live-band{flex:none;display:flex;align-items:center;gap:12px;padding:14px;background:var(--c-blue);color:#F4F4E7}
/* Keep the play button a tidy 44px fully inside the solid caption band with even
   14px padding on all sides — the 52px default would crowd/overflow the band. */
.live-card .live-band .playbtn{width:44px;height:44px}
.live-card .live-band .playbtn svg{width:16px;height:16px}
.live-card .live-band-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.live-card .live-band b{font:800 1.25rem/1.05 var(--f-display);letter-spacing:-.025em;color:#F4F4E7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-card .live-actions{flex:none;display:flex;align-items:center;gap:10px}
.cached{display:inline-flex;gap:5px;align-items:center;font:600 0.6875rem var(--f-body);color:var(--on-ink-3)}
.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px}
/* Full-screen standalone on phones */
.screen{height:100vh;height:100dvh;max-height:none;width:100%;max-width:430px}
@media (min-width:500px){.screen{width:390px;max-height:none}}
@media (max-width:499px){.statusbar{visibility:hidden}.scroll{padding-top:env(safe-area-inset-top)}.tabbar,.navsplit{bottom:calc(14px + env(safe-area-inset-bottom))}.navsplit .tabbar{bottom:auto}.fpill{bottom:calc(94px + env(safe-area-inset-bottom))}.screen{padding:0}}

/* ===== Run 1: Daily, Prayer, Give, Notes, Watch extras ===== */
/* Day strip states */
.day.locked{opacity:.4}
.day .lk{position:absolute;top:7px;right:7px;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.day i.ok{background:var(--c-moss)}
.day.on i,.day.on i.ok{background:var(--on-inv)}
/* Streak */
.streakbar{display:flex;align-items:center;gap:10px;background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-lg);padding:14px 16px}
.streakbar .flame{width:40px;height:40px;border-radius:50%;background:rgba(136,163,186,.18);display:grid;place-items:center;color:var(--accent);flex:none}
.streakbar .flame svg.i{width:20px;height:20px}
.streakbar b{font:800 1.25rem var(--f-display)}
.streakbar .meta b{display:block}.streakbar small{font-size:0.75rem;color:var(--on-ink-2)}
/* Daily rhythm steps */
.rhythm{display:flex;flex-direction:column;gap:14px}
.rhythm.locked{opacity:.5;pointer-events:none}
.rstep{background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:10px;cursor:pointer}
.rstep .rtop{display:flex;align-items:center;gap:12px}
.rstep .rtop .eyebrow{flex:1}
.rstep .ref{font:700 0.8125rem var(--f-display);color:var(--on-ink-2)}
.rstep p{font:500 0.9063rem/1.5 var(--f-body);color:var(--on-ink)}
.rstep.on{box-shadow:var(--card-shadow),inset 0 0 0 1.5px var(--accent)}
.rcheck{width:28px;height:28px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--on-ink-3);display:grid;place-items:center;transition:.2s}
.rcheck svg{width:14px;height:14px;stroke:#F4F4E7;stroke-width:3;fill:none;opacity:0}
.rstep.on .rcheck{background:var(--accent);box-shadow:none}.rstep.on .rcheck svg{opacity:1}
.locknote{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--on-ink-2);font:600 0.8125rem var(--f-body);padding:16px}
.locknote[hidden]{display:none}
.locknote svg.i{width:16px;height:16px}
.share-row{display:flex;gap:10px;margin-top:16px}
/* Prayer cards (home rail + lists) */
.praycard{background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.prow .praycard{flex:none;width:82vw;max-width:320px;min-width:240px;scroll-snap-align:start;align-self:flex-start}
.pc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pc-who{display:flex;align-items:center;gap:10px;min-width:0}
.pc-who b{font:800 0.875rem var(--f-display);display:block;line-height:1.2}
.pc-who small{font-size:0.7188rem;color:var(--on-ink-2)}
.pc-body{font:600 0.9375rem/1.45 var(--f-display);letter-spacing:-.01em;color:var(--on-ink);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.praycard.open .pc-body{-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.pc-more{font:700 0.75rem var(--f-display);color:var(--accent);align-self:flex-start}
.pc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-close{display:none;margin-left:auto;align-items:center;gap:5px;font:700 0.75rem var(--f-display);color:var(--muted);background:var(--ink-3);border:none;border-radius:999px;padding:7px 12px;cursor:pointer}
.pc-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none}
.praycard.open .pc-close{display:inline-flex}
.pray-mini{height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--ink-3);font:700 0.75rem var(--f-display);color:var(--on-ink-2)}
.pray-mini.danger{color:var(--c-rust)}
.pray-mini.done{background:var(--c-moss);color:#1F1F1F}
.praycard.answered{box-shadow:var(--card-shadow),inset 0 0 0 1.5px var(--tag-ok-fg)}
/* Prayer wall: horizontal scroll-snap rows by category. Cards are a fixed, wide
   width so they are never squished, and an expanded card grows in height only. */
.wallsec{margin-top:22px}
.wallhead{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--s5);margin-bottom:12px}
.wallhead .h2{font-size:1.1875rem;display:flex;align-items:baseline;gap:8px}
.wallhead .wcount{font:700 0.75rem var(--f-body);color:var(--on-ink-3)}
.seeall{height:30px;padding:0 13px;border-radius:var(--r-pill);background:var(--ink-3);font:700 0.75rem var(--f-display);color:var(--on-ink);cursor:pointer;border:0}
.wrow{display:flex;gap:12px;overflow-x:auto;padding:0 var(--s5) 4px;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding:0 var(--s5);align-items:flex-start}
.wrow::-webkit-scrollbar{display:none}
.wrow .praycard{flex:none;width:82vw;max-width:320px;min-width:240px;scroll-snap-align:start;align-self:flex-start}
/* Carousel prayer cards hold a COMPACT fixed height (body clamped to 2 lines) so
   every card in a row matches and the next card peeks in; the full request opens
   in the slide-up sheet, so a card never grows and stretches the row. */
.prow .praycard,.wrow .praycard{height:200px;justify-content:space-between;overflow:hidden}
.pc-more{cursor:pointer}
/* Prayer sheet */
.prayer-sheet .pc-head{margin:2px 0 14px}
.prayer-sheet .pc-who b{font-size:1rem}
.ps-body{font:600 1rem/1.5 var(--f-display);letter-spacing:-.01em;color:var(--on-ink);margin-bottom:22px;max-height:48vh;overflow-y:auto}
.ps-actions{display:flex;gap:10px}
.ps-actions .btn{flex:1}
.ps-pray{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ps-pray svg.i{width:18px;height:18px}
.ps-pray.done{background:var(--c-moss);color:#1F1F1F}
.plist{display:flex;flex-direction:column;gap:14px;padding:0 var(--s5)}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 20px;text-align:center}
/* Give */
.giveamt{font:800 3.5rem var(--f-display);letter-spacing:-.03em;text-align:center;margin:10px 0}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 var(--s5)}
.preset{height:52px;border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--card-shadow);font:800 1.0625rem var(--f-display);display:grid;place-items:center;color:var(--on-ink)}
.preset.on{background:var(--inv);color:var(--on-inv)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 var(--s5)}
.keypad button{height:52px;border-radius:var(--r-md);font:700 1.375rem var(--f-display);color:var(--on-ink)}
.keypad button:active{background:var(--ink-3)}
.freqseg,.campusseg{display:flex;background:var(--ink-3);border-radius:var(--r-pill);padding:4px;gap:2px}
.freqseg button,.campusseg button{flex:1;height:36px;border-radius:var(--r-pill);font:700 0.7813rem var(--f-display);color:var(--on-ink-2);white-space:nowrap;padding:0 8px}
.freqseg button.on,.campusseg button.on{background:var(--ink-2);color:var(--on-ink);box-shadow:var(--card-shadow)}
.fundrow{display:flex;align-items:flex-start;gap:12px;background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:14px 16px}
/* stack amount over detail so the amount never jams against the fund/frequency,
   and let the detail wrap cleanly at narrow widths and large text sizes */
.fundrow .meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.fundrow .meta b{font:800 1.375rem/1.1 var(--f-display)}
.fundrow .meta small{font-size:0.8125rem;line-height:1.4;color:var(--on-ink-2);overflow-wrap:anywhere}
.fundrow .ic{margin-top:2px}.fundrow .tag{margin-top:4px;flex:none}
.give-confirm{display:none}
.give.done .give-flow{display:none}
.give.done .give-confirm{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:48px 24px}
.confirm-ring{width:80px;height:80px;border-radius:50%;background:rgba(212,217,183,.2);display:grid;place-items:center;color:var(--tag-ok-fg)}
.confirm-ring svg.i{width:38px;height:38px;stroke-width:2.4}
.card-mock{display:flex;align-items:center;gap:12px;background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:14px 16px}
.card-mock .meta{flex:1;min-width:0}
/* Notes */
.notefield{background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:16px;margin:0 var(--s5)}
.notefield .eyebrow{display:block;margin-bottom:8px}
.blankline{font:600 0.9375rem/1.9 var(--f-body);color:var(--on-ink)}
.blank{display:inline-block;min-width:90px;border:0;border-bottom:2px solid var(--accent);background:transparent;color:var(--on-ink);font:700 0.9375rem var(--f-display);padding:12px 4px;line-height:1.2;vertical-align:middle}
.blank:focus{outline:none;background:var(--ink-3)}
textarea.notearea{width:100%;min-height:120px;border:0;background:transparent;color:var(--on-ink);font:500 0.9063rem/1.6 var(--f-body);resize:vertical}
textarea.notearea:focus{outline:none}
.pointlist{list-style:none;display:flex;flex-direction:column;gap:12px}
.pointlist li{display:flex;gap:12px;align-items:flex-start}
.pointlist .num{width:24px;height:24px;border-radius:50%;background:var(--ink-3);color:var(--on-ink);font:800 0.75rem var(--f-display);display:grid;place-items:center;flex:none}
/* Field (prayer compose) */
.field{background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:16px;margin:0 var(--s5)}
.field textarea{width:100%;min-height:120px;border:0;background:transparent;color:var(--on-ink);font:500 0.9375rem/1.6 var(--f-body);resize:vertical}
.field textarea:focus{outline:none}
.optrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--ink-line)}
.optrow:last-child{border-bottom:0}
.optrow .meta b{font:700 0.9063rem var(--f-display);display:block}.optrow .meta small{font-size:0.75rem;color:var(--on-ink-2)}
.notebox{background:var(--ink-3);border-radius:var(--r-md);padding:14px 16px;font:500 0.8125rem/1.5 var(--f-body);color:var(--on-ink-2)}
.notebox.ok{background:var(--tag-ok-bg);color:var(--tag-ok-fg)}
.action-stack{display:flex;flex-direction:column}
.aprow{flex-wrap:wrap}
.aprow .end{display:flex;gap:8px}
@media(max-width:390px){.aprow .end{width:100%;margin-top:10px;margin-left:52px}.aprow .end .btn{flex:1;white-space:nowrap}}
.p{font:500 0.9375rem/1.6 var(--f-body);color:var(--on-ink-2)}
/* Page header (non-hero screens) */
.phead{padding:0 var(--s5);margin-bottom:8px}
.phead h1{font:800 2rem var(--f-display);letter-spacing:-.02em}
.phead p{color:var(--on-ink-2);margin-top:4px;font-size:0.8438rem}
/* Simple back button at top-left over content */
.backrow{display:flex;align-items:center;gap:12px;padding:0 var(--s5);margin-bottom:16px}
.backrow .gbtn.auto{flex:none}

/* ===== Run 2: Me, Groups, Resources, Serving, Notifications, Settings ===== */
/* Profile header */
.profile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px var(--s5) 4px;text-align:center}
.bigav{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font:800 1.875rem var(--f-display);color:#F4F4E7;background:linear-gradient(135deg,var(--c-blue-tint1),var(--c-blue-shade1));box-shadow:0 0 0 3px rgba(244,244,231,.14)}
.bigav.photoset{box-shadow:0 0 0 3px var(--accent)}
.profile h1{font:800 1.5625rem var(--f-display);letter-spacing:-.02em}
.profile .sub{font:600 0.8125rem var(--f-body);color:var(--on-ink-2)}
.glabel{padding:0 var(--s5);margin:28px 0 10px;font:700 0.6875rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-3)}
.group+.glabel{margin-top:28px}
.lrow .sub2{font-size:0.75rem;color:var(--on-ink-2);margin-top:2px}
.lrow .end{margin-left:auto;display:flex;align-items:center;gap:10px}
.lrow .danger .t,.lrow.danger .t{color:var(--c-rust)}
/* Map mock (group finder) */
.mapmock{position:relative;height:190px;margin:0 var(--s5);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--card-shadow);background:linear-gradient(160deg,var(--ink-3),var(--ink-2))}
.mapmock .mgrid{position:absolute;inset:0;background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);background-size:34px 34px}
.mapmock .road{position:absolute;height:6px;left:-10%;right:-10%;background:var(--ink-line)}
/* Rustwood shade gives the white numeral AA contrast (~5.6:1) vs the base rust (~4:1). */
.pin{position:absolute;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-rust-shade1);color:#F4F4E7;font:800 0.8438rem var(--f-display);box-shadow:0 6px 14px rgba(18,18,18,.35);transform:translate(-50%,-50%)}
.pin.me{background:var(--c-blue);width:20px;height:20px;box-shadow:0 0 0 6px rgba(53,97,134,.25)}
/* Filter sheet rows */
.fsheet .chips{padding:0;flex-wrap:wrap;overflow:visible}
.fsheet .chip{margin-bottom:0}
.fgroup{margin-bottom:18px}
.fgroup .eyebrow{display:block;margin-bottom:10px}
/* Notifications */
.notif{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--ink-line);align-items:flex-start}
.notif:last-child{border-bottom:0}
.notif .nic{position:relative;width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:#F4F4E7}
.notif .nic svg.i{width:20px;height:20px}
.notif.unread .nic::after{content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--c-rust);box-shadow:0 0 0 2px var(--ink)}
.notif .ntext{flex:1;min-width:0}
.notif .ntext b{font:700 0.875rem var(--f-display);display:block;margin-bottom:2px}
.notif .ntext p{font:500 0.8125rem/1.45 var(--f-body);color:var(--on-ink-2)}
.notif .ntime{font:600 0.7188rem var(--f-body);color:var(--on-ink-3);white-space:nowrap}
.daymark{font:700 0.6875rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3);padding:18px var(--s5) 2px}
/* Guide reader */
.prose{padding:0 var(--s5)}
.prose p{font:500 0.9375rem/1.65 var(--f-body);color:var(--on-ink);margin-top:14px}
.prose .verse{font:600 1.125rem/1.5 var(--f-display);letter-spacing:-.01em;border-left:3px solid var(--accent);padding-left:14px;margin-top:18px;color:var(--on-ink)}
.guide-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--s5) 0}
.guide-dots{display:flex;gap:6px}.guide-dots i{width:7px;height:7px;border-radius:4px;background:var(--ink-3)}.guide-dots i.on{width:22px;background:var(--accent)}
.rnav{width:44px;height:44px;border-radius:50%;background:var(--ink-3);display:grid;place-items:center;color:var(--on-ink);flex:none}
.rnav svg.i{width:20px;height:20px}
.rnav[disabled]{opacity:.35}
/* Message bubbles (leader one-way) */
.msgbubble{background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px}
.msgbubble p{font:500 0.875rem/1.5 var(--f-body);color:var(--on-ink)}
.msgbubble small{display:block;color:var(--on-ink-3);font:600 0.7188rem var(--f-body);margin-top:8px}
a.msgbubble{display:block;color:inherit;text-decoration:none}
/* Buy now states */
.buyfail{display:none;background:rgba(136,163,186,.14);border-radius:var(--r-md);padding:14px 16px;margin:0 var(--s5);gap:10px;align-items:flex-start}
.buyfail.show{display:flex}
.buyfail svg.i{width:20px;height:20px;color:var(--accent);flex:none;margin-top:1px}
.buyfail b{font:700 0.8438rem var(--f-display);display:block}
.buyfail small{font-size:0.75rem;color:var(--on-ink-2)}
/* Prepare card */
.handcard{margin:0 var(--s5);border-radius:var(--r-lg);padding:22px;background:var(--c-ivory);color:#313131;box-shadow:var(--card-shadow)}
.handcard p{font:500 1.1875rem/1.6 var(--f-body);color:#313131}
.handcard small{display:block;margin-top:12px;font:600 0.75rem var(--f-body);color:#5B7685;letter-spacing:.02em}
/* Accept / decline serve */
.svc{background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-lg);padding:18px;margin:0 var(--s5) 14px}
.svc .svc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.svc .svc-top .ic{background:var(--c-rust);color:#F4F4E7}
.svc .svc-top b{font:800 1rem var(--f-display);display:block}
.svc .svc-top small{font-size:0.75rem;color:var(--on-ink-2)}
.svc .svc-act{display:flex;gap:10px}
.svc.resolved .svc-act{display:none}
.svc .statusline{display:none;align-items:center;gap:8px;font:700 0.8125rem var(--f-display)}
.svc.resolved .statusline{display:flex}
.svc .statusline.accepted{color:var(--tag-ok-fg)}
.svc .statusline svg.i{width:18px;height:18px}
/* Join request button states */
.btn.requested{background:var(--c-moss);color:#1F1F1F}
.rcheck.done{background:var(--accent);box-shadow:none}.rcheck.done svg{opacity:1}
/* Confetti (growth track celebrate) */
.confetti{position:absolute;inset:0;z-index:95;pointer-events:none;overflow:hidden;display:none}
.confetti.show{display:block}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall 2.2s linear forwards}
@keyframes fall{to{transform:translateY(900px) rotate(540deg);opacity:.2}}

/* ===== Run 3: login, kids check-in, kiosk, search, campus, campaigns, talk ===== */
.no-tabs .scroll{padding-bottom:40px}
/* Sign-in */
.auth{display:flex;flex-direction:column;gap:12px;padding:0 var(--s5)}
.authlogo{display:flex;justify-content:center;margin:12px 0 6px}
.tinput{height:52px;border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--card-shadow);display:flex;align-items:center;gap:10px;padding:0 16px}
/* input stretches to fill the 52px row so the whole field is tappable, not just
   the 19px text line (text stays vertically centred by the input itself). */
.tinput input{flex:1;align-self:stretch;border:0;background:transparent;color:var(--on-ink);font:600 0.9375rem var(--f-body);min-width:0}
.tinput input:focus{outline:none}
.tinput svg.i{color:var(--on-ink-3);width:20px;height:20px;flex:none}
.oauth{height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;gap:10px;font:700 0.9375rem var(--f-display);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--on-ink)}
.oauth svg{width:20px;height:20px}
.orline{display:flex;align-items:center;gap:12px;color:var(--on-ink-3);font:600 0.75rem var(--f-body);margin:6px 0}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--ink-line)}
.otp{display:flex;gap:10px;justify-content:center;margin:10px 0}
.otp input{width:46px;height:56px;text-align:center;border:0;border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--card-shadow);color:var(--on-ink);font:800 1.5rem var(--f-display)}
.otp input:focus{outline:none;box-shadow:var(--card-shadow),inset 0 0 0 2px var(--accent)}
.authstep{display:none}.authstep.on{display:flex;flex-direction:column;gap:12px}
/* Kiosk (iPad check-in, standalone) */
.kiosk{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;padding:24px;padding-top:56px}
.kiosk .khead{display:flex;align-items:center;justify-content:space-between}
.kiosk .khead b{font:800 1.25rem var(--f-display)}
.kiosk .krow{flex:1;display:flex;gap:16px}
.kbtn{flex:1;border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#F4F4E7;text-align:center;padding:20px}
.kbtn svg.i{width:56px;height:56px;stroke-width:1.5}
.kbtn b{font:800 1.5rem var(--f-display)}
.kbtn small{font:600 0.8125rem var(--f-body);opacity:.9;max-width:220px;line-height:1.4}
/* Big QR (check-in result) */
.qrbig{width:188px;height:188px;margin:8px auto;border-radius:var(--r-lg);background:#F4F4E7;padding:12px;box-shadow:var(--card-shadow)}
.qrbig svg{display:block;width:100%;height:100%}
.tagno{font:800 1.875rem var(--f-display);letter-spacing:.08em;text-align:center;margin-top:4px}
.svctime{display:flex;align-items:center;gap:12px;background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;cursor:pointer}
.svctime .box{margin-left:auto}
/* Campaign day unlock list */
.daychip{display:flex;align-items:center;gap:12px;background:var(--ink-2);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px}
.daychip.locked{opacity:.5}
.daychip .dn{width:38px;height:38px;border-radius:50%;background:var(--ink-3);display:grid;place-items:center;font:800 0.875rem var(--f-display);flex:none;color:var(--on-ink)}
.daychip.done .dn{background:var(--accent);color:#F4F4E7}
.daychip .meta b{font:700 0.9063rem var(--f-display);display:block}.daychip .meta small{font-size:0.75rem;color:var(--on-ink-2)}
.daychip .lk{margin-left:auto;color:var(--on-ink-3)}.daychip .lk svg.i{width:18px;height:18px}
/* Three asks (spring) */
.ask{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--ink-line)}
.ask:last-child{border-bottom:0}
.ask .an{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#F4F4E7;display:grid;place-items:center;font:800 0.9375rem var(--f-display);flex:none}
.ask .meta b{font:800 1rem var(--f-display);display:block;margin-bottom:3px}.ask .meta p{font:500 0.8438rem/1.5 var(--f-body);color:var(--on-ink-2)}
/* Search empty / grouped results handled by glabel + group */
.searchfield{margin:0 var(--s5)}
.searchfield input{flex:1;border:0;background:transparent;color:var(--on-ink);font:600 0.9375rem var(--f-body);min-width:0}
.searchfield input:focus{outline:none}
.nores{text-align:center;color:var(--on-ink-2);padding:40px 20px;font:600 0.875rem var(--f-body)}

/* ============================================================================
   V2 · cinematic photo layer + new systems (text size, admin preview, notes
   reading controls, watch bookmark, onboarding, Give link-out). Added as its
   own block so the V1 components above are reused, not rewritten.
   ============================================================================ */
/* --- Real-photo surface. Add class "photo" + an inline background-image to any
   .art element (keep a g-* class too). Over a photo we drop the poster text + grain
   overlay and lean on the existing .fade / .tfade scrims for legibility. --- */
/* The photo is set on the element's own background-image inline (document-relative,
   reliable cross-browser and over file://). The brand gradient pseudos are turned
   off so the photo shows; ink-3 is the solid fallback if an image is ever missing. */
.art.photo{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--ink-3)}
.art.photo::before{content:none}
.art.photo::after{content:none}
.art.photo>.poster{display:none}
/* stronger bottom scrim on photo tiles so captions stay AA-legible on bright photos */
.tile.photo .tfade{background:linear-gradient(180deg,rgba(24,24,24,.18) 0%,transparent 30%,transparent 42%,rgba(24,24,24,.86) 100%)}
/* Bottom-weighted scrim: a light cinematic reveal up top, then a firm ramp so the
   bottom-anchored hero text keeps contrast over bright photography — including when
   the text-size stepper grows the block upward. */
.hero.photo .fade,.dhero.photo .fade{background:linear-gradient(180deg,rgba(24,24,24,.5) 0%,rgba(24,24,24,.14) 20%,rgba(24,24,24,.42) 44%,rgba(24,24,24,.72) 64%,rgba(24,24,24,.9) 84%,var(--hero-end) 100%)}
/* text-shadow safety net for white hero copy sitting over photos */
.hero.photo .hero-t,.hero.photo>.eyebrow,.hero.photo>p,.dhero.photo .hero-t{text-shadow:0 1px 14px rgba(24,24,24,.6)}
/* Floating back / share (and sibling) controls over a big hero image. The 55px
   offset clears the fake status bar in the desktop/gallery preview; on an actual
   device the status bar is gone and the safe-area inset already reserves the notch,
   so the full 55px is pure dead space — drop it to a small gap over the inset. */
/* z-index:3 keeps the bar above the hero fade (0) and the bottom-anchored hero
   text (1) so Back/Share get the full tap area. The :not(.herobar) carve-outs on
   .hero>* / .dhero>* above are required: without them that rule's higher
   specificity forces this bar back to position:relative and it stacks in-flow at
   the bottom of the hero, stealing clicks from the eyebrow and sitting far below
   the safe area. */
.herobar{position:absolute;top:55px;left:20px;right:20px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px}
@media (max-width:499px){.herobar{top:calc(10px + env(safe-area-inset-top))}}

/* --- Text size: the stepper sets --fs on :root; here is the control + readbar. --- */
.readbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 var(--s5) 6px;padding:8px 12px;border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--card-shadow)}
.readbar .lbl{font:700 0.6563rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)}
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--ink-3);border-radius:var(--r-pill);padding:3px}
.stepper button{min-width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--on-ink);font:800 0.8125rem var(--f-display)}
.stepper button:active{background:var(--ink-2)}
.stepper button[disabled]{opacity:.35}
.stepper .val{min-width:40px;text-align:center;font:700 0.7188rem var(--f-body);color:var(--on-ink-2)}
/* highlighter swatches + highlightable reading text */
.hl-swatches{display:inline-flex;gap:4px;margin-left:auto}
/* 44×44 tap target (a11y) with a 28px colour dot shown via ::before so the control
   stays visually compact without shrinking the hit area. */
.hl-sw{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#313131;background:none}
.hl-sw::before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:var(--sw,var(--ink-3));box-shadow:inset 0 0 0 1px var(--ink-line)}
.hl-sw.on::before{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 2px var(--ink-2)}
.hl-sw svg{position:relative;width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}
.hl-sw[data-hl=yellow]{--sw:#F4F4E7}.hl-sw[data-hl=green]{--sw:#D4D9B7}.hl-sw[data-hl=blue]{--sw:#88A3BA}
.hl-sw[data-hl=none]{--sw:var(--ink-3);color:var(--on-ink-2)}
[data-hlable]{border-radius:5px;padding:1px 3px;margin:0 -3px;cursor:pointer;transition:background .15s}
/* Highlighter: solid pastel + dark ink text so it reads like a real highlighter
   and stays WCAG AA (>9:1) in both themes, regardless of the page background. */
[data-hlable].hl-yellow{background:#F4F4E7;color:#1F1F1F}
[data-hlable].hl-green{background:#D4D9B7;color:#1F1F1F}
[data-hlable].hl-blue{background:#88A3BA;color:#1F1F1F}
/* notes reading text in rem so the stepper scales it */
.blankline{font-size:1rem}.pointlist li>div{font-size:1rem}textarea.notearea{font-size:.95rem}.prose p{font-size:.95rem}.prose .verse{font-size:1.15rem}
/* Highlightable lines need a ≥44px tap height. Scripture phrases become their own
   block rows; main points get vertical padding. Reading text is unchanged. */
.notefield p [data-hlable]{display:block;line-height:1.4;padding:12px 3px;margin:3px -3px}
.pointlist li>[data-hlable]{padding:12px 3px}

/* --- Admin preview (prototype CMS affordance). Everything here is hidden unless
   <html data-admin>; drafts appear only when <html data-admin data-showdrafts>.
   Members and logged-out visitors never set these attributes. --- */
[data-admin-only]{display:none!important}
html[data-admin] [data-admin-only]{display:revert!important}
/* Staff-only entry points (e.g. the Admin-preview control). Hidden for everyone
   unless <html data-staff>, which JS sets only for a signed-in staff account. */
[data-staff-only]{display:none!important}
html[data-staff] [data-staff-only]{display:revert!important}
.draft{display:none}
html[data-admin][data-showdrafts] .draft{display:block}
.adminbar{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) var(--s5) 12px;background:linear-gradient(90deg,var(--c-rust-shade1),var(--c-rust));color:#F4F4E7;box-shadow:0 4px 18px rgba(18,18,18,.3)}
/* In preview the banner pins to the top; push the overlaying status bar and the
   (absolute or sticky) topbar below it so it never covers campus/header controls.
   --admin-h is measured and set by JS when the banner is built. */
html[data-admin] .statusbar{top:var(--admin-h,0)}
html[data-admin] .topbar{top:var(--admin-h,0)}
/* In the drafts preview the draft notice pushes the hero down, so the top bar
   overlays the page background rather than the photo. Use --on-ink (adapts per
   theme) so the campus label + status text keep AA contrast — in light mode they
   were white on a pale background. */
html[data-admin][data-showdrafts] .statusbar{color:var(--on-ink)}
html[data-admin][data-showdrafts] .campus{color:var(--on-ink)}
.adminbar .ab-t{flex:1;min-width:0;line-height:1.25}
.adminbar b{display:block;font:800 0.7813rem var(--f-display);letter-spacing:.02em}
.adminbar small{display:block;font:600 0.6563rem var(--f-body);opacity:.9}
.adminbar .ab-draft{display:flex;align-items:center;gap:7px;font:700 0.6875rem var(--f-display);white-space:nowrap}
.adminbar .switch{flex:none}.adminbar .switch.on{background:#252525}
.adminbar .ab-x{height:30px;padding:0 12px;border-radius:var(--r-pill);background:rgba(244,244,231,.18);color:#F4F4E7;font:700 0.7188rem var(--f-display)}
.pubtag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--r-pill);font:800 0.5938rem var(--f-body);letter-spacing:.09em;text-transform:uppercase;vertical-align:middle}
.pubtag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pubtag.t-draft{background:var(--tag-full-bg);color:var(--tag-full-fg)}
.pubtag.t-unpub{background:var(--ink-3);color:var(--on-ink-2)}
.pubtag.t-pub{background:var(--tag-ok-bg);color:var(--tag-ok-fg)}
.statenote{display:flex;gap:9px;align-items:flex-start;margin:0 var(--s5) 0;padding:12px 14px;border-radius:var(--r-md);background:var(--ink-2);box-shadow:var(--card-shadow);font:500 0.7813rem/1.45 var(--f-body);color:var(--on-ink-2)}
.statenote svg.i{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px}

/* --- Watch bookmark / save --- */
/* Save/bookmark: a small, subtle corner icon. The visual is ~30px so it never
   competes with the play button; a centred ::after keeps the ≥44px tap target. */
.savebtn{position:absolute!important;top:10px;right:10px;z-index:4;width:30px;height:30px;border-radius:50%;background:rgba(18,18,18,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;color:#F4F4E7}
.savebtn svg.i{width:15px;height:15px;fill:none;stroke-width:2}
.savebtn.on{background:#F4F4E7;color:#1F1F1F}.savebtn.on svg.i{fill:currentColor;stroke:currentColor}

/* --- Give link-out (no in-app payment) --- */
.give-amtrow{display:flex;gap:10px;overflow-x:auto;padding:0 var(--s5);scrollbar-width:none}.give-amtrow::-webkit-scrollbar{display:none}
.amtlink{flex:none;min-width:64px;height:48px;padding:0 18px;border-radius:var(--r-pill);background:var(--ink-2);box-shadow:var(--card-shadow);display:inline-flex;align-items:center;justify-content:center;font:800 1rem var(--f-display);color:var(--on-ink)}
.extnote{display:inline-flex;align-items:center;gap:6px;font:600 0.7188rem var(--f-body);color:var(--on-ink-3)}
.extnote svg.i{width:14px;height:14px}

/* --- Onboarding: full-bleed photo slides. Original composition. --- */
.onb{position:absolute;inset:0;overflow:hidden;background:#121212}
.onb-track{display:flex;height:100%;transition:transform .5s var(--ease);will-change:transform}
.onb-slide{position:relative;flex:none;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.onb-slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#252525}
.onb-slide .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,24,24,.28) 0%,transparent 28%,rgba(24,24,24,.5) 60%,rgba(24,24,24,.93) 100%)}
.onb-body{position:relative;z-index:1;padding:0 28px calc(42px + env(safe-area-inset-bottom));color:#F4F4E7}
.onb-body .eyebrow{color:var(--c-rust-tint)}
.onb-body h2{font:800 2.3rem/1.02 var(--f-display);letter-spacing:-.03em;margin:12px 0 10px;max-width:12ch}
.onb-body p{font:500 1rem/1.5 var(--f-body);color:rgba(244,244,231,.84);max-width:30ch;margin-bottom:26px}
.onb-top{position:absolute;top:calc(18px + env(safe-area-inset-top));left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.onb-logo{height:20px;filter:brightness(0) invert(1);opacity:.95}
.onb-skip{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 15px;border-radius:var(--r-pill);background:rgba(244,244,231,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#F4F4E7;font:700 0.8125rem var(--f-display);line-height:1;white-space:nowrap}
.onb-foot{display:flex;align-items:center;gap:14px}
.onb-dots{display:flex;gap:7px;flex:1}
.onb-dots i{width:7px;height:7px;border-radius:4px;background:rgba(244,244,231,.4);transition:.3s var(--ease)}
.onb-dots i.on{width:24px;background:#F4F4E7}
.onb-next{height:52px;padding:0 26px;border-radius:var(--r-pill);background:#F4F4E7;color:#1F1F1F;font:800 0.9375rem var(--f-display);display:inline-flex;align-items:center;gap:8px}
.onb-next svg.i{width:18px;height:18px;stroke-width:2.4}
.onb-slide .onb-body{padding-bottom:calc(205px + env(safe-area-inset-bottom))}
.onb-footer{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 22px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.onb-signin{align-self:flex-start;color:rgba(244,244,231,.85)!important}

/* ============================================================================
   a11y — minimum 44×44 tap targets + visible keyboard focus.
   Small standalone controls keep their compact look but expose a ≥44px hit
   area via a centred ::after overlay (pseudo-elements don't capture the event
   target, so the host control still receives the tap/click).
   ============================================================================ */
.see,.seeall,.pray,.pray-mini,.pc-close,.pc-more,.chip,.ab-x,.rnav,.onb-skip,.btn-sm,.freqseg button,.campusseg button,.ibtn,.sys a,.campus,.chip-glass,.seg span{position:relative}
/* .regb/.savebtn are already position:absolute, so the ::after resolves against
   them without a position:relative override. */
.see::after,.seeall::after,.pray::after,.pray-mini::after,.pc-close::after,.pc-more::after,.chip::after,.ab-x::after,.onb-skip::after,.btn-sm::after,.freqseg button::after,.campusseg button::after,.regb::after,.savebtn::after,.ibtn::after,.sys a::after,.campus::after,.chip-glass::after,.seg span::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:44px;min-height:44px;width:100%;height:100%}
/* Admin Drafts switch: its ::after is the knob, so the ≥44×44 hit overlay goes on
   ::before (same centred-overlay pattern). Scoped to .adminbar so other switches are
   untouched; transparent overlay = no visual change, host still receives the tap. */
.adminbar .switch::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:44px;min-height:44px;width:100%;height:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hl-sw:focus-visible,.savebtn:focus-visible,.onb-skip:focus-visible,.btn-white:focus-visible{outline:2px solid #F4F4E7;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.hl-sw,.savebtn{transition:box-shadow .15s var(--ease)}}

/* ============================================================================
   V2 feedback pass: Home Growth Track three-step indicator, Daily rhythm
   tiles, and cinematic Growth Track step cards. All brand tokens only.
   ============================================================================ */
/* --- Home: three numbered step circles replace the single progress ring.
   Each circle is a numbered medallion matching the Growth Track step badges:
   a finished step fills with the rust accent and shows a check; the next step
   is outlined; later steps sit quiet. A short rail links them. --- */
.gt3{display:flex;align-items:center;flex:none}
.gt3 .c{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 0.9375rem var(--f-display);background:var(--ink-3);color:var(--on-ink-2)}
.gt3 .c span{grid-area:1/1}
.gt3 .c svg{grid-area:1/1;width:16px;height:16px;stroke:#F4F4E7;stroke-width:2.6;fill:none;opacity:0}
.gt3 .c.done{background:var(--accent);color:#F4F4E7}
.gt3 .c.done span{opacity:1}.gt3 .c.done svg{display:none}
.gt3 .c.next{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.gt3 .seg{width:14px;height:3px;flex:none;background:var(--ink-3);border-radius:2px}
.gt3 .seg.done{background:var(--accent)}
/* --- Daily: one compact 3-dot progress line under the title. Dots fill as
   Read · Confess · Pray are checked; the per-step done state lives on the Go
   deeper cards, so status shows from a single set with nothing duplicated. --- */
.dayprog{display:flex;align-items:center;gap:10px;margin-top:10px}
.dayprog .dp-dots{display:inline-flex;gap:6px}
.dayprog .dp-dots i{width:8px;height:8px;border-radius:50%;background:var(--on-ink-3);opacity:.5;transition:.2s var(--ease)}
.dayprog .dp-dots i.on{background:var(--accent);opacity:1}
.dayprog small{font:700 0.75rem var(--f-body);color:var(--on-ink-2)}
/* --- Growth Track: cinematic photo-led step cards with clear Done / Next /
   Locked states. Imagery per step, a numbered medallion, and a state badge. --- */
.gtsteps{display:flex;flex-direction:column;gap:16px}
.gtstep{border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);box-shadow:var(--card-shadow);position:relative}
.gtstep-img{position:relative;height:156px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.gtstep-img .gtstep-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,24,24,.28) 0%,transparent 34%,rgba(24,24,24,.74) 100%)}
.gtstep-img>*:not(.gtstep-scrim){position:relative;z-index:1}
.gtstep-stage{font:700 0.6875rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#F4F4E7;text-shadow:0 1px 10px rgba(24,24,24,.6)}
.gtstep .gtnum{position:absolute;top:14px;left:14px;z-index:1;background:rgba(244,244,231,.92);color:#181818;box-shadow:0 6px 16px rgba(18,18,18,.34)}
.gtstep.done .gtnum,.gtstep.signed .gtnum{background:var(--accent);color:#F4F4E7}
/* specificity must beat .gtstep-img>*:not(.gtstep-scrim){position:relative} above,
   like .gtnum does, so the badge stays a small content-width corner pill instead
   of becoming a full-width flex item along the bottom of the photo. */
.gtstep .gtstep-state{position:absolute;top:14px;right:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);background:rgba(24,24,24,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F4F4E7;font:700 0.6875rem var(--f-display);letter-spacing:.02em;box-shadow:0 6px 16px rgba(18,18,18,.34)}
.gtstep-state svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.6;fill:none}
.gtstep-state .st-done{display:none}
.gtstep-state.done{background:var(--accent);color:#F4F4E7}
.gtstep-state.done .st-next{display:none}
.gtstep-state.done .st-done{display:inline-flex;align-items:center;gap:6px}
.gtstep-state .st-next{display:inline-flex;align-items:center;gap:6px}
.gtstep-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.gtstep-body .t{font:800 1.1875rem/1.15 var(--f-display);letter-spacing:-.01em}
.gtstep-body p{font:500 0.9063rem/1.5 var(--f-body);color:var(--on-ink-2)}
.gtstep.done .gtstep-img{filter:saturate(.95)}
.gtstep.next{box-shadow:var(--card-shadow),inset 0 0 0 1.5px var(--accent)}
.gtstep.locked{opacity:.6;pointer-events:none}
.gtstep.locked .gtstep-img{filter:grayscale(.65)}
.gtstep.locked .gtstep-state{background:rgba(24,24,24,.52)}

/* ============================================================================
   Message mini player. The Mini player control shrinks the full player into a
   small floating pill above the tab bar; tapping the pill (anywhere but the
   play button) expands it back to full size.
   ============================================================================ */
.mini-title,.mini-expand,.mini-prog{display:none}
.player.mini{position:absolute;left:auto;right:14px;bottom:100px;width:230px;height:62px;min-height:0;border-radius:16px;z-index:56;display:flex;flex-direction:row;align-items:center;background-color:#252525;background-blend-mode:multiply;gap:10px;padding:0 10px;box-shadow:0 14px 34px rgba(18,18,18,.45);cursor:pointer}
.player.mini>.poster,.player.mini>.herobar,.player.mini>.scrub,.player.mini>.captionbar,.player.mini>[data-player-time]{display:none!important}
.player.mini [data-player-play]{position:relative!important;width:40px!important;height:40px!important;flex:none}
.player.mini [data-player-play] svg{width:15px;height:15px}
.player.mini .mini-title{display:block;flex:1;min-width:0;color:#F4F4E7;font:700 0.8125rem var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(18,18,18,.55)}
.player.mini .mini-expand{display:grid;place-items:center;width:34px;height:34px;flex:none;color:#F4F4E7;background:none}
.player.mini .mini-expand svg{width:18px;height:18px}
.player.mini .mini-prog{display:block;position:absolute;left:12px;right:12px;bottom:7px;height:2px;border-radius:2px;background:rgba(244,244,231,.28)}
.player.mini .mini-prog i{display:block;height:100%;width:0;background:var(--c-rust-tint);border-radius:2px}

/* Cinematic home: editorial photography, generous rails, quiet dark surfaces. */
.cinematic{--ink:#181818;--ink-2:#252525;--ink-3:#313131;--on-ink:#F4F4E7;--on-ink-2:#BFBFB8;--on-ink-3:#BFBFB8;--accent:#88A3BA;--bar-bg:rgba(24,24,24,.9);--bar-fg:#BFBFB8;--bar-on-fg:#F4F4E7;--bar-on-ic:#88A3BA;--btn2-bg:#313131;--btn2-fg:#F4F4E7;--line-strong:rgba(232,232,224,.24);color-scheme:dark}
.home-cinema .hero{height:640px!important;padding-bottom:46px;background-position:58% center}
.cinematic .hero .fade{background:linear-gradient(180deg,rgba(18,18,18,.3),rgba(18,18,18,.06) 30%,rgba(24,24,24,.78) 68%,#181818)}
.home-cinema .hero-t{font-size:4.5rem;font-weight:900;letter-spacing:-.055em}
.home-cinema .hero>.poster{display:none}
.home-cinema .sec{margin-top:36px}
.home-cinema .h2{font-size:1.6rem;font-weight:800;letter-spacing:-.035em}
.home-cinema .tile{border-radius:28px}
.home-cinema [data-foryou] .tile{width:286px!important;height:360px!important}
.home-cinema [data-foryou] .poster{display:none}
.home-cinema [data-foryou] .tcap{padding:24px}
.home-cinema [data-foryou] .tcap b{font-size:2.25rem;font-weight:900;letter-spacing:-.04em}
.home-cinema .tfade{background:linear-gradient(180deg,transparent 20%,rgba(18,18,18,.35) 50%,rgba(18,18,18,.92))}
.home-cinema .gtc{padding:22px;border-radius:24px;background:#252525}
:is(.home-cinema,.daily-cinema) .prow{gap:14px}
:is(.home-cinema,.daily-cinema) .prow .praycard{width:300px;height:240px;padding:22px;background:linear-gradient(135deg,rgba(24,24,24,.85),rgba(24,24,24,.94)),url('../assets/web-header-no-type.jpg') center/cover;border:1px solid rgba(232,232,224,.12)}
:is(.home-cinema,.daily-cinema) .pc-body{line-height:1.7;color:#F4F4E7}
:is(.home-cinema,.daily-cinema) .pc-who small{color:#BFBFB8}

/* Daily: one streak and calendar, then a quiet photo-backed reading. */
.daily-cinema .hero{height:440px!important;padding-bottom:24px;background-position:62% center}
.daily-cinema .hero-t{font-size:2.8rem;font-weight:900;letter-spacing:-.045em}
.daily-cinema .streak-hero{flex-direction:row;align-items:baseline;gap:10px;margin-top:20px}
.daily-cinema .streak-hero b{font-size:3.5rem;color:#88A3BA}
.daily-cinema .daystrip-wrap{width:calc(100% + 24px);margin-left:-12px;margin-top:20px!important;position:relative;z-index:2;color:#F4F4E7}
.daily-cinema .days{gap:4px}
.daily-cinema .day{background:rgba(61,61,61,.6);border-radius:14px}
.daily-cinema .day.on{background:#356186;color:#F4F4E7}
.daily-cinema .rstep{padding:26px 22px;border-radius:24px;background:#252525}
.daily-cinema .rstep[data-step=read]{background:linear-gradient(180deg,rgba(24,24,24,.72),rgba(24,24,24,.96)),url('../assets/homepage-septworshipcompressed.jpg') center/cover}
.daily-cinema [data-read-body]{font:750 1.6rem/1.5 var(--f-display);letter-spacing:-.02em;color:#F4F4E7}
.daily-cinema .rhythm{gap:18px}
.daily-cinema .rstep p{line-height:1.7}
.daily-cinema .daystrip-wrap{gap:5px;padding:0;width:100%;margin-left:0}
.daily-cinema .daystrip-wrap .dnav{width:24px;min-width:24px;height:44px}
.daily-cinema .daystrip-wrap .days .day{width:calc((100% - 24px)/7);height:64px;border-radius:12px}
.daily-cinema .day b{font-size:1rem}
.daily-cinema .day small{font-size:.55rem}
.daily-cinema .day.on i{background:#F4F4E7}

/* Give: a photo-led welcome and a generous, centered quick-gift amount. */
.give-cinema .hero{height:410px!important;padding-bottom:30px;background-position:58% center}
.give-cinema .hero-t{font-size:3.1rem!important;font-weight:900;letter-spacing:-.05em}
.give-cinema .hero p{max-width:300px;line-height:1.6}
.give-cinema .sec{margin-top:28px}
.give-cinema .give-amtrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 20px}
.give-cinema .amtlink{flex:1;min-width:64px;height:52px;border-radius:18px;background:#252525;color:#F4F4E7;box-shadow:inset 0 0 0 1px rgba(232,232,224,.14)}
.give-cinema .amtlink:nth-child(3){order:-1;flex-basis:100%;height:140px;font:900 5.5rem/1 var(--f-display);letter-spacing:-.06em;background:#356186;color:#F4F4E7;box-shadow:none;border-radius:28px}
.give-cinema .group{border-radius:24px;background:#252525}
.give-cinema .lrow{padding-top:20px;padding-bottom:20px}
.give-cinema .notebox{background:#252525;color:#BFBFB8}

/* My giving: quiet statement controls, a recurring card, spaced month groups. */
.giving-cinema .topbar{padding-top:58px;padding-bottom:24px;background:#181818}
.giving-cinema .topbar .display{font-size:2.2rem!important;font-weight:900;letter-spacing:-.04em}
.giving-cinema .freqseg{background:#252525;padding:5px;border-radius:18px}
.giving-cinema .freqseg .on{background:#356186;color:#F4F4E7}
.giving-cinema .sec{margin-top:28px!important}
.giving-cinema [data-give-recurring]>.pad{margin:0 20px;padding:24px;border-radius:26px;background:linear-gradient(140deg,#356186,#252525)}
.giving-cinema .fundrow{padding:0;background:transparent;box-shadow:none;align-items:flex-start}
.giving-cinema .fundrow .meta [data-rec-amt]{font:900 3.8rem/1.1 var(--f-display);letter-spacing:-.05em}
.giving-cinema [data-rec-detail]{display:block;margin-top:10px;line-height:1.6;color:#E8E8E0}
.giving-cinema [data-give-recurring] .cap{color:#E8E8E0;line-height:1.6}
.giving-cinema [data-give-list]{background:transparent;padding:0!important}
.giving-cinema [data-give-list] .lrow{padding:20px 16px;background:#252525}
.giving-cinema [data-give-list] .lrow:first-child,.giving-cinema [data-give-list] .lrow:nth-child(4),.giving-cinema [data-give-list] .lrow:nth-child(6){border-radius:22px 22px 0 0;border-top:0}
.giving-cinema [data-give-list] .lrow:nth-child(3),.giving-cinema [data-give-list] .lrow:nth-child(5),.giving-cinema [data-give-list] .lrow:last-child{border-radius:0 0 22px 22px}
.giving-cinema [data-give-list] .lrow:nth-child(4),.giving-cinema [data-give-list] .lrow:nth-child(6){margin-top:18px}
.giving-cinema [data-give-list] .lrow:last-child{border-radius:22px}
.giving-cinema [data-give-list] .t{font-size:1.5rem;font-weight:800}
.giving-cinema [data-give-list] .when{color:#BFBFB8;font-size:.75rem}

.give-cinema .tinput select{flex:1;min-width:0;border:0;background:var(--ink-2);color:var(--on-ink);font:600 0.9375rem var(--f-body);height:100%}

button.regb[data-coming]{border:0;cursor:pointer;z-index:3}

/* Official Prepare campaign artwork. These classes are exclusive to Prepare imagery. */
.art.photo.prepare-art{background-color:#fff52b;background-size:100% auto;background-position:center 18%}
.art.photo.prepare-art.thumb{background-size:cover;background-position:center}
body.guide-prepare .pg-worship.prepare-swap-worship{background:#191a16;color:#fff52b}
body.guide-prepare .pg-worship.prepare-swap-worship img{opacity:.18;object-fit:contain}
body.guide-prepare .pg-landscape.prepare-swap-lake{background:#191a16;color:#fff52b}
body.guide-prepare .pg-landscape.prepare-swap-lake img{opacity:.18;object-fit:contain;filter:none}
body.guide-prepare .prepare-swap-mountains{background:#fff52b;object-fit:contain}
body.daily-cinema .hero.prepare-art{background-position:center -25px}