/* FamzoLearn web — Watch (task 2026-10-17-web-watch).
 *
 * The phone's night look (`WATCH` in colorSchema, emitted into tokens.css as
 * --watch-*), drawn in the browser. Like app.css: no colour literals, only
 * var(--…). Motion lives inside `prefers-reduced-motion: no-preference`; the
 * camera moves and effects are driven from JS, which turns them off itself.
 *
 * Layouts (watch/layout.js sets data-layout on .wt-root):
 *   large     laptop, desktop, TV, iPad: the whole 3:2 picture, centred
 *   sideways  a phone on its side: fit with halved night bars
 *   upright   a phone upright: the framed picture on the blurred backdrop
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Entry points on the cream screens: ▶ Watch on the chapter picture, and the
   Watch pill in the chapter list. Stories' own colours, not the night look.
   ═════════════════════════════════════════════════════════════════════════ */

.hero-art.watchable { position: relative; }
.watch-hero {
  position: absolute; left: var(--space-lg); bottom: var(--space-lg);
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: 56px; padding: 0 var(--space-xl) 0 var(--space-sm);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--stories-fill); color: var(--stories-on-fill);
  font: inherit; font-size: 17px; font-weight: 800;
}
.watch-hero .wt-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--stories-on-fill); color: var(--stories-fill);
}
.watch-hero .wt-icon svg { width: 22px; height: 22px; display: block; } /* the triangle is already centred on its weight; no nudge */
/* Hover keeps the fill (white on the deeper grape fails contrast) and shows a ring. */
.watch-hero:hover { box-shadow: 0 0 0 3px var(--stories-on-fill); }
/* Over a pale picture the grape ring alone can vanish: a paper halo under it. */
.watch-hero:focus-visible {
  outline: 3px solid var(--stories-fill-deep); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 9px var(--paper);
}

/* The pill sits at the RIGHT of its chapter row, on the same line as the title
   (the app's tile: Video top-right, Manoj 17/19 Oct) — its own button, a sibling
   of the row's, never nested inside it. The row's highlight (.toc-row.now) wraps both. */
.toc-watchrow { display: flex; align-items: center; flex: none; padding: 0 var(--space-xs) 0 0; }
.watch-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* A 44px button (touch target) drawn as a 32px pill: the fill is clipped to
     the content box, 6px in from the top and bottom. */
  min-height: 44px; padding: 6px 0;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--stories-panel); background-clip: content-box; color: var(--hue-pink-deep);
  font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.watch-pill .wt-icon { margin-left: 5px; }
.watch-pill > span:last-child { margin-right: var(--space-md); }
.watch-pill .wt-icon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hue-pink-deep); color: var(--paper);
}
.watch-pill:focus-visible { outline: 3px solid var(--stories-fill-deep); outline-offset: 2px; }
.watch-pill .wt-icon svg { width: 11px; height: 11px; display: block; }
.watch-pill:hover { background-color: var(--stories-chip); }
.toc-row.now .watch-pill { background-color: var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════════
   The player
   ═════════════════════════════════════════════════════════════════════════ */

.wt-root {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: var(--watch-night); color: var(--watch-cream);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.wt-root[hidden], .wt-root [hidden] { display: none !important; }
/* Focus: a butter ring on a night halo, so it shows on a white sky, and it is
   never mistaken for the "on" ring (an inset butter ring with butter ink). */
.wt-root :focus-visible {
  outline: 3px solid var(--watch-butter); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--watch-night), 0 0 0 7px var(--watch-night);
}
.wt-idle { cursor: none; }

/* ── Backdrop: a 96 px copy, blurred, stretched to the window ─────────────── */

.wt-backdrop { position: absolute; inset: 0; overflow: hidden; }
.wt-bd {
  position: absolute; left: 0; top: 0; width: 96px; height: 64px; max-width: none;
  object-fit: cover; opacity: 0; filter: blur(3px);
  transform-origin: 0 0; transform: scale(var(--bd-sx, 20), var(--bd-sy, 20));
}
.wt-dim { position: absolute; inset: 0; background: var(--watch-backdrop-dim); }
/* Sideways on a phone: plain night bars, no blur (as on the phone app). */
/* Plain night where the bars are at the sides: a phone on its side, and a
   laptop or TV window (the full-view rule). Only bars above and below the
   picture (a tall window) show the blurred backdrop, as on an iPad upright. */
.wt-root[data-layout="sideways"] .wt-backdrop,
.wt-root[data-layout="large"][data-bars="sides"] .wt-backdrop { display: none; }

/* ── The stage box: the picture, its two layers, the effects ──────────────── */

.wt-box { position: absolute; overflow: hidden; background: var(--watch-stage); z-index: 1; }
.wt-root[data-layout="upright"] .wt-box { border-radius: var(--radius-lg); }
.wt-layer {
  position: absolute; inset: 0; opacity: 0;
  transform-origin: 50% 50%; will-change: transform, opacity;
}
.wt-pic { position: absolute; max-width: none; display: block; }
.wt-fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }

