/* Fun Bible colour looks — each look owns colour AND type */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,500&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,500&family=Karla:wght@400;600&family=Lora:ital,wght@0,500;0,700;1,400&family=Nunito:wght@400;700&family=Playfair+Display:ital,wght@0,600;0,700;1,500&family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

html, html[data-palette="parchment"]{
  --page-bg:#cbb892;
  --box-bg:#ead9b6;
  --box-ink:#1a1208;
  --box-muted:#3d2a16;
  --box-line:rgba(80,55,20,.4);
  --ill-ink:#1a1208;
  --ill-ink2:#3d2a16;
  --ill-cream:#ead9b6;
  --box-accent:#7a4e10;
  --font-display:'Cinzel Decorative',Georgia,serif;
  --font-title:'Cinzel',Georgia,serif;
  --font-body:'Crimson Pro',Georgia,serif;
  --font-ui:'Space Grotesk',system-ui,sans-serif;
}
html[data-palette="dusk"]{
  --page-bg:#b7c0ce;
  --box-bg:#d5dce6;
  --box-ink:#141820;
  --box-muted:#2a3340;
  --box-line:rgba(40,50,70,.35);
  --ill-ink:#141820;
  --ill-ink2:#2a3340;
  --ill-cream:#d5dce6;
  --box-accent:#1f3a5f;
  --font-display:'Fraunces',Georgia,serif;
  --font-title:'Fraunces',Georgia,serif;
  --font-body:'Source Sans 3',system-ui,sans-serif;
  --font-ui:'Source Sans 3',system-ui,sans-serif;
}
html[data-palette="olive"]{
  --page-bg:#a8ab88;
  --box-bg:#d8d4b8;
  --box-ink:#161a10;
  --box-muted:#2c3320;
  --box-line:rgba(50,60,30,.4);
  --ill-ink:#161a10;
  --ill-ink2:#2c3320;
  --ill-cream:#d8d4b8;
  --box-accent:#3f5320;
  --font-display:'Lora',Georgia,serif;
  --font-title:'Lora',Georgia,serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --font-ui:'Nunito',system-ui,sans-serif;
}
html[data-palette="ink"]{
  --page-bg:#b6aa96;
  --box-bg:#e4d8c4;
  --box-ink:#120e0a;
  --box-muted:#2a2218;
  --box-line:rgba(50,40,25,.4);
  --ill-ink:#120e0a;
  --ill-ink2:#2a2218;
  --ill-cream:#e4d8c4;
  --box-accent:#5c3a16;
  --font-display:'Playfair Display',Georgia,serif;
  --font-title:'Playfair Display',Georgia,serif;
  --font-body:'Source Serif 4',Georgia,serif;
  --font-ui:'Source Serif 4',Georgia,serif;
}
html[data-palette="vineyard"]{
  --page-bg:#c4a8b0;
  --box-bg:#ead4d8;
  --box-ink:#1a1014;
  --box-muted:#3a242c;
  --box-line:rgba(80,40,50,.35);
  --ill-ink:#1a1014;
  --ill-ink2:#3a242c;
  --ill-cream:#ead4d8;
  --box-accent:#7a1f3d;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-title:'Cormorant Garamond',Georgia,serif;
  --font-body:'Karla',system-ui,sans-serif;
  --font-ui:'Karla',system-ui,sans-serif;
}

html[data-palette] body{
  background:var(--page-bg) !important;
  color:var(--box-ink) !important;
  font-family:var(--font-ui) !important;
}
html[data-palette] .card,
html[data-palette] .illum-copy,
html[data-palette] .illum-plate,
html[data-palette] .illum-journey,
html[data-palette] .home-section-card,
html[data-palette] .overlay-box,
html[data-palette] #land-toc,
html[data-palette] #land-dock,
html[data-palette] .lb-page,
html[data-palette] .lb-bar,
html[data-palette] textarea,
html[data-palette] input,
html[data-palette] select{
  font-family:var(--font-body) !important;
  color:var(--box-ink) !important;
}
html[data-palette] h1,
html[data-palette] h2,
html[data-palette] h3,
html[data-palette] .illum-copy h1,
html[data-palette] .illum-plate h3,
html[data-palette] .illum-journey h2,
html[data-palette] .hsc-name,
html[data-palette] .pg-title,
html[data-palette] .ov-title,
html[data-palette] .lb-ref{
  font-family:var(--font-title) !important;
  color:var(--box-ink) !important;
  -webkit-text-fill-color:var(--box-ink) !important;
}
/* nav stays gold-on-dark in every look */
#sidenav, #sidenav .sni, #sidenav .sni span, #sidenav button, #sidenav .sn-title{
  color:#f3e6cc !important;
  -webkit-text-fill-color:#f3e6cc !important;
}
.hdr .logo-fun, .hdr .logo-bible, .hdr .logo-time{
  color:#f5c542 !important;
  -webkit-text-fill-color:#f5c542 !important;
}

