/* Books&Moods — reader
   Three explicitly tested themes. Day and sepia ALWAYS use dark ink text —
   never light/white text on a light surface (the defect the old DAV
   reader had). Night uses light text on a dark surface.
*/

html[data-reader-theme="day"] {
  --bm-reader-bg: #fdfbf7;
  --bm-reader-surface: #ffffff;
  --bm-reader-text: #1c1710;
  --bm-reader-text-muted: #5c5546;
  --bm-reader-border: rgba(28, 23, 16, 0.12);
  --bm-reader-chrome-bg: #ffffff;
  --bm-reader-chrome-text: #1c1710;
}

html[data-reader-theme="sepia"] {
  --bm-reader-bg: #f1e6cf;
  --bm-reader-surface: #f6ecd9;
  --bm-reader-text: #3a2c17;
  --bm-reader-text-muted: #6e5c40;
  --bm-reader-border: rgba(58, 44, 23, 0.14);
  --bm-reader-chrome-bg: #ece0c6;
  --bm-reader-chrome-text: #3a2c17;
}

html[data-reader-theme="night"] {
  --bm-reader-bg: #0c1220;
  --bm-reader-surface: #121a2c;
  --bm-reader-text: #f2ead9;
  --bm-reader-text-muted: #b7bdd0;
  --bm-reader-border: rgba(244, 233, 216, 0.14);
  --bm-reader-chrome-bg: #0c1220;
  --bm-reader-chrome-text: #f2ead9;
}

/* Adjustable reading controls, defaults; reader.js toggles the data
   attributes below and persists the choice per-viewer in localStorage. */
html { --bm-reader-font-scale: 1; --bm-reader-leading: 1.75; }
html[data-reader-leading="compact"] { --bm-reader-leading: 1.5; }
html[data-reader-leading="relaxed"] { --bm-reader-leading: 1.85; }
html[data-reader-width="narrow"] { --bm-reader-measure: 32rem; }
html[data-reader-width="wide"] { --bm-reader-measure: 46rem; }

body.bm-reader-body {
  background: var(--bm-reader-bg);
  color: var(--bm-reader-text);
  padding-bottom: calc(var(--bm-player-height) + var(--bm-bottom-nav-height));
}

.bm-reader-bar {
  position: sticky;
  top: 0;
  z-index: var(--bm-z-nav);
  display: grid;
  grid-template-columns: 44px 1fr 44px 44px;
  align-items: center;
  height: 56px;
  background: var(--bm-reader-chrome-bg);
  color: var(--bm-reader-chrome-text);
  border-bottom: 1px solid var(--bm-reader-border);
  padding: 0 var(--bm-space-2);
}
.bm-reader-bar__back, .bm-reader-bar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; color: inherit;
}
.bm-reader-bar__back:hover, .bm-reader-bar__icon:hover { background: rgba(127,127,127,0.12); }
.bm-reader-bar__title {
  font-family: var(--bm-font-display);
  font-size: 0.95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}

.bm-reader-main { padding: var(--bm-space-6) var(--bm-space-5) var(--bm-space-16); }

.bm-reader-article { max-width: var(--bm-reader-measure, 38rem); margin: 0 auto; }
.bm-reader-article__kicker { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--bm-reader-text-muted); margin-bottom: var(--bm-space-2); }
.bm-reader-article__head h1 { font-family: var(--bm-font-reader); color: var(--bm-reader-text); margin-bottom: var(--bm-space-4); }
.bm-reader-article__mood { font-size: 0.85rem; color: var(--bm-reader-text-muted); display: flex; align-items: center; gap: var(--bm-space-2); flex-wrap: wrap; margin-bottom: var(--bm-space-8); }
.bm-reader-mood-chip { border: 1px solid var(--bm-reader-border); border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; color: var(--bm-reader-text); }

/* Generic .bm-btn--ghost-light is tuned for cream pages. Inside the
   reader it must follow the active day/sepia/night palette so bookmark and
   previous-chapter controls never become dark-on-dark. */
.bm-reader-body .bm-btn--ghost-light {
  color: var(--bm-reader-text);
  border-color: var(--bm-reader-border);
}
.bm-reader-body .bm-btn--ghost-light:hover { background: rgba(127, 127, 127, 0.12); }

