/* ============================================================================
   The Singing Bible — styles
   Palette pulled directly from the logo.
   ============================================================================ */

:root {
  --bg:          #FDFDFD;   /* page background, matches logo edge */
  --ink:         #1a1a1a;   /* primary text */
  --ink-soft:    #525252;   /* secondary text */
  --ink-muted:   #8a8a8a;   /* tertiary text */
  --dark:        #0A0A0A;   /* deep dark from medallion */
  --dark-2:      #151515;   /* slightly lifted dark */
  --gold:        #C9972E;   /* primary warm gold */
  --gold-hi:     #E8C268;   /* highlight gold */
  --gold-deep:   #8E6A1D;   /* deeper gold for pressed/active */
  --line:        #EAE6DC;   /* subtle warm border */
  --line-strong: #D4CEC0;   /* stronger border */
  --disabled-bg: #F5F3EE;   /* disabled chip */
  --disabled-fg: #B8B2A4;   /* disabled text */

  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 -8px 32px rgba(10, 10, 10, 0.16);
  --shadow-gold: 0 0 0 3px rgba(201, 151, 46, 0.18);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --player-h: 128px;
  --player-h-desktop: 88px;
}

/* ----- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  /* leave room for player bar */
  padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom, 0px));
}

button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
button:disabled { cursor: not-allowed; }

img { max-width: 100%; display: block; }

/* ----- Page layout ------------------------------------------------------- */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 0;
}

.brand {
  display: flex;
  justify-content: center;
  padding: 8px 0 32px;
  animation: fadeIn 600ms var(--ease) both;
}
.brand__logo {
  width: 180px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.layout {
  display: grid;
  gap: 24px;
  padding-top: 8px;
}

@media (min-width: 960px) {
  .page { padding: 32px 32px 0; }
  .brand { padding: 8px 0 40px; }
  .brand__logo { width: 220px; }
  .layout {
    grid-template-columns: minmax(320px, 360px) 1fr;
    gap: 48px;
    align-items: start;
  }
}

.player-spacer { height: 8px; }

/* ----- Selections (left column) ----------------------------------------- */

.selections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeUp 700ms 80ms var(--ease) both;
}
/* While the book menu is open, lift ONLY the Book field (trigger + menu)
   into its own stacking context above both the chapters column and the
   fixed player bar. Keeping this scoped means the rest of the selections
   column (Translation, Voice, Age, Style, Section) still paints
   *underneath* the player bar as the page scrolls. */
body.book-menu-open .field[data-field="book"] {
  position: relative;
  z-index: 55;
}
@media (min-width: 960px) {
  .selections {
    position: sticky;
    top: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
}

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
@media (min-width: 960px) {
  .field__label { font-size: 1.1rem; }
}

.field__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ----- Selection chips (pill buttons) ----------------------------------- */

.chip {
  --chip-bg: #fff;
  --chip-fg: var(--ink);
  --chip-border: var(--line-strong);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  min-height: 38px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  color: var(--chip-fg);
  border: 1px solid var(--chip-border);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
  user-select: none;
}
.chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-gold);
}
@media (hover: hover) {
  .chip:not(.chip--disabled):not(.chip--selected):hover {
    border-color: var(--gold);
    color: var(--gold-deep);
    box-shadow: 0 0 0 2px rgba(201, 151, 46, 0.08);
  }
}
.chip:not(.chip--disabled):active { transform: translateY(1px); }

.chip--selected {
  --chip-bg: var(--dark);
  --chip-fg: var(--gold-hi);
  --chip-border: var(--dark);
  font-weight: 600;
}

.chip--disabled {
  --chip-bg: var(--disabled-bg);
  --chip-fg: var(--disabled-fg);
  --chip-border: var(--disabled-bg);
  cursor: not-allowed;
  font-style: italic;
}
.chip--disabled::after {
  content: 'soon';
  margin-left: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--disabled-fg);
  opacity: 0.7;
  font-style: normal;
  font-weight: 500;
}

/* ----- Book dropdown ----------------------------------------------------- */

.field__book { position: relative; }

.book-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  min-width: 200px;
  justify-content: space-between;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.book-trigger:focus-visible { outline: none; box-shadow: var(--shadow-gold); }
@media (hover: hover) {
  .book-trigger:hover { border-color: var(--gold); }
}
.book-trigger__caret { transition: transform var(--dur) var(--ease); color: var(--ink-soft); }
.book-trigger[aria-expanded="true"] .book-trigger__caret { transform: rotate(180deg); }

.book-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: min(320px, 90vw);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: menuIn 180ms var(--ease);
}
.book-menu[hidden] { display: none; }

/* Inner scroll container. Keeping overflow here (not on the outer) means any
   rubber-band overscroll is clipped by the outer's solid-background frame,
   so users never see page content through the bounce gap. */
.book-menu__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}

