#sample-notice { padding: 8px 14px; background: #163039; color: #d7ebed; font: 12px/1.5 system-ui; }
#sample-notice strong { color: #effffb; }
#sample-notice details { margin-top: 3px; }
#sample-notice summary { width: fit-content; min-height: 24px; cursor: pointer; color: #b6eadc; }
#sample-notice p { margin: 4px 0 0; max-width: 1100px; }
#sample-notice [data-demo-only] { display: none; }
html[data-viewer-mode="sample"] #sample-notice [data-demo-only] { display: inline; }
/* Equal-sized panes in either orientation. Inline flex remains the user's drag override. */
body[data-replay-layout] #view-replay.active #main { height: max(58vh, 520px); min-height: 0; }
body[data-replay-layout] #view-replay.active #canvas-wrapper { min-height: 0; height: 100%; }
body[data-replay-layout] #view-replay.active #clip-wrap, body[data-replay-layout] #view-replay.active #stage-3d { flex: 1 1 0%; min-width: 0; min-height: 0; width: auto; height: auto; }
body[data-replay-layout] #view-replay.active #clip-wrap { border: 0; }
body[data-replay-layout="side-by-side"] #view-replay.active #canvas-wrapper { flex-direction: row; }
body[data-replay-layout="side-by-side"] #pane-split { width: 6px; cursor: col-resize; }
#replay-dock :is(#replay-toggle-gauges,#replay-toggle-split) { min-height:38px;padding:8px 12px;border:1px solid #ffffff45;border-radius:8px;background:#203440;color:#fff;font:12px system-ui;cursor:pointer; }
#replay-dock :is(#replay-toggle-gauges,#replay-toggle-split)[aria-pressed="true"] { border-color:#8fdfca;background:#28514f; }
#replay-dock :is(#replay-toggle-gauges,#replay-toggle-split):focus-visible { outline:2px solid #8fdfca;outline-offset:2px; }
body[data-replay-layout="stacked"] #view-replay.active #main { height: max(80vh, 640px); }
body[data-replay-layout="stacked"] #view-replay.active #canvas-wrapper { flex-direction: column; }
body[data-replay-layout="stacked"] #view-replay.active #clip-wrap, body[data-replay-layout="stacked"] #view-replay.active #stage-3d { width: 100%; }
body[data-replay-layout="stacked"] #pane-split { width: 100%; cursor: row-resize; }
body[data-replay-layout="stacked"] #pane-split::after { left: 50%; top: -4px; width: 44px; height: 14px; transform: translateX(-50%); }
#replay-view-controls { position: fixed; left: max(8px, calc(100vw - 112px)); top: 8px; z-index: 1005; }
#replay-view-controls, #replay-view-panel button, #replay-view-panel select { background: #182735; color: #e6f1f7; border: 1px solid #638391; border-radius: 6px; padding: 8px 10px; font: 12px system-ui; cursor: pointer; }
#replay-view-controls:focus-visible, #replay-view-panel :focus-visible { outline: 2px solid #88e2cd; outline-offset: 2px; }
#replay-view-panel { position: fixed; top: 48px; left: max(12px, calc(100vw - 422px)); z-index: 1006; width: min(410px, calc(100vw - 24px)); max-height: calc(100dvh - 64px); overflow-y: auto; box-sizing: border-box; padding: 16px; color: #e6f1f7; background: #10202f; border: 1px solid #638391; border-radius: 10px; box-shadow: 0 12px 50px #0008; font: 13px/1.45 system-ui; }
#replay-view-panel[hidden] { display: none; }
.replay-view-heading, .replay-view-actions, .replay-gauge-head, .replay-layout-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.replay-view-heading strong { font-size: 18px; }
.replay-view-actions { flex-wrap: wrap; }
#replay-view-panel p { color: #a8c0d0; font-size: 12px; }
.replay-gauge-columns, .replay-gauge-choice { display: grid; grid-template-columns: minmax(0,1fr) 48px 48px; gap: 12px; align-items: center; padding: 8px 0; }
.replay-gauge-columns { text-align: center; color: #a8c0d0; }
.replay-gauge-choice { border-top: 1px solid #ffffff15; font-size: 12px; }
.replay-gauge-choice input { width: 18px; height: 18px; justify-self: center; accent-color: #80d6bf; cursor: pointer; }
/* A 3D-only gauge is still rendered by the shared video mirror, but never shown there. */
#video-gauge-overlay > [data-video-selected="false"]:not([data-gauge-dot-hidden="true"]) { display: none !important; }
#view-replay #video-gauge-overlay .video-gauge-mirror[data-gauge-dot-hidden="true"] {
  visibility:hidden!important;pointer-events:none!important;
}
#view-replay #video-gauge-overlay .video-gauge-mirror[data-gauge-dot-hidden="true"] > .video-gauge-visibility-dot {
  visibility:visible!important;pointer-events:auto!important;
}
#three-gauge-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 6px; padding: 8px; overflow: hidden; }
/* Draggable in every mode, not only Clean view: the overlay itself stays click-through so the
   camera still orbits from empty space, while each gauge card takes the pointer (Jay 2026-09-11). */
#view-replay #three-gauge-overlay .three-gauge-mirror { position: relative; left: auto; top: auto; flex: 0 1 138px; width: 138px; height: 112px; min-width: 72px; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; border: 1px solid #e2e8f04d; border-radius: 8px; background: #94a3b830; overflow: hidden; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
#view-replay #three-gauge-overlay .three-gauge-mirror:active { cursor: grabbing; }
#view-replay #three-gauge-overlay .three-gauge-mirror[hidden] { display: none; }
#three-gauge-overlay .video-gauge-mirror-canvas { min-width: 0; width: 100%; height: 100%; object-fit: contain; }
#three-gauge-overlay .video-gauge-mirror-label, #three-gauge-overlay .video-gauge-mirror-caption { text-align: center; font: 10px system-ui; color: #f1f5f9; }
#three-gauge-overlay .video-gauge-mirror-readout { text-align: center; color: #fff; }
#three-gauge-overlay .video-gauge-mirror-readout strong { font: 700 18px system-ui; }
#three-gauge-overlay .video-gauge-mirror-readout small { font: 10px system-ui; margin-left: 5px; }
/* Clean mode preserves gauge truth states and selections; it removes surrounding chrome. */
body.replay-clean { overflow: hidden; }
body.replay-clean #root { display: block; height: 100dvh; overflow: hidden; }
body.replay-clean #root > :not(#view-replay), body.replay-clean #view-replay > :not(#main) { display: none !important; }
body.replay-clean #view-replay.active { display: block; height: 100dvh; min-height: 0; }
body.replay-clean[data-replay-layout] #view-replay.active #main { position: static; height: 100dvh; min-height: 0; }
body.replay-clean #stage-3d > :not(#canvas):not(#three-gauge-overlay):not([data-inset-handle]),
body.replay-clean #clip-wrap > :not(#clip-stage):not(#replay-turn-map):not(#replay-dock),
body.replay-clean #clip-stage > :not(#clip-video):not(#video-gauge-overlay):not(#stage-3d):not(#video-loading):not(#loading-overlay),
body.replay-clean .video-gauge-mirror-resize { display: none !important; }
body.replay-clean .video-gauge-mirror { cursor: grab !important; pointer-events: auto !important; touch-action: none; }
body.replay-clean #clip-video::-webkit-media-controls { display: none !important; }
@media(max-width: 600px) {
  #view-replay #three-gauge-overlay .three-gauge-mirror { flex-basis: 100px; width: 100px; height: 90px; }
}

/* Keep the original render targets measurable while their deck is off-screen. */
body.replay-clean #view-replay > #gauge-deck { display: block !important; position: fixed; left: -100000px; top: 0; width: 1200px; height: auto; visibility: hidden; pointer-events: none; }
/* The inset moves the existing replay stage; it does not create a second scene. */
#video-gauge-overlay > [data-metric="turn-map"] { cursor: default !important; }
body[data-replay-inset-active="true"] #view-replay.active #clip-wrap { flex: 1 1 100%; width: 100%; height: 100%; }
body[data-replay-inset-active="true"] #pane-split { display: none; }
body[data-replay-inset-active="true"] #view-replay.active #stage-3d { position: absolute; flex: none; z-index: 20; min-width: 0; min-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid #ffffff60; box-sizing: border-box; }
body[data-replay-inset-active="true"] #stage-3d > :not(#canvas):not(#three-gauge-overlay):not([data-inset-handle]) { display: none !important; }
#stage-3d [data-inset-handle] { display: none; }
body[data-replay-inset-active="true"] #stage-3d [data-inset-handle] { display: block; position: absolute; z-index: 30; color: #fff; border: 0; background: #14202db3; touch-action: none; user-select: none; font: 11px system-ui; padding: 6px 8px; }
#replay-inset-grip { top: 0; left: 0; right: 0; cursor: move; text-align: left; }
#replay-inset-resize { right: 0; bottom: 0; width: 32px; height: 32px; cursor: nwse-resize; }
body[data-replay-inset-active="true"][data-replay-inset-slope="false"] #stage-3d { background: transparent; }
body.replay-clean[data-replay-inset-active="true"] #view-replay.active #stage-3d { border-color: transparent; }
body.replay-clean[data-replay-inset-active="true"] #stage-3d [data-inset-handle] { opacity: 0; }
body.replay-clean[data-replay-inset-active="true"] #stage-3d:hover [data-inset-handle],
body.replay-clean[data-replay-inset-active="true"] #stage-3d:focus-within [data-inset-handle] { opacity: 1; }
#replay-inset-slope-row { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
#replay-inset-slope-row[hidden], #replay-inset-hint[hidden] { display: none; }
#replay-inset-slope { width: 20px; height: 20px; accent-color: #80d6bf; }

/* Model-only presentation applies equally to separate panes and the movable inset. */
body[data-replay-model-only="true"] #view-replay.active #stage-3d {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
body[data-replay-model-only="true"] #stage-3d > :not(#canvas):not([data-inset-handle]) { display: none !important; }
body[data-replay-model-only="true"][data-replay-inset-active="true"] #stage-3d [data-inset-handle] { opacity: 0; }
body[data-replay-model-only="true"][data-replay-inset-active="true"] #stage-3d:hover [data-inset-handle],
body[data-replay-model-only="true"][data-replay-inset-active="true"] #stage-3d:focus-within [data-inset-handle] { opacity: 1; }
body[data-replay-inset-active="true"] #stage-3d :is(#replay-inset-smaller,#replay-inset-bigger) {
  right:auto;bottom:auto;width: 32px; height: 32px; padding:0;border-radius: 6px; font-size: 18px; cursor: pointer;pointer-events:auto;
  background: rgba(20,32,45,.08); border: 1px solid #ffffffa6; box-shadow: none;
  text-shadow: 0 1px 3px #000; opacity: 1; }
body[data-replay-inset-active="true"] #stage-3d :is(#replay-inset-smaller,#replay-inset-bigger):hover { background: rgba(20,32,45,.2); }
body[data-replay-inset-active="true"] #stage-3d [data-inset-handle]:is(:hover,:focus-visible) { opacity: 1; outline: 2px solid #86efdc; outline-offset: 1px; }
body[data-replay-inset-active="true"] #stage-3d[data-adjusting-rider="true"] #replay-inset-grip { cursor: grabbing; opacity: 1; border-style: solid; }

/* Compact controls follow the projected actor, not the invisible canvas corners. */
body[data-replay-inset-active="true"] #stage-3d [data-inset-handle][hidden] { display:none!important; }
body[data-replay-inset-active="true"] #stage-3d [data-inset-handle].rider-tool {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:36px;height:36px;right:auto;bottom:auto;padding:0;border-radius:6px;
  border:1px solid #ffffffb3;background:rgba(16,35,48,.3);color:white;
  opacity:1;pointer-events:auto;text-shadow:0 1px 3px #000;text-align:center;
}
body[data-replay-inset-active="true"] #stage-3d .rider-tool span { font:18px/18px system-ui; }
body[data-replay-inset-active="true"] #stage-3d .rider-tool small { font:9px/11px system-ui;color:inherit; }
body[data-replay-inset-active="true"] #stage-3d #replay-inset-grip::after { display:none; }
body[data-replay-inset-active="true"] #stage-3d #replay-inset-direction { cursor:ew-resize; }
body[data-replay-inset-active="true"] #stage-3d #replay-inset-stance { cursor:pointer; }