/* ── Header: ✕ and the title lines ────────────────────────────────────────── */

.wt-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-md);
  padding: max(var(--space-md), env(safe-area-inset-top))
    max(var(--space-lg), env(safe-area-inset-right)) var(--space-md)
    max(var(--space-lg), env(safe-area-inset-left));
  pointer-events: none;
}
.wt-header > * { pointer-events: auto; }
.wt-titles {
  min-width: 0; padding: var(--space-xs) var(--space-md);
  background: var(--watch-glass); border-radius: var(--radius-sm);
}
.wt-book {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--watch-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-chapter {
  margin: 0; font-size: 17px; font-weight: 800; color: var(--watch-cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Buttons: butter for the one main action, night for the rest ──────────── */

.wt-btn {
  border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-width: 44px; min-height: 44px; padding: 0;
}
.wt-icon { display: inline-grid; place-items: center; line-height: 0; }
.wt-round {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--watch-line); color: var(--paper);
}
.wt-round[aria-pressed="true"], .wt-night[aria-pressed="true"] {
  color: var(--watch-butter); box-shadow: inset 0 0 0 3px var(--watch-butter);
}
.wt-root .wt-round[aria-pressed="true"]:focus-visible,
.wt-root .wt-night[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 3px var(--watch-butter), 0 0 0 2px var(--watch-night), 0 0 0 7px var(--watch-night);
}
/* Retell: a night pill with its word. */
.wt-night { background: var(--watch-line); color: var(--paper); }
.wt-retell-btn { height: 48px; padding: 0 var(--space-lg); min-width: 88px; font-size: 15px; }
.wt-retell-btn .wt-icon { display: none; }

/* ── Small windows: a phone at 150–200% zoom (criterion 25) ──────────────────
   player.js measures the bar on every layout pass. Narrow: Retell becomes its
   icon. Still too narrow: the buttons wrap onto two centred rows. Short (under
   300 px tall): one row of controls, and no title plate (✕ stays). */
.wt-narrow .wt-retell-btn { width: 48px; min-width: 48px; padding: 0; border-radius: 50%; }
.wt-narrow .wt-retell-btn .wt-icon { display: inline-grid; }
.wt-narrow .wt-retell-word { display: none; }
.wt-wrap .wt-bar { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.wt-wrap .wt-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.wt-wrap .wt-side { gap: var(--space-sm); }
.wt-wrap .wt-play { width: 56px; height: 56px; }
.wt-wrap .wt-round, .wt-wrap .wt-retell-btn { width: 44px; height: 44px; min-width: 44px; }
.wt-wrap .wt-scrubrow { flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-sm); }
.wt-wrap .wt-scrub { flex-basis: 100%; }
.wt-short .wt-titles { display: none; }
.wt-short .wt-bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); }
.wt-short .wt-buttons { display: flex; gap: var(--space-sm); margin: 0; }
.wt-short .wt-side { display: contents; }
.wt-short .wt-scrubrow { flex: 1; min-width: 72px; order: 2; }
.wt-short .wt-time { font-size: 12px; }
.wt-short .wt-play { width: 48px; height: 48px; }
.wt-short .wt-bigplay { width: 72px; height: 72px; }
.wt-short .wt-card-title { margin-bottom: var(--space-xs); }
.wt-short .wt-header { padding-top: max(var(--space-sm), env(safe-area-inset-top)); padding-bottom: var(--space-sm); }
.wt-short .wt-bar { bottom: max(var(--space-sm), env(safe-area-inset-bottom)); }
.wt-endstack { overflow-y: auto; }
/* Up next when room is tight (wrapped or short): the same card, tighter. */
.wt-wrap .wt-upnext, .wt-short .wt-upnext { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
.wt-wrap .wt-upnext-n, .wt-short .wt-upnext-n { width: 40px; height: 40px; font-size: 20px; }
.wt-wrap .wt-upnext-top, .wt-short .wt-upnext-top { gap: var(--space-sm); }
.wt-wrap .wt-upnext-title, .wt-short .wt-upnext-title { font-size: 16px; }
.wt-wrap .wt-upnext-label, .wt-short .wt-upnext-label { font-size: 11px; }
.wt-wrap .wt-upnext-actions .wt-btn, .wt-short .wt-upnext-actions .wt-btn { height: 44px; padding: 0 var(--space-md); font-size: 15px; }
/* The caption waits (hidden) when it cannot clear the header and the bar. */
.wt-caption.wt-caption-wait { visibility: hidden; }
.wt-butter { background: var(--watch-butter); color: var(--watch-night); }
.wt-play { width: 64px; height: 64px; border-radius: 50%; }
.wt-play .wt-icon svg { width: 30px; height: 30px; }
.wt-pill {
  height: 48px; padding: 0 var(--space-xl); border-radius: var(--radius-pill);
  font-size: 16px; font-weight: 800;
}
.wt-startover { background: var(--watch-line); color: var(--paper); }

/* ── Title card and the error card ─────────────────────────────────────────── */

.wt-titlecard, .wt-error {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; padding: var(--space-xl);
  background: var(--watch-scrim);
}
.wt-card-inner { text-align: center; max-width: 34em; display: grid; justify-items: center; gap: var(--space-md); }
.wt-card-book {
  margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--watch-cream);
}
.wt-card-title { margin: 0 0 var(--space-md); font-size: clamp(22px, 3.7vmin, 80px); font-weight: 800; line-height: 1.2; }
.wt-bigplay { width: 104px; height: 104px; border-radius: 50%; }
.wt-bigplay .wt-icon svg { width: 48px; height: 48px; margin-left: 6px; }
.wt-spinner {
  width: 56px; height: 56px; border-radius: 50%;
  border: 5px solid var(--watch-line); border-top-color: var(--watch-butter);
}
.wt-error-text { margin: 0 0 var(--space-sm); font-size: 19px; font-weight: 700; }

