/*
 * Phase 19 — Broadway Student Library + Immersive Reader
 *
 * Implements the UI-SPEC bubble-legibility + responsive contract:
 *   - Library grid: auto-fill 140px min columns, portrait book cards (9:16 cover)
 *   - Reader chrome: sticky 56px bar (never auto-hides)
 *   - Reader art container: 4:3 aspect-ratio, speech bubbles absolutely positioned
 *   - Speech bubble: rgba(255,255,255,0.95) + 2px solid #222, 4 tail classes
 *   - TTS word highlight: .tts-word--active + active bubble green ring
 *   - Responsive: 320 / 768 / 1280px
 *   - Motion: opacity 150ms only; prefers-reduced-motion disables all transitions
 *
 * All spacing on the 4px grid per UI-SPEC spacing scale.
 * Tokens: --color-bg, --color-surface, --color-text-*, --color-border,
 *         --color-accent, --color-green, --color-yellow-light,
 *         --radius-lg, --radius-md
 */

/* ===========================================================================
   LIBRARY — broadway-library.php
   =========================================================================== */

/* Grid: auto-fill with 140px minimum — resolves to 2 cols at 320px,
   3–4 cols at 768px+, per UI-SPEC layout table. */
.broadway-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(16px, 3vw, 24px);
  padding-bottom: 32px;
}

/* Book card: portrait cover + metadata body */
.broadway-book-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0; /* override .card default; body has its own padding */
}

/* Cover image: portrait 9/16 via aspect-ratio */
.broadway-book-card__cover {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
}

/* Fallback placeholder when no cover signed URL is available */
.broadway-book-card__cover-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--color-border, #e0ded9);
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
}

.broadway-book-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  gap: 4px;
}

/* Title: 16px / semibold */
.broadway-book-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary, #1b1c18);
  margin: 0;
}

/* Author + description: 14px / muted */
.broadway-book-card__author {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-secondary, #5c5e58);
  margin: 0;
}

/* Description: 2-line clamp */
.broadway-book-card__description {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-secondary, #5c5e58);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Open Book" CTA: min-height 44px for WCAG 2.5.5 touch target */
.broadway-book-card__cta {
  display: block;
  min-height: 44px;
  text-align: center;
  text-decoration: none;
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Empty state: centered, calm — shown when $books is empty */
.broadway-library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 8px;
}

.broadway-library-empty__heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary, #1b1c18);
  margin: 0;
}

.broadway-library-empty__body {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #5c5e58);
  margin: 0;
}

/* ===========================================================================
   READER — broadway-reader.php + broadway-reader.js
   =========================================================================== */