body[data-replay-model-only="true"] #turn-marker-panel,
body.replay-clean #mirror-all-gauges { display: none !important; }

/* Fixed transport stays outside the controls hidden by Clean view. */
#replay-clean-play {
  position:fixed; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:1007; min-width:110px; min-height:48px; padding:12px 22px;
  color:#fff; background:rgba(30,42,54,.28); border:1px solid #ffffff80; border-radius:999px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font:700 16px system-ui; text-shadow:0 1px 3px #000; box-shadow:0 2px 12px #0003;
  cursor:pointer; opacity:1; transition:opacity 180ms ease;
}
#replay-clean-play[hidden] { display:none; }
#replay-clean-play[data-concealed="true"] { opacity:0; pointer-events:none; }
#replay-clean-play:focus-visible { opacity:1; pointer-events:auto; outline:2px solid #fff; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { #replay-clean-play { transition:none; } }

#replay-clean-align { position: fixed; right: 18px; top: 64px; z-index: 1007; padding: 10px 16px; border: 1px solid #ffffff80; border-radius: 12px; background: #18243030; backdrop-filter: blur(10px); color: white; font: 700 14px system-ui; text-shadow: 0 1px 3px #000; cursor: pointer; }
#replay-clean-align[hidden] { display: none; }
/* Gauges must receive drags even where the transparent rider inset overlaps. */
body.replay-clean #view-replay.active.has-clip #video-gauge-overlay:not([hidden]) { z-index: 25; }

