/* Reader + mini player + sheet */
.reader-view { min-height: 100dvh; display: flex; flex-direction: column; }
.reader-topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + var(--space-2)) var(--space-3) var(--space-2);
  background: var(--bg); border-bottom: 3px double var(--gold-soft);
}
.reader-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; text-align: center; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reader-content {
  flex: 1; max-width: 38rem; margin: 0 auto; width: 100%;
  padding: var(--space-4) 20px calc(140px + env(safe-area-inset-bottom));
  font-family: var(--font-read); font-size: var(--reader-font-size, 18px); line-height: 1.7;
  color: var(--ink);
}
.reader-paragraph {
  margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color 200ms ease-out;
  background: transparent;
}
/* The only ornament touching the text: a gilt rule marking the paragraph being read aloud. */
.reader-paragraph[aria-current='true'] { background: var(--highlight); box-shadow: inset 2px 0 0 var(--gold); }
.reader-line { margin: 0 0 .5em; }
.reader-line:last-child { margin-bottom: 0; }
.reader-line--heading {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3em; line-height: 1.3; text-align: center;
  margin: .4em 0 .8em; text-wrap: balance;
}
.reader-edit-btn, .reader-play-btn { width: 32px; height: 32px; vertical-align: middle; }
/* Play-from-here is a tap on the text for pointer users; keyboard users get this button on focus. */
.reader-play-btn:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reader-paragraph-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); margin-bottom: 4px; font-family: var(--font-ui); }
.reader-paragraph--pending { color: var(--ink-muted); }
.reader-paragraph--failed .reader-paragraph-meta { color: var(--danger); }
.reader-retry-link { background: none; border: none; color: var(--danger); text-decoration: underline; font-size: 13px; cursor: pointer; padding: 0; }

.scroll-resume-btn {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 15;
  background: var(--ink); color: var(--bg); border: none; border-radius: 999px;
  padding: var(--space-2) var(--space-4); font-size: 14px;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--gold), var(--elevation-sheet);
  display: flex; align-items: center; gap: 6px;
}

.mini-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--surface-sunken); box-shadow: var(--elevation-sheet); border-top: 3px double var(--gold);
  padding: var(--space-2) var(--space-4);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
}
.mini-player-progress {
  --track: linear-gradient(to right, var(--primary) var(--fill, 0%), var(--gold-soft) var(--fill, 0%));
  --lozenge: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: block; width: 100%; height: 24px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
/* Gilt rule with a lozenge slider; the played part is inked in --primary. */
.mini-player-progress::-webkit-slider-runnable-track { height: 2px; background: var(--track); }
.mini-player-progress::-moz-range-track { height: 2px; background: var(--track); }
.mini-player-progress::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px;
  border: none; background: var(--primary); clip-path: var(--lozenge);
}
.mini-player-progress::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 0; background: var(--primary); clip-path: var(--lozenge); }
.mini-player-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.mini-player-times { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-muted); display: flex; justify-content: space-between; }
.mini-player-controls { display: flex; align-items: center; gap: 2px; }
.mini-player-play {
  width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  box-shadow: 0 0 0 2px var(--surface-sunken), 0 0 0 3.5px var(--gold);
}
.mini-player-meta { flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.mini-player-text { min-width: 0; display: block; }
.mini-player-book { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.3; padding-top: .1em; }
.mini-player-status { font-size: 12px; color: var(--ink-muted); display: flex; align-items: center; gap: 4px; }
/* 48px sleeve with a small record peeking out to its right. */
.mini-art { position: relative; width: 70px; height: 48px; flex: none; }
.mini-art .sleeve { position: absolute; width: 48px; left: 0; top: 0; z-index: 1; }
.mini-art .disc { position: absolute; width: 44px; left: 24px; top: 2px; }

.player-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25;
}
.player-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
  background: var(--surface); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; border-top: 3px double var(--gold);
  box-shadow: var(--elevation-sheet); padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  max-height: 85dvh; overflow-y: auto;
}
/* Sheet crest: a fleuron where the grab bar would be. */
.player-sheet-handle {
  width: 48px; height: 14px; margin: 0 auto var(--space-4); background: var(--gold);
  -webkit-mask: var(--fleuron-mask) center / contain no-repeat; mask: var(--fleuron-mask) center / contain no-repeat;
}
.player-sheet-section { margin-bottom: var(--space-6); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--gold-soft);
  background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14px; font-variant-numeric: tabular-nums;
  transition: background-color 150ms ease-out;
}
.chip:hover { background: var(--surface-sunken); }
.chip[aria-pressed='true'] {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary), inset 0 0 0 3px color-mix(in srgb, var(--gold) 75%, var(--primary));
}

.music-volume {
  display: block; width: 100%; height: 44px; margin-top: var(--space-3);
  accent-color: var(--primary); background: transparent; cursor: pointer;
}
.music-volume:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; border-radius: var(--radius-sm); }

.book-settings-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--gold-faint); }

.chunk-editor-text { font-family: var(--font-read); line-height: 1.6; padding: 12px; resize: vertical; }

/* Page picker sheet + page chip in the mini player (page-picker-sheet.js). */
.mini-page-btn {
  min-height: 24px; padding: 0 8px; border: 1px solid var(--gold-soft); border-radius: var(--radius-sm);
  background: none; color: var(--ink-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.page-pick-list { list-style: none; margin: 0; padding: 0; }
.page-pick-row {
  display: flex; align-items: baseline; gap: var(--space-3); width: 100%; min-height: 48px; padding: 10px var(--space-2);
  border: none; border-bottom: 1px solid var(--gold-soft); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.page-pick-row:hover:not(:disabled) { background: var(--surface-sunken); }
.page-pick-row[aria-current='true'] { background: var(--surface-sunken); box-shadow: inset 3px 0 0 var(--primary); }
.page-pick-row:disabled { color: var(--ink-muted); cursor: default; }
.page-pick-num { flex: none; min-width: 5.5em; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-pick-excerpt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.page-pick-row:disabled .page-pick-excerpt { font-style: italic; }