/* ============================================================
   SI 658 W27 — Reading (#/read/*) and listening (#/listen/*) pages
   Loaded after app.css; everything specific to js/views/listen.js lives here.
   ============================================================ */

/* ---------- Page head: way back to the module ---------- */
.rd-back { margin: 0 0 10px; }
.rd-back a {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-weight: 700; font-size: .95rem; color: var(--blue);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.rd-back a:hover { text-decoration-thickness: 3px; text-decoration-color: var(--maize); }
.rd-kicker { color: var(--blue-secondary); }
.rd-cite { margin-top: 14px; max-width: 70ch; font-size: .95rem; color: var(--blue-secondary); }
.rd-cite-k { font-family: var(--mono); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-right: .5em; }

/* External links in these views announce "(opens in new tab)" as text;
   keep the ↗ as decoration only (alt text "" where supported). */
.rd a[target="_blank"]::after {
  content: "\00a0\2197";
  content: "\00a0\2197" / "";
}

/* ---------- Actions row (always visible) ---------- */
.rd-actions {
  margin-top: 28px; max-width: 820px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; padding: 9px 16px;
  font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.25; text-align: center;
  background: var(--white); color: var(--blue); border: 2px solid var(--blue); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
}
main a.rd-btn, main a.rd-btn:visited { color: var(--blue); }
.rd-btn:first-child, main a.rd-btn:first-child { background: var(--blue); color: var(--white); }
.rd-btn:hover, main a.rd-btn:hover { background: var(--blue-deep); color: var(--white); border-color: var(--blue-deep); }
.rd-btn-quiet { border-width: 1px; }
.rd-btn-toggle[aria-pressed="true"] { background: var(--maize); border-color: var(--blue); color: var(--blue); }
.rd-btn-toggle[aria-pressed="true"]::before { content: "\2713"; content: "\2713" / ""; font-weight: 800; }
.rd-btn-toggle[aria-pressed="true"]:hover { background: var(--white); color: var(--blue); border-color: var(--blue); }
.rd-hint { margin-top: 10px; max-width: 70ch; font-size: .92rem; color: var(--blue-secondary); }
.rd-status {
  margin-top: 16px; max-width: 820px;
  font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--blue-secondary);
}
.rd-fallback { padding: 24px; background: var(--white); border: 1px solid var(--line); }

/* ---------- Pages: flow in the normal page scroll ---------- */
.rd-pages { margin-top: 18px; max-width: 820px; }
.rd-page + .rd-page { margin-top: 28px; }
main .rd-page-no {
  margin: 0 0 8px;
  font-family: var(--mono); font-size: .8rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-secondary);
}
.rd-sheet {
  position: relative; width: 100%; aspect-ratio: 8.5 / 11;
  background: var(--white); border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 39, 76, .08);
}
.rd-sheet canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* pdf.js 4.10 text layer (from pdf_viewer.css): transparent text over the canvas,
   positioned in PDF units × --scale-factor, so it stays aligned at any width */
.rd .textLayer {
  position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1;
  line-height: 1; -webkit-text-size-adjust: none; text-size-adjust: none;
  forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
}
.rd .textLayer span, .rd .textLayer br {
  color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%;
}
.rd .textLayer > :not(.markedContent),
.rd .textLayer .markedContent span:not(.markedContent) { z-index: 1; }
.rd .textLayer span.markedContent { top: 0; height: 0; }
.rd .textLayer ::selection { background: rgba(0, 39, 76, .28); }
.rd .textLayer br::selection { background: transparent; }
.rd .textLayer .endOfContent {
  display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none;
}
.hiddenCanvasElement { position: absolute; top: 0; left: 0; width: 0; height: 0; display: none; }
@media (forced-colors: active) {
  .rd .textLayer ::selection { background: Highlight; }
}