/* ── Captions: never take a click ──────────────────────────────────────────── */

.wt-caption {
  position: absolute; z-index: 6; pointer-events: none;
  display: flex; justify-content: center; text-align: center;
}
.wt-caption-text {
  display: inline; padding: 0.15em 0.55em; border-radius: var(--radius-sm);
  background: var(--watch-scrim); color: var(--watch-cream);
  font-size: clamp(16px, 3.1vmin, 68px); font-weight: 600; line-height: 1.5;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.wt-caption.wt-big .wt-caption-text { font-size: clamp(22px, 4.4vmin, 96px); font-weight: 800; }

/* ── Start over ────────────────────────────────────────────────────────────── */

.wt-startover {
  position: absolute; z-index: 11; left: 50%; transform: translateX(-50%);
  top: calc(max(var(--space-md), env(safe-area-inset-top)) + 64px);
}

/* ── The glass bar ─────────────────────────────────────────────────────────── */

.wt-bar {
  position: absolute; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  width: min(720px, calc(100% - 2 * max(var(--space-lg), env(safe-area-inset-left), env(safe-area-inset-right))));
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  background: var(--watch-glass); border: 1px solid var(--watch-line); border-radius: var(--radius-lg);
}
/* In the full-view layouts the header plate and the bar lie on the picture,
   not on the dim, so they take the full view's controls scrim (cream 10:1 and
   muted 5:1 over a white picture; the glass is only tested over the dim). */
.wt-root:not([data-layout="upright"]) :is(.wt-titles, .wt-bar) { background: var(--watch-controls-scrim); }

/* Hidden on the title card (its place kept), so the card's ▶ is the only play. */
.wt-root:not(.wt-started) .wt-bar { visibility: hidden; }
.wt-scrubrow { display: flex; align-items: center; gap: var(--space-md); }
.wt-scrub {
  flex: 1; min-width: 0; height: 32px; margin: 0;
  accent-color: var(--watch-butter); cursor: pointer;
}
.wt-time {
  color: var(--watch-cream); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wt-buttons { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); }
.wt-side { display: flex; gap: var(--space-sm); }
.wt-right { justify-content: flex-end; }
.wt-root[data-layout="sideways"] .wt-bar { padding-top: var(--space-xs); padding-bottom: var(--space-sm); }
.wt-root[data-layout="sideways"] .wt-buttons { margin-top: 0; }

/* Faded while playing in a full window: the controls and the cursor. */
.wt-idle .wt-chrome { opacity: 0; pointer-events: none; }

/* ── Tell it back: above the glass bar, never over ✕ or play ─────────────── */

.wt-retell {
  position: absolute; z-index: 9; left: 50%; transform: translateX(-50%);
  width: min(960px, calc(100% - 2 * var(--space-lg)));
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--watch-panel); border: 1px solid var(--watch-line); border-radius: var(--radius-lg);
}
.wt-retell-head { margin: 0 0 var(--space-sm); font-size: 14px; font-weight: 800; color: var(--watch-cream); }
.wt-retell-strip {
  display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-xs);
  scroll-snap-type: x proximity; scrollbar-color: var(--watch-line) var(--watch-panel);
}
.wt-retell-card {
  flex: none; width: 168px; padding: 0; border: 0; cursor: pointer; text-align: left;
  background: var(--watch-stage); color: var(--watch-cream); border-radius: var(--radius-sm);
  overflow: hidden; font: inherit; scroll-snap-align: start;
}
.wt-retell-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; max-width: none; }
.wt-retell-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: var(--space-xs) var(--space-sm) var(--space-sm); font-size: 13px; line-height: 1.35;
}
.wt-root[data-layout="sideways"] .wt-retell-card { width: 132px; }
.wt-root[data-layout="sideways"] .wt-retell-text { -webkit-line-clamp: 1; }
.wt-root[data-layout="upright"] .wt-retell-card { width: 128px; }
.wt-idle .wt-retell { opacity: 0; pointer-events: none; }
.wt-retell-open .wt-caption { visibility: hidden; }

