[hidden] { display: none !important; }          /* a .btn's display rule must not unhide it */
/* EagleCourt's dark navy on every screen (his words, 28 Oct 2026: "lets do dark navy", "no black", "that is good";
   docs/navy-look-design-2026-10-28.png, docs/navy-3d-design-2026-10-28.png). Cards a shade lighter than the ground,
   white for the choice and the main button. --navy stays EagleCourt's navy: the words on a white button. */
:root { --navy: #0b2545; --green: #34c759; --ink: #fff; --muted: #9fb3cf; --line: #26446e; --red: #ff6b6b;
  --bg: #0d2444; --bg-top: #17365f; --bg-low: #0a1f3b; --card: #142f55; --card2: #1b3a66; --edge: #3c5a85; --hi: #c9d6ea; --dim: #7f97b8;
  --link: #8fb8ff; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif; color: var(--ink);
  background: var(--bg) radial-gradient(130% 640px at 50% -120px, var(--bg-top) 0%, var(--bg) 60%, var(--bg-low) 100%) no-repeat; min-height: 100vh; }
html, body { overflow-x: hidden; }       /* the page is fixed to the screen: it never slides sideways (his phone, 26 Oct) */
html { touch-action: manipulation; }     /* no double-tap zoom: iPhone Safari ignores user-scalable=no (his phone, 27 Oct) */
header { background: var(--navy); color: #fff; padding: 12px 24px; }
header h1 { margin: 0; font-size: 20px; }
header p { margin: 0; opacity: .9; }
.card { background: #fff; margin: 16px 24px; padding: 16px 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.row.status { margin-top: 12px; }
.btn { display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--navy); background: #fff; color: var(--navy); font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--navy); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
.bar { flex: 0 0 260px; height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; }
#progress { height: 100%; width: 0; background: var(--green); transition: width .4s; }
#jobs { list-style: none; padding: 0; margin: 8px 0 0; }
#jobs li { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
/* the upload page, his pick B (27 Oct): the upload bar, a failed upload, the link folded, previous videos as cards */
.upbar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.upbar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.upline { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.uperr { background: #fdecea; color: #b42318; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin: 10px 0 0; }
.linkbox { margin-top: 10px; }
.linkbox summary { cursor: pointer; color: var(--muted); font-size: 14px; }
#proc-left { margin-left: auto; }
#proc.idle .bar { display: none; }
#strip-img:not([src]), #strip-img[src=""] { visibility: hidden; }   /* no broken-picture mark before the pictures come */
#jobs-box > summary { font-weight: 700; cursor: pointer; color: var(--navy); }
#jobs li.pv { cursor: pointer; padding: 8px 0; }
#jobs li.pv:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 8px; }
.pv .th { width: 54px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--line); flex: none; }
.pv .pvtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv .pvtext b { font-size: 15px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv .pvtext small { font-size: 13px; color: var(--muted); }
.pv .tag { font-size: 12px; border-radius: 6px; padding: 3px 7px; background: #f4f6fa; color: var(--muted); font-weight: 700; white-space: nowrap; }
.pv .tag.done { background: #e6f4ea; color: #1a7f37; }
.pv .tag.error { background: #fdecea; color: #b42318; }
#jobs li .name { flex: 1; }
#jobs li .state { font-size: 13px; color: var(--muted); }
#played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #c7d2fe; }
#ticks { position: absolute; inset: 0; display: none; }        /* the unsure, racket and contact marks are off the scrubber (his word, 25 Oct); the unsure frames list stays on the details page */
#ticks i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); }
#ticks i.racket { top: 60%; background: #f0a500; }
#ticks i.peak { top: 25%; bottom: 25%; width: 8px; margin-left: -4px; transform: rotate(45deg); border-radius: 1px; }
#ticks i.contact { background: #0b2545; width: 2px; }
#ticks i.turned { top: 0; bottom: 70%; background: #3b82f6; width: 2px; }
#chainbox p { margin: 6px 0; }
#notes, #flaglist { margin: 10px 0 0; padding-left: 20px; }
#flaglist { columns: 3; font-size: 14px; }
#flaglist a { color: var(--red); cursor: pointer; text-decoration: underline; }

.card h2 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
table.serve { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 14px; }
table.serve th, table.serve td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
table.serve th { color: var(--navy); font-weight: 600; background: #f3f4f6; }
table.serve td.est { color: #a16207; }
table.serve td.frame a { color: var(--navy); cursor: pointer; text-decoration: underline; }
.serve-notes { margin: 0 0 10px; padding-left: 20px; font-size: 14px; }

.btn.small { padding: 4px 10px; font-size: 12px; }

/* Mark the serve (25 Oct 2026): the strip of previews with two handles */
#trim-vid { width: 100%; max-height: 42vh; background: var(--bg-low); border-radius: 10px; display: block; }
/* "Validating your video" (his words and drawing, 29 Oct 2026: docs/validate-popup-design-2026-10-29.png): plays, size,
   length, then the serve; a failed row stops there and says why */
.vd { position: fixed; inset: 0; z-index: 200; background: rgba(5, 14, 30, .72); display: flex; align-items: center; justify-content: center;
  padding: max(16px, var(--sa-top, env(safe-area-inset-top, 0px))) 16px max(16px, var(--sa-bottom, env(safe-area-inset-bottom, 0px))); }   /* clear of the notch and the home bar */
.vdsay { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }   /* read out, not shown */
.vd[hidden] { display: none; }
.vdcard { width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; background: var(--card); border: 1px solid var(--edge); border-radius: 22px;
  padding: 20px 18px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); color: #fff; }
.vdcard h2 { margin: 0 0 6px; font: 800 21px -apple-system, Roboto, system-ui, sans-serif; outline: none; }
.vdrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #23406a; }
.vdrow.vs-skip { opacity: .45; }
.vdrow b { display: block; font: 800 16px -apple-system, Roboto, system-ui, sans-serif; }
.vdrow span { display: block; color: #b9c6da; font: 600 13.5px -apple-system, Roboto, system-ui, sans-serif; margin-top: 2px; }
.vdrow > div { flex: 1; min-width: 0; }
.vdi { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 900 14px -apple-system, Roboto, system-ui, sans-serif; font-style: normal; box-sizing: border-box; }
.vdi.vs-ok { background: #1f7a3d; } .vdi.vs-bad { background: #e24b4a; }
.vdi.vs-wait, .vdi.vs-skip { border: 2px solid var(--edge); }
.vdi.vs-spin { border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: scspin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .vdi.vs-spin { animation: none; } }
.vdrow .vdcode { display: block; margin-top: 4px; font-size: 11.5px; opacity: .75; }   /* the phone's own error words */
.vdbar { height: 7px; border-radius: 4px; background: var(--edge); margin-top: 8px; } .vdbar i { display: block; height: 100%; border-radius: 4px; background: #fff; }
#vd-foot .vdnote { color: #b9c6da; font: 600 13.5px -apple-system, Roboto, system-ui, sans-serif; text-align: center; margin-top: 12px; }
#vd-foot button { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: 14px; font: 800 16px -apple-system, Roboto, system-ui, sans-serif; cursor: pointer; }
#vd-foot button[data-act="again"] { background: #fff; color: var(--navy); }
#vd-foot button[data-act="close"], #vd-foot button[data-act="cancel"] { background: transparent; color: #b9c6da; min-height: 44px; margin-top: 6px; }
/* the serve check and the crop, on the phone (his words and drawing, 29 Oct 2026: docs/serve-check-crop-design-2026-10-29.png):
   the video on the left, the crop buttons on the right; the box dims what is cut away */
.tvrow { display: flex; gap: 8px; align-items: stretch; }
.tvwrap { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 10px; }
.tvwrap #trim-vid { width: 100%; }
.cropmodes { width: 104px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.cmh { color: #b9c6da; font: 800 11px -apple-system, Roboto, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; margin: 2px 2px 0; }
.cmb { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 42px; padding: 0 9px; border-radius: 12px; border: 1.5px solid var(--edge);
  background: var(--card); color: #fff; font: 700 13px -apple-system, Roboto, system-ui, sans-serif; cursor: pointer; }
.cmb svg { flex: none; }
.cmb[aria-checked="true"] { background: #2d6cdf; border-color: #2d6cdf; }
.cmb:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }
.cropbox { position: absolute; border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 0 0 9999px rgba(8, 20, 40, .55); touch-action: none; cursor: move; z-index: 2;
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
    linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.5)), linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.5));
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; background-repeat: no-repeat; background-position: 0 33.3%, 0 66.6%, 33.3% 0, 66.6% 0; }
.cropbox .ch { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--navy); touch-action: none; }
.cropbox .ch::before { content: ""; position: absolute; inset: -12px; }                  /* a finger-sized target */
.cropbox .ch[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } .cropbox .ch[data-h="n"] { left: 50%; top: 0; cursor: ns-resize; }
.cropbox .ch[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; } .cropbox .ch[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.cropbox .ch[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; } .cropbox .ch[data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.cropbox .ch[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .cropbox .ch[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.scok { position: absolute; left: 8px; bottom: 8px; z-index: 3; background: #1f7a3d; color: #fff; border-radius: 14px; padding: 5px 10px; font: 800 13px -apple-system, Roboto, system-ui, sans-serif; pointer-events: none; }
.scover { position: absolute; inset: 0; z-index: 4; background: rgba(13, 36, 68, .72); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 0 16px; text-align: center; color: #fff; }
.scover b { font: 800 17px -apple-system, Roboto, system-ui, sans-serif; } .scover p { margin: 0; color: #d6e0ee; font: 600 13.5px -apple-system, Roboto, system-ui, sans-serif; }
.scover .scspin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: scspin 1s linear infinite; }
@keyframes scspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scover .scspin { animation: none; } }
.scover .scbad { width: 48px; height: 48px; border-radius: 50%; background: #e24b4a; display: grid; place-items: center; font: 900 26px -apple-system, Roboto, system-ui, sans-serif; }
.scover button { margin-top: 4px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: #fff; color: var(--navy); font: 800 15px -apple-system, Roboto, system-ui, sans-serif; cursor: pointer; }
#trim.blocked .tplay, #trim.blocked #strip, #trim.blocked #trim-legend, #trim.blocked #trim-hint, #trim.blocked #crop-modes { opacity: .25; pointer-events: none; }
/* replay under the video (his words and drawing, 29 Oct 2026): the marked part again and again, or the whole video */
.tplay { display: flex; gap: 10px; margin: 10px 11px 0; }
.tpb { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 4px 8px;
  border-radius: 14px; border: 1.5px solid var(--edge); background: var(--card); color: #fff; font: 700 15px -apple-system, Roboto, system-ui, sans-serif; cursor: pointer; }
.tpb small { display: block; font-weight: 600; opacity: .72; font-size: 12.5px; }   /* the length under the label: never cut off */
.tpb .tpi { display: grid; place-items: center; flex: none; }
.tpb[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--navy); }
.tpb:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }
.tpb span { white-space: nowrap; text-align: left; line-height: 1.2; }
.tpline { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1.5px var(--navy); pointer-events: none; z-index: 3; }
#strip { position: relative; height: 56px; margin: 14px 11px 0; border-radius: 10px; background: var(--line); touch-action: none; user-select: none; }
#strip-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; border-radius: 10px; pointer-events: none; }
#strip .dim { position: absolute; top: 0; bottom: 0; background: rgba(246,247,250,.75); border-radius: 10px; pointer-events: none; }
#strip .sel { position: absolute; top: -3px; bottom: -3px; border: 3px solid #f2b400; border-radius: 8px; box-sizing: border-box; cursor: grab; touch-action: none; }   /* a finger on it slides the window (28 Oct) */
#strip .handle { position: absolute; top: -3px; bottom: -3px; width: 22px; margin-left: -11px; background: #f2b400; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--navy); font-weight: 900; font-size: 20px; cursor: ew-resize; }
#strip .handle::before { content: ""; position: absolute; inset: -12px -14px; }      /* a finger-sized target */
#strip .shotcut { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--red); border-radius: 2px; pointer-events: none; }   /* where the video changes shot (29 Oct) */
#trim-shots { color: var(--red); }
.legend { display: flex; justify-content: space-between; font-size: 14px; margin-top: 10px; color: var(--muted); }
.legend b { color: var(--navy); }
.btn.wide { display: block; width: 100%; text-align: center; padding: 14px; font-size: 17px; margin-top: 14px; }

/* The result page as a phone app (his picture, 25 Oct 2026): job card, three panes with tabs, playback, metrics */
.clock { position: absolute; left: 0; top: 0; width: 8px; height: 8px; opacity: 0.01; pointer-events: none; }   /* the video keeps time; the panes draw it; a few real pixels so the phone decodes it */
#trim-vid { width: 100%; }
#jobcard { display: flex; gap: 12px; }
#thumb { width: 120px; height: 170px; border-radius: 12px; background: #2a3a55; flex: none; }
.meta { min-width: 0; }
.meta h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; word-break: break-all; color: var(--navy); }
.meta p { margin: 2px 0; }
.ok { background: #eef7f1; border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.ok b { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #14532d; }
.ok b::before { content: "\2713"; width: 20px; height: 20px; border-radius: 50%; background: #1f9d55; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.ok p { margin: 4px 0 0 28px; font-size: 12px; color: var(--muted); }
.tiles { display: flex; gap: 10px; margin-top: 10px; }
.tile { flex: 1; background: #f4f6fa; border-radius: 12px; padding: 10px 12px; }
.tile small { display: block; font-size: 12px; color: var(--muted); }
.tile b { font-size: 18px; color: var(--navy); }
.tabs { display: flex; gap: 8px; margin-top: 14px; }
.tab { flex: 1; border: 0; border-radius: 12px; padding: 11px 4px; font: 700 12px system-ui, -apple-system, sans-serif; background: #f4f6fa; color: var(--navy); cursor: pointer; min-height: 44px; }
.tab.on { background: var(--navy); color: #fff; }
#stage { display: flex; gap: 8px; margin-top: 12px; align-items: flex-start; }
#stage.one .pane { display: none; }                      /* one picture enlarged: the other two step aside until Compare all */
#stage.one .pane.big { display: block; flex: 1 1 100%; }
#stage.pair .pane { display: none; }                     /* the enlarged picture beside the Original, half and half */
#stage.pair .pane.big, #stage.pair #wrap-orig { display: block; flex: 1 1 48%; }
.tab.compare.on { background: var(--navy); color: #fff; }
.tab.compare { background: #e6ecf7; }
.pane { position: relative; flex: 1; min-width: 0; display: block; }      /* all three side by side on every size (his word, 25 Oct) */
.pane canvas { display: block; width: 100%; border-radius: 12px; background: var(--bg-low); }
#skel { position: absolute; left: 0; top: 0; pointer-events: none; background: transparent; }
.pane .cap { display: none; }
.panerow { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.legendrow { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.unitsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 8px; font-size: 13px; color: var(--muted); max-width: 100%; }
.unitsrow select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid #c9d1de; background: #fff; color: var(--navy); max-width: 100%; min-width: 0; }
#skel { touch-action: pan-y; }                         /* the page scrolls under the finger; only a finger on a line end moves the line (his phone, 26 Oct) */
.legendrow span, .legendrow label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.legendrow input.part { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.legendrow i { width: 14px; height: 6px; border-radius: 3px; background: var(--c); display: inline-block; }
.panerow .toggle { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; min-height: 32px; }
.panerow .toggle input { width: 20px; height: 20px; accent-color: #2d6cdf; }
#c3d { background: #2b2f36; touch-action: pan-y; }   /* a phone: up and down scrolls the page, sideways turns the body (his yes, 26 Oct) */
.no3d canvas { display: none !important; }
.no3d #no3d { display: block !important; padding: 40px 12px; text-align: center; background: #f4f6fa; border-radius: 12px; }
/* while the 3D body downloads: the words and a thin bar (his word, 25 Oct: "why this 3D shows up late") */
.loading3d canvas { display: none !important; }
.loading3d #load3d { display: block !important; padding: 40px 12px; text-align: center; background: #f4f6fa; border-radius: 12px; }
#load3d i { display: block; height: 4px; margin: 12px auto 0; max-width: 160px; background: #e6ecf7; border-radius: 2px; position: relative; overflow: hidden; }
#load3d i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--navy); border-radius: 2px; transition: width .2s; }
.playrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
#timeline { position: relative; flex: 1; height: 10px; background: var(--line); border-radius: 5px; cursor: pointer; }
#cursor { position: absolute; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); margin-left: -11px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
#played { border-radius: 5px; background: #2d6cdf; }
.ctl { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.b { border: 1.5px solid var(--navy); border-radius: 12px; padding: 12px 8px; font: 700 14px system-ui, -apple-system, sans-serif; color: var(--navy); background: #fff; flex: 1; text-align: center; cursor: pointer; text-decoration: none; min-height: 44px; }
.b.play { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 20px; padding: 0; }
.b.pri { background: var(--navy); color: #fff; }
.b.on { background: #e6ecf7; }
.views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.views small { flex: 1 1 100%; color: var(--muted); font-weight: 600; }
.views .b { flex: 1 1 30%; padding: 9px 4px; font-size: 12px; }
.onbody { display: flex; gap: 8px; align-items: center; color: var(--muted); margin-top: 10px; }
/* the enlarged picture's own controls, in a box right under it (his yes, 25 Oct 16:40) */
.own { margin-top: 10px; background: #f4f6fa; border-radius: 12px; padding: 10px 12px; }
.own .panerow { margin-top: 0; }
#metrics { margin-top: 14px; background: #f4f6fa; border-radius: 12px; padding: 12px; }
#metrics summary { margin: 0; font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; color: var(--navy); cursor: pointer; list-style: none; min-height: 32px; }
#metrics summary::-webkit-details-marker { display: none; }
#metrics summary::before { content: "\203A"; display: inline-block; width: 18px; font-size: 20px; line-height: 1; transition: transform .15s; margin-right: 4px; }
#metrics[open] summary::before { transform: rotate(90deg); }
#metrics summary span { flex: 1; }
#metrics[open] summary { margin-bottom: 8px; }
.linkbtn { border: 0; background: none; color: #2d6cdf; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.mgroup { background: #fff; border-radius: 12px; padding: 8px 10px; margin-top: 8px; }
/* a value may break into two lines rather than push the row past the phone's edge (his phone, 26 Oct: the page slid) */
.mgroup .mgrid b { white-space: normal; text-align: right; max-width: 48%; }
.mghead { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; }
#rnote:empty { display: none; }
.mgroup[hidden], .mgrid label[hidden] { display: none; }      /* a row the camera view cannot measure is not shown */
.mgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }   /* a row is never wider than its box */
.mgrid label { min-width: 0; }
.mgrid span { min-width: 0; overflow-wrap: anywhere; }
.mgrid label { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 32px; }
.mgrid input { width: 20px; height: 20px; accent-color: #2d6cdf; flex: none; }
.mgrid i { width: 5px; height: 20px; border-radius: 3px; background: var(--c, #8a94a6); flex: none; }
.mgrid span { flex: 1; }
.mgrid b { color: var(--navy); font-variant-numeric: tabular-nums; font-size: 13px; }
.fold { background: #f4f6fa; border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.fold summary { font-weight: 700; cursor: pointer; color: var(--navy); }
.acts { display: flex; gap: 10px; margin-top: 12px; }
.acts .b { padding: 13px 8px; }
@media (max-width: 600px) { .card { margin: 12px 12px; padding: 14px; } header { padding: 14px 16px; } }
@media (min-width: 900px) {
  .tab { font-size: 14px; }
  .mgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* two: three broke the names letter by letter in the 620 px sheet (his photo, 29 Oct 2026) */
  .mgrid span { min-width: 6.5em; overflow-wrap: break-word; }   /* a long number (Contact point) wraps, never the name */
  .card { max-width: 1100px; margin-left: auto; margin-right: auto; }
}

/* Three pages in one file (his words, 25 Oct): start / done / details. The done page is only the comparison card. */
#topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; }
#topbar b { font-size: 18px; color: var(--navy); }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--navy); font-size: 24px; line-height: 1; cursor: pointer; }
#jobline { margin: 0 16px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="done"] header, body[data-page="done"] #top, body[data-page="done"] #trim, body[data-page="done"] #details { display: none !important; }
body:not([data-page="start"]) #up, body:not([data-page="start"]) #jobs-card { display: none !important; }   /* the upload and the list are the start page's (the comment was left open on 27 Oct and hid the next three rules) */
body[data-page="details"] header, body[data-page="details"] #top, body[data-page="details"] #trim, body[data-page="details"] #view { display: none !important; }
body[data-page="start"] #topbar, body[data-page="start"] #jobline, body[data-page="start"] #view, body[data-page="start"] #details { display: none !important; }
body[data-page="analysis"] header, body[data-page="analysis"] #top, body[data-page="analysis"] #trim, body[data-page="analysis"] #view, body[data-page="analysis"] #details { display: none !important; }
/* the step bar (his words, 26 Oct: upload, review, analysis) */
.steps { display: flex; gap: 6px; margin: 8px 16px 4px; }
.step { flex: 1 1 0; min-width: 0; border: 0; border-radius: 12px; background: #f4f6fa; color: var(--navy); padding: 8px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; font: inherit; min-height: 48px; }
.step b { font-size: 14px; white-space: nowrap; }
.step small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.step.on { background: var(--navy); color: #fff; }
.step.on small { color: #cfd8e6; }
.step.done b::before { content: "\2713  "; color: #1f9d55; }
.step:disabled { opacity: .45; cursor: default; }
.step:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body.fsmode #steps { display: none !important; }
/* the six serve phases (stage 2, his yes 26 Oct) */
.phaserow { display: flex; gap: 5px; margin-top: 10px; }
.phc { flex: 1 1 0; min-width: 0; border: 0; border-top: 4px solid var(--k); border-radius: 10px; background: #f4f6fa; color: var(--navy);
  padding: 6px 2px 5px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; }
.phc b { font-size: 11px; line-height: 1.15; text-align: center; }
.phc small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.phc.on { background: #fff; outline: 2px solid var(--navy); }
.phc.moved small { color: #2d6cdf; font-weight: 700; }
.phc.check small { color: #c27c0e; font-weight: 700; }
.phc:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#phticks { position: absolute; inset: 0; pointer-events: none; }
#phticks i { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; border-radius: 2px; }
.phstatus { margin: 8px 0 0; text-align: center; }
/* Analyse with AI? and the Analysis without AI (his drawing, 28 Oct 2026) */
.aiq { font-size: 17px; font-weight: 800; color: var(--navy); margin: 16px 0 0; }
.btn.twoline { text-align: left; padding: 12px 14px; margin-top: 8px; border-radius: 12px; min-height: 52px; }
.btn.twoline b { display: block; font-size: 16px; }
.btn.twoline small { display: block; font-size: 13px; font-weight: 500; opacity: .85; }
.step.skip { opacity: .45; }
.step.skip b { text-decoration: line-through; }
/* the hand-marking Analysis as a native video-analysis screen (his drawing, 28 Oct 2026): dark, nothing over the picture */
body.mplayer { background: var(--bg-low); }
body.mplayer #steps, body.mplayer #jobline, body.mplayer #topbar { display: none !important; }
body.mplayer { overflow: hidden; }
/* one Analysis page for 2D and 3D, fixed to the screen like the first page (his words, 28 Oct 2026: "we need more space
   in this page"; docs/shared-analysis-design-2026-10-28.png): the top row, the phases, the tools around the picture, the
   film strip and the play row - nothing slides under the phone's bars */
body.mplayer #manual { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; margin: 0; max-width: none; border-radius: 0; box-shadow: none; color: #fff;
  padding: var(--sa-top, env(safe-area-inset-top, 0px)) 0 var(--sa-bottom, env(safe-area-inset-bottom, 0px)); background: transparent; overflow: hidden; }
body.mplayer #manual > :not(.msheet):not(.mmenu) { flex: none; width: 100%; max-width: 820px; margin-left: auto; margin-right: auto; }
.mtop { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px; }
.mtitle { text-align: center; } .mtitle b { display: block; font-size: 16px; } .mtitle small { font-size: 12px; color: #9aa3af; }
.mib { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mib[aria-pressed="true"] { background: #fff; color: var(--navy); }
.mib:focus-visible, .mstep:focus-visible, .mplay:focus-visible, .mpill:focus-visible, #mstrip:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 2px; }
body.mplayer .mph { padding: 0 12px; gap: 6px; }
body.mplayer .mph .phc { background: var(--card); color: #e5e7eb; border-top: 3px solid var(--k); border-left: 0; border-right: 0; border-bottom: 0; }
body.mplayer .mph .phc.ai { border-left: 1px dashed #3a4a66; border-right: 1px dashed #3a4a66; border-bottom: 1px dashed #3a4a66; }
body.mplayer .mph .phc.ai small { color: #6ea8ff; } body.mplayer .mph .phc.marked small { color: #4cd47a; }
body.mplayer .mph .phc.tomark small { color: #ffb44d; } body.mplayer .mph .phc.on { background: var(--card2); outline: 0; box-shadow: 0 0 0 1.5px #fff inset; }
.mhint { text-align: center; font-size: 12px; color: #9aa3af; margin: 6px 12px; min-height: 16px; }
.mstage { position: relative; background: var(--bg-low); }
#mvid { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--bg-low); }
#mskel { position: absolute; left: 0; top: 0; pointer-events: none; }
.mstripwrap { position: relative; margin: 10px 12px 0; height: 50px; border-radius: 8px; overflow: hidden; background: var(--card); touch-action: none; }
#mstrip { display: block; width: 100%; height: 100%; cursor: ew-resize; }
#mticks i { position: absolute; bottom: 0; width: 3px; height: 10px; margin-left: -1.5px; pointer-events: none; }
#mplayhead { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(0,0,0,.7); pointer-events: none; }
.mtime { display: flex; justify-content: space-between; margin: 5px 14px 0; font-size: 12px; color: #9aa3af; font-variant-numeric: tabular-nums; }
.mtime b { color: #fff; font-weight: 600; }
.mtransport { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 0; max-width: 420px; margin: 0 auto; }
.mstep { width: 52px; height: 52px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.mplay { width: 66px; height: 66px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mpill { min-width: 60px; height: 40px; border-radius: 20px; border: 0; background: var(--card); color: #fff; font: 700 14px system-ui, -apple-system, sans-serif; padding: 0 12px; cursor: pointer; }
.mpill.on { background: #fff; color: var(--navy); } .mpill:disabled { opacity: .35; cursor: default; }
.mmove { margin: 12px 14px 0; padding: 10px 12px; border-radius: 12px; background: var(--card); font-size: 13px; color: #c7cbd1; }
.mmove b { color: #fff; }
.mlinks { display: flex; gap: 16px; margin-top: 6px; }
.mlinks button { border: 0; background: transparent; color: #6ea8ff; font: 600 14px system-ui, -apple-system, sans-serif; padding: 8px 0; cursor: pointer; min-height: 40px; }
body.mplayer .mnotes-h { color: #fff; margin: 18px 14px 6px; }
body.mplayer #m-notes { display: block; width: calc(100% - 28px); margin: 0 14px; background: var(--card); color: #fff; border-color: var(--card2); }
.msaved { margin: 6px 14px 0; font-size: 12px; color: #9aa3af; }
.msheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card); color: #fff; border-radius: 18px 18px 0 0; padding: 8px 16px calc(20px + var(--sa-bottom, env(safe-area-inset-bottom, 0px)));
  max-width: 560px; margin: 0 auto; box-shadow: 0 -8px 30px rgba(0,0,0,.5); max-height: 70vh; overflow-y: auto; }
.msheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--edge); margin: 0 auto 10px; }
#sk-grab { touch-action: none; cursor: grab; box-sizing: content-box; padding: 8px 40px; margin-top: -8px; background-clip: content-box; }
.shead { display: flex; align-items: center; justify-content: space-between; font-size: 17px; margin-bottom: 8px; }
.skstatus { font-size: 12px; color: #9aa3af; margin: 0 0 8px; min-height: 14px; }
.mswitch { position: relative; width: 51px; height: 31px; } .mswitch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mswitch i { position: absolute; inset: 0; border-radius: 16px; background: var(--edge); transition: background .2s; pointer-events: none; }
.mswitch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform .2s; }
.mswitch input:checked + i { background: #34c759; } .mswitch input:checked + i::after { transform: translateX(20px); }
.mswitch input:focus-visible + i { outline: 2px solid #6ea8ff; outline-offset: 2px; }
.mseg { display: flex; background: var(--card2); border-radius: 9px; padding: 2px; margin-bottom: 8px; }
.mseg button { flex: 1; border: 0; background: transparent; color: #e5e7eb; font: 600 14px system-ui, -apple-system, sans-serif; padding: 9px 0; border-radius: 7px; cursor: pointer; }
.mseg button.sel { background: var(--edge); color: #fff; }
.srow { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--card2); font-size: 15px; }
.srow input[type="color"] { width: 34px; height: 34px; border: 2px solid var(--edge); border-radius: 50%; padding: 0; background: none; }
.srow input[type="range"] { width: 160px; }
.mchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mchip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--card2); color: #fff; border-radius: 18px; padding: 8px 12px; font: 500 14px system-ui, -apple-system, sans-serif; cursor: pointer; min-height: 36px; }
.mchip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .mchip:not(.on) { opacity: .4; text-decoration: line-through; }
.skdone { display: block; width: 100%; margin-top: 14px; border: 0; border-radius: 12px; background: #fff; color: var(--navy); font: 700 16px system-ui, -apple-system, sans-serif; padding: 13px; cursor: pointer; }
.phc.marked small { color: #1f7a3d; font-weight: 700; }
/* Gemini's suggested marks (his drawing, 28 Oct 2026): a blue "AI" tag until the coach keeps or moves the mark */
.phc { position: relative; }
.phc.ai { border-left: 1.5px dashed #c9d6ee; border-right: 1.5px dashed #c9d6ee; border-bottom: 1.5px dashed #c9d6ee; }
.phc.ai small { color: #2d6cdf; font-weight: 700; }
.phc .aitag { position: absolute; top: -8px; right: 2px; font-size: 9px; font-weight: 800; background: #2d6cdf; color: #fff; border-radius: 6px; padding: 1px 4px; }
.phc.wait small { color: #9aa3af; }
.mspin { display: inline-block; width: 12px; height: 12px; border: 2px solid #c9d6ee; border-top-color: #2d6cdf; border-radius: 50%; vertical-align: -2px; margin-right: 6px; animation: mspin 0.9s linear infinite; }
@keyframes mspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mspin { animation: none; } }
.phc.tomark small { color: #c27c0e; font-weight: 700; }
.mnotes-h { display: block; font-weight: 700; font-size: 17px; color: var(--navy); margin: 16px 0 6px; }
#m-notes { width: 100%; font: 16px/1.4 system-ui, -apple-system, sans-serif; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; resize: vertical; }
#m-notes:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.phmove { background: #f4f6fa; border-radius: 14px; padding: 12px; margin-top: 10px; }
.phmove p { margin: 2px 0 0; }
.phmove .b.pri { width: 100%; margin-top: 8px; }
.phmove .two { display: flex; gap: 8px; margin-top: 8px; }
.phmove .two .b { flex: 1; }
.phlabel { position: absolute; left: 10px; top: 10px; z-index: 3; color: #fff; font-weight: 700; font-size: 13px; border-radius: 8px;
  padding: 4px 9px; pointer-events: none; }
body.fsmode #phmove, body.fsmode #phstatus, body.fsmode #an-show, body.fsmode #analysis-empty { display: none !important; }
/* Analysis full screen (his phone, 27 Oct: "expand this and see on my full screen"; he picked A): the pictures fill the
   phone on black as on Review, the six phases stay on top so a tap still jumps to one */
body.fsmode[data-page="analysis"] #analysis { position: fixed; inset: 0; margin: 0; max-width: none; border-radius: 0; background: var(--bg-low); z-index: 40;
  padding: 10px; overflow: hidden; display: flex; flex-direction: column; }
body.fsmode[data-page="analysis"] #phaserow { flex: none; margin-top: 0; }
body.fsmode[data-page="analysis"] #an-player { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; margin-top: 8px; }
body.fsmode[data-page="analysis"] .phc { background: #1d2330; color: #fff; }
body.fsmode[data-page="analysis"] .phc:not(.check):not(.moved) small { color: #aab3c2; }
body.fsmode[data-page="analysis"] .phc.on { background: #2b3448; outline-color: #fff; }
body:not([data-page="details"]) #topbar { display: none !important; }   /* his phone, 26 Oct: crossed out on Review and Analysis; the step bar is the way back */
body[data-page="analysis"] #analysis { padding-top: 6px; }
body:not([data-page="analysis"]) #phticks, body:not([data-page="analysis"]) #phlabel { display: none !important; }   /* the phases are an Analysis thing (his word, 26 Oct) */
/* Analysis: the real person first; the SAM body (its skeleton and body numbers) or the 3D player beside her on the
   switch; the six phases on top (his words, 26 Oct: "move the real person to Analysis, and give me an option to bring
   the SAM body any time", "move the 6 phases up, not down") */
body[data-page="analysis"] #tabs { display: none !important; }
body[data-page="analysis"] #stage .pane { display: none !important; }
body[data-page="analysis"][data-an="real"] #wrap-orig { display: block !important; flex: 1 1 100% !important; }
body[data-page="analysis"][data-an="sam"] #wrap-orig, body[data-page="analysis"][data-an="sam"] #wrap-body,
body[data-page="analysis"][data-an="3d"] #wrap-orig, body[data-page="analysis"][data-an="3d"] #c3dwrap { display: block !important; flex: 1 1 48% !important; }
body[data-page="analysis"][data-an="3d"] #views { display: flex !important; }
body[data-page="analysis"]:not([data-an="3d"]) #views { display: none !important; }
body.fsmode[data-page="analysis"][data-an="3d"] #views { display: none !important; }   /* full screen: pictures only, as on Review */
.anshow { display: flex; gap: 4px; background: #f4f6fa; border-radius: 12px; padding: 4px; margin: 8px 0; }
.anshow button { flex: 1 1 0; min-width: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 13px system-ui, -apple-system, sans-serif;
  padding: 9px 2px; min-height: 40px; cursor: pointer; }
.anshow button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.anshow button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#an-player { margin-top: 10px; }
@media (min-width: 900px) { .steps { max-width: 1100px; margin-left: auto; margin-right: auto; } }
#view { margin-top: 0; }
.linkbtn.wide { display: block; width: 100%; text-align: center; padding: 12px; margin-top: 10px; font-size: 14px; }
details.inline { display: inline-block; }
details.inline summary { color: #2d6cdf; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
details.inline summary::-webkit-details-marker { display: none; }
details.inline[open] { display: block; width: 100%; }
#details h2 { font-size: 17px; }
@media (min-width: 900px) {
  .ctl { flex: 1 1 55%; }
  .views { flex: 1 1 40%; margin-top: 12px; }
  .ctlrow { display: flex; gap: 16px; align-items: flex-start; }
}

/* ---- the done page like his picture (26 Oct) -------------------------------------------------------------- */
#topbar { align-items: center; justify-content: flex-start; gap: 6px; padding: 10px 10px 4px; }
#topbar .tbtext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar .tbtext b { font-size: 21px; line-height: 1.2; }
#topsub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="details"] #topsub, body[data-page="analysis"] #topsub { display: none; }
.helpbtn { border: 2px solid var(--navy); width: 34px; height: 34px; font-size: 18px; font-weight: 800; flex: none; }
.tabs { flex-wrap: wrap; }
.tab { display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 10px; flex: 1 1 28%; --tabbg: #f4f6fa; }
.tab.on { --tabbg: var(--navy); }
.tab .ti { width: 26px; height: 26px; flex: none; display: inline-flex; }
.tab .ti svg { width: 100%; height: 100%; }
.tab span { display: flex; flex-direction: column; min-width: 0; }
.tab span b { font-size: 13px; line-height: 1.2; }
.tab span small { font-size: 11px; font-weight: 500; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.compare { flex: 1 1 40%; justify-content: center; text-align: center; min-height: 38px; padding: 8px; }
@media (max-width: 640px) {   /* the three views on one line on a phone */
  /* his phone, 26 Oct: the third tab fell to a second line. Icon on top, name under it, a third of the width each */
  .tab:not(.compare) { flex: 1 1 30%; min-width: 0; flex-direction: column; gap: 4px; text-align: center; padding: 8px 4px; }
  .tab .ti { width: 22px; height: 22px; }
  .tab span { align-items: center; max-width: 100%; }
  .tab span b { font-size: 12.5px; }
  .tab span small { font-size: 10px; max-width: 100%; }
}
#stage { position: relative; }
.stagebtn { position: absolute; z-index: 3; border: 1.5px solid rgba(255,255,255,.85); background: rgba(11,37,69,.55); color: #fff; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.stagebtn svg { width: 22px; height: 22px; }
.fsbtn { bottom: 8px; right: 8px; width: 44px; height: 44px; padding: 0; }
/* "Drawing on the video": a fold like the metrics box (his yes, 26 Oct) */
#own { margin-top: 14px; padding: 12px; }
#own > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; min-height: 32px; color: var(--navy); }
#own > summary::-webkit-details-marker { display: none; }
#own > summary::after { content: "\203A"; display: inline-block; width: 18px; font-size: 20px; line-height: 1; text-align: center; transition: transform .15s; }
#own[open] > summary::after { transform: rotate(90deg); }
#own[open] > summary { margin-bottom: 8px; }
#own .mico { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 8px; color: var(--navy); flex: none; display: inline-flex; }
#own .mico svg { width: 100%; height: 100%; }
#own .mtitle { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#own .mtitle b { font-size: 16px; }
#own .mtitle small { font-size: 12px; font-weight: 500; color: var(--muted); }
.ctl { justify-content: center; gap: 14px; }
.cb { width: 48px; height: 48px; border: 0; background: transparent; color: var(--navy); cursor: pointer; padding: 6px; flex: none; border-radius: 50%; }
.cb svg { width: 100%; height: 100%; }
.cb:active { background: #e6ecf7; }
.b.play { width: 64px; height: 64px; }
#msum { gap: 10px; }
#msum .mico { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 8px; color: var(--navy); flex: none; display: inline-flex; }
#msum .mico svg { width: 100%; height: 100%; }
#msum .mtitle { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#msum .mtitle b { font-size: 16px; }
#msum .mtitle small { font-size: 12px; font-weight: 500; color: var(--muted); }
#metrics summary::before { order: 9; }
.mghead { display: flex; align-items: center; gap: 6px; }
.mghead .mico { width: 16px; height: 16px; display: inline-flex; }
.mghead .mico svg { width: 100%; height: 100%; }
/* the ticks look like switches */
.mgrid input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 42px; height: 26px; border-radius: 13px; background: #c9d1de; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.mgrid input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.mgrid input[type="checkbox"]:checked { background: #2d6cdf; }
.mgrid input[type="checkbox"]:checked::after { left: 19px; }
.mgrid input[type="checkbox"]:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.mgrid label { border-top: 1px solid var(--line); padding: 6px 0; min-height: 44px; }
.mgrid label:first-child { border-top: 0; }
.info { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #8a94a6; background: #fff; color: #5b6577; font: italic 700 13px Georgia, serif; cursor: pointer; padding: 0; }
.rowinfo { margin: 0 0 6px 52px; font-size: 12px; color: var(--muted); background: #f4f6fa; border-radius: 8px; padding: 6px 8px; }
.rnote { margin: 8px 0 0; font-size: 13px; color: #1e3a8a; background: #eaf1fd; border-radius: 10px; padding: 10px 12px 10px 36px; position: relative; }
.rnote::before { content: "i"; position: absolute; left: 10px; top: 9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #2d6cdf; color: #2d6cdf;
  font: italic 700 12px Georgia, serif; display: flex; align-items: center; justify-content: center; }
.acts .b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.acts .b svg { width: 20px; height: 20px; flex: none; }
.dlwrap { position: relative; flex: 1; display: flex; }
.dlwrap .b { flex: 1; }
.dlmenu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 6px; z-index: 5; }
.dlmenu a { display: block; padding: 12px; border-radius: 8px; color: var(--navy); font-weight: 600; text-decoration: none; }
.dlmenu a:active, .dlmenu a:hover { background: #f4f6fa; }
/* full screen (his picture, 26 Oct): the pictures fill the screen, the player row stays under them */
body.fsmode { overflow: hidden; }
body.fsmode #topbar, body.fsmode #jobline, body.fsmode #tabs, body.fsmode #own, body.fsmode #metrics, body.fsmode .acts, body.fsmode #details-link, body.fsmode #views { display: none !important; }
body.fsmode #view { position: fixed; inset: 0; margin: 0; max-width: none; border-radius: 0; background: var(--bg-low); z-index: 40; padding: 10px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
body.fsmode .playrow #clock { color: #fff; }
body.fsmode .cb { color: #fff; }
body.fsmode .b.play { background: #fff; color: var(--navy); }
#metrics.single .mghead { display: none; }                       /* one box: its heading is the box's own title */
@media (max-width: 420px) { .playrow { flex-wrap: wrap; row-gap: 4px; } #timeline { flex: 1 1 100%; } #clock { margin-left: auto; } }
body.fsmode #stage { touch-action: none; }                        /* a swipe down reaches the page, not the browser's scroll */
body.fsmode, html:has(body.fsmode) { overscroll-behavior: none; }  /* no pull-to-refresh in full screen */

/* ---- the progress screen (his picture, 27 Oct 2026): the phone's own font and roomy targets, so it carries over to the
   EagleCourt app on iPhone (San Francisco) and Android (Roboto) */
#top.analyzing > .row, #top.analyzing #tips, #top.analyzing #linkbox { display: none !important; }
#an-panel { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif; color: #0f2238; }
#an-panel .an-title { font-size: 26px; line-height: 1.15; margin: 2px 0 14px; letter-spacing: -.3px; }
#an-panel .an-video { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; font-size: 15px; color: #33475e; overflow-wrap: anywhere; }
#an-panel .an-video img { width: 120px; height: 84px; object-fit: cover; border-radius: 12px; background: #dfe6ee; flex: none; }
#an-panel .an-card { border: 1px solid #e3e8ef; border-radius: 18px; padding: 16px; }
#an-panel .an-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#an-panel .an-top b { font-size: 18px; }
#an-panel #an-pct { font-size: 26px; font-weight: 800; }
#an-panel .an-track { height: 12px; border-radius: 7px; background: #e6eaf0; margin: 12px 0 8px; overflow: hidden; }
#an-panel .an-track i { display: block; height: 100%; width: 0; background: #2e9a4a; border-radius: 7px; transition: width .6s ease; }
#an-panel .an-nums { font-size: 14px; color: #5b6e84; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#an-panel .an-steps { list-style: none; margin: 14px 0 0; padding: 0; }
#an-panel .an-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; font-size: 16px; line-height: 26px; }
#an-panel .an-steps li small { line-height: 1.3; }
#an-panel .an-steps li small { display: block; color: #6b7c90; font-size: 13.5px; margin-top: 2px; }
#an-panel .an-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; box-sizing: border-box; }
#an-panel .an-dot.is-ok { background: #2e9a4a; }
#an-panel .an-dot.is-now { border: 3px solid #2e9a4a; background: #fff; }
#an-panel .an-dot.is-now::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #2e9a4a; }
#an-panel .an-dot.is-wait { border: 2px solid #cfd6df; background: #fff; }
#an-panel .an-steps li.is-wait span:last-child { color: #8796a8; }
#an-panel .an-leave { display: flex; gap: 12px; align-items: center; margin: 16px 2px; font-size: 14px; color: #4a5d73; }
#an-panel .an-ok { width: 38px; height: 38px; border-radius: 50%; background: #e8f4ec; color: #2e9a4a; display: flex; align-items: center; justify-content: center; flex: none; }
#an-panel .an-back { display: block; width: 100%; min-height: 50px; border: 2px solid #132644; border-radius: 14px; background: #fff; color: #132644; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }

/* ---- the serve is ready (his yes, 28 Oct 2026) */
#ready-panel { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif; color: #0f2238; }
#ready-panel .an-title { font-size: 26px; line-height: 1.15; margin: 4px 0 14px; letter-spacing: -.3px; }
#ready-panel .an-video { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; font-size: 15px; color: #33475e; overflow-wrap: anywhere; }
#ready-panel .an-video img { width: 120px; height: 84px; object-fit: cover; border-radius: 12px; background: #dfe6ee; flex: none; }
#ready-panel .ready-badge { display: inline-block; background: #e8f4ec; color: #1f7a3d; font-weight: 700; border-radius: 20px; padding: 4px 10px; font-size: 13px; }
#ready-panel .ready-open { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: #2e9a4a; color: #fff; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; margin-bottom: 10px; }
#ready-panel .an-back { display: block; width: 100%; min-height: 50px; border: 2px solid #132644; border-radius: 14px; background: #fff; color: #132644; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }


/* ==== the navy look, screen by screen (28 Oct 2026) ======================================================================= */
.card { background: transparent; box-shadow: none; color: var(--ink); }
.card h2, #details h2 { color: #fff; }
.muted { color: var(--muted); }
#steps, #jobline { display: none !important; }                     /* the drawing has no step bar: back arrows and "Next: Analysis" */
body:not([data-page="details"]) #topbar { display: none !important; }
#topbar b, .iconbtn { color: #fff; } .helpbtn { border-color: #fff; }
.btn { background: var(--card); color: #fff; border: 0; border-radius: 12px; min-height: 44px; }
.btn.primary { background: #fff; color: var(--navy); }
.btn.small { min-height: 32px; border-radius: 9px; }
.linkbtn, details.inline summary { color: var(--link); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
input[type="url"], input[type="text"], input[type="search"], select, textarea { background: var(--card); color: #fff; border: 1.5px solid var(--edge) !important; border-radius: 10px; }
input::placeholder, textarea::placeholder { color: var(--dim); }

/* the round buttons and the title of every page's top bar (as on the 2D player) */
.dtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(6px, var(--sa-top, 0px)) 2px 8px; }
.dtt { text-align: center; min-width: 0; flex: 1; } .dtt b { display: block; font-size: 17px; } .dtt small { font-size: 12px; color: var(--muted); }
.dib { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.dib.ghost { background: transparent; }
.dib[aria-expanded="true"] { background: #fff; color: var(--navy); }

/* ---- the first page -------------------------------------------------------------------------------------------- */
#top.door { max-width: 560px; margin: 0 auto; padding: 0 14px; }
/* the first page fixed in one place, as the Family Hub held on his iPhone (13 Sep): a fixed shell - the bar on top,
   Start Analysis last, only the middle scrolls, with a thin scroller (his phone, 28 Oct 2026: "not fixed in one place") */
body[data-page="start"] { overflow: hidden; }
body[data-page="start"] #top.door { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column;
  padding: var(--sa-top, env(safe-area-inset-top, 0px)) 14px var(--sa-bottom, env(safe-area-inset-bottom, 0px)); }
#door-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  margin: 0 -14px; padding: 0 14px 16px; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
#door-scroll::-webkit-scrollbar { width: 4px; } #door-scroll::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 2px; }
#top.door > .dtop { flex: none; }
.dtips { background: var(--card); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: var(--hi); margin: 0 0 6px; }
.door .sh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 16px 2px 8px; }
.door .num { width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.dcard { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 14px; padding: 10px; cursor: pointer; }
.dcard.sel { box-shadow: 0 0 0 2px #fff inset; }
.dcard .pic { width: 64px; height: 48px; border-radius: 10px; background: linear-gradient(160deg, #24497a, #2e6aa8); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.dct { min-width: 0; flex: 1; } .dct b { display: block; font-size: 16px; overflow-wrap: anywhere; } .dct small { display: block; font-size: 12.5px; color: var(--muted); }
.tick { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex: none; }
.dseg { display: flex; background: var(--card); border-radius: 10px; padding: 2px; }
.dseg button { flex: 1; border: 0; background: transparent; color: var(--hi); font-weight: 700; font-size: 14px; font-family: inherit; padding: 9px 0; border-radius: 8px; cursor: pointer; min-height: 40px; }
.dseg button.sel { background: #fff; color: var(--navy); }
.drop { display: block; margin-top: 8px; background: rgba(255,255,255,.04); border: 1.5px dashed var(--edge); border-radius: 14px; text-align: center; padding: 18px 10px; cursor: pointer; color: #fff; }
.drop.over { border-color: #fff; background: var(--card2); }   /* a video dragged over it (a laptop) */
.drop b { display: block; font-size: 15px; margin-top: 4px; } .drop small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.linkbox { margin-top: 8px; background: var(--card); border-radius: 14px; padding: 10px 12px; }
.linkbox label { color: var(--hi); }
.dnote { font-size: 12.5px; color: var(--muted); margin: 6px 2px 0; }
.chosen { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 10px 12px; margin-top: 8px; }
.chosen .x { border: 0; background: transparent; color: var(--link); font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; min-height: 40px; padding: 0 4px; }
.upcard { background: var(--card); border-radius: 14px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.upbar { background: var(--edge); } .uperr { background: rgba(255,107,107,.15); color: #ffb4b4; }
#trim { margin-top: 8px; }
#trim-vid { background: var(--bg-low); max-height: 38vh; }
#strip { background: var(--card); margin: 10px 11px 0; }
#strip .dim { background: rgba(10,31,59,.66); }
.legend { color: var(--muted); font-size: 12.5px; } .legend b { color: #fff; }
/* the serve stance before Start (30 Oct 2026): two buttons like the analysis choice below them */
.stances { display: flex; gap: 10px; }
.stance { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card); color: #fff; border: 2px solid var(--edge); border-radius: 14px; padding: 10px; min-height: 64px; cursor: pointer; font-family: inherit; }
.stance b { display: block; font-size: 16px; } .stance small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.25; }
.stance svg { flex: 0 0 34px; color: #fff; }
.stance.sel { border-color: #fff; background: var(--card2); }
.stance:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.mstance { margin: 4px 0 6px; padding: 0 12px; font-weight: 800; font-size: 14px; color: var(--hi); }   /* lined up with the phase cards (.mph) */
@media (min-width: 768px) { .mstance { padding: 0 16px; } }
.modes { display: flex; gap: 10px; }
.mode { flex: 1 1 0; min-width: 0; position: relative; text-align: left; background: var(--card); color: #fff; border: 0; border-radius: 14px; padding: 10px; min-height: 104px; cursor: pointer; font-family: inherit; }
.mode.sel { box-shadow: 0 0 0 2px #fff inset; background: var(--card2); }
.mode .tick { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; font-size: 12px; visibility: hidden; }
.mode.sel .tick { visibility: visible; }
.mode b { display: block; font-size: 15px; margin-top: 6px; } .mode small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.tag3, .tag2, .pv .tag.tag3, .pv .tag.tag2 { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 6px; background: #2d6cdf; color: #fff; }
.tag2, .pv .tag.tag2 { background: #34c759; color: var(--navy); }
#proc { font-size: 13px; color: var(--muted); margin-top: 12px; }
#proc .bar { flex: 1 1 100%; background: var(--edge); }
.go { position: fixed; left: 50%; transform: translateX(-50%); width: min(532px, calc(100% - 28px)); bottom: calc(18px + var(--sa-bottom, 0px)); z-index: 20;
  border: 0; border-radius: 14px; background: #fff; color: var(--navy); font-weight: 700; font-size: 17px; font-family: inherit; padding: 15px; cursor: pointer; min-height: 52px; }
.go:disabled { background: var(--card2); color: var(--dim); cursor: default; }
.go.inpage { position: static; transform: none; display: block; width: 100%; margin: 16px 0 0; }
.go.saved { background: var(--card2); color: #4cd47a; }
body:not([data-page="start"]) #start-go, #top.analyzing #start-go { display: none !important; }
#top.door #start-go { position: static; transform: none; width: 100%; flex: none; margin: 8px 0 12px; }
#top.analyzing #door-form, #top.analyzing #tips { display: none !important; }

/* the progress and the ready card, in the same navy */
#an-panel, #ready-panel { color: #fff; }
#an-panel .an-title, #ready-panel .an-title { font-size: 22px; }
#an-panel .an-video, #ready-panel .an-video { background: var(--card); border-radius: 14px; padding: 8px; color: var(--hi); }
#an-panel .an-video img, #ready-panel .an-video img { width: 56px; height: 64px; background: var(--card2); }
#an-panel .an-card { background: var(--card); border: 0; }
#an-panel .an-track { background: var(--edge); } #an-panel .an-track i { background: #34c759; }
#an-panel .an-nums, #an-panel .an-steps li small, #an-panel .an-leave { color: var(--muted); }
#an-panel .an-dot.is-ok { background: #34c759; }
#an-panel .an-dot.is-now { border-color: #34c759; background: var(--card); } #an-panel .an-dot.is-now::after { background: #34c759; }
#an-panel .an-dot.is-wait { border-color: var(--edge); background: var(--card); }
#an-panel .an-steps li.is-wait span:last-child { color: var(--dim); }
#an-panel .an-ok { background: rgba(52,199,89,.15); color: #4cd47a; }
#an-panel .an-back, #ready-panel .an-back { background: var(--card); color: #fff; border: 0; }
#ready-panel .ready-badge { background: rgba(52,199,89,.15); color: #4cd47a; }
#ready-panel .ready-open { background: #fff; color: var(--navy); }

/* ---- the Library ---------------------------------------------------------------------------------------------- */
#library { max-width: 560px; margin: 0 auto; padding: 0 14px calc(24px + var(--sa-bottom, 0px)); }
body:not([data-page="library"]) #library { display: none !important; }
body[data-page="library"] #top, body[data-page="library"] #view, body[data-page="library"] #analysis,
body[data-page="library"] #manual, body[data-page="library"] #details { display: none !important; }
#lib-search { display: block; width: 100%; padding: 10px 12px; font-size: 15px; font-family: inherit; margin: 2px 0 10px; }
#jobs, #jobs-other { list-style: none; padding: 0; margin: 0; }
#jobs li, #jobs-other li { display: flex; gap: 12px; align-items: center; background: var(--card); border-radius: 12px; padding: 8px; margin-bottom: 7px; border: 0; cursor: pointer; }
#jobs li:focus-visible, #jobs-other li:focus-visible { outline: 2px solid var(--link); }
.pv .th { width: 44px; height: 58px; background: var(--card2); }
.pv .pvtext b { color: #fff; } .pv .pvtext small { color: var(--muted); }
.pv .tag { background: var(--card2); color: var(--hi); }
.pv .tag.done { background: rgba(52,199,89,.15); color: #4cd47a; } .pv .tag.error { background: rgba(255,107,107,.15); color: #ffb4b4; }
#jobs-box { margin-top: 14px; } #jobs-box > summary { color: var(--muted); font-weight: 700; padding: 8px 2px; }
#jobs-box ul { margin-top: 8px; }

/* ---- Review and the 3D Analysis: the 2D player's look and buttons ----------------------------------------------- */
#view, #analysis { max-width: 820px; margin: 0 auto; padding: 0 10px calc(28px + var(--sa-bottom, 0px)); }
.tabs.vseg { display: flex; flex-wrap: wrap; gap: 0; background: var(--card); border-radius: 10px; padding: 2px; margin-top: 2px; }
.vseg .tab:not(.compare) { flex: 1 1 0; min-width: 0; flex-direction: row; justify-content: center; background: transparent; color: var(--hi); border-radius: 8px; padding: 8px 2px; min-height: 40px; }
.vseg .tab .ti, .vseg .tab span small { display: none !important; }
.vseg .tab span b { font-size: 13.5px; }
.vseg .tab.on { background: #fff; color: var(--navy); }
.vseg .tab.compare { flex: 1 1 40%; background: transparent; color: var(--link); min-height: 36px; margin-top: 2px; font-size: 13px; }
.vseg .tab.compare.on { background: var(--card2); color: #fff; }
.pane canvas { background: var(--bg-low); border-radius: 8px; }
#c3d { background: var(--card); }
.no3d #no3d, .loading3d #load3d { background: var(--card); color: var(--hi); }
#load3d i { background: var(--edge); } #load3d i::after { background: #fff; }
.views small { color: var(--muted); }
.views .b { background: var(--card); color: var(--hi); border: 0; border-radius: 16px; min-height: 36px; }
.views .b.on { background: #fff; color: var(--navy); }
.playrow { margin-top: 10px; }
#timeline { height: 48px; border-radius: 8px; overflow: hidden; background: var(--card); touch-action: none; cursor: ew-resize; flex: 1 1 100%; }
#rstrip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#played { display: none; }
#cursor { top: 0; bottom: 0; height: auto; width: 3px; margin-left: 0; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(10,31,59,.8); }
#phticks i { top: auto; bottom: 0; height: 10px; width: 3px; margin-left: -1.5px; }
#r-time { margin: 5px 4px 0; }
.ctl.mtransport { padding-top: 10px; gap: 0; }
.ctl .mpill svg { display: block; margin: 0 auto; }
#fs { min-width: 52px; }
body[data-page="analysis"]:not(.fsmode) #fs, body:not([data-page="analysis"]) #r-mark { display: none !important; }
.phc { background: var(--card); color: var(--hi); }
.phc small { color: var(--muted); }
.phc.on { background: var(--card2); outline: 0; box-shadow: 0 0 0 1.5px #fff inset; }
.phc.moved small { color: var(--link); } .phc.check small, .phc.tomark small { color: #ffb44d; } .phc.marked small { color: #4cd47a; }
.phc.ai { border-left: 1px dashed var(--edge); border-right: 1px dashed var(--edge); border-bottom: 1px dashed var(--edge); }
.phc.ai small { color: var(--link); }
.anshow { background: var(--card); padding: 2px; border-radius: 10px; }
.anshow button { color: var(--hi); border-radius: 8px; }
.anshow button.on { background: #fff; color: var(--navy); box-shadow: none; }
.phmove { background: var(--card); color: var(--hi); }
.phmove b { color: #fff; }
.b { background: var(--card2); color: #fff; border: 0; }
.b.pri { background: #fff; color: var(--navy); }
.mnotes-h { color: #fff; margin: 18px 4px 6px; }
#m-notes, #a-notes { display: block; width: 100%; font-size: 16px; line-height: 1.4; font-family: inherit; padding: 10px; resize: vertical; }
#a-notes:focus, #m-notes:focus { outline: 2px solid var(--link); }
#analysis .msaved { margin: 6px 4px 0; }
#analysis .go.inpage, #manual .go.inpage { margin: 16px 0 0; }
body.mplayer #manual .go.inpage { width: calc(100% - 28px); margin: 16px 14px 0; }
.nrow { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 9px 11px; }
#own, #metrics { background: transparent; padding: 0; margin-top: 10px; }
#own > summary { display: none; }                                    /* the skeleton button at the top opens it */
#msum .mico, #own .mico { background: var(--card2); color: #fff; width: 34px; height: 34px; padding: 7px; }
#msum .mtitle b { color: #fff; font-size: 14.5px; } #msum .mtitle small { color: var(--muted); }
#metrics summary { color: #fff; }
.mgroup { background: var(--card); }
.mghead { color: var(--muted); }
.mgrid label { border-top-color: var(--line); }
.mgrid b { color: var(--hi); }
.mgrid input[type="checkbox"] { background: var(--edge); }
.mgrid input[type="checkbox"]:checked { background: #34c759; }
.info { background: transparent; border-color: var(--dim); color: var(--hi); }
.rowinfo { background: var(--card2); color: var(--hi); }
.rnote { background: var(--card2); color: var(--hi); } .rnote::before { border-color: var(--link); color: var(--link); }
.unitsrow { color: var(--muted); } .unitsrow select { color: #fff; }
.own .panerow .toggle { color: #fff; }
.legendrow { color: var(--hi); }
.acts .b { background: var(--card); color: #fff; }
.acts .b.pri { background: var(--card); color: #fff; }
.dlmenu { background: var(--card2); box-shadow: 0 6px 24px rgba(5,15,30,.5); }
.dlmenu a { color: #fff; } .dlmenu a:active, .dlmenu a:hover { background: var(--card); }
/* the drawing options and the numbers as sheets from the bottom (his 3D drawing): the page dims behind them */
details.sheet[open]::before { content: ""; position: fixed; inset: 0; background: rgba(5,15,30,.55); z-index: 59; }
details.sheet[open] > .sheetbody { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-width: 560px; margin: 0 auto; max-height: 72vh; overflow-y: auto;
  background: #11294d; border-radius: 20px 20px 0 0; padding: 8px 14px calc(20px + var(--sa-bottom, 0px)); box-shadow: 0 -10px 30px rgba(5,15,30,.45); }
.sheetbody .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--edge); margin: 0 auto 10px; }
.sheethead { display: block; font-size: 17px; margin: 0 2px 8px; }
.sheetdone { background: #fff; color: var(--navy); }
/* the 3D Analysis top bar leaves full screen to the pictures */
body.fsmode #analysis > .dtop, body.fsmode #view > .dtop, body.fsmode #to-analysis, body.fsmode #analysis .mnotes-h, body.fsmode #a-notes, body.fsmode #a-saved, body.fsmode #a-save { display: none !important; }
body.fsmode #view, body.fsmode[data-page="analysis"] #analysis { background: var(--bg-low); }
body.fsmode[data-page="analysis"] .phc { background: var(--card); }

/* ---- the 2D player in navy: the ground of the page, nothing black ------------------------------------------------ */
body.mplayer { background: var(--bg) radial-gradient(130% 640px at 50% -120px, var(--bg-top) 0%, var(--bg) 60%, var(--bg-low) 100%) no-repeat; }
.mstage, #mvid { background: var(--bg-low); }

/* ---- Details: the tables in navy ----------------------------------------------------------------------------------- */
table.serve th { background: var(--card2); color: #fff; } table.serve th, table.serve td { border-bottom-color: var(--line); }
table.serve td.frame a { color: var(--link); } table.serve td.est { color: #ffcf70; }
#details { max-width: 1100px; }
#linkbox .row { gap: 8px 10px; margin-top: 6px !important; }
#linkbox #link { flex: 1 1 100% !important; min-width: 0 !important; }
#linkbox label { font-size: 13px; }
#linkbox #fetch { margin-left: auto; background: #fff; color: var(--navy); }
/* one view open: the three views stay on one line, "+ Original" and "Compare all" under them */
.vseg .tab:not(.compare) { flex: 1 1 30%; }
.vseg .tab.compare { flex: 1 1 45%; }
.unitsrow select, .row select, .onbody select { background: var(--card2); color: #fff; }
/* the progress and ready cards: the video's picture only, no file name or words (his phone, 28 Oct 2026: "remove
   either in two except video") */
#an-panel .an-video > span, #ready-panel .an-video > span { display: none; }
#an-panel .an-video, #ready-panel .an-video { background: transparent; padding: 0; justify-content: center; }
#an-panel .an-video img, #ready-panel .an-video img { width: 96px; height: 128px; border-radius: 12px; }

/* ---- the shared Analysis page: the middle row, the steel-blue tools (his pick B, 28 Oct 2026), the labelled play row */
.mib { width: 40px; height: 40px; text-decoration: none; }
.mshare { margin-left: auto; height: 40px; border-radius: 20px; border: 0; background: #fff; color: var(--navy); font-weight: 800; font-size: 15px; font-family: inherit; padding: 0 18px; cursor: pointer; }
.mline { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.mline .mhint { flex: 1; margin: 5px 0; text-align: left; font-size: 11.5px; color: var(--muted); }
.mline .mpill { height: 32px; min-width: 64px; font-size: 13px; }
.mmid { flex: 1 1 auto !important; min-height: 0; display: flex; gap: 5px; padding: 4px 6px 0; }
.mtools { width: 50px; flex: none; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mtools::-webkit-scrollbar { display: none; }
.mtool { background: #3a5274; box-shadow: inset 0 0 0 1px #5a7598; color: #eef3fa; border: 0; border-radius: 10px; flex: 1 0 40px; max-height: 58px; min-height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 600 8.5px -apple-system, Roboto, system-ui, sans-serif; cursor: pointer; padding: 2px 0; }
.mtool.on, .mtool[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: none; }
.mtool:disabled { opacity: .45; cursor: default; }
.mtool:focus-visible, .mdot:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.mdots { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 0; border-radius: 10px; background: #3a5274; box-shadow: inset 0 0 0 1px #5a7598; }
.mdot { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; padding: 0; }
.mdot.on { box-shadow: 0 0 0 2px #3a5274, 0 0 0 4px #fff; }
.mstage { flex: 1; min-width: 0; position: relative; overflow: hidden; border-radius: 8px; touch-action: none; }   /* a drag pans or draws, never scrolls (the review) */
body.mplayer, html:has(body.mplayer) { overscroll-behavior: none; }   /* no pull-to-refresh on the Analysis page */
.mzoom { position: absolute; inset: 0; transform-origin: center; transition: transform .2s ease; }
#mdraw { position: absolute; left: 0; top: 0; pointer-events: none; touch-action: none; }
.mstage.two .mzoom { right: 50%; }
.mside { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; }
.mbodywrap { position: absolute; inset: 0; overflow: hidden; }
#mbody { position: absolute; top: 0; left: -100%; width: 200%; height: 100%; object-fit: contain; background: var(--bg-low); }
#mside #c3dwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#mside #c3d { width: 100% !important; height: 100% !important; object-fit: contain; border-radius: 8px; }
.mcmp { margin: 4px 10px 0; }
body.mplayer .mstripwrap { margin: 8px 8px 0; height: 44px; }
body.mplayer .mtime { margin: 4px 12px 0; }
.mtransport { padding: 6px 10px 10px; max-width: 460px; gap: 4px; }
.mtb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); min-width: 0; }
.mtb .mstep { width: 46px; height: 46px; } .mtb .mplay { width: 58px; height: 58px; } .mtb .mpill { height: 36px; min-width: 52px; }
.mmenu { position: absolute; right: 10px; top: calc(52px + var(--sa-top, env(safe-area-inset-top, 0px))); z-index: 40; width: 230px; background: var(--card2); border-radius: 14px; padding: 6px;
  box-shadow: 0 10px 30px rgba(5,15,30,.55); display: flex; flex-direction: column; }
.mmenu button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #fff; font: 600 15px -apple-system, Roboto, system-ui, sans-serif; text-align: left; padding: 12px 10px; border-radius: 9px; cursor: pointer; min-height: 44px; }
.mmenu button + button { border-top: 1px solid var(--line); }
.mmenu button:active { background: var(--card); } .mmenu small { margin-left: auto; color: #4cd47a; font-size: 11px; }
.mmenu .lib-save.saved { color: #4cd47a; }
#notes-sheet textarea, #text-sheet input { display: block; width: 100%; font: 16px/1.4 -apple-system, Roboto, system-ui, sans-serif; padding: 10px; margin-top: 6px; background: var(--card); color: #fff; }
#notes-sheet .mnotes-h, #text-sheet .mnotes-h { margin: 0 2px; font-size: 16px; }
body.mplayer #manual > .mstripwrap { width: calc(100% - 16px) !important; max-width: 804px !important; margin: 8px auto 0 !important; }
/* ---- record your analysis (his picture, 28 Oct 2026) */
.mtbr { order: 9; }
.mrec { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: #3a5274; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mrec i { width: 20px; height: 20px; border-radius: 50%; background: #e24b4a; transition: border-radius .15s, width .15s, height .15s; }
.mrec.stop i { width: 16px; height: 16px; border-radius: 4px; }
.mrec.stop { animation: mrecpulse 1.4s ease-in-out infinite; }
@keyframes mrecpulse { 50% { box-shadow: 0 0 0 6px rgba(226,75,74,.35); } }
@media (prefers-reduced-motion: reduce) { .mrec.stop { animation: none; } }
.mcam { position: absolute; right: 8px; bottom: 8px; width: 30%; max-width: 160px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 2px solid #fff; background: var(--card);
  transform: scaleX(-1); z-index: 4; touch-action: none; cursor: grab; }
.mcam.big { width: 46%; max-width: 240px; }
.mcap { position: absolute; left: 8px; bottom: 8px; max-width: 58%; background: rgba(13,36,68,.88); color: #fff; border-radius: 10px; padding: 6px 9px; font-size: 12.5px; line-height: 1.3; z-index: 4; pointer-events: none; }
.mrecb { position: absolute; left: 8px; top: 8px; background: #e24b4a; color: #fff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 3px 7px; z-index: 4; pointer-events: none; }
.ropt { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--card); color: #fff; border: 0; border-radius: 12px; padding: 11px; margin-top: 7px; cursor: pointer; font-family: inherit; }
.ropt b { display: block; font-size: 15px; } .ropt small { display: block; font-size: 12px; color: var(--muted); }
.ropt.on { box-shadow: 0 0 0 2px #fff inset; background: var(--card2); }
.roi { width: 36px; height: 36px; border-radius: 10px; background: #3a5274; display: flex; align-items: center; justify-content: center; flex: none; }
.recgo { background: #e24b4a !important; color: #fff !important; }
#rec-preview { display: block; width: 100%; max-height: 52vh; border-radius: 10px; background: var(--bg-low); margin-top: 6px; }
.sheethead small { font-weight: 600; font-size: 12px; color: var(--muted); margin-left: 6px; }
.mcmp { background: var(--card); } .mcmp button { color: var(--hi); } .mcmp button.sel { background: #fff; color: var(--navy); }
/* the space between the progress card and "Back to library" (his phone, 28-29 Oct 2026: "back to library is not fixed
   yet" - the "You can leave this screen" line used to hold it) */
#an-panel .an-back, #ready-panel .an-back { margin-top: 14px; }

/* the lighter top row (his drawing, 29 Oct 2026): X on the left, more on the right; the menu holds the rest */
.mgap { flex: 1; }
/* times between phases (his picture and words, 29 Oct 2026; his pick C, docs/phase-times-touch-design-2026-10-29.png): a
   dotted line at each phase down to the middle of its card, each arrow from one line exactly to the next in the later
   phase's colour, its seconds above it; a time from an AI mark is faded with "about" until both ends are checked.
   #m-times keeps the bar's room so X and ... stay put; the drawing hangs from .mtop over the space above the cards */
.mtop { position: relative; }
.mtimes { align-self: stretch; min-width: 0; }
.mtimes > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* read out, not shown */
.mtlay { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.mtl { position: absolute; width: 0; border-left: 2px dotted #9fb3d1; }
.mta { position: absolute; height: 4px; background: var(--k); border-radius: 2px 0 0 2px; }
.mta::after { content: ""; position: absolute; right: -9px; top: -4px; border-left: 9px solid var(--k); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.mtn { position: absolute; transform: translateX(-50%); text-align: center; color: var(--k); font: 800 14px -apple-system, Roboto, system-ui, sans-serif; white-space: nowrap; }
@media (max-width: 360px) { .mtn { font-size: 12px; } }        /* 320 px phones: "≈0.03s" fits beside its neighbours */
.mta.rough, .mtn.rough { opacity: .62; }                     /* faded but readable on navy (the blue Next ball) */
#mphaserow.timed { margin-top: 16px; }                         /* room for the arrows under X and ... */
.mtsw { margin-left: auto; flex: none; position: relative; width: 42px; height: 26px; border-radius: 13px; background: #55657f; transition: background .15s; }
.mtsw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
[aria-checked="true"] > .mtsw { background: #34c759; }
[aria-checked="true"] > .mtsw::after { left: 18px; }
.mmenu a { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 600 15px -apple-system, Roboto, system-ui, sans-serif; padding: 12px 10px; border-radius: 9px; min-height: 44px; border-top: 1px solid var(--line); }
.mmenu a + button, .mmenu button + a { border-top: 1px solid var(--line); }
.mline .mpill[hidden] { display: none !important; }

/* ==== tablets: iPads and Android tablets, upright or sideways (his words, 29 Oct 2026: "we need iPads, iPhones, and
   Android versions", "make sure other pages will support iPad too"; docs/ipad-design-2026-10-29.png). Phones keep the
   layout above; from 700 px wide the pages use the room */
@media (min-width: 700px) {
  #top.door { max-width: 980px; padding: 0 24px; }
  body[data-page="start"] #top.door { padding-left: 24px; padding-right: 24px; }
  #door-scroll { margin: 0 -24px; padding: 0 24px 16px; }
  .dtt b { font-size: 19px; } .dtt small { font-size: 13px; }
  #door-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "s1 s2" "s3 s2"; grid-template-rows: auto 1fr; column-gap: 22px; align-items: start; }
  #dstep-1 { grid-area: s1; } #dstep-2 { grid-area: s2; } #dstep-3 { grid-area: s3; }
  .door .sh { font-size: 13px; margin-top: 18px; }
  .dcard { padding: 12px; } .dct b { font-size: 17px; } .dct small { font-size: 13.5px; }
  .dseg button { font-size: 15px; min-height: 44px; }
  .drop { padding: 34px 10px; }
  #trim-vid { max-height: 46vh; }
  .modes { gap: 12px; } .mode { min-height: 124px; padding: 12px; } .mode b { font-size: 17px; } .mode small { font-size: 13.5px; }
  .go { width: min(932px, calc(100% - 48px)); font-size: 18px; min-height: 56px; }
  #top.door #start-go { width: 100%; }
  #an-panel, #ready-panel { max-width: 600px; margin: 0 auto; }
  /* the Library: two columns of serves */
  #library { max-width: 980px; padding: 0 24px calc(24px + var(--sa-bottom, 0px)); }
  #jobs, #jobs-other { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; }
  .pv .th { width: 56px; height: 74px; }
  /* Review: the three pictures and their buttons, bigger */
  #view { max-width: 1180px; padding: 0 20px calc(28px + var(--sa-bottom, 0px)); }
  .vseg .tab span b { font-size: 15px; } .vseg .tab:not(.compare) { min-height: 46px; }
  #timeline { height: 58px; }
  .ctl.mtransport { max-width: 520px; }
  .ctl .mstep { width: 56px; height: 56px; } .ctl .mplay { width: 70px; height: 70px; } .ctl .mpill { height: 44px; min-width: 64px; font-size: 15px; }
  .nrow { padding: 12px 14px; } #msum .mtitle b { font-size: 16px; }
  /* Analysis: the whole width, bigger tools, phases and play row */
  body.mplayer #manual > :not(.msheet):not(.mmenu) { max-width: 1240px; }
  body.mplayer #manual > .mstripwrap { max-width: 1224px !important; height: 54px; }
  .mtop { padding: 8px 16px; } .mib { width: 46px; height: 46px; }
  body.mplayer .mph { gap: 8px; padding: 0 16px; }
  body.mplayer .mph .phc { min-height: 58px; } .mph .phc b { font-size: 13.5px; } .mph .phc small { font-size: 12.5px; }
  .mline { padding: 2px 16px; } .mline .mhint { font-size: 13.5px; } .mline .mpill { height: 38px; font-size: 14px; }
  .mmid { gap: 8px; padding: 6px 12px 0; }
  .mtools { width: 66px; gap: 5px; }
  .mtool { font-size: 10.5px; border-radius: 12px; min-height: 44px; max-height: 64px; }
  .mtool svg { width: 22px; height: 22px; }
  .mdot { width: 26px; height: 26px; }
  body.mplayer .mtime { font-size: 13px; margin: 5px 18px 0; }
  .mtransport { max-width: 560px; gap: 10px; padding: 8px 16px 14px; }
  .mtb { font-size: 11.5px; } .mtb .mstep { width: 54px; height: 54px; } .mtb .mplay { width: 66px; height: 66px; } .mtb .mpill { height: 42px; min-width: 60px; font-size: 15px; }
  .mrec { width: 54px; height: 54px; } .mrec i { width: 24px; height: 24px; }
  .mcam { max-width: 220px; } .mcam.big { max-width: 320px; } .mcap { font-size: 15px; }
  .mmenu { width: 260px; }
  /* the sheets: a card in the middle of the bottom, not the whole width */
  .msheet, details.sheet[open] > .sheetbody { max-width: 620px; }
}
/* a tablet held sideways: the screen is low, so the rows above and below the picture stay slim */
@media (min-width: 700px) and (orientation: landscape) {
  body.mplayer .mph .phc { min-height: 50px; }
  .mtools { gap: 4px; } .mtool { min-height: 38px; }
  .mtransport { padding: 4px 16px 8px; }
  body.mplayer #manual > .mstripwrap { height: 46px; }
  #trim-vid { max-height: 40vh; }
}

.numside { display: none; }   /* the laptop's number panels beside the Review pictures (below) */
/* ==== laptops and big screens (his yes, 29 Oct 2026: docs/desktop-first-page-design-2026-10-29.png and
   docs/desktop-analysis-design-2026-10-29.png, Analysis pick B). Only a wide screen with a mouse: phones and tablets
   (an iPad Pro held sideways is 1366 wide, but a finger) keep the layouts above */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  /* the first page: the video big on the left, Stroke, Analyse and Start Analysis in a column on the right */
  #top.door { max-width: 1360px; padding: 0 40px; }
  body[data-page="start"] #top.door { padding-left: 40px; padding-right: 40px; }
  #door-scroll { margin: 0 -40px; padding: 0 40px 24px; }
  #door-form { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "s2 s1" "s2 s3"; column-gap: 28px; }
  #dstep-2 { background: #0f2a50; border: 1px solid #1f3d68; border-radius: 20px; padding: 2px 22px 18px; margin-top: 18px; }
  #dstep-3 { padding-bottom: 96px; }
  #top.door #start-go { position: absolute; left: auto; right: 40px; bottom: 22px; width: 400px; margin: 0; }
  #trim-vid { max-height: 46vh; }
  .cropmodes { width: 130px; }
  .drop { padding: 70px 10px; }
  /* Analysis: the notes open on the right of the picture, Share and Save to library under them */
  body.mplayer #manual > :not(.msheet):not(.mmenu) { max-width: 1400px; }
  body.mplayer #manual > .mstripwrap { max-width: 1384px !important; }
  #notes-sheet.dock { position: static; display: flex !important; flex-direction: column; flex: none; width: 330px; max-width: none; max-height: none;
    margin: 0; padding: 14px 16px; border-radius: 16px; background: #0f2a50; box-shadow: inset 0 0 0 1px #1f3d68; z-index: auto; overflow: hidden; }
  #notes-sheet.dock .grab, #notes-sheet.dock #notes-done { display: none; }
  #notes-sheet.dock textarea { flex: 1 1 auto; min-height: 64px; resize: none; }
  #notes-sheet.dock { overflow-y: auto; }                          /* a short window: Share and Save to library stay in reach */
  #notes-sheet.dock .nacts { display: flex; }
  /* Review: the racket numbers on the left of the pictures, the body numbers on the right, each row in its own colour */
  #view { position: relative; max-width: none; padding-left: 322px; padding-right: 322px; }
  #view > .dtop { margin-left: -298px; margin-right: -298px; }
  #metrics { display: none !important; }
  .numside { display: flex; flex-direction: column; position: absolute; top: 66px; width: 280px; max-height: calc(100vh - 90px); overflow-y: auto;
    background: #0f2a50; border: 1px solid #1f3d68; border-radius: 16px; padding: 10px 12px; scrollbar-width: thin; }
  #num-r { right: 24px; }
  #num-l:not(:has(.mgroup:not([hidden]))), #num-r:not(:has(.mgroup:not([hidden]))) { display: none; }
  /* the left column: the racket numbers, Skeleton under them (his picture, 30 Oct 2026) */
  .numcol { display: flex; flex-direction: column; gap: 12px; position: absolute; top: 66px; left: 24px; width: 280px; max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; }
  .numcol .numside { position: static; max-height: none; overflow: visible; flex: none; }
  body.fsmode .numcol { display: none !important; }
  #r-skel { visibility: hidden; }                                    /* the top-right button: Skeleton sits on the left */
  #own { display: none !important; }
  /* Analysis: the real video, the SAM body and the 3D player side by side (his yes, 30 Oct 2026) */
  .mstage.three .mzoom { right: 66.667%; }
  .mstage.three .mside { left: 33.333%; }
  .mstage.three #mbodywrap { right: 50%; left: 4px; }
  .mstage.three #mside #c3dwrap { left: 50%; margin-left: 4px; }
  #mcmp { display: none !important; }
  /* Analysis on a laptop (his words, 30 Oct 2026: "I do not see all the tools", "I have to change to 90%", "how should a
     proper desktop version behave" - "ok fix it"): the tools in one row along the top of the video, as drawing programs
     do on a computer; a row stays one button tall however many tools, so a short laptop screen at 100 % or 125 % shows
     them all. The notes stay on the right, the video takes the rest */
  body.mplayer #manual > .mmid { display: grid; grid-template-columns: auto minmax(0, 1fr) 330px; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tl tr tr" "stage stage notes"; gap: 8px; align-items: stretch; }
  #mtools-l { grid-area: tl; } #mtools-r { grid-area: tr; justify-content: flex-end; } #mstage { grid-area: stage; } #notes-sheet.dock { grid-area: notes; }
  .mmid .mtools { width: auto; flex-direction: row; align-items: stretch; gap: 5px; overflow: visible; }
  .mmid .mtool { flex: none; min-width: 52px; height: 48px; min-height: 0; max-height: none; padding: 0 6px; font-size: 10px; }
  .mmid .mdots { flex-direction: row; align-items: center; gap: 8px; padding: 0 10px; }
  .mmid .mdot { width: 24px; height: 24px; }
  /* the play row: the same buttons, slimmer, the names on the buttons themselves when the mouse rests on them */
  .mtransport { padding: 2px 16px 6px; }
  .mtb span { display: none; }
  .mtb .mstep { width: 46px; height: 46px; } .mtb .mplay { width: 56px; height: 56px; } .mtb .mpill { height: 38px; } .mrec { width: 46px; height: 46px; }
                                  /* no "+ SAM body / + 3D" row: both are there */
  #num-sk .panerow { margin-top: 0; flex-direction: column; align-items: stretch; gap: 8px; }
  #num-sk .panerow .toggle { color: #fff; }
  #num-sk details.inline[open] { width: 100%; }
  #num-sk .row.small { flex-direction: column; align-items: flex-start; gap: 8px; }
  #num-sk .legendrow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-top: 8px; }
  #num-sk .onbody { margin: 8px 0 2px; }
  body.fsmode .numside { display: none !important; }
  .numside .mgroup { background: transparent; padding: 0; margin-top: 4px; }
  .numside .mghead { margin: 2px 4px 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 1px; color: var(--hi); }
  .numside .unitsrow { justify-content: space-between; margin: 2px 4px 8px; }
  .numside .mgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .numside .mgrid label { background: var(--card); border: 0; border-left: 5px solid var(--c); border-radius: 12px; padding: 8px 10px 8px 8px; min-height: 52px; }
  .numside .mgrid label:has(input:checked) { background: var(--card2); box-shadow: inset 0 0 0 1px var(--c); }
  .numside .mgrid i { display: none; }
  .numside .mgrid span { font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow-wrap: normal; }
  .numside .mgrid b { color: var(--c); font-size: 15px; font-weight: 800; }
  .numside .mgrid input[type="checkbox"]:checked { background: var(--c); }
  .numside .rowinfo { margin: -2px 0 2px 8px; }
  .numside .mgrid label.long { flex-wrap: wrap; row-gap: 2px; }   /* a long number (Contact point) on its own line under the name */
  .numside .mgrid label.long b { order: 9; flex: 1 0 100%; max-width: none; text-align: left; padding-left: 50px; }
  .numclear { position: absolute; right: 14px; top: 10px; z-index: 1; font-size: 13px; }
}
/* a laptop window lower still (his 125 %): the page scrolls a little rather than hide anything */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (max-height: 600px) {
  body.mplayer #manual { overflow-y: auto; }
  body.mplayer #manual > .mmid { min-height: 220px; }
}
.nacts { display: none; flex-direction: column; gap: 10px; margin-top: 12px; }
.nacts button { height: 46px; border-radius: 12px; font: 800 15px -apple-system, Roboto, system-ui, sans-serif; cursor: pointer; }
.nacts .nshare { border: 1px solid var(--edge); background: transparent; color: #fff; }
.nacts .nsave { border: 0; background: #fff; color: var(--navy); }
.nacts .nsave.saved { background: transparent; color: #4cd47a; box-shadow: inset 0 0 0 1px #4cd47a; }
.nacts button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---- EagleCourt Motion (static/motion.js; motion.eaglecourt.ai only, never the test site) ---------------------------
   The welcome page is his picture (29 Oct 2026, docs/welcome-approved-2026-10-29.webp); the permission tick, what each
   analysis takes on its card and the line under a greyed Start are option B of docs/motion-coach-design-2026-10-30.png
   (his "B", 30 Oct 2026). */
html.mw-on, html.mw-on body { overflow: hidden; }
html.motion-wait body > :not(#motion-welcome):not(script) { visibility: hidden; }   /* until the sign-in is known */
.mw { position: fixed; inset: 0; z-index: 100; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg) radial-gradient(130% 640px at 50% -120px, var(--bg-top) 0%, var(--bg) 60%, var(--bg-low) 100%) no-repeat; }
.mw[hidden] { display: none; }
.mw-in { max-width: 480px; margin: 0 auto; padding: var(--sa-top, 0px) 0 calc(18px + var(--sa-bottom, 0px)); display: flex; flex-direction: column; align-items: stretch; }
.mw-hero { width: 100%; aspect-ratio: 688 / 374; object-fit: cover; display: block; }
.mw-title { margin: 14px 18px 0; text-align: center; font: 800 clamp(30px, 11vw, 44px)/1.05 Montserrat, -apple-system, "Segoe UI", sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.mw-title small { display: block; font-size: 26px; margin-bottom: 6px; }
.mw-title span { display: block; background: linear-gradient(90deg, #c8f04c, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mw-note { margin: 12px 18px 0; background: #fff6d6; color: #3d2e00; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.mw-create { display: flex; align-items: center; gap: 14px; margin: 26px 18px 0; padding: 12px 14px; border: 2px solid #c8f04c; border-radius: 22px; color: #fff; text-decoration: none; }
.mw-ic { flex: 0 0 58px; height: 58px; border-radius: 14px; background: #f2f5fa; display: grid; place-items: center; }
.mw-ct { flex: 1; } .mw-ct b { display: block; font-size: 19px; } .mw-ct small { display: block; font-size: 14px; color: var(--hi); margin-top: 2px; }
.mw-chev { font-size: 28px; color: var(--hi); }
.mw-signin { display: block; margin: 24px 18px 0; min-height: 56px; line-height: 56px; border-radius: 30px; background: #c8f04c; color: #0b2545; text-align: center; font-weight: 800; font-size: 19px; text-decoration: none; }
.mw-contact { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 18px 0; min-height: 50px; border: 1.5px solid var(--edge); border-radius: 30px; color: #fff; font-weight: 800; font-size: 17px; text-decoration: none; }
.mw-contact[hidden] { display: none; }
.mw-points { list-style: none; margin: 22px 18px 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.mw-points li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font: 800 12.5px/1.25 Montserrat, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; padding: 0 4px; }
.mw-points li + li { border-left: 1px solid var(--line); }
.mw-foot { display: flex; justify-content: space-between; margin: 26px 18px 0; font-size: 14px; color: var(--muted); }
.mw-foot a { color: var(--muted); text-decoration: none; } .mw-foot [hidden] { display: none; }
.mw-signin:focus-visible, .mw-create:focus-visible, .mw-contact:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* the permission tick, above Choose a video */
.mtick { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; background: var(--card); border: 2px solid var(--edge); border-radius: 14px; padding: 11px 12px; font-size: 14.5px; line-height: 1.35; cursor: pointer; }
.mtick[hidden] { display: none; }
.mtick.on { border-color: #c8f04c; }
.mtick.ask { border-color: #ffbe50; box-shadow: 0 0 0 3px rgba(255,190,80,.35); }
.mtick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mtick .mbox { flex: 0 0 26px; height: 26px; border-radius: 7px; border: 2px solid var(--muted); display: grid; place-items: center; }
.mtick.on .mbox { background: #c8f04c; border-color: #c8f04c; }
.mtick.on .mbox::after { content: "\2713"; color: #0b2545; font-weight: 900; font-size: 16px; }
.mtick input:focus-visible + .mbox { outline: 3px solid #fff; outline-offset: 2px; }
.mtick small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.drop.mw-wait { opacity: .45; cursor: not-allowed; }
/* what each analysis takes, on its card */
.mode .mcost { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 800; color: #0b2545; background: #c8f04c; border-radius: 8px; padding: 2px 7px; }
.mode .mcost:empty { display: none; }
.mode .mcost.none { background: #ffd88a; }
/* nothing left: one line under the 3D and 2D cards, Start greyed below; the website named in it is the link */
.mwhy { margin: 10px 0 0; background: var(--card2); border: 1px solid #ffbe50; border-radius: 12px; padding: 9px 12px;
  font-size: 14px; color: #ffd88a; text-align: center; }
.mwhy[hidden] { display: none; }
.mwhy a { color: #c8f04c; font-weight: 800; }

/* ---- EagleCourt Motion: the coach's menu and pages (static/motion-tools.js; his pick A and his yes, 31 Oct 2026,
   docs/motion-coach-tools-design-2026-10-31.png). Motion only: nothing here shows on the test site. */
#mt-menu { position: relative; }
.mt-dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); }
.mt-dot[hidden] { display: none; }
.mt-over { position: fixed; inset: 0; z-index: 90; }
.mt-sheet-over { background: rgba(5,15,30,.55); display: flex; align-items: flex-end; justify-content: center; }
.mt-sheet { width: min(520px, 100%); background: #0f2747; border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + var(--sa-bottom, 0px)); box-shadow: 0 -10px 30px rgba(0,0,0,.4); max-height: 92vh; overflow-y: auto; }
.mt-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--edge); margin: 0 auto 10px; }
.mt-who { padding: 2px 6px 10px; } .mt-who b { display: block; font-size: 17px; } .mt-who small { color: var(--muted); font-size: 13px; }
.mt-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 6px; background: none; border: 0; border-top: 1px solid var(--line); color: #fff; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.mt-row i { font-style: normal; font-size: 20px; width: 26px; text-align: center; }
.mt-rt { flex: 1; } .mt-rt small { display: block; font-size: 12.5px; color: var(--muted); }
.mt-chev { color: var(--muted); font-size: 20px; }
.mt-badge { background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; border-radius: 10px; padding: 1px 7px; margin-left: 6px; }
.mt-page { background: var(--bg) radial-gradient(130% 640px at 50% -120px, var(--bg-top) 0%, var(--bg) 60%, var(--bg-low) 100%) no-repeat; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mt-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--sa-top, 0px)) 14px 8px; background: var(--bg); }
.mt-ttl { flex: 1; text-align: center; } .mt-ttl b { display: block; font-size: 18px; } .mt-ttl small { color: var(--muted); font-size: 12.5px; }
.mt-pad { width: 44px; }
.mt-body { max-width: 560px; margin: 0 auto; padding: 6px 16px calc(28px + var(--sa-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.mt-card { background: var(--card); border-radius: 16px; padding: 12px; }
.mt-photo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mt-ph { flex: 0 0 72px; height: 72px; border-radius: 12px; background: #2a5a95 center / cover no-repeat; display: grid; place-items: center; font-size: 28px; }
.mt-pcol { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.mt-lbl { font-weight: 800; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.mt-gap { margin-top: 8px; }
.mt-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mt-in { width: 100%; background: #0f2747; border: 1.5px solid var(--edge); border-radius: 12px; padding: 11px 12px; color: #fff; font: inherit; font-size: 16px; min-height: 46px; }
.mt-in:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
textarea.mt-in.tall { min-height: 130px; resize: vertical; line-height: 1.45; }
.mt-two { display: flex; gap: 10px; } .mt-two > * { flex: 1; min-width: 0; }
.mt-btn { min-height: 48px; border-radius: 14px; border: 0; padding: 11px 14px; font: inherit; font-weight: 800; font-size: 15.5px; cursor: pointer; }
.mt-btn.small { min-height: 40px; font-size: 14px; padding: 8px 12px; flex: 0 0 auto; }
.mt-btn.lime { background: #c8f04c; color: #0b2545; } .mt-btn.white { background: #fff; color: #0b2545; }
.mt-btn.line { background: transparent; color: #fff; border: 1.5px solid var(--edge); }
.mt-btn:disabled { opacity: .55; cursor: default; }
.mt-btn:focus-visible, .mt-row:focus-visible, .mt-chip:focus-visible, .mt-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mt-link { background: none; border: 0; padding: 4px 0; color: var(--link); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.mt-link.mt-bad { color: #ff8a8a; }
.mt-hint { color: var(--muted); font-size: 12.5px; display: block; } .mt-center { text-align: center; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chip { min-height: 40px; border: 1.5px solid var(--edge); border-radius: 20px; background: transparent; color: #fff; padding: 6px 13px; font: inherit; font-size: 14px; cursor: pointer; }
.mt-chip.on { background: #fff; color: #0b2545; border-color: #fff; } .mt-chip.on::after { content: " \2713"; }
.mt-pill { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 10px; padding: 3px 9px; }
.mt-pill.mt-ok { background: #1f8a5b; } .mt-pill.mt-warn { background: #f2a03d; color: #2a1700; } .mt-pill.mt-grey { background: #4a5d7a; }
.mt-msg { margin: 0; font-size: 14px; font-weight: 700; } .mt-msg.mt-ok { color: #8fe3b0; } .mt-msg.mt-bad { color: #ff8a8a; } .mt-msg[hidden] { display: none; }
.mt-wait, .mt-empty { color: var(--muted); font-size: 14.5px; margin: 8px 0; }
.mt-note { background: #13305a; border: 1px solid var(--edge); border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--hi); margin: 0; }
.mt-cardbox { display: flex; flex-direction: column; gap: 8px; }
.mt-ccard { display: flex; gap: 12px; background: #fff; color: #0b2545; border-radius: 14px; padding: 12px; }
.mt-cph { flex: 0 0 84px; height: 96px; border-radius: 10px; background: linear-gradient(135deg, #9db7d8, #5d7fa8) center / cover no-repeat; }
.mt-ctext { min-width: 0; font-size: 13px; } .mt-ctext > b { font-size: 16px; display: block; }
.mt-cmeta { display: block; color: #41537a; margin-top: 2px; }
.mt-ctags span { display: inline-block; background: #e7eef9; border-radius: 6px; padding: 1px 6px; margin: 4px 4px 0 0; font-size: 12px; }
.mt-cshort { margin: 6px 0 0; font-weight: 700; } .mt-cprice { display: block; margin-top: 6px; }
.mt-log { min-height: 300px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.mt-bub { border-radius: 14px; padding: 9px 12px; font-size: 15px; line-height: 1.4; max-width: 88%; }
.mt-bub.eg { background: #2a5a95; } .mt-bub.me { background: #f5b729; color: #2a1700; margin-left: auto; }
.mt-bub.thinking { opacity: .7; }
.mt-mic { width: 84px; height: 84px; border-radius: 50%; border: 0; background: #c8f04c; color: #0b2545; font-size: 32px; margin: 6px auto 0; display: grid; place-items: center; box-shadow: 0 0 0 9px rgba(200,240,76,.18); cursor: pointer; }
.mt-mic.rec { background: #ff6b6b; color: #fff; box-shadow: 0 0 0 9px rgba(255,107,107,.25); }
.mt-tools { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.mt-rq { background: var(--card); border-radius: 16px; padding: 13px; font-size: 14px; line-height: 1.45; color: var(--hi); display: flex; flex-direction: column; gap: 4px; }
.mt-rq p { margin: 0; } .mt-rq b { color: #fff; } .mt-rq .mt-two { margin-top: 8px; }
.mt-rq.done { border: 1.5px solid #1f8a5b; } .mt-rq.gone { opacity: .7; }
.mt-quote { font-style: italic; }
.mt-form { display: flex; flex-direction: column; gap: 10px; }
.mt-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #0f2747; border-radius: 12px; padding: 3px; }
.mt-seg button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--hi); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.mt-seg button.on { background: #fff; color: #0b2545; }
.mt-tickrow { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.mt-tickrow input { width: 22px; height: 22px; accent-color: #c8f04c; flex: 0 0 22px; margin: 0; }
.mt-list { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.mt-rrow { display: flex; justify-content: space-between; gap: 10px; } .mt-rrow > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.mt-rright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.mt-rq .mt-pill { align-self: flex-start; }

/* the phase the video is in, lit in its own colour as it plays (his words, 30 Oct 2026: "flash light"); every screen */
#mphaserow .phc.lit { background: var(--k); color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 22px 6px var(--k); transform: scale(1.06); z-index: 2;
  transition: background .15s, box-shadow .15s, transform .15s; }
#mphaserow .phc.lit small, #mphaserow .phc.lit b { color: #fff; }
@media (prefers-reduced-motion: reduce) { #mphaserow .phc.lit { transform: none; transition: none; } }