/* movecatching.com — the 3D glove path section. The stage's own rules (.p3d…) are the coach
   dashboard's, copied out of Firebase/web/video.css by tools/build_site_path3d.sh into
   path3d.css; this file only places the stage on the page and draws the view buttons, which the
   dashboard styles with its .seg control (shell.css). */
.gp { width: 100%; max-width: 1040px; margin-top: clamp(32px, 5vw, 56px); }
.gp-stage { position: relative; height: min(72vh, 640px); min-height: 420px; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line, #23272e); }
.gp-stage .p3d { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; text-align: left; }
/* Kept out of sight until the scanned mitt is drawn (glove-path.js adds .on), then faded in. */
.gp-stage .p3d { visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .35s; }
.gp-stage.on .p3d { visibility: visible; opacity: 1; transition: opacity .35s ease; }
.gp-wait, .gp-fail { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--dim, #757d89); font-size: 14px; font-weight: 600; }
.gp-fail, .gp-stage.failed .gp-wait, .gp-stage.on .gp-wait { display: none; }
.gp-stage.failed .gp-fail { display: grid; }
.gp-hint { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--dim, #757d89); }

/* The views: the dashboard's segmented control, in the site's dark. */
.gp .seg { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.gp .seg::-webkit-scrollbar { display: none; }
.gp .seg button { flex: none; min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: #fff; font: 600 13px var(--font, Montserrat, system-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.gp .seg button.on { background: #fff; color: #111; box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.gp .seg button:not(.on):hover { background: rgba(255,255,255,.12); }

/* A phone: the stage runs edge to edge; up/down swipes scroll the page, side to side turns it.
   The views are one scrolling row across the top, the round buttons drop below them. */
.gp-stage .p3d, .gp-stage .p3d > canvas { touch-action: pan-y; }
@media (max-width: 760px) {
  .gp { margin-inline: calc(-1 * clamp(20px, 4vw, 32px)); width: calc(100% + 2 * clamp(20px, 4vw, 32px)); }
  .gp-stage { height: 78svh; min-height: 460px; max-height: 680px; border-radius: 0; box-shadow: none; }
  .gp .p3d-views { left: 8px; right: 8px; top: 8px; max-width: none; flex-wrap: nowrap; }
  .gp .seg button { min-height: 32px; padding: 0 10px; font-size: 12px; }
  .gp .p3d-tools { top: 50px; right: 8px; }
  .gp .p3d-key { top: 54px; left: 12px; }
  .gp .p3d-dist { top: 96px; right: 8px; }
  .gp-hint { padding-inline: 16px; }
}

/* The play line can be dragged (glove-path.js): a taller, invisible grab strip over the thin line,
   no page scroll while dragging it, and a white dot on the playhead while it moves. */
.gp .p3d-line { touch-action: none; cursor: pointer; }
.gp .p3d-line::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; }
.gp .p3d-line .p3d-scrub { pointer-events: none; }
.gp .p3d-line.dragging .p3d-head::after, .gp .p3d-line:hover .p3d-head::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; }

/* Phones (Nov 12 2026): Views and every button on one row, smaller. */
@media (max-width: 560px) {
  .gp .p3d-views {top: 10px; left: 8px;}
  .gp .p3d-viewsbtn {height: 26px; padding: 0 8px; gap: 3px; font-size: 9.5px;}
  .gp .p3d-viewsbtn span {font-size: 7px;}
  .gp .p3d-tools {top: 10px; right: 8px; gap: 4px;}
  .gp .p3d-tools button {width: 26px; height: 26px;}
  .gp .p3d-tools button svg {width: 13px; height: 13px;}
  .gp .p3d-tools .p3d-angbtn, .gp .p3d-tools .p3d-phbtn {width: auto; height: 26px; padding: 0 7px; font-size: 7.5px;}
  .gp .p3d-dist {top: 44px;}
}

/* No Contact / Stick key on the website (Nolan, 11-12). */
.gp .p3d-key {display: none !important;}

/* Redirect switch: smaller than the dashboard's (Nolan, 11-12; a touch bigger later that day), none on phones. */
.gp .p3d-tools .p3d-redirsw {height: 21px; padding: 0 8px 0 5px; gap: 5px; font-size: 8.5px; top: calc(100% + 4px);}
.gp .p3d-redirsw .p3d-sw {width: 19px; height: 12px;}
.gp .p3d-redirsw .p3d-sw::after {top: 2px; left: 2px; width: 8px; height: 8px;}
.gp .p3d-redirsw[aria-checked="true"] .p3d-sw::after {transform: translateX(7px);}
@media (max-width: 760px) { .gp .p3d-tools .p3d-redirsw {display: none !important;} }

/* No pocket laser on the website (Nolan, 11-12). */
.gp .p3d-laserbtn {display: none !important;}

/* Views list drops down as on the dashboard: one view per line, never cut off (Nolan, 11-12).
   The website's own .seg row rule above would otherwise squeeze it into a clipped strip. */
.gp .p3d-viewmenu.seg {display: grid; gap: 2px; max-width: none; overflow: visible; min-width: 150px; padding: 6px; border-radius: 12px; background: rgba(28,28,30,.95);}
.gp .p3d-viewmenu.seg[hidden] {display: none;}
.gp .p3d-viewmenu.seg button {min-height: 32px; text-align: left; border-radius: 8px;}
@media (max-width: 560px) {
  .gp .p3d-viewmenu.seg {min-width: 120px; padding: 4px; top: calc(100% + 4px);}
  .gp .p3d-viewmenu.seg button {min-height: 28px; padding: 0 10px; font-size: 11px;}
}