/* Reader chrome: sticky top (below topnav at 56px); always visible (D-19.13) */
.reader-chrome {
  position: sticky;
  top: 56px; /* below the main topnav */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 56px;
  background: var(--color-bg, #f2f0ea);
  border-bottom: 1px solid var(--color-border, #dbd8d0);
}

/* "× Back to Books" — left side of chrome; text link style */
.reader-close {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #5c5e58);
  text-decoration: none;
  padding: 12px 8px; /* 12+20+12 = 44px touch target with 20px line-height */
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
}

.reader-close:hover,
.reader-close:focus-visible {
  color: var(--color-accent, #566f58);
  text-decoration: underline;
}

.reader-close:focus-visible {
  outline: 2px solid var(--color-accent, #566f58);
  outline-offset: 2px;
  border-radius: 2px;
}

/* "Scene N of M" — center of chrome; low-contrast by design (D-19.12) */
.reader-progress {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted, #9a9a8e);
  text-align: center;
  flex: 1;
  padding: 0 8px;
}

/* TTS toggle — right side of chrome; 44px touch target (D-19.09 default OFF) */
.reader-tts-toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.875rem;
  background: transparent;
  border: 1px solid var(--color-border, #dbd8d0);
  border-radius: var(--radius-md, 8px);
  color: var(--color-text-secondary, #5c5e58);
  cursor: pointer;
  white-space: nowrap;
}

/* Active (playing) state for TTS toggle */
.reader-tts-toggle.is-playing,
.reader-tts-toggle[data-tts-active="true"] {
  border-color: var(--color-accent, #566f58);
  color: var(--color-accent, #566f58);
}

.reader-tts-toggle:focus-visible {
  outline: 2px solid var(--color-accent, #566f58);
  outline-offset: 2px;
}

/* Art container: 4:3 aspect-ratio; speech bubbles absolutely positioned within */
.reader-art-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000; /* letterbox fallback */
}

/* Max-width constraint at 1280px — centered */
@media (min-width: 1280px) {
  .reader-art-container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Art image: fills the 4:3 container */
.reader-art-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Speech bubble: absolutely positioned overlay per dialogue_json */
.speech-bubble {
  position: absolute;
  /* JS sets style.left and style.top after two-pass clamp+nudge */
  transform: translate(-50%, -50%); /* anchor at center of the computed point */
  background: rgba(255, 255, 255, 0.95); /* near-opaque; survives dark art */
  border: 2px solid #222222;
  border-radius: var(--radius-lg, 14px);
  padding: 8px 16px; /* sm/md tokens */
  /* Cap width on desktop (px) but keep a generous floor of the art width so
     phone-width (320px) bubbles don't collapse to one word per line. min-width
     prevents ultra-narrow bubbles for short lines. Clamp+nudge handles overlap. */
  min-width: 96px;
  max-width: min(240px, 66%);
  font-size: clamp(13px, 2vw, 16px);
  line-height: 1.5;
  color: var(--color-text-primary, #1b1c18);
  pointer-events: none; /* bubbles are visual overlays; taps pass through to advance zone */
  box-sizing: border-box;
  word-wrap: break-word;
  z-index: 10;
}

/* Active bubble ring during TTS narration */
.speech-bubble.is-active-bubble {
  box-shadow: 0 0 0 3px var(--color-green, #566f58);
}

/* TTS word highlight — active word within narrated bubble */
.tts-word--active {
  background: var(--color-yellow-light, #fbf5e0);
  border-radius: 2px;
  /* No transition — no motion; ND-safe */
}

/* Tail classes — CSS ::after triangle positioned via class.
   Tail direction is stored in dialogue_json and NOT recomputed after clamp/nudge (D-19.05).
   Each class places a border-triangle at the corresponding corner of the bubble.
   All four tail directions required: bottom-left, top-right, bottom-right, top-left */

/* Bottom-left tail: bubble speaks toward bottom-left */
.bubble-tail--bottom-left::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 4px solid transparent;
  border-top: 10px solid #222222;
}

.bubble-tail--bottom-left::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 17px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 3px solid transparent;
  border-top: 9px solid rgba(255, 255, 255, 0.95);
  z-index: 1;
}

/* Bottom-right tail: bubble speaks toward bottom-right */
.bubble-tail--bottom-right::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 16px;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 4px solid transparent;
  border-top: 10px solid #222222;
}

.bubble-tail--bottom-right::before {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 17px;
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-left: 3px solid transparent;
  border-top: 9px solid rgba(255, 255, 255, 0.95);
  z-index: 1;
}

/* Top-left tail: bubble speaks toward top-left */
.bubble-tail--top-left::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 10px solid #222222;
}

.bubble-tail--top-left::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 17px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 9px solid rgba(255, 255, 255, 0.95);
  z-index: 1;
}

/* Top-right tail: bubble speaks toward top-right */
.bubble-tail--top-right::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 16px;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 10px solid #222222;
}

.bubble-tail--top-right::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 17px;
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-left: 3px solid transparent;
  border-bottom: 9px solid rgba(255, 255, 255, 0.95);
  z-index: 1;
}

/* Advance zone: full-width tappable below art (min 56px WCAG touch target) */
.reader-advance-zone {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #f2f0ea);
  border-top: 1px solid var(--color-border, #dbd8d0);
  font-size: 0.875rem;
  color: var(--color-text-secondary, #5c5e58);
  cursor: pointer;
  user-select: none;
  padding: 8px 16px;
  text-align: center;
}

.reader-advance-zone:hover {
  background: var(--color-surface, #ffffff);
}

/* Resume banner — shown when last_panel_index > 0 (D-19.11) */
.broadway-resume-banner {
  background: var(--color-green-light, #e8f5e9);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.broadway-resume-banner__link {
  color: var(--color-accent, #566f58);
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: inherit;
  padding: 0;
}

.broadway-resume-banner__link--secondary {
  color: var(--color-text-muted, #9a9a8e);
}

/* ===========================================================================
   RESPONSIVE ADJUSTMENTS
   =========================================================================== */

/* 320px: no side padding on art, full-bleed */
@media (max-width: 480px) {
  .reader-art-container {
    border-radius: 0;
  }

  .reader-chrome {
    padding: 0 8px;
  }
}

/* 768px+: normal page-wrapper margins apply */
@media (min-width: 768px) {
  .broadway-library-grid {
    padding-bottom: 48px;
  }
}

/* ===========================================================================
   MOTION — only opacity 150ms; disabled under prefers-reduced-motion
   =========================================================================== */

.reader-art-container img {
  transition: opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .reader-art-container img {
    transition: none;
  }
}