/* ============================================================================
   Books&Moods v1.1.0 — experience layer
   Mobile first (320px up). Loaded last by both layouts.
   ============================================================================ */

/* ---- Global safety -------------------------------------------------------*/
html, body { max-width: 100%; }
img, svg, video { max-width: 100%; }
.bm-container { padding-left: max(var(--bm-space-5), env(safe-area-inset-left, 0px)); padding-right: max(var(--bm-space-5), env(safe-area-inset-right, 0px)); }
.bm-container--narrow { max-width: 760px; }
.bm-section--tight { padding: var(--bm-space-8) 0; }
.bm-btn { min-height: 44px; }
.bm-btn--sm { min-height: 40px; }
.bm-topbar { padding-top: env(safe-area-inset-top, 0px); }
.bm-bottom-nav__item { min-height: 44px; }
h1, h2, h3 { overflow-wrap: anywhere; }

/* ---- Home hero ------------------------------------------------------------*/
.bm-home-hero {
  position: relative;
  overflow: hidden;
  color: var(--bm-ivory-100);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(201,162,75,.16) 0%, rgba(201,162,75,0) 55%),
    linear-gradient(160deg, #070b14 0%, #0b1220 55%, #121a2c 100%);
  padding: var(--bm-space-8) 0 var(--bm-space-10);
}
.bm-home-hero__grid { display: grid; gap: var(--bm-space-8); align-items: center; }
.bm-home-hero__copy { position: relative; z-index: 2; }
.bm-home-hero h1 {
  color: var(--bm-ivory-50);
  font-size: clamp(2.1rem, 9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 var(--bm-space-4);
}
.bm-home-hero h1 span { color: var(--bm-gold-400); font-style: italic; }
.bm-home-hero__lede { color: var(--bm-chrome-text-muted); font-size: 1rem; margin: 0; max-width: 30rem; }
.bm-home-hero .bm-btn-row { margin-top: var(--bm-space-6); }

/* Layered cover shelf: real, approved jackets only. Fixed height on mobile
   so the hero never grows tall, and contained so it cannot overflow. */
.bm-home-hero__shelf {
  position: relative;
  height: 220px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  order: -1;
  contain: layout paint;
}
.bm-hero-cover {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 124px;
  aspect-ratio: 2 / 3;
  border-radius: 6px 10px 10px 6px;
  overflow: hidden;
  background: var(--bm-navy-800);
  box-shadow: 0 24px 44px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.06) inset;
  transform-origin: 50% 100%;
  transition: transform 320ms var(--bm-ease);
}
.bm-hero-cover::after { /* spine highlight */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.08), rgba(0,0,0,0));
}
.bm-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.bm-hero-cover--1 { z-index: 5; width: 142px; transform: translateX(-50%); }
.bm-hero-cover--2 { z-index: 4; transform: translateX(calc(-50% - 78px)) rotate(-7deg) scale(.9); }
.bm-hero-cover--3 { z-index: 4; transform: translateX(calc(-50% + 78px)) rotate(7deg) scale(.9); }
.bm-hero-cover--4 { z-index: 3; transform: translateX(calc(-50% - 146px)) rotate(-12deg) scale(.8); opacity: .85; }
.bm-hero-cover--5 { z-index: 3; transform: translateX(calc(-50% + 146px)) rotate(12deg) scale(.8); opacity: .85; }
.bm-hero-cover:focus-visible { outline-offset: 4px; }
@media (hover: hover) {
  .bm-hero-cover--1:hover { transform: translateX(-50%) translateY(-6px); }
}
@media (max-width: 359px) {
  .bm-home-hero__shelf { height: 190px; }
  .bm-hero-cover { width: 104px; }
  .bm-hero-cover--1 { width: 120px; }
  .bm-hero-cover--4, .bm-hero-cover--5 { display: none; }
}
@media (min-width: 900px) {
  .bm-home-hero { padding: var(--bm-space-16) 0; }
  .bm-home-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bm-home-hero__shelf { order: 0; height: 400px; max-width: 560px; }
  .bm-hero-cover { width: 190px; }
  .bm-hero-cover--1 { width: 218px; }
  .bm-hero-cover--2 { transform: translateX(calc(-50% - 120px)) rotate(-7deg) scale(.9); }
  .bm-hero-cover--3 { transform: translateX(calc(-50% + 120px)) rotate(7deg) scale(.9); }
  .bm-hero-cover--4 { transform: translateX(calc(-50% - 220px)) rotate(-12deg) scale(.78); }
  .bm-hero-cover--5 { transform: translateX(calc(-50% + 220px)) rotate(12deg) scale(.78); }
}
@media (prefers-reduced-motion: reduce) { .bm-hero-cover { transition: none; } }

