/* =====================================================================
   THE READER — styles for feed/book-reader.js.

   Inherits the site palette (--paper / --ink / --crimson / --gold, and the
   display + ui faces) so a book reads like the rest of Final Boss rather than
   a bolted-on widget. The three reading THEMES override those vars locally, so
   choosing Sepia never leaks out of the reader.

   Page mode is the default. The turn is one transform on .br-track — no
   re-layout, so it stays smooth on a phone.
   ===================================================================== */

.br-host{
  --br-size: 19px;
  --br-line: 1.7;
  --br-bg: var(--paper);
  --br-fg: var(--ink);
  --br-soft: var(--ink-soft);
  position: fixed;
  inset: 0;
  z-index: 60;                     /* above the site chrome; the reader owns the screen */
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--br-bg);
  color: var(--br-fg);
  overscroll-behavior: contain;
}

/* ---- reading themes ------------------------------------------------- */
.br-host[data-theme="parchment"]{ --br-bg:#f3ead6; --br-fg:#211c17; --br-soft:#6a6253 }
.br-host[data-theme="sepia"]{     --br-bg:#efe0c4; --br-fg:#3a2c1b; --br-soft:#7a674c }
.br-host[data-theme="dark"]{      --br-bg:#12100e; --br-fg:#e8dfcb; --br-soft:#9c917c }

/* ---- top bar --------------------------------------------------------- */
.br-bar{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--ui);
  background: var(--br-bg);
}
.br-title{
  flex: 1; min-width: 0;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-btn{
  appearance: none; border: 1px solid var(--line); background: transparent;
  color: var(--br-fg); font-family: var(--ui); font-size: 13px; font-weight: 500;
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  min-height: 40px;                /* 40px touch target — the Vault review's bar */
  white-space: nowrap;
}
.br-btn:hover{ border-color: var(--crimson); color: var(--crimson-text) }
.br-btn:disabled{ opacity: .5; cursor: default }
.br-listen[disabled]{ border-style: dashed }
.br-host.br-narrating .br-listen{ border-color: var(--crimson); color: var(--crimson-text) }

/* ---- the page ------------------------------------------------------- */
.br-viewport{
  position: relative;
  overflow: hidden;
  padding: 18px 22px;
}
.br-host[data-mode="scroll"] .br-viewport{ overflow-y: auto; overscroll-behavior: contain }
.br-track{ will-change: transform; transition: transform .22s ease }
@media (prefers-reduced-motion: reduce){ .br-track{ transition: none } }
.br-flow{ position: relative }     /* offsetLeft anchor — book-reader.js measures against this */

.br-p, .br-h{
  font-size: var(--br-size);
  line-height: var(--br-line);
  margin: 0 0 .85em;
  /* a long word must never spill into the next column and vanish */
  overflow-wrap: break-word;
  break-inside: avoid-column;
}
.br-host.br-serif .br-p, .br-host.br-serif .br-h{ font-family: var(--display) }
.br-host:not(.br-serif) .br-p, .br-host:not(.br-serif) .br-h{ font-family: var(--ui) }
.br-h{ font-size: calc(var(--br-size) * 1.35); font-weight: 600; margin: 0 0 .6em; color: var(--crimson-text) }
.br-p.br-h{ font-size: calc(var(--br-size) * 1.12); font-weight: 600 }
.br-quote{
  margin-inline: 0; padding-left: 14px;
  border-left: 3px solid var(--gold); color: var(--br-soft); font-style: italic;
}
/* the line currently being read aloud */
.br-speaking{
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* ---- tap zones (page mode only) -------------------------------------- */
.br-zones{ position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; pointer-events: none }
.br-host[data-mode="page"] .br-zones{ pointer-events: auto }
.br-zone{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.br-zone:active{ background: color-mix(in srgb, var(--ink) 5%, transparent) }
/* keyboard users get a visible target; mouse/touch users never see these */
.br-zone:focus-visible{ outline: 2px solid var(--crimson); outline-offset: -6px }

/* ---- footer --------------------------------------------------------- */
.br-foot{
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font-family: var(--ui); font-size: 12px; color: var(--br-soft);
  background: var(--br-bg);
}
.br-chap{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.br-page{ font-variant-numeric: tabular-nums }
.br-progress{ width: 84px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; flex: none }
/* The shared playback bar (feed/narration-bar.js) is fixed to the bottom of the
   viewport, and this reader is fixed too — so the page-level padding the bar
   adds cannot help here. Lift the footer out from under it while narrating. */
.br-host.br-narrating .br-foot{ padding-bottom: calc(8px + 62px + env(safe-area-inset-bottom, 0px)) }
.br-progress-fill{ height: 100%; background: var(--gold); transition: width .3s ease }

/* ---- settings panel -------------------------------------------------- */
.br-panel{
  position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%);
  width: min(420px, calc(100vw - 28px));
  background: var(--tile, var(--br-bg)); color: var(--br-fg);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px var(--shadow);
  padding: 14px; z-index: 3;
  font-family: var(--ui);
  max-height: min(70vh, 560px); overflow-y: auto;
}
.br-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.br-label{ flex: 0 0 92px; font-size: 12px; color: var(--br-soft); text-transform: uppercase; letter-spacing: .04em }
.br-chip{
  appearance: none; border: 1px solid var(--line); background: transparent; color: var(--br-fg);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; min-height: 40px;
}
.br-chip.on{ border-color: var(--crimson); color: var(--crimson-text); font-weight: 600 }
.br-val{ font-size: 13px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center }
.br-voice, .br-chapters{
  flex: 1; min-width: 140px; min-height: 40px;
  background: transparent; color: var(--br-fg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-family: var(--ui); font-size: 13px;
}
.br-done{
  width: 100%; min-height: 44px; margin-top: 4px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--crimson); color: #fff; font-family: var(--ui); font-size: 14px; font-weight: 600;
}

/* ---- phones ---------------------------------------------------------- */
@media (max-width: 520px){
  .br-viewport{ padding: 14px 16px }
  .br-title{ font-size: 15px }
  .br-btn{ padding: 9px 11px; font-size: 12px }
  .br-label{ flex-basis: 100% }
}