/* TheSinging.Bible — public site styles, v38 (second client-redesign pass).
   Layout philosophy: the page is a flex column sized to the visible viewport
   (100dvh) — brand, player, picks, actions, then a full-width white-on-black
   verse band pinned to the bottom. Vertical space flexes via clamp()/auto
   margins so the app fills the screen exactly at any height; if a viewport is
   shorter than the content minimum, the page scrolls normally.
   Background matched to the logo's white (#FEFEFE) so the logo appears
   transparent against the page.
   NOTE: the admin page (rendered by _worker.js) and admin/login.html also link
   this stylesheet for its :root tokens and base rules — keep token names and
   generic element rules stable. */

:root {
  /* Background tuned to match the logo image's near-white background. */
  --bg: #FEFEFE;
  --bg-elevated: #FFFFFF;

  /* Ink scale — keep generous contrast against the off-white background. */
  --ink: #1A1A1A;
  --ink-soft: #404040;
  --ink-muted: #707070;
  --ink-faint: #A0A0A0;

  /* Lines and surfaces. */
  --line: #E5E5E5;
  --line-strong: #C8C8C8;
  --disabled-bg: #F4F4F4;

  /* Gold accent borrowed from the logo's wordmark. Used sparingly. */
  --gold: #B8860B;
  --gold-soft: #D4A82E;

  /* Brand teal (v37). RGB 0,135,125 per Ron's spec — used for the Play button,
     the featured verse, the active loop toggle, and form accents. (The logo SVG
     carries its own near-identical teal, #01847d — normalized to #00877D in
     logo-tm.svg + icon.svg per Ron 2026-08-18: the teal is RGB 0,135,125,
     ALWAYS. Original designer logo.svg left untouched as archival source.) */
  --teal: #00877D;
  --maroon: #8B1E3F; /* v39.77: New! badges */
  --teal-dark: #006F66;
  --teal-soft: rgba(0, 135, 125, 0.12);

  --dark: #0F0F0F;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --dur-fast: 140ms;
  --dur-med: 240ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* Defensive rule: ensure the `hidden` HTML attribute always wins, even when
   an element has an explicit `display:` rule. Without this, `.gate { display:
   flex }` and `.pick__menu--grid { display: grid }` override the browser's
   default `[hidden] { display: none }` (equal specificity, CSS later in the
   cascade wins), so setting element.hidden = true has no visual effect.
   Bug shipped in v35; fixed in v35.1. Pattern borrowed from common resets. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }

/* Boot loader — soft pulse until the manifest loads. */
.boot {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 400ms var(--ease);
}
.boot.is-hidden { opacity: 0; pointer-events: none; }
.boot__pulse {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(0.8); opacity: 0.3; } 50% { transform: scale(1.0); opacity: 0.7; } }

/* ----- Password gate ----------------------------------------------------- */
/* Full-screen overlay shown until the user enters the correct password.
   The unlock state lives in localStorage (sb.gate.unlocked) with a 7-day TTL. */
.gate {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 300ms var(--ease) both;
}
.gate__card {
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.gate__logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 24px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.gate__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gate__input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gate__input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15); }
.gate__submit {
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gate__submit:hover { background: var(--dark); border-color: var(--dark); }
.gate__error {
  margin-top: 12px;
  min-height: 20px;
  font-size: 13px;
  color: #b34242;
}

/* ----- Page layout ------------------------------------------------------- */
/* v38: full-viewport flex column. Sections constrain their own width; the page
   itself is full-bleed so the verse band can span edge to edge. `min-height`
   (not `height`) keeps short viewports scrollable instead of crushed. */
.page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  /* v39.68 (APP Bit C): the store-app shell renders edge to edge (viewport-fit=cover, injected by
     sync-www.sh) so the verse band's black fills the home-indicator strip; this keeps the logo out
     from under the clock. On the web the inset is 0 - no change. */
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  flex-direction: column;
  animation: fadeIn 400ms var(--ease) both;
}

/* Brand: logo at top. v38: a tad smaller than v37 (360px -> 300px mobile,
   480px -> 400px desktop) so it doesn't dominate the top area. */
.brand {
  display: flex;
  justify-content: center;
  padding: clamp(8px, 1.8vh, 18px) 18px clamp(2px, 0.8vh, 8px);
}
.brand__logo {
  width: 100%;
  max-width: min(300px, 72vw);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 720px) {
  .brand { padding-top: clamp(12px, 2.2vh, 24px); }
  .brand__logo { max-width: 400px; }
}
/* v39.110: the logo sits inside the page's <h1> (search engines read its words). The heading adds nothing
   visible: no margin, no font, and it spans the header so the logo sizes and centres exactly as before. */
.brand__h1 { margin: 0; width: 100%; display: flex; justify-content: center; font-size: inherit; font-weight: inherit; line-height: 0; }

/* v39.110 (SEO): the site described in words, just below the app screen, on the black that the verse band already
   paints below itself. Small and quiet; web only (app.js reveals it). */
/* position + z-index: the page column (an animated layer) paints after plain blocks, so without them the verse band's
   long black shadow covers this footer (preview 10/4: black space, no words). */
.site-foot { position: relative; z-index: 1; background: var(--dark); color: rgba(255, 255, 255, 0.72); text-align: center; font-size: 13px; line-height: 1.6;
  padding: 18px clamp(16px, 4vw, 28px) calc(28px + env(safe-area-inset-bottom, 0px)); }
/* v39.115 hotfix (Ron's iPhone, 2026-10-06): every overlay — the menu/picker sheet, the full-screen Bible text, the
   toast, the share card — lives inside the page column, which is a layer of its own (its fade-in); the footer, raised
   above that layer for the verse band's shadow, painted OVER them whenever it was in view (small phones, scrolled
   down: the Chapter picker hidden under it). While anything floats over the page, the footer steps aside.
   body.pick-open (the Book/Chapter/Style/Voice/Language pickers) and the inline overflow rule (the sheet's scroll
   lock) work in every browser; the :has() rules add the Bible-text, toast and share-card cases where supported. */
