/*
   EGW Online Service — Bible panel flagship layer   v2.14.0
   ------------------------------------------------------------------
   Loads LAST in the watch cascade. Three jobs, nothing else:

     1. READING LAYOUTS — verse-by-verse / continuous / paragraph.
     2. ROUTING to the church's own Bible site.
     3. RECLAIM the reading area (measured: 355px of a 600px panel was
        chrome, leaving 41% for scripture).

   ⚠️ DO NOT re-implement selection, highlights, the action bar, search,
   plans or the follow-along here. bible-pro.js / bible-strongs.js /
   bible-follow.js already own those, and rebuilding what exists is what
   produced the double-bubble and 84px-row defects earlier in this project.
   ------------------------------------------------------------------ */

/* ===== 1. Chrome reclaim ============================================
   The brand strip repeats the tab's own label ("Bible", book glyph) and
   carries a link to an outside site. The card head reprints the reference
   and translation that the header chips already show, permanently. Both
   are pure duplication — and together they were the single largest waste
   of vertical space in the panel. */
.eos-watch--cinema .eos-bible-brand { display: none !important; }
.eos-watch--cinema .eos-bible-card-head { display: none !important; }
.eos-watch--cinema .eos-bible-result { padding-top: 0 !important; }

/* Verse of the day / recents are an EMPTY-STATE, not furniture: useful when
   there is nothing to read, pure cost the moment a passage loads — and the
   host's passage always outranks the daily verse. */
.eos-watch--cinema .eos-bible[data-has-passage="1"] .eos-bp-votd,
.eos-watch--cinema .eos-bible[data-has-passage="1"] .eos-bible-recents-head,
.eos-watch--cinema .eos-bible[data-has-passage="1"] .eos-bible-quick,
.eos-watch--cinema .eos-bible[data-has-passage="1"] .eos-bible-recents-empty { display: none !important; }

/* ===== 2. Header ====================================================
   One 56px row. The chips keep their existing ids and popover wiring. */
.eos-watch--cinema .eos-bible-toolbar {
  min-height: 56px;
  gap: 8px !important;
  padding: 0 8px 0 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--cn-border);
}
.eos-watch--cinema .eos-bible-chip { min-height: 36px !important; padding: 8px 12px !important; }
/* Every control reaches the 44px touch minimum; the panel had ten classes
   under it, the smallest 21px. */
.eos-watch--cinema .eos-bible-brand-ic,
.eos-watch--cinema .eos-bp-tbtn,
.eos-bible-flag-btn { min-width: 44px !important; min-height: 44px !important; }

