/* Form video (29 Sep 2026, SPEC-FORM-VIDEO.md).
   The trim sheet, the playback sheet and the clip chips that sit on a set row.
   Every colour resolves through the --atl-* tokens, so light mode needs no
   extra rules, except the solid sheet ground, which the tokens only offer as a
   translucency (the same exception session-player.css carries). */

.fv {
  --fv-ink: var(--atl-text-hi, #EEF3F1);
  --fv-body: var(--atl-text-body, #BCC6C4);
  --fv-mut: var(--atl-text-mut, #8F9A98);
  --fv-line: var(--atl-border, rgba(255,255,255,0.085));
  --fv-line-strong: var(--atl-border-strong, rgba(255,255,255,0.15));
  --fv-fill: var(--atl-fill, rgba(255,255,255,0.08));
  --fv-fill-strong: var(--atl-fill-strong, rgba(255,255,255,0.14));
  --fv-gold: var(--atl-gold, #D4B26A);
  --fv-gold-grad: var(--atl-gold-grad, linear-gradient(135deg, #E9CB84, #C9A557));
  --fv-on-gold: var(--atl-on-gold, #171207);
  --fv-gold-tint: var(--atl-gold-tint, rgba(212,178,106,0.15));
  --fv-up: var(--atl-up, #6CD693);
  --fv-up-tint: var(--atl-up-tint, rgba(108,214,147,0.14));
  --fv-watch: var(--atl-watch, #E8A857);
  --fv-watch-tint: var(--atl-watch-tint, rgba(232,168,87,0.14));
  --fv-sheet: #182120;
  --fv-scrim: rgba(6,10,10,0.72);
  /* Above both messengers (client #msgr-panel 9998, coach thread 100060):
     "Form check" is opened FROM the messenger, and at 3000 the camera and the
     trim sheet came up behind it (Harry, 30 Sep 2026). Same layer as the
     review player, still under the media lightbox (2147483590). */
  position: fixed; inset: 0; z-index: 2147483100;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--atl-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif);
  color: var(--fv-body);
  opacity: 0;
  transition: opacity .18s ease-out;
}
html[data-theme="light"] .fv { --fv-sheet: #FFFFFF; --fv-scrim: rgba(20,32,30,0.45); }
.fv.fv-open { opacity: 1; }
.fv *, .fv *::before, .fv *::after { box-sizing: border-box; }
.fv button { cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fv button:focus-visible, .fv [tabindex]:focus-visible { outline: 2px solid var(--fv-gold); outline-offset: 2px; }
.fv [hidden] { display: none !important; }
.fv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.fv-lock { overflow: hidden; }

/* Blur marks the background as dismissable rather than decorating it. */
.fv-scrim {
  position: absolute; inset: 0; background: var(--fv-scrim);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.fv-sheet {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px;
  max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fv-sheet);
  border: 1px solid var(--fv-line-strong);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0,0,0,.4);
  transform: translateY(14px);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.fv.fv-open .fv-sheet { transform: translateY(0); }
@media (min-width: 720px) {
  .fv { align-items: center; }
  .fv-sheet { border-radius: 20px; border-bottom: 1px solid var(--fv-line-strong); max-height: 90dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .fv, .fv-sheet { transition: none; }
  .fv-sheet { transform: none; }
}

/* ── header ──────────────────────────────────────────────────────────────── */
.fv-head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.fv-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: center; }
.fv-head-t b { font-size: 15px; font-weight: 700; color: var(--fv-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-head-t span { font-size: 12px; color: var(--fv-mut); }
.fv-icon {
  flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: var(--fv-mut); padding: 0;
}
.fv-icon svg { width: 20px; height: 20px; }
.fv-icon:active { background: var(--fv-fill); }
.fv-link { flex: 0 0 auto; min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--fv-mut); font-size: 13.5px; font-weight: 600; }
.fv-pill { flex: 0 0 auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.fv-pill--wait { background: var(--fv-watch-tint); color: var(--fv-watch); }
.fv-pill--on { background: var(--fv-up-tint); color: var(--fv-up); }

/* ── stage ───────────────────────────────────────────────────────────────── */
.fv-stage {
  position: relative; margin: 8px 0 14px;
  background: #000; border-radius: 14px; overflow: hidden;
  /* Reserved before the clip loads, so the sheet never jumps (CLS). */
  aspect-ratio: 3 / 4; max-height: 52dvh;
  display: flex; align-items: center; justify-content: center;
}
.fv-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.fv-stage img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; -webkit-user-drag: none; }
.fv-play .fv-stage { aspect-ratio: auto; height: 62dvh; }

/* ── labels ──────────────────────────────────────────────────────────────── */
.fv-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fv-mut); margin: 0 0 8px;
}

/* ── trim rail ───────────────────────────────────────────────────────────── */
.fv-trim {
  position: relative; height: 64px; margin-bottom: 8px;
  border-radius: 10px; overflow: visible;
  touch-action: none;
}
.fv-strip {
  position: absolute; inset: 0; display: flex; border-radius: 10px; overflow: hidden;
  background: var(--fv-fill);
}
.fv-strip img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.fv-dim { position: absolute; top: 0; bottom: 0; background: rgba(8,12,12,.66); border-radius: 10px; pointer-events: none; }
.fv-sel {
  position: absolute; top: -2px; bottom: -2px; pointer-events: none;
  border: 2px solid var(--fv-gold); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
/* 44px of hit area, a 12px bar of ink: a handle you can grab without aiming. */
.fv-h {
  position: absolute; top: -8px; bottom: -8px; width: 44px; margin-left: -22px;
  background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center;
}
.fv-h i {
  display: block; width: 12px; height: 100%; border-radius: 7px;
  background: var(--fv-gold-grad); box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.fv-h::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 2px; background: var(--fv-on-gold); opacity: .55;
}
.fv-h:active i { transform: scaleX(1.25); }

.fv-read { margin: 0 0 18px; font-size: 13px; color: var(--fv-mut); font-variant-numeric: tabular-nums; }
.fv-read b { color: var(--fv-ink); font-weight: 700; }

/* ── angle chips ─────────────────────────────────────────────────────────── */
.fv-angles { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.fv-angles button {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--fv-fill); border: 1px solid transparent; color: var(--fv-body);
  font-size: 13.5px; font-weight: 600;
  transition: background .15s ease-out, color .15s ease-out;
}
.fv-angles button.is-on { background: var(--fv-gold-tint); border-color: var(--fv-gold); color: var(--fv-gold); }

/* ── note ────────────────────────────────────────────────────────────────── */
.fv-note { display: block; margin-bottom: 18px; }
.fv-note input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--fv-fill); border: 1px solid var(--fv-line); border-radius: 12px;
  color: var(--fv-ink); font-size: 16px; /* 16px: anything smaller auto-zooms on iOS */
}
.fv-note input::placeholder { color: var(--fv-mut); }
.fv-note input:focus { outline: none; border-color: var(--fv-gold); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.fv-foot { display: flex; flex-direction: column; gap: 10px; }
.fv-prog { margin: 0; font-size: 12.5px; color: var(--fv-mut); font-variant-numeric: tabular-nums; text-align: center; }
.fv-cta {
  width: 100%; min-height: 52px; border: 0; border-radius: 14px;
  background: var(--fv-gold-grad); color: var(--fv-on-gold);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  transition: opacity .15s ease-out, transform .1s ease-out;
}
.fv-cta:active { transform: scale(.98); }
.fv-cta:disabled { opacity: .6; cursor: default; }

.fv-coach, .fv-yours { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--fv-body); }
.fv-coach b, .fv-yours b { color: var(--fv-ink); font-weight: 700; }
.fv-coach { padding: 12px 14px; border-radius: 12px; background: var(--fv-gold-tint); }

/* ── in-session affordances ──────────────────────────────────────────────── */
/* Secondary by design: the set logger is the one primary action on that page,
   so Film is an icon chip beside the demo, never a button that competes. */
.sp-film {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--sp-nested, rgba(255,255,255,0.045));
  border: 1px solid var(--sp-line, rgba(255,255,255,0.085));
  color: var(--sp-body, #BCC6C4); font-size: 13px; font-weight: 600;
}
.sp-film svg { width: 17px; height: 17px; }
.sp-film:active { background: var(--sp-fill, rgba(255,255,255,0.08)); }
.sp-film.is-sending { color: var(--sp-mut, #8F9A98); }

/* Clip thumbnails under the set list. Horizontal, but a strip of cards is not
   main content, so it never fights the page's vertical scroll. */
.sp-clips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.sp-clips::-webkit-scrollbar { display: none; }
.sp-clip {
  position: relative; flex: 0 0 auto; width: 72px; height: 96px; padding: 0;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--sp-line, rgba(255,255,255,0.085));
  background: var(--sp-fill, rgba(255,255,255,0.08));
}
.sp-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-clip b {
  position: absolute; left: 4px; right: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: left;
}
.sp-clip i {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sp-watch, #E8A857); box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
.sp-clip.is-reviewed i { background: var(--sp-up, #6CD693); }

/* The film row: the chip on the left, the client's own clips scrolling beside
   it. Wraps rather than truncating on a narrow phone. */
.sp-filmrow { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; min-width: 0; }
.sp-filmrow .sp-clips { flex: 1 1 auto; min-width: 0; }
.sp-filmrow .sp-clips:empty { display: none; }

/* ═══ Review player (SPEC-FORM-VIDEO.md §5; layout v2, 30 Sep 2026) ═══════
   One DOM, two placements. Phone: a single column in working order - stage,
   transport, tools, the coach's controls, history. Wide: a grid with the
   tools as a vertical strip against the stage (where annotation tools live
   in every editor), the controls as a right rail and history under the
   transport. Harry, 30 Sep: "layout on the video analysis isn't great". */

.fr {
  --fr-ink: var(--atl-text-hi, #EEF3F1);
  --fr-body: var(--atl-text-body, #BCC6C4);
  --fr-mut: var(--atl-text-mut, #8F9A98);
  --fr-line: var(--atl-border, rgba(255,255,255,0.09));
  --fr-fill: rgba(255,255,255,0.07);
  --fr-fill-strong: rgba(255,255,255,0.14);
  --fr-panel: #121918;
  --fr-gold: var(--atl-gold, #D4B26A);
  --fr-gold-grad: var(--atl-gold-grad, linear-gradient(135deg, #E9CB84, #C9A557));
  --fr-on-gold: var(--atl-on-gold, #171207);
  --fr-gold-tint: rgba(212,178,106,0.16);
  --fr-up: var(--atl-up, #6CD693);
  --fr-watch: var(--atl-watch, #E8A857);
  --fr-concern: var(--atl-concern, #E88A8A);
  /* Above both messengers (client #msgr-panel 9998, coach thread 100060):
     the Form review card opens this from inside a thread, and at 9500 it
     painted behind the chat, so "Watch the review" looked dead (Harry,
     30 Sep 2026). Stays under the media lightbox (2147483590). */
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; flex-direction: column;
  /* Video on black in both themes: a form review is watched, not read. */
  background: #0B0F0F;
  color: var(--fr-body);
  font-family: var(--atl-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif);
  font-size: 14px; line-height: 1.45;
  opacity: 0; transition: opacity .18s ease-out;
}
.fr.is-open { opacity: 1; }
.fr *, .fr *::before, .fr *::after { box-sizing: border-box; }
.fr button, .fr textarea, .fr input { font-family: inherit; }
.fr button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fr button:focus-visible, .fr [tabindex]:focus-visible { outline: 2px solid var(--fr-gold); outline-offset: 2px; }
.fr [hidden] { display: none !important; }
.fr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.fr-lock { overflow: hidden; }
/* The queue pill sits under the player, never on top of Send review. */
body.fr-lock #cfq-pill { display: none !important; }
@media (prefers-reduced-motion: reduce) { .fr { transition: none; } }

/* ── header ──────────────────────────────────────────────────────────────── */
.fr-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px 6px;
  border-bottom: 1px solid var(--fr-line);
}
.fr-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-head-t b { font-size: 15px; font-weight: 700; color: var(--fr-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-head-t span { font-size: 12px; color: var(--fr-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-status { flex: 0 0 auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.fr-status.is-wait { background: rgba(232,168,87,.16); color: var(--fr-watch); }
.fr-status.is-done { background: rgba(108,214,147,.16); color: var(--fr-up); }

/* ── body: phone column ──────────────────────────────────────────────────── */
.fr-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px;
  padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
}
.fr-empty { margin: 40px auto; max-width: 32ch; text-align: center; color: var(--fr-mut); font-size: 14px; line-height: 1.5; }
.fr-ask { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fr-body); }
.fr-ask b { color: var(--fr-ink); font-weight: 700; margin-right: 4px; }
.fr-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-mut); margin: 0 0 8px; }

/* ── stage ───────────────────────────────────────────────────────────────── */
.fr-stage {
  position: relative; flex: 0 0 auto;
  height: 48dvh; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  background: #000; border-radius: 14px; overflow: hidden;
  touch-action: none;
}
.fr-frame { position: relative; flex: 0 0 auto; transform-origin: center center; will-change: transform; }
.fr-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.fr-ink { position: absolute; inset: 0; display: block; cursor: crosshair; }
.fr-ro .fr-ink { pointer-events: none; cursor: default; }
.fr-zoom {
  position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8,12,12,.66); border: 0; border-radius: 12px; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fr-zoom svg { width: 19px; height: 19px; }
.fr-textpop {
  position: absolute; z-index: 5; display: flex; gap: 6px; padding: 6px;
  background: rgba(10,15,15,.94); border: 1px solid var(--fr-fill-strong); border-radius: 12px;
}
.fr-textpop input { width: 150px; min-height: 36px; padding: 0 10px; background: var(--fr-fill); border: 0; border-radius: 8px; color: var(--fr-ink); font-size: 16px; }
.fr-textpop input:focus { outline: none; }
.fr-textpop button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--fr-gold-grad); color: var(--fr-on-gold); font-size: 13px; font-weight: 700; }

/* compare: one stage, two frames; the split follows the shape of the space */
.fr-stage.is-compare { flex-direction: column; gap: 4px; }
.fr-stage.is-compare.is-side { flex-direction: row; }
.fr-frame--b .fr-video { position: absolute; inset: 0; }
/* A photo under review (1 Oct 2026): one frame, held where the tape would be.
   The ink canvas sits over it exactly as it does over the video. */
.fr-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000;
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; }
.fr-photo-mode .fr-transport > .fr-rail,
.fr-photo-mode [data-fr="now"], .fr-photo-mode [data-fr="dur"], .fr-photo-mode [data-fr="count"],
.fr-photo-mode .fr-step, .fr-photo-mode .fr-rates,
.fr-photo-mode [data-fr="filmlbl"], .fr-photo-mode .fr-voice { display: none; }
.fr-photo-mode .fr-tline:not(.fr-tline--b) { justify-content: flex-end; }
/* Beside a moving reference the step, play and speed controls come back and
   drive the reference. */
.fr-photo-mode.is-cmp-motion .fr-step, .fr-photo-mode.is-cmp-motion .fr-rates { display: flex; }
.fr-photo-mode .fr-cmp { margin-left: 0; }
.fr-photo-mode.is-cmp-motion .fr-cmp { margin-left: auto; }
/* Nothing to align when either side is a still: Change and Close remain. */
.fr-offset.is-still > span, .fr-offset.is-still > b,
.fr-offset.is-still [data-fr="offminus"], .fr-offset.is-still [data-fr="offplus"],
.fr-offset.is-still [data-fr="cmplink"] { display: none; }
.fr-offset.is-still [data-fr="cmpswap"] { margin-left: auto; }
.fr-btag {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(8,12,12,.72); color: #fff; font-size: 10.5px; font-weight: 700;
}

/* ── transport ───────────────────────────────────────────────────────────── */
.fr-transport { flex: 0 0 auto; order: 2; }
.fr-rail {
  position: relative; height: 52px; border-radius: 10px; overflow: hidden;
  background: var(--fr-fill); touch-action: none; cursor: ew-resize;
}
/* pointer-events none: the filmstrip is decoration, and an <img> under the
   pointer starts a NATIVE image drag that cancels the scrub a few pixels in
   (caught by the harness, 30 Sep: a 20%-to-80% drag stopped at 27%). */
.fr-rail-strip { position: absolute; inset: 0; display: flex; opacity: .55; pointer-events: none; user-select: none; -webkit-user-select: none; }
.fr-rail-strip img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; }
.fr-rail-pips { position: absolute; inset: 0; pointer-events: none; }
.fr-rail-pips i { position: absolute; top: 0; width: 3px; height: 12px; border-radius: 0 0 2px 2px; margin-left: -1.5px; }
.fr-rail-now {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: var(--fr-gold); border-radius: 2px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.fr-tline { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px 4px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fr-mut); }
.fr-tline b { color: var(--fr-ink); font-weight: 700; }
.fr-tline i { font-style: normal; color: var(--fr-gold); font-weight: 600; }

.fr-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fr-step { display: flex; align-items: center; gap: 4px; }
.fr-icon {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 12px; color: var(--fr-body); padding: 0;
}
.fr-icon svg { width: 20px; height: 20px; }
.fr-icon--lg { width: 52px; height: 52px; background: var(--fr-fill); color: var(--fr-ink); }
.fr-icon--lg svg { width: 22px; height: 22px; }
.fr-icon:hover { background: var(--fr-fill); }
.fr-icon:disabled { opacity: .3; cursor: default; background: none; }
.fr-link { min-height: 44px; padding: 0 12px; background: none; border: 0; border-radius: 10px; color: var(--fr-body); font-size: 13px; font-weight: 600; }
.fr-link:hover { background: var(--fr-fill); }
.fr-cmp { margin-left: auto; }
.fr-cmp.is-on { color: var(--fr-gold); background: var(--fr-gold-tint); }

.fr-rates { display: flex; gap: 2px; background: var(--fr-fill); border-radius: 999px; padding: 3px; }
.fr-rates button {
  min-height: 38px; min-width: 52px; padding: 0 10px; border: 0; border-radius: 999px;
  background: none; color: var(--fr-mut); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; transition: background .15s ease-out, color .15s ease-out;
}
.fr-rates button.is-on { background: var(--fr-gold-tint); color: var(--fr-gold); }
/* Narrow: the speed chips take their own full-width row instead of running
   off the right edge (they did, at 430px). */
@media (max-width: 560px) {
  .fr-rates { flex-basis: 100%; }
  .fr-rates button { flex: 1; min-width: 0; }
}

.fr-offset { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; color: var(--fr-mut); }
.fr-offset span { font-weight: 600; }
.fr-offset b { min-width: 60px; text-align: center; color: var(--fr-ink); font-variant-numeric: tabular-nums; }
.fr-offset .fr-icon { width: 40px; height: 40px; background: var(--fr-fill); font-size: 19px; font-weight: 700; color: var(--fr-ink); }
.fr-offset .fr-offset-r { margin-left: auto; }

/* ── toolbar ─────────────────────────────────────────────────────────────── */
.fr-toolbar { flex: 0 0 auto; order: 3; display: flex; flex-direction: column; gap: 8px; }
.fr-tools { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fr-tools button {
  min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--fr-fill); border: 1px solid transparent; border-radius: 12px; color: var(--fr-mut);
  padding: 0 2px; transition: background .15s ease-out, color .15s ease-out;
}
.fr-tools button svg { width: 19px; height: 19px; }
.fr-tools button span { font-size: 9.5px; font-weight: 600; }
.fr-tools button:hover { color: var(--fr-ink); }
.fr-tools button.is-on { background: var(--fr-gold-tint); border-color: var(--fr-gold); color: var(--fr-gold); }
@media (max-width: 380px) { .fr-tools button span { display: none; } .fr-tools button { min-height: 46px; } }

.fr-inkbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fr-colours { display: flex; gap: 2px; }
.fr-colours button {
  width: 40px; height: 40px; border: 0; background: none; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.fr-colours button::after {
  content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px rgba(0,0,0,.45); transition: transform .15s ease-out;
}
.fr-colours button.is-on::after { transform: scale(1.2); box-shadow: 0 0 0 2px #0B0F0F, 0 0 0 4px var(--fr-ink); }
.fr-inkacts { display: flex; align-items: center; gap: 2px; }

/* ── the coach's controls ────────────────────────────────────────────────── */
.fr-side { flex: 0 0 auto; order: 4; }
.fr-voice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fr-voice--ro { margin-top: 12px; }
.fr-rec, .fr-vplay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--fr-line); background: var(--fr-fill);
  color: var(--fr-ink); font-size: 13px; font-weight: 700;
}
.fr-rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--fr-concern); }
.fr-rec.is-rec { border-color: var(--fr-concern); color: var(--fr-concern); }
.fr-rec.is-rec i { border-radius: 2px; animation: fr-blink 1s steps(2, start) infinite; }
@keyframes fr-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .fr-rec.is-rec i { animation: none; } }
.fr-vplay svg { width: 16px; height: 16px; }
.fr-vplay:disabled, .fr-rec:disabled { opacity: .45; }
.fr-voiceline { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--fr-mut); }

.fr-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fr-labels button {
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--fr-fill); border: 1px solid transparent; color: var(--fr-body);
  font-size: 12.5px; font-weight: 600; transition: background .15s ease-out, color .15s ease-out;
}
.fr-labels button:hover { color: var(--fr-ink); }
.fr-labels button.is-on { background: var(--fr-gold-tint); border-color: var(--fr-gold); color: var(--fr-gold); }
.fr-rolabels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fr-rolabels span { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--fr-fill); color: var(--fr-mut); }

.fr-verdicts { display: flex; gap: 6px; margin-bottom: 10px; }
.fr-verdicts button {
  flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--fr-line);
  background: var(--fr-fill); color: var(--fr-body); font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.fr-verdicts button:nth-child(1).is-on { background: rgba(108,214,147,.16); border-color: var(--fr-up); color: var(--fr-up); }
.fr-verdicts button:nth-child(2).is-on { background: rgba(232,168,87,.16); border-color: var(--fr-watch); color: var(--fr-watch); }
.fr-verdicts button:nth-child(3).is-on { background: rgba(232,138,138,.16); border-color: var(--fr-concern); color: var(--fr-concern); }

.fr-note { display: block; margin-bottom: 12px; }
.fr-note textarea {
  width: 100%; padding: 12px 14px; resize: vertical; display: block;
  background: var(--fr-fill); border: 1px solid var(--fr-line); border-radius: 12px;
  color: var(--fr-ink); font-size: 16px; line-height: 1.45;
}
.fr-note textarea::placeholder { color: var(--fr-mut); }
.fr-note textarea:focus { outline: none; border-color: var(--fr-gold); }

.fr-foot { display: flex; flex-direction: column; gap: 8px; }
.fr-hint { margin: 0; font-size: 12px; color: var(--fr-mut); text-align: center; }
.fr-hint:empty { display: none; }
.fr-cta {
  width: 100%; min-height: 52px; border: 0; border-radius: 14px;
  background: var(--fr-gold-grad); color: var(--fr-on-gold);
  font-size: 16px; font-weight: 700;
  transition: opacity .15s ease-out, transform .1s ease-out;
}
.fr-cta:active { transform: scale(.98); }
.fr-cta:disabled { opacity: .4; cursor: default; }

/* read-only (the client's copy) */
.fr-ro-read p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--fr-ink); }
.fr-vpill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fr-vpill--good { background: rgba(108,214,147,.16); color: var(--fr-up); }
.fr-vpill--minorfix { background: rgba(232,168,87,.16); color: var(--fr-watch); }
.fr-vpill--changeit { background: rgba(232,138,138,.16); color: var(--fr-concern); }

/* ── history: earlier clips of this exercise ─────────────────────────────── */
.fr-history { flex: 0 0 auto; order: 5; min-width: 0; }
.fr-hist { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.fr-hist-c {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 6px 12px 6px 6px;
  background: var(--fr-fill); border: 1px solid transparent; border-radius: 12px; color: inherit; text-align: left;
}
.fr-hist-c:hover { border-color: var(--fr-fill-strong); }
.fr-hist-th { flex: 0 0 auto; width: 42px; height: 56px; border-radius: 8px; overflow: hidden; background: #000; }
.fr-hist-th img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fr-hist-b { display: flex; flex-direction: column; min-width: 0; }
.fr-hist-b b { font-size: 12.5px; font-weight: 700; color: var(--fr-ink); white-space: nowrap; }
.fr-hist-b span { font-size: 11.5px; color: var(--fr-mut); white-space: nowrap; }
.fr-hist-b em { font-style: normal; font-size: 11px; font-weight: 700; margin-top: 2px; }
.fr-hist-b em.is-done { color: var(--fr-up); }
.fr-hist-b em.is-wait { color: var(--fr-watch); }

/* compare source picker: client clips | exercise library (searchable) */
.fr-picker { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(6,10,10,.72); }
.fr-picker-in {
  width: min(460px, calc(100% - 24px)); height: min(620px, calc(100% - 48px));
  display: flex; flex-direction: column;
  background: #141A19; border: 1px solid var(--fr-fill-strong); border-radius: 16px; padding: 12px 14px 14px;
}
.fr-picker-h { display: flex; align-items: center; justify-content: space-between; }
.fr-picker-h h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--fr-ink); }
.fr-picker-tabs { display: flex; gap: 4px; background: var(--fr-fill); border-radius: 999px; padding: 3px; margin: 6px 0 10px; }
.fr-picker-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--fr-mut); font-size: 13px; font-weight: 700; }
.fr-picker-tabs button.is-on { background: var(--fr-gold-tint); color: var(--fr-gold); }
.fr-picker-q {
  width: 100%; min-height: 44px; padding: 0 14px; margin-bottom: 8px;
  background: var(--fr-fill); border: 1px solid var(--fr-line); border-radius: 12px; color: var(--fr-ink); font-size: 16px;
}
.fr-picker-q:focus { outline: none; border-color: var(--fr-gold); }
.fr-picker-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fr-picker-none { margin: 28px 0; text-align: center; font-size: 13px; color: var(--fr-mut); }
.fr-picker-row {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 6px 8px; text-align: left;
  background: none; border: 0; border-radius: 10px; color: var(--fr-body);
}
.fr-picker-row:hover { background: var(--fr-fill); }
.fr-picker-th { flex: 0 0 auto; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: #000; }
.fr-picker-th img, .fr-picker-th video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fr-picker-b { display: flex; flex-direction: column; min-width: 0; }
.fr-picker-b b { font-size: 13.5px; font-weight: 700; color: var(--fr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-picker-b span { font-size: 11.5px; color: var(--fr-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a library demo is a YouTube player in stage B */
.fr-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.fr-frame--b .fr-btag { pointer-events: none; }

/* the clip's own resolution, beside its length: a 360x480 clip says so */
.fr-tline em { font-style: normal; margin-right: 10px; opacity: .8; }

/* ═══ wide: the grid ═══════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .fr-head { padding: 8px 20px 8px 12px; }
  .fr-body {
    display: grid; align-content: start;
    grid-template-columns: 56px minmax(0, 1fr) 340px;
    /* The last row takes any slack. The right rail spans every row, and with
       all four on `auto` its growth (a longer Marks list) was shared out among
       them, nudging the video down a few pixels every time a mark was added. */
    grid-template-rows: auto auto auto 1fr;
    /* The tool strip spans the stage, transport and history rows, so its
       height never stretches the stage's row and opens a gap under the video. */
    grid-template-areas:
      "ask    ask       side"
      "tools  stage     side"
      "tools  transport side"
      "tools  history   side";
    column-gap: 14px; row-gap: 12px;
    padding: 16px 20px 20px;
    width: 100%; max-width: 1560px; margin: 0 auto;
  }
  .fr-ro .fr-body {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "ask side" "stage side" "transport side" "history side";
  }
  .fr-ask { grid-area: ask; }
  .fr-stage { grid-area: stage; height: calc(100dvh - 330px); min-height: 360px; }
  .fr-transport { grid-area: transport; }
  .fr-history { grid-area: history; }

  /* The tool strip: icons only (the label is the tooltip and the aria-label),
     hugging the left edge of the stage. */
  .fr-toolbar { grid-area: tools; align-self: start; gap: 10px; }
  .fr-tools { grid-template-columns: 1fr; gap: 4px; }
  .fr-tools button { min-height: 46px; border-radius: 10px; }
  .fr-tools button span { display: none; }
  .fr-inkbar { flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--fr-line); }
  .fr-colours { flex-direction: column; gap: 0; }
  .fr-colours button { width: 36px; height: 32px; }
  .fr-inkacts { flex-direction: column; padding-top: 8px; border-top: 1px solid var(--fr-line); }
  .fr-inkacts .fr-icon { width: 40px; height: 40px; }

  /* The right rail is a panel, so the controls read as one group. */
  .fr-side {
    grid-area: side; align-self: start;
    background: var(--fr-panel); border: 1px solid var(--fr-line); border-radius: 16px; padding: 16px;
    position: sticky; top: 0;
  }
  .fr-ro .fr-side:empty { display: none; }
}

/* A clip with no stored poster shows its own first frame in every list. */
.sp-clip video, .fr-hist-th video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* "From library": the sharper way in (a clip shot in the phone's Camera app). */
.sp-film-lib { min-height: 44px; padding: 0 4px; white-space: nowrap; }

/* ═══ In-page recorder (30 Sep 2026): full-bleed camera, three controls ═══ */
.fv.fv-rec { align-items: stretch; background: #000; }
.fv-rec-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.fv-rec-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 22px;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.fv-rec-t { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; }
.fv-rec-t b { color: #fff; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-rec-t span { color: rgba(255,255,255,.78); font-size: 12px; font-variant-numeric: tabular-nums; min-height: 16px; }
.fv-rec-btn {
  width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4); border: 0; border-radius: 50%; color: #fff; padding: 0;
}
.fv-rec-btn svg { width: 20px; height: 20px; }
.fv-rec-bot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 26px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0));
}
.fv-rec-lib { justify-self: start; min-height: 44px; padding: 0 12px; background: rgba(0,0,0,.4); border: 0; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; }
.fv-rec-time { justify-self: end; color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.fv-rec-go {
  width: 76px; height: 76px; border-radius: 50%; padding: 0;
  background: none; border: 4px solid #fff; display: inline-flex; align-items: center; justify-content: center;
}
.fv-rec-go i { width: 58px; height: 58px; border-radius: 50%; background: #E5484D; transition: width .18s ease-out, height .18s ease-out, border-radius .18s ease-out; }
.fv-rec.is-recording .fv-rec-go i { width: 28px; height: 28px; border-radius: 7px; }
.fv-rec.is-recording .fv-rec-lib, .fv-rec.is-recording [data-rec="flip"] { visibility: hidden; }
.fv-rec .fv-rec-go:focus-visible, .fv-rec .fv-rec-btn:focus-visible, .fv-rec .fv-rec-lib:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fv-rec-go i { transition: none; } }

/* ═══ The review film (30 Sep 2026): takes, a clock, and one way in ═══════ */
.fr-rectime { font-size: 13px; font-weight: 700; color: var(--fr-ink); font-variant-numeric: tabular-nums; }
.fr-rec.is-rec + .fr-rectime { color: var(--fr-concern); }
.fr-filmbar { flex-basis: 100%; height: 4px; border-radius: 2px; background: var(--fr-fill-strong); overflow: hidden; }
.fr-filmbar i { display: block; height: 100%; width: 0; background: var(--fr-gold); border-radius: 2px; }
.fr-filmacts { flex-basis: 100%; display: flex; gap: 4px; margin: -4px 0 0 -12px; }
.fr-filmacts .fr-link { min-height: 40px; color: var(--fr-mut); font-size: 12.5px; }
.fr-voiceline { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.45; color: var(--fr-mut); }
/* While a take records, the stage says so: the one state he must not miss. */
.fr:has(.fr-rec.is-rec) .fr-stage { box-shadow: 0 0 0 2px var(--fr-concern); }
/* The client's way in sits on the tape itself. */
.fr-filmcta {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--fr-gold-grad); color: var(--fr-on-gold);
  font-size: 14.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.fr-filmcta svg { width: 16px; height: 16px; }
/* A film owns the tape while it plays: the client watches, nothing to grab. */
.fr.is-film.fr-ro .fr-rail, .fr.is-film.fr-ro .fr-controls { opacity: .45; pointer-events: none; }

/* ═══ Editing (30 Sep 2026): the hand, the marks list, B's own scrub bar ═══ */
.fr-ink.is-hand { cursor: grab; }
.fr-ink.is-grabbing { cursor: grabbing; }
.fr-tools { grid-template-columns: repeat(8, 1fr); }
.fr-textpop [data-tp="x"] { width: 36px; padding: 0; background: var(--fr-fill); color: var(--fr-mut); display: inline-flex; align-items: center; justify-content: center; }
.fr-textpop [data-tp="x"] svg { width: 15px; height: 15px; }

.fr-marks { margin-bottom: 16px; }
.fr-marklist { max-height: 210px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.fr-mk { border-radius: 10px; }
.fr-mk.is-sel { background: var(--fr-fill); }
.fr-mk-main {
  width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; text-align: left;
  background: none; border: 0; border-radius: 10px; color: var(--fr-body);
}
.fr-mk-main:hover { background: var(--fr-fill); }
.fr-mk-main i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.fr-mk-main b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-mk-main span { flex: 0 0 auto; font-size: 11.5px; color: var(--fr-mut); font-variant-numeric: tabular-nums; }
.fr-mk-acts { display: flex; align-items: center; gap: 4px; padding: 0 6px 6px; }
.fr-mk-acts button {
  min-height: 36px; padding: 0 10px; border: 1px solid var(--fr-line); border-radius: 8px;
  background: none; color: var(--fr-ink); font-size: 12px; font-weight: 600;
}
.fr-mk-acts button:hover { background: var(--fr-fill-strong); }
.fr-mk-acts .fr-mk-del { margin-left: auto; width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--fr-concern); }
.fr-mk-acts .fr-mk-del svg { width: 16px; height: 16px; }

/* the comparison clip's own rail, under the main one */
.fr-railb { margin: 2px 0 6px; }
.fr-tline--b { margin: 0 2px 4px; }
.fr-tline--b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.fr-rail--b { height: 40px; }
.fr-rail--b .fr-rail-now { background: var(--fr-ink); }
.fr-linkt.is-on { color: var(--fr-gold); }
@media (min-width: 900px) { .fr-tools { grid-template-columns: 1fr; } }

/* naming a clip that arrived from Messages without an exercise */
.fr-exbox { display: block; margin-bottom: 16px; }
.fr-exbox input {
  width: 100%; min-height: 44px; padding: 0 12px;
  background: var(--fr-fill); border: 1px solid var(--fr-line); border-radius: 12px; color: var(--fr-ink); font-size: 16px;
}
.fr-exbox input:focus { outline: none; border-color: var(--fr-gold); }
.fv-ex { margin-bottom: 14px; }

/* Both surfaces sit above the app's toast layer, so they carry their own: a
   message raised while one is open would otherwise appear underneath it. */
.fr-toast, .fv-toast {
  position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30;
  max-width: min(440px, calc(100% - 32px)); padding: 11px 16px; border-radius: 12px;
  background: rgba(20,28,27,.96); border: 1px solid rgba(255,255,255,.16); color: #EEF3F1;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  pointer-events: none;
}
.fv-toast { position: fixed; }
.fr-del { width: 100%; margin-top: 4px; color: var(--fr-mut); font-size: 12.5px; }
.fr-del:hover { color: var(--fr-concern); background: none; }

/* Ten inks (1 Oct 2026). Wide: a two-column swatch grid in the tool strip.
   Phone: one row of ten, the three actions wrapping beneath it. */
.fr-inkbar { flex-wrap: wrap; row-gap: 2px; }
.fr-colours { flex-wrap: wrap; }
.fr-colours button { width: 36px; height: 36px; }
.fr-colours button::after { width: 18px; height: 18px; }
.fr-colours button[aria-label="Black"]::after { box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
.fr-colours button[aria-label="Black"].is-on::after { box-shadow: 0 0 0 2px #0B0F0F, 0 0 0 4px var(--fr-ink); }
.fr-inkacts { margin-left: auto; }
@media (min-width: 900px) {
  .fr-colours { display: grid; grid-template-columns: 1fr 1fr; gap: 0; justify-items: center; }
  .fr-colours button { width: 28px; height: 28px; }
  .fr-colours button::after { width: 16px; height: 16px; }
  .fr-inkacts { margin-left: 0; }
}