/* ═══════════════════════════════════════════════════════════════
   FUN BIBLE ONLINE — SCROLL THEME
   Loaded after style.css; overrides the visual layer only.

   The model: one fixed backdrop that never changes, and each page
   (#pg-*) floats on it as a box. Navigation swaps the box, the
   scroll stays put.

   No image files — gradients, SVG turbulence and live text.
   Tune the whole theme from the tokens below.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --sc-paper-1:#e8d6b4;   /* vellum, lit    */
  --sc-paper-2:#ddc79f;
  --sc-paper-3:#cdb184;
  --sc-paper-4:#b99a6e;   /* vellum, shadow */
  --sc-ink:#2a1d0d;       /* text on paper  */
  --sc-ground:#140d04;    /* behind the sheet */

  --sc-panel-1:#f7edd6;   /* cream, lit     */
  --sc-panel-2:#efe0c2;
  --sc-panel-3:#e8d6b4;   /* cream, shadow  */
  --sc-panel-text:#2a1d0d;
  --sc-panel-head:#2a1d0d;
  --sc-gold:#b8892a;
  --sc-gold-line:rgba(184,137,42,.42);

  --sc-box-alpha:.97;
  --sc-nav-w:288px;
  --sc-rod-w:54px;
  --sc-sheet-inset:34px;
}

/* ── kill the old decorative layer ───────────────────────────── */
#starfield,#particles,.app-overlay{display:none!important}

/* ── the fixed backdrop ──────────────────────────────────────── */
body{background:radial-gradient(120% 80% at 50% 50%,#241806,var(--sc-ground))!important}

#scroll-bg{position:fixed;top:0;bottom:0;left:0;right:0;z-index:0;overflow:hidden;pointer-events:none}

/* the sheet hangs between the rods, torn top and bottom */
#scroll-bg .sheet{
  position:absolute;left:0;right:0;
  top:var(--sc-sheet-inset);bottom:var(--sc-sheet-inset);
  box-shadow:0 10px 34px rgba(0,0,0,.6),0 -10px 34px rgba(0,0,0,.55);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' preserveAspectRatio='none'><filter id='t' x='-12%' y='-12%' width='124%' height='124%'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.022' numOctaves='4' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-40' y='16' width='1280' height='768' fill='white' filter='url(%23t)'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' preserveAspectRatio='none'><filter id='t' x='-12%' y='-12%' width='124%' height='124%'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.022' numOctaves='4' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-40' y='16' width='1280' height='768' fill='white' filter='url(%23t)'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* aged vellum */
#scroll-bg .parch{
  position:absolute;inset:0;
  background:
    radial-gradient(55% 40% at 26% 20%, rgba(255,248,228,.72), transparent 62%),
    radial-gradient(45% 34% at 78% 34%, rgba(252,242,216,.42), transparent 64%),
    radial-gradient(75% 58% at 50% 100%, rgba(86,58,26,.52), transparent 62%),
    radial-gradient(50% 40% at 4% 78%, rgba(96,64,28,.50), transparent 58%),
    radial-gradient(48% 38% at 99% 84%, rgba(90,60,26,.48), transparent 56%),
    radial-gradient(40% 30% at 88% 8%, rgba(104,70,32,.34), transparent 60%),
    linear-gradient(168deg,var(--sc-paper-1) 0%,var(--sc-paper-2) 34%,var(--sc-paper-3) 68%,var(--sc-paper-4) 100%);
  animation:sc-breathe 52s ease-in-out infinite alternate;
}
@keyframes sc-breathe{to{transform:scale(1.05) translate3d(-1.4%,-1%,0)}}

/* real paper grain */
#scroll-bg .grain{
  position:absolute;inset:-20%;mix-blend-mode:multiply;opacity:.9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23g)' opacity='0.8'/></svg>");
  animation:sc-grain 24s steps(6) infinite;
}
@keyframes sc-grain{
  0%{transform:translate(0,0)}   20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)} 60%{transform:translate(-1%,-1%)}
  80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)}
}

/* out-of-focus scripture, two depths */
#scroll-bg .verse-far,#scroll-bg .verse-near{
  position:absolute;left:50%;top:0;width:min(1100px,128vw);
  transform:translateX(-50%);
  font-family:"Crimson Pro",Georgia,serif;color:#2e1a05;
  text-align:center;user-select:none;
}
#scroll-bg .verse-far{
  font-size:2.05rem;line-height:2.5;letter-spacing:.02em;
  filter:blur(2.5px);opacity:.26;animation:sc-far 150s linear infinite;
}
#scroll-bg .verse-near{
  font-size:3.15rem;line-height:2.15;font-style:italic;
  filter:blur(6px);opacity:.18;animation:sc-near 210s linear infinite;
}
@keyframes sc-far {from{transform:translateX(-50%) translateY(0)}    to{transform:translateX(-50%) translateY(-50%)}}
@keyframes sc-near{from{transform:translateX(-52%) translateY(-12%)} to{transform:translateX(-48%) translateY(-58%)}}