/* ---- Shelves: horizontal, snap-scrolling rails on phones; grid on desktop */
.bm-shelf-section { padding: var(--bm-space-8) 0; }
.bm-shelf-section .bm-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bm-space-4); margin-bottom: var(--bm-space-4); }
.bm-shelf-section .bm-section__head h2 { margin: 0; font-size: clamp(1.35rem, 5vw, 1.9rem); }
.bm-shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 40%);
  gap: var(--bm-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--bm-space-5);
  margin: 0 calc(-1 * var(--bm-space-5));
  padding: 4px var(--bm-space-5) var(--bm-space-3);
  scrollbar-width: none;
}
.bm-shelf::-webkit-scrollbar { display: none; }
.bm-shelf > * { scroll-snap-align: start; min-width: 0; }
.bm-shelf .bm-card__body { padding: var(--bm-space-3) var(--bm-space-1) 0; }
.bm-shelf .bm-card { background: transparent; box-shadow: none; border: 0; }
.bm-shelf .bm-card__media { border-radius: 6px 10px 10px 6px; box-shadow: 0 12px 26px rgba(11,18,32,.22); }
.bm-shelf .bm-card__title { font-size: .95rem; line-height: 1.25; }
.bm-shelf .bm-card__meta { font-size: .78rem; margin-bottom: 0; }
.bm-shelf .bm-badge { display: none; }
.bm-shelf--moods .bm-mood-card__actions { padding: 0 var(--bm-space-1) var(--bm-space-2); }
@media (min-width: 640px) { .bm-shelf { grid-auto-columns: minmax(150px, 26%); } }
@media (min-width: 1024px) {
  .bm-shelf { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .bm-shelf-section { padding: var(--bm-space-12) 0; }
}

/* ---- Compact membership strip ---------------------------------------------*/
.bm-home-plans { padding: var(--bm-space-8) 0 var(--bm-space-12); }
.bm-plan-strip { display: grid; gap: var(--bm-space-3); }
.bm-plan-strip__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bm-space-3);
  padding: var(--bm-space-4) var(--bm-space-5);
  border: 1px solid var(--bm-border); border-radius: var(--bm-radius-md);
  text-decoration: none; color: var(--bm-text); background: var(--bm-surface); min-height: 56px;
}
.bm-plan-strip__item strong { font-family: var(--bm-font-display); font-weight: 600; }
.bm-plan-strip__item em { font-style: normal; font-family: var(--bm-font-body); color: var(--bm-accent-strong); font-size: .85rem; margin-left: 6px; }
.bm-plan-strip__item span { color: var(--bm-text-muted); font-size: .85rem; text-align: right; }
.bm-plan-strip__item--featured { border-color: var(--bm-accent); box-shadow: 0 0 0 1px var(--bm-accent) inset; }
@media (min-width: 760px) { .bm-plan-strip { grid-template-columns: repeat(3, 1fr); } .bm-plan-strip__item { flex-direction: column; } .bm-plan-strip__item span { text-align: left; } }

