:root {
  --ink: #071d26;
  --navy: #073044;
  --teal: #0f6370;
  --teal-dark: #06404d;
  --teal-soft: #d9eff0;
  --teal-wash: #eefafa;
  --paper: #fbfaf5;
  --line: #b8d5d5;
  --shadow: 0 10px 22px rgba(6, 40, 49, 0.18);
  --soft-shadow: 0 5px 12px rgba(6, 40, 49, 0.16);
  --danger: #b3261e;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

/* Any rule elsewhere that sets `display` on an element (author CSS beats the
   browser's default [hidden] { display: none } UA rule regardless of
   selector specificity, since UA styles are the lowest-priority origin)
   would otherwise make the hidden attribute silently stop working. */
[hidden] {
  display: none !important;
}

html {
  background: #f5f5f2;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(8, 74, 83, 0.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.brand {
  display: block;
  flex: 0 0 auto;
  width: 290px;
  max-width: 42vw;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}

.primary-nav a {
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  text-decoration: none;
  white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav .active {
  background: #d6eeee;
  outline: none;
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem;
}

.mission-statement {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 252, 0.96);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem;
  text-align: center;
}

.mission-statement h1 {
  margin: 0 0 0.6rem;
  color: #060a0d;
  font-size: 1.85rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.mission-statement p {
  max-width: 720px;
  margin: 0 auto;
  color: #153039;
  font-size: 1.05rem;
  line-height: 1.5;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 252, 0.98), rgba(232, 247, 246, 0.96));
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.35rem;
}

.panel h2 {
  margin: 0 0 1rem;
  color: #060a0d;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.panel-summary {
  cursor: pointer;
  list-style: none;
}

.panel-summary::-webkit-details-marker {
  display: none;
}

.panel-summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1.1rem;
  color: var(--teal-dark);
  transition: transform 0.15s ease;
}

details[open] > .panel-summary::before {
  transform: rotate(90deg);
}

.panel-summary h2 {
  display: inline;
}

details.panel:not([open]) h2 {
  margin-bottom: 0;
}

/* Access gate */

.gate-panel {
  max-width: 560px;
  margin: 2.5rem auto;
  text-align: center;
}

.gate-panel p {
  color: #153039;
  line-height: 1.5;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.25rem;
  text-align: left;
}

.gate-form label {
  font-weight: 700;
  font-size: 0.95rem;
}

.gate-form input[type="url"] {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
}

.gate-divider {
  margin: 1.1rem 0;
  color: var(--ink);
  opacity: 0.55;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gate-alt-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.gate-alt-actions .btn {
  flex: 1 1 0;
}

.gate-error {
  margin-top: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(179, 38, 30, 0.35);
  border-radius: 8px;
  background: rgba(179, 38, 30, 0.08);
  color: var(--danger);
  text-align: left;
  font-size: 0.95rem;
}

.gate-status {
  margin-top: 0.9rem;
  color: var(--teal-dark);
  font-weight: 700;
}

.offline-usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.offline-usage-row:last-of-type {
  border-bottom: none;
}

.offline-status {
  margin: 0.75rem 0 0;
  color: var(--teal-dark);
  font-weight: 700;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.2rem;
  background: var(--teal-dark);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover,
.btn:focus-visible {
  background: var(--navy);
  outline: 3px solid rgba(15, 99, 112, 0.28);
  outline-offset: 2px;
}

.btn.secondary {
  background: transparent;
  color: var(--teal-dark);
  border: 1px solid var(--teal-dark);
}

.btn.secondary:hover,
.btn.secondary:focus-visible {
  background: var(--teal-wash);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Selection tree */

.selection-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.book-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.book-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.book-group summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--teal-wash);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.book-group summary::-webkit-details-marker {
  display: none;
}

.book-group summary::before {
  content: "\25B8";
  display: inline-block;
  transition: transform 0.15s ease;
}

.book-group[open] summary::before {
  transform: rotate(90deg);
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem 0.9rem;
}

.chapter-item {
  border-radius: 6px;
}

.chapter-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.95rem;
}

.chapter-check:hover {
  background: rgba(15, 99, 112, 0.08);
}

.chapter-history {
  display: inline-block;
  margin: -0.15rem 0 0.15rem 2.55rem; /* aligns under the label text, past the checkbox */
  font-size: 0.78rem;
  color: var(--teal-dark);
  opacity: 0.65;
}

.btn.tiny {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 6px;
}

.verse-picker {
  margin: 0.15rem 0 0.3rem 1.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 99, 112, 0.03);
}