.bm-reader-prose {
  font-family: var(--bm-font-reader);
  font-size: calc(1.08rem * var(--bm-reader-font-scale));
  line-height: var(--bm-reader-leading);
  color: var(--bm-reader-text);
}
.bm-reader-prose p { margin: 0 0 1.3em; }
.bm-reader-prose h2, .bm-reader-prose h3 { color: var(--bm-reader-text); margin-top: 1.6em; }
.bm-reader-prose a { color: inherit; text-decoration: underline; }

.bm-reader-chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--bm-space-4);
  margin-top: var(--bm-space-12);
  padding-top: var(--bm-space-6);
  border-top: 1px solid var(--bm-reader-border);
}

/* ---- Chapters drawer ------------------------------------------------- */
.bm-reader-toc, .bm-reader-settings {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--bm-reader-surface);
  color: var(--bm-reader-text);
  z-index: var(--bm-z-drawer);
  padding: var(--bm-space-6);
  overflow-y: auto;
  box-shadow: var(--bm-shadow-lg);
  transform: translateX(0);
  transition: transform var(--bm-duration-base) var(--bm-ease);
}
.bm-reader-toc[hidden], .bm-reader-settings[hidden] { display: block; transform: translateX(105%); pointer-events: none; }

.bm-reader-toc__head, .bm-reader-settings__head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--bm-space-5);
}
.bm-reader-toc__head button, .bm-reader-settings__head button { font-size: 1.4rem; line-height: 1; color: inherit; }

.bm-reader-toc ol { list-style: none; margin: 0; padding: 0; }
.bm-reader-toc li a {
  display: block; padding: var(--bm-space-3) 0; text-decoration: none; color: var(--bm-reader-text-muted);
  border-bottom: 1px solid var(--bm-reader-border);
}
.bm-reader-toc li a[aria-current="true"] { color: var(--bm-reader-text); font-weight: 700; }

.bm-reader-settings fieldset { border: 0; padding: 0; margin: 0 0 var(--bm-space-6); }
.bm-reader-settings legend { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bm-reader-text-muted); margin-bottom: var(--bm-space-3); }
.bm-reader-settings__row { display: flex; gap: var(--bm-space-2); flex-wrap: wrap; }
.bm-reader-settings__row button {
  border: 1px solid var(--bm-reader-border); border-radius: var(--bm-radius-sm); padding: 8px 14px; color: var(--bm-reader-text);
}
.bm-reader-settings__row button[aria-pressed="true"] { border-color: var(--bm-accent); color: var(--bm-accent); }

@media (min-width: 900px) {
  .bm-reader-main { padding-top: var(--bm-space-10); }
}

/* ---- Distraction-free reader chrome (v1.1.0) --------------------------
   reader.js runs ONE direction state machine: scrolling down hides the top
   bar, the Mood player and the mobile nav immediately; scrolling up (or
   reaching the top) shows them. No timers, no tap-to-reveal and no floating
   play button. Padding never changes with the chrome state, so hiding or
   showing it can never shift the text (no layout jumps). */
.bm-reader-body .bm-reader-bar,
.bm-reader-body #bm-player,
.bm-reader-body .bm-bottom-nav {
  transition: transform 200ms var(--bm-ease), opacity 160ms var(--bm-ease);
}

.bm-reader-body.bm-reader-chrome-hidden .bm-reader-bar {
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
  opacity: 0;
  pointer-events: none;
}

.bm-reader-body.bm-reader-chrome-hidden #bm-player {
  transform: translateY(calc(100% + var(--bm-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 8px));
  opacity: 0;
  pointer-events: none;
}

.bm-reader-body.bm-reader-chrome-hidden .bm-bottom-nav {
  transform: translateY(calc(100% + 8px));
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1100px) {
  .bm-reader-body.bm-reader-chrome-hidden #bm-player { transform: translateY(calc(100% + 8px)); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-reader-body .bm-reader-bar,
  .bm-reader-body #bm-player,
  .bm-reader-body .bm-bottom-nav { transition: none; }
}