/* ── Up next ───────────────────────────────────────────────────────────────── */

.wt-upnext {
  position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 2 * var(--space-lg)));
  padding: var(--space-lg) var(--space-xl);
  background: var(--watch-panel); border: 1px solid var(--watch-line); border-radius: var(--radius-lg);
  display: grid; gap: var(--space-md);
}
.wt-upnext-top { display: flex; align-items: center; gap: var(--space-lg); }
.wt-upnext-n {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--watch-butter); color: var(--watch-night);
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.wt-upnext.wt-stopped .wt-upnext-n { display: none; }
.wt-upnext-words { min-width: 0; }
.wt-upnext-label { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--watch-muted); }
.wt-upnext-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--watch-cream); }
.wt-upnext-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.wt-upnext-actions .wt-btn { flex: 1; }
.wt-stay { background: var(--watch-line); color: var(--paper); }
/* Beside Up next on a large window, Tell it back sits under it. */
.wt-root[data-layout="large"].wt-retell-open .wt-upnext { top: 34%; }
/* Upright, the end panels stack above the bar (Up next, then Tell it back);
   the picture is sized around them, so they never cover it. */
.wt-endstack {
  position: absolute; z-index: 9; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100% - 2 * var(--space-lg)));
  display: flex; flex-direction: column; gap: var(--space-sm);
}
/* The slots only fix the order; the panels are the flex items, so a hidden
   one leaves no gap. */