.card,.story-card,.sc,.saved-card,.quote-card,.comfort-card,.bite-card,
.nav-card,.game-card,.about-card,.daily-card,.streak-card,.prayer-hero-card,
.prayer-compose-card,.watch-card,.home-stat,.home-section-card,.home-scripture-card,
.overlay-box,.journey-modal-box,.tip-card,.study-card,.spc2,.siv-card,
.v-row,.bookmark-item,.bkb,.chb,.illum-plate,.illum-copy,
#land-toc,#land-dock,#land-bible .lb-bar,#land-bible .lb-page,
#fbo-notepad .pad-sheet,
.journey-hero,.journey-card,.journey-card--done,.journey-notes-area{
  background:var(--box-bg) !important;
  color:var(--box-ink) !important;
  border-color:var(--box-line) !important;
}
.card h1,.card h2,.card h3,.hsc-name,.pg-title,.ov-title,
.illum-copy h1,.illum-plate h3,.lb-ref,.lb-brand,.toc-head{
  color:var(--box-ink) !important;
  -webkit-text-fill-color:var(--box-ink) !important;
}
.hsc-desc,.card p,.v-txt,.illum-verse,.illum-plate p{
  color:var(--box-muted) !important;
}

/* ── Look picker ─────────────────────────────────────────────────────── */
#look-picks{
  display:inline-flex;
  align-items:center;
  align-self:center;          /* never stretch to header height */
  flex:0 0 auto;
  gap:5px;
  margin-left:8px;
  padding:4px 6px;
  line-height:0;              /* kills inline-block baseline slack */
  border:1px solid rgba(245,197,66,.28);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  box-sizing:border-box;
}
#look-picks .look-sw{
  /* locked geometry — immune to flex stretch in any header layout */
  flex:0 0 auto;
  align-self:center;
  box-sizing:border-box;
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  aspect-ratio:1 / 1;
  padding:0;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(26,18,8,.5);
  border-radius:50%;
  cursor:pointer;
  position:relative;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
#look-picks .look-sw:hover{
  transform:scale(1.12);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 2px 5px rgba(0,0,0,.4);
}
#look-picks .look-sw:focus-visible{
  outline:2px solid #f5c542;
  outline-offset:2px;
}
/* selected: gold ring drawn with shadow so layout never shifts */
#look-picks .look-sw.on{
  transform:scale(1.14);
  border-color:rgba(26,18,8,.65);
  box-shadow:
    0 0 0 2px #f5c542,
    0 0 0 3px rgba(26,18,8,.45),
    inset 0 1px 1px rgba(255,255,255,.5);
}
#look-picks .look-sw.on:hover{ transform:scale(1.14); }

/* each swatch previews BOTH the page tone (rim) and the box tone (centre) */
#look-picks .look-sw.sw-parchment{
  background:radial-gradient(circle at 50% 42%, #ead9b6 0 54%, #cbb892 55% 100%);
}
#look-picks .look-sw.sw-dusk{
  background:radial-gradient(circle at 50% 42%, #d5dce6 0 54%, #8a9ab0 55% 100%);
}
#look-picks .look-sw.sw-olive{
  background:radial-gradient(circle at 50% 42%, #d8d4b8 0 54%, #9aa070 55% 100%);
}
#look-picks .look-sw.sw-ink{
  background:radial-gradient(circle at 50% 42%, #e4d8c4 0 54%, #6a5c48 55% 100%);
}
#look-picks .look-sw.sw-vineyard{
  background:radial-gradient(circle at 50% 42%, #ead4d8 0 54%, #a06070 55% 100%);
}

@media (prefers-reduced-motion:reduce){
  #look-picks .look-sw,
  #look-picks .look-sw:hover,
  #look-picks .look-sw.on{ transition:none; transform:none; }
}
/* tight headers: shrink the control, drop the well */
@media (max-width:480px){
  #look-picks{
    gap:4px; margin-left:4px; padding:0;
    border-color:transparent; background:none; box-shadow:none;
  }
  #look-picks .look-sw{
    width:17px; height:17px; min-width:17px; min-height:17px;
  }
}
#palette-row{ display:none !important; }
.hdr-inner #tbtn{ margin-left:auto; }

