/* The recording as a book — PLAN-REDESIGN-SPRINT-2026-10 §A 1–4.
 *
 * Linked by content_watch.html only when rr_pages() is on, and every rule is
 * scoped to `body.rr-page`, so the flag-off page never loads or matches any of
 * it. Layout lives here, not in the page's Reading Room block, which stays
 * colour-and-type only (tests/test_rr_content_page.py).
 *
 * An open book on a desk: the page (verso) on the left holds the recording as
 * its illustration and the statements for that moment; the contents (recto)
 * on the right lists the chapters as page numbers. They meet at a spine — one
 * hairline with a little shading either side of it. No drop shadows, no paper
 * texture: it has to read as a clinical reference on a phone at 7am.
 */

/* ── the spread ───────────────────────────────────────────────────────── */

body.rr-page .bk-stage { gap: 0; }

body.rr-page .bk-page {
  background-color: var(--rr-paper-raised);
  /* the spine: shading into the gutter on the inner (right) edge */
  background-image: linear-gradient(to left, var(--rr-paper-sunken), transparent 40px);
  border: 1px solid var(--rr-rule);
  border-radius: var(--rr-radius-card) var(--rr-radius-none) var(--rr-radius-none) var(--rr-radius-card);
  /* book margins: the inner (gutter) margin wider than the outer */
  padding: 30px 52px 22px 36px;
  overflow: hidden;            /* the turn slides inside the page, never across the screen */
}
body.rr-page .bk-sheet { min-width: 0; }

body.rr-page .chapters.bk-rail {
  border-left: 0;
  border-radius: var(--rr-radius-none) var(--rr-radius-card) var(--rr-radius-card) var(--rr-radius-none);
  background-color: var(--rr-paper-raised);
  background-image: linear-gradient(to right, var(--rr-paper-sunken), transparent 24px);
}

/* ── the running head (§A4: book measure) ─────────────────────────────── */

body.rr-page .bk-head { max-width: 66ch; margin-bottom: 16px; }
body.rr-page .bk-kicker {
  font-family: var(--rr-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--rr-ink-3);
}
body.rr-page .bk-title {
  font-family: var(--rr-font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  color: var(--rr-ink);
  margin-top: 4px;
  text-wrap: balance;
}
body.rr-page .bk-sub { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--rr-ink-2); }

/* the recording is an illustration on the page */
body.rr-page .bk-page .player { border-radius: var(--rr-radius-media); }

/* ── §A3 the statements for this moment ───────────────────────────────── */

/* the statements span the page, the same width as the recording above them
   (Ramy 2026-10-01); the running head keeps the ~66ch book measure */