.wt-slot-upnext, .wt-slot-retell { display: contents; }
.wt-endstack .wt-upnext, .wt-endstack .wt-retell {
  position: static; transform: none; width: 100%; left: auto; top: auto;
}
/* Compact beside Up next: no heading, 120 × 80 cards, one line (as the app). */
.wt-retell.wt-compact .wt-retell-head { display: none; }
.wt-retell.wt-compact .wt-retell-card { width: 120px; }
.wt-retell.wt-compact .wt-retell-text { -webkit-line-clamp: 1; }
/* Sideways the card is placed above the bar by JS; kept small to fit. */
.wt-root[data-layout="sideways"] .wt-upnext {
  top: auto; transform: translateX(-50%); overflow: auto;
  padding: var(--space-sm) var(--space-lg); gap: var(--space-sm);
}
.wt-root[data-layout="sideways"] .wt-upnext-n { width: 44px; height: 44px; font-size: 22px; }

/* ── Light effects: inside the box's clip, under everything, no clicks ─────── */

.wt-fxp { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.wt-fx-petal { background: var(--c); border-radius: 50%; border-top-left-radius: 20%; border: 1px solid var(--watch-fx-edge); }
.wt-fx-flake { background: var(--c); border-radius: 50%; border: 1px solid var(--watch-fx-edge); }
.wt-fx-leaf { background: var(--c); border-top-left-radius: 100%; border-bottom-right-radius: 100%; }
.wt-fx-drop, .wt-fx-ember, .wt-fx-puff, .wt-fx-mote, .wt-fx-glow { background: var(--c); border-radius: 999px; }
.wt-fx-firefly { background: var(--c); border-radius: 50%; box-shadow: 0 0 6px 2px var(--c); }
.wt-fx-blob { background: var(--c); border-radius: 50%; filter: blur(6px); }
.wt-fx-ray { background: var(--c); border-radius: 999px; }
.wt-fx-flash { background: var(--c); }
.wt-fx-bubble { border: 2px solid var(--c); border-radius: 50%; }
.wt-fx-ring {
  position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--watch-fx-edge);
}
.wt-fx-dot { position: absolute; border-radius: 50%; }
.wt-fx-halo { background: var(--c); opacity: 0.35; filter: blur(2px); }
.wt-fx-body { background: var(--c); }
.wt-fx-core { background: var(--watch-cream); }
.wt-fx-butterfly { display: flex; justify-content: center; }
.wt-fx-wing { display: block; width: 45%; height: 100%; background: var(--c); border-radius: 44%; }

/* Read aloud, never seen. */
.wt-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 380px) {
  .wt-side { gap: var(--space-xs); }
  .wt-round { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  .wt-chrome { transition: opacity 0.35s ease; }
  /* The caption eases between above the bar and the picture's foot. */
  .wt-caption { transition: bottom 0.35s ease; }
  .wt-spinner { animation: wt-spin 0.9s linear infinite; }
  @keyframes wt-spin { to { transform: rotate(360deg); } }
  .wt-btn { transition: transform 0.12s ease, background 0.14s ease; }
  .wt-btn:active { transform: scale(0.94); }
  .wt-bar .wt-btn:active { transform: scale(0.94); }
  .wt-startover:active { transform: translateX(-50%) scale(0.96); }
  .watch-hero, .watch-pill { transition: transform 0.12s ease, background 0.14s ease; }
  .watch-hero:active, .watch-pill:active { transform: scale(0.96); }
  .wt-upnext-n.wt-tick { animation: wt-pop 0.35s ease; }
  @keyframes wt-pop { from { transform: scale(1.25); } to { transform: scale(1); } }
}