/* ---- Title page ------------------------------------------------------------*/
.bm-content-hero__subtitle { font-family: var(--bm-font-display); font-style: italic; color: var(--bm-gold-400); font-size: 1.1rem; margin: -8px 0 var(--bm-space-4); }
@media (max-width: 759px) {
  .bm-content-hero { padding: var(--bm-space-8) 0; }
  .bm-content-hero__cover { max-width: 200px; margin: 0 auto; }
}
.bm-hero--compact { padding: var(--bm-space-8) 0 var(--bm-space-6); }
.bm-hero--compact h1 { margin: 0; }

/* ---- Reactions ---------------------------------------------------------------*/
.bm-reactions { margin: var(--bm-space-10) 0 var(--bm-space-6); padding-top: var(--bm-space-6); border-top: 1px solid var(--bm-reader-border, var(--bm-border)); text-align: center; }
.bm-reactions__title { font-family: var(--bm-font-display); font-size: 1.05rem; font-weight: 500; font-style: italic; color: var(--bm-reader-text-muted, var(--bm-text-muted)); margin: 0 0 var(--bm-space-4); }
.bm-reactions__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bm-space-2); }
.bm-reaction {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--bm-reader-border, var(--bm-border));
  color: var(--bm-reader-text, var(--bm-text)); background: transparent;
  font-size: .86rem; text-decoration: none; cursor: pointer;
  transition: border-color 160ms var(--bm-ease), background 160ms var(--bm-ease), color 160ms var(--bm-ease);
}
.bm-reaction svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bm-reaction:hover { border-color: var(--bm-accent); }
.bm-reaction[aria-pressed="true"] { border-color: var(--bm-accent); background: rgba(201,162,75,.14); color: var(--bm-reader-text, var(--bm-text)); }
.bm-reaction[aria-pressed="true"] svg { stroke: var(--bm-accent); fill: rgba(201,162,75,.25); }
.bm-reaction__count { font-variant-numeric: tabular-nums; color: var(--bm-reader-text-muted, var(--bm-text-muted)); font-size: .78rem; }
.bm-reactions[aria-busy="true"] .bm-reaction { opacity: .6; pointer-events: none; }
.bm-reactions__note { font-size: .82rem; color: var(--bm-reader-text-muted, var(--bm-text-muted)); margin: var(--bm-space-3) 0 0; }
.bm-reactions__note a { color: inherit; }
@media (max-width: 400px) {
  .bm-reaction { padding: 8px 12px; font-size: .82rem; }
}

