/* ---------- Video players ---------- */
.group { margin: 0 0 var(--sp-2); }
.group:last-child { margin-bottom: 0; }
.group .prompt { font-size: 14px; color: var(--muted); margin: 0 0 6px; font-family: var(--serif); font-style: italic; }
.players { display: grid; gap: 10px; grid-template-columns: repeat(var(--n, 1), 1fr); }
.player { position: relative; z-index: 41; background: var(--video-plate); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--video-plate); }
.player .label { position: absolute; left: 8px; top: 8px; background: var(--video-label-bg); color: var(--video-label-ink); font: 400 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius); }
.player .failed-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; color: var(--video-fail-ink); background: var(--video-fail-bg); font-size: 13px; }
.player .failed-msg code { color: var(--video-fail-code); word-break: break-all; }
/* Play bar under a video group: a small round icon button, a thin scrub line and the time. Quiet and always visible
 * (nothing waits for a hover, so touch screens see it), neutral colors only. The line is a range input that paints
 * its own filled part from --p (set in js/videos.js); the thumb shows on hover, focus and drag, and always on touch. */
.controls { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.controls .pp {
  position: relative; flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.controls .pp::after { content: ""; position: absolute; inset: -8px; }   /* 44 px touch target around the 28 px circle */
.controls .pp svg { display: block; fill: currentColor; }
.controls .pp .i-pause, .controls .pp[aria-pressed="true"] .i-play { display: none; }
.controls .pp[aria-pressed="true"] .i-pause { display: inline; }
.controls .pp:hover { color: var(--ink); border-color: var(--muted); }
.controls .pp:focus-visible, .controls input[type=range]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.controls input[type=range] {
  --p: 0%; flex: 1; min-width: 0; height: 16px; margin: 0; padding: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--muted) 75%, transparent) var(--p), var(--line) var(--p)) center / 100% 2px no-repeat;
}
.controls input[type=range]::-webkit-slider-runnable-track { height: 16px; background: transparent; border: 0; }
.controls input[type=range]::-moz-range-track { height: 16px; background: transparent; border: 0; }
.controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 10px; height: 10px; margin-top: 3px; border: 0; border-radius: 50%;
  background: var(--muted); opacity: 0; transition: opacity 0.2s ease;
}
.controls input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--muted); opacity: 0; transition: opacity 0.2s ease; }
.controls:hover input[type=range]::-webkit-slider-thumb, .controls input[type=range]:focus-visible::-webkit-slider-thumb, .controls input[type=range]:active::-webkit-slider-thumb { opacity: 1; }
.controls:hover input[type=range]::-moz-range-thumb, .controls input[type=range]:focus-visible::-moz-range-thumb, .controls input[type=range]:active::-moz-range-thumb { opacity: 1; }
.controls .time { font: 400 12px/1 var(--mono); color: var(--faint); min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: none) {
  .controls input[type=range]::-webkit-slider-thumb { opacity: 1; }
  .controls input[type=range]::-moz-range-thumb { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .controls .pp, .controls input[type=range]::-webkit-slider-thumb, .controls input[type=range]::-moz-range-thumb { transition: none; }
}

/* ---------- Scene selector (slots with data-select): one thumbnail button per scene, directly above the video grid ----------
 * Active scene: accent outline on its thumbnail, full opacity. Other scenes: dimmed, full opacity on hover or focus.
 * Six in a row on desktop; three per row on phones. The title is visually hidden; if a thumbnail fails to load, js removes it and the title shows. */
.scene-select { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2) 12px; margin: 0 0 var(--sp-3); padding: 2px 2px 0; }
.scene-select button {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; text-align: left; font: 400 13px/1.3 var(--mono);
}
.scene-select button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.scene-thumb { display: block; aspect-ratio: 832 / 480; background: var(--video-plate); border-radius: var(--radius); overflow: visible; }
.scene-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); opacity: 0.62; }
.scene-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene-select button.no-thumb .scene-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; text-wrap: balance; overflow-wrap: anywhere; }
.scene-select button:hover .scene-thumb img, .scene-select button:focus-visible .scene-thumb img { opacity: 1; }
.scene-select button:hover .scene-title, .scene-select button:focus-visible .scene-title { color: var(--ink); }
.scene-select button[aria-pressed="true"] .scene-thumb { outline: 2px solid var(--accent); outline-offset: 0; }
.scene-select button[aria-pressed="true"] .scene-thumb img { opacity: 1; }
.scene-select button[aria-pressed="true"] .scene-title { color: var(--ink); }
.scene-select button.no-thumb .scene-thumb { display: none; }
.scene-select button.no-thumb { justify-content: center; padding: 10px 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.scene-select button.no-thumb[aria-pressed="true"] { border-color: var(--accent); }

/* ---------- Depth card: wider than the page column, 12-column grid, clip aspect, PixVid outlined ----------
 * Desktop: Source, Depth, PixVid on top (4 columns each); baselines below (3 columns each; with 1 to 3 baselines
 * they are 4 columns each and centered). Under 900 px: PixVid full width, Source and Depth side by side, baselines 2 per row. */
#res-depth.has-media, #res-control.has-media { justify-self: center; width: min(1360px, calc(100vw - 2 * var(--gutter)), calc(100vw - 2 * var(--side-nav-room, 0px))); }
#res-depth .players { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
#res-depth .player { aspect-ratio: 832 / 480; }
#res-depth .player.lead { grid-column: span 4; }
#res-depth .player.base { grid-column: span 3; }
#res-depth .players[data-base="1"] .player.base { grid-column: 5 / span 4; }
#res-depth .players[data-base="2"] .player.base:nth-child(4) { grid-column: 3 / span 4; }
#res-depth .players[data-base="2"] .player.base:nth-child(5) { grid-column: 7 / span 4; }
#res-depth .players[data-base="3"] .player.base { grid-column: span 4; }
#res-depth .player.ours { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Text-to-video card: one 1664x960 PixVid sample at a time, full card width, scene buttons above it ----------
 * Eight scenes: eight thumbnails in a row on desktop, four per row (two rows) under 900 px. The prompt sits under the video. */
#res-t2v .scene-select { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2) 10px; }   /* 12 scenes: 6 + 6 */
#res-t2v .player { aspect-ratio: 1664 / 960; }
#res-t2v .group .prompt { margin: 10px 0 0; font-size: 15px; }

/* ---------- Camera clips (864:480): the abrupt camera controls figure and the camera control card ----------
 * The tile has the clip's own aspect, so a clip fills it with no bars. */
#keys-live .player, #res-control .player { aspect-ratio: 864 / 480; }
#res-control .player .label { text-transform: none; letter-spacing: 0.02em; }

/* Figure above "Steer it yourself": three PixVid clips side by side, one column under 700 px. `.figure` sets display: block,
 * which would beat the hidden attribute, so the empty figure needs its own [hidden] rule. */
.slot-fig[hidden] { display: none; }
.slot-fig > .desc { margin: 0 auto var(--sp-2); max-width: var(--measure); color: var(--muted); font-size: 15px; line-height: 1.55; }
#keys-live .slot:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) 12px; align-items: start; }
#keys-live .group { margin: 0; min-width: 0; }

/* Camera control card, the same width as the depth card. camera_paths: one row of PixVid clips with a label on each tile.
 * camera_compare: Real video, PixVid, Baseline in a row (4 columns each of 12); a scene without a real video shows PixVid
 * and Baseline at the same tile size, centered. PixVid is outlined in the accent, as in the depth card. */
#res-control .slot + .slot:not([hidden]) { margin-top: var(--sp-4); }
#res-control [data-slot="camera_paths"] .players { gap: 8px; }
#res-control [data-slot="camera_compare"] .players { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
#res-control [data-slot="camera_compare"] .player.cmp { grid-column: span 4; }
#res-control [data-slot="camera_compare"] .players[data-n="2"] .player.cmp:nth-child(1) { grid-column: 3 / span 4; }
#res-control [data-slot="camera_compare"] .players[data-n="2"] .player.cmp:nth-child(2) { grid-column: 7 / span 4; }
#res-control [data-slot="camera_compare"] .player.ours { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Results ---------- */
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.result { min-width: 0; padding-top: var(--sp-3); }
.result > h3 { margin: 0 0 var(--sp-1); font-size: 22px; text-align: center; }
.result > .desc { max-width: var(--measure); color: var(--muted); font-size: 15px; margin: 0 auto var(--sp-2); line-height: 1.5; }
.result .slot + .slot:not([hidden]) { margin-top: var(--sp-2); }
.result.has-media[data-span="full"] { grid-column: 1 / -1; }

/* ---------- Tablets ---------- */
@media (max-width: 899px) {
  .results-grid { grid-template-columns: minmax(0, 1fr); }
  .result.has-media[data-span="full"] { grid-column: auto; }
  #res-depth.has-media, #res-control.has-media { width: auto; }
  #res-t2v .scene-select { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 12 scenes: 4 + 4 + 4 */
  #res-depth .players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #res-depth .player.lead, #res-depth .player.base,
  #res-depth .players[data-base] .player.base:nth-child(n) { grid-column: auto; }
  #res-depth .player.k-pixvid { grid-column: 1 / -1; order: -1; }
  /* camera compare: one column, PixVid first */
  #res-control [data-slot="camera_compare"] .players { grid-template-columns: minmax(0, 1fr); }
  #res-control [data-slot="camera_compare"] .player.cmp,
  #res-control [data-slot="camera_compare"] .players[data-n] .player.cmp:nth-child(n) { grid-column: auto; }
  #res-control [data-slot="camera_compare"] .player.k-pixvid { order: -1; }
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  #keys-live .slot:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .players { grid-template-columns: 1fr; }
  .scene-select { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) 10px; }
  .scene-select button { font-size: 12px; }
  #res-t2v .scene-select { gap: var(--sp-2) 8px; }
  #res-t2v .scene-select button { font-size: 11px; gap: 6px; }   /* four per row at 320 px */
  #res-control .scene-select { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* four scenes: two by two */
  .controls .time { min-width: 0; }
  /* depth card keeps its 2-column layout (the rule above would make 7 tiles a tall stack); labels shrink to fit 320 px */
  #res-depth .players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #res-depth .player .label { left: 5px; top: 5px; padding: 2px 5px; font-size: 10px; letter-spacing: 0.03em; }
}