/* foxing + worn edges */
#scroll-bg .stain{
  position:absolute;inset:0;mix-blend-mode:multiply;opacity:.42;
  background:
    radial-gradient(circle at 14% 26%, rgba(118,76,30,.40) 0 4%, transparent 9%),
    radial-gradient(circle at 82% 16%, rgba(128,86,38,.32) 0 3%, transparent 7%),
    radial-gradient(circle at 66% 72%, rgba(108,68,26,.36) 0 5%, transparent 11%),
    radial-gradient(circle at 32% 88%, rgba(120,78,32,.30) 0 4%, transparent 9%),
    radial-gradient(circle at 92% 56%, rgba(112,72,28,.34) 0 3%, transparent 8%),
    radial-gradient(circle at 6% 60%, rgba(124,82,34,.28) 0 6%, transparent 12%);
}
#scroll-bg .vig{
  position:absolute;inset:0;
  background:
    radial-gradient(125% 100% at 50% 50%, transparent 40%, rgba(72,46,18,.38) 82%, rgba(52,32,12,.62) 100%),
    linear-gradient(90deg, rgba(70,44,16,.34), transparent 9%, transparent 91%, rgba(70,44,16,.34));
}
#scroll-bg .edge{position:absolute;left:0;right:0;height:54px}
#scroll-bg .edge-t{top:0;background:linear-gradient(180deg,rgba(46,28,8,.72),rgba(84,56,24,.20) 60%,transparent)}
#scroll-bg .edge-b{bottom:0;background:linear-gradient(0deg,rgba(46,28,8,.72),rgba(84,56,24,.20) 60%,transparent)}

/* paper curling into the rods */
#scroll-bg .curl{position:absolute;top:0;bottom:0;width:62px;z-index:1}
#scroll-bg .curl-l{left:40px;background:linear-gradient(90deg,rgba(58,38,14,.52),rgba(88,60,26,.26) 26%,rgba(255,246,225,.30) 52%,rgba(120,84,40,.10) 74%,transparent)}
#scroll-bg .curl-r{right:40px;background:linear-gradient(270deg,rgba(58,38,14,.52),rgba(88,60,26,.26) 26%,rgba(255,246,225,.30) 52%,rgba(120,84,40,.10) 74%,transparent)}

/* ── real wooden rods (photographed oak, not a CSS cartoon) ── */
#scroll-bg .rod{position:absolute;top:0;bottom:0;width:var(--sc-rod-w);z-index:3}
#scroll-bg .rod-l{left:0}
#scroll-bg .rod-r{right:0;transform:scaleX(-1)}
#scroll-bg .rod i{position:absolute;display:block}
#scroll-bg .rod .shaft{
  left:4px;right:4px;top:28px;bottom:28px;border-radius:18px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.4) 100%),
    url("images/scroll-rod.jpg") center / cover no-repeat;
  box-shadow:
    inset 8px 0 12px -8px rgba(0,0,0,.65),
    inset -6px 0 10px -6px rgba(255,220,160,.18),
    0 0 28px rgba(24,14,4,.55);
}
#scroll-bg .rod .fin{
  left:0;right:0;height:32px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 40%, rgba(255,220,160,.18), transparent 50%),
    url("images/scroll-finial.jpg") center / cover no-repeat;
  box-shadow:0 4px 12px rgba(16,10,3,.7);
}
#scroll-bg .rod .fin-a{top:0}
#scroll-bg .rod .fin-b{bottom:0;transform:scaleY(-1)}

/* ═══ THE PAGES ══════════════════════════════════════════════
   The page itself is NOT a box. It's a transparent column, and
   each section inside it is its own box, sized to its content,
   floating independently on the scroll. Nothing is wrapped in a
   single container.
   ═══════════════════════════════════════════════════════════ */
.pg{
  position:relative;z-index:4;
  max-width:880px!important;    /* beats body,.page,main{max-width:100vw!important} */
  margin:0 auto;
  background:none!important;border:0!important;box-shadow:none!important;
  padding:calc(var(--sc-sheet-inset) + 18px) 18px calc(var(--sc-sheet-inset) + 40px);
  display:flex;flex-direction:column;gap:22px;
  min-height:0;
}

