/* =========================================================================
   Reader — distraction-free.
   The book document lives in an iframe and keeps its own styling entirely.
   Everything here is chrome around it, and all of it gets out of the way.
   ========================================================================= */

.page-reader { overflow: hidden; background: #f4f7fb; }

.reader {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: #f4f7fb;
  transition: background .3s ease;
}

/* Reading themes are applied to the shell; the book document is told
   separately over postMessage so its own CSS stays untouched. */
.reader[data-theme="dark"]  { background: #0f141b; }
.reader[data-theme="sepia"] { background: #f4ecd8; }

/* ---------- top progress hairline ---------- */
.reader-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 30; pointer-events: none;
}
.reader-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2563eb, #f97316);
  transition: width .25s ease;
}

/* ---------- bar ---------- */
.reader-bar {
  position: relative; z-index: 20; flex-shrink: 0;
  height: 58px; display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}
.reader[data-theme="dark"] .reader-bar {
  background: rgba(17, 24, 33, .92); border-bottom-color: #1e293b; color: #e2e8f0;
}
.reader[data-theme="sepia"] .reader-bar { background: rgba(244, 236, 216, .94); border-bottom-color: #e0d4b8; }

/* Immersive mode: chrome slides away, tap or scroll up brings it back. */
.reader.immersive .reader-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.reader.immersive .reader-foot { transform: translateY(120%); opacity: 0; pointer-events: none; }

.reader-title { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.reader-title b { display: block; font-size: var(--t-md); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-title small { font-size: var(--t-xs); color: var(--ink-3); font-weight: 700; }
.reader[data-theme="dark"] .reader-title small { color: #64748b; }

/* Back + Contents on the left, everything else on the right. Contents deliberately
   shares the edge with the panel it opens. */
.reader-nav,
.reader-tools { display: flex; gap: 2px; flex-shrink: 0; }
.reader[data-theme="dark"] .iconbtn { color: #94a3b8; }
.reader[data-theme="dark"] .iconbtn:hover { background: #1e293b; color: #e2e8f0; }

/* ---------- the book itself ---------- */
.book-frame {
  flex: 1; width: 100%; border: 0; display: block;
  background: transparent;
  /* The iframe owns its own scrolling, which keeps the book's internal
     anchors and the injected watermark's fixed positioning both correct. */
}

/* ---------- footer / seek ---------- */
.reader-foot {
  position: relative; z-index: 20; flex-shrink: 0;
  height: calc(52px + env(safe-area-inset-bottom));
  padding: 0 16px env(safe-area-inset-bottom);
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 800; color: var(--ink-3);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}
.reader[data-theme="dark"] .reader-foot {
  background: rgba(17, 24, 33, .92); border-top-color: #1e293b; color: #64748b;
}
.reader[data-theme="sepia"] .reader-foot { background: rgba(244, 236, 216, .94); border-top-color: #e0d4b8; }

#reader-pct, #reader-time { min-width: 46px; }
#reader-time { text-align: right; }

#reader-seek {
  flex: 1; appearance: none; -webkit-appearance: none;
  height: 5px; border-radius: 999px; background: var(--line); cursor: pointer;
}
.reader[data-theme="dark"] #reader-seek { background: #1e293b; }
#reader-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow-1); cursor: grab;
}
#reader-seek::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid #fff;
  background: var(--accent); box-shadow: var(--shadow-1); cursor: grab;
}

/* ---------- bookmark ribbon ----------
   Hangs off the top edge of the page, tucked against the right-hand side of the
   book itself rather than the far edge of the window. Hollow = not saved,
   solid = saved. */
.page-ribbon {
  position: absolute; z-index: 25; top: 58px;   /* directly under the bar */
  right: var(--ribbon-inset, 14px);
  width: 34px; height: 48px; padding: 0;
  border: none; background: none; cursor: pointer; line-height: 0;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, .18));
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .28s ease;
}
.page-ribbon svg { display: block; }
.page-ribbon path {
  fill: rgba(255, 255, 255, .92);
  stroke: var(--ink-3); stroke-width: 1.5;
  transition: fill .18s ease, stroke .18s ease;
}
.page-ribbon:hover { transform: translateY(3px); }
.page-ribbon:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; border-radius: 4px; }

/* Saved: solid, and hanging a little further down the page, so the change reads
   at a glance and not only as a colour shift. */
.page-ribbon.on { transform: translateY(5px); }
.page-ribbon.on:hover { transform: translateY(8px); }
.page-ribbon.on path { fill: var(--brand); stroke: var(--brand-dark, #1d4ed8); }

.reader[data-theme="dark"] .page-ribbon path { fill: rgba(30, 41, 59, .95); stroke: #64748b; }
.reader[data-theme="dark"] .page-ribbon.on path { fill: var(--brand); stroke: #93b4fd; }
.reader[data-theme="sepia"] .page-ribbon path { fill: rgba(255, 250, 240, .95); stroke: #a1855c; }

/* In immersive mode an unsaved ribbon is clutter, but a saved one is
   information about the page — that one stays. */
.reader.immersive .page-ribbon:not(.on) { opacity: 0; pointer-events: none; }

/* On a wide screen the book is a centred 1000px column; sit the ribbon on the
   book's own edge rather than stranding it against the window. */
@media (min-width: 1100px) {
  .page-ribbon { --ribbon-inset: calc((100% - 1000px) / 2 + 14px); }
}

/* ---------- side panels ----------
   Three single-purpose panels, never tabbed together: Contents on the left
   (where a table of contents belongs), notes and feedback on the right. Each
   one does exactly one job, so opening it is never a guess. */
.side-panel {
  position: absolute; top: 0; bottom: 0; z-index: 40;
  width: min(360px, 88vw); padding: 18px 20px;
  background: var(--surface);
  overflow-y: auto; overscroll-behavior: contain;
}
.reader[data-theme="dark"] .side-panel { background: #111821; color: #e2e8f0; }

.side-panel-left {
  left: 0; border-right: 1px solid var(--line);
  box-shadow: 12px 0 40px rgba(15, 23, 42, .13);
  animation: panelInLeft .26s cubic-bezier(.2, .8, .3, 1);
}
.side-panel-right {
  right: 0; border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(15, 23, 42, .13);
  animation: panelInRight .26s cubic-bezier(.2, .8, .3, 1);
}
.reader[data-theme="dark"] .side-panel-left  { border-right-color: #1e293b; }
.reader[data-theme="dark"] .side-panel-right { border-left-color: #1e293b; }
@keyframes panelInLeft  { from { transform: translateX(-100%); } }
@keyframes panelInRight { from { transform: translateX(100%); } }

.side-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.side-panel h3 { margin: 22px 0 10px; font-size: var(--t-sm); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); }

.toc-list { display: flex; flex-direction: column; }
.toc-list a {
  padding: 9px 10px; border-radius: var(--r-sm); font-size: var(--t-md); font-weight: 700;
  color: var(--ink-2); transition: background .13s, color .13s;
}
.toc-list a:hover { background: var(--surface-2); color: var(--ink); }
.toc-list a.current { background: var(--brand-soft); color: var(--brand); }
.toc-list a[data-level="2"] { padding-left: 22px; font-size: var(--t-md); }
.toc-list a[data-level="3"] { padding-left: 34px; font-size: var(--t-sm); color: var(--ink-3); }
.reader[data-theme="dark"] .toc-list a { color: #94a3b8; }
.reader[data-theme="dark"] .toc-list a:hover { background: #1e293b; color: #e2e8f0; }

/* Base .bookmark styles live in app.css — the Me page lists saved places too
   and does not load this sheet. Only the reader's dark theme is here. */
.reader[data-theme="dark"] .bookmark { background: #1a2330; }

/* ---------- notes (base styles live in app.css) ---------- */
.note-form { margin-bottom: 18px; }
.note-form textarea, #feedback-comment {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-weight: 600; font-size: var(--t-md); resize: vertical;
  color: var(--ink);
}
.reader[data-theme="dark"] .note-form textarea,
.reader[data-theme="dark"] #feedback-comment {
  background: #0f141b; border-color: #1e293b; color: #e2e8f0;
}
.note-form textarea:focus, #feedback-comment:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none;
}
.note-form-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 9px;
}
.reader[data-theme="dark"] .note { background: #1a2330; }

/* ---------- feedback ---------- */
.stars { display: flex; gap: 5px; }
.star {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 20px; font-weight: 800; color: var(--ink-3);
  transition: transform .12s, background .15s, color .15s, border-color .15s;
}
.star:hover { transform: translateY(-2px); }
.star.on { background: #fef3c7; border-color: #fcd34d; color: #d97706; }
.reader[data-theme="dark"] .star { background: #0f141b; border-color: #1e293b; }

.pick-row { display: flex; gap: 7px; flex-wrap: wrap; }
.pick {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  padding: 8px 15px; border-radius: 999px; font-weight: 800; font-size: var(--t-sm); cursor: pointer;
  transition: all .15s;
}
.pick:hover { border-color: var(--brand); color: var(--brand); }
.pick.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.reader[data-theme="dark"] .pick { background: #0f141b; border-color: #1e293b; }
.reader[data-theme="dark"] .pick.on { background: var(--brand); border-color: var(--brand); }

/* ---------- theme menu ---------- */
.theme-menu {
  position: absolute; top: 54px; right: 12px; z-index: 45;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-3); padding: 12px; width: 232px;
  animation: pop .18s ease;
}
.reader[data-theme="dark"] .theme-menu { background: #111821; border-color: #1e293b; color: #e2e8f0; }
.theme-menu h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: 9px; }
.theme-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.theme-opt {
  border: 2px solid var(--line); border-radius: var(--r-sm); padding: 12px 4px;
  font-size: var(--t-xs); font-weight: 800; cursor: pointer; text-align: center;
}
.theme-opt[data-t="light"] { background: #fff; color: #0f172a; }
.theme-opt[data-t="sepia"] { background: #f4ecd8; color: #6b4f2a; }
.theme-opt[data-t="dark"]  { background: #0f141b; color: #e2e8f0; }
.theme-opt.active { border-color: var(--brand); }
.font-row { display: flex; align-items: center; gap: 10px; }
.font-row button {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: none; cursor: pointer; font-weight: 800; color: inherit;
}
.font-row span { flex: 1; text-align: center; font-size: var(--t-sm); font-weight: 800; }

/* ---------- screen-time / limit overlay ---------- */
.reader-block {
  position: absolute; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(248, 250, 252, .97); backdrop-filter: blur(6px); text-align: center; padding: 30px;
}
.reader-block .inner { max-width: 380px; }
.reader-block .big { font-size: 54px; margin-bottom: 14px; }
.reader-block h2 { margin-bottom: 8px; }
.reader-block p { color: var(--ink-2); margin-bottom: 22px; }

/* On a wide screen the book gets a comfortable measure and a soft page edge. */
@media (min-width: 1100px) {
  .book-frame { max-width: 1000px; margin: 0 auto; box-shadow: 0 0 60px rgba(15, 23, 42, .06); }
}

/* ---------- floating feedback pill ---------- */
/* Deliberately identical in shape and colour to the pill on the public comic
   sites (industry/world/intl), so the gesture is the same wherever a reader
   meets a book. It sits above the seek bar rather than over it, and rides the
   same hide transition as the rest of the chrome in immersive mode. */
.fb-fab {
  position: absolute; right: 18px; z-index: 30;
  bottom: calc(52px + 18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand); color: #fff; border: none;
  border-radius: 999px; padding: 12px 18px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .35);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, background .15s;
}
.fb-fab:hover { background: var(--brand-dark, #1d4ed8); }
.fb-fab:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
/* Out of the way when the reader has asked for a clean page, and while a
   right-hand panel is open — it would sit on top of it, and if that panel IS
   feedback the pill is redundant. Contents opens on the left, so the pill
   stays put for that one. */
.reader.immersive .fb-fab,
.reader.side-panel-right-open .fb-fab { transform: translateY(160%); opacity: 0; pointer-events: none; }
@media (max-width: 480px) {
  /* Icon only on small screens: the label costs width the page needs more. */
  .fb-fab { padding: 13px 15px; font-size: 0; gap: 0; }
  .fb-fab span { font-size: 18px; }
}

/* The captured location, shown so the reader can see what is being sent. */
.fb-where {
  margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--ink-3);
  background: var(--brand-soft); border-radius: var(--r-sm);
  padding: 8px 11px; overflow-wrap: anywhere;
}