body.pick-open .site-foot,
body:has(#sheet:not([hidden])) .site-foot,
body:has(.textpanel.is-expanded) .site-foot,
body:has(#toast.is-visible) .site-foot,
body:has(#shareNudge:not([hidden])) .site-foot,
body[style*="overflow: hidden"] .site-foot { visibility: hidden; }
.site-foot__text { max-width: 640px; margin: 0 auto 10px; }
.site-foot__links { max-width: 640px; margin: 0 auto; }
.site-foot__links a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.site-foot__links a:hover { color: #fff; opacity: 0.85; }

/* v39.112 (Ron 2026-10-05: "stick with the same design"): a chapter page's own section, just below the app screen,
   made of the site's existing pieces: the Plans page's headline, rows and teal buttons, and the "View Bible Text"
   card for the words. position + z-index + background, like the footer, so the verse band's black shadow stays under. */
.chapterpage { position: relative; z-index: 1; background: var(--bg); color: var(--ink); padding: 36px 0 8px; }
.chapterpage__inner { width: 100%; max-width: 516px; margin: 0 auto; padding: 0 18px; }
.chapterpage__title { font-size: 26px; font-weight: 700; line-height: 1.25; text-align: center; margin: 0 0 14px; color: var(--ink); }
.chapterpage__intro { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.chapterpage__h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 28px 0 6px; }
.chapterpage__group { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); margin: 22px 0 4px; }
.chapterpage__versions .plans__row { padding: 9px 0; }
.chapterpage__voices { display: flex; gap: 8px; flex-shrink: 0; }
.chapterpage__play { display: inline-block; text-decoration: none; }
.chapterpage__text { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px;
  font-size: 15.5px; line-height: 1.55; color: var(--ink); text-align: left; }
.pageview__nav.chapterpage__nav { justify-content: space-between; margin-top: 26px; } /* before ‹ left, after › right */

/* v39.121 (Ron 2026-10-21, sketch v4): a style page's header (/country): the style's own logo, large, where
   TheSinging.Bible's logo sits on every other page; under it, like a signature, "by" + TheSinging.Bible on one line,
   right-aligned on the right end of the logo's rules (the logo file keeps 2 of its 396 units clear at each side, so
   0.505% of the logo's width = the end of the rules). "by" is drawn as shapes (_worker.js STYLE_BYLINE, 100 units =
   the sketch's font size), so its height here IS the sketch's font size. Short screens shrink it as today's logo does.
   Classes used only by style pages: every other page is unchanged. */
.brand--style { flex-direction: column; align-items: center; }
.brand__lockup { width: min(330px, 84vw); display: flex; flex-direction: column; }
.brand--style .brand__logo--style { width: 100%; max-width: none; }
.brand__parent { align-self: flex-end; margin: 12px 0.505% 0 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1; }
.brand__by { display: block; height: 19px; width: auto; aspect-ratio: 89.4 / 100; overflow: visible; color: var(--style-ink, var(--ink)); }
.brand__parentlogo { display: block; height: 22px; width: auto; }
@media (min-width: 720px) { .brand__lockup { width: 400px; } .brand__parent { margin-top: 9px; gap: 7px; } .brand__by { height: 22px; } .brand__parentlogo { height: 26px; } }
@media (max-width: 374px) { .brand__lockup { width: 272px; } .brand__by { height: 17px; } .brand__parentlogo { height: 20px; } }
@media (max-height: 700px) { .brand__lockup { width: min(240px, 64vw); } .brand__parent { margin-top: 7px; } .brand__by { height: 16px; } .brand__parentlogo { height: 18px; } }
@media (max-height: 620px) { .brand__lockup { width: min(170px, 53vw); } .brand__parent { margin-top: 5px; gap: 5px; } .brand__by { height: 14.5px; } .brand__parentlogo { height: 16px; } }
/* The style page's own section: the chapter pages' pieces, plus a subtitle under a row's name, listener quotes,
   chips for the books and the other styles, and the short-address line. */
.stylepage__sub { display: block; font-size: 13px; font-weight: 400; color: var(--ink-muted); margin-top: 2px; }
.stylepage__quote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--teal); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); font-style: italic; }
.stylepage__who { display: block; margin-top: 4px; font-size: 13px; font-style: normal; color: var(--ink-muted); }
.stylepage__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.stylepage__chip { font-size: 13.5px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--bg-elevated); }
.stylepage__chip:hover { border-color: var(--teal); color: var(--teal); }
.stylepage__door { margin: 26px 0 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--teal-soft); color: var(--ink); font-size: 15px; text-align: center; }
/* v39.121: like the footer (v39.115 hotfix), a page's own section (chapter pages since v39.112, style pages) steps aside
   while anything floats over the page: it is raised above the page column (position + z-index, for the verse band's
   shadow), so wherever it was in view it painted OVER the picker sheets and the Menu (UI sweep, 2026-10-21: the
   Country page on every phone size, scrolled down; the live chapter pages the same since 10/5 - Ron: include the fix).
   .chapterpage covers both (a style section is "chapterpage stylepage"). Two rules: a browser without :has() drops a
   whole rule that names it, and the pickers and the Menu must work everywhere. */