#replay-clean-progress { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(680px, 88vw); z-index: 1007; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #ffffff70; border-radius: 12px; background: #18243030; backdrop-filter: blur(10px); color: white; font: 700 14px system-ui; text-shadow: 0 1px 3px #000; }
#replay-clean-progress[hidden] { display: none; }
#replay-clean-progress input { flex: 1; min-width: 0; accent-color: white; }
#replay-clean-progress span { white-space: nowrap; font-variant-numeric: tabular-nums; }
#replay-clean-play { bottom: 70px; }
body.replay-clean[data-clean-controls-hidden="true"] :is(#replay-clean-play, #replay-clean-progress, #replay-clean-align, #replay-view-controls, #replay-view-panel, #replay-reset-layout, #replay-gauge-size, #rider-preview-controls, [data-inset-handle]) { opacity: 0 !important; pointer-events: none !important; }

/* Pose editing stays at the top right and shares playback control auto-hide. */
body > #rider-preview-controls { position: fixed; top: 108px; right: 18px; z-index: 1008; width: min(340px, calc(100vw - 36px)); max-height: calc(100dvh - 130px); overflow-y: auto; box-sizing: border-box; padding: 12px; border: 1px solid #ffffff70; border-radius: 12px; background: rgba(24,36,48,.52); backdrop-filter: blur(14px); color: white; text-shadow: 0 1px 3px #000; }
body > #rider-preview-controls > summary { cursor: pointer; font: 700 14px system-ui; }

#replay-reset-layout { position: fixed; top: 64px; right: 155px; z-index: 1007; padding: 10px 16px; color: white; border: 1px solid #ffffff80; border-radius: 12px; background: #18243030; backdrop-filter: blur(10px); cursor: pointer; }
#replay-reset-layout[hidden] { display: none; }
#video-gauge-overlay .video-gauge-mirror-label { font-size: var(--gauge-fit-font, 12px); }
#video-gauge-overlay .video-gauge-mirror-canvas { min-height: 0; }
/* Scale typography with its card, not the browser width, including small HUDs. */
#view-replay #video-gauge-overlay .video-gauge-mirror .video-gauge-mirror-label {
  font-size: clamp(6px, calc(var(--gauge-fit-unit, 1px) * 11), 16px); letter-spacing: .04em; }