body.rr-page .bk-leaf {
  max-width: none;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rr-rule-soft);
}
body.rr-page .bk-leaf-h {
  font-family: var(--rr-font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--rr-ink-2);
  margin-bottom: 12px;
}
body.rr-page .bk-sts { list-style: none; display: flex; flex-direction: column; gap: 16px; }
body.rr-page .bk-tx {
  font-family: var(--rr-font-display);
  font-size: 18px;
  line-height: 1.45;
  color: var(--rr-ink);
}
/* the statement at the playhead, marked the way a reader marks a line */
body.rr-page .bk-st.is-now .bk-tx span {
  background-image: linear-gradient(transparent 58%, var(--rr-highlight) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
body.rr-page .bk-st .meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
body.rr-page .bk-empty { font-size: 14px; color: var(--rr-ink-3); }
/* host summaries: secondary, apart, labelled */
body.rr-page .bk-hs { margin-top: 20px; padding-top: 12px; border-top: 1px dashed var(--rr-rule); }
body.rr-page .bk-hs-h { font-size: 12.5px; font-weight: 600; color: var(--rr-ink-2); margin-bottom: 10px; }
body.rr-page .bk-hs-h span { font-weight: 400; color: var(--rr-ink-3); }
body.rr-page .bk-st-hs .bk-tx { font-size: 16px; color: var(--rr-ink-2); }

/* ── the folio and the turn ───────────────────────────────────────────── */

body.rr-page .bk-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px solid var(--rr-rule-soft);
}
body.rr-page .bk-foot[hidden] { display: none; }
body.rr-page .bk-folio {
  margin: 0 auto;
  font-family: var(--rr-font-mono);
  font-size: 12.5px;
  color: var(--rr-ink-3);
  font-variant-numeric: tabular-nums;
}
body.rr-page .bk-turn {
  font-size: 13px;
  font-weight: 600;
  color: var(--rr-ink);
  border: 1px solid var(--rr-rule-strong);
  border-radius: var(--rr-radius-pill);
  background: var(--rr-paper-raised);
  padding: 7px 14px;
  min-height: 36px;
}
body.rr-page .bk-turn:hover { border-color: var(--rr-ink); }
body.rr-page .bk-turn:disabled { visibility: hidden; }
body.rr-page .bk-turn:focus-visible,
body.rr-page .chapters.bk-rail .chrow:focus-visible { outline: 2px solid var(--rr-accent); outline-offset: 2px; }

/* ── §A2 the rail as page numbers, the bookmark on the current one ────── */

body.rr-page .chapters.bk-rail .ch-list { position: relative; }   /* rows measure their offset from the list */
body.rr-page .chapters.bk-rail .chrow { align-items: baseline; gap: 12px; padding-top: 9px; padding-bottom: 9px; }
body.rr-page .chapters.bk-rail .chrow > span:nth-child(2) { flex: 1; min-width: 0; }
/* the time is still there for the clinician who wants it, but it is the
   page number that reads first */
body.rr-page .chapters.bk-rail .chrow .t {
  order: 2;
  background: none;
  color: var(--rr-ink-3);
  padding: 0;
  font-size: 11px;
}
body.rr-page .chapters.bk-rail .chrow .bk-pno {
  order: 3;
  flex: none;
  position: relative;
  min-width: 46px;
  text-align: right;
  font-family: var(--rr-font-mono);
  font-size: 13px;
  color: var(--rr-ink-2);
  font-variant-numeric: tabular-nums;
}
body.rr-page .chapters.bk-rail .chrow.on { background: var(--rr-paper-sunken); }
body.rr-page .chapters.bk-rail .chrow.on .t { background: none; color: var(--rr-accent); }
body.rr-page .chapters.bk-rail .chrow.on .bk-pno { color: var(--rr-ink); font-weight: 600; }
/* the bookmark: a ribbon hanging from the top edge of the row, beside the
   page number — a mark, not a bar down the side */
body.rr-page .chapters.bk-rail .bk-ribbon {
  position: absolute;
  left: 2px;
  top: -9px;
  width: 9px;
  height: 20px;
  background: var(--rr-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  opacity: 0;
}
body.rr-page .chapters.bk-rail .chrow.on .bk-ribbon { opacity: 1; }

/* ── a fixed book (Ramy 2026-10-01) ───────────────────────────────────────
   A book's pages are all the same size: turning one must never make the
   page — or the contents beside it — grow or shrink. The spread takes one
   height from the viewport; the page holds the running head, the recording
   and the folio at fixed sizes, and only the statements scroll inside it.
   The contents rail is sized by the spread, so it no longer jumps either. */
body.rr-page .bk-stage { --bk-h: clamp(600px, calc(100svh - 150px), 900px); }
@media (min-width: 901px) {
  body.rr-page .bk-stage { height: var(--bk-h); align-items: stretch; }
  body.rr-page .bk-page { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  body.rr-page .bk-sheet { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.rr-page .bk-head,
  body.rr-page .bk-page .player,
  body.rr-page .bk-page .cue,
  body.rr-page .bk-foot { flex: none; }
  /* the illustration never takes more than half the page */
  body.rr-page .bk-page .player { width: min(100%, calc(var(--bk-h) * 0.5 * 16 / 9)); }
  body.rr-page .bk-leaf {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding-right: 10px;
  }
  body.rr-page .bk-foot { margin-top: 14px; }
  body.rr-page .chapters.bk-rail { height: 100%; max-height: none; }
}

/* ── a phone: one column, the page then the contents ──────────────────── */

@media (max-width: 900px) {
  /* one column: the page keeps one height too — the running head reserves
     its lines and the statements scroll in a fixed window */
  body.rr-page .bk-head { min-height: 7.6em; }
  body.rr-page .bk-leaf { height: 40svh; overflow-y: auto; overscroll-behavior: contain; }
  body.rr-page .bk-page {
    border-radius: var(--rr-radius-card);
    background-image: none;
    padding: 20px 18px 16px;
  }
  body.rr-page .chapters.bk-rail {
    margin-top: 16px;
    border-left: 1px solid var(--rr-rule);
    border-radius: var(--rr-radius-card);
    background-image: none;
  }
}
@media (max-width: 640px) {
  body.rr-page .bk-page { padding: 16px 14px 14px; }
  body.rr-page .bk-tx { font-size: 17px; }
  body.rr-page .bk-turn-l { display: none; }        /* the arrows and the folio say it */
  body.rr-page .bk-turn { min-width: 44px; min-height: 44px; }
}