.book-menu__group {
  padding: 10px 12px 4px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.book-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.96rem;
  color: var(--ink);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .book-opt:hover:not(.book-opt--disabled) { background: #FAF7EF; color: var(--gold-deep); }
}
.book-opt--selected { background: var(--dark); color: var(--gold-hi); font-weight: 600; }
.book-opt--selected:hover { background: var(--dark); color: var(--gold-hi); }
.book-opt--disabled { color: var(--disabled-fg); cursor: not-allowed; font-style: italic; }
.book-opt__tag {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-weight: 500;
}
.book-opt--selected .book-opt__tag { color: rgba(232, 194, 104, 0.7); }
.book-opt--disabled .book-opt__tag { color: var(--disabled-fg); }

/* ----- Chapters (right column) ------------------------------------------ */

.chapters {
  animation: fadeUp 700ms 160ms var(--ease) both;
}

.chapters__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.chapters__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: 0.01em;
}
@media (min-width: 960px) {
  .chapters__title { font-size: 1.9rem; }
}

.chapters__meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chapters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
}
@media (min-width: 600px) {
  .chapters__grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; }
}

.chapter {
  --ch-bg: #fff;
  --ch-fg: var(--ink);
  --ch-border: var(--line-strong);

  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ch-bg);
  color: var(--ch-fg);
  border: 1px solid var(--ch-border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.chapter:focus-visible { outline: none; box-shadow: var(--shadow-gold); }
@media (hover: hover) {
  .chapter:not(.chapter--disabled):not(.chapter--playing):hover {
    border-color: var(--gold);
    color: var(--gold-deep);
    box-shadow: 0 0 0 2px rgba(201, 151, 46, 0.08);
  }
}
.chapter:not(.chapter--disabled):active { transform: translateY(1px); }

.chapter--playing {
  --ch-bg: var(--dark);
  --ch-fg: var(--gold-hi);
  --ch-border: var(--dark);
  box-shadow: 0 0 0 3px rgba(201, 151, 46, 0.28);
}
.chapter--playing::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.chapter--disabled {
  --ch-bg: var(--disabled-bg);
  --ch-fg: var(--disabled-fg);
  --ch-border: var(--disabled-bg);
  cursor: not-allowed;
}

/* ----- Player bar -------------------------------------------------------- */

.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--dark);
  color: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: slideUp 500ms 200ms var(--ease) both;
}

.player__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px 14px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "controls"
    "track"
    "progress";
  row-gap: 8px;
  align-items: center;
}
@media (min-width: 720px) {
  .player__inner {
    grid-template-columns: minmax(200px, 1.3fr) auto minmax(240px, 1.8fr);
    grid-template-areas: "track controls progress";
    column-gap: 24px;
    padding: 14px 24px;
  }
}

.player__track { grid-area: track; min-width: 0; text-align: center; }
@media (min-width: 720px) { .player__track { text-align: left; } }
.player__track-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player__track-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player__controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 720px) { .player__controls { gap: 10px; } }

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.icon-btn:focus-visible { outline: none; color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold); }
@media (hover: hover) {
  .icon-btn:not(:disabled):hover { color: var(--gold-hi); background: rgba(255, 255, 255, 0.06); }
}
.icon-btn:not(:disabled):active { transform: scale(0.94); }
.icon-btn:disabled { color: rgba(255, 255, 255, 0.22); }

.icon-btn--play {
  width: 56px;
  height: 56px;
  background: var(--gold);
  color: var(--dark);
}
@media (hover: hover) {
  .icon-btn--play:not(:disabled):hover { background: var(--gold-hi); color: var(--dark); }
}
.icon-btn--play:focus-visible { box-shadow: 0 0 0 3px rgba(232, 194, 104, 0.55); color: var(--dark); }
.icon-btn--play:disabled { background: #3a3a3a; color: rgba(255,255,255,0.35); }
.icon-btn--play .icon-pause { display: none; }
.player.is-playing .icon-btn--play .icon-play  { display: none; }
.player.is-playing .icon-btn--play .icon-pause { display: block; }

.player__progress {
  grid-area: progress;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.player__time {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.65);
  min-width: 3.2ch;
  text-align: center;
  letter-spacing: 0.02em;
}

.player__slider-wrap {
  position: relative;
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
}
.player__slider-track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  overflow: hidden;
}
.player__slider-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) 100%);
  transition: width 80ms linear;
}
.player__slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.player__slider:focus-visible { outline: none; }
.player__slider:focus-visible ~ .player__slider-track { box-shadow: 0 0 0 2px var(--gold); border-radius: 999px; }
/* WebKit track + thumb: track matches visual 4px, thumb pulled up to center on it */
.player__slider::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
  border: none;
}
.player__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-hi);
  border: 2px solid var(--dark);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  margin-top: -7px; /* center 18px visual thumb on 4px track */
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.player__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
/* Firefox track + thumb: Firefox auto-centers, no margin offset needed */
.player__slider::-moz-range-track {
  background: transparent;
  height: 4px;
  border: none;
}
.player__slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-hi);
  border: 2px solid var(--dark);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  cursor: pointer;
}

/* ----- Boot loader ------------------------------------------------------- */

.boot {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  transition: opacity 300ms var(--ease);
}
.boot.is-hidden { opacity: 0; pointer-events: none; }
.boot__ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 800ms linear infinite;
}

/* ----- Animations -------------------------------------------------------- */

@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slideUp  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes menuIn   { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}