/* ---- Reader: stream, continuous chapters, mobile measure -------------------*/
.bm-reader-main { padding: var(--bm-space-4) clamp(18px, 5vw, 28px) var(--bm-space-16); }
.bm-reader-bar { padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px)); }
.bm-reader-bar__title { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.15; }
.bm-reader-bar__work { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-reader-bar__chapter { font-family: var(--bm-font-body); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bm-reader-text-muted); }
.bm-reader-bar__back, .bm-reader-bar__icon { width: 44px; height: 44px; }
.bm-reader-toc__label { display: inline-block; min-width: 5.5em; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bm-reader-text-muted); }
.bm-reader-toc li a { min-height: 44px; display: flex; align-items: baseline; gap: 6px; }
.bm-reader-article__head { margin-bottom: var(--bm-space-6); }
.bm-reader-article__head h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.15; }
.bm-reader-article__mood { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .78rem; color: var(--bm-reader-text-muted); }
.bm-reader-article__mood > span { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.bm-reader-mood-chip { min-height: 36px; }
.bm-reader-article__foot { display: grid; gap: var(--bm-space-4); margin-top: var(--bm-space-8); }
.bm-reader-article__foot .bm-reader-bookmark { justify-self: start; }
.bm-reader-chapter-nav { margin-top: 0; flex-wrap: wrap; }
.bm-reader-chapter-nav .bm-btn { max-width: 100%; }

/* Continuous reading: the next chapter follows under a quiet ornament; the
   previous chapter's pager is no longer needed once its successor is here. */
.bm-reader-article--continued { margin-top: var(--bm-space-12); }
.bm-reader-article--continued .bm-reader-article__head { padding-top: var(--bm-space-10); position: relative; text-align: center; }
.bm-reader-article--continued .bm-reader-article__head::before {
  content: "\2767"; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  color: var(--bm-accent); font-size: 1.1rem; opacity: .8;
}
.has-continuation .bm-reader-chapter-nav { display: none; }
.bm-reader-loader { height: 1px; }
.bm-reader-stream.is-loading .bm-reader-loader { height: 48px; background: radial-gradient(circle, var(--bm-accent) 0 3px, transparent 4px) center / 18px 6px repeat-x; opacity: .45; }

/* Night Into Day terminal passages (allowlisted <span class="bm-terminal">) */
.bm-reader-prose blockquote { margin: 1.4em 0; padding: 0; border: 0; }
.bm-reader-prose .bm-terminal {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82em; line-height: 1.6; letter-spacing: .04em;
  padding: .9em 1em; border-radius: 8px; overflow-wrap: anywhere;
  background: rgba(127,127,127,.1); border-left: 3px solid var(--bm-accent);
}

/* Reader chrome must never cover text: space for bar + player + nav is
   constant, independent of the chrome's visible/hidden state. */
body.bm-reader-body { padding-bottom: calc(var(--bm-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px); }
body.bm-reader-body[data-player-active] { padding-bottom: calc(var(--bm-player-height) + var(--bm-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px); }
@media (min-width: 1100px) {
  body.bm-reader-body { padding-bottom: var(--bm-space-8); }
  body.bm-reader-body[data-player-active] { padding-bottom: calc(var(--bm-player-height) + var(--bm-space-8)); }
}

/* ---- Player: compact and fully on-screen on phones -------------------------*/
@media (max-width: 639px) {
  .bm-player__inner { gap: var(--bm-space-2); padding-left: var(--bm-space-3); padding-right: var(--bm-space-3); }
  .bm-player__meta { flex: 1 1 auto; }
  .bm-player__cover { width: 40px; height: 40px; }
  .bm-player__ctrl { width: 40px; height: 40px; }
}
@media (max-width: 359px) {
  #bm-player-prev { display: none; }
}

/* ---- Account private offer ---------------------------------------------------*/
.bm-private-offer { margin-top: var(--bm-space-6); padding: var(--bm-space-5); border: 1px solid var(--bm-border); border-radius: var(--bm-radius-md); background: var(--bm-surface); }
.bm-private-offer p:last-of-type { margin-bottom: var(--bm-space-4); }

/* ---- Installed PWA ---------------------------------------------------------------
   Keep the *document* as the native vertical scrollport. v1.1.0 applied
   `overscroll-behavior-y:none` to body only in standalone mode; that is the
   only layout rule that differed between the browser tab and the installed
   app and can leave touch scrolling latched/frozen in mobile standalone
   containers. Do not scroll-lock html/body for app chrome. */
@media (display-mode: standalone) {
  .bm-footer #bm-pwa-install { display: none; }
  html { overflow-y: auto; overscroll-behavior-y: auto; }
  body { overflow-y: visible; overscroll-behavior-y: auto; -webkit-tap-highlight-color: transparent; }
}

/* iOS exposes navigator.standalone; pwa.js adds this class as a fallback for
   engines that do not reliably apply the display-mode media feature. */
html.bm-standalone { overflow-y: auto; overscroll-behavior-y: auto; }
html.bm-standalone body { overflow-y: visible; overscroll-behavior-y: auto; }

/* Closed drawers: no shadow bleeding into the page edge, and not in the tab
   order (pre-v1.1.0 the translated-away drawer still cast its shadow). */
.bm-reader-toc, .bm-reader-settings { transition: transform var(--bm-duration-base) var(--bm-ease), visibility 0s linear 0s; }
.bm-reader-toc[hidden], .bm-reader-settings[hidden] {
  box-shadow: none;
  visibility: hidden;
  transition: transform var(--bm-duration-base) var(--bm-ease), visibility 0s linear var(--bm-duration-base);
}