#view-replay #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-label {
  top: calc(var(--gauge-fit-unit, 1px) * 9); left: calc(var(--gauge-fit-unit, 1px) * 8);
  right: calc(var(--gauge-fit-unit, 1px) * 8); gap: calc(var(--gauge-fit-unit, 1px) * 5); }
#view-replay #video-gauge-overlay [data-source-kind="number"] .video-gauge-number-icon { font-size: inherit; }
#view-replay #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout strong {
  font-size: clamp(10px, calc(var(--gauge-fit-unit, 1px) * 36), 64px);
  -webkit-text-stroke-width: calc(var(--gauge-fit-unit, 1px) * .7); }
#view-replay #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout small {
  font-size: max(5px, calc(var(--gauge-fit-unit, 1px) * 11)); bottom: calc(var(--gauge-fit-unit, 1px) * 8); }
#view-replay #video-gauge-overlay [data-source-kind="board"] {
  grid-template-rows: calc(var(--gauge-fit-unit, 1px) * 16) minmax(0, 1fr) calc(var(--gauge-fit-unit, 1px) * 21); }
#view-replay #video-gauge-overlay [data-source-kind="board"] .video-gauge-mirror-label { padding: calc(var(--gauge-fit-unit, 1px) * 4) 2px 0; }
#view-replay #video-gauge-overlay [data-source-kind="board"] .video-gauge-mirror-readout strong { font-size: max(8px, calc(var(--gauge-fit-unit, 1px) * 17)); }
#view-replay #video-gauge-overlay [data-body3d="true"] .video-gauge-mirror-readout strong { font-size: max(7px, calc(var(--gauge-fit-unit, 1px) * 12)); }

