/* The video-review card — the shared visual for the shared behaviour.
 *
 * WHY THIS FILE EXISTS. ks-video-review.v1.js is a surface-agnostic enhancement:
 * it reads moments from a <script type="application/json" data-vr-moments> block
 * and adds markers, keyboard movement and a one-pass Play. Its LOOK, though,
 * lived entirely inside ks-showroom.v1.css as `.sr-vr .vr-*` — a surface
 * stylesheet owning a shared component's appearance. That was fine while the
 * product tour was the only place it rendered, and stopped being fine the moment
 * the marketing homepage needed the same card: the alternatives were shipping a
 * tour stylesheet to the homepage or writing the card twice.
 *
 * THE SPLIT. `.vr` is the component and lives here — chrome, timeline, markers,
 * thread, controls, reduced-motion. `.sr-vr` stays in ks-showroom.v1.css and
 * carries only what the TOUR decides: its 620px width discipline. A second
 * surface adds its own width rule and nothing else.
 *
 * Tokens only, and the same ones both surfaces already load (ks-tokens.v1.css),
 * which is what makes one stylesheet possible at all.
 *
 * THE ACCENT IS --accent, NOT --tn-accent. The card reads the dojo's own colour
 * on a tenant page and had no colour at all on the marketing homepage, which
 * never sets --tn-accent: the timeline, playhead and markers silently fell back
 * to a hardcoded blue while the rest of the page used the brand. --accent is
 * declared in ks-tokens.v1.css as `var(--tn-accent, var(--ks-blue))` — the
 * tenant's accent where there is one, the platform's where there is not, which
 * is exactly the question a shared component needs answered.
 */

.vr {
  background: var(--ks-white);
  border-radius: var(--ks-r-md);
  overflow: hidden;
  box-shadow: var(--ks-e2);
}

.vr .vr-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .95rem;
  background: var(--ks-navy);
}

.vr .vr-bar b {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--ks-white);
}

.vr .vr-bar em {
  font-style: normal;
  margin-left: auto;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
}

.vr .vr-frame { position: relative; overflow: hidden; background: #08060a; }

.vr .vr-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: object-position .45s ease, transform .45s ease;
}

.vr .vr-frame.vr-f2 img { object-position: 34% 16%; transform: scale(1.34); }
.vr .vr-frame.vr-f3 img { object-position: 70% 26%; transform: scale(1.16); }

.vr .vr-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
}

.vr .vr-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 .95rem .7rem;
}

.vr .vr-track { position: relative; height: 22px; }

.vr .vr-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .28);
}

.vr .vr-played {
  position: absolute;
  left: 0;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent, var(--ks-blue-bright));
  transition: width .35s ease;
}

.vr .vr-playhead {
  position: absolute;
  top: 11px;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--ks-white);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
  transition: left .35s ease;
}

/* 26px, not the 18px this was, and the dot inside has not moved.
   WCAG 2.2 AA 2.5.8 asks for 24x24 of target; the visible mark is a 9px dot and
   is meant to stay one — so the BUTTON grew and the dot did not. The track's
   scrubber sits at y=11 (top:11px on .sr-vr's handle), so a 26px box centred on
   it starts at -2px, exactly as an 18px box started at 2px. */
.vr .vr-marker {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.vr .vr-marker i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent, var(--ks-blue-bright));
  border: 2px solid rgba(0, 0, 0, .3);
  transition: transform .2s ease, background .2s ease;
}

.vr .vr-marker.is-on i {
  transform: scale(1.35);
  background: var(--ks-white);
  border-color: var(--accent, var(--ks-blue-bright));
}

.vr .vr-marker:focus-visible {
  outline: 2px solid var(--ks-white);
  outline-offset: 2px;
  border-radius: 50%;
}

.vr .vr-ctl { display: flex; align-items: center; gap: .7rem; margin-top: .1rem; }
.vr .vr-ctl svg { display: block; width: 15px; height: 15px; }
.vr .vr-ctl .sp { margin-left: auto; }

.vr .vr-clock {
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .95);
}

.vr .vr-thread { padding: .95rem 1.1rem 1rem; }

.vr .vr-head { display: flex; align-items: center; gap: .55rem; }

.vr .vr-stamp {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: .8rem;
  color: var(--ks-white);
  background: var(--ks-navy);
  padding: .1rem .45rem;
  border-radius: var(--ks-r-xs);
}

.vr .vr-who {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* Was --ks-n-400 at 2.88:1 -- the widest gap on the tour, on a label that
     names who is speaking in a coaching thread.
     LAYERED, because this component now renders on two surfaces that carry
     different token sets: --ks-ink-2 is a TENANT token (dojo-global-theme-
     tokens.v1.css), which the marketing homepage does not load, so a bare
     var() here painted nothing there. --ink-2 is the homepage's own secondary
     ink; the literal is the tenant value, so all three agree. Same shape as
     --accent above, and tests/repo/homepage-css-tokens.spec.ts is what caught
     it. */
  color: var(--ks-ink-2, var(--ink-2, #475467));
}

.vr .vr-note {
  margin: .4rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ks-n-900);
}

.vr .vr-replywrap {
  margin: .6rem 0 0 .9rem;
  padding-left: .8rem;
  border-left: 2px solid var(--ks-n-200);
}

.vr .vr-reply {
  margin: .15rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ks-n-700);
}

.vr .vr-sent {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--ks-n-100);
  font-size: .78rem;
  color: var(--ks-n-500);
}

.vr .vr-sent i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--ks-blue));
}

.vr .vr-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .95rem;
  background: var(--ks-n-50);
  border-top: 1px solid var(--ks-n-100);
}

.vr .vr-play {
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ks-navy);
  background: var(--ks-white);
  border: 1px solid var(--ks-n-300);
  border-radius: var(--ks-r-pill);
  padding: .35rem .9rem;
  cursor: pointer;
}

.vr .vr-play:hover { border-color: var(--ks-n-400); }

.vr .vr-hint { font-size: .8rem; color: var(--ks-n-500); }

/* Nothing moves on its own, and under this preference nothing transitions
   either. Play is hidden entirely by the script — a sequence that advances
   itself is exactly what the preference asks not to happen. */
@media (prefers-reduced-motion: reduce) {
  .vr .vr-frame img,
  .vr .vr-played,
  .vr .vr-playhead,
  .vr .vr-marker i { transition: none; }
}

/* The review's live region — visually hidden, announced. It belongs to the
   component because the announcement is the component's own accessibility
   contract: show() writes "Moment 0:06. <note>" here on every change, which is
   how a screen-reader user learns the picture and the note moved together. */
.vr-sr-only {

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