.verse-picker.is-disabled {
  opacity: 0.55;
}

.verse-picker summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal-dark);
  list-style: none;
}

.verse-picker summary::-webkit-details-marker {
  display: none;
}

.verse-picker summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.15s ease;
}

.verse-picker[open] summary::before {
  transform: rotate(90deg);
}

.verse-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.verse-range-input {
  width: 3.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 0.85rem;
}

.verse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.25rem;
}

.verse-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.85rem;
}

.verse-check:hover {
  background: rgba(15, 99, 112, 0.08);
}

.selection-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--teal-dark);
  font-weight: 700;
}

/* Study setup + karaoke */

.style-select-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.style-select-row select,
.style-select-row input[type="number"],
.style-select-row input[type="text"] {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
}

.style-select-row input[type="number"] {
  width: 5rem;
}

.style-select-row input[type="text"] {
  flex: 1 1 16rem;
  min-width: 0;
}

/* Church-fit indicator for the main style <select> -- the full "<emoji>
   <phrase>" text used to live directly in each <option>, but that made
   the closed dropdown render far too wide on mobile (it sizes to its
   longest option). Now it's just this one small badge next to the select,
   showing the *currently selected* style's emoji -- the full phrase is a
   hover title and an aria-label (title attributes are announced
   inconsistently by screen readers, so this is the reliable copy) *and* a
   click-to-toggle popover (.style-fit-tooltip) for touch devices, which
   can't hover at all. */
.style-fit-badge-wrap {
  position: relative;
  display: inline-flex;
}

.style-fit-badge {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.style-fit-badge:empty,
.style-fit-badge[hidden] {
  display: none;
}

.style-fit-badge:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}

.style-fit-tooltip {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.4rem);
  left: 0;
  width: max-content;
  max-width: 16rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  box-shadow: var(--soft-shadow);
}

.style-fit-tooltip[hidden] {
  display: none;
}

/* Karaoke Mode options (redesigned study/masking UI) */

.karaoke-mode-heading {
  margin: 0.25rem 0 0.85rem;
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.karaoke-mode-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.hint-slider-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.hint-slider-endlabel {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--teal-dark);
  white-space: nowrap;
}

.hint-slider-row input[type="range"] {
  flex: 1 1 12rem;
  min-width: 8rem;
  accent-color: var(--teal);
}

.hint-slider-row input[type="number"] {
  width: 4.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
}

/* Karaoke Controls panel (AI_TODO.md item 4): pitch/speed/count-in/reverb
   sliders reuse .hint-slider-row -- just the value readout next to each is
   new. */

.control-value-label {
  min-width: 3.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--teal-dark);
  text-align: right;
}

.ab-loop-hint {
  margin: 0 0 0.75rem;
  color: var(--teal-dark);
  font-size: 0.9rem;
}

.ab-loop-picker {
  margin-bottom: 0.75rem;
}

/* Verse/whole-chapter loop buttons (karaoke-controls-panel.js) -- the
   primary way to set an A/B loop, one click per verse rather than dragging
   a word-by-word range. */
.loop-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.loop-scope-btn.active,
.loop-scope-btn.active:hover,
.loop-scope-btn.active:focus-visible {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal-dark);
}

/* The "Whole Chapter" button stands apart from the individual verse
   buttons that follow it -- a visual break, not just another verse. */
.loop-scope-chapter {
  font-weight: 800;
  margin-right: 0.3rem;
}

/* Playlist sharing (AI_TODO.md item 5) */