/* every direct child is a box in its own right */
.pg > *{
  background:linear-gradient(180deg,
    rgba(247,237,214,var(--sc-box-alpha)) 0%,
    rgba(239,224,194,var(--sc-box-alpha)) 100%)!important;
  border:1px solid var(--sc-gold-line)!important;
  border-radius:4px;
  color:var(--sc-panel-text);
  padding:20px 22px;
  box-shadow:
    0 8px 24px -16px rgba(26,18,8,.4),
    inset 0 1px 0 rgba(255,248,228,.75);
  margin:0;
}
/* the page-header row is a label, not a panel */
.pg > .pg-hdr{
  background:none!important;border:0!important;box-shadow:none!important;padding:0 2px;
}
.pg-title{color:var(--sc-panel-head)!important}
.pg h1,.pg h2,.pg h3{color:var(--sc-panel-head)}
.pg p{color:var(--sc-panel-text)}

@media (max-width:900px){
  .pg{margin-left:calc(var(--sc-rod-w) + 6px);margin-right:calc(var(--sc-rod-w) + 6px);padding-left:10px;padding-right:10px;gap:16px}
  .pg > *{padding:16px 14px}
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS INSIDE THE BOX
   The .pg box is the surface. Everything that used to paint its own
   navy panel gets re-mapped onto the leather palette.
   #pg-games is deliberately excluded — it's getting its own look.
   ═══════════════════════════════════════════════════════════════ */

/* ── inset surfaces: a shade lighter than the box ── */
/* sections that are themselves a direct child are already boxed above,
   so they must not paint a second panel inside it */
.pg > :is(.home-hero,.home-about-strip,.daily-section,.streak-section,
          .home-scripture-row,.home-explore){
  background:linear-gradient(180deg,
    rgba(247,237,214,var(--sc-box-alpha)),
    rgba(239,224,194,var(--sc-box-alpha)))!important;
}
.pg:not(#pg-games) :is(
  .daily-card,.streak-card,.about-card,.prayer-hero-card,
  .prayer-compose-card,.watch-card,.home-stat
){
  background:#faf3e4!important;
  border:1px solid var(--sc-gold-line)!important;
  border-radius:4px!important;
  box-shadow:none!important;
  color:var(--sc-panel-text);
}

/* ── buttons: leather with a gold edge ── */
.pg:not(#pg-games) :is(
  .save-btn,.back-btn,.fcat-btn,.comfort-topic-btn,.qsort-btn,.btab,
  .bite-nav-btn,.bbn,.prayer-send-btn,.watch-play-btn,.stb,
  .bkb,.sn-btn,.jr-btn
){
  background:linear-gradient(158deg,#5a4527,#3a2a15)!important;
  border:1px solid rgba(206,163,86,.44)!important;
  color:#f0e4c8!important;
  box-shadow:inset 0 1px 0 rgba(236,200,134,.2), 0 2px 5px rgba(16,10,3,.4)!important;
}
.pg:not(#pg-games) :is(.save-btn,.back-btn,.fcat-btn,.comfort-topic-btn,.qsort-btn,.btab,.bite-nav-btn,.bbn,.prayer-send-btn,.watch-play-btn,.stb,.bkb,.sn-btn,.jr-btn):hover{
  background:linear-gradient(158deg,#6b5430,#47341b)!important;
  border-color:var(--sc-gold)!important;
}

/* ── inputs: pressed into the leather ── */
.pg:not(#pg-games) :is(
  .prayer-input,.prayer-textarea,.bible-search,.stories-search,.notes-area,.prayer-cat
){
  background:#faf3e4!important;
  border:1px solid var(--sc-gold-line)!important;
  color:#2a1d0d!important;
  box-shadow:none!important;
}

/* ── badges, tags, progress fills: gold ── */
.pg:not(#pg-games) :is(.stag,.spc2-badge,.gc-badge){
  background:linear-gradient(158deg,#c1913f,#8a6427)!important;
  color:#1d1408!important;border:none!important;
}
.pg:not(#pg-games) :is(.spc2-progress-fill,.bite-prog-fill){
  background:linear-gradient(90deg,#d8a13c,#b07a17)!important;
}

/* ── overlays over imagery stay dark, just warmer ── */
.pg:not(#pg-games) :is(.sc-overlay,.gc-overlay){
  background:linear-gradient(0deg,rgba(20,13,4,.88),rgba(20,13,4,.15))!important;
}

/* section dividers and hairlines pick up the gold */
.pg:not(#pg-games) hr,
.pg:not(#pg-games) .sec-div{border-color:rgba(206,163,86,.25)!important}

/* ── age banner: was carrying cool navy-theme greys ── */
.pg > .age-banner{
  display:flex;align-items:center;gap:14px;
}
.age-ban-title{color:var(--sc-gold)!important;font-size:.95rem!important;letter-spacing:.01em}
.age-ban-sub{color:#bdad8b!important}
.age-ban-icon{filter:none;opacity:.95}

/* ═══════════════════════════════════════════════════════════════
   PALETTE REMAP
   style.css's tokens were picked for a navy ground. On warm leather
   the cool ones drop below WCAG AA. Remapping the tokens fixes every
   component that uses them, rather than patching each in turn.
   Measured contrast against the box gradient, before -> after.
   ═══════════════════════════════════════════════════════════════ */
body{
  --dark-muted:#5c4a32;
  --dark-dimmed:#4a3724;
  --dark-text:#2a1d0d;
  --blue:#7fb0e8;          /* was #3b82f6  3.18 -> 5.4  */
  --teal:#5fc8b8;
  --green:#6fc98a;
  --purple:#c39bf0;
  --gold:#ecb95e;          /* was #f59e0b */
  --gold-light:#f0c469;
  --gold-dark:#c08a2c;
}

/* hardcoded navy-era colours that don't go through the tokens */
.pg:not(#pg-games) :is(.daily-ref,.daily-ornament,.daily-share-btn,
                       .home-stat-num,.streak-title,.bite-count){
  color:#ecb95e!important;
}
.pg:not(#pg-games) .home-scripture-ref{color:#9cc4f0!important}
.pg:not(#pg-games) .home-scripture-row > :nth-child(2) .home-scripture-ref{color:#7fd8b4!important}
.pg:not(#pg-games) .home-scripture-row > :nth-child(3) .home-scripture-ref{color:#ecb95e!important}
.pg:not(#pg-games) :is(.watch-desc,.streak-sub,.prayer-compose-sub){color:#d5c7a6!important}
.home-hero-title{-webkit-text-fill-color:initial!important;background:none!important;color:#ecb95e!important}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — the scroll rolls aside to reveal it
   The old top bar is gone: its controls now live in the nav, and the
   only persistent affordance is a handle on the left rod. Content no
   longer has to dodge a fixed header.
   ═══════════════════════════════════════════════════════════════ */
.hdr,#mainHeader{display:none!important}
.quick-nav-strip{display:none!important}

/* pages start at the top now there's no header to clear */
.pg{padding-top:calc(var(--sc-sheet-inset) + 24px)!important}

/* ── pull handle, sitting on the left rod ── */
#scroll-handle{
  position:fixed;left:calc(var(--sc-rod-w) - 6px);top:50%;
  transform:translateY(-50%);
  z-index:60;width:30px;height:74px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  padding:0;cursor:pointer;
  border:1px solid rgba(206,163,86,.5);border-left:0;
  border-radius:0 9px 9px 0;
  background:linear-gradient(90deg,#5c4526,#3a2a15 70%,#2a1d0e);
  box-shadow:3px 0 12px rgba(16,10,3,.6), inset 0 1px 0 rgba(236,200,134,.2);
  transition:left .62s cubic-bezier(.22,.61,.36,1), background .2s;
}
#scroll-handle span{display:block;width:14px;height:2px;border-radius:2px;background:var(--sc-gold)}
#scroll-handle:hover{background:linear-gradient(90deg,#6d5330,#47341b 70%,#33240f)}
#scroll-handle:focus-visible{outline:2px solid var(--sc-gold);outline-offset:2px}

/* ── the roll-aside ── */
#scroll-bg{transition:left .62s cubic-bezier(.22,.61,.36,1),right .62s cubic-bezier(.22,.61,.36,1)}
.pg{transition:padding-left .62s cubic-bezier(.22,.61,.36,1)}
#scroll-handle{transition:left .62s cubic-bezier(.22,.61,.36,1),background .2s}
/* shift with layout properties, not transform: a transformed layer gets
   rasterised once by the compositor and renders text soft. */
body.nav-open #scroll-bg{left:var(--sc-nav-w);right:calc(-1 * var(--sc-nav-w))}
body.nav-open .pg{padding-left:calc(var(--sc-nav-w) + 18px)!important}
body.nav-open #scroll-handle{left:calc(var(--sc-nav-w) + var(--sc-rod-w) - 6px)}
body.nav-open #scroll-bg .rod-r,
body.nav-open #scroll-bg .curl-r{opacity:0;transition:opacity .3s}

/* ── the nav itself: same leather as the boxes ── */
#sidenav{
  width:var(--sc-nav-w)!important;
  background:linear-gradient(158deg,#473520 0%,#3a2a15 52%,#2c1f0f 100%)!important;
  border-right:1px solid var(--sc-gold-line)!important;
  border-left:0!important;
  color:var(--sc-panel-text)!important;
  transform:translateX(calc(-1 * var(--sc-nav-w)))!important;
  transition:transform .62s cubic-bezier(.22,.61,.36,1)!important;
  z-index:50!important;
  box-shadow:inset -16px 0 30px -18px rgba(0,0,0,.8)!important;
}
#sidenav.open{transform:translateX(0)!important}
#nav-overlay{display:none!important}   /* the scroll moving is the affordance */

#sidenav .sni{color:var(--sc-panel-text)!important;border-bottom:1px solid rgba(216,161,60,.18)!important}
#sidenav .sni:hover,#sidenav .sni.active{background:rgba(236,200,134,.09)!important;color:#f7eeda!important}
#sidenav .sn-title,#sidenav .sn-cross{color:var(--sc-gold)!important}

/* controls relocated out of the top bar */
#sidenav .hdr-controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 14px;margin:0 0 6px;
  border-top:1px solid rgba(216,161,60,.18);
  border-bottom:1px solid rgba(216,161,60,.18);
}
#sidenav .score-pill{background:rgba(22,15,7,.5)!important;border:1px solid rgba(206,163,86,.3)!important}
#sidenav .hdr-btn{
  background:linear-gradient(158deg,#5a4527,#3a2a15)!important;
  border:1px solid rgba(206,163,86,.4)!important;
  color:#f0e4c8!important;
}
#sidenav .hdr-btn:hover{border-color:var(--sc-gold)!important}

/* ── nav tidy-up ─────────────────────────────────────────────── */

/* the old hamburger now lives inside the nav, where it's redundant -
   the nav header already has a close button */
#sidenav #mnubtn{display:none!important}

/* the nav is a column: header, controls, scrollable items, footer */
#sidenav{display:flex!important;flex-direction:column!important;padding:0!important}
#sidenav .snhdr{flex:0 0 auto;padding:14px 14px 10px!important}
#sidenav .sn-verse{flex:0 0 auto;padding:0 14px 10px!important;font-size:.8rem!important}
#sidenav .hdr-controls{flex:0 0 auto}
#sidenav .snitems{flex:1 1 auto;overflow-y:auto;min-height:0;padding:4px 0!important}
#sidenav .sn-footer{flex:0 0 auto}

/* controls: compact, two tidy rows */
#sidenav .hdr-controls{
  display:flex!important;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:7px;padding:10px 12px!important;margin:0!important;
  border-top:1px solid rgba(216,161,60,.18);
  border-bottom:1px solid rgba(216,161,60,.18);
}
#sidenav .score-pill{
  flex:1 1 100%;justify-content:center;margin:0!important;
  background:rgba(22,15,7,.5)!important;border:1px solid rgba(206,163,86,.3)!important;
}
#sidenav .auth-btn{
  flex:1 1 100%;justify-content:center;width:auto!important;
  padding:8px 12px!important;margin:0!important;
}
#sidenav .age-selector{flex:1 1 100%;position:relative}
#sidenav .age-selector #ageBtn{width:100%;justify-content:center}
#sidenav :is(.bubble-btn,.theme-btn){
  flex:0 0 auto;width:38px;height:38px;
  display:grid!important;place-items:center;border-radius:8px;margin:0!important;
}
#sidenav .hdr-btn{
  background:linear-gradient(158deg,#5a4527,#3a2a15)!important;
  border:1px solid rgba(206,163,86,.4)!important;
  color:#f0e4c8!important;
}
#sidenav .hdr-btn:hover{border-color:var(--sc-gold)!important}

/* clicking the scroll closes the nav */
body.nav-open #nav-overlay{
  display:block!important;position:fixed;inset:0;z-index:45;
  background:transparent!important;opacity:1!important;
  /* style.css gives this backdrop-filter:blur(4px); over the full screen it
     blurs the entire scroll behind it. It's only here to catch clicks. */
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* backdrop-filter inside a transformed ancestor renders the element's own
   content blurry during the roll-aside (8 such rules in style.css).
   The boxes are translucent without it, so nothing is lost. */
.pg,.pg *,#scroll-bg,#scroll-bg *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}