/* Numeric content keeps a stable value slot even when the value is unavailable. */
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-readout { display: block; position: absolute; inset: 0; min-height: 0; }
#view-replay.active.has-clip .video-gauge-mirror[data-source-kind="number"] .video-gauge-mirror-readout strong { display: block; min-width: 2ch; min-height: 1em; text-align: center; white-space: nowrap; }

#replay-gauge-size { position: fixed; left: 18px; top: 18px; z-index: 1007; display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: white; background: #18243050; border: 1px solid #ffffff70; border-radius: 12px; backdrop-filter: blur(10px); font: 700 14px system-ui; text-shadow: 0 1px 3px #000; }
#replay-gauge-size[hidden] { display: none; }
#replay-gauge-size input { width: min(150px, 25vw); accent-color: white; }
#replay-gauge-size output { min-width: 4ch; }

body:is([data-replay-frame-format="vertical"],[data-replay-frame-format="square"],[data-replay-frame-format="portrait"],[data-replay-frame-format="tall"],[data-replay-frame-format="landscape"],[data-replay-frame-format="wide"]) #view-replay.active #clip-stage { position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--vertical-width);height:var(--vertical-height);min-height:0;max-height:none;margin:0;overflow:hidden;flex:none;aspect-ratio:auto; }
body:is([data-replay-frame-format="vertical"],[data-replay-frame-format="square"],[data-replay-frame-format="portrait"],[data-replay-frame-format="tall"],[data-replay-frame-format="landscape"],[data-replay-frame-format="wide"]) #view-replay.active #clip-stage > #clip-video { width:100%;height:100%;min-height:0;object-fit:cover;object-position:var(--replay-crop-position,50%) 50%; }
#replay-crop-row {display:grid;gap:8px;margin-bottom:12px}
#replay-crop-row[hidden]{display:none}