body.pick-open .chapterpage,
body[style*="overflow: hidden"] .chapterpage { visibility: hidden; }
body:has(#sheet:not([hidden])) .chapterpage,
body:has(.textpanel.is-expanded) .chapterpage,
body:has(#toast.is-visible) .chapterpage,
body:has(#shareNudge:not([hidden])) .chapterpage { visibility: hidden; }

/* ----- Inline player ----------------------------------------------------- */
/* v38: the player moved ABOVE the dropdown stack (mockup order: title,
   controls, scrubber right under the logo). */
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 12px);
  width: 100%;
  margin-top: clamp(2px, 1vh, 12px);
  padding: 4px 18px 0;
}
/* Now-playing track info, displayed above the controls. Single line: book +
   chapter. v36: subtitle line removed; title moved from Cormorant Garamond
   to Inter (body sans) at bold weight. */
.player__track {
  text-align: center;
  width: 100%;
  max-width: 520px;
  padding: 0 8px;
  /* v39.69: title + (app-only) download button side by side. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* ----- v39.69 Premium/offline: download button (store app only) + Downloads panel ----- */
.player__dl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--ink-muted); cursor: pointer;
}
.player__dl[hidden] { display: none; }
/* v39.78 favorites: heart on the player, ★ rows + group in the Style menu, list rows. */
.player__fav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: none; background: transparent; border-radius: var(--radius-sm); color: var(--ink-muted); cursor: pointer; }
.player__fav:hover { color: var(--teal); }
.player__fav--on { color: var(--teal); } /* v39.79 (Ron): teal = favorites, maroon = new */
.player__fav--on svg { fill: currentColor; }
.pick__row { display: flex; align-items: stretch; }
.pick__row .pick__option { flex: 1; min-width: 0; }
.pick__row[hidden] { display: none; }
.pick__star { border: none; background: transparent; padding: 0 14px; font-size: 20px; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.pick__star:hover, .pick__star--on { color: var(--teal); }
.pick__group { padding: 10px 16px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.pick__group[hidden], .pick__divider[hidden] { display: none; }
.pick__divider { height: 1px; margin: 6px 12px; background: var(--line, #e6e6e6); }
.favs__remove { border: none; background: transparent; color: var(--ink-faint); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; }
.favs__remove:hover { color: var(--teal); }
.favs__note { margin-top: 14px; }
.player__dl svg { display: none; }
.player__dl[data-state="none"] .player__dl-icon--down { display: block; }
.player__dl[data-state="saved"] { color: var(--teal); }
.player__dl[data-state="saved"] .player__dl-icon--check { display: block; }
.player__dl-pct { display: none; font-size: 11px; font-weight: 700; color: var(--teal); }
.player__dl[data-state="saving"] .player__dl-pct { display: inline; }
.player__dl:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dl-intro { margin: 0 0 12px; color: var(--ink-muted); font-size: 14px; }
.dl-action {
  display: block; width: 100%; margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-elevated);
  color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.dl-action--danger { color: #b34242; }
.dl-action:disabled { opacity: 0.6; cursor: default; }
.dl-progress { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.dl-list { margin: 8px 0 0; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dl-row__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.dl-row__meta { font-size: 12.5px; color: var(--ink-muted); }
.dl-row__remove { border: none; background: transparent; color: #b34242; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 4px; }
.dl-total { margin: 12px 0 0; font-size: 13px; color: var(--ink-muted); }
/* Chapter grid: saved-for-offline dot (store app only). */
.chapter--saved { position: relative; }
.chapter--saved::after { content: ''; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.player__track-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1.25;
}
@media (min-width: 720px) {
  .player__track-title { font-size: 22px; }
}
.player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.player__btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
.player__btn:disabled { color: var(--ink-faint); cursor: default; }
.player__btn--primary {
  background: var(--teal);
  color: #fff;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0 4px;
}
.player__btn--primary:hover:not(:disabled) { background: var(--teal-dark); transform: scale(1.04); }
.player__btn--primary:disabled { background: var(--disabled-bg); color: var(--ink-faint); }
.player__btn--secondary { width: 38px; height: 38px; padding: 0; }
.player__btn--secondary svg { display: block; }

/* Play/pause icon swap, v35.2: class-based instead of hidden-attribute-based.
   Default state (not playing): play icon visible, pause icon hidden.
   Playing state (button has .is-playing): play hidden, pause visible.
   Reason for the change: the v35 `el.iconPlay.hidden = true` approach relied
   on `[hidden] { display: none }` winning the cascade — which it does now,
   thanks to the v35.1 !important rule, but the click handler had a separate
   reliability issue (the swap happened on the 'play' audio event, which only
   fires if the audio successfully starts; if the audio request failed, the
   user saw a stuck play icon even though they clicked). Class-based makes
   the visual state independent of the audio element's events. */
.player__icon-pause { display: none; }
.player__btn--primary.is-playing .player__icon-play { display: none; }
.player__btn--primary.is-playing .player__icon-pause { display: block; }

/* Progress bar with elapsed/total. Inline below the buttons. */
.player__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  padding: 0 4px;
}
.player__time {
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
}
.player__seek {
  position: relative;
  flex: 1;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  /* v38: stop touch scrubs from being reinterpreted as page scrolls (which
     fired pointercancel and stranded the drag listeners — see app.js). */
  touch-action: none;
}
.player__seek::before {
  content: '';
  position: absolute;
  inset: 9px 0;
  background: var(--line);
  border-radius: 999px;
}
.player__seek-fill {
  position: absolute;
  left: 0;
  top: 9px;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
  width: 0%;
  pointer-events: none;
}
.player__seek-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: 0%;
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease);
}
.player__seek:hover .player__seek-thumb { transform: translate(-50%, -50%) scale(1.2); }

/* ----- Dropdown stack ("picks") ----------------------------------------- */
/* v36: single column on all viewports. Container constrained to ~480px and
   centered so the dropdowns line up visually with the logo (max-width 480px
   on desktop). The page wrapper stays wider so brand and player are
   unaffected. The v35 two-column desktop layout is gone. */
.picks {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.4vh, 12px);
  width: 100%;
  max-width: 516px; /* 480px column + its own 18px side padding */
  padding: clamp(10px, 2.4vh, 26px) 18px 0;
  /* v38: `auto` shares the viewport's leftover height with the auto margin on
     .actions — the picks cluster floats between player and action row, which
     is the mockup's rhythm. On short screens both autos collapse to 0 and the
     clamp() paddings keep the minimum breathing room. */
  margin: auto auto 0;
}

/* Individual dropdown. */
.pick { position: relative; }
.pick__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pick__trigger:hover { border-color: var(--line-strong); }
.pick__trigger:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15); }
.pick__trigger[aria-expanded="true"] {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.pick__label {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.pick__label::after { content: ':'; }
/* v39.74: "New!" badges (teal, italic) — style row, style menu, language menu */
.newstyle-line { display: block; width: 100%; max-width: 520px; margin: 0 auto 6px; padding: 4px 10px; border: none; background: transparent; color: var(--maroon, #8B1E3F); font-family: inherit; font-style: italic; font-weight: 600; font-size: 15px; text-align: center; cursor: pointer; letter-spacing: 0.01em; } /* v39.83 */
.newstyle-line:hover { text-decoration: underline; }
.newstyle-line[hidden] { display: none; }
.inapp-note { display: block; width: 100%; max-width: 520px; margin: 0 auto 8px; padding: 7px 12px; border: 1px solid var(--teal); border-radius: 10px; background: transparent; color: var(--teal-dark); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; cursor: pointer; } /* v39.88 */
.inapp-note:hover { background: rgba(0, 135, 125, 0.06); }
.inapp-note[hidden] { display: none; }
/* v39.91: the store apps — one quiet teal line above the Book menu; badge rows in the sheet / About / page footers */
.app-line { display: block; width: 100%; max-width: 520px; margin: 0 auto 6px; padding: 4px 10px; border: none; background: transparent; color: var(--teal-dark); font-family: inherit; font-weight: 600; font-size: 15px; text-align: center; cursor: pointer; letter-spacing: 0.01em; }
.app-line:hover { text-decoration: underline; }
.app-line[hidden] { display: none; }
/* v39.99 (Ron 9/25): iPhone/iPad-only App Store line — maroon, download icon, one tap to the store */
/* Ron 9/25: centred in the gap — the page column is a flex column where .picks floats on a top auto margin; giving the line the
   same auto margin splits the leftover height evenly above and below it, and its top padding mirrors the picks' own top padding. */
/* (v39.108's everyone line .app-line--store wore the same look until v39.119 moved it down to .get-app) */
.app-line--ios { display: flex; align-items: center; justify-content: center; gap: 8px; margin: auto auto 0; padding: clamp(10px, 2.4vh, 26px) 10px 4px; color: var(--maroon); font-weight: 500; font-size: 18px; letter-spacing: 0; text-decoration: none; }
.app-line--ios svg { width: 22px; height: 22px; flex: none; }
.app-line--ios:hover { text-decoration: underline; }
.app-line--ios[hidden] { display: none; }
.app-badges { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; vertical-align: middle; }
.app-badge { display: inline-block; line-height: 0; }
.app-badge img { display: block; height: 40px; width: auto; }
.app-badge--android img { height: 60px; margin: -10px 0; } /* Google's badge ships with built-in padding; trimmed so both read the same height */
/* v39.119 (Ron 10/12): "Get the App" + this device's store badge, between the Feedback row and the Menu bar (actions);
   a little smaller than the sheet's badges so the row sits quietly; fits a 360px phone with both badges + Spanish. */
.get-app { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px auto 4px; }
.get-app[hidden] { display: none; }
.get-app__label { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; }
.get-app .app-badges { gap: 8px; }
.get-app .app-badge img { height: 32px; }
.get-app .app-badge--android img { height: 48px; margin: -8px -6px; }
@media (min-width: 720px) {
  .get-app__label { font-size: 16px; }
  .get-app .app-badge img { height: 38px; }
  .get-app .app-badge--android img { height: 57px; margin: -9.5px -7px; }
}
.a2hs__app { background: #F4F9F8; border-radius: 10px; padding: 12px 12px 10px; margin: 0 0 12px; text-align: center; }
.a2hs__app-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.a2hs__app-blurb { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.a2hs__orweb { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.sheet-about__apps { text-align: center; margin: 18px 0 6px; }
.sheet-about__apps-line { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); }
.pageview__apps { text-align: center; margin: 18px 0 0; }
.a2hs__inapp { background: #FFF6E5; border: 1px solid #F1D9A6; border-radius: 10px; padding: 10px 12px 8px; margin: 0 0 14px; } /* v39.88 */
.a2hs__inapp p { margin: 0 0 6px; }
.a2hs__open { display: inline-block; margin: 4px 0 6px; padding: 8px 16px; border: none; border-radius: 999px; background: var(--teal); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.a2hs__inapp-fallback { color: var(--ink-muted); font-size: 13px; }
.badge-new { color: var(--maroon, #8B1E3F); /* v39.77: maroon so it stands out from the teal */ font-style: italic; font-weight: 600; font-size: 13px; margin-left: 6px; white-space: nowrap; }
.pick__badge { margin-left: 8px; }
.pick__badge[hidden] { display: none; }
.pick__option .badge-new { font-size: 12px; }
.pick__value {
  flex: 1;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick__caret {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform var(--dur-fast) var(--ease);
}
.pick__trigger[aria-expanded="true"] .pick__caret { transform: rotate(180deg); }

/* Popup menu shared base. Floats below the trigger, has a soft shadow. */
.pick__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 30;
  padding: 6px;
  animation: menuOpen 160ms var(--ease) both;
}
.pick__menu--scroll { max-height: 320px; overflow-y: auto; }
/* v39.45: type-to-find line at the top of the Book list. */
.pick__search {
  position: sticky; top: 0; z-index: 1;
  display: block; width: calc(100% - 16px); margin: 8px 8px 4px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-elevated); color: var(--ink);
  font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.pick__search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0, 135, 125, 0.18); }
.pick__empty { padding: 12px; color: var(--ink-faint); font-style: italic; font-size: 14px; }

/* Standard list option (translation, voice, style, book). */
.pick__option {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.pick__option:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
.pick__option--selected { background: rgba(184, 134, 11, 0.08); }
.pick__option--selected::after {
  content: '✓';
  float: right;
  color: var(--gold);
  font-weight: 700;
}
.pick__option:disabled { color: var(--ink-faint); cursor: default; font-style: italic; }
.pick__option:disabled::after { content: ' · coming soon'; color: var(--ink-faint); font-style: italic; font-size: 12px; font-weight: 400; }

/* Chapter grid. 5 columns wide; scrolls vertically if needed. */
.pick__menu--grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px;
  max-height: 280px;
  overflow-y: auto;
}
.chapter {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chapter:hover:not(:disabled) { border-color: var(--ink); transform: scale(1.04); }
.chapter--playing { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.chapter:disabled {
  color: var(--ink-faint);
  background: var(--disabled-bg);
  cursor: default;
  font-style: italic;
}

@keyframes menuOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ===== v39.46 phone pickers (Ron 2026-09-05) ==============================
   Under 720px each picker's list rises from the bottom as a panel: thumb
   reach, room for long lists. Same list, same order. Desktop keeps the
   dropdowns exactly as they were (header/catcher/panelbody only exist on
   phones — app.js builds them when the media query matches).
   Structure: .pick__menu = transparent fixed shell; .pick__catcher = tap
   target above the panel; .pick__panelbody = the scrolling panel whose
   100vmax box-shadow dims the page (no overlay layer — see app.js). */
.pick__menuhead { display: none; }
@media (max-width: 719px) {
  body.pick-open { overflow: hidden; }
  .pick__menu, .pick__menu--scroll, .pick__menu--grid {
    display: block; position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    max-height: none; overflow: visible; z-index: 50;
    background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0;
    animation: menuUp 200ms var(--ease) both;
  }
  .pick__catcher { position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; }
  .pick__panelbody {
    position: relative; z-index: 1;
    max-height: 76vh; overflow-y: auto;
    background: var(--bg-elevated);
    border-radius: 18px 18px 0 0;
    padding: 0 10px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25), 0 0 0 100vmax rgba(10, 20, 30, 0.38);
  }
  .pick__menu--grid .pick__panelbody {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  }
  .pick__menuhead {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -10px 6px; padding: 14px 16px 10px;
    background: var(--bg-elevated); border-bottom: 1px solid var(--line);
  }
  .pick__menu--grid .pick__menuhead { grid-column: 1 / -1; margin: 0 -10px 4px; }
  .pick__menutitle { font-weight: 700; font-size: 17px; color: var(--ink); }
  .pick__menuclose {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.06); color: var(--ink-soft);
    font-size: 24px; line-height: 1; cursor: pointer;
  }
  .pick__menuclose:active { background: rgba(0, 0, 0, 0.12); }
  .pick__search { top: 52px; }
  .pick__option { padding: 13px 12px; font-size: 17px; }
  .pick__menu--grid .chapter { min-height: 46px; font-size: 17px; }
}
@keyframes menuUp { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== v37 redesign additions ============================================ */

/* Loop / shuffle share the secondary button sizing. The loop toggle gets a
   teal "active" treatment when continuous-loop is ON. */
.player__btn.is-active { color: var(--teal); background: var(--teal-soft); }
.player__btn.is-active:hover:not(:disabled) { background: rgba(0, 135, 125, 0.2); }

/* ----- Featured verse band ----------------------------------------------- */
/* v38: full-width white-on-black band pinned to the bottom of the viewport
   (mockup). The quote must stay on ONE line at every width: fluid vw-based
   font size, floor tuned so 49 characters of Inter italic fit a 320px screen.
   The reference sits right-justified beneath it. */
.verse-band {
  flex-shrink: 0;
  width: 100%;
  background: var(--dark);
  color: #fff;
  padding: 10px clamp(12px, 4vw, 28px) calc(10px + env(safe-area-inset-bottom, 0px));
  /* v39.29 (Ron's mobile screenshot): paint far past the bottom edge so the
     phone URL-bar height wobble — and anything that scrolls the page taller,
     like an open style menu — shows black below the band, never a white
     sliver. Shadow is ink only: zero layout impact, the verse keeps its
     exact position; offset 100vh + spread 100vh cancel at the band's top
     edge, so nothing above it darkens. */
  box-shadow: 0 100vh 0 100vh var(--dark);
}
.verse-band__inner {
  /* Shrink the inner box to the quote line's own width (it is nowrap), capped
     to the viewport. This makes the box's right edge coincide with the closing
     quotation mark, so the right-justified reference below lands directly under
     the mark rather than at a wider 560px column edge. (v39, per Ron.) */
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  /* v39.17 (Ron): the band must be the SAME height everywhere. The fluid font
     sizes above shrink on narrow screens, which used to shrink the band with
     them; reserve the max-size content height (17px + 14px lines + 2px gap at
     1.45 line-height ≈ 47px) and center the text in it. */
  min-height: 47px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.verse-band__text {
  display: block;
  white-space: nowrap;
  text-align: center;
  font-style: italic;
  font-size: clamp(10px, 3.1vw, 17px);
  line-height: 1.45;
  letter-spacing: 0.005em;
}
.verse-band__ref {
  display: block;
  text-align: right;
  font-style: italic;
  font-size: clamp(9px, 2.7vw, 14px);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

/* ----- Bottom action row ------------------------------------------------- */
.actions {
  /* v39.17 (Ron's mockups 2026-08-18): two stacked rows — links row
     (Feedback left, View/Hide Bible Text right) above the icon bar. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 556px; /* 520px row + its own 18px side padding */
  /* v38: margin-top auto pins the action row (and the verse band after it) to
     the bottom of the viewport column; leftover height collects above it. */
  margin: auto auto 0;
  padding: 10px 18px clamp(8px, 1.6vh, 16px);
}
.actions__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  /* v39.17b (Ron): the links row spans exactly the dropdown column (.picks is
     516px incl. 18px side padding → 480px content), so with the offsets below
     "Feedback" left-aligns with the pick labels and the toggle's caret joins
     the dropdown carets' column — at every viewport width. Hamburger + share
     stay on the WIDER bar row, which keeps them prominent (Ron liked this). */
  max-width: 480px;
  margin: 0 auto;
}
.actions__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.actions__feedback {
  /* 2px own padding + 12px = the pick trigger's 14px text inset. */
  margin-left: 12px;
  padding: 3px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.actions__feedback:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); border-radius: var(--radius-sm); }
@media (min-width: 720px) { .actions__feedback { font-size: 16px; } }
/* The View/Hide toggle's caret points up when closed, down while open. */
.actions__link[aria-expanded="true"] .actions__caret { transform: rotate(180deg); }
.actions__caret { transition: transform var(--dur-fast) var(--ease); }
.actions__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.actions__icon:hover { background: rgba(0, 0, 0, 0.05); }
.actions__icon svg { display: block; }
/* v39.65 (Ron 2026-09-10): the word MENU sits right of the hamburger and
   SHARE left of the share icon, inside the same buttons (one tap target). */
.actions__icon { width: auto; gap: 6px; padding: 0 8px; }
.actions__word {
  /* Ron 2026-09-10 (round 2): lighter and smaller than the first cut. */
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease);
}
@media (hover: hover) { .actions__icon:hover .actions__word { color: var(--teal); } }
@media (min-width: 720px) { .actions__word { font-size: 12px; } }
/* Very narrow phones (≤ 359px): keep the row on one line. */
@media (max-width: 359px) { .actions__word { font-size: 10px; letter-spacing: 0.04em; } .actions__icon { gap: 4px; padding: 0 4px; } }
.actions__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.actions__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
/* v39.17b (Ron): the teal hover is DESKTOP-ONLY. On touch screens a tap
   sets :hover and it sticks, flip-flopping the label black/teal — so the
   hover rules live behind (hover: hover), which touch devices never match.
   Phones: black always, with a tap tint. */
@media (hover: hover) {
  .actions__link:hover { color: var(--teal); }
  .actions__link:hover .actions__caret { color: var(--teal); }
  .actions__feedback:hover { color: var(--teal); }
}
.actions__link:active { background: rgba(0, 0, 0, 0.05); }
.actions__caret { color: var(--ink-muted); flex-shrink: 0; }
@media (min-width: 720px) { .actions__link { font-size: 16px; } }
/* Caret right edge 14px in from the column edge = the pick carets' inset. */
.actions__links .actions__link { padding-right: 14px; }

/* ----- Toast (share confirmation) ---------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* v39.71: share card after a chapter ends — sits above the verse band, fades on its own. */
.nudge {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px); padding: 10px 10px 10px 16px;
  background: var(--ink); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 600; z-index: 200; opacity: 0;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.nudge[hidden] { display: none; }
.nudge.is-visible { opacity: 1; transform: translate(-50%, 0); }
.nudge__btn { border: none; border-radius: 999px; padding: 8px 14px; background: var(--teal); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nudge { width: max-content; } /* v39.76: the day-done card is longer — grow to the text, cap at the viewport */
.nudge__close { border: none; background: transparent; color: rgba(255,255,255,0.7); font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; }


/* ----- Bottom sheet (modal) ---------------------------------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.42);
  animation: fadeIn 200ms var(--ease) both;
}
.sheet__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 84vh;
  max-height: 84dvh; /* v39.88: in-app browsers with their own bars — dvh tracks the visible height */
  /* v38: dvh + 100% cap so the panel never outgrows the visible viewport when
     mobile browser toolbars are expanded (84vh could clip the header). */
  max-height: min(84dvh, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: sheetUp 260ms var(--ease) both;
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.sheet__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sheet__close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.sheet__body { padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* v38: the sheet slides up from the bottom at EVERY viewport size. (The v37
   desktop variant centered it like a popup, which read as disjointed — removed
   per Randy's 2026-07-05 note.) */

/* Sheet content: prose panels, nav menu, add-to-home, song form. */
.sheet-prose { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.sheet-prose p { margin: 0 0 12px; }
.sheet-prose p:last-child { margin-bottom: 0; }
.sheet-prose--center { text-align: center; }
.sheet-soon { color: var(--ink-muted); font-size: 16px; padding: 18px 0; }
/* v39.10: About panel typography (Ron's copy, 2026-08-12). */
.sheet-about__title { margin: 0 0 14px; font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.sheet-about__h { margin: 20px 0 8px; font-size: 15px; font-weight: 800; color: var(--teal-dark); line-height: 1.3; }
.sheet-about__close { font-weight: 700; color: var(--ink); }
.sheet-link { color: var(--teal); font-weight: 700; text-decoration: none; }
.sheet-link:hover { text-decoration: underline; }
/* v39.72: Bibles For The World logo on the Donate page / panel */
.donate-logo { display: block; width: 200px; max-width: 70%; margin: 2px auto 16px; }
.donate-logo img { display: block; width: 100%; height: auto; }
.sheet-prose--center .donate-logo { margin-left: auto; margin-right: auto; }
.sheet-back {
  display: inline-block;
  margin-bottom: 12px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.sheet-back:hover { color: var(--teal); }

.navmenu { display: flex; flex-direction: column; }
.navmenu__item {
  display: block;
  width: 100%;
  padding: 13px 6px;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.navmenu__item:last-child { border-bottom: none; }
.navmenu__item:hover { color: var(--teal); }
/* v39.43 sleep timer: option list reuses the menu look; the active choice is teal with a check. */
.navmenu__item.is-current { display: flex; justify-content: space-between; align-items: center; color: var(--teal); font-weight: 600; }
.navmenu__item.is-current::after { content: '\2713'; margin-left: auto; padding-left: 12px; }
.navmenu__item--sub { color: var(--ink-soft); font-size: 13px; }
.sleep-status { margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; }

.a2hs { display: grid; gap: 18px; }
.a2hs__title { margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.a2hs__steps { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.a2hs__steps li { margin-bottom: 4px; }

.songform__intro { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.field textarea { resize: vertical; min-height: 84px; }
/* Contact form (v39.27): honeypot stays in the layout tree but far off-screen
   (display:none would tip off smarter bots); checkbox row lays out inline. */
.field--hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field--check { flex-direction: row; align-items: center; gap: 10px; }
.field--check input { width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.field--check > span { font-size: 14px; font-weight: 400; color: var(--ink); }
.songform__note { margin: 0 0 12px; font-size: 12px; color: var(--ink-muted); }
.songform__err { min-height: 18px; margin-bottom: 8px; color: #b34242; font-size: 13px; }
.songform__submit {
  width: 100%;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: var(--radius-md);
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.songform__submit:hover { background: var(--teal-dark); }
.songform__thanks { text-align: center; padding: 16px 0; }
.songform__check {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 28px;
  font-weight: 700;
}
.songform__thanks p { margin: 0 0 8px; color: var(--ink-soft); }
.songform__note { font-size: 12px; color: var(--ink-faint); }
/* v39.17: the plain-address alternative under each form (still NO mailto). */
.songform__alt { margin-top: 12px; font-size: 13px; color: var(--ink-muted); text-align: center; }
/* v39.17b: the auto-attached deep link shown under the Feedback context line. */
.songform__where { margin: -6px 0 10px; font-size: 12px; color: var(--ink-faint); word-break: break-all; }

/* ----- v38 additions ------------------------------------------------------ */

/* Visible keyboard focus for the round, borderless controls (the UA default
   ring reads poorly on circular transparent buttons). */
.player__btn:focus-visible,
.actions__icon:focus-visible,
.actions__link:focus-visible,
.sheet__close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.player__seek:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }

/* Very narrow screens (320-374px): compress the 7-button control row so it
   never overflows horizontally (v37 needed 356px and clipped on a 320px SE). */
@media (max-width: 374px) {
  .player__controls { gap: 3px; }
  .player__btn--secondary { width: 34px; height: 34px; }
  .player__btn--primary { width: 44px; height: 44px; margin: 0 2px; }
  .brand__logo { max-width: 240px; }
  .pick__trigger { padding: 8px 12px; }
}

/* v39.65 (Ron's iPhone screenshot 2026-09-10): SHORT viewports. On a 667pt
   phone Safari's floating bottom bar leaves ~580px; the full layout needs
   ~667px, so the action row and verse band slid under the bar. Below 700px
   of height everything tightens (smaller logo, snugger dropdowns and
   paddings) so the band sits above the bar again. Taller phones unchanged. */
@media (max-height: 700px) {
  .brand { padding: 6px 18px 2px; }
  .brand__logo { max-width: min(230px, 60vw); }
  .player { gap: 4px; margin-top: 0; }
  .player__track-title { font-size: 18px; }
  .picks { gap: 6px; padding-top: 8px; }
  .pick__trigger { padding: 7px 14px; font-size: 15px; }
  .actions { gap: 2px; padding: 4px 18px 4px; }
  .verse-band { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .verse-band__inner { min-height: 40px; }
}

/* Platform cards inside the Add to Home Screen panel (v38 rebuild). */
.a2hs__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.a2hs__badge svg { display: block; color: var(--ink-soft); }
.a2hs__hint { margin: 10px 0 0; font-size: 13px; color: var(--ink-muted); }

/* --- v39.9: Bible text panel ("View Bible Text", Ron's mockup) ----------- */
/* Sits in the dropdowns' slot: same width, side padding, and bottom-hugging
   auto margins as .picks, so opening the panel swaps cleanly into "exactly
   that space" between the player and the action row. */
.textpanel {
  position: relative;
  width: 100%;
  max-width: 516px;
  margin: auto auto 0;
  padding: clamp(10px, 2.4vh, 26px) 18px 0;
  animation: tpIn 260ms var(--ease) both;
  /* v39.20: the card takes exactly the height the viewport has left, so the
     verse band below always stays above the fold (the old fixed 42dvh cap
     pushed it off-screen on shorter desktop windows). flex-basis 0 makes the
     math exact: card = clamp(min, leftover space, max). Below the floor the
     page scrolls normally, like every other over-short layout. */
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 165px;
  max-height: 466px; /* preserves the old tall-screen look: 440px card + max top pad */
}
@keyframes tpIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.textpanel__scroll {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fills the flex-sized card above; min-height 0 lets it shrink with it. */
  flex: 1;
  min-height: 0;
  padding: 16px 18px; /* symmetric since v39.20 — the in-card chevron is long gone (v39.17) */
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
}
.tp-verse {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.tp-verse:last-child { margin-bottom: 0; }
/* v39.109 (Ron 10/4): "(Berean Standard Bible)" — the last line, right-justified, one blank line below the last verse */
.tp-credit { margin: 1.5em 0 0; text-align: right; }
.tp-verse__num { font-weight: 500; white-space: nowrap; }
.tp-note {
  color: var(--ink-muted);
  text-align: center;
  padding: 34px 0;
}
/* Share sheet (v39.15): grid of copy + social options. Anchors and buttons
   share one look; icons inherit currentColor so the theme stays coherent. */
.sharegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 0;
}
.sharegrid__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.sharegrid__btn:hover { border-color: var(--line-strong); color: var(--ink); }
.sharegrid__btn svg { width: 26px; height: 26px; display: block; }
.sharegrid__label { line-height: 1; }
/* v39.42: "Copy link from 2:14" — one full-width row above the grid. */
.sharegrid__btn--wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; padding: 12px 10px; }
.sharegrid__btn--wide svg { width: 20px; height: 20px; }

/* ===== v39.49 standalone pages (/about /terms /contact /donate) ========= */
.pageview { width: 100%; max-width: 640px; margin: 0 auto; padding: 4px 20px 40px; }
.pageview__title { font-size: 26px; font-weight: 700; text-align: center; margin: 6px 0 18px; color: var(--ink); }
.pageview__body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.pageview__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.pageview__nav a { color: var(--teal); text-decoration: none; font-weight: 600; }
.pageview__nav a:hover { text-decoration: underline; }
.pageview__nav .pageview__listen { padding: 6px 14px; border: 2px solid var(--teal); border-radius: 999px; }
.pageview__current { color: var(--ink-muted); font-weight: 600; }

/* ===== v39.76 Listening Plans ============================================ */
.plan-today { box-sizing: border-box; width: calc(100% - 36px); max-width: 480px; margin: 0 auto 14px; padding: 12px 14px 12px; border: 1.5px solid var(--teal); border-radius: var(--radius-md, 14px); background: rgba(0, 135, 125, 0.06); text-align: left; } /* Ron 9/18: same column as the pickers */
.plan-today[hidden] { display: none; }
.plan-today__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.plan-today__day { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.plan-today__mini { margin-left: auto; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 0 2px; }
.plan-today__chev { border: none; background: none; color: var(--teal); font-size: 16px; font-weight: 700; cursor: pointer; padding: 2px 4px; line-height: 1; }
.plan-today:not(.plan-today--open) { padding-top: 9px; padding-bottom: 9px; }
.plan-today--open .plan-today__chev { margin-left: auto; }
.plan-today__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.plan-today__name { border: none; background: none; padding: 0; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.plan-today__name:hover { text-decoration: underline; }
.plan-today__link--exit { margin-left: 12px; color: var(--ink-muted, #707070); font-weight: 600; }
.plan-today__line { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.plan-today__prog { margin-top: 8px; height: 4px; border-radius: 2px; background: rgba(0, 135, 125, 0.18); overflow: hidden; }
.plan-today__bar { height: 100%; background: var(--teal); border-radius: 2px; transition: width var(--dur-med, 300ms) var(--ease, ease); }
.plan-today__row { margin-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan-today__play { border: none; border-radius: 999px; padding: 9px 16px; background: var(--teal); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.plan-today__play:hover { background: var(--teal-dark, #006F66); }
.plan-today__sub { font-size: 13px; color: var(--ink-muted, #707070); }
.plan-today__link { border: none; background: none; padding: 0; margin-left: auto; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--teal); cursor: pointer; text-decoration: underline; }
.plan-days { display: flex; flex-direction: column; }
.plan-days__row { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line, #e6e6e6); font-size: 14px; color: var(--ink-soft); }
.plan-days__row--done { color: var(--ink-muted, #707070); }
.plan-days__row--today { color: var(--ink); font-weight: 700; background: rgba(0, 135, 125, 0.08); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.plan-days__n { flex: 0 0 64px; }
.plan-days__mark { margin-left: auto; color: var(--teal); }
.plans__intro { margin: 0 0 12px; }
.plans__active { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-md, 14px); background: rgba(0, 135, 125, 0.08); }
.plans__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.plans__name { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.plans__meta { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.plans__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.plans__btn { border: 1.5px solid var(--teal); border-radius: 999px; padding: 7px 14px; background: transparent; color: var(--teal); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
/* v39.107: the password box for a locked language (Romanian) */
.lang-lock { display: flex; flex-direction: column; gap: 12px; }
.lang-lock__input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line, #cfd8d6); border-radius: 10px; width: 100%; box-sizing: border-box; }
.lang-lock__input:focus { outline: none; border-color: var(--teal); }
.lang-lock__error { margin: 0; color: var(--maroon, #8B1E3F); font-size: 14px; }
.lang-lock__row { display: flex; gap: 10px; justify-content: flex-end; }
.lang-lock__cancel, .lang-lock__open { border: 1.5px solid var(--teal); border-radius: 999px; padding: 8px 18px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lang-lock__cancel { background: transparent; color: var(--teal); }
.lang-lock__open { background: var(--teal); color: #fff; }
.plans__btn--primary { background: var(--teal); color: #fff; }
.plans__btn:hover { filter: brightness(0.92); }
.plans__list { display: flex; flex-direction: column; }
.plans__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line, #e6e6e6); }
.plans__row--focus { background: rgba(0, 135, 125, 0.06); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.plans__txt { flex: 1; min-width: 0; }
.plans__rowname { font-size: 15px; font-weight: 700; color: var(--ink); }
.plans__rowname--btn { border: none; background: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.plans__rowname--btn:hover { text-decoration: underline; }
.plans__blurb { font-size: 13px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
@media (max-height: 700px) { .plan-today { margin-bottom: 8px; padding: 9px 12px; } .plan-today__prog { margin-top: 6px; } .plan-today__row { margin-top: 8px; } }

/* v39.76 "New Styles Added" card (Ron) */
/* v39.77: .newstyles card removed (Ron 2026-09-19) */

/* v39.94: the Bible text follows the song (recordings with verse timings) ---- */
.textpanel__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.textpanel__modes { display: flex; gap: 4px; flex-wrap: nowrap; margin: 0; }
.tmode {
  border: 1.5px solid var(--teal); background: transparent; color: var(--teal);
  border-radius: 999px; padding: 4px 9px; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.tmode.is-on { background: var(--teal); color: #fff; }
.textpanel__scroll { position: relative; }
.textpanel__scroll.is-timed .tp-verse {
  cursor: pointer; padding: 4px 8px; margin-left: -8px; margin-right: -8px; border-radius: 8px;
  transition: background 160ms, color 160ms;
}
.textpanel__scroll.is-timed .tp-verse--done { color: var(--ink-muted); }
.textpanel__scroll.is-timed .tp-verse--on { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); font-weight: 600; }
.textpanel__scroll.is-solo { display: flex; align-items: center; justify-content: center; text-align: center; }
.tp-solo__text { font-size: 19px; line-height: 1.45; margin: 0; }
.tp-solo__ref { color: var(--teal); font-weight: 700; font-size: 13px; margin: 12px 0 0; }
.tp-solo__wait { color: var(--ink-muted); font-size: 26px; margin: 0; }

/* v39.96: text size (A− / A+) and expand-to-full-screen ------------------------------------------- */
.textpanel__tools { display: flex; gap: 4px; align-items: center; margin: 0 0 0 auto; }
.ttool {
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 4px 8px; min-width: 36px; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.ttool--expand { padding: 4px 7px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.ttool--expand svg { display: block; }
.ttool--expand .i-shrink { display: none; }
.textpanel.is-expanded .ttool--expand .i-expand { display: none; }
.textpanel.is-expanded .ttool--expand .i-shrink { display: block; }
.ttool:disabled { opacity: .35; cursor: default; }
.ttool--play { display: none; min-width: 40px; }
/* the scroll body's font-size is set inline by the app (15.5px × scale); the solo verse follows in em */
.tp-solo__text { font-size: 1.226em; }
.textpanel.is-expanded {
  position: fixed; inset: 0; z-index: 60; margin: 0; max-width: none; max-height: none; animation: none;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background: var(--bg); display: flex; flex-direction: column;
}
.textpanel.is-expanded .textpanel__bar { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.textpanel.is-expanded { padding-left: 12px; padding-right: 12px; }            /* one row on a 375-px phone even with the play proxy */
.textpanel.is-expanded .tmode, .textpanel.is-expanded .ttool { padding-left: 8px; padding-right: 8px; }
.textpanel.is-expanded .textpanel__bar { gap: 4px; }
.textpanel.is-expanded .textpanel__scroll { flex: 1; min-height: 0; width: 100%; max-width: 720px; margin: 0 auto; padding: 18px 20px; }
.textpanel.is-expanded .ttool--play { display: inline-block; }
.textpanel.is-expanded .ttool--expand { background: var(--teal); color: #fff; border-color: var(--teal); }
html.tp-expanded, html.tp-expanded body { overflow: hidden; }
@media (max-width: 340px) { .tmode, .ttool { padding-left: 6px; padding-right: 6px; font-size: 12px; } .textpanel__bar { gap: 4px; } }   /* 320-px phones: keep the text bar on one row (v39.97) */


/* ===== The Kids Singing Bible overrides (appended by _tools/rebrand.py; palette from the Kids logo, Ron 9/3) ===== */
:root {
  --bg: #FFFFFF;                       /* pure white matching the logo art */
  --teal: #2E9BE6;                     /* primary = the logo's bright BLUE (token name kept) */
  --teal-dark: #1D7CC2;
  --teal-soft: rgba(46, 155, 230, 0.12);
  --gold: #7B3FA0;                     /* accent = the logo's PURPLE */
  --dark: #1B3C8C;                     /* navy from the logo's book cover (verse band) */
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.brand__logo, .gate__logo { width: auto; max-width: min(420px, 86vw); max-height: clamp(110px, 24vh, 230px); }
.player__btn.is-active:hover:not(:disabled) { background: rgba(46, 155, 230, 0.2); }
.verse-band__ref { color: #F8C33C; }  /* logo sparkle-yellow on the navy band */
/* No backend on this site: the Feedback link stays hidden. */
.actions__feedback { display: none; }
.actions__links { justify-content: flex-end; }
/* TS.B's search footer (v39.110) describes TheSinging.Bible — not shown on the Kids site. */
.site-foot { display: none !important; }
/* No sign-up backend here: the bar's Song of the Day button is hidden (space kept so Menu/Share stay put). */
#btnSongOfDay { visibility: hidden; }
/* No sign-up backend here: the bar's Song of the Day button is hidden (space kept so Menu/Share stay put). */
#btnSongOfDay { visibility: hidden; }