/* Showcase S1 (DEC-530..533): broadcast camera dip, instant replay bar, photo finish, photo mode. Built on glass.css
   tokens; loaded before access.css so high contrast wins. No inline styles: dynamic values are custom properties. */

/* The dip between two broadcast shots (opacity from --dip, set through the CSSOM each frame). */
.cam-dip { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: #000; opacity: 0; visibility: hidden; }
.cam-dip.on { visibility: visible; opacity: var(--dip, 0); }
:root[data-motion="reduced"] .cam-dip { display: none; }

/* Photo finish in the results. */
.pf { margin: 12px 0 4px; }
.pf figcaption { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: var(--ws-fs-s, .9rem); }
.pf-close { color: var(--ws-gold-400, #ffc23d); font-weight: 700; }
.pf canvas { display: block; width: 100%; height: auto; margin-top: 6px; border-radius: var(--ws-radius-s, 10px); border: 1px solid var(--ws-edge, rgba(255,255,255,.16)); background: #2a2f37; }
.pf .fineprint { margin: 4px 0 0; }
.showcase-actions:has(> button:not([hidden])) { margin-bottom: 6px; }
.showcase-actions:not(:has(> button:not([hidden]))) { display: none; }

/* While the replay or photo mode runs, the race HUD and results stay out of the way. */
body.replaying #hud, body.photo-mode #hud, body.photo-mode #tags { display: none; }
body.photo-clean #companion, body.photo-clean #replay-bar, body.photo-clean #captions { display: none !important; }
body.results-covered #results, body.results-covered #coach { display: none; }
/* "Other sports" photo mode (DEC-640): the sport's HUD, controls, results and replay bar give way to the picture. */
body.photo-mode #proto-hud, body.photo-mode #proto-touch, body.photo-mode #proto-sight, body.photo-mode #proto-panel, body.photo-mode #proto-results, body.photo-mode #proto-replay-bar { display: none !important; }

/* Replay bar: bottom centre, above the safe area. */
.replay-bar { position: fixed; z-index: 22; inset-inline: 0; margin-inline: auto; bottom: calc(14px + env(safe-area-inset-bottom)); width: min(760px, calc(100vw - 28px));
  display: grid; gap: 8px; padding: 10px 12px; }
.rp-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rp-badge { text-transform: uppercase; letter-spacing: var(--ws-tracking-caps, .14em); font-weight: 800; font-size: var(--ws-fs-xs, .8rem);
  color: #12070a; background-color: var(--ws-coral-400, #ff6b6b); border-radius: var(--ws-radius-pill, 999px); padding: 1px 9px; }
.rp-clock { font-family: var(--ws-font-mono, monospace); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; unicode-bidi: isolate; direction: ltr; }
.rp-src { color: var(--ws-text-muted, #d0d8e2); }
.rp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-actions button { flex: 1 1 auto; min-height: 36px; }
/* Online match replays (DEC-648): the share row and its fallback link field. */
.rp-share { margin-top: 6px; align-items: center; }
.rp-share[hidden], .rp-share [hidden] { display: none; }
.rp-share input { flex: 1 1 100%; min-height: 36px; font: inherit; padding-inline: 8px; }

/* Photo mode panel: a side sheet on wide screens, a bottom sheet on narrow and short ones. */
.photo-panel { position: fixed; z-index: 23; inset-inline-end: 14px; top: 14px; width: min(320px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto;
  display: grid; gap: 8px; padding: 12px 14px; }
.photo-panel h2 { margin: 0; font-size: 1.05rem; }
.ph-help { margin: 0; font-size: var(--ws-fs-xs, .8rem); color: var(--ws-text-muted, #d0d8e2); }
.photo-panel .field, .photo-panel .range { display: grid; gap: 2px; font-size: var(--ws-fs-s, .9rem); }
.photo-panel .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-status { margin: 0; min-height: 1.2em; font-size: var(--ws-fs-xs, .8rem); color: var(--ws-aqua-300, #8ff5ea); }
.ph-show { position: fixed; z-index: 23; inset-inline-end: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); opacity: .55; }
.ph-show:hover, .ph-show:focus-visible { opacity: 1; }
.photo-vignette { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 95%); }
body.photo-mode canvas { cursor: grab; touch-action: none; }

@media (max-width: 760px), (max-height: 520px) {
  .photo-panel { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); inset-inline: 8px; width: auto; max-height: 52vh; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px; }
  .photo-panel h2, .ph-help, .photo-panel .actions, .ph-status, #ph-dof-note { grid-column: 1 / -1; }
  .ph-help { display: none; }
  .replay-bar { bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); padding: 8px; }
  .rp-actions button { min-height: 40px; font-size: .82rem; padding-inline: 8px; }
}
@media (pointer: coarse) { .rp-actions button, .photo-panel button { min-height: var(--ws-target, 44px); } }