dialog#shareDialog {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  max-width: min(28rem, 92vw);
}

dialog#shareDialog::backdrop {
  background: rgba(6, 40, 49, 0.45);
}

dialog#shareDialog h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.share-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.share-qr {
  align-self: center;
  width: 100%;
  max-width: 14rem;
}

.share-qr svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  /* QR codes are inherently black-on-white, functional graphics, not a
     themed UI element -- a white backing keeps them scannable/high-contrast
     even in dark mode, where the page background is otherwise very dark. */
  background: #fff;
  padding: 0.5rem;
}

.fallback-note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(179, 38, 30, 0.3);
  border-radius: 8px;
  background: rgba(179, 38, 30, 0.06);
  color: var(--danger);
  font-size: 0.9rem;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding: 1rem 0.5rem;
  border-top: 1px solid var(--line);
  /* Always reachable regardless of how tall the passage above it is --
     otherwise on a long chapter the transport (including Pause) can end up
     scrolled off the bottom of the screen with no way back to it. */
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--teal-wash);
  box-shadow: 0 -8px 18px rgba(6, 40, 49, 0.15);
}

.player-status {
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 0.95rem;
}

.karaoke-view {
  padding-top: 0.25rem;
  /* Reserves room so the tail of a long passage can scroll fully above the
     sticky controls bar instead of ending up rendered underneath it (a
     sticky/fixed bar overlaps whatever content shares its screen position
     while it's "stuck" -- padding here keeps real content out of that
     strip entirely). 8rem (not the original 5.5rem) to also clear
     .karaoke-line-nav, which sits below the karaoke-window and wasn't
     accounted for when 5.5rem was tuned -- verified against a real
     browser render, not just guessed (see AI_TODO.md item 1). */
  padding-bottom: 8rem;
}