.eos-bible-flag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 11px; color: var(--cn-muted); font-size: 17px;
}
.eos-bible-flag-btn:hover { background: var(--cn-bg-soft); color: var(--cn-fg); }
.eos-bible-flag-btn--go { color: var(--cn-amber-dark); background: var(--cn-amber-glow); }
.eos-bible-flag-btn:focus-visible { outline: 2px solid var(--gold, #F5A312); outline-offset: 2px; }

/* ===== 3. Reading layouts ===========================================
   The reader emits <span class="eos-bible-verse"> in a flowing paragraph
   (watch.css:2278 display:inline, :2282 inserts the inter-verse space).
   Layout is therefore a pure CSS switch on ONE attribute — no refetch,
   no re-render, no change to the reader's markup contract. */

/* -- A · VERSE BY VERSE: each verse its own line, number in a gutter.
      The one to use when the preacher calls out verse numbers. */
.eos-bible[data-bible-layout="verse"] .eos-bible-verse {
  display: grid !important;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  padding: 6px 4px;
  margin: 0 -4px 2px;
  border-radius: 6px;
}
.eos-bible[data-bible-layout="verse"] .eos-bible-verse + .eos-bible-verse::before { content: none !important; }
.eos-bible[data-bible-layout="verse"] .eos-bible-verse sup,
.eos-bible[data-bible-layout="verse"] .eos-bible-vnum {
  vertical-align: baseline !important;
  text-align: right;
  font-size: 11px;
  padding-top: 3px;
}
.eos-bible[data-bible-layout="verse"] .eos-bible-verse:hover { background: var(--cn-bg-softer); }

/* -- B · CONTINUOUS (default): verses flow as one passage. */
.eos-bible[data-bible-layout="cont"] .eos-bible-verse { display: inline; }

/* -- C · PARAGRAPH: flowing text, but broken where the PUBLISHER breaks it.
      `data-pstart` comes from the eb/v1 API, which reads the upstream's own
      line_break nodes — so these are real paragraphs, not invented ones.
      Where an upstream ships no structure (jsdelivr / getbible), no verse
      carries the flag and this renders identically to continuous, which is
      the honest outcome rather than a fabricated one. */
.eos-bible[data-bible-layout="para"] .eos-bible-verse { display: inline; }
.eos-bible[data-bible-layout="para"] .eos-bible-verse[data-pstart="1"] {
  display: block;
  text-indent: 20px;
  margin-top: 14px;
}
.eos-bible[data-bible-layout="para"] .eos-bible-verse[data-pstart="1"]::before { content: none !important; }

/* Section headings, where the publisher ships them. */
.eos-bible-heading {
  display: block;
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cn-muted);
  margin: 18px 0 8px;
}
.eos-bible-verse:first-child .eos-bible-heading { margin-top: 0; }

/* Red-letter — the words of Christ. Only some translations carry the flag
   (verified: WEB does, BSB and Darby do not), so this simply never fires
   where the publisher did not mark it. */
.eos-bible .wj { color: #B03A2E; }
[data-theme="dark"] .eos-bible .wj { color: #E8836F; }

/* Comfortable reading measure. */
.eos-watch--cinema .eos-bible-result { padding: 16px 20px 24px !important; }
.eos-watch--cinema .eos-bible-verse { line-height: 1.75 !important; }

/* ===== 4. Layout picker ============================================= */
.eos-bible-layout-sheet {
  position: absolute; right: 10px; top: 58px; z-index: 36;
  width: 268px; max-width: calc(100% - 20px);
  background: var(--cn-bg); border: 0.5px solid var(--cn-border);
  border-radius: 14px; box-shadow: var(--cn-shadow);
  padding: 8px; display: none;
}
.eos-bible-layout-sheet.is-on { display: block; }
.eos-bible-layout-opt {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  padding: 12px; border: 1.5px solid transparent; border-radius: 11px;
  background: transparent; cursor: pointer; text-align: left; font-family: inherit;
}
.eos-bible-layout-opt:hover { background: var(--cn-bg-soft); }
.eos-bible-layout-opt.is-on { border-color: var(--gold, #F5A312); background: var(--cn-amber-glow); }
.eos-bible-layout-opt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cn-fg); margin-bottom: 2px; }
.eos-bible-layout-opt span { font-size: 11px; line-height: 1.5; color: var(--cn-muted); }

/* ===== 5. Hand-off to the Bible site ================================
   A visible card, not a hidden icon: during a service most people stay,
   but afterwards this is the single most valuable action in the panel. */
.eos-bible-route {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 40px);
  margin: 0 20px 16px; padding: 12px 16px;
  border: 1px solid var(--cn-border); border-radius: 12px;
  background: var(--cn-bg-soft); cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
}
.eos-bible-route:hover { border-color: var(--cn-amber); background: var(--cn-amber-glow); }
.eos-bible-route:focus-visible { outline: 2px solid var(--gold, #F5A312); outline-offset: 2px; }
.eos-bible-route__ico { font-size: 17px; color: var(--cn-amber-dark); flex: none; }
.eos-bible-route__t { flex: 1; min-width: 0; }
.eos-bible-route__t b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cn-fg); }
.eos-bible-route__t span { font-size: 11px; color: var(--cn-muted); }

/* ===== 6. Toast ===================================================== */
.eos-bible-toast {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  background: var(--cn-fg); color: var(--cn-bg);
  font-size: 11.5px; padding: 9px 14px; border-radius: 9px;
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity 160ms ease-out;
  white-space: nowrap; max-width: 88%;
}
.eos-bible-toast.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .eos-bible-toast { transition: none; }
}

/* ============================================================
   v2.14.1 — REORGANISE + THE CONSOLE VISUAL LANGUAGE
   Measured on the live panel before this change: 651px of chrome for a
   67px reading viewport (10%). Four bands were doing nothing useful most
   of the time. Target: 261px chrome / 461px reading (66%).
   Motion follows the EGW console standard — spring cubic-bezier(.34,1.56,.64,1),
   inline-SVG icons only, and everything collapses under reduced motion.
   ============================================================ */
.eos-watch--cinema .eos-bible { --eos-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ── 1. Reclaim ─────────────────────────────────────────────
   The external-links footer sends people to four competitors directly
   beneath a card inviting them into our own reader — it works against
   the hand-off, so it goes. */
.eos-watch--cinema #eos-bible-foot { display: none !important; }

/* Tools row folds into the overflow menu. KEEP THE NODE: bible-strongs.js
   appends its Study button here and bible-follow.js injects the reading-comfort
   controls with no fallback — deleting it would silently remove them. */
.eos-watch--cinema .eos-bp-tools {
  height: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  overflow: hidden !important; border: 0 !important;
}

/* The floating chapter arrows resolve against the whole panel and land at its
   vertical midpoint, over the text. Chapter paging belongs in the bottom band
   where a thumb already is. */
.eos-watch--cinema .eos-bible-nav { display: none !important; }

/* ── 2. Host console — MINI DOCK  (v2.16.0, replaces the v2.14.1 collapse) ──
   The v2.14.1 implementation was removed: its only toggle lived inside
   .eos-bible-conbar, which was display:none unless the console was ALREADY
   collapsed — so a host who expanded it could never collapse it again, and the
   choice was persisted, so it reopened expanded forever. That is the state the
   owner screenshotted. It also hid .eos-bf-host-h, which carries the
   End-broadcast button, making "collapsed" unsafe to default to.

   The dock has two states, driven by data-dock on .eos-bf-host itself:
     mini (default) — the header strip stays, the BODY collapses. The host keeps
                      live state, the current passage, Next passage and End
                      broadcast at a glance.
     open           — everything, for when the host is actually changing passage.
   The body collapses with a grid 1fr->0fr transition, which animates to and from
   intrinsic height without hard-coding one and without display:none (so focus
   never lands in a zero-height box: the drawer is also inert when mini). */
.eos-bf-condrawer { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s var(--eos-spring, cubic-bezier(.34,1.56,.64,1)); }
.eos-bf-condrawer > .eos-bf-conbody { overflow: hidden; min-height: 0; }
.eos-bf-host[data-dock="mini"] .eos-bf-condrawer { grid-template-rows: 0fr; }
@media (prefers-reduced-motion: reduce) { .eos-bf-condrawer { transition: none; } }

/* The strip: live dot, current passage, and the two controls a host needs mid-sermon. */
/* The strip sits directly under the console header, so it owns its own padding
   (its parent .eos-bf-host has none) and a hairline to separate the two rows.
   12px matches .eos-bf-host-h and .eos-bf-host-body either side of it, so the
   console reads as one evenly-spaced card rather than three stacked strips. */
.eos-bf-dockbar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 12px; }
.eos-bf-host[data-dock="open"] .eos-bf-dockbar { border-bottom: 1px solid var(--bp-border, rgba(17,17,17,.12)); }
.eos-bf-dockbar__ref { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.eos-bf-dockbar__ref .lbl { font-weight: 500; opacity: .62; }
.eos-bf-dock {
  min-height: 32px; padding: 6px 11px; border: 0; border-radius: 9px;
  background: rgba(0,0,0,.06); color: inherit; cursor: pointer;
  font: 600 11px/1 var(--font-body, 'Figtree', system-ui, sans-serif);
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  transition: background .16s ease, transform .22s var(--eos-spring, cubic-bezier(.34,1.56,.64,1));
}
.eos-bf-dock:hover { background: rgba(0,0,0,.1); }
.eos-bf-dock:active { transform: scale(.94); }
.eos-bf-dock svg { transition: transform .24s var(--eos-spring, cubic-bezier(.34,1.56,.64,1)); }
.eos-bf-host[data-dock="open"] .eos-bf-dock svg { transform: rotate(180deg); }
html[data-theme="dark"] .eos-bf-dock { background: rgba(255,255,255,.09); }
html[data-theme="dark"] .eos-bf-dock:hover { background: rgba(255,255,255,.14); }
.eos-bf-dock:focus-visible { outline: 2px solid var(--gold, #F5A312); outline-offset: 2px; }

/* ── 3. Reading layout as a segmented control ──────────────
   It was a popover behind an icon; a three-way reading preference deserves to
   be visible and one tap away. Same buttons, same ids — restyled in place. */
.eos-watch--cinema #eos-bible-layout-btn { display: none !important; }
.eos-watch--cinema .eos-bible-layout-sheet {
  position: static !important; display: block !important;
  width: auto !important; max-width: none !important;
  margin: 12px 16px 0; padding: 3px !important;
  background: var(--cn-bg-soft) !important; border: 0 !important;
  border-radius: 11px !important; box-shadow: none !important;
}
.eos-watch--cinema #eos-bible-layout-opts { display: flex; gap: 2px; }
.eos-watch--cinema .eos-bible-layout-opt {
  flex: 1; min-height: 34px; padding: 8px 6px !important;
  border: 0 !important; border-radius: 9px !important;
  background: transparent !important; justify-content: center; text-align: center;
  transition: background .18s ease, color .18s ease, transform .22s var(--eos-spring);
}
.eos-watch--cinema .eos-bible-layout-opt:active { transform: scale(.96); }
.eos-watch--cinema .eos-bible-layout-opt.is-on {
  background: var(--cn-bg) !important;
  box-shadow: 0 1px 3px rgba(23, 21, 15, .14);
}
.eos-watch--cinema .eos-bible-layout-opt b {
  font-size: 11.5px !important; font-weight: 600 !important; margin: 0 !important;
}
/* The long description is demo copy — a segment needs a label, not a paragraph. */
.eos-watch--cinema .eos-bible-layout-opt span span { display: none !important; }

/* ── 4. Controls — spring feedback, real focus rings ───────── */
.eos-watch--cinema .eos-bible-chip,
.eos-watch--cinema .eos-bible-flag-btn,
.eos-watch--cinema .eos-bp-bar button {
  transition: background .16s ease, color .16s ease, transform .22s var(--eos-spring);
}
.eos-watch--cinema .eos-bible-chip:active,
.eos-watch--cinema .eos-bible-flag-btn:active { transform: scale(.94); }
.eos-watch--cinema .eos-bible-chip:focus-visible,
.eos-watch--cinema .eos-bp-bar button:focus-visible { outline: 2px solid var(--gold, #F5A312); outline-offset: 2px; }

/* Hand-off card: spring lift, the chip tilts, the arrow leads the eye out. */
.eos-bible-route { transition: transform .28s var(--eos-spring), box-shadow .28s ease, border-color .18s ease; }
.eos-bible-route:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23, 21, 15, .10); }
.eos-bible-route:active { transform: translateY(0) scale(.99); }
.eos-bible-route__ico { transition: transform .3s var(--eos-spring); }
.eos-bible-route:hover .eos-bible-route__ico { transform: scale(1.08) rotate(-4deg); }

/* ── 5. Verse entrance — armed only after the first passage lands, so
       opening the panel never animates a whole chapter at once. ───── */
.eos-watch--cinema .eos-bible[data-anim="1"] .eos-bible-verse {
  animation: eosVerseIn .42s var(--eos-spring) both;
}
@keyframes eosVerseIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── 6. Reading progress ring ─────────────────────────────── */
.eos-bible-ring { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; pointer-events: none; z-index: 6; opacity: .9; }
.eos-bible-ring circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.eos-bible-ring .rbg { stroke: var(--cn-border); }
.eos-bible-ring .rfg { stroke: var(--gold, #F5A312); stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .eos-watch--cinema .eos-bible *,
  .eos-bible-route, .eos-bible-route__ico, .eos-bf-dock {
    animation: none !important; transition: none !important; transform: none !important;
  }
  .eos-bible-ring .rfg { transition: none !important; }
}

/* ── v2.16.0 — master show/hide for the broadcast console ───────────────
   Lives in the reader toolbar, NOT inside the console: a control that hides its
   own container cannot also be the way back (that was the v2.14.1 bug). Host-only
   — bible-follow.js injects it and never runs unless the visitor may operate the
   console. It takes over the auto-margin that used to sit on .eos-bible-tb-aa, so
   it lands in the gap between the passage/translation chips and the right-hand
   tools rather than adding a second gap. */
.eos-bf-contgl { position: relative; margin-left: auto !important; }
.eos-watch--cinema .eos-bible-toolbar .eos-bf-contgl ~ .eos-bible-tb-aa { margin-left: 0 !important; }
.eos-bf-contgl[aria-pressed="false"] { opacity: .55; }
.eos-bf-contgl[aria-pressed="false"]:hover { opacity: 1; }
/* On-air pip: only while a broadcast is actually running AND the console is hidden,
   which is precisely the moment the host has no other on-screen reminder. */
.eos-bf-contgl__pip {
  position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--eos-live, #C0392B); display: none;
  box-shadow: 0 0 0 2px var(--cn-panel, #fff);
}
.eos-bf-contgl.is-live[aria-pressed="false"] .eos-bf-contgl__pip { display: block; animation: eos-bf-pip 1.8s ease-in-out infinite; }
@keyframes eos-bf-pip { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .eos-bf-contgl.is-live[aria-pressed="false"] .eos-bf-contgl__pip { animation: none; } }
/* The hide itself. */
.eos-bf-host.is-conhidden { display: none !important; }

/* ── v2.16.0 — spacing pass on the Bible panel chrome ───────────────────
   With the console now hidden by default the remaining blocks sit directly
   against each other, so the rhythm has to be deliberate rather than inherited.
   Everything below is spacing only — no colour, no layout mode changes. */
/* Consistent 12px inner gutter down the whole console card. */
.eos-bf-host-h { padding: 10px 12px; }
.eos-bf-host-body { padding: 12px; gap: 9px; }
/* Breathing room between the console, the recap and the reader beneath them. */
.eos-bf-host { margin: 0 14px 10px; }
/* The dock's two buttons should not crowd each other or the passage text. */
.eos-bf-dockbar .eos-bf-dock + .eos-bf-dock { margin-left: 2px; }
/* Toolbar: keep a clear gap between the reading chips and the operator tools. */
.eos-watch--cinema .eos-bible-toolbar .eos-bf-contgl { margin-left: auto !important; }
.eos-watch--cinema .eos-bible-toolbar { row-gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════
 * v2.16.1 — "Go to passage" / "Translation" sheets: FIX + REBUILD
 *
 * THE BUG (owner screenshot): the reading-layout switcher showed THROUGH the
 * open sheet, so "Verse by verse / Continuous / Paragraph" sat on top of the
 * Book / Chapter / Verse labels, and the Verse field ran off the panel edge.
 *
 * TWO COMPOUNDING ROOT CAUSES, both verified in source:
 *   1. TRANSLUCENCY. watch-cinema.css:794 paints the sheet with var(--cn-bg),
 *      and watch-redesign.css:53 redefines --cn-bg as var(--glass) =
 *      rgba(255,255,255,0.72) (:27). A 72%-opaque "solid" background lets the
 *      switcher underneath bleed through. This is a DIALOG — it must be opaque.
 *   2. NO POSITIONING CONTEXT. .eos-watch--cinema .eos-bible (watch-cinema.css
 *      :689-695) sets flex/overflow but never `position`, so the sheet's
 *      absolute left/right/top resolved against a further-out ancestor and
 *      escaped the panel width — hence the clipped Verse field.
 *
 * Scoped to the cinema Bible panel and loaded last, so it corrects the earlier
 * sheets without editing them.
 * ═══════════════════════════════════════════════════════════════════════ */

/* 1 — the panel becomes the positioning context the sheets always assumed. */
.eos-watch--cinema .eos-bible { position: relative; }

/* 2 — a dialog is opaque. Never inherit a glass token here. */
.eos-watch--cinema .eos-bible-pop {
  z-index: 60 !important;
  background: var(--color-bg, #FFFFFF) !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(17,17,17,.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08) !important;
  padding: 0 !important;
  max-height: calc(100% - 74px);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
html[data-theme="dark"] .eos-watch--cinema .eos-bible-pop {
  background: var(--color-bg, #1F1F1E) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* 3 — header: sticky, so Close stays reachable in a long sheet. */
.eos-watch--cinema .eos-bible-pop-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  margin: 0 !important; padding: 14px 14px 11px;
  background: inherit;
  border-bottom: 1px solid rgba(17,17,17,.10);
}
html[data-theme="dark"] .eos-watch--cinema .eos-bible-pop-head { border-bottom-color: rgba(255,255,255,.12); }
.eos-watch--cinema .eos-bible-pop-head strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.eos-watch--cinema .eos-bible-pop-x {
  margin-left: auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; border: 0; cursor: pointer;
  background: rgba(17,17,17,.05); color: inherit;
  transition: background .16s ease, transform .18s var(--eos-spring, cubic-bezier(.34,1.56,.64,1));
}
.eos-watch--cinema .eos-bible-pop-x:hover { background: rgba(17,17,17,.11); }
.eos-watch--cinema .eos-bible-pop-x:active { transform: scale(.92); }
html[data-theme="dark"] .eos-watch--cinema .eos-bible-pop-x { background: rgba(255,255,255,.09); }
html[data-theme="dark"] .eos-watch--cinema .eos-bible-pop-x:hover { background: rgba(255,255,255,.16); }
.eos-watch--cinema .eos-bible-pop-body { padding: 13px 14px 15px; }

/* 4 — THE FIELD ROW. Was a flex row of 130px + 92px + 92px + a Go button,
 *     which cannot fit a ~370px panel, so it wrapped and clipped. Now an
 *     explicit grid that cannot overflow at any panel width:
 *       row 1   Book (wide) · Chapter · Verse
 *       row 2   Go, full width, a real touch target
 *     minmax(0,Nfr) is what actually prevents the clipping — a bare fr floors
 *     at min-content, which a long name like "1 Thessalonians" exceeds. */
.eos-watch--cinema .eos-bible-selects {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px 8px !important;
  align-items: end !important;
}
.eos-watch--cinema .eos-bible-sel,
.eos-watch--cinema .eos-bible-sel.eos-bible-sel-sm { flex: none !important; min-width: 0; gap: 5px; }
.eos-watch--cinema .eos-bible-sel-lbl {
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  opacity: .58; padding-left: 1px;
}
.eos-watch--cinema .eos-bible-selects select {
  width: 100%; min-width: 0; height: 40px;
  border-radius: 10px !important; font-size: 16px !important;
  padding: 0 10px !important;
  text-overflow: ellipsis;
}
.eos-watch--cinema .eos-bible-go.eos-bible-browse-go {
  grid-column: 1 / -1; width: 100%; height: 42px;
  border: 0; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--cn-fg, #141416); color: var(--color-bg, #fff);
  transition: transform .18s var(--eos-spring, cubic-bezier(.34,1.56,.64,1)), opacity .16s ease;
}
.eos-watch--cinema .eos-bible-go.eos-bible-browse-go:hover { opacity: .9; }
.eos-watch--cinema .eos-bible-go.eos-bible-browse-go:active { transform: scale(.985); }

/* 5 — reference form, dividers, section labels: one consistent rhythm. */
.eos-watch--cinema .eos-bible-pop-divider { margin: 14px 0 !important; height: 1px; background: rgba(17,17,17,.09); border: 0 !important; }
html[data-theme="dark"] .eos-watch--cinema .eos-bible-pop-divider { background: rgba(255,255,255,.11); }
.eos-watch--cinema .eos-bible-form-label {
  display: block; margin-bottom: 7px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; opacity: .58;
}
.eos-watch--cinema .eos-bible-form { display: flex; gap: 8px; align-items: stretch; }
.eos-watch--cinema .eos-bible-form input {
  flex: 1; min-width: 0; height: 42px;
  padding: 0 12px; border-radius: 11px; font-size: 16px;
}
.eos-watch--cinema .eos-bible-form .eos-btn { flex: none; height: 42px; padding: 0 18px; border-radius: 11px; font-size: 13px; font-weight: 600; }

/* 6 — popular passages: an even wrapping chip set instead of a ragged grid. */
.eos-watch--cinema .eos-bible-picks-grid { display: flex !important; flex-wrap: wrap; gap: 7px !important; }
.eos-watch--cinema .eos-bible-pick {
  flex: 0 0 auto; height: 33px; padding: 0 13px;
  border-radius: 999px; border: 1px solid rgba(17,17,17,.13);
  background: transparent; color: inherit; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .18s var(--eos-spring, cubic-bezier(.34,1.56,.64,1));
}
.eos-watch--cinema .eos-bible-pick:hover { background: rgba(17,17,17,.05); border-color: rgba(17,17,17,.26); }
.eos-watch--cinema .eos-bible-pick:active { transform: scale(.95); }
html[data-theme="dark"] .eos-watch--cinema .eos-bible-pick { border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .eos-watch--cinema .eos-bible-pick:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }

/* 7 — belt and braces: while a sheet is open the in-flow layout switcher is
 *     redundant chrome, and hiding it removes any chance of this collision
 *     returning if a future token change reintroduces translucency. :has() is
 *     progressive — where unsupported, rules 1 and 2 alone already fix the bug. */
.eos-watch--cinema .eos-bible:has(.eos-bible-pop:not([hidden])) .eos-bible-layout-sheet { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .eos-watch--cinema .eos-bible-pop-x,
  .eos-watch--cinema .eos-bible-pick,
  .eos-watch--cinema .eos-bible-go.eos-bible-browse-go { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * v2.16.3 — THE SCRIPTURE FILLS THE PANEL
 *
 * THE BUG (owner screenshot): an opened passage rendered in a short box with
 * its OWN scrollbar, and a large empty gap sat between it and the hand-off card.
 *
 * ROOT CAUSE: platform.css:2487-2495 caps .eos-bible-card-body at
 * max-height:260px with overflow-y:auto. That was written for the ORIGINAL
 * in-page Bible card, where 260px was a sensible teaser inside a long page.
 * In the cinema side panel it is nested INSIDE the panel's own scroller
 * (.eos-bible-result-wrap = flex:1 / min-height:0 / overflow-y:auto,
 * watch-cinema.css:789-792), so the layout ends up with a scrollbar inside a
 * scrollbar: the inner box is stuck at 260px no matter how tall the panel is,
 * and the space the wrap correctly claimed below it renders as dead white.
 * The [data-expand="1"] escape hatch (platform.css:2496) is never surfaced here.
 *
 * FIX: in the cinema panel the card body is NOT a scroller. It grows to its
 * content and the PANEL scrolls — one scrollbar, and the scripture uses every
 * pixel the chrome is not using.
 * ═══════════════════════════════════════════════════════════════════════ */

/* 1 — remove the nested cap and the nested scroller. */
.eos-watch--cinema .eos-bible-card-body {
  max-height: none !important;
  overflow: visible !important;
  transition: none !important;      /* the 260px->70vh animation has nothing to animate now */
}

/* 2 — the card and the result stretch to the full height the wrap offers, so a
 *     SHORT passage still reads as a full panel rather than a floating box with
 *     a void beneath it. */
.eos-watch--cinema .eos-bible-result-wrap { display: flex; flex-direction: column; }
.eos-watch--cinema #eos-bible-result { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.eos-watch--cinema #eos-bible-result > .eos-bible-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.eos-watch--cinema #eos-bible-result > .eos-bible-card > .eos-bible-card-body { flex: 1; min-height: 0; }

/* 3 — comfortable reading measure now that there is room for it. */
.eos-watch--cinema .eos-bible-card-body { padding: 12px 14px 14px; line-height: 1.72; }
.eos-watch--cinema .eos-bible-verse { margin: 0 0 11px; }
.eos-watch--cinema .eos-bible-verse:last-child { margin-bottom: 0; }

/* 4 — one scrollbar, and it should look deliberate. */
.eos-watch--cinema .eos-bible-result-wrap { scrollbar-width: thin; scrollbar-gutter: stable; }
.eos-watch--cinema .eos-bible-result-wrap::-webkit-scrollbar { width: 8px; }
.eos-watch--cinema .eos-bible-result-wrap::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,.34); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.eos-watch--cinema .eos-bible-result-wrap::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,.55); background-clip: content-box; }
.eos-watch--cinema .eos-bible-result-wrap::-webkit-scrollbar-track { background: transparent; }

/* 5 — the hand-off card is a footer, not a mid-panel divider: it sits after the
 *     scripture rather than floating with a gap above it. */
.eos-watch--cinema .eos-bible-route { margin-top: 10px; flex: none; }

/* ═══════════════════════════════════════════════════════════════════════
 * v2.16.5 — MORE ROOM FOR SCRIPTURE, SMALLER HAND-OFF
 *
 * Owner: the scripture area is still too short and must scroll; the
 * "Continue in Ephesus Bible" card takes too much space.
 *
 * v2.16.3 already removed the 260px cap so the reader FILLS the panel. What is
 * left is chrome above and below it, measured in the cinema panel:
 *     layout switcher  ~52px   (Verse by verse / Continuous / Paragraph)
 *     hand-off card    ~72px   (two lines of text + icon + arrow)
 * That is ~124px of the panel spent on two controls, both of which sit between
 * the member and the passage. This block reclaims about 70px of it and makes the
 * scripture the thing that scrolls.
 * ═══════════════════════════════════════════════════════════════════════ */

/* 1 ── THE HAND-OFF becomes a single quiet line (~34px, was ~72px).
 *      It is a way out of the panel, not a feature card, so it should read like
 *      a link with an affordance — not compete with the scripture above it.
 *      The second line ("Full reader, notes & plans") is dropped: the button
 *      already says where it goes, and the passage is named in the toolbar. */
.eos-watch--cinema .eos-bible-route {
  min-height: 34px !important;
  padding: 7px 11px !important;
  gap: 8px !important;
  border-radius: 10px !important;
  margin-top: 8px !important;
  background: transparent !important;
  border: 1px solid var(--cn-border, rgba(127,127,127,.22)) !important;
}
.eos-watch--cinema .eos-bible-route__t span { display: none !important; }   /* the second line */
.eos-watch--cinema .eos-bible-route__t b {
  font-size: 11.5px !important; font-weight: 600 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eos-watch--cinema .eos-bible-route__ico { font-size: 14px !important; }
.eos-watch--cinema .eos-bible-route svg { width: 13px !important; height: 13px !important; }
.eos-watch--cinema .eos-bible-route:hover { background: var(--cn-amber-glow) !important; border-color: var(--cn-amber) !important; }

/* 2 ── THE LAYOUT SWITCHER slims down. Three words in a segmented control do
 *      not need 52px; 34px reads the same and gives the height back. */
.eos-watch--cinema .eos-bible-layout-sheet { margin: 8px 16px 0 !important; padding: 2px !important; }
.eos-watch--cinema .eos-bible-layout-opt { padding: 7px 8px !important; }
.eos-watch--cinema .eos-bible-layout-opt b { font-size: 11px !important; margin-bottom: 0 !important; }
/* v2.16.9 — REGRESSION FIX. v2.16.5 wrote `.eos-bible-layout-opt span` here,
   intending to hide the per-option description. But the markup is
   <button><span><b>Label</b><span>description</span></span></button>
   (page-watch.php:1033) — the OUTER span wraps the label too, so that rule
   emptied all three buttons. The description is the NESTED span, which is why
   the pre-existing rule at line ~275 already says `span span`. Match it. */
.eos-watch--cinema .eos-bible-layout-opt > span > span { display: none !important; }
.eos-watch--cinema .eos-bible-layout-opt > span { display: block !important; }

/* 3 ── THE SCRIPTURE IS THE SCROLLER, and it takes every remaining pixel.
 *      The chain is: .eos-bible (flex column, fixed height)
 *        -> .eos-bible-result-wrap  flex:1 / min-height:0 / overflow-y:auto
 *        -> #eos-bible-result -> .eos-bible-card -> .eos-bible-card-body
 *      Each link needs min-height:0, or a flex item refuses to shrink below its
 *      content and the scroll silently moves to the wrong element (which is what
 *      produced the short box with its own scrollbar before v2.16.3). */
.eos-watch--cinema .eos-bible-result-wrap {
  flex: 1 1 auto !important;
  min-height: 220px !important;     /* never collapse to nothing on a short panel */
  overflow-y: auto !important;
  overscroll-behavior: contain;      /* reaching the end must not scroll the page */
  -webkit-overflow-scrolling: touch; /* momentum on iOS */
}
.eos-watch--cinema #eos-bible-result,
.eos-watch--cinema #eos-bible-result > .eos-bible-card { min-height: 0 !important; }
/* The card fills the wrap so a SHORT passage still reads as a full panel, but it
   is the WRAP that scrolls — one scrollbar, always in the same place. */
.eos-watch--cinema #eos-bible-result > .eos-bible-card > .eos-bible-card-body {
  flex: 1 1 auto !important; min-height: 0 !important; overflow: visible !important;
}

/* 4 ── the verse block should not float in a sea of card. Let the reading
 *      surface run the full height it has been given. */
.eos-watch--cinema .eos-bible-card { display: flex !important; flex-direction: column !important; }
.eos-watch--cinema .eos-bible-card-head { flex: none !important; }

/* 5 ── phones: chrome costs proportionally more, so trim it further and let the
 *      scripture keep the difference. */
@media (max-width: 640px) {
  .eos-watch--cinema .eos-bible-route { min-height: 32px !important; padding: 6px 10px !important; margin-top: 6px !important; }
  .eos-watch--cinema .eos-bible-layout-sheet { margin: 6px 12px 0 !important; }
  .eos-watch--cinema .eos-bible-result-wrap { min-height: 180px !important; }
}

/* ── v2.16.9 — LONG PASSAGES MUST SCROLL, NOT CLIP ─────────────────────
   Owner: Psalm 119 stopped mid-verse-9 with no way to reach the rest.

   MY OWN REGRESSION, from v2.16.3/v2.16.5. To make a SHORT passage fill the
   panel I gave the card and its body `flex: 1` inside the scrolling wrap. But
   `flex:1` + `min-height:0` on a flex CHILD does not mean "grow to your
   content" — it means "be exactly the size the container offers". So a LONG
   passage was forced down to the wrap's height and the overflow was clipped by
   the card, instead of making the wrap scroll.

   Correct shape for "fills when short, scrolls when long":
     .eos-bible-result-wrap   the ONLY scroller (flex:1, min-height:0, auto)
     #eos-bible-result        natural height (flex:none)
     .eos-bible-card          flex:none + min-height:100%  <- fills, then grows
     .eos-bible-card-body     flex:none, no cap, never clips
   min-height:100% is what keeps a 3-verse passage looking full while letting a
   176-verse psalm run past the fold. */
.eos-watch--cinema .eos-bible-result-wrap { flex: 1 1 auto !important; min-height: 180px !important; overflow-y: auto !important; }
.eos-watch--cinema #eos-bible-result { flex: none !important; min-height: 100% !important; display: block !important; }
.eos-watch--cinema #eos-bible-result > .eos-bible-card {
  flex: none !important;
  min-height: 100% !important;      /* fill a short passage … */
  height: auto !important;          /* … but never cap a long one */
  overflow: visible !important;     /* the wrap does the scrolling */
  display: flex !important; flex-direction: column !important;
}
.eos-watch--cinema #eos-bible-result > .eos-bible-card > .eos-bible-card-body {
  flex: none !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}