/* SynthLit web player — shared by the demo and library editions.
   Brand tokens match site/index.html; keep them in sync if that changes. */

:root {
  --parchment: #f9efe6;
  --parchment-2: #f3e5d6;
  --parchment-3: #ece0d2;
  --ink: #3c2f2f;
  --ink-soft: #6b5a52;
  --copper: #a0522d;
  --copper-dim: #c17f57;
  --rule: rgba(60, 47, 47, 0.14);
  --shadow: 0 1px 2px rgba(60, 47, 47, 0.06), 0 8px 24px rgba(60, 47, 47, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif { font-family: 'Cormorant Garamond', Georgia, serif; }
a { color: var(--copper); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; }

/* ── header ────────────────────────────────────────────────────────────── */

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--parchment);
  border-bottom: 1px solid rgba(60, 47, 47, 0.1);
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.brand img { width: 36px; height: 36px; border-radius: 50%; }
.brand span {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
header.site nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.92rem; }
header.site nav a { text-decoration: none; }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 0.4rem; margin: -0.4rem;
  cursor: pointer; flex-direction: column; gap: 4px; justify-content: center;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  header.site nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1rem;
    background: var(--parchment-2);
    padding: 1rem 1.5rem 1.5rem;
    box-shadow: var(--shadow);
    z-index: 20;
  }
  header.site nav.open { display: flex; }
}

/* ── book header ───────────────────────────────────────────────────────── */

.book-head { padding: 2.5rem 0 1.5rem; }
.book-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; margin: 0 0 0.25rem; }
.book-head .byline { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 0.9rem; }
.book-head .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.book-head .meta .dot { color: var(--copper-dim); }

/* ── layout ────────────────────────────────────────────────────────────── */

.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
  padding-bottom: 8rem;
}
/* Mobile overrides for this whole file live in one block at the very end
   -- see the comment there for why. */

.panel {
  background: var(--parchment-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.panel h2 .count { font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: var(--ink-soft); }

/* ── chapter list ──────────────────────────────────────────────────────── */

.chapters { list-style: none; margin: 0; padding: 0.4rem; max-height: 60vh; overflow-y: auto; }
.chapters li { margin: 0; }
.chapters button {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
}
.chapters button:hover { background: var(--parchment-3); }
.chapters button:focus-visible { outline: 2px solid var(--copper); outline-offset: -2px; }
.chapters .num {
  flex: 0 0 2rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.chapters .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapters .dur { flex: 0 0 auto; color: var(--ink-soft); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.chapters li.current button { background: var(--parchment-3); font-weight: 500; }
.chapters li.current .num { color: var(--copper); }
.chapters li.played .title { color: var(--ink-soft); }

/* ── aside ─────────────────────────────────────────────────────────────── */

.aside-body { padding: 1.1rem 1.25rem 1.25rem; font-size: 0.92rem; color: var(--ink-soft); }
.aside-body p { margin: 0 0 0.85rem; }
.aside-body p:last-child { margin-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--copper);
  background: var(--copper);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #8f4826; border-color: #8f4826; }
.btn.ghost { background: none; color: var(--copper); }
.btn.ghost:hover { background: rgba(160, 82, 45, 0.08); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* ── transport (fixed bottom bar) ──────────────────────────────────────── */

.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(243, 229, 214, 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule);
  padding: 0.7rem 0 0.85rem;
  z-index: 20;
}
.transport .wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.transport .now {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
}
.transport .now .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transport .now .label strong { font-weight: 500; }
.transport .now .time { color: var(--ink-soft); font-size: 0.8rem; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.scrub { width: 100%; accent-color: var(--copper); cursor: pointer; height: 1.1rem; }

.controls { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}
.ctrl:hover { background: var(--parchment-3); }
.ctrl:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.ctrl[disabled] { opacity: 0.35; cursor: not-allowed; }
.ctrl.play {
  width: 3rem;
  height: 3rem;
  background: var(--copper);
  color: #fff;
  font-size: 1rem;
}
.ctrl.play:hover { background: #8f4826; }
.ctrl svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.ctrl.play svg { width: 1.35rem; height: 1.35rem; }
.rate {
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  margin-left: 0.35rem;
}
.rate:hover { border-color: var(--copper-dim); color: var(--ink); }

/* ── states ────────────────────────────────────────────────────────────── */

.state { padding: 4rem 0; text-align: center; color: var(--ink-soft); }
.state h2 { color: var(--ink); font-size: 1.6rem; margin: 0 0 0.5rem; }
.state.error h2 { color: #8f2f2f; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── library shelf ─────────────────────────────────────────────────────── */

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; padding-bottom: 4rem; }
.shelf-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.25rem;
  background: var(--parchment-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.shelf-card:hover { border-color: var(--copper-dim); }
.shelf-card .t { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; }
.shelf-card .a { color: var(--ink-soft); font-size: 0.9rem; }
.shelf-card .m { color: var(--ink-soft); font-size: 0.8rem; margin-top: 0.35rem; }

/* ── mobile (≤860px) ───────────────────────────────────────────────────────
   Deliberately kept in ONE block at the very end of the file, not spread
   across each section above. Every rule here re-targets a selector that's
   already declared earlier at the same specificity (a plain class, same as
   the override) -- CSS resolves that tie by source order, media query or
   not, so scattering "just add a mobile tweak here" next to each base rule
   is a trap: whichever one is physically LAST in the file wins, regardless
   of which one looks more specific to a human reader. Learned this the
   hard way earlier in this file's history (a max-height override placed
   before the base .chapters rule silently did nothing). One block, always
   last, always wins -- no need to reason about ordering ever again. */
@media (max-width: 860px) {
  .player-layout { grid-template-columns: minmax(0, 1fr); }

  /* The two-column layout no longer exists at this width, so there's no
     reason to trap the chapter list in its own capped-height scroll
     region -- a scrollable list nested inside the page's own scroll is
     the "which scroll area wins" fight that's clunky on a touchscreen
     (a drag started over the list scrolls the list, not the page, until
     it hits the list's own end). Let it flow as part of the normal page
     scroll instead. */
  .chapters { max-height: none; overflow-y: visible; padding: 0.25rem; }
  .chapters button { padding: 0.5rem 0.7rem; font-size: 0.92rem; }

  /* Audiobookshelf-style priority: the chapter list is the actual UI,
     the title block is just orientation. At full size the title/byline/
     stats ate most of the first screen before a single chapter was
     visible -- shrink them hard so the list starts right under the fold
     instead of a scroll or two down. */
  .book-head { padding: 0.85rem 0 0.5rem; }
  .book-head h1 { font-size: 1.35rem; margin: 0 0 0.15rem; }
  .book-head .byline { font-size: 0.85rem; margin: 0 0 0.4rem; }
  .book-head .meta { font-size: 0.76rem; gap: 0.3rem 0.75rem; }

  .panel h2 { padding: 0.6rem 0.9rem; font-size: 1rem; }
  .panel h2 .count { font-size: 0.72rem; }
}