/* Kids Singing Bible — Listen / Watch (Ron 2026-10-27; from the approved mockup). Kids-site only; added by rebrand.py.
   Same pieces and palette as the Kids site: blue primary, purple accent, Nunito. */

/* the mode switch: one pill, two halves, under the logo */
.mode {
  display: flex; justify-content: center; margin: 2px auto 10px;
}
.mode__pill {
  display: inline-flex; padding: 4px; border-radius: 999px; background: #EEF5FD; border: 1px solid #D6E7F9; gap: 4px;
  box-shadow: 0 1px 2px rgba(27, 60, 140, .06);
}
.mode__btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  font: 700 16px/1 var(--font-body); color: #1B3C8C; background: transparent; padding: 10px 22px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.mode__btn svg { width: 20px; height: 20px; }
.mode__btn[aria-selected="true"] { background: #2E9BE6; color: #fff; box-shadow: 0 2px 6px rgba(46, 155, 230, .35); }
.mode__new {
  position: absolute; top: -9px; right: -6px; font: 800 10px/1 var(--font-body); letter-spacing: .06em; color: #fff;
  background: #7B3FA0; padding: 4px 6px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.mode__btn[aria-selected="true"] .mode__new { display: none; }

/* the video stage: 16:9, rounded, under the chapter title; only in Watch mode */
.watch { display: none; position: relative; width: 100%; max-width: 760px; margin: 6px auto 8px; border-radius: 16px; overflow: hidden;
  background: #0B2E6B; box-shadow: 0 8px 24px rgba(27, 60, 140, .22); aspect-ratio: 16 / 9; }
.watch video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0B2E6B; }
/* full screen: the WHOLE picture always shows (logo, title, labels) — dark bars if the screen isn't 16:9 (Ron 10/27) */
.watch:fullscreen, .watch:-webkit-full-screen { max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; background: #000; box-shadow: none; }
.watch:fullscreen video, .watch:-webkit-full-screen video { background: #000; }
.watch:fullscreen .watch__full, .watch:-webkit-full-screen .watch__full { opacity: .35; }
.watch:fullscreen .watch__full:hover, .watch:-webkit-full-screen .watch__full:hover { opacity: 1; }
.watch__full {
  position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  font: 700 13px/1 var(--font-body); color: #1B3C8C; background: rgba(255, 255, 255, .92); padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.watch__full svg { width: 16px; height: 16px; }
body.is-watch .watch { display: block; }
body.is-watch #btnViewText, body.is-watch #textPanel { display: none !important; }   /* the words are in the video */

@media (max-width: 600px) { .watch__full span { display: none; } .watch__full { padding: 7px; right: 8px; top: 8px; background: rgba(255,255,255,.75); } }

/* full-screen control bar (Ron 10/27) — inside the stage, so it shows in full screen; hidden otherwise */
.wctl { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 22px 18px; display: none; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65)); color: #fff; font-family: var(--font-body); opacity: 0; transition: opacity .25s; }
.watch.is-fs .wctl { display: flex; }
.watch.is-fs.ctl-on .wctl { opacity: 1; }
.watch.is-fs:not(.ctl-on) { cursor: none; }
.watch.is-fs .watch__full { display: none; }
.wctl__seek { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); cursor: pointer; }
.wctl__seek::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.wctl__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: #2E9BE6; }
.wctl__knob { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.wctl__row { display: flex; align-items: center; gap: 14px; }
.wctl__gap { flex: 1; }
.wctl__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.14);
  width: 48px; height: 48px; border-radius: 50%; }
.wctl__btn svg { width: 26px; height: 26px; }
.wctl__btn--main { width: 60px; height: 60px; background: #2E9BE6; }
.wctl__btn--main svg { width: 30px; height: 30px; }
.wctl__btn--text { width: auto; padding: 0 16px; border-radius: 999px; font: 800 16px/1 var(--font-body); }
.wctl__btn--text svg { width: 20px; height: 20px; }
.wctl__time { font: 700 16px/1 var(--font-body); letter-spacing: .02em; opacity: .9; }
.wctl .i-pause { display: none; }
.watch.is-playing .wctl .i-play { display: none; }
.watch.is-playing .wctl .i-pause { display: block; }

/* a rendition with no video (not English) */
.watch__msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
  font: 700 17px/1.4 var(--font-body); color: #fff; background: #0B2E6B; }
.watch__msg[hidden], .watch video[hidden] { display: none; }