/* The Singing 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; }
}

/* ----- 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; }
.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; }
.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; }
.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) */


/* ===== The Soul Bible overrides (appended by _tools/rebrand.py) ===== */
:root {
  --bg: #FEFDFA;                       /* warm ivory matching the logo art */
  --teal: #B8860B;                     /* accent is GOLD (token name kept) */
  --teal-dark: #9C7209;
  --teal-soft: rgba(184, 134, 11, 0.12);
}
.brand__logo, .gate__logo { width: auto; max-width: min(300px, 72vw); max-height: clamp(84px, 18vh, 180px); }
.player__btn.is-active:hover:not(:disabled) { background: rgba(184, 134, 11, 0.2); }
.actions__caret { color: var(--gold, #B8860B); }
/* No backend on this site: the Feedback link stays hidden (the bar's centre is Listening Plans since v39.76 — keep it). */
.actions__feedback { display: none; }
.actions__links { justify-content: flex-end; }