.reader {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-md);
  padding-bottom: calc(var(--bottom-nav-height) + var(--space-md) + env(safe-area-inset-bottom, 0px));
}

.reader__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Playback panel */

.reader__playback {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
}

[data-app-state="ready"] .reader__playback,
[data-app-state="playing"] .reader__playback,
[data-app-state="paused"] .reader__playback {
  display: flex;
}

/* Session card */

.reader__session-card {
  gap: var(--space-xs);
  padding: var(--space-md);
}

.reader__session-label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.reader__chapter {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

.reader__status {
  display: none;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

[data-app-state="ready"] .reader__status--ready,
[data-app-state="playing"] .reader__status--playing,
[data-app-state="paused"] .reader__status--paused {
  display: block;
}

/* Playback controls — ~30% smaller */

.reader__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.reader__btn-play,
.reader__btn-pause,
.reader__btn-restart {
  display: none;
}

[data-app-state="ready"] .reader__btn-play,
[data-app-state="paused"] .reader__btn-play {
  display: inline-flex;
}

[data-app-state="playing"] .reader__btn-pause,
[data-app-state="playing"] .reader__btn-restart,
[data-app-state="paused"] .reader__btn-restart {
  display: inline-flex;
}

.reader__btn-restart {
  min-width: 44px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.reader__btn-main {
  width: 45px;
  min-width: 45px;
  height: 45px;
}

.reader__btn-skip {
  min-width: 44px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.reader__btn-main:active,
.reader__btn-skip:active,
.reader__btn-restart:active {
  transform: scale(0.96);
}

/* Progress */

.reader__progress {
  padding: var(--space-md);
  gap: var(--space-sm);
}

.reader__progress .nr-listening-progress__value {
  font-size: var(--font-size-lg);
}

.reader__pct {
  display: none;
}

[data-app-state="ready"] .reader__pct--ready,
[data-app-state="playing"] .reader__pct--playing,
[data-app-state="paused"] .reader__pct--paused {
  display: inline;
}

.reader__progress-fill {
  width: var(--reader-progress, 0%);
}

.reader__time {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Reader actions */

.reader__actions {
  display: none;
  margin-top: calc(var(--space-xs) * -1);
}

[data-app-state="ready"] .reader__actions,
[data-app-state="playing"] .reader__actions,
[data-app-state="paused"] .reader__actions {
  display: flex;
}

/* State panel — one card at a time */

.reader__state-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
}

[data-app-state="loading"] .reader__state-panel,
[data-app-state="completed"] .reader__state-panel,
[data-app-state="error"] .reader__state-panel {
  display: flex;
}

.reader__state-message {
  display: none;
}

[data-app-state="loading"][data-reader-step="preparing"] .reader__state-message--preparing,
[data-app-state="loading"][data-reader-step="loading"] .reader__state-message--loading,
[data-app-state="completed"] .reader__state-message--completed,
[data-app-state="error"] .reader__state-message--error {
  display: flex;
}

.reader__state-panel .reader__btn-home {
  display: none;
}

[data-app-state="completed"] .reader__state-panel .reader__btn-home,
[data-app-state="error"] .reader__state-panel .reader__btn-home {
  display: inline-flex;
}

.reader__btn-retry {
  display: none;
}

[data-app-state="error"] .reader__btn-retry {
  display: inline-flex;
}

body.nr-page-enter-reader .reader__playback {
  animation: nr-state-enter 0.35s ease 0.05s both;
}

@media (prefers-reduced-motion: reduce) {
  body.nr-page-enter-reader .reader__playback {
    animation: none;
  }
}