/* ── Reader Layout ─────────────────────────────────────── */

.reader {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
  position: relative;
  /* Entire reader area is tappable on mobile */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  background: var(--reader-bg);
}

/* ── Version Label (top-right) ────────────────────────── */

.reader__version {
  position: fixed;
  top: 8px;
  right: 12px;
  font-size: 0.6875rem;
  color: var(--fg-faint);
  z-index: 10;
}

/* ── Progress Bar (top edge) ──────────────────────────── */

.reader__progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.15s ease-out;
  z-index: 10;
}

/* ── Skip Indicator ───────────────────────────────────── */

.reader__skip-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 300;
  color: #808080;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
}

.reader__skip-indicator--visible {
  animation: skip-indicator-flash 250ms ease-in-out;
}

@keyframes skip-indicator-flash {
  0%   { opacity: 0; }
  50%  { opacity: 0.6; }
  100% { opacity: 0; }
}

/* ── Word Display ─────────────────────────────────────── */

.reader__word {
  font-size: var(--reader-font-size);
  font-weight: 650;
  letter-spacing: 0.5px;
  line-height: 1.2;
  min-height: 1.3em;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Keep every chunk on a single line. Without this, a multi-word chunk's
     before/after text can be wider than its 1fr column and wrap/stack
     (e.g. "The light shines" splitting into "The light" / "sh" / "ines"). */
  white-space: nowrap;
}

/* ── Verse Marker (superscript in word display) ────────── */

.reader__verse-marker {
  font-size: 0.45em;
  font-weight: 400;
  color: var(--fg-dim);
  vertical-align: super;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin-right: 0.15em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.reader__verse-marker--visible {
  opacity: 1;
}

.reader__word-before {
  text-align: right;
  /* min-width:0 keeps the two 1fr columns exactly equal so the ORP glyph
     stays pinned at screen center; overflowing text spills past the center
     line (left for before, right for after) instead of widening the column. */
  min-width: 0;
}

.reader__word-orp {
  text-align: center;
}

/* ORP accent color only when displaying a single ORP character */
.reader__word-orp--active {
  color: var(--orp-color);
}

/* ── Red-Letter (words of Jesus) ────────────────────────── */

.reader__word--red-letter {
  color: var(--red-letter);
}

.reader__word--red-letter .reader__word-orp--active {
  color: var(--orp-red-letter);
}

.reader__word-after {
  text-align: left;
  min-width: 0;
}

/* ── Chunk Size Indicator ────────────────────────────── */

.chunk-indicator {
  font-size: 0.6875rem;
  color: var(--fg-faint);
  min-width: 2ch;
}

.orp-indicator {
  font-size: 0.6875rem;
  color: var(--orp-color);
  min-width: 3ch;
}

/* ── Line Break Animation (poetry) ───────────────────── */

.reader__word--linebreak {
  animation: linebreak-pulse 0.3s ease-out;
}

@keyframes linebreak-pulse {
  0%   { opacity: 1; }
  40%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ── Context Strip (visible when paused) ─────────────── */

.reader__context {
  /* Positioned below the word without affecting its vertical centering */
  position: absolute;
  top: calc(50% + 6rem);
  left: 5vw;
  right: 5vw;
  max-width: 90vw;
  min-height: 1.6em;
  overflow: hidden;
  /* Fade at edges */
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.reader__context--visible {
  opacity: 1;
}

.reader__context-inner {
  white-space: nowrap;
  font-size: clamp(14px, 2.5vw, 20px);
  color: var(--fg-dim);
  line-height: 1.6;
}

.reader__context-word--current {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

.reader__context-word--red-letter {
  color: var(--red-letter);
  opacity: 0.7;
}

.reader__context-word--red-letter.reader__context-word--current {
  color: var(--red-letter);
  opacity: 1;
}

.reader__context-verse {
  font-size: 0.7em;
  color: var(--fg-faint);
  vertical-align: super;
  font-variant-numeric: tabular-nums;
  margin-right: 0.1em;
  user-select: none;
}

.reader__context-break {
  display: inline-block;
  width: 5em;
}

/* ── Status Bar (bottom) ──────────────────────────────── */

.reader__status {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  font-size: 0.8125rem;
  color: var(--fg-dim);
  background: var(--status-bg);
}

.reader__state {
  min-width: 60px;
  text-align: center;
}

/* ── WPM Controls ─────────────────────────────────────── */

.wpm-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wpm-control__btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 8px;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.wpm-control__btn:active {
  background: var(--border);
}

.wpm-control__value {
  min-width: 5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Keyboard Hints (desktop only) ────────────────────── */

.reader__hints {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  padding: 4px 16px;
  font-size: 0.6875rem;
  color: var(--fg-dim);
  text-align: center;
  line-height: 2;
}

/* On touch devices the hints are visually irrelevant (no keyboard in normal
   use), but stay in the accessibility tree — screen reader users may still
   navigate by keyboard regardless of pointer/hover capability. */
@media not (hover: hover) {
  .reader__hints {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

kbd {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

/* ── Speed Slider (mobile, right edge) ───────────────── */

.speed-slider {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 20;
  touch-action: none;
}

.speed-slider__label {
  font-size: 0.6875rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

.speed-slider__track-area {
  position: relative;
  width: 36px;
  height: 180px;
}

.speed-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 180px;
  height: 36px;
  background: transparent;
  touch-action: none;
  /* Rotate horizontal range into vertical; center in the 36×180 track area */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  margin: 0;
}

.speed-slider__ghost {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  opacity: 0.6;
  pointer-events: none;
  transition: bottom 0.15s ease-out;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.speed-slider__ghost--visible {
  display: block;
}

.speed-slider__input::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.speed-slider__input::-moz-range-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  border: none;
}

.speed-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  margin-top: -12px;
  cursor: pointer;
}

.speed-slider__input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
}

/* Speed slider removed — WPM controlled via status bar and settings */
.speed-slider {
  display: none;
}

/* Mobile adjustments: hide redundant WPM buttons */
@media (hover: none) {
  .wpm-control {
    display: none;
  }
}

/* ── Reading-Mode WPM (visible while playing) ────────── */

.reader__reading-wpm {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8125rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

body.reading .reader__reading-wpm {
  opacity: 1;
}

/* ── Reading Mode (hide chrome while playing) ────────── */

.reader__version,
.reader__progress,
.reader__status,
.reader__hints {
  transition: opacity 0.15s ease;
}

body.reading .reader__version,
body.reading .reader__progress,
body.reading .reader__status,
body.reading .reader__hints {
  opacity: 0;
  pointer-events: none;
}