/* ==========================================================================
   reader.css — the Mise reading room (/shop/read/?book=<slug>). Added 2026-11-01, shelf shadow fixed 2026-11-01.
   Generated page: tools/shop/build.py (reader_page). Script: assets/js/reader.js.
   Libraries: assets/vendor/page-flip (StPageFlip, MIT) and assets/vendor/pdfjs.

   Tokens are Mise's own (shop.css): navy, gold, cream, Playfair + Montserrat.
   The product theme class (.mise-theme-night etc.) recolours the room.

   The room is a fixed full-viewport stage: no site nav, no footer, one slim
   bar on top, the book in the middle, a progress line at the bottom. Motion:
   the page turn itself (StPageFlip), one fade on open, nothing infinite;
   prefers-reduced-motion shortens the turn to a snap.
   ========================================================================== */

:root {
  --rd-bg: var(--mise-navy-deep, #0a1930);
  --rd-bg-2: var(--mise-navy, #16213e);
  --rd-gold: var(--mise-gold, #d4a84b);
  --rd-sub: var(--mise-sub-dark, #b0bec5);
  --rd-paper: #ffffff;
  --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rd-bar: 60px;
}

html.rd-html, body.rd-body { height: 100%; margin: 0; }
body.rd-body {
  background: var(--rd-bg);
  color: #fff;
  font-family: var(--mise-sans, 'Montserrat', Arial, sans-serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.rd-body a:focus-visible, .rd-body button:focus-visible { outline: 3px solid var(--rd-gold); outline-offset: 3px; border-radius: 8px; }

/* The room */
.rd-room {
  position: fixed; inset: 0;
  display: grid; grid-template-rows: var(--rd-bar) 1fr 44px;
  background:
    radial-gradient(900px 560px at 50% 42%, rgba(233, 182, 90, 0.16), transparent 70%),
    radial-gradient(1200px 700px at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%),
    linear-gradient(180deg, var(--rd-bg-2), var(--rd-bg));
}
.rd-room::before {
  /* lamplight vignette */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---------- Top bar ---------- */
.rd-bar {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 16px; min-height: var(--rd-bar);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent);
}
@media (min-width: 768px) { .rd-bar { padding: 0 24px; } }
.rd-back {
  display: inline-flex; align-items: center; gap: 8px; color: var(--rd-sub); text-decoration: none;
  font: 600 0.82rem/1 var(--mise-sans, sans-serif); letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 200ms var(--rd-ease);
}
.rd-back:hover { color: #fff; }
.rd-back svg { width: 16px; height: 16px; }
.rd-title { text-align: center; min-width: 0; }
.rd-title h1 {
  margin: 0; font: 600 1.05rem/1.15 var(--mise-serif, 'Playfair Display', Georgia, serif); color: #fff; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-title p { margin: 2px 0 0; font-size: 0.72rem; color: var(--rd-sub); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tools { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.rd-ib {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: #fff; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background-color 200ms var(--rd-ease), transform 200ms var(--rd-ease);
}
.rd-ib svg { width: 18px; height: 18px; }
@media (pointer: fine) { .rd-ib:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } }
.rd-buy {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--rd-gold); color: var(--rd-bg); text-decoration: none; white-space: nowrap;
  font: 700 0.84rem/1 var(--mise-sans, sans-serif); box-shadow: 0 8px 24px rgba(212, 168, 75, 0.3);
  transition: transform 200ms var(--rd-ease), box-shadow 200ms var(--rd-ease);
}
.rd-buy[hidden] { display: none; }
@media (pointer: fine) { .rd-buy:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(212, 168, 75, 0.45); } }
@media (max-width: 599px) { .rd-buy span { display: none; } .rd-buy { width: 40px; padding: 0; justify-content: center; } .rd-title p { display: none; } }

/* ---------- Stage ---------- */
.rd-stage { position: relative; z-index: 2; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 56px 18px; }
@media (max-width: 767px) { .rd-stage { padding: 6px 10px 12px; } }
.rd-book-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.rd-book {
  position: relative; z-index: 1; width: 100%; height: 100%;
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 700ms var(--rd-ease), transform 900ms var(--rd-ease);
}
.rd-book.is-open { opacity: 1; transform: none; }
/* the shelf shadow: BEHIND the book (z-index below it) and placed by reader.js
   at the book's real bottom edge (--rd-shelf), so it never crosses a page. */
.rd-shadow {
  position: absolute; left: 50%; top: var(--rd-shelf, 96%); width: var(--rd-shelf-w, 70%); max-width: 100%; height: 7%;
  transform: translate(-50%, -45%); z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.18) 45%, transparent 72%);
  opacity: 0; transition: opacity 900ms var(--rd-ease) 200ms;
}
.rd-book.is-open ~ .rd-shadow { opacity: 1; }

/* Pages. StPageFlip positions these; we only paint them. */
.rd-page {
  background: var(--rd-paper); overflow: hidden; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.rd-page canvas, .rd-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-page.-left { box-shadow: inset -24px 0 36px -28px rgba(0, 0, 0, 0.35); }
.rd-page.-right { box-shadow: inset 24px 0 36px -28px rgba(0, 0, 0, 0.35); }
.rd-page[data-density="hard"] { background: var(--rd-bg-2); border-radius: 0 6px 6px 0; }
.rd-page.rd-cover-back { border-radius: 6px 0 0 6px; }
.rd-page.rd-pending::after {
  /* a faint page number while the page paints */
  content: attr(data-n); position: absolute; left: 0; right: 0; bottom: 6%; text-align: center;
  font: 500 0.7rem/1 var(--mise-sans, sans-serif); color: rgba(0, 0, 0, 0.18); letter-spacing: 0.2em;
}
/* back cover */
.rd-cover-back { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10%; color: var(--rd-sub); }
.rd-cover-back strong { display: block; font: 600 1.1rem/1.2 var(--mise-serif, serif); color: var(--rd-gold); margin-bottom: 10px; }
.rd-cover-back small { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
/* end-of-preview page */
.rd-end {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12% 10%; background: var(--rd-paper); color: #1f2937;
}
.rd-end .rd-end-rule { width: 44px; height: 2px; background: var(--rd-gold); margin: 0 0 18px; }
.rd-end h2 { font: 600 clamp(1.1rem, 2.6vw, 1.7rem)/1.15 var(--mise-serif, serif); margin: 0 0 12px; color: #16213e; }
.rd-end p { font-size: clamp(0.8rem, 1.4vw, 0.95rem); line-height: 1.6; color: #4b5563; margin: 0 0 20px; max-width: 32ch; }
.rd-end .rd-buy { color: #0a1930; }
.rd-end .rd-end-amz { margin-top: 12px; font-size: 0.78rem; color: #6b7280; }
.rd-end .rd-end-amz a { color: #9a6b12; }

/* ---------- Side arrows (desktop) ---------- */
.rd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  display: none; align-items: center; justify-content: center;
  transition: background-color 200ms var(--rd-ease), opacity 200ms var(--rd-ease);
}
.rd-arrow svg { width: 20px; height: 20px; }
.rd-arrow.-prev { left: 8px; }
.rd-arrow.-next { right: 8px; }
.rd-arrow[disabled] { opacity: 0.25; cursor: default; }
@media (min-width: 768px) and (pointer: fine) { .rd-arrow { display: inline-flex; } .rd-arrow:not([disabled]):hover { background: rgba(255, 255, 255, 0.16); } }

/* ---------- Bottom: progress + counter ---------- */
.rd-foot { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 0 16px 10px; }
@media (min-width: 768px) { .rd-foot { padding: 0 24px 12px; } }
.rd-progress { grid-column: 1 / -1; height: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.rd-progress i { display: block; height: 100%; width: 0; background: var(--rd-gold); transition: width 400ms var(--rd-ease); }
.rd-counter { grid-column: 2; font: 600 0.78rem/1 var(--mise-sans, sans-serif); letter-spacing: 0.12em; color: var(--rd-sub); text-transform: uppercase; }
.rd-counter b { color: #fff; }
.rd-hint { grid-column: 3; justify-self: end; font-size: 0.72rem; color: var(--rd-sub); opacity: 0; transition: opacity 600ms var(--rd-ease); letter-spacing: 0.04em; }
.rd-hint.is-on { opacity: 0.85; }
.rd-mode { grid-column: 1; font-size: 0.72rem; color: var(--rd-gold); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 599px) { .rd-hint { display: none; } }

/* ---------- Loading / error ---------- */
.rd-load {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity 500ms var(--rd-ease); pointer-events: none;
}
.rd-load.is-off { opacity: 0; }
.rd-load img { width: min(180px, 36vw); border-radius: 4px 10px 10px 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rd-load p { margin: 0; font: 500 0.82rem/1 var(--mise-sans, sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-sub); }
.rd-load .rd-line { width: 160px; height: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.rd-load .rd-line i { display: block; height: 100%; width: 0; background: var(--rd-gold); transition: width 300ms var(--rd-ease); }
.rd-error { max-width: 420px; text-align: center; color: var(--rd-sub); line-height: 1.6; padding: 0 20px; pointer-events: auto; }
.rd-error h2 { font: 600 1.4rem/1.2 var(--mise-serif, serif); color: #fff; margin: 0 0 10px; }
.rd-error a { color: var(--rd-gold); }

/* ---------- Toast ---------- */
.rd-toast {
  position: absolute; left: 50%; bottom: 64px; transform: translate(-50%, 8px); z-index: 6;
  padding: 10px 16px; border-radius: 999px; background: rgba(5, 11, 28, 0.88); color: #fff;
  font-size: 0.8rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0; transition: opacity 300ms var(--rd-ease), transform 300ms var(--rd-ease); pointer-events: none; white-space: nowrap;
}
.rd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Fullscreen ---------- */
.rd-room:fullscreen { background-color: var(--rd-bg); }

/* ---------- No JS ---------- */
.rd-nojs { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--rd-sub); z-index: 9; }
.rd-nojs a { color: var(--rd-gold); }

@media (prefers-reduced-motion: reduce) {
  .rd-book, .rd-shadow, .rd-load, .rd-toast, .rd-progress i { transition-duration: 1ms; }
}