/* Trackk snowboard prototype: website/public/snowboard.html and founder.css.
   Demo-only skin. Never change playback geometry, gauge values or pose settings. */
@font-face { font-family:TrackkSora;src:url('./brand/sora-regular.ttf') format('truetype');font-weight:400;font-display:swap; }
@font-face { font-family:TrackkSora;src:url('./brand/sora-bold.ttf') format('truetype');font-weight:600 900;font-display:swap; }
@font-face { font-family:TrackkMono;src:url('./brand/space-mono.ttf') format('truetype');font-weight:400 700;font-display:swap; }
:root[data-viewer-mode="sample"] {
  --brand-ink:#071016;--brand-panel:#0d171e;--brand-lime:#c6ff3d;--brand-blue:#8bdcff;
  --brand-text:#f2f7f8;--brand-muted:#a6b6bd;--brand-line:#e2f4ff29;
  --brand-sans:TrackkSora,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --brand-mono:TrackkMono,'PingFang SC','Microsoft YaHei',monospace;
  --bg0:var(--brand-ink);--bg1:var(--brand-panel);--bg2:#13232d;--bg3:#20323c;
  --border:var(--brand-line);--text0:var(--brand-text);--text1:var(--brand-text);
  --text2:var(--brand-muted);--text3:var(--brand-muted);--text4:var(--brand-muted);--accent:var(--brand-lime);
  --heel:#60a5fa;--toe:#f97316;
  color-scheme:dark;
}
html[data-viewer-mode="sample"] body { background:var(--brand-ink);color:var(--brand-text);font-family:var(--brand-sans);-webkit-font-smoothing:antialiased; }
html[data-viewer-mode="sample"] :is(#header,#sample-notice,#replay-dock,#demo-map-slot,#view-report,#view-replay,#main,#clip-wrap) { background:var(--brand-ink);color:var(--brand-text); }
html[data-viewer-mode="sample"] #sample-notice { border-bottom:1px solid var(--brand-line);padding:10px 24px;font:11px/1.6 var(--brand-sans);color:var(--brand-muted); }
html[data-viewer-mode="sample"] #sample-notice strong { color:var(--brand-text);font-weight:700; }
html[data-viewer-mode="sample"] #sample-notice strong:first-child { color:var(--brand-lime); }
html[data-viewer-mode="sample"] #sample-notice summary { color:var(--brand-muted); }
html[data-viewer-mode="sample"] #header { border-bottom:1px solid var(--brand-line);padding:16px 24px;gap:18px; }
html[data-viewer-mode="sample"] #brand { display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:115px; }
html[data-viewer-mode="sample"] #brand img { width:100px;height:24px;object-fit:contain;object-position:left; }
html[data-viewer-mode="sample"] #demo-brand-label { color:var(--brand-muted);font:9px/1.4 var(--brand-mono);letter-spacing:.1em;text-transform:uppercase; }
html[data-viewer-mode="sample"] :is(.picker-label,#demo-clip-label,#viewer-language-label,#demo-speed) { color:var(--brand-muted);font-family:var(--brand-mono);font-size:11px; }
html[data-viewer-mode="sample"] :is(#session-picker,#demo-clip-picker,#viewer-language,#demo-speed select) { background:var(--brand-panel);border:1px solid var(--brand-line);border-radius:4px;color:var(--brand-text);font:12px/1.5 var(--brand-sans);padding:10px 12px;min-height:42px;box-shadow:none; }
html[data-viewer-mode="sample"] :is(button,select,input,summary):focus-visible { outline:2px solid var(--brand-blue)!important;outline-offset:3px; }
html[data-viewer-mode="sample"] input[type="range"] { accent-color:var(--brand-lime); }
html[data-viewer-mode="sample"] #replay-dock { padding:12px 24px 16px;border-top:1px solid var(--brand-line); }
html[data-viewer-mode="sample"] #replay-clean-progress { border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;gap:14px; }
html[data-viewer-mode="sample"] #replay-clean-progress > span { color:var(--brand-text);font:11px var(--brand-mono); }
html[data-viewer-mode="sample"] #replay-dock button,
html[data-viewer-mode="sample"] #replay-view-panel :is(button,select),
html[data-viewer-mode="sample"] #demo-arrange-tools button {
  background:var(--brand-panel);border:1px solid var(--brand-line);border-radius:4px;color:var(--brand-text);
  font:600 11px/1.4 var(--brand-sans);padding:10px 12px;min-height:40px;box-shadow:none;text-shadow:none;
}
html[data-viewer-mode="sample"] #replay-dock #replay-clean-play { background:var(--brand-lime);color:var(--brand-ink);border-color:var(--brand-lime);font-weight:800;min-width:90px; }
html[data-viewer-mode="sample"] #replay-dock button[aria-pressed="true"] { background:#c6ff3d18;border-color:var(--brand-lime);color:var(--brand-lime); }
html[data-viewer-mode="sample"] #replay-dock button:hover,
html[data-viewer-mode="sample"] #replay-view-panel button:hover { border-color:var(--brand-lime); }
html[data-viewer-mode="sample"] body #replay-dock :is(#replay-toggle-gauges,#replay-toggle-split,#replay-view-controls,#replay-clean-fullscreen) { background:var(--brand-panel);border:1px solid var(--brand-line);border-radius:4px;color:var(--brand-text);font:600 11px/1.4 var(--brand-sans); }
html[data-viewer-mode="sample"] body #replay-dock :is(#replay-toggle-gauges,#replay-toggle-split)[aria-pressed="true"] { background:#c6ff3d18;color:var(--brand-lime);border-color:var(--brand-lime); }
html[data-viewer-mode="sample"] body #replay-dock #replay-clean-progress { background:transparent;border:0;border-radius:0;box-shadow:none; }
html[data-viewer-mode="sample"] :is(#replay-gauge-size,#sensor-health,#demo-rider-position) { border:1px solid var(--brand-line)!important;border-radius:4px!important;background:var(--brand-panel)!important;box-shadow:none!important; }
html[data-viewer-mode="sample"] :is(#demo-rider-help,#demo-responsive-hint,.demo-deep-note) { color:var(--brand-muted);font:11px/1.65 var(--brand-sans); }
html[data-viewer-mode="sample"] #sensor-health details > summary { font:11px/1.6 var(--brand-sans);color:var(--brand-muted); }
html[data-viewer-mode="sample"] #replay-view-panel { background:var(--brand-panel);border:1px solid var(--brand-line);border-radius:6px;color:var(--brand-text);font-family:var(--brand-sans);box-shadow:0 16px 60px #0008; }
html[data-viewer-mode="sample"] #replay-view-panel .replay-view-heading { background:var(--brand-panel); }
html[data-viewer-mode="sample"] #replay-view-panel :is(small,p,label,legend) { font-family:var(--brand-sans);color:var(--brand-muted);line-height:1.6; }
html[data-viewer-mode="sample"] #replay-view-panel input[type="checkbox"] { accent-color:var(--brand-lime); }
html[data-viewer-mode="sample"] #demo-direct-rotations { display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:1px solid var(--brand-line);border-radius:4px;color:var(--brand-text)!important;cursor:pointer; }
html[data-viewer-mode="sample"] #demo-direct-rotations input { width:18px;height:18px;margin:0;flex-shrink:0; }
html[data-viewer-mode="sample"] #replay-view-panel [role="tab"][aria-selected="true"] { background:var(--brand-lime);color:var(--brand-ink);border-color:var(--brand-lime); }
html[data-viewer-mode="sample"] #replay-rider-menu { background:#0d171ef5;border-color:var(--brand-line);border-radius:6px; }
html[data-viewer-mode="sample"] #replay-rider-tools button { background:#071016b8;color:var(--brand-text);border-color:#e2f4ff66;text-shadow:none;border-radius:4px; }
html[data-viewer-mode="sample"] #replay-rider-gear[aria-expanded="true"] { background:var(--brand-lime);color:var(--brand-ink);border-color:var(--brand-lime); }
html[data-viewer-mode="sample"] #replay-rider-menu .rider-tool small { font:10px/1.3 var(--brand-sans); }
html[data-viewer-mode="sample"] #video-gauge-overlay .video-gauge-mirror {
  background:#071016a6!important;border:1px solid #e2f4ff55!important;border-radius:6px!important;
  box-shadow:none!important;backdrop-filter:none!important;color:var(--brand-text)!important;
}
html[data-viewer-mode="sample"] #video-gauge-overlay .video-gauge-mirror-label { font-family:var(--brand-mono)!important;font-weight:400!important;letter-spacing:.055em!important;text-shadow:none!important;color:var(--brand-text)!important; }
html[data-viewer-mode="sample"] #video-gauge-overlay .video-gauge-mirror-readout strong { font-family:var(--brand-sans)!important;font-weight:800!important;text-shadow:none!important;color:var(--brand-text)!important; }
html[data-viewer-mode="sample"] #video-gauge-overlay :is(.video-gauge-mirror-caption,.video-gauge-mirror-readout small) { font-family:var(--brand-mono)!important;text-shadow:none!important;color:#d2dde0!important; }
html[data-viewer-mode="sample"] #video-gauge-overlay .video-gauge-visibility-dot::before { border-color:var(--brand-lime);box-shadow:0 0 0 2px var(--brand-ink); }
html[data-viewer-mode="sample"] #video-gauge-overlay .video-gauge-visibility-dot[aria-pressed="true"]::before { background:var(--brand-lime); }
html[data-viewer-mode="sample"] #replay-turn-map { background:var(--brand-panel)!important;border:1px solid var(--brand-line)!important;border-radius:6px!important;box-shadow:none!important; }
html[data-viewer-mode="sample"] #view-report :is(button,select,input) { font-family:var(--brand-sans); }
html[data-viewer-mode="sample"] #view-report button { border-radius:4px; }
html[data-viewer-mode="sample"] #view-report :is(.tc-nav.on,.tc-nav-badge,.tc-bchip.on) { color:var(--brand-ink); }
html[data-viewer-mode="sample"] #view-report :is(h2,h3) { font-family:var(--brand-sans);font-weight:800;letter-spacing:-.035em; }
html[data-viewer-mode="sample"] #view-report .report-shell { border-top:1px solid var(--brand-line); }
html[data-viewer-mode="sample"] #replay-loading { font-family:var(--brand-sans); }
@media(max-width:759px) {
  html[data-viewer-mode="sample"] #header { padding:14px 12px;gap:12px; }
  html[data-viewer-mode="sample"] #brand { flex-direction:row;align-items:center;justify-content:space-between; }
  html[data-viewer-mode="sample"] #sample-notice { padding:10px 12px; }
  html[data-viewer-mode="sample"] #replay-dock { padding:10px 12px; }
  html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay .video-gauge-mirror { background:var(--brand-panel)!important; }
}

/* Numeric readings outside; live 3D cards occupy only the video's side edges. */
html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-grip { position:absolute;inset:0;width:100%;height:100%;background:transparent;border:1px solid transparent;cursor:grab;touch-action:none;z-index:0; }
html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-grip:active { cursor:grabbing; }
html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-grip:focus-visible { outline:none;box-shadow:none; }
html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-grip:focus-visible::after { content:'';position:absolute;bottom:0;left:calc(50% - 12px);width:24px;height:2px;background:#fff; }
html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-grip > * { visibility:hidden; }
html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-grip > .rider-rotation-cue {
  visibility:visible;position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:72px;height:18px;max-width:80%;color:#fff;opacity:.8;pointer-events:none;
  filter:drop-shadow(0 1px 2px #071016);
}
html[data-viewer-mode="sample"] #replay-inset-grip:is(:hover,:focus-visible,:active) > .rider-rotation-cue { opacity:1; }
html[data-viewer-mode="sample"] #replay-rider-tools #replay-rider-menu { z-index:3;display:block;padding:0;border:0;background:transparent; }
html[data-viewer-mode="sample"] #replay-rider-menu button { height:18px;width:18px;padding:0;font:500 11px/1 var(--brand-sans);color:var(--brand-text);background:#07101659;border:1px solid #ffffff40;border-radius:3px;touch-action:manipulation; }
html[data-viewer-mode="sample"] #replay-rider-menu button[aria-pressed="true"] { background:#07101680;color:var(--brand-lime);border-color:#c6ff3d80; }
html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-resize { position:absolute;right:-2px;bottom:-2px;left:auto;top:auto;width:18px;height:18px;padding:0;font-size:10px;background:#07101659;border-color:#ffffff40;border-radius:3px;cursor:nwse-resize;z-index:2; }
@media(pointer:coarse) {
  html[data-viewer-mode="sample"] #replay-rider-menu button::after,
  html[data-viewer-mode="sample"] #replay-rider-tools > #replay-inset-resize::after { content:'';position:absolute;inset:-8px; }
}
html[data-viewer-mode="sample"] #replay-rider-tools[data-angle-mode="true"] > #replay-inset-grip { cursor:grab; }
html[data-viewer-mode="sample"] #replay-rider-gear { display:none!important; }
@media(min-width:1400px) {
  html[data-viewer-mode="sample"] body:not([data-replay-layout="side-by-side"]) :is(#main,#canvas-wrapper,#clip-wrap) { min-height:max(650px,calc((100vw - 2 * clamp(140px,10vw,180px) - 32px) * .5625 + 16px))!important; }
  html[data-viewer-mode="sample"] body:not([data-replay-layout="side-by-side"]) #clip-wrap:not(:has(#clip-stage[data-fullscreen="true"])) {
    --demo-rail:clamp(140px,10vw,180px);container-type:inline-size;
  }
  html[data-viewer-mode="sample"] body:not([data-replay-layout="side-by-side"]) #clip-wrap:not(:has(#clip-stage[data-fullscreen="true"])) #clip-stage {
    left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
    width:calc(100% - 2 * var(--demo-rail) - 32px)!important;height:auto!important;aspect-ratio:16/9;
  }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay {
    position:absolute!important;inset:50% 8px auto!important;width:auto!important;height:calc((100cqw - 2 * var(--demo-rail) - 32px) * .5625)!important;transform:translateY(-50%)!important;
    display:grid!important;grid-template-columns:var(--demo-rail) clamp(160px,calc(var(--demo-card-height,150px) * 1.2),210px) minmax(0,1fr) clamp(160px,calc(var(--demo-card-height,150px) * 1.2),210px) var(--demo-rail);
    grid-template-rows:repeat(5,minmax(0,1fr));gap:5px 8px;align-content:start;pointer-events:none!important;
  }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay .video-gauge-mirror {
    position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:100%!important;
    margin:0!important;--gauge-fit-unit:1px!important;pointer-events:auto;
  }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="combined"] { grid-area:1/2!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="edge"] { grid-area:2/2!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="twist"] { grid-area:3/2!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="bend"] { grid-area:4/2!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="pivot"] { grid-area:5/2!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="body-combined"] { grid-area:1/4!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="body-fore"] { grid-area:2/4!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="body-side"] { grid-area:3/4!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="body-rotation"] { grid-area:4/4!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="body-vertical"] { grid-area:5/4!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="speed"] { grid-area:1/1!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="slope"] { grid-area:2/1!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="distance"] { grid-area:3/1!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="heart-rate"] { grid-area:1/5!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="g-force"] { grid-area:2/5!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="elevation"] { grid-area:3/5!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay .video-gauge-mirror-label { font-size:11px!important;white-space:normal!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay .video-gauge-mirror-readout strong { font-size:19px!important;white-space:normal!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout strong { font-size:24px!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-source-kind="number"] { display:flex!important;flex-direction:column!important;justify-content:center;gap:3px;padding:5px 2px!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-label { display:block!important;height:auto!important;min-height:0!important;line-height:1.2!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-source-kind="number"] .video-gauge-number-icon { display:inline!important;font-size:9px!important;margin-right:3px; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout { position:static!important;display:flex!important;flex-direction:column;gap:0;line-height:1.1!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay [data-metric="body-combined"] .video-gauge-mirror-readout strong { font-size:12px!important;text-align:center; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay :is(.video-gauge-mirror-caption,.video-gauge-mirror-readout small) { font-size:10px!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #replay-turn-map { left:auto!important;right:8px!important;top:calc(50% + (100cqw - 2 * var(--demo-rail) - 32px) * .05625 + 4px)!important;bottom:auto!important;transform:none!important;width:var(--demo-rail)!important;height:calc((100cqw - 2 * var(--demo-rail) - 32px) * .225 - 4px)!important; }
  html[data-viewer-mode="sample"] #clip-wrap > #video-gauge-overlay .video-gauge-mirror-resize { display:none!important; }
}
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay { grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay .video-gauge-mirror { height:var(--demo-card-height,150px)!important;grid-template-rows:26px minmax(0,1fr) 24px 12px!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay [data-metric="body-combined"] { grid-column:span 2; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay .video-gauge-mirror-label { font-size:10px!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay .video-gauge-mirror-readout strong { font-size:17px!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout strong { font-size:22px!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay :is([data-metric="combined"],[data-metric="body-combined"]) .video-gauge-mirror-readout { min-height:0!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay :is([data-metric="combined"],[data-metric="body-combined"]) .video-gauge-mirror-readout strong { font-size:11px!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay :is(.video-gauge-mirror-caption,.video-gauge-mirror-readout small) { font-size:10px!important; }
@media(max-width:599px) {
  html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html[data-viewer-mode="sample"] body[data-demo-narrow="true"] #video-gauge-overlay .video-gauge-mirror { height:calc(var(--demo-card-height,150px) * .8)!important; }
}

/* Phone-width perimeter: top/bottom outside; numeric cards over the full-width video's edges. */
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] {
  --demo-square-size:min(calc((100vw - 24px) * .2),var(--demo-card-height,150px));
  --demo-top-row:var(--demo-square-size);
  --demo-bottom-row:var(--demo-square-size);
  --demo-number-row:max(var(--demo-square-size),calc(18.75vw - 4px));
  --demo-perimeter-height:calc(var(--demo-top-row) + var(--demo-bottom-row) + 3 * var(--demo-number-row) + 24px);
  --demo-restore-space:0px;
}
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"]:has(.video-gauge-restore-dots:not([hidden])) { --demo-restore-space:62px; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] :is(#main,#canvas-wrapper,#clip-wrap) {
  height:calc(var(--demo-perimeter-height) + var(--demo-restore-space))!important;min-height:0!important;
}
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #clip-stage {
  left:50%!important;top:calc(12px + var(--demo-top-row) + 1.5 * var(--demo-number-row))!important;
  transform:translate(-50%,-50%)!important;width:calc(100% - 8px)!important;height:auto!important;aspect-ratio:16/9;
}
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay {
  position:absolute!important;inset:4px!important;transform:none!important;width:calc(100% - 8px)!important;height:calc(var(--demo-perimeter-height) - 8px)!important;
  grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:var(--demo-top-row) repeat(3,var(--demo-number-row)) var(--demo-bottom-row);gap:4px;pointer-events:none!important;
}
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-mirror {
  width:var(--demo-square-size)!important;height:var(--demo-square-size)!important;min-width:0;align-self:center;justify-self:center;grid-template-rows:24px minmax(0,1fr) auto auto!important;padding:2px!important;pointer-events:auto;
}
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="body-combined"] { grid-area:1/1!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="body-fore"] { grid-area:1/2!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="body-side"] { grid-area:1/3!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="body-rotation"] { grid-area:1/4!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="body-vertical"] { grid-area:1/5!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="combined"] { grid-area:5/1!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="edge"] { grid-area:5/2!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="twist"] { grid-area:5/3!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="bend"] { grid-area:5/4!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="pivot"] { grid-area:5/5!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="speed"] { grid-area:2/1!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="slope"] { grid-area:3/1!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="distance"] { grid-area:4/1!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="heart-rate"] { grid-area:2/5!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="g-force"] { grid-area:3/5!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay [data-metric="elevation"] { grid-area:4/5!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-mirror-label {
  display:block!important;font-family:var(--brand-sans)!important;font-size:8px!important;line-height:1.05!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere;padding:0 7px 0 0!important;
}
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay [data-metric="body-combined"] { grid-template-rows:24px minmax(0,1fr) auto auto!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-mirror-readout strong { font-size:12px!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay :is([data-metric="combined"],[data-metric="body-combined"]) .video-gauge-mirror-readout strong { font-size:10px!important;line-height:1.2!important;padding:0!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay :is(.video-gauge-mirror-caption,.video-gauge-mirror-readout small) { font-size:8px!important;line-height:1.1!important;white-space:normal!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-mirror-caption { padding:0!important;letter-spacing:0!important;overflow-wrap:anywhere;text-overflow:clip!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-mirror-caption:empty { display:none!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay [data-source-kind="board"] { grid-template-rows:20px minmax(0,1fr) auto!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay [data-source-kind="number"] { display:flex!important;flex-direction:column;justify-content:center;gap:2px;padding:4px 2px!important;background:#071016a6!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-label { position:static!important;inset:auto!important;transform:none!important;width:100%;height:auto!important;min-height:0!important;flex-shrink:0;box-sizing:border-box; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout { position:static!important;display:flex!important;flex-direction:column;align-items:center;line-height:1.1!important;gap:0;flex-shrink:0; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout :is(strong,small) { position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:100%;flex-shrink:0;margin:0!important; }
html[data-viewer-mode="sample"] body[data-demo-narrow="true"][data-demo-perimeter="true"] #video-gauge-overlay [data-source-kind="number"] .video-gauge-mirror-readout strong { font-size:18px!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-number-icon { display:none!important; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-visibility-dot { top:0;right:0;width:24px;height:24px;min-width:24px; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-visibility-dot::before { width:5px;height:5px;position:absolute;top:3px;right:3px; }
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #video-gauge-overlay .video-gauge-restore-dots { position:absolute;top:calc(100% + 4px);bottom:auto!important;left:0;right:0;margin:0; }

/* Give body models their own row; repeated BODY / BOARD captions consumed it on phones. */
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay .video-gauge-mirror[data-body3d="true"] {
  grid-template-rows:minmax(16px,auto) minmax(0,1fr) auto!important;row-gap:1px!important;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-body3d="true"] .video-gauge-mirror-caption { display:none!important; }
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-body3d="true"] :is(.video-gauge-mirror-label,.video-gauge-mirror-canvas,.video-gauge-mirror-readout,.video-gauge-mirror-readout strong) {
  position:static!important;inset:auto!important;transform:none!important;min-height:0!important;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-body3d="true"] .video-gauge-mirror-label { grid-row:1; }
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-body3d="true"] .video-gauge-mirror-canvas { grid-row:2;height:100%!important;width:100%!important;object-fit:contain; }
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-body3d="true"] .video-gauge-mirror-readout { grid-row:3;height:auto!important;line-height:1.15!important; }
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-body3d="true"] .video-gauge-mirror-readout strong { display:block;line-height:1.15!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis; }
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-body3d="true"][data-gauge-mirrored="true"] > .video-gauge-mirror-canvas { transform:scaleX(-1)!important; }

/* Keep the small dot, but give fingers a full, unscaled touch target. */
@media (max-width:759px), (pointer:coarse) {
  html[data-viewer-mode="sample"] body #video-gauge-overlay .video-gauge-visibility-dot {
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;touch-action:manipulation;
  }
  html[data-viewer-mode="sample"] body #video-gauge-overlay .video-gauge-visibility-dot::before {
    width:9px!important;height:9px!important;top:8px!important;right:8px!important;
  }
  html[data-viewer-mode="sample"] body #video-gauge-overlay .video-gauge-mirror[data-gauge-dot-hidden="true"] {
    z-index:35!important;
  }
  html[data-viewer-mode="sample"] #replay-dock #replay-clean-play {
    min-height:44px!important;opacity:1!important;pointer-events:auto!important;touch-action:manipulation;
  }
}

/* Resort context occupies the empty left rail, opposite the existing Turn Map. */
html[data-viewer-mode="sample"] body #view-replay #resort-map {
  display:flex!important;flex-direction:column;gap:3px;box-sizing:border-box;
  max-height:none!important;background:#10191e!important;color:#dce5e9;border:1px solid var(--border);
}
html[data-viewer-mode="sample"] #resort-map-head { flex:none;letter-spacing:0;font-size:11px;color:#dce5e9; }
html[data-viewer-mode="sample"] #resort-map-canvas { flex:1;min-height:0;object-fit:contain; }
html[data-viewer-mode="sample"] #resort-map-legend { flex:none;gap:4px;font-size:9px;color:#b4c3cb; }
html[data-viewer-mode="sample"] #resort-map-credit { flex:none;color:#b4c3cb;font-size:9px;text-decoration:none; }
html[data-viewer-mode="sample"] #resort-map-toggle { color:#dce5e9; }
html[data-viewer-mode="sample"] #resort-map-legend .sw[style*="#111827"] { background:#cbd5e1!important; }
html[data-viewer-mode="sample"] #resort-map.collapsed :is(#resort-map-canvas,#resort-map-legend,#resort-map-credit) { display:none; }
html[data-viewer-mode="sample"] #demo-resort-slot { padding:8px 24px; }
html[data-viewer-mode="sample"] body #view-replay #demo-resort-slot > #resort-map {
  position:relative!important;inset:auto!important;width:min(100%,280px)!important;height:280px!important;margin:0;
}
@media(min-width:1400px) {
  html[data-viewer-mode="sample"] body #view-replay #clip-wrap > #resort-map {
    left:8px!important;right:auto!important;
    top:calc(50% + (100cqw - 2 * var(--demo-rail) - 32px) * .05625 + 4px)!important;
    bottom:auto!important;width:var(--demo-rail)!important;
    height:calc((100cqw - 2 * var(--demo-rail) - 32px) * .225 - 4px)!important;
  }
}

/* Keep both map headers available when their canvas is collapsed. */
html[data-viewer-mode="sample"] body #view-replay :is(#resort-map,#replay-turn-map) {
  background:#071016a6!important;backdrop-filter:none!important;
}
html[data-viewer-mode="sample"] #demo-resort-map-title { display:none; }
html[data-viewer-mode="sample"] body #view-replay #replay-turn-map {
  display:flex!important;flex-direction:column;padding:4px;gap:3px;box-sizing:border-box;
}
html[data-viewer-mode="sample"] :is(.demo-map-head,#resort-map-head) {
  display:flex;align-items:center;justify-content:space-between;gap:2px;flex:none;padding:0;min-height:24px;
  font:500 11px/1.1 var(--brand-sans);letter-spacing:0;text-transform:none;
}
html[data-viewer-mode="sample"] :is(.demo-map-head,#resort-map-head) > span { min-width:0;overflow-wrap:anywhere; }
html[data-viewer-mode="sample"] body #view-replay :is(#replay-turn-map-toggle,#resort-map-toggle,.video-gauge-collapse-toggle) {
  position:relative;flex:0 0 24px;width:24px;height:24px;min-height:24px;min-width:24px;
  display:grid;place-items:center;padding:0;border:0;border-radius:3px;background:transparent;color:var(--brand-text);
  font:500 16px/1 var(--brand-sans);cursor:pointer;touch-action:manipulation;
}
html[data-viewer-mode="sample"] :is(#replay-turn-map-toggle,#resort-map-toggle,.video-gauge-collapse-toggle):is(:hover,:focus-visible) { background:#ffffff18!important; }
html[data-viewer-mode="sample"] #replay-turn-map-canvas { flex:1;min-height:0; }
html[data-viewer-mode="sample"] #demo-maps-row { display:flex;align-items:flex-start;gap:8px;padding:8px 12px; }
html[data-viewer-mode="sample"] body #view-replay :is(#demo-resort-slot,#demo-map-slot) { flex:1;max-width:280px;min-width:0;padding:0; }
html[data-viewer-mode="sample"] body #view-replay #demo-maps-row :is(#resort-map,#replay-turn-map) {
  width:100%!important;height:auto!important;aspect-ratio:1;margin:0!important;
}
html[data-viewer-mode="sample"] body[data-demo-perimeter="true"] #demo-perimeter-maps {
  position:absolute;inset:4px;width:calc(100% - 8px);height:calc(var(--demo-perimeter-height) - 8px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:var(--demo-top-row) repeat(3,var(--demo-number-row)) var(--demo-bottom-row);
  gap:4px;pointer-events:none;z-index:26;
}
html[data-viewer-mode="sample"] body #view-replay #demo-perimeter-maps :is(#resort-map,#replay-turn-map) {
  position:relative!important;inset:auto!important;transform:none!important;margin:0!important;
  width:var(--demo-square-size)!important;height:var(--demo-square-size)!important;aspect-ratio:1;
  align-self:start;justify-self:center;pointer-events:auto;padding:2px;gap:0;border-radius:6px;
}
html[data-viewer-mode="sample"] #demo-perimeter-maps #resort-map { grid-area:2/2; }
html[data-viewer-mode="sample"] #demo-perimeter-maps #replay-turn-map { grid-area:2/4; }
html[data-viewer-mode="sample"] #demo-perimeter-maps :is(.demo-map-head,#resort-map-head) { font-size:8px; }
html[data-viewer-mode="sample"] #demo-perimeter-maps :is(#resort-map-title,#resort-map-legend) { display:none; }
html[data-viewer-mode="sample"] #demo-perimeter-maps #demo-resort-map-title { display:inline; }
html[data-viewer-mode="sample"] #demo-perimeter-maps #resort-map-credit { font-size:7px;line-height:1.1; }
html[data-viewer-mode="sample"] #demo-perimeter-maps #replay-turn-map::after { font-size:8px;line-height:1.15; }
html[data-viewer-mode="sample"] body #view-replay :is(#clip-wrap,#demo-maps-row) :is(#resort-map,#replay-turn-map).collapsed {
  height:auto!important;min-height:0!important;aspect-ratio:auto!important;flex:none;
}
html[data-viewer-mode="sample"] #replay-turn-map.collapsed::after { display:none; }

/* All replay gauges share the maps' stable, compact collapse header. */
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay .video-gauge-mirror[data-gauge-collapse-mode="true"] {
  align-self:start!important;padding:2px!important;gap:1px!important;
  grid-template-rows:minmax(24px,auto) minmax(0,1fr) auto!important;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay .demo-gauge-head {
  display:flex;align-items:center;justify-content:space-between;gap:2px;min-width:0;min-height:24px;flex:none;grid-row:1;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay .demo-gauge-head .video-gauge-mirror-label {
  position:static!important;inset:auto!important;transform:none!important;width:auto!important;height:auto!important;
  min-width:0;min-height:0!important;padding:0!important;text-align:left;flex:1;line-height:1.1!important;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-gauge-collapse-mode="true"][data-source-kind="number"] {
  justify-content:flex-start!important;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-gauge-collapse-mode="true"][data-source-kind="number"] .video-gauge-mirror-readout {
  flex:1;justify-content:center;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay .video-gauge-mirror[data-gauge-collapse-mode="true"][data-gauge-dot-hidden="true"] {
  display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;
  visibility:visible!important;pointer-events:auto!important;
}
html[data-viewer-mode="sample"] body #view-replay #video-gauge-overlay [data-gauge-collapse-mode="true"][data-gauge-dot-hidden="true"] > :not(.demo-gauge-head) {
  display:none!important;
}