.karaoke-heading {
  margin: 0 0 1.25rem;
  color: var(--teal-dark);
  font-weight: 800;
  font-size: calc(1.3rem * var(--karaoke-font-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.karaoke-stream {
  font-size: calc(1.4rem * var(--karaoke-font-scale, 1));
  line-height: 2.1;
}

/* Windowed karaoke display only (word-stream.js) -- exactly one
   .karaoke-line-group (current line + a dimmed preview of the next) is
   ever present, swapped for a new group as playback (or manual line
   navigation) advances. Fixed-height + overflow hidden is what clips the
   outgoing group's slide-up-and-fade exit -- scoped to this small 2-line
   box via its own .karaoke-window class (not the bare .karaoke-stream,
   which type-ahead.js also reuses for its own unrelated, non-windowed,
   naturally-growing display -- clipping that would be a real regression). */
.karaoke-window {
  position: relative;
  overflow: hidden;
  min-height: calc(2 * 1.4rem * var(--karaoke-font-scale, 1) * 2.1 + 0.9rem);
}

.karaoke-line-group {
  position: absolute;
  inset: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.karaoke-line-group.leaving {
  transform: translateY(-100%);
  opacity: 0;
}

/* .karaoke-verse: type-ahead.js's own independent, non-windowed verse
   rendering (it doesn't go through word-stream.js -- see AI_TODO.md item 3
   for why) still uses this class name; kept alongside .karaoke-line rather
   than renamed. */
.karaoke-verse,
.karaoke-line {
  margin: 0 0 0.9rem;
}

.karaoke-line.next-line {
  opacity: 0.5;
}

/* Sleep Mode's typing display (AI_TODO.md item 3): mirror of .next-line --
   the just-finished line dimmed, sitting above the current (full-opacity)
   line being typed, instead of a preview of what's coming up next. */
.karaoke-line.previous-line {
  opacity: 0.5;
}

/* Typing mode (word-stream.js's `typing` option): every word is built from
   individually-toggled letter spans, opacity-hidden until "shown" -- see
   createPassageView's doc comment for why the whole word is in the DOM
   (and thus already taking up its final width) from the start. */
.karaoke-word.typing-word .letter {
  opacity: 0;
  transition: opacity 0.1s linear;
}

.karaoke-word.typing-word .letter.shown {
  opacity: 1;
}

/* .sung's per-word dim (below) is what the non-typing modes use to mark
   already-sung words within the *visible* line -- typing mode dims the
   whole previous line instead (.previous-line above), so a sung word inside
   the still-visible current line should stay full opacity/color, not dim
   twice. */
.karaoke-word.typing-word.sung {
  color: inherit;
  opacity: 1;
}

.karaoke-line-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.verse-num {
  margin-right: 0.35rem;
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 0.72em;
  user-select: none;
}

.karaoke-word {
  display: inline-block;
  padding: 0.05rem 0.2rem;
  border-radius: 5px;
  transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.karaoke-word.clickable {
  cursor: pointer;
}

.karaoke-word.clickable:hover {
  background: rgba(15, 99, 112, 0.14);
}

.karaoke-word.clickable:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.karaoke-word.genre-colored {
  background: color-mix(in srgb, var(--word-color) 20%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--word-color) 65%, transparent);
}

.karaoke-word.genre-colored.active {
  background: var(--word-color);
}

.karaoke-word.filler {
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.65;
}

.karaoke-word.sung {
  color: #6f8a8a;
  opacity: 0.7;
}

.karaoke-word.active {
  background: var(--teal);
  color: #fff;
  font-weight: 800;
}

.karaoke-word.blanked {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: transparent;
  text-shadow: 0 0 0 var(--teal-dark);
  opacity: 0.55;
  border-radius: 4px;
}

.karaoke-word.hit {
  background: color-mix(in srgb, #1f8a4c 25%, transparent);
  border-radius: 4px;
}

.singalong-score {
  margin: 0.9rem 0 0.4rem;
  font-weight: 800;
  color: var(--teal-dark);
  font-size: 1.1rem;
}

.singalong-status {
  margin: 0.3rem 0 0;
  color: var(--teal-dark);
  font-size: 0.9rem;
  min-height: 1.2em;
}

.typeahead-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.typeahead-form input[type="text"] {
  flex: 1 1 200px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 1.05rem;
}

.typeahead-feedback {
  font-weight: 700;
  color: var(--teal-dark);
  min-width: 6rem;
}

.typeahead-feedback.error {
  color: var(--danger);
}

/* "Name that Passage" (AI_TODO.md item 6) */
.ntp-passage-wrap {
  transition: opacity 0.3s ease;
}

.ntp-guess-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

.ntp-guess-input {
  flex: 1 1 200px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 1.05rem;
}

.ntp-feedback {
  font-weight: 700;
}

.ntp-feedback.ntp-correct {
  color: #1f8a4c;
}

.ntp-feedback.ntp-incorrect {
  color: var(--danger);
}

/* Genre mix editor */

.mix-editor {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.style-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.style-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: color-mix(in srgb, var(--swatch-color) 16%, transparent);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.style-swatch::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--swatch-color);
  flex: 0 0 auto;
}

.style-swatch.active {
  border-color: var(--swatch-color);
  background: color-mix(in srgb, var(--swatch-color) 30%, transparent);
}

/* Church-appropriateness badge (AI_TODO.md item 7) -- pushed to the pill's
   trailing edge, decorative (the full description is the button's title
   tooltip, and screen readers get it from there, not this span). */
.style-swatch-fit {
  margin-left: auto;
  padding-left: 0.3rem;
}

.mix-history-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.mix-editor-hint {
  margin: 0 0 1rem;
  color: var(--teal-dark);
  font-size: 0.9rem;
}

.mix-sections {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.mix-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.mix-section-heading {
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: var(--teal-wash);
  color: var(--teal-dark);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.mix-section-heading::-webkit-details-marker {
  display: none;
}

.mix-section-heading::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}

.mix-section[open] > .mix-section-heading::before {
  transform: rotate(90deg);
}

.mix-take-preview {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.mix-take-preview:empty {
  display: none;
}

.mix-take-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mix-take-preview-label {
  font-weight: 700;
  color: var(--teal-dark);
}

.word-strip {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  touch-action: none;
  user-select: none;
}

.mix-verse-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.mix-verse-line .verse-num {
  margin-right: 0.15rem;
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 0.8em;
  user-select: none;
}

.word-chip {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--chip-color) 22%, #fff);
  border: 1px solid color-mix(in srgb, var(--chip-color) 55%, transparent);
  cursor: pointer;
  font-size: 0.95rem;
  touch-action: none;
}

.word-chip.selecting {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* A word painted with a non-first take (AI_TODO.md item 1) -- a dashed
   border distinguishes it from a same-colored first-take chip at a glance,
   on top of the full "Style — Take N" text already in its title tooltip. */
.word-chip.word-chip-alt-take {
  border-style: dashed;
}

/* Sleep mode -- a deliberate, fixed night skin that does NOT follow the
   site's light/dark theme (see plan: a Pathfinder using this at night wants
   a dim, warm palette regardless of system theme). */

body.sleep-mode-active {
  overflow: hidden;
}

.sleep-overlay {
  --sleep-pad-x: clamp(1rem, 4vw, 3rem);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0;
  overflow-y: auto;
  background: #05070a;
  color: #e8d9b0;
}

.sleep-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-weight: 700;
  padding: 1rem var(--sleep-pad-x);
  /* Reachable no matter how far the Pathfinder scrolls into the passage. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: #05070a;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.sleep-timer-select {
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #4a3f2a;
  background: #14100a;
  color: #e8d9b0;
  font-size: 0.95rem;
}

.sleep-shuffle-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.sleep-volume-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.sleep-volume-control input[type="range"] {
  width: 5rem;
  accent-color: #e8d9b0;
}

.sleep-overlay .btn.secondary {
  border-color: #6b5a35;
  color: #e8d9b0;
  background: transparent;
}

.sleep-overlay .btn.secondary:hover,
.sleep-overlay .btn.secondary:focus-visible {
  background: rgba(232, 217, 176, 0.1);
  outline: none;
}

.sleep-overlay .karaoke-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem var(--sleep-pad-x) 6rem;
}

.sleep-overlay .karaoke-heading {
  color: #a68a4a;
  text-align: center;
  font-size: calc(1.05rem * var(--karaoke-font-scale, 1));
}

.sleep-overlay .karaoke-stream {
  font-size: calc(clamp(1.4rem, 3vw, 2.1rem) * var(--karaoke-font-scale, 1));
  line-height: 2.3;
  text-align: center;
  max-height: none;
  overflow: visible;
}

.sleep-overlay .karaoke-word {
  color: #d8c48a;
}

.sleep-overlay .karaoke-word.filler {
  opacity: 0.45;
}

.sleep-overlay .karaoke-word.sung {
  color: #5a4f38;
  opacity: 0.75;
}

.sleep-overlay .karaoke-word.typing-word.sung {
  color: inherit;
  opacity: 1;
}

.sleep-overlay .karaoke-word.active {
  background: #4a3418;
  color: #ffe9b0;
  font-weight: 800;
}

.sleep-overlay .verse-num {
  color: #a68a4a;
}

.sleep-overlay .karaoke-word.genre-colored {
  background: color-mix(in srgb, var(--word-color) 22%, #05070a);
  border-bottom-color: color-mix(in srgb, var(--word-color) 55%, transparent);
}

.sleep-overlay .karaoke-word.genre-colored.active {
  background: #4a3418;
}

.sleep-overlay .player-controls {
  justify-content: center;
  border-top: 1px solid #3a3122;
  padding-left: var(--sleep-pad-x);
  padding-right: var(--sleep-pad-x);
  background: #05070a;
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.35);
}

.sleep-overlay .player-controls .btn:not(.secondary) {
  background: #3a2c14;
  color: #ffe9b0;
}

.sleep-overlay .player-controls .btn:not(.secondary):hover {
  background: #4a3a1c;
}

.sleep-overlay .player-status {
  color: #b89b5e;
}

.site-footer {
  max-width: 1080px;
  margin: 1.3rem auto 0;
  padding: 1.1rem 1.5rem 2rem;
  border-top: 1px solid #d7dddd;
  text-align: center;
  color: #1f343b;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-bottom: 0.8rem;
}

.site-footer p {
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #a0d8ef;
    --navy: #2e7f91;
    --teal: #63c7cf;
    --teal-dark: #3ca8b2;
    --teal-soft: #0f2b34;
    --teal-wash: #0b2129;
    --paper: #091117;
    --line: #294a53;
    --shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
    --soft-shadow: 0 8px 18px rgba(0, 0, 0, 0.36);
    --danger: #ff8a80;
  }

  html {
    background: #060c10;
  }

  body {
    background: linear-gradient(180deg, #0a1319 0%, #091117 100%);
  }

  .site-header {
    background: rgba(7, 16, 22, 0.94);
    border-bottom: 1px solid rgba(99, 199, 207, 0.2);
  }

  .primary-nav a:hover,
  .primary-nav a:focus-visible,
  .primary-nav .active {
    background: #17343e;
  }

  .mission-statement,
  .panel {
    border: 1px solid var(--line);
    background: rgba(9, 23, 30, 0.94);
  }

  .mission-statement h1,
  .panel h2 {
    color: #a0d8ef;
  }

  .mission-statement p,
  .gate-panel p {
    color: #a0d8ef;
  }

  .gate-form input[type="url"] {
    background: #0d1f28;
    color: var(--ink);
    border-color: var(--line);
  }

  .gate-error {
    background: rgba(255, 138, 128, 0.12);
    border-color: rgba(255, 138, 128, 0.4);
  }

  .chapter-check:hover,
  .verse-check:hover {
    background: rgba(99, 199, 207, 0.1);
  }

  .verse-picker {
    background: rgba(99, 199, 207, 0.06);
  }

  .verse-range-input {
    background: #0d1f28;
    color: var(--ink);
    border-color: var(--line);
  }

  .style-select-row select,
  .style-select-row input[type="number"] {
    background: #0d1f28;
    color: var(--ink);
    border-color: var(--line);
  }

  .fallback-note {
    background: rgba(255, 138, 128, 0.12);
    border-color: rgba(255, 138, 128, 0.4);
  }

  .player-controls {
    border-top: 1px solid var(--line);
  }

  .karaoke-word.sung {
    color: #4c6b6b;
  }

  .karaoke-word.clickable:hover {
    background: rgba(99, 199, 207, 0.16);
  }

  .karaoke-word.blanked {
    text-shadow: 0 0 0 var(--teal);
  }

  .typeahead-form {
    border-top: 1px solid var(--line);
  }

  .typeahead-form input[type="text"] {
    background: #0d1f28;
    color: var(--ink);
    border-color: var(--line);
  }

  .mix-editor {
    border-top: 1px solid var(--line);
  }

  .style-swatch {
    color: var(--ink);
  }

  .mix-section {
    border-color: var(--line);
  }

  .mix-section-heading {
    background: var(--teal-wash);
  }

  .word-strip {
    background: #0d1f28;
    border-color: var(--line);
  }

  .word-chip {
    background: color-mix(in srgb, var(--chip-color) 30%, #0d1f28);
    color: var(--ink);
  }

  .word-chip.selecting {
    outline-color: var(--ink);
  }

  .site-footer {
    color: #a0d8ef;
    border-top: 1px solid #29454e;
  }

  .btn:hover,
  .btn:focus-visible {
    outline: 3px solid rgba(99, 199, 207, 0.32);
  }
}

@media (max-width: 940px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .brand {
    width: 260px;
    max-width: 78vw;
  }

  .primary-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .header-inner {
    padding: 0.85rem 1rem;
  }

  .gate-alt-actions {
    flex-direction: column;
  }

  .primary-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 0.93rem;
  }

  main {
    padding: 1rem;
  }

  .panel,
  .mission-statement {
    padding: 1.15rem;
  }

  .verse-picker {
    margin-left: 0.5rem;
  }

  .verse-grid {
    grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr));
  }
}