/* ---------- Text only view: reflowed, zoomable to 400% ---------- */
.rd-flow { display: none; }
.rd-read.is-text .rd-sheet { display: none; }
.rd-read.is-text .rd-flow {
  display: block; background: var(--white); border: 1px solid var(--line);
  padding: clamp(16px, 4vw, 36px);
}
.rd-flow p {
  max-width: 68ch; font-size: 1.08rem; line-height: 1.7; color: var(--blue);
  overflow-wrap: anywhere;
}
.rd-flow p + p { margin-top: 1em; }
.rd-flow :is(h3, blockquote) { margin: 1.25em 0 0; }
.rd-flow h3 { font-size: 1.15em; font-weight: 800; line-height: 1.3; color: var(--blue); }
.rd-flow h3 + p, .rd-flow blockquote + p, .rd-flow p + blockquote { margin-top: 1em; }
.rd-flow blockquote { padding-left: 1rem; border-left: 4px solid var(--maize); font-size: .97em; }
/* a book's marginal notes (readtext.py "textAside"): after the page's text, set smaller, with a hairline */
.rd-flow aside { max-width: 68ch; margin: 1.25em 0 0; padding: .5em 0 .5em 1rem; border-left: 2px solid var(--blue-15); font-size: .97rem; line-height: 1.6; color: var(--blue-secondary); overflow-wrap: anywhere; }
.rd-flow aside + aside { margin-top: .75em; }
.rd-flow aside::before { content: "Margin note "; display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25em; }
.rd-empty { color: var(--blue-secondary); font-style: italic; }
.rd-read.is-text .rd-page + .rd-page { margin-top: 20px; }
.rd-read.is-text .rd-page.rd-skip { display: none; }   /* a page the Text only view leaves out */

/* ---------- Player ---------- */
.rd .player-controls button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  border-radius: var(--radius);
}
.rd .player-controls .pl-main { min-width: 104px; }
.rd .pl-ico { font-size: .95em; line-height: 1; }
.rd .player-controls button[aria-pressed="true"]::before { content: "\2713"; content: "\2713" / ""; }
.rd .player-controls button[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 2px; }
.rd #pl-seek { height: 28px; margin-top: 12px; cursor: pointer; }
.rd #pl-seek:disabled { opacity: .5; cursor: default; }
.rd .pl-time { white-space: nowrap; }
@media (max-width: 420px) {
  .rd .pl-time { margin-left: 0; width: 100%; }
}

/* ---------- Transcript ---------- */
.rd .tr { max-width: 640px; }
.tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 28px; }
main .tr-title { font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.tr-jump {
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; min-height: 44px; padding: 8px 14px;
  background: var(--maize); color: var(--blue); border: 2px solid var(--blue); border-radius: var(--radius);
}
.tr-jump:hover { background: var(--white); }
.rd .follow-row { margin-top: 10px; align-items: center; min-height: 44px; }
.rd .follow-row label { cursor: pointer; }
.tr-hint { margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--blue-secondary); max-width: 62ch; }
.tr-hint kbd {
  font-family: var(--mono); font-size: .85em; font-weight: 700;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 .3em; background: var(--white);
}
.rd .transcript { margin-top: 12px; }
.rd .transcript.is-full { max-height: none !important; overflow: visible; }
.tr-loading { padding: 8px 18px; color: var(--blue-secondary); }
.rd .cue { color: var(--blue-secondary); }
.rd .cue:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.rd .cue.active {
  border-left-color: var(--blue); background: #FFF6D6; color: var(--blue); font-weight: 700;
}
.rd .cue.active .cue-t { color: var(--blue); }
@media (forced-colors: active) {
  .rd .cue { border-left-color: Canvas; }
  .rd .cue.active { outline: 2px solid Highlight; outline-offset: -2px; border-left-color: Highlight; }
  .rd .cue:focus-visible { outline: 3px solid CanvasText; outline-offset: -5px; }
}

/* Video pages on wide screens: the transcript column lines up with the player */
@media (min-width: 980px) {
  .av-side .tr-head { margin-top: 0; }
}