/* companion */
#fbo-sheep{
  position:fixed; z-index:80; transform:translate(-50%,-50%);
  background:none; border:0; cursor:grab; touch-action:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
#fbo-sheep:active{ cursor:grabbing; }
#fbo-sheep[hidden]{ display:none !important; }
#fbo-sheep .sheep-face{ font-size:38px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); line-height:1; }
#fbo-sheep .sheep-hint{
  font:700 9px/1 "Cinzel",Georgia,serif; letter-spacing:.16em; text-transform:uppercase;
  color:#1a1208; background:#f5c542; padding:3px 7px; border-radius:99px;
}
#fbo-notepad{
  position:fixed; z-index:81; width:270px; display:none; pointer-events:auto;
}
#fbo-notepad.open{ display:block; }
#fbo-notepad .pad-string{
  position:absolute; top:-22px; left:28px; width:2px; height:22px; background:#c9a227;
}
#fbo-notepad .pad-sheet{
  background:var(--box-bg); color:var(--box-ink);
  border:1px solid var(--box-line);
  box-shadow:4px 10px 24px rgba(0,0,0,.28);
  transform:rotate(-1.2deg);
  padding:10px 12px 8px;
}
#fbo-notepad header{
  display:flex; justify-content:space-between; align-items:center;
  font-family:"Cinzel",Georgia,serif; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:6px;
}
.pad-tools{ display:flex; gap:4px; }
.pad-tools button, .pad-ghost, .pad-save, .pad-del{
  appearance:none; cursor:pointer; border:1px solid var(--box-line);
  background:transparent; color:inherit; border-radius:8px; padding:4px 8px; font-size:11px;
}
.pad-save{ background:#f5c542; color:#1a1208; font-weight:700; border:0; }
#pad-text{
  width:100%; min-height:90px; border:0; resize:vertical;
  background:transparent; color:inherit;
  font-family:"Crimson Pro",Georgia,serif; font-size:15px; line-height:1.45; outline:none;
}
.pad-actions{ display:flex; gap:6px; margin:6px 0; }
.pad-avatars{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.pad-avatars button{ font-size:18px; background:none; border:1px solid transparent; border-radius:8px; cursor:pointer; padding:2px 4px; }
.pad-avatars button.on{ border-color:#f5c542; }
.pad-saved-head{
  font:700 10px/1 "Cinzel",Georgia,serif; letter-spacing:.12em; text-transform:uppercase;
  opacity:.7; margin:8px 0 4px;
}
.pad-saved{ max-height:120px; overflow:auto; }
.pad-item{ display:flex; gap:4px; align-items:flex-start; margin-bottom:4px; }
.pad-load{
  flex:1; text-align:left; background:rgba(0,0,0,.06); border:0; cursor:pointer;
  color:inherit; font:400 12px/1.3 "Crimson Pro",Georgia,serif; padding:6px 8px; border-radius:8px;
}
.pad-load small{ display:block; opacity:.55; font-size:10px; margin-top:2px; }
.pad-empty{ font-size:12px; opacity:.6; margin:0; }
.pad-foot{ margin:6px 0 0; font-size:10px; opacity:.65; }

/* ── Journey: text follows the look (was navy-card + dark ink) ───────── */
.journey-card-title,.journey-modal-title,.journey-teaching-heading,
.journey-hero-title,.journey-step-title{
  color:var(--box-ink) !important;
  -webkit-text-fill-color:var(--box-ink) !important;
}
.journey-card-intro,.journey-hero-desc,.journey-hero-sub,
.journey-step-text,.journey-verse-text,.journey-step-note,
.journey-complete-msg,.journey-notes-area{
  color:var(--box-muted) !important;
}
.journey-card-num{
  color:var(--box-muted) !important;
  opacity:.8 !important;   /* was .5 — unreadable once the card went cream */
}
.journey-card-theme,.journey-card-cta,.journey-hero-verse,.journey-theme-pill{
  color:var(--box-accent) !important;
  -webkit-text-fill-color:var(--box-accent) !important;
}
.journey-card,.journey-hero,.journey-notes-area{
  border-color:var(--box-line) !important;
}

/* Game cards sit on a near-black scrim (.gmeta), not a cream card —
   their text must stay light in every look. Guards against .gti/.gsb
   being swept back into the forced-ink lists. */
.gcard .gti,.gmeta .gti{
  color:#fff4dc !important;
  -webkit-text-fill-color:#fff4dc !important;
}
.gcard .gsb,.gmeta .gsb{ color:#e4d8be !important; }