/* One settings surface; existing render targets stay measurable off-screen. */
body.unified-replay #replay-view-controls { top:12px;right:16px;left:auto;z-index:1100;min-height:40px;background:rgba(25,42,54,.7);backdrop-filter:blur(16px); }
body.unified-replay #replay-view-panel { top:60px;right:16px;left:auto;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 150px);z-index:1100;background:rgba(19,34,46,.91);backdrop-filter:blur(22px);border:1px solid #ffffff45;border-radius:18px;padding:18px;box-shadow:0 16px 60px #0005; }
.studio-tabs { display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:sticky;top:-18px;background:#172b39;padding:10px 0;z-index:2; }
#replay-view-panel .studio-tabs button { border:0;background:transparent;padding:10px 4px;font-weight:650; }
#replay-view-panel .studio-tabs [aria-selected="true"] { background:#b6eadc;color:#10232b;border-radius:9px; }
#replay-view-panel .studio-pane[hidden],.studio-retired { display:none !important; }
.studio-pane { padding-top:10px;display:grid;gap:14px; }
#replay-view-panel .studio-pane > p { margin:0;line-height:1.6; }
#replay-view-panel .studio-pane details { border:1px solid #ffffff24;border-radius:10px;padding:12px;margin:0; }
#replay-view-panel .studio-pane summary { cursor:pointer;font-weight:650;min-height:24px; }
#replay-view-panel .studio-pane small { display:block;color:#aabdc9;font-size:11px;line-height:1.5;font-weight:400;margin:5px 0; }
#replay-view-panel .studio-field,#replay-view-panel .replay-layout-label { display:grid;gap:7px;margin:0; }
#replay-view-panel select { max-width:100%;width:100%;min-height:38px; }
#replay-view-panel input[type="range"] { width:100%;accent-color:#b6eadc; }
#replay-view-panel .stance-axis { display:grid;gap:5px;margin:12px 0; }
#replay-view-panel .stance-axis span { display:flex;justify-content:space-between;gap:8px; }
#replay-view-panel #replay-gauge-tools { display:flex;flex-wrap:wrap;gap:8px; }
#replay-view-panel #replay-gauge-size { display:grid;width:100%;grid-template-columns:1fr 2fr auto;gap:10px;align-items:center; }
#replay-view-panel :is(#clip-orientation,#model-toggle,#pose-toggle,#vantage-toggle,#rider-comparison,#rider-preview-controls,#replay-gauge-size,#replay-clean-align,#replay-reset-layout,#mirror-all-gauges,#replay-sensor-manager) { position:static!important;inset:auto!important;transform:none!important;width:auto;max-width:100%;max-height:none;box-shadow:none; }
#replay-view-panel :is(#clip-orientation,#model-toggle,#pose-toggle,#vantage-toggle) { display:flex;flex-wrap:wrap;gap:8px;margin-top:8px; }
#replay-view-panel #rider-comparison { background:none;border:0;padding:0; }
#replay-view-panel .replay-gauge-head { margin:0; }
#replay-view-panel .replay-gauge-columns { margin:0;padding:0; }
#replay-view-panel .replay-gauge-choice { grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;padding:12px 0;font-weight:650; }
#replay-view-panel #replay-gauge-choices { display:grid;gap:10px; }
body.unified-replay #view-replay > #gauge-deck { display:block!important;position:fixed;left:-100000px;top:0;width:1200px;height:auto;visibility:hidden;pointer-events:none; }
body.unified-replay :is(#clip-controls,#clip-unplaced,#clip-placed-row,#clip-place,#clip-status,#wave-panel,#sensor-playbar,#video-playbar,#linked-playbar,#camera-help,#three-sensor-gauge-link,#clock-label,#bend-clock,#bend-clock-label,#turn-map-canvas) { display:none!important; }
body.unified-replay #video-gauge-picker { display:none!important; }
body.unified-replay .clip-dock { display:none!important; }
body.unified-replay #replay-clean-play { z-index:1110;bottom:18px; }
body.unified-replay #replay-clean-progress { z-index:1110;bottom:18px; }
body.unified-replay[data-clean-controls-hidden="true"] #replay-view-panel:hover,body.unified-replay[data-clean-controls-hidden="true"] #replay-view-panel:focus-within { opacity:1!important;pointer-events:auto!important; }
body.unified-replay.replay-clean #replay-view-panel #mirror-all-gauges { display:block!important; }
body.unified-replay:not(:has(#view-replay.active)) :is(#replay-view-controls,#replay-view-panel,#replay-clean-play,#replay-clean-progress) { display:none!important; }
@media(max-width:600px) { body.unified-replay #replay-view-panel { right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 155px);padding:14px; } }
body.unified-replay #replay-clean-progress { width:min(850px,calc(100vw - 32px));box-sizing:border-box;background:rgba(25,42,54,.5); }
body.unified-replay #replay-clean-progress #replay-clean-play { position:static;transform:none;min-width:86px;min-height:38px;padding:8px 12px;flex:none;font-size:13px;box-shadow:none; }
body.unified-replay #replay-clean-progress #speed-control { position:static;display:flex;align-items:center;gap:6px;max-width:150px;font-size:11px; }
body.unified-replay #replay-clean-progress #speed-slider { width:65px; }
body.unified-replay[data-clean-controls-hidden="true"] :is(#replay-clean-progress,#replay-view-controls) { opacity:0;pointer-events:none; }
body.unified-replay #replay-clean-progress:focus-within { opacity:1!important;pointer-events:auto!important; }
@media(max-width:600px) { body.unified-replay #replay-clean-progress { gap:6px;padding:8px;flex-wrap:wrap; } body.unified-replay #replay-clean-progress > input { min-width:90px; } body.unified-replay #replay-clean-progress #speed-control { margin-left:auto; } }
body.unified-replay #replay-clean-progress #speed-control { width:150px;flex:0 0 150px;max-width:150px; }
body.unified-replay #replay-clean-progress #speed-slider { display:block;min-width:55px;max-width:65px;flex:1; }
body.unified-replay #replay-clean-progress #speed-control > span:first-child { display:none; }
body.unified-replay :is(#clip-study,#clip-wireframe,#video-study) { display:none!important; }
#gauge-presets { display:grid;gap:10px;border:1px solid #ffffff35;border-radius:12px;padding:12px; }
#gauge-presets label { display:grid;gap:6px;font-size:12px; }
#gauge-presets input[type="text"] { width:100%;box-sizing:border-box;background:#142735;color:#eef7fa;border:1px solid #638391;border-radius:6px;padding:9px;font:13px system-ui; }
#gauge-presets label:has(input[type="checkbox"]) { display:flex;align-items:center; }
/* Health is information, so it remains visible when playback controls fade. */
body.unified-replay #sensor-health { position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(850px,calc(100vw - 32px));box-sizing:border-box;z-index:1110;padding:9px 14px;border:1px solid #ffffff60;border-radius:12px;background:rgba(25,42,54,.55);backdrop-filter:blur(14px);color:#fff; }
body.unified-replay #sensor-health[hidden] { display:none!important; }
body.unified-replay #sensor-health .sensor-health-head { font:11px/1.3 system-ui; }
body.unified-replay #sensor-health .sensor-health-label { color:white;flex:none; }
body.unified-replay #sensor-health #sensor-health-track { height:14px;gap:0; }
body.unified-replay #sensor-health .sensor-health-cell { min-width:0; }
body.unified-replay #sensor-health .sensor-health-legend { color:#e5eef5; }
body.unified-replay #sensor-health #playback-perf { display:none; }
body.unified-replay:has(#sensor-health:not([hidden])) #replay-clean-progress { bottom:86px; }
body.unified-replay:has(#sensor-health:not([hidden])) #replay-view-panel { max-height:calc(100dvh - 220px); }
body.unified-replay:not(:has(#view-replay.active)) #sensor-health { display:none!important; }

.rider-joint-controls { margin: 8px 0; padding: 8px; border: 1px solid #ffffff26; border-radius: 8px; }
.rider-joint-controls summary { cursor: pointer; padding: 6px 0; }
.rider-joint-controls label { display: flex; justify-content: space-between; margin-top: 8px; }
.rider-joint-controls input[type="range"] { width: 100%; }
.rider-joint-controls small { display:block;margin-top:6px;font-size:11px;line-height:1.4; }
.rider-joint-help { font-size: 12px; opacity: .8; }

/* Replay dock: one bar under the video/3D stage — playback, controls, data health. */
body.unified-replay #replay-dock { display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;padding:10px 14px;background:#0d1822;border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f;color:#fff;box-sizing:border-box; }
body.unified-replay:not(:has(#view-replay.active)) #replay-dock { display:none; }
body.unified-replay #replay-dock .dock-row { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
body.unified-replay #replay-dock #replay-clean-progress { position:static;transform:none;left:auto;bottom:auto;top:auto;flex:1 1 420px;width:auto;min-width:0;opacity:1!important;pointer-events:auto!important;background:rgba(255,255,255,.06);border:1px solid #ffffff2e;backdrop-filter:none;z-index:auto; }
body.unified-replay #replay-dock #replay-clean-play { z-index:auto; }
body.unified-replay #replay-dock .dock-tools { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
body.unified-replay #replay-dock #replay-gauge-size {
  position: static; inset: auto; transform: none; display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 100%; min-height: 38px; box-sizing: border-box; padding: 6px 9px;
  background: transparent; border: 1px solid #ffffff2e; border-radius: 10px;
  backdrop-filter: none; font: 600 11px system-ui; text-shadow: none;
  opacity: 1 !important; pointer-events: auto !important; }
body.unified-replay #replay-dock #replay-gauge-size input { width: 88px; min-height: 24px; }
body.unified-replay #replay-dock #replay-gauge-size output { min-width: 4ch; font-variant-numeric: tabular-nums; }
body.unified-replay #replay-dock #replay-gauge-size small { color: #b6eadc; font-size: 10px; font-weight: 400; }
body.unified-replay #replay-dock .dock-tools > :is(button,#stance-toggle,#clock-mode-toggle) { position:static;inset:auto;transform:none;opacity:1!important;pointer-events:auto!important;min-height:38px;box-sizing:border-box; }
body.unified-replay #replay-dock .dock-tools > button { background:rgba(255,255,255,.06);border:1px solid #ffffff2e;border-radius:10px;color:#e6f1f7;padding:8px 12px;font:600 12px system-ui;cursor:pointer;backdrop-filter:none; }
body.unified-replay #replay-dock .dock-tools > button:disabled { opacity:.45!important;cursor:not-allowed; }
body.unified-replay #replay-dock .dock-tools > :is(#stance-toggle,#clock-mode-toggle) { display:flex;align-items:center;padding:3px;border-radius:10px;background:rgba(255,255,255,.06); }
body.unified-replay #replay-dock .dock-tools :focus-visible { outline:2px solid #88e2cd;outline-offset:2px; }
body.unified-replay #replay-dock > #sensor-health { min-width:0;position:static;transform:none;left:auto;bottom:auto;top:auto;width:auto;z-index:auto;background:rgba(255,255,255,.04);border:1px solid #ffffff24;backdrop-filter:none; }
/* Full screen: the dock overlays the bottom of the picture and hides when the cursor leaves it. */
#replay-dock.dock-overlay { position:absolute!important;left:16px;right:16px;bottom:16px;z-index:2147483000;background:rgba(8,15,22,.78)!important;backdrop-filter:blur(14px);border:1px solid #ffffff33!important;border-radius:14px;transition:opacity .25s ease; }
#replay-dock.dock-overlay.is-idle { opacity:0;pointer-events:none; }
#view-replay.active #clip-wrap:has(#clip-stage[data-window-fullscreen="true"]),
#view-replay.active #clip-wrap:fullscreen,
#view-replay.active #clip-wrap:-webkit-full-screen {
  position: fixed !important; inset: 0 !important; transform: none !important;
  width: 100vw !important; height: 100dvh !important; max-height: none !important;
  z-index: 2147482000; background: #080f16; }
/* The same map canvas lives in the blank margin, never over the footage. */
#view-replay.active #clip-stage[data-map-docked="true"] {
  inset: auto !important; left: var(--dock-x) !important; top: var(--dock-y) !important;
  width: var(--dock-width) !important; height: var(--dock-height) !important;
  transform: none !important; min-height: 0; max-height: none; margin: 0; }
#view-replay.active.has-clip #replay-turn-map {
  position: absolute; inset: auto; left: var(--dock-x); top: var(--dock-y);
  width: var(--dock-width); height: var(--dock-height); transform: none;
  z-index: 25; display: grid; min-width: 0; min-height: 0; max-width: none; max-height: none;
  margin: 0; cursor: default !important; background: #162633; border-color: #547581; }
#view-replay.active.has-clip #replay-turn-map[hidden] { display: none; }
#view-replay.active.has-clip #replay-turn-map .video-gauge-mirror-canvas { object-fit: contain; }
body:has(#clip-stage[data-window-fullscreen="true"]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #replay-dock.dock-overlay { transition:none; } }
@media (max-width:600px) { body.unified-replay #replay-dock { padding:8px; } body.unified-replay #replay-dock #replay-clean-progress { flex-basis:100%; } }
body.unified-replay #replay-dock #sensor-health .sensor-health-head { min-width:0; }
body.unified-replay #replay-dock #sensor-health .sensor-health-head > * { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
body.unified-replay #replay-dock .dock-tools > #clock-mode-toggle { gap:4px; }
body.unified-replay #replay-dock #clock-mode-toggle button { min-height:30px;padding:4px 9px;font:700 10px/1 system-ui;letter-spacing:.04em;border-radius:7px; }
/* A single rider-attached gear owns editing; transparent rendering space never
   intercepts a drag or forces the visible rider away from a video edge. */
body[data-replay-inset-active="true"] #stage-3d { pointer-events:none; }
body[data-replay-inset-active="true"] #stage-3d > #canvas { pointer-events:none!important; }
#replay-rider-tools { position:absolute; z-index:45; pointer-events:none; width:30px; height:30px; }
#replay-rider-tools button { pointer-events:auto; touch-action:none; color:white; border:1px solid #ffffff70; border-radius:6px; background:#14202d40; font:12px system-ui; text-shadow:0 1px 3px #000; cursor:pointer; }
#replay-rider-gear { position:relative;z-index:2;width:30px; height:30px; padding:0; font-size:20px!important; }
#replay-rider-gear:hover,#replay-rider-gear[aria-expanded="true"] { background:#14202dbf; }
#replay-rider-menu { position:absolute; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; box-sizing:border-box; padding:8px; border:1px solid #ffffff60; border-radius:9px; background:#14202deb; pointer-events:auto; }
#replay-rider-menu button { position:static!important; inset:auto!important; width:auto; height:42px; min-width:0; padding:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#replay-rider-menu .rider-tool span { font:17px/18px system-ui; }
#replay-rider-menu .rider-tool small { font:10px/13px system-ui; }
#replay-rider-size-buttons { display:flex; gap:4px; align-items:center; }
#replay-rider-size-buttons button { width:28px; height:28px; font-size:18px; padding:0; }
#replay-rider-tools button:focus-visible { outline:2px solid #86efdc; outline-offset:2px; }
#replay-rider-tools[hidden],#replay-rider-tools [hidden],body[data-demo-rider-hidden="true"] #replay-rider-tools { display:none!important; }
body.replay-clean[data-clean-controls-hidden="true"] #replay-rider-menu [data-inset-handle] { opacity:1!important;pointer-events:auto!important; }
#replay-rider-menu #replay-inset-grip { cursor:move; }
#replay-rider-menu #replay-inset-resize { cursor:nwse-resize; }
#replay-rider-menu #replay-inset-direction { cursor:ew-resize; }