/* The Review Relay - narrated demo player, embedded on the public
   marketing homepage. Reuses marketing_home.html's own design tokens
   (--bg, --ink, --stamp, --gold, --rule, --bg-raised) rather than
   introducing a second palette, since that page is deliberately
   single-theme (a paper ledger has no dark mode - see its own comment).
   Class-scoped throughout (not ids) so this same markup/script can run
   more than once on one page - the hero and the closing CTA each get
   their own independent player instance. */

.relay-player {
  --rp-stage: #EFE8D9;
  width: 100%;
  min-width: 0;
  max-width: 640px;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(30, 35, 64, 0.14);
  font-family: 'IBM Plex Sans', sans-serif;
}
.relay-player * { box-sizing: border-box; }

.relay-player .rp-stage {
  position: relative;
  background: var(--rp-stage);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.relay-player .rp-stage.tall { aspect-ratio: 16/11; }
.relay-player .rp-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 24px;
  background: var(--bg-raised); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 5px; padding: 0 9px;
  font-family: 'IBM Plex Mono', monospace; font-size: .65rem; color: var(--ink-soft);
}
.relay-player .rp-chrome .rp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.relay-player .rp-chrome .rp-url { margin-left: 7px; }
.relay-player .rp-stage-inner { position: absolute; top: 24px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.relay-player .rp-stage-inner img { width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; }
.relay-player .rp-stage.tall .rp-stage-inner img { object-fit: cover; object-position: top; }
.relay-player .rp-stage.illus .rp-stage-inner { top: 0; }
.relay-player .rp-stage.illus .rp-stage-inner svg { width: 100%; height: 100%; display: block; }
/* Same top-offset reset as .illus, for a "real screen" scene whose own
   chrome bar is hidden (see relay-player.js's renderChrome() - an
   internal *.localhost demo-tenant host isn't shown) - without this the
   screenshot would still leave a blank 24px gap at the top meant for a
   chrome bar that isn't there. */
.relay-player .rp-stage.no-chrome .rp-stage-inner { top: 0; }

.relay-player .rp-caption { padding: 14px 18px 12px; }
.relay-player .rp-vo { font-size: .96rem; line-height: 1.5; margin: 0; min-height: 2.5em; color: var(--ink); }

.relay-player .rp-controls { display: flex; align-items: center; gap: 10px; padding: 0 18px 16px; }
.relay-player .rp-btn {
  border: 1px solid var(--rule); background: var(--bg-raised); color: var(--ink); border-radius: 8px;
  padding: 7px 11px; font-family: 'IBM Plex Sans', sans-serif; font-size: .8rem; cursor: pointer; font-weight: 600;
}
.relay-player .rp-btn:hover { border-color: var(--stamp); color: var(--stamp); }
.relay-player .rp-btn:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
.relay-player .rp-btn.rp-play { background: var(--stamp); border-color: var(--stamp); color: var(--bg-raised); }
.relay-player .rp-btn.rp-play:hover { opacity: .9; color: var(--bg-raised); }

.relay-player:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; max-width: none; }
.relay-player:fullscreen .rp-stage { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.relay-player:fullscreen .rp-thumbs { flex: 0 0 auto; }

.relay-player .rp-rail { flex: 1; display: flex; gap: 3px; height: 7px; }
.relay-player .rp-seg { background: var(--rule); border-radius: 3px; cursor: pointer; position: relative; overflow: hidden; min-width: 3px; }
.relay-player .rp-seg .rp-fill { position: absolute; inset: 0; width: 0%; background: var(--stamp); border-radius: 3px; }
.relay-player .rp-seg.done .rp-fill { width: 100%; }

.relay-player .rp-thumbs { display: flex; gap: 5px; padding: 4px 18px 18px; overflow-x: auto; }
.relay-player .rp-thumb {
  flex: 0 0 auto; width: 52px; height: 33px; border-radius: 5px; border: 2px solid transparent; cursor: pointer;
  background: var(--rp-stage); overflow: hidden; opacity: .55; transition: opacity .15s, border-color .15s;
}
.relay-player .rp-thumb.active { opacity: 1; border-color: var(--stamp); }
.relay-player .rp-thumb img, .relay-player .rp-thumb svg { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

@media (prefers-reduced-motion: reduce) { .relay-player .rp-fill { transition: none !important; } }