/* GoalieCore product surface.
   Film room, not dashboard: the footage is the hero, typography and spacing carry hierarchy.
   Green = action/active/complete. Cyan = machine-generated information only. Red = goals and errors. */

/* ================================================================ foundations: fonts
   Self-hosted (static/fonts, SIL OFL 1.1, latin subset incl. French). Barlow Condensed carries the statements
   (names, opponents, scores, stat numbers); Inter carries everything a person reads or operates. The two files the
   first paint needs are preloaded by app/base.html; `swap` keeps text visible on the local fallbacks meanwhile. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/barlow-condensed-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/barlow-condensed-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-latin-600.woff2") format("woff2"); }

/* ================================================================ foundations: tokens */
:root {
  /* palette */
  --canvas: #0F1113;               /* the application: deep charcoal */
  --canvas-deep: #090A0C;          /* film room: review pages go one step darker */
  --surface-1: #15181B;            /* content: dark graphite */
  --surface-raised: #1B1F23;       /* elevated: subtle graphite */
  --steel: #2E3439;
  --steel-soft: #1F2327;
  --ink: #F1F3F5;                  /* soft ice white */
  --ink-2: #9AA3AB;                /* cool neutral grey */
  --ink-3: #7F8993;                /* muted graphite grey: 5.3:1 on --canvas, the floor for any readable text */
  --gold: #F2D93B;                 /* the GoalieCore accent: acid gold, rare */
  --green: var(--gold);            /* the accent's historical name, kept for every rule that uses it */
  --green-hover: #F8E35C;
  --green-ink: #121314;
  --cyan: #53C7D8;
  --goal: #E85C4A;
  --amber: #E3AE4B;

  /* surfaces, by what sits on them (the palette above supplies the values). Depth comes from these few
     steps and from hairlines, never from stacked boxes. */
  --surface-app: var(--canvas);          /* the application */
  --surface-nav: #0C0E10;                /* navigation */
  --surface-content: var(--surface-1);   /* a content surface: forms, the confirmation */
  --surface-film: #050607;               /* the video workspace */
  --surface-control: var(--surface-raised);  /* an elevated control */
  --surface-selected: #1E2327;           /* the selected row */
  --surface-overlay: #22272B;            /* a menu or a popover */

  /* type */
  --font-display: "Barlow Condensed", "Bahnschrift", "Avenir Next Condensed", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-ui: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* spacing (deliberately not a strict grid; pages pick what reads best) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --gutter: clamp(16px, 4vw, 64px);

  /* shape */
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-input: 6px;
  --radius-tag: 3px;
  --crease-w: 2px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* legacy names used by pages not yet redesigned, mapped onto the new system */
  --bg: var(--canvas);
  --bg-2: #121517;
  --surface: var(--surface-1);
  --surface-2: var(--surface-raised);
  --surface-3: #22272B;
  --line: var(--steel-soft);
  --line-strong: var(--steel);
  --text: var(--ink);
  --text-2: #C5CCD2;
  --muted: var(--ink-2);
  --accent: var(--green);
  --accent-ink: var(--green-ink);
  --accent-soft: rgba(242, 217, 59, .1);
  --ice: #D9DDDA;
  --warn: var(--amber);
  --warn-soft: rgba(227, 174, 75, .1);
  --danger: var(--goal);
  --danger-soft: rgba(232, 92, 74, .1);
  --radius: var(--radius-card);
  --radius-sm: var(--radius-btn);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --focus: 0 0 0 2px var(--green);
  --font: var(--font-ui);
  color-scheme: dark;
}

/* ================================================================ foundations: base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body.gc {
  margin: 0; min-height: 100vh; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--ink);
  background: var(--canvas); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--green); color: var(--green-ink); z-index: 100; border-radius: var(--radius-btn); }
.skip-link:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================ foundations: typography */
/* The register. Display (condensed, uppercase) is for statements: a page's title, a name, an opponent, a score,
   a stat number. Section headings are display in mixed case. Everything a person operates or reads (navigation,
   buttons, links, tabs, states, metadata, prose) is the UI face in sentence case. Uppercase is left to the small
   `.overline` labels that name a value. */
.display, .headline, .label, .kicker, .scoreline, .numbers dd, .step-no, .gc-brand {
  font-family: var(--font-display); font-stretch: condensed;
}
.display { font-size: clamp(34px, 5vw, 60px); line-height: .95; font-weight: 700; letter-spacing: -.005em; text-transform: uppercase; }
.headline { font-size: clamp(46px, 6.6vw, 104px); line-height: .88; font-weight: 700; letter-spacing: -.012em; text-transform: uppercase; }
.title { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; }
.kicker { font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.label { font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: .005em; color: var(--ink); }
.meta { font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* the overline: a small label naming the value or the statement under it; the one sanctioned uppercase in body type */
.eyebrow, .overline { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.eyebrow.quiet { color: var(--ink-3); }
.section-title { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; letter-spacing: .005em; color: var(--ink); }
.lead { color: var(--text-2); font-size: 17px; max-width: 60ch; margin-top: 10px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.wrap-anywhere { overflow-wrap: anywhere; }
.vs { color: var(--ink-2); font-weight: 500; text-transform: lowercase; letter-spacing: .02em; }

/* ================================================================ the Crease Line
   An interrupted goal-frame corner: short vertical + horizontal, 2px, never glowing.
   Used for the brand mark, active navigation, the featured game and (later) selected shots. */
.crease { position: relative; }   /* section labels no longer carry the mark; the class stays for the markup */
.crease-mark { width: 11px; height: 15px; color: var(--green); flex: none; }

/* ================================================================ public header (landing, sign-in, onboarding) */
.gc-header { position: sticky; top: 0; z-index: 40; background: var(--canvas); border-bottom: 1px solid var(--steel-soft); }
.gc-header-inner { max-width: 1440px; margin: 0 auto; height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; }
.gc-header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.gc-brand { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: .01em; }
.gc-brand .crease-mark { margin-top: -3px; width: 12px; height: 17px; }
.gc-brand-text { display: grid; gap: 7px; }
.gc-brand-tag { font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.gc-header .gc-brand-tag { display: none; }
.gc-brand:hover { color: var(--ink); }

/* ================================================================ app shell */
.gc-shell { --gc-side-w: 232px; display: grid; grid-template-columns: var(--gc-side-w) minmax(0, 1fr); min-height: 100vh; }
.gc-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 30px 0 22px;
  background: var(--surface-nav); border-right: 1px solid var(--steel-soft); }
.gc-nav a[aria-current="page"] { background: rgba(241, 243, 245, .035); }
.gc-side .gc-brand { margin: 0 30px 52px; }
.gc-nav { display: grid; gap: 2px; }
.gc-nav a { position: relative; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 30px;
  color: var(--ink-2); text-decoration: none; font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; letter-spacing: 0;
  transition: color .15s var(--ease), background-color .15s var(--ease); }
.gc-nav a:hover { color: var(--ink); }
.gc-nav svg { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }
.gc-nav a[aria-current="page"] { color: var(--ink); background: rgba(241, 243, 245, .028); }
.gc-nav a[aria-current="page"] svg { color: var(--green); }
.gc-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 14px; top: 5px; bottom: 5px; width: 7px;
  border-left: var(--crease-w) solid var(--green); border-top: var(--crease-w) solid var(--green); }
.gc-account { margin: auto 22px 0; padding: 18px 8px 0; border-top: 1px solid var(--steel-soft); display: flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none; min-width: 0; }
.gc-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--surface-raised);
  border: 1px solid var(--steel); font-weight: 600; font-size: 14px; color: var(--ink); }
.gc-account-text { display: grid; min-width: 0; line-height: 1.25; }
.gc-account-text strong { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-account-text small { color: var(--ink-2); font-size: 12px; }
.gc-account:hover strong { color: #fff; }

/* ================================================================ layout */
.gc-main { max-width: 1440px; margin: 0 auto; padding: 40px var(--gutter) 96px; min-width: 0; }
.gc-app .gc-main { width: 100%; }
.gc-main.narrow { max-width: 760px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 32px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.section { margin-top: 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-bar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.section-bar .text-link { white-space: nowrap; }

/* ================================================================ PAGE ATMOSPHERE: the goalie portrait as environment
   One brand portrait (static/brand/goalie-portrait.*: graded into the charcoal system, its edges feathered inside
   the file) is a large cinematic presence emerging from the darkness of a page, the eye, the cage and the helmet
   clearly readable, the periphery dissolving into the page. Art direction, not content: beneath everything
   (PAGE -> ATMOSPHERE -> CONTENT), no pointer, hidden from assistive technology, gone below 900px, never inside a
   section, a card or a panel, never in the Review Studio. One use per page (icons.html::page_atmosphere).

   The collision system. Decorative photography never interferes with functional content, so every page composes
   the same photograph around its own geometry:
   - ARTWORK ZONE: everything is measured from the CONTENT's edges (the box lives in main, so `--atm-x` is the
     photograph's right edge past the content's right edge and `--atm-y` its top from the page top), and the
     photograph's size is fluid (clamp). The eye sits 77 % across and 32 % down the photograph; the cage spans
     55-90 % across and 3-68 % down. Each page puts the eye in its own negative space: the header band beside the
     title, clear of the right-edge control, and dissolves the picture (`--atm-fade-start/-end`, from the page top)
     before the first dense row of content.
   - PROTECTED ZONES: a control that must stand in the artwork zone (Edit profile, Upload game on Home) gets a soft
     ellipse cut out of the mask around it (`--atm-z1-*` / `--atm-z2-*`, the centre measured leftward from the
     content's right edge and down from the page top): the photograph dissolves around the control, and nothing
     is drawn. Invisible as an object, it is compositing, not decoration.
   - REGIMES, not per-width hacks: A (the content fills the column) composes inside the header band; B (a centred
     content column with a free margin, Progress and Profile from 1900px) puts the whole face in that margin; the
     icon-rail range (901-1080px) keeps only the pages whose header band is clean (Progress, Home) and Coach hides
     below 1300px where its lead paragraph reaches the corner. Below 900px: hidden, never fetched. */
.gc-main:has(> .page-atmosphere) { position: relative; isolation: isolate; }
.page-atmosphere {
  --atm-main-max: 1440px;                      /* the page's main max-width, so the box can reach the viewport edge */
  --atm-bleed: max(0px, (100vw - var(--gc-side-w, 232px) - min(var(--atm-main-max), 100vw - var(--gc-side-w, 232px))) / 2);
  --atm-img-w: clamp(640px, 52vw, 880px);      /* the photograph's rendered width; its height follows (x .846) */
  --atm-x: 0px;                                /* its right edge, past the content's right edge (negative: inside) */
  --atm-y: 0px;                                /* its top, from the page top (negative: the crown is cut) */
  --atm-opacity: .92;
  --atm-mask-left: 56%;                        /* the left fade: transparent at the box's left edge, whole from here */
  --atm-fade-start: 200px;                     /* the bottom fade: whole to here ... */
  --atm-fade-end: 320px;                       /* ... gone from here (and the box ends) */
  --atm-z1-x: 0px; --atm-z1-y: 0px; --atm-z1-rx: 1px; --atm-z1-ry: 1px;   /* protected zone 1 (1px = none) */
  --atm-z2-x: 0px; --atm-z2-y: 0px; --atm-z2-rx: 1px; --atm-z2-ry: 1px;   /* protected zone 2 */
  --atm-z-in: 45%;                             /* the zone's clear core, then a soft return to the picture */
  position: absolute; top: 0; right: calc(-1 * var(--atm-bleed)); z-index: -1;
  width: calc(100% + var(--atm-bleed)); height: var(--atm-fade-end); overflow: hidden;
  pointer-events: none; user-select: none; opacity: var(--atm-opacity);
  -webkit-mask-image:
    linear-gradient(to right, transparent, rgba(0, 0, 0, .12) calc(var(--atm-mask-left) * .35), rgba(0, 0, 0, .55) calc(var(--atm-mask-left) * .68), #000 var(--atm-mask-left)),
    linear-gradient(to bottom, #000 var(--atm-fade-start), rgba(0, 0, 0, .55) calc(var(--atm-fade-start) + (var(--atm-fade-end) - var(--atm-fade-start)) * .35), rgba(0, 0, 0, .12) calc(var(--atm-fade-start) + (var(--atm-fade-end) - var(--atm-fade-start)) * .7), transparent var(--atm-fade-end)),
    radial-gradient(ellipse var(--atm-z1-rx) var(--atm-z1-ry) at calc(100% - var(--atm-bleed) - var(--gutter) - var(--atm-z1-x)) var(--atm-z1-y), transparent var(--atm-z-in), #000 100%),
    radial-gradient(ellipse var(--atm-z2-rx) var(--atm-z2-ry) at calc(100% - var(--atm-bleed) - var(--gutter) - var(--atm-z2-x)) var(--atm-z2-y), transparent var(--atm-z-in), #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, rgba(0, 0, 0, .12) calc(var(--atm-mask-left) * .35), rgba(0, 0, 0, .55) calc(var(--atm-mask-left) * .68), #000 var(--atm-mask-left)),
    linear-gradient(to bottom, #000 var(--atm-fade-start), rgba(0, 0, 0, .55) calc(var(--atm-fade-start) + (var(--atm-fade-end) - var(--atm-fade-start)) * .35), rgba(0, 0, 0, .12) calc(var(--atm-fade-start) + (var(--atm-fade-end) - var(--atm-fade-start)) * .7), transparent var(--atm-fade-end)),
    radial-gradient(ellipse var(--atm-z1-rx) var(--atm-z1-ry) at calc(100% - var(--atm-bleed) - var(--gutter) - var(--atm-z1-x)) var(--atm-z1-y), transparent var(--atm-z-in), #000 100%),
    radial-gradient(ellipse var(--atm-z2-rx) var(--atm-z2-ry) at calc(100% - var(--atm-bleed) - var(--gutter) - var(--atm-z2-x)) var(--atm-z2-y), transparent var(--atm-z-in), #000 100%);
  mask-composite: intersect;
}
.page-atmosphere picture { display: contents; }
.page-atmosphere img { position: absolute; top: var(--atm-y); right: calc(var(--atm-bleed) + var(--gutter) - var(--atm-x)); width: var(--atm-img-w); height: auto; max-width: none; }

/* GAMES (regime A everywhere): the face in the header band between the title and Upload game. The cage ends
   250px short of the content's right edge (room for the French button), the eye sits 120px down, and the picture
   is gone before the filter row's rule and the tiles. */
.page-atmosphere.is-games { --atm-x: calc(var(--atm-img-w) * .1 - 250px); --atm-y: calc(120px - var(--atm-img-w) * .27); --atm-fade-start: 150px; --atm-fade-end: 262px; }
/* PROGRESS: the header band beside the title, the eye 110px down, dissolved before the facts row (266px). From
   1900px (regime B) the content column is centred and the whole face stands in the free right margin. */
.page-atmosphere.is-progress { --atm-main-max: 1100px; --atm-img-w: clamp(560px, 50vw, 880px); --atm-x: 40px; --atm-y: calc(110px - var(--atm-img-w) * .27); --atm-fade-start: 190px; --atm-fade-end: 276px; }
/* PROFILE: the face high in the corner, right of the name's widest possible line (760px), the identity's actions
   protected by a zone at the hero's right edge; regime B from 1900px. */
.page-atmosphere.is-profile { --atm-main-max: 1160px; --atm-img-w: clamp(560px, 46vw, 760px); --atm-x: 50px; --atm-y: calc(95px - var(--atm-img-w) * .27); --atm-fade-start: 200px; --atm-fade-end: 310px; --atm-opacity: .9;
  --atm-z1-x: 76px; --atm-z1-y: 222px; --atm-z1-rx: 230px; --atm-z1-ry: 130px; }
/* HOME: the room, then the goalie's own footage. The face right of the greeting, the Upload game link protected,
   the picture gone before the side panels (202px). */
.page-atmosphere.is-home { --atm-img-w: clamp(560px, 46vw, 760px); --atm-x: 30px; --atm-y: calc(105px - var(--atm-img-w) * .27); --atm-fade-start: 168px; --atm-fade-end: 250px; --atm-opacity: .82;
  --atm-z1-x: 60px; --atm-z1-y: 56px; --atm-z1-rx: 190px; --atm-z1-ry: 64px; }
/* COACH: the weakest treatment: a small face above the connection column, right of the lead paragraph (60ch),
   gone before its heading (228px); hidden below 1300px where the lead reaches the corner. */
.page-atmosphere.is-coach { --atm-img-w: clamp(520px, 40vw, 640px); --atm-x: 20px; --atm-y: calc(90px - var(--atm-img-w) * .27); --atm-fade-start: 150px; --atm-fade-end: 216px; --atm-opacity: .72; }
@media (max-width: 1320px) {  /* the narrow desktop column: Home's grid stacks and the hero rises to 175px */
  .page-atmosphere.is-home { --atm-y: calc(90px - var(--atm-img-w) * .27); --atm-fade-start: 125px; --atm-fade-end: 195px; }
}
@media (max-width: 1299px) {  /* the header band narrows: the filter row reaches the cage on Games, a long name reaches it
                                 on Profile, the lead paragraph reaches the corner on Coach */
  /* Games: the header band is ~150px tall here, so a compact face: the eye at 96px, the cage gone by the filters */
  .page-atmosphere.is-games { --atm-img-w: 520px; --atm-x: calc(var(--atm-img-w) * .1 - 230px); --atm-y: calc(96px - var(--atm-img-w) * .27); --atm-fade-start: 100px; --atm-fade-end: 190px; }
  .page-atmosphere.is-profile, .page-atmosphere.is-coach { display: none; }
}
@media (min-width: 1900px) {  /* regime B: the whole face in the centred column's free margin, full height */
  .page-atmosphere.is-progress { --atm-img-w: 760px; --atm-x: 366px; --atm-y: -93px; --atm-fade-start: 420px; --atm-fade-end: 640px; }
  .page-atmosphere.is-profile { --atm-img-w: 700px; --atm-x: 336px; --atm-y: -50px; --atm-fade-start: 400px; --atm-fade-end: 600px; }
}
@media (max-width: 1080px) {  /* the icon rail: only the pages whose header band stays clean */
  .page-atmosphere.is-games { display: none; }
  .page-atmosphere { --atm-mask-left: 50%; }
}
/* Portrait tablets and phones: the page's own rows cross the face at these widths, so content and footage only
   (the box has no layout, so the file is never fetched). */
@media (max-width: 900px), print { .page-atmosphere { display: none; } }

/* ================================================================ buttons & links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-btn); border: 1px solid var(--steel); background: var(--surface-raised); color: var(--ink);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px; letter-spacing: -.003em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.btn:hover { background: #1F2427; border-color: #3A4246; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.rv-quick:active:not(:disabled), .rv-step:active:not(:disabled), .rv-play:active, .rv-icon-btn:active, .rv-speed-btn:active, .sd-pick:active:not(:disabled),
.sd-nudge:active:not(:disabled), .rv-hl:active:not(:disabled), .cs-tool:active:not(:disabled), .cs-tag:active, .rv-seg-btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.btn-primary:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--green-ink); }
.btn-outline { background: transparent; border-color: #4A5256; }
.btn-outline:hover { background: transparent; border-color: var(--ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-raised); border-color: transparent; }
.btn-danger { background: transparent; border-color: rgba(232, 92, 74, .4); color: var(--goal); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--goal); color: var(--goal); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 600; }
.btn-sm { min-height: 36px; padding: 0 13px; font-size: 13.5px; }
.btn svg { width: 18px; height: 18px; flex: none; stroke-width: 2; }
.btn-lg svg { width: 20px; height: 20px; }
.btn-primary svg, .btn-outline svg { transition: transform .15s var(--ease); }
.btn-primary:hover svg:last-of-type:not(:first-of-type), .btn-outline:hover svg:only-of-type { transform: translateX(2px); }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; text-decoration: none; }
.text-link:hover { color: var(--ink); }
.text-link svg { width: 15px; height: 15px; transition: transform .15s var(--ease); }
.text-link:hover svg:last-child { transform: translateX(2px); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-btn); border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-raised); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--steel); color: var(--text-2); background: var(--bg-2); }
.btn-primary kbd { border-color: rgba(11, 13, 14, .3); color: var(--green-ink); background: rgba(255, 255, 255, .25); }

/* ================================================================ tags and states
   A tag is a word on a quiet ground (a coaching tag, a result). A STATE (ready, in review, needs attention) is a dot
   and a word, no box: the dot's colour is the only signal, the word says it. Never a pill, never uppercase. */
.tag { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 0 9px; border-radius: var(--radius-tag); border: 0;
  background: rgba(241, 243, 245, .06); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1;
  color: var(--text-2); white-space: nowrap; }
.tag-ready, .tag-coach, .tag-busy, .tag-goal, .tag-warn, .tag-ai, .tag-quiet { padding: 0; background: transparent; }
.tag-ready::before, .tag-coach::before, .tag-busy::before, .tag-goal::before, .tag-warn::before, .tag-ai::before, .tag-quiet::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tag-ready { color: var(--text-2); }
.tag-ready::before { background: var(--ink-2); }
.tag-coach { color: var(--ink); }
.tag-coach::before { background: var(--gold); }
.tag-busy { color: var(--text-2); }
.tag-busy::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.tag-goal { color: var(--goal); }
.tag-ai { color: var(--cyan); }
.tag-quiet { color: var(--ink-3); }
.tag-quiet::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* legacy chips (other pages) restyled as tags */
/* a state chip: the same dot-and-word as a tag state */
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; padding: 0; border: 0; background: transparent;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); flex: none; }
.chip.plain::before { display: none; }
.chip.ok { color: var(--ink); }
.chip.ok::before { background: var(--ink); }
.chip.busy { color: var(--text-2); }
.chip.busy::before { background: var(--gold); }
.chip.warn { color: var(--amber); }
.chip.warn::before { background: var(--amber); }
.chip.bad { color: var(--goal); }
.chip.bad::before { background: var(--goal); }
.chip.result { font-family: var(--font-display); font-stretch: condensed; font-size: 15px; letter-spacing: .02em; }
.chip.result::before { display: none; }

/* ================================================================ surfaces */
.card { background: var(--surface-content); border: 1px solid var(--steel-soft); border-radius: var(--radius-btn); padding: 22px; }
.card.flush { padding: 0; overflow: hidden; }
.card-title { font-size: 17px; font-weight: 650; }
.divider { height: 1px; background: var(--steel-soft); margin: 18px 0; border: 0; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-btn); background: var(--surface-1); border: 1px solid var(--steel-soft); color: var(--text-2); font-size: 14px; line-height: 1.5; }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ink-2); }
.notice.warn { background: rgba(227, 174, 75, .08); border-color: rgba(227, 174, 75, .4); border-left: 3px solid var(--amber); color: var(--ink); }
.notice.warn svg { color: var(--amber); }

/* ================================================================ game footage */
.frame { position: relative; display: block; overflow: hidden; background: #050607; }
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(241, 243, 245, .05); }
.still { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.86) saturate(.9);
  transition: opacity .5s var(--ease), transform .6s var(--ease), filter .3s var(--ease); pointer-events: none; }
.still.is-ready { opacity: 1; }
.still-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0;
  background: radial-gradient(120% 90% at 50% 40%, #121518 0%, #0A0C0D 100%); }
.still-empty span { position: relative; display: inline-flex; align-items: center; gap: 9px; }
.still-empty span::before { content: ""; width: 16px; height: 12px; flex: none; border: 1.5px solid var(--ink-3); border-radius: 3px; opacity: .8; }

/* ================================================================ HOME
   The goalie's own room, not a dashboard. Four things on the first screen: their name, the one thing to do
   next, the game they are in the middle of, and what is waiting. The footage is the only framed object; the
   rest is type on the canvas. */
.gc-main.home { padding-top: 40px; }

.intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: var(--space-7) var(--space-8); align-items: end; padding-bottom: var(--space-7); }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.home-upload { align-self: flex-start; margin-top: 4px; }
.home-ask { margin-top: 14px; font-family: var(--font-display); font-stretch: condensed; font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; line-height: 1.1; color: var(--ink); }
.home-lead { margin-top: 6px; max-width: 52ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.intro-greeting { font-family: var(--font-display); font-stretch: condensed; font-size: clamp(36px, 3.6vw, 52px); line-height: .95; font-weight: 700;
  letter-spacing: -.008em; text-transform: uppercase; overflow-wrap: anywhere; }
/* the words small, the name large: the goalie's name is the headline (split by static/app.js) */
.greet-word { display: block; font-size: .55em; font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.greet-name { display: block; font-size: 1.45em; line-height: .9; margin-top: 4px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px); gap: 0 40px; align-items: start; }
.home-main { min-width: 0; }

/* the hero: the goalie's own still, the game written over its foot */
.hero { position: relative; display: block; aspect-ratio: 2.25 / 1; border-radius: 10px; overflow: hidden; background: var(--surface-film); }
.hero-still { position: absolute; inset: 0; display: block; }
.hero .still { height: 100%; filter: brightness(.92) saturate(.92); transition: transform .6s var(--ease), filter .3s var(--ease); }
.hero:hover .still.is-ready { transform: scale(1.015); filter: brightness(.98) saturate(.95); }
.hero.is-empty .still-empty { font-size: 17px; }
/* a scrim, only so the words stay readable on a bright rink; never a decoration */
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 7, 8, .94) 0%, rgba(6, 7, 8, .72) 26%, rgba(6, 7, 8, .18) 58%, rgba(6, 7, 8, 0) 80%); }
.hero-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px;
  padding: 0 clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 32px); }
.hero-main { min-width: 0; }
.hero-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.hero-title { margin-top: 12px; font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 3.4vw, 58px); line-height: .92; letter-spacing: -.006em; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.hero-title .vs { font-size: .55em; vertical-align: .12em; color: var(--text-2); }
.hero-title .wrap-anywhere { overflow-wrap: normal; }
.hero-meta { margin-top: 12px; font-size: 14px; color: var(--text-2); }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; text-align: right; }
.hero .scoreline { margin: 0; font-size: clamp(48px, 4.6vw, 72px); justify-content: flex-end; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.hero .scoreline i { width: .34em; height: 5px; }
.hero .scoreline small { font-size: 18px; color: var(--text-2); }
.hero .numbers { justify-content: flex-end; gap: 8px 34px; }
.hero .numbers dd { font-size: 30px; }
.hero .numbers dt { font-size: 12px; color: var(--text-2); }
.hero .numbers div { align-items: flex-end; }
.hero .note { margin: -4px 0 0; }
.hero .feature-cta { margin-top: 4px; min-height: 48px; padding: 0 22px; font-size: 15.5px; }

/* beside the film: the season, the coach's flagged theme, the coach's own words */
.home-side { display: grid; gap: 0; align-content: start; }
.side-block { padding: 18px 0 26px; border-top: 1px solid var(--steel); }
.side-block:first-child { padding-top: 2px; border-top: 0; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.side-head .text-link { font-size: 12px; white-space: nowrap; }
.side-title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.side-record { display: grid; gap: 18px; margin-top: 16px; }
.side-hero-value { font-family: var(--font-display); font-stretch: condensed; font-size: 56px; font-weight: 700; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.side-hero-label { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.side-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--steel-soft); }
.side-facts div { display: grid; gap: 4px; }
.side-facts dd { margin: 0; font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.side-facts dt { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.side-focus { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.side-focus:not(:has(.side-focus-frame)) { grid-template-columns: minmax(0, 1fr); }
.side-focus-frame { aspect-ratio: 16 / 10; border-radius: 6px; }
.side-focus-name { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1; }
.side-focus-words { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.side-focus-text .text-link { margin-top: 10px; font-size: 12.5px; }
.side-coach { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.side-coach .person-mark { width: 48px; height: 48px; font-size: 20px; }
.side-coach-name { font-size: 17px; font-weight: 600; }
.side-coach-role { margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.side-quote { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--steel-soft); }
.side-quote p { font-size: 15px; line-height: 1.55; font-weight: 400; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.side-quote footer { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.intro .intro-greeting { font-size: clamp(40px, 4.6vw, 68px); max-width: 16ch; }
.intro-ask { margin-top: 16px; font-family: var(--font-display); font-stretch: condensed; font-size: clamp(22px, 2vw, 30px); font-weight: 600;
  line-height: 1.1; letter-spacing: .01em; color: var(--text-2); }
.intro-lead { margin-top: 12px; max-width: 42ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.intro-main .btn-lg { margin-top: 28px; }

.to-do { max-width: 640px; margin-top: 40px; }
.to-do .label { font-size: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--steel); }
.to-do-list { list-style: none; margin: 0; padding: 0; }
.to-do-list li { border-bottom: 1px solid var(--steel-soft); }
.to-do-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0 13px 16px; text-decoration: none; color: var(--ink); }
.to-do-item::before { content: ""; position: absolute; left: 0; top: 17px; width: 2px; height: 14px; background: var(--ink-3); }
.to-do-item.is-todo::before { background: var(--green); }
.to-do-item.is-problem::before { background: var(--goal); }
.to-do-item.is-review::before { background: var(--ink); }
.to-do-text { min-width: 0; }
.to-do-text strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.to-do-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: 13px; }
.to-do-item svg { width: 16px; height: 16px; color: var(--ink-3); transition: transform .15s var(--ease), color .15s; }
.to-do-item:hover svg { color: var(--ink); transform: translateX(2px); }

.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; gap: 10px 44px; margin: 0; }
.numbers dt { order: 2; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.numbers div { display: flex; flex-direction: column; gap: 6px; }
.numbers dd { order: 1; margin: 0; font-size: 44px; line-height: .9; font-weight: 700; font-variant-numeric: tabular-nums; }
.note { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.review-state { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 16px; }
.scoreline { display: flex; align-items: center; gap: 14px; font-weight: 700; line-height: .8; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.scoreline i { display: block; width: .36em; height: 6px; background: var(--ink); opacity: .85; }
.scoreline small { align-self: flex-start; font-size: 20px; letter-spacing: .08em; color: var(--ink-2); padding-left: 2px; }
.review-state span { font-size: 13px; color: var(--ink-2); }
.review-state strong { font-size: 14px; font-weight: 600; color: var(--text-2); }
.review-state strong.is-open { color: var(--ink); }
.feature-cta { align-self: flex-start; }

.recent { margin-top: 40px; }
.recent-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.recent-line { display: flex; align-items: baseline; gap: 10px; }
.recent-info .tag { justify-self: start; margin-top: 4px; }
.recent-game { display: block; color: var(--ink); text-decoration: none; transition: transform .2s var(--ease); }
.recent-game:hover { transform: translateY(-2px); color: var(--ink); }
.recent-frame { aspect-ratio: 16 / 9; border-radius: 8px; }
.recent-frame .still { filter: brightness(.86) saturate(.9); }
.recent-game:hover .still.is-ready { filter: brightness(.98) saturate(.95); }
.recent-info { display: grid; gap: 5px; padding: 12px 2px 0; }

.recent-title { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.recent-title .vs { font-size: .72em; }
.recent-score { font-family: var(--font-display); font-stretch: condensed; font-size: 20px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1; }

.first-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.first-steps li { padding-top: 18px; border-top: 1px solid var(--steel); }
.first-steps li:first-child { border-top-color: var(--ink); }
.step-no { display: block; font-size: 56px; line-height: .9; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.first-steps li:first-child .step-no { color: var(--ink); }
.first-steps h2 { margin-top: 14px; font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; letter-spacing: .005em; }
.first-steps p { margin-top: 4px; color: var(--ink-2); }

/* The public marketing page has its own stylesheet, at the end of this file under `.mk-`.
   Nothing it defines is used by a signed-in screen, and nothing it defines is shared with one. */

/* ================================================================ choice cards (onboarding) */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.choice { display: grid; gap: 10px; text-align: left; padding: 26px; border-radius: var(--radius-card); background: var(--surface-1); border: 1px solid var(--steel); cursor: pointer; transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--ink-2); background: var(--surface-raised); }
.choice svg { width: 34px; height: 34px; color: var(--ink); }
.choice strong { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; }
.choice span { color: var(--ink-2); font-size: 14px; }
.choice[disabled] { opacity: .55; cursor: default; }

/* ================================================================ forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > span, .field-label { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.field > span b { color: var(--ink-3); font-weight: 500; }
.field small { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.input, .field input:not([type=radio]):not([type=checkbox]), .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--radius-input); border: 1px solid var(--steel);
  background: var(--surface-1); color: var(--ink); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.input:hover, .field input:not([type=radio]):not([type=checkbox]):hover, .field select:hover, .field textarea:hover { border-color: #3D454B; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--green); background: var(--surface-raised); box-shadow: 0 0 0 3px rgba(242, 217, 59, .12); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.segmented span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius-input); border: 1px solid var(--steel); color: var(--text-2); font-weight: 500; font-size: 14px; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.segmented span:hover { border-color: var(--ink-2); color: var(--ink); }
.segmented input:checked + span { background: var(--accent-soft); border-color: var(--green); color: var(--ink); }
.segmented input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.form-error { color: var(--goal); font-size: 14px; min-height: 0; }
.form-error:empty { display: none; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.score-inputs { display: flex; align-items: center; gap: 8px; }
.score-inputs input { max-width: 84px; text-align: center; }

/* ================================================================ NEW GAME
   The first conversion surface: the few fields that identify a game on the canvas (no box around them), and beside
   them the whole journey in three steps, the current one marked, so the goalie knows the footage comes next. */
.gc-main.newgame { max-width: 1180px; }
.ng { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px 80px; align-items: start; }
.ng-main { min-width: 0; max-width: 680px; }
.ng-form { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--steel); }
.ng-more { margin-top: 24px; }
.ng-more-body { margin-top: 16px; }
.ng-fieldset { border: 0; padding: 0; margin: 0; }
.ng-fieldset legend { margin-bottom: 8px; }
.ng-actions { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--steel-soft); }
.ng-steps { position: sticky; top: 40px; margin-top: 150px; }
.ng-steps ol { list-style: none; margin: 0; padding: 0; display: grid; }
.ng-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 10px; padding: 16px 0 18px; border-top: 1px solid var(--steel); }
.ng-steps li.is-current { border-top: 2px solid var(--gold); padding-top: 15px; }
.ng-step-no { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ng-step-title { font-size: 15px; font-weight: 600; color: var(--text-2); }
.ng-step-text { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ng-steps li.is-current .ng-step-no, .ng-steps li.is-current .ng-step-title { color: var(--ink); }
@media (max-width: 960px) {
  .ng { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ng-steps { position: static; margin-top: 0; }
}
@media (max-width: 760px) {
  .ng-form { margin-top: 24px; padding-top: 22px; }
  .ng-actions { flex-direction: column-reverse; }
  .ng-actions .btn { width: 100%; }
}

/* ================================================================ GAMES: the film library */
.gc-main.library { padding-top: 40px; }
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 30px; }
.lib-head .display { font-size: clamp(44px, 5.2vw, 76px); line-height: .9; }
.lib-count { margin-top: 10px; }

.lib-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--steel); }
.lib-filters { display: flex; gap: 30px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lib-filters::-webkit-scrollbar { display: none; }
.lib-filters a, .lib-sort a { position: relative; flex: none; font-family: var(--font-ui); text-decoration: none; font-weight: 500; white-space: nowrap; }
.lib-filters a { display: inline-flex; align-items: baseline; gap: 7px; padding: 12px 0 14px; font-size: 15px; letter-spacing: 0; color: var(--ink-2); }
.lib-filters a:hover { color: var(--ink); }
.lib-filter-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lib-filters a[aria-current="page"] { color: var(--ink); }
.lib-filters a[aria-current="page"] .lib-filter-count { color: var(--ink-2); }
/* the active filter: a solid rule on the bar's divider */
.lib-filters a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.lib-filters a.is-attention { color: var(--amber); }
.lib-filters a:focus-visible, .lib-sort a:focus-visible { outline-offset: -2px; }
.lib-sort { display: flex; gap: 16px; padding-bottom: 15px; flex: none; }
.lib-sort a { font-size: 13.5px; color: var(--ink-3); }
.lib-sort a:hover { color: var(--ink); }
.lib-sort a[aria-current="true"] { color: var(--ink); }
.lib-none { padding: 40px 0; color: var(--ink-2); }

.lib-month { margin-top: 36px; }
.lib-month-title { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 600; letter-spacing: .005em; color: var(--text-2); padding-bottom: 12px; }

/* a game is a piece of its own footage with the game written over its foot; state and action beneath */
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
.lib-tile { position: relative; display: grid; gap: 12px; }
.lib-tile:has(.lib-action:focus-visible) { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 6px; }
.lib-tile:has(.lib-action:focus-visible) .lib-action { outline: none; }
.lib-frame { aspect-ratio: 16 / 9; border-radius: 10px; }
.lib-frame .still { filter: brightness(.88) saturate(.9); transition: transform .6s var(--ease), filter .3s var(--ease); }
.lib-tile:hover .lib-frame .still.is-ready { transform: scale(1.015); filter: brightness(.96) saturate(.95); }
.lib-frame .crease-corner { display: none; }
.lib-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 7, 8, .92) 0%, rgba(6, 7, 8, .6) 30%, rgba(6, 7, 8, .1) 60%, rgba(6, 7, 8, 0) 80%); }
.lib-frame.is-empty .lib-scrim { background: linear-gradient(to top, rgba(6, 7, 8, .7) 0%, rgba(6, 7, 8, 0) 60%); }
.lib-state { position: absolute; left: 14px; top: 14px; z-index: 1; background: rgba(6, 7, 8, .7); }
.lib-over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; padding: 0 20px 18px; }
.lib-date { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--text-2); }
.lib-opp { min-width: 0; font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 2.4vw, 40px); line-height: .95; letter-spacing: -.004em; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }
.lib-opp .vs { font-size: .58em; vertical-align: .1em; color: var(--text-2); }
.lib-score { display: flex; align-items: flex-start; gap: 6px; font-family: var(--font-display); font-stretch: condensed; font-weight: 700; line-height: .85; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }
.lib-score-num { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(32px, 2.6vw, 44px); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lib-score-num i { display: block; width: 14px; height: 4px; background: var(--ink); opacity: .8; }
.lib-result { font-size: 16px; letter-spacing: .04em; color: var(--text-2); padding-top: 2px; }
.lib-score-word { font-size: 24px; text-transform: uppercase; letter-spacing: .03em; }
.lib-noscore { font-size: 13px; color: var(--ink-2); }

.lib-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px 22px; padding: 2px 2px 0; }
.lib-status { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.lib-detail { flex-basis: 100%; font-size: 13.5px; color: var(--text-2); line-height: 1.35; }
.tag-warn { color: var(--amber); border-color: rgba(227, 174, 75, .45); }
.periods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; }
.period { display: grid; gap: 5px; }
.period b { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); line-height: 1; }
.period i { position: relative; display: block; height: 3px; background: var(--steel); overflow: hidden; }
.period.is-ready b { color: var(--ink-2); }
.period.is-ready i { background: var(--ink); }
.period.is-working b { color: var(--ink-2); }
.period.is-working i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--ink-2); animation: period-scan 2.4s var(--ease) infinite; }
.period.is-paused b { color: var(--amber); }
.period.is-paused i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 0%); background: var(--amber); }
.period.is-failed b { color: var(--goal); }
.period.is-failed i { background: var(--goal); }
@keyframes period-scan { 0% { left: -40%; } 100% { left: 100%; } }
.lib-shots { font-size: 13.5px; color: var(--ink-2); }
.lib-shots strong { font-family: var(--font-display); font-stretch: condensed; font-size: 18px; font-weight: 700; color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.lib-review { min-width: 0; display: grid; gap: 2px; }
.lib-review-label { font-size: 12.5px; color: var(--ink-3); }
.lib-review strong { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.lib-review strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-2); }
.lib-review strong.is-open { color: var(--ink); }
.lib-review strong.is-open::before { background: var(--gold); }
.lib-review strong.is-done { color: var(--ink); }
.lib-review strong.is-done::before { background: var(--ink); }
.lib-review strong.is-none { color: var(--ink-3); }
.lib-review strong.is-none::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.lib-action { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--steel);
  border-radius: var(--radius-btn); font-family: var(--font-ui); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap;
  transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.lib-action::after { content: ""; position: absolute; inset: 0; }  /* the whole tile opens the game; one tab stop per game */
.lib-action svg { width: 16px; height: 16px; flex: none; stroke-width: 2; transition: transform .2s var(--ease); }
.lib-tile:hover .lib-action { border-color: var(--ink-2); background: var(--surface-raised); }
.lib-tile:hover .lib-action svg { transform: translateX(2px); }
.lib-action.is-urgent { border-color: rgba(227, 174, 75, .55); }

.lib-empty { display: grid; grid-template-columns: minmax(260px, 520px) minmax(0, 1fr); gap: 56px; align-items: center; padding: 36px 0 40px; border-top: 1px solid var(--steel); }
.lib-empty-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); border: 1px dashed var(--steel);
  background: radial-gradient(120% 90% at 50% 40%, #121518 0%, #0A0C0D 100%); }
.lib-empty-frame .crease-corner { position: absolute; left: 20px; top: 20px; width: 14px; height: 32px; border-left: 2px solid var(--steel); border-top: 2px solid var(--steel); }
.lib-empty-title { font-family: var(--font-display); font-stretch: condensed; font-size: clamp(40px, 4vw, 60px); line-height: .92; font-weight: 700; text-transform: uppercase; }
.lib-empty-copy p { margin-top: 14px; font-size: 18px; color: var(--text-2); }
.lib-empty-copy .btn { margin-top: 28px; }

@media (min-width: 1700px) { .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .lib-grid { grid-template-columns: 1fr; gap: 28px; }
  .lib-empty { grid-template-columns: 1fr; gap: 28px; }
  .lib-empty-frame { max-width: 520px; }
}
/* phone: one piece of film per game, the state and action beneath */
@media (max-width: 760px) {
  .gc-main.library { padding-top: 26px; }
  .lib-head { align-items: center; padding-bottom: 20px; }
  .lib-head .display { font-size: 44px; }
  .lib-head .btn { min-height: 40px; padding: 0 12px; font-size: 15px; }
  .lib-bar { flex-direction: column; align-items: stretch; gap: 0; margin: 0 -16px; padding: 0 16px; }
  .lib-filters { gap: 22px; margin: 0 -16px; padding: 0 16px; }
  .lib-filters a { font-size: 17px; }
  .lib-sort { order: -1; justify-content: flex-end; padding: 0 0 4px; margin-top: -6px; }
  .lib-month { margin-top: 28px; }
  .lib-frame { margin: 0 -16px; border-radius: 0; }
  .lib-opp { font-size: 30px; }
  .lib-score-num { font-size: 36px; }
  .lib-under { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 2px; }
  .lib-action { justify-self: stretch; justify-content: space-between; margin-top: 4px; min-height: 44px; }
  .lib-filters { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .lib-empty-copy .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .period.is-working i::after { left: 0; width: 100%; opacity: .5; }
}

.empty { text-align: center; padding: 64px 22px; border-radius: var(--radius-card); border: 1px dashed var(--steel); background: var(--bg-2); }

.empty .display { font-size: clamp(30px, 4.4vw, 48px); max-width: 18ch; margin: 0 auto; }
.empty .lead { margin: 12px auto 0; }
.empty .btn { margin-top: 26px; }

/* ================================================================ shared page parts (game review, new game, connect, coach) */
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink-2); text-decoration: none; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; margin-bottom: 14px; }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 16px; height: 16px; transition: transform .15s var(--ease); }
.back-link:hover svg { transform: translateX(-2px); }
.coach-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px 56px; align-items: start; }
.coach-name { font-weight: 650; overflow-wrap: anywhere; }
/* an open list: rules between rows, no box around them */
.open-list { border-top: 1px solid var(--steel); }
.open-list > .list-rows > .list-row:first-child { border-top: 0; }
.open-list > .muted, .open-list > .rv-hint { padding-top: 14px; }
.open-list > .pf-empty { padding-top: 18px; }
.list-row { padding: 16px 0; }
/* a person: their initial as a quiet mark, their name with presence */
.person-row { flex-wrap: nowrap; }
.person-mark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--steel); background: var(--surface-control);
  font-family: var(--font-display); font-stretch: condensed; font-size: 19px; font-weight: 700; color: var(--ink); }
.person-name { font-family: var(--font-display); font-stretch: condensed; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: .005em; overflow-wrap: anywhere; }
.coach-person { align-items: flex-start; padding: 22px 0; }
.coach-person .person-mark { width: 52px; height: 52px; font-size: 22px; }
.coach-person-name { display: inline-block; color: var(--ink); text-decoration: none; }
.coach-person-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.coach-person-headline { margin-top: 7px; font-size: 15px; color: var(--text-2); }
.coach-person-focus { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.coach-person-meta { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.link-btn { padding: 0; background: none; border: 0; color: var(--ink-3); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--goal); }
/* the coach as a person (the goalie's Coach page, and the start of any future coach listing): a large initial, the
   name, the headline, the specialties as words, the account details as small print */
.coach-person .person-mark { width: 60px; height: 60px; font-size: 26px; }
.list-row.coach-person { align-items: flex-start; }
.coach-person-focus { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.coach-person-focus .tag { color: var(--text-2); }
.coach-person-headline { font-size: 15.5px; }
.coach-name { font-size: 15.5px; font-weight: 600; text-decoration: none; }
a.coach-name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* training data: two explicit choices, each a full row with its own control; the record they write is unchanged */
[data-training-consent] .form-grid[role="radiogroup"] { margin: 16px 0 6px; gap: 10px 12px; }
[data-training-consent] .form-grid[role="radiogroup"] .field > span { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--steel); border-radius: var(--radius-btn); background: var(--canvas); color: var(--ink); font-size: 14.5px; cursor: pointer;
  transition: border-color .15s var(--ease); }
[data-training-consent] .form-grid[role="radiogroup"] .field > span:hover { border-color: var(--ink-2); }
[data-training-consent] .form-grid[role="radiogroup"] .field > span:has(input:checked) { border-color: var(--gold); background: rgba(242, 217, 59, .06); }
[data-training-consent] input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); flex: none; }
[data-training-state] { margin-top: 14px; }
.card { border-radius: var(--radius-card); }
.card-title { font-size: 15.5px; font-weight: 600; }
/* connecting a coach: three plain steps and one action */
.invite { padding: 20px 22px 22px; border: 1px solid var(--steel-soft); border-radius: var(--radius-card); background: var(--surface-1); }
.invite-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.invite-steps li { position: relative; padding-left: 34px; font-size: 14px; color: var(--text-2); line-height: 1.45; counter-increment: step; }
.invite-steps li::before { content: "0" counter(step); position: absolute; left: 0; top: 1px; font-family: var(--font-display); font-stretch: condensed;
  font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.invite .btn-primary { justify-self: start; }
/* the account: settings as rows on rules, apart from the profile pages a person would send */
.settings-rows > .row { padding: 16px 0; border-top: 1px solid var(--steel-soft); }
.settings-rows > .row:first-child { border-top: 0; }
.settings-rows > .form-error:not(:empty) { padding-top: 12px; }
/* the coach's takeaway for the whole game: writing it, and reading it as the goalie */
.cg-summary { margin: 18px 0 4px; display: grid; gap: 12px; }
.cg-summary textarea { width: 100%; resize: vertical; }
.cg-summary.is-delivered { gap: 8px; }
.cg-summary-focus b, .rv-game-summary-focus b { color: var(--ink-2); font-weight: 600; font-size: 13.5px; margin-right: 4px; }
.rv-game-summary { margin-top: 10px; padding: 12px 14px; border-left: 2px solid #4A5256; background: var(--surface-1); border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }
.rv-game-summary-label { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.rv-game-summary-focus { margin-top: 8px; }

/* how far a coach is through a game, on the dashboard and on the game itself */
.coach-progress, .cg-progress { margin-top: 5px; font-variant-numeric: tabular-nums; }
.cg-progress.is-done { color: var(--ink); display: flex; align-items: center; gap: 6px; }
.cg-progress.is-done svg { width: 15px; height: 15px; }
.progress { height: 4px; border-radius: 0; background: var(--steel); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.progress.indeterminate i { width: 35%; animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.stepper { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; }
.stepper li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; margin-right: 14px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.stepper li[data-state="done"] { color: var(--ink); }
.stepper li[data-state="done"]::before { color: var(--green); }
.stepper li[data-state="current"] { color: var(--ink); font-weight: 600; }
.stepper li[data-state="done"]::before { content: "✓"; }
.stepper li[data-state="current"]::before { content: "●"; font-size: 9px; }
.inline-form { display: grid; gap: 12px; padding: 14px; border-radius: var(--radius-btn); background: var(--bg-2); border: 1px solid var(--steel-soft); }
details.disclosure > summary { cursor: pointer; color: var(--text-2); font-size: 13.5px; font-weight: 500; list-style: none; }
details.disclosure > summary:hover { color: var(--ink); }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "+ "; color: var(--green); }
details.disclosure[open] > summary::before { content: "– "; }
.code-display { white-space: nowrap; font-family: var(--mono); font-size: clamp(17px, 5vw, 28px); letter-spacing: .08em; padding: 16px; border-radius: var(--radius-btn); background: var(--bg-2); border: 1px solid var(--steel); text-align: center; overflow-wrap: anywhere; }
.list-rows { display: grid; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--steel-soft); }
.list-row:first-child { border-top: 0; }
.list-row .grow { flex: 1; min-width: 200px; }

/* ================================================================ GAME REVIEW: the film room */
/* one step darker than the rest of the product, and the full width of the workspace */
.gc-app:has(.gc-main.review) { background: var(--canvas-deep); }
.gc-main.review { max-width: none; padding: 18px clamp(16px, 2.4vw, 40px) 80px; }
/* While reviewing, the navigation is a rail of icons: the same links, the same active mark, 76px instead of 232. */
@media (min-width: 761px) {
  .gc-app:has(.gc-main.review) .gc-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .gc-app:has(.gc-main.review) .gc-side .gc-brand .gc-brand-text, .gc-app:has(.gc-main.review) .gc-account-text { display: none; }
  /* the rail keeps each link's name for assistive technology; only its picture shows */
  .gc-app:has(.gc-main.review) .gc-nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gc-app:has(.gc-main.review) .gc-side .gc-brand { margin: 0 auto 46px; }
  .gc-app:has(.gc-main.review) .gc-side .gc-brand .crease-mark { width: 16px; height: 22px; }
  .gc-app:has(.gc-main.review) .gc-nav a { justify-content: center; padding: 0; }
  .gc-app:has(.gc-main.review) .gc-nav a[aria-current="page"]::before { left: 10px; }
  .gc-app:has(.gc-main.review) .gc-account { margin: auto 12px 0; padding: 16px 0 0; justify-content: center; }
  .gc-app:has(.gc-main.review) .gc-lang { margin: 18px auto 0; flex-direction: column; gap: 0; }
  .gc-app:has(.gc-main.review) .gc-lang > * { padding: 4px 6px; }
}

/* the header is one line: where you came from, who the game was against, the score, the date */
.rv-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; min-height: 0; }
.rv-head .back-link { margin: 0 6px 0 0; }
.rv-title { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 2.4vw, 36px); line-height: 1; letter-spacing: -.004em; min-width: 0; }
.rv-title .vs { font-size: .55em; vertical-align: .12em; }
.rv-score { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; font-size: clamp(24px, 2vw, 30px); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; color: var(--text-2); }
.rv-meta { font-size: 13.5px; color: var(--ink-2); }
/* game-level edits, out of the film room's way */
.rv-game-details { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 30px; position: relative; }
.rv-game-details details.disclosure > summary { font-size: 13.5px; color: var(--ink-2); }
.rv-game-details details.disclosure > summary:hover { color: var(--ink); }
.rv-edit-result[open] .inline-form { margin-top: 10px; width: min(520px, 100%); }

/* period tabs: text and an active rule */
.rv-periods { display: flex; gap: 30px; margin: 10px 0 12px; border-bottom: 1px solid var(--steel); overflow-x: auto; scrollbar-width: none; }
.rv-periods::-webkit-scrollbar { display: none; }
.rv-period { position: relative; flex: none; display: inline-flex; align-items: baseline; gap: 9px; padding: 6px 2px 10px; background: none; border: 0;
  color: var(--ink-2); cursor: pointer; }
.rv-period strong { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.rv-period span { font-family: var(--font-ui); }
.rv-period span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.rv-period:hover { color: var(--ink); }
.rv-period.is-no_video:not([aria-selected="true"]) strong { color: var(--ink-3); }
.rv-period[aria-selected="true"] { color: var(--ink); }
.rv-period[aria-selected="true"] span { color: var(--ink-2); }
.rv-period[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.rv-period:focus-visible { outline-offset: -2px; }

/* video + shot navigator */
/* the footage takes every pixel the side does not need; the side is the current shot and its coaching, then the list */
.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px); gap: 0 28px; align-items: stretch; }
.rv-main { min-width: 0; }
/* the stage: the picture, then the film room's own player on the same black surface. One object, like a deck,
   not a web widget floating under a video. In fullscreen the whole stage is the screen. */
.rv-stage { position: relative; display: grid; grid-template-rows: auto auto; background: var(--surface-film); border-radius: 6px; overflow: hidden; }
.rv-video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 230px); min-height: 240px; background: #000; cursor: pointer; }
.rv-player { display: grid; gap: 2px; padding: 4px 12px 8px; background: #0A0C0D; border-top: 1px solid rgba(241, 243, 245, .06); }
.rv-stage:fullscreen { border-radius: 0; grid-template-rows: minmax(0, 1fr) auto; width: 100vw; height: 100vh; }
.rv-stage:fullscreen .rv-video { aspect-ratio: auto; max-height: none; min-height: 0; height: 100%; object-fit: contain; }

.rv-timeline { position: relative; height: 28px; cursor: pointer; touch-action: none; }
.rv-timeline-track { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--steel); }
.rv-timeline-buffer { position: absolute; left: 0; top: 13px; height: 2px; width: 0; background: #3A4145; pointer-events: none; }
.rv-timeline-fill { position: absolute; left: 0; top: 13px; height: 2px; width: 0; background: var(--ink-2); pointer-events: none; }
.rv-timeline:hover .rv-timeline-track, .rv-timeline.is-scrubbing .rv-timeline-track,
.rv-timeline:hover .rv-timeline-fill, .rv-timeline.is-scrubbing .rv-timeline-fill,
.rv-timeline:hover .rv-timeline-buffer, .rv-timeline.is-scrubbing .rv-timeline-buffer { top: 12px; height: 4px; }
/* the playhead: a hairline with a head, so it is never mistaken for a shot mark */
.rv-timeline-playhead { position: absolute; top: 2px; left: 0; width: 1px; height: 24px; background: var(--ink); pointer-events: none; z-index: 2; }
.rv-timeline-playhead i { position: absolute; top: -1px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
/* shot marks: 2px ticks below the track; a goal in goal red; the selected shot a full-height green bar */
.rv-timeline-mark { position: absolute; top: 13px; width: 2px; height: 12px; margin-left: -1px; padding: 0; border: 0; background: var(--ink-2); cursor: pointer; }
.rv-timeline-mark::before { content: ""; position: absolute; inset: -8px -7px -4px; }
.rv-timeline-mark:hover { background: var(--ink); height: 14px; }
.rv-timeline-mark.is-goal { background: var(--goal); }
.rv-timeline-mark.is-selected { top: 4px; height: 22px; width: 3px; margin-left: -1.5px; background: var(--green); }
.rv-timeline-mark.is-goal.is-selected { background: var(--goal); }

.rv-player-row { display: flex; align-items: center; gap: 8px; }
.rv-play { display: inline-grid; place-items: center; width: 40px; height: 36px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--ink); cursor: pointer; }
.rv-play:hover { background: rgba(241, 243, 245, .07); }
.rv-play svg { width: 20px; height: 20px; stroke-width: 2; }
.rv-play .is-play svg { fill: currentColor; }
.rv-play .is-pause { display: none; }
.rv-play.is-playing .is-play { display: none; }
.rv-play.is-playing .is-pause { display: inline; }
.rv-time { margin-left: 4px; font-family: var(--font-display); font-stretch: condensed; font-size: 17px; font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.rv-time-sep { margin: 0 6px; color: var(--ink-3); }
.rv-player-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rv-speed { display: inline-flex; gap: 2px; margin-right: 8px; }
.rv-speed-btn { min-height: 30px; padding: 0 8px; background: transparent; border: 0; border-radius: 5px; color: var(--ink-2); cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-speed-btn:hover { color: var(--ink); background: rgba(241, 243, 245, .06); }
.rv-speed-btn[aria-pressed="true"] { color: var(--ink); background: rgba(241, 243, 245, .1); }
.rv-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--ink-2); cursor: pointer; }
.rv-icon-btn:hover { color: var(--ink); background: rgba(241, 243, 245, .07); }
.rv-icon-btn svg { width: 18px; height: 18px; }
.rv-mute .is-muted { display: none; }
.rv-mute[aria-pressed="true"] .is-sound { display: none; }
.rv-mute[aria-pressed="true"] .is-muted { display: inline; }
.rv-play:focus-visible, .rv-icon-btn:focus-visible, .rv-speed-btn:focus-visible { outline-offset: -2px; }

.rv-transport { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 12px 0 0; }
.rv-nav { display: flex; align-items: center; gap: 18px; }
.rv-step { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 2px; background: transparent; border: 0;
  color: var(--ink-2); font-family: var(--font-ui); font-size: 14px; font-weight: 500; cursor: pointer; }
.rv-step:hover:not(:disabled) { color: var(--ink); }
.rv-step:disabled { opacity: .3; cursor: default; }
.rv-step svg { width: 16px; height: 16px; flex: none; stroke-width: 2; }
.rv-keys-box { margin-left: auto; position: relative; }
.rv-keys-box > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 4px; list-style: none; cursor: pointer;
  color: var(--ink-2); font-size: 13px; }
.rv-keys-box > summary::-webkit-details-marker { display: none; }
.rv-keys-box > summary:hover, .rv-keys-box[open] > summary { color: var(--ink-2); }
.rv-keys-box > summary kbd { font-size: 11px; padding: 1px 6px; }
.rv-keys-box[open] > .rv-keys { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px; background: var(--surface-overlay); border: 1px solid var(--steel); border-radius: var(--radius-btn); box-shadow: var(--shadow); }
.rv-mark { font-size: 14.5px; background: var(--gold); border-color: var(--gold); color: var(--green-ink); }
.rv-mark:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--green-ink); }
.rv-mark kbd { border-color: rgba(11, 13, 14, .25); color: var(--green-ink); background: rgba(255, 255, 255, .28); }
.rv-mark-time { font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: left; }
.rv-mark-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.rv-mark-group .rv-mark { margin-right: 10px; }
.rv-quick { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; background: var(--surface-1); border: 1px solid var(--steel);
  border-radius: 0; color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; cursor: pointer; margin-left: -1px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.rv-mark + .rv-quick { border-radius: var(--radius-btn) 0 0 var(--radius-btn); margin-left: 0; }
.rv-quick:last-child { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }
.rv-quick:hover:not(:disabled) { position: relative; border-color: var(--ink-2); background: var(--surface-raised); }
.rv-quick.is-goal:hover:not(:disabled) { border-color: var(--goal); color: var(--goal); }
.rv-quick:disabled { opacity: .5; cursor: progress; }
.rv-quick kbd { font-size: 10px; }
.rv-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.rv-keys kbd { font-size: 10px; padding: 0 5px; margin-right: 3px; }
.rv-inline-note { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--ink-3); font-size: 13.5px; color: var(--text-2); }
/* Shot-marking completeness (M4): the goalie's own statement that the whole period was gone through. A state line
   between rules: a mark (open ring, amber when reopened, a check when stated), the words, and while open the one
   button that states it. It is a person's statement, so it never reads as a verification. */
.rv-marking { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding: 12px 0 12px 30px; position: relative;
  border-left: 0; border-top: 1px solid var(--steel-soft); border-bottom: 1px solid var(--steel-soft); font-size: 14px; color: var(--text-2); }
.rv-marking::before { content: ""; position: absolute; left: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rv-marking strong { color: var(--ink); font-weight: 600; }
.rv-marking.is-complete::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121314' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: none; }
.rv-marking.is-reopened::before { box-shadow: inset 0 0 0 1.5px var(--amber); }
.rv-marking.is-reopened [data-marking-text] { color: var(--amber); }
.rv-marking .btn { margin-left: auto; }

.rv-side { position: relative; min-height: 360px; }
.rv-side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 18px 0; background: var(--surface-1);
  border: 1px solid var(--steel-soft); border-radius: 8px; }
/* the current moment: the strongest type on the side; the coaching under it is a person's words */
.rv-moment { display: grid; gap: 14px; padding-bottom: 16px; }
.rv-now { display: grid; gap: 6px; font-family: var(--font-display); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.rv-now-line { font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); line-height: 1; }
.rv-now-line b { font-size: 34px; color: var(--ink); margin: 0 4px; vertical-align: -3px; }
.rv-now-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.rv-now-t { color: var(--ink); }
.rv-now-out { font-size: 22px; font-weight: 600; }
.rv-now-out::before { content: "·"; margin-right: 10px; color: var(--ink-3); font-weight: 500; }
.rv-now-out.is-save { color: var(--ink); }
.rv-now-out.is-goal { color: var(--goal); }
.rv-now-out.is-miss { color: var(--text-2); }
.rv-now-out.is-none { color: var(--ink-3); }
.rv-now-out.rv-shot-reb { color: var(--text-2); font-weight: 500; }
.rv-moment-coach { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--steel-soft); }
.rv-moment-kicker { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.rv-moment-none { font-size: 14px; color: var(--ink-3); }
.rv-coach-note { display: grid; gap: 8px; }
.rv-coach-note + .rv-coach-note { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--steel-soft); }
.rv-coach-who { font-size: 13.5px; color: var(--ink-2); }
.rv-coach-who b { font-weight: 600; color: var(--ink); }
.rv-coach-text { font-size: 15.5px; line-height: 1.55; font-weight: 400; color: var(--text-2); white-space: pre-wrap; }
/* the review describes the footage it was made on; if the shot has moved since, that is said, in amber, above the words */
.rv-coach-moved { padding: 8px 10px; border-left: 3px solid var(--amber); background: rgba(227, 174, 75, .08); border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.rv-coach-facts { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13px; color: var(--ink-2); }
.rv-coach-facts span + span::before { content: "·"; margin: 0 7px; color: var(--ink-3); }
.rv-coach-facts .is-good { color: var(--ink); }
.rv-coach-facts .is-warn { color: var(--amber); }
.rv-coach-open { justify-self: start; margin-top: 2px; }
.rv-coach-open.text-link { font-size: 14px; }
.rv-moment-game { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px solid var(--steel-soft); text-decoration: none; font-size: 13px; color: var(--ink-3); }
.rv-status-label { font-size: 14px; font-weight: 600; }
.rv-status.is-none .rv-status-label { color: var(--ink-3); }
.rv-status.is-open .rv-status-label { color: var(--ink); }
.rv-status.is-done .rv-status-label { color: var(--ink); }
.rv-status.is-closed .rv-status-label { color: var(--text-2); }
.rv-status-coach { font-size: 13px; color: var(--ink-2); }
.rv-moment-game .rv-status-label { font-size: 14px; }
.rv-moment-game:hover .rv-status-label { text-decoration: underline; text-underline-offset: 3px; }

.rv-shots { display: flex; flex-direction: column; flex: 1; min-height: 0; border-top: 1px solid var(--steel); }
.rv-shots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0 8px; border-bottom: 1px solid var(--steel-soft); }
.rv-label { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; letter-spacing: .005em; color: var(--ink); }
.rv-count { margin-left: 6px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.rv-shot-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #2B3134 transparent; }
.rv-shot { position: relative; display: grid; grid-template-columns: 30px 58px minmax(0, 1fr); align-items: baseline; gap: 8px; width: 100%;
  padding: 9px 4px 9px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--steel-soft); color: var(--text-2);
  text-align: left; cursor: pointer; font: inherit; }
.rv-shot { transition: background-color .15s var(--ease), color .15s var(--ease); }
.rv-shot:hover { background: rgba(241, 243, 245, .03); }
.rv-shot:focus-visible { outline-offset: -2px; }
.rv-shot-no { font-family: var(--font-display); font-stretch: condensed; font-size: 18px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1; }
.rv-shot-t { font-family: var(--font-display); font-stretch: condensed; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.rv-shot-out { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 13.5px; font-weight: 500; line-height: 1.2; text-align: right; }
.rv-shot-out .is-save { color: var(--ink); }
.rv-shot-out .is-goal { color: var(--goal); }
.rv-shot-out .is-miss { color: var(--text-2); }
.rv-shot-out .is-none { color: var(--ink-3); letter-spacing: .05em; }
.rv-shot-reb { color: var(--ink-2); }
.rv-shot-reb::before { content: "· "; }
.rv-shot-star { display: inline-flex; margin-left: 4px; color: var(--ink-2); }
.rv-shot-star svg { width: 10px; height: 10px; }
/* the selected shot: the strongest Crease Line on the page, on a quiet raised surface */
.rv-shot-t, .rv-shot-no { letter-spacing: .01em; }
.rv-shot.is-selected { background: var(--surface-raised); color: var(--ink); }
.rv-shot.is-selected .rv-shot-no { color: var(--ink); }
.rv-shot.is-selected::before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 22px;
  border-left: 2px solid var(--green); border-top: 2px solid var(--green); }
.rv-shot.is-selected::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.rv-no-shots { padding: 16px 0; color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--steel-soft); }

/* selected shot detail */
.rv-details { margin-top: 18px; }
.rv-detail { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); border-top: 1px solid var(--steel); }
.rv-detail > * { padding: 20px 28px 22px; min-width: 0; }
.rv-detail > :first-child { padding-left: 0; }

.tag-save { color: var(--ink); border-color: #4A5256; }
.tag-quiet { color: var(--ink-3); border-style: dashed; }
.rv-sec { border-left: 1px solid var(--steel-soft); }
.rv-sec-title { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }

.rv-seg { display: inline-flex; border: 1px solid var(--steel); border-radius: var(--radius-btn); overflow: hidden; }
.rv-seg-btn { min-height: 38px; padding: 0 14px; background: transparent; border: 0; border-left: 1px solid var(--steel); color: var(--text-2); cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; }
.rv-seg-btn:first-child { border-left: 0; }
.rv-seg-btn:hover { color: var(--ink); background: rgba(241, 243, 245, .04); }
.rv-seg-btn[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: rgba(242, 217, 59, .1); box-shadow: inset 0 -2px 0 var(--green); }
.rv-seg-btn[aria-pressed="true"]::before { content: "✓ "; }
.rv-seg-btn.is-goal[aria-pressed="true"] { background: rgba(232, 92, 74, .12); box-shadow: inset 0 -2px 0 var(--goal); }
.rv-seg-btn:focus-visible { outline-offset: -3px; }
.rv-seg-btn:disabled { cursor: progress; opacity: .6; }
.rv-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

.rv-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.rv-remove { padding: 0; background: none; border: 0; color: var(--ink-3); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rv-remove:hover { color: var(--goal); }
.rv-coach-state { font-size: 15px; }
.rv-coach-state .rv-status-label { font-size: 20px; }

/* deliberate empty / paused / processing states in place of the video */
.rv-stage-msg { position: relative; display: grid; align-content: center; justify-items: start; gap: 12px; min-height: clamp(300px, 36vw, 560px);
  padding: clamp(28px, 5vw, 72px); border: 1px solid var(--steel-soft); border-radius: 8px;
  background: radial-gradient(110% 90% at 30% 30%, #111417 0%, #07090A 100%); }
.rv-stage-corner { position: absolute; left: 20px; top: 20px; width: 14px; height: 32px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); opacity: .8; }
.rv-stage-msg.is-goal .rv-stage-corner { border-color: var(--goal); }
.rv-stage-msg.is-warn .rv-stage-corner { border-color: var(--amber); }
.rv-stage-title { font-family: var(--font-display); font-stretch: condensed; font-size: clamp(38px, 4.4vw, 68px); font-weight: 700; line-height: .9; text-transform: uppercase; }
.rv-stage-msg.is-warn .rv-stage-title { color: var(--ink); }
.rv-stage-text { max-width: 52ch; font-size: 16px; color: var(--text-2); }
.rv-stage-note { font-size: 13px; color: var(--ink-2); }
.rv-stage-msg .rv-camera-view { width: min(360px, 100%); margin-top: 6px; }
.rv-stage-msg .rv-camera-view select { background: #0F1214; }
.rv-stage-msg .progress { width: min(460px, 100%); }
.rv-upload-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rv-gopro { width: min(520px, 100%); }
[data-upload-zone].dragging > .rv-stage-msg, .rv-replace-body.dragging { border-color: var(--green); border-style: dashed; background: rgba(242, 217, 59, .04); }
.rv-replace { margin-top: 20px; }
.rv-replace-body { display: grid; gap: 12px; margin-top: 12px; padding: 18px; border: 1px dashed var(--steel); border-radius: var(--radius-btn); }

/* game summary and coach review */
.rv-summary, .rv-coach { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--steel); }
.rv-summary-head, .rv-coach-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.rv-coach-head { justify-content: flex-start; }
.rv-summary-periods { font-size: 13px; color: var(--ink-2); }
.rv-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 14px 0 0; }
.rv-stats dd small { margin-left: 4px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.rv-clips { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--steel-soft); }
.rv-clips-text { font-size: 13px; color: var(--text-2); }
.rv-clips[data-running] .rv-clips-text { color: var(--amber); }
.rv-clips .btn svg { width: 15px; height: 15px; }
.rv-stats div { padding: 2px 18px; border-left: 1px solid var(--steel-soft); }
.rv-stats div:first-child { padding-left: 0; border-left: 0; }
.rv-stats dt { font-size: 12.5px; color: var(--ink-2); }
.rv-stats dd { margin: 3px 0 0; font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rv-stat-none { color: var(--ink-3); }
.rv-coach-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px; padding: 16px 0; border-bottom: 1px solid var(--steel-soft); }
.rv-coach-name { font-weight: 600; overflow-wrap: anywhere; }
.rv-coach-access, .rv-coach-note { margin-top: 3px; font-size: 13px; color: var(--text-2); }
.rv-coach-state-label { margin-right: 6px; font-size: 12px; color: var(--ink-3); }
.rv-coach-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rv-review-form { grid-column: 1 / -1; }
.rv-danger-text { color: var(--goal); }
.rv-danger-text:hover { color: var(--goal); }

@media (max-width: 1180px) {
  /* stacked: video, shot-by-shot controls, the current shot, then the full list */
  .period-panel:has([data-review]) { display: flex; flex-direction: column; }
  .period-panel:has([data-review]) > .rv-grid { display: contents; }
  .period-panel:has([data-review]) > * { order: 5; }
  .period-panel:has([data-review]) .rv-main { order: 1; }
  .period-panel:has([data-review]) .rv-side { order: 2; }
  .period-panel:has([data-review]) > .rv-details { order: 3; margin-top: 10px; }
  .rv-grid { grid-template-columns: 1fr; }
  .rv-video { max-height: none; }
  .rv-side { min-height: 0; margin-top: 18px; }
  .rv-side-inner { position: static; padding: 16px 16px 4px; }
  .rv-shot-list { overflow: visible; }
  .rv-detail { grid-template-columns: 1fr 1fr; }
  .rv-detail-head { grid-column: 1 / -1; border-bottom: 1px solid var(--steel-soft); }
  .rv-detail > .rv-sec:nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .gc-main.review { padding: 12px 16px 110px; }
  /* the phone header is two lines: back · opponent · score, then the date; the footage is next */
  .rv-head { gap: 2px 10px; }
  .rv-title { font-size: 26px; }
  .rv-score { font-size: 22px; }
  .rv-meta { flex-basis: 100%; font-size: 12.5px; }
  .rv-periods { gap: 22px; margin: 8px 0 8px; }
  .rv-period { gap: 6px; padding: 6px 0 8px; }
  .rv-period strong { font-size: 19px; }
  .rv-period span { font-size: 12px; }
  .rv-stage { margin: 0 -16px; border-radius: 0; }
  .rv-player { padding: 2px 12px 6px; }
  .rv-speed { display: none; }
  .rv-grid { margin-top: 0; }
  .rv-transport { gap: 10px 16px; }
  .rv-nav { width: 100%; justify-content: space-between; order: -1; }
  .rv-step { min-height: 44px; padding: 0; }
  .rv-mark-group { width: 100%; }
  .rv-mark { flex: 1 1 100%; min-height: 46px; }
  .rv-mark-group .rv-mark { margin: 0 0 8px; }
  .rv-quick { flex: 1; justify-content: center; min-height: 40px; }
  .rv-mark kbd, .rv-quick kbd { display: none; }
  .rv-keys-box { margin-left: 0; }
  .rv-keys-box > summary { min-height: 44px; }
  .rv-play, .rv-icon-btn { width: 44px; height: 44px; }
  .rv-quick { min-height: 44px; }
  .rv-hl, .sd-delete { min-height: 44px; }
  .sd-pick { min-height: 40px; padding: 0 6px; }
  .sd-nudge { min-height: 40px; padding: 0 12px; }
  .sd-nudge-now { min-height: 40px; }
  .cs-tag { min-height: 44px; }
  .pf-avail { height: 36px; }
  .gc-lang > * { padding: 9px 10px; }
  .rv-keys-box[open] > .rv-keys { position: static; width: auto; max-width: none; margin-top: 8px; }
  .rv-side { margin-top: 20px; }
  .rv-now-line b { font-size: 30px; }
  .rv-now-sub { font-size: 24px; }
  .rv-game-details { margin-top: 24px; }
  .rv-shot { padding-top: 13px; padding-bottom: 13px; }
  .rv-detail { grid-template-columns: 1fr; }
  .rv-detail > * { padding: 18px 0; }
  .rv-sec, .rv-detail > .rv-sec:nth-child(2) { border-left: 0; border-top: 1px solid var(--steel-soft); }
  .rv-detail-head { border-bottom: 0; }
  .rv-stage-msg { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; min-height: 300px; padding: 56px 20px 32px; }
  .rv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .rv-stats div:nth-child(4), .rv-stats div:nth-child(7) { padding-left: 0; border-left: 0; }
  .rv-stats dd { font-size: 24px; }
  .rv-coach-row { grid-template-columns: 1fr; }
  .rv-coach-actions { justify-content: flex-start; }
}

/* ================================================================ HIGHLIGHTS: moments the goalie chose to keep
   A personal selection, not a system success state: ice white and a star, a small green Crease Line accent,
   no gold, no hearts, no celebration. */
.rv-hl { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin-top: 16px; padding: 0 4px;
  background: transparent; border: 0; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 13.5px; }
.rv-hl:hover { color: var(--ink); }
.rv-hl svg { width: 15px; height: 15px; flex: none; stroke-width: 1.8; }
.rv-hl .is-on { display: none; }
.rv-hl.is-on { color: var(--ink); }
.rv-hl.is-on .is-on { display: inline; }
.rv-hl.is-on .is-off { display: none; }
.rv-hl.is-on svg { color: var(--ink); }
.rv-hl-remove { color: var(--ink-3); }
.rv-hl.is-on:hover .rv-hl-remove { color: var(--text-2); }
.rv-hl:disabled { cursor: progress; opacity: .6; }
.rv-hl-static { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.rv-hl-static svg { width: 14px; height: 14px; }

/* Home */
.hl-label { display: inline-flex; align-items: center; gap: 10px; }
.hl-label svg { width: 17px; height: 17px; color: var(--ink); }
.highlights { margin-top: var(--space-8); }
.hl-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.hl-card { position: relative; display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.hl-frame { aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 10px; }
.hl-frame .still { filter: brightness(.84) saturate(.9); }
a.hl-card:hover .hl-frame .still.is-ready { filter: brightness(.97) saturate(.95); }
.hl-watch { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px;
  border-radius: var(--radius-tag); background: rgba(8, 9, 10, .72); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.hl-watch svg { width: 11px; height: 11px; fill: currentColor; }
a.hl-card:hover .hl-watch { background: rgba(8, 9, 10, .88); }
.hl-title { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.hl-meta { font-size: 13px; }
.hl-invite { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; margin-top: var(--space-7); padding: 18px 0; border-top: 1px solid var(--steel-soft); border-bottom: 1px solid var(--steel-soft); }
.hl-invite .hl-label { font-size: 18px; color: var(--ink-2); }
.hl-invite .hl-label svg { color: var(--ink-2); width: 15px; height: 15px; }
.hl-invite p { color: var(--text-2); font-size: 15px; }
.hl-invite .text-link { margin-left: auto; }

/* Library */
.hl-game { margin-top: 34px; }
.hl-grid { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--steel-soft); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 22px; }
.hl-card.is-gone .hl-meta { color: var(--ink-2); line-height: 1.4; }
.hl-card.is-gone .rv-remove { justify-self: start; margin-top: 6px; }
.hl-empty { padding: 36px 0; border-top: 1px solid var(--steel); display: grid; gap: 14px; justify-items: start; }
.hl-empty p { color: var(--text-2); max-width: 56ch; }

@media (max-width: 1080px) {
  .hl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}
@media (max-width: 760px) {
  .highlights { margin-top: 44px; }
  .hl-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; scroll-padding-inline: 16px; }
  .hl-row::-webkit-scrollbar { display: none; }
  .hl-row li { flex: 0 0 82%; scroll-snap-align: start; }
  .hl-title { font-size: 21px; }
  .hl-invite { margin-top: 40px; }
  .hl-invite .text-link { margin-left: 0; }
  .hl-grid { grid-template-columns: 1fr; }
}

/* ================================================================ toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: var(--radius-btn); background: var(--ink); color: var(--canvas); font-weight: 600; font-size: 14px; box-shadow: var(--shadow); transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================ responsive */
@media (max-width: 1320px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-side { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
}
@media (max-width: 1080px) {
  .gc-shell { --gc-side-w: 76px; grid-template-columns: var(--gc-side-w) minmax(0, 1fr); }
  .gc-side .gc-brand span, .gc-account-text { display: none; }
  .gc-nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gc-side .gc-brand { margin: 0 auto 46px; }
  .gc-side .gc-brand .crease-mark { width: 16px; height: 22px; }
  .gc-nav a { justify-content: center; padding: 0; }
  .gc-nav a[aria-current="page"]::before { left: 10px; }
  .gc-account { margin: auto 12px 0; padding: 16px 0 0; justify-content: center; }
  .coach-layout { grid-template-columns: 1fr; }
  .coach-layout > aside { order: -1; }
  .person-row { flex-wrap: wrap; }
  .intro { grid-template-columns: 1fr; gap: 40px; padding-bottom: 52px; }
  .to-do { max-width: 560px; }
  .home-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { aspect-ratio: 16 / 9; }
  .recent-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 760px) {
  body.gc { font-size: 15px; }
  .gc-header-inner { height: 56px; gap: 12px; padding: 0 16px; }
  .gc-shell { --gc-side-w: 0px; display: block; }
  .gc-side { position: sticky; top: 0; z-index: 40; height: 56px; flex-direction: row; align-items: center; padding: 0 16px; border-right: 0; border-bottom: 1px solid var(--steel-soft); background: var(--canvas); }
  .gc-side .gc-brand { margin: 0; }
  .gc-side .gc-brand span { display: inline; }
  .gc-side .gc-brand .gc-brand-tag { display: none; }
  .gc-side .gc-brand { font-size: 23px; }
  .gc-side .gc-brand .crease-mark { width: 11px; height: 15px; }
  .gc-account { margin: 0 0 0 auto; padding: 0; border: 0; }
  .gc-avatar { width: 32px; height: 32px; font-size: 13px; }
  .gc-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: #0D0F10; border-top: 1px solid var(--steel-soft); }
  .gc-nav a { flex-direction: column; justify-content: center; gap: 4px; height: 54px; padding: 0 6px; min-width: 60px; font-size: 11.5px; font-weight: 500; }
  .gc-nav a span { display: inline; position: static; width: auto; height: auto; clip: auto; }
  .gc-nav svg { width: 20px; height: 20px; }
  .gc-nav a[aria-current="page"] { background: transparent; }
  .gc-nav a[aria-current="page"]::before { left: 50%; top: 0; bottom: auto; width: 18px; height: 6px; margin-left: -9px; border-left: 0; border-top: 2px solid var(--green); }
  .gc-main, .gc-main.home { padding: 26px 16px 110px; }
  .form-grid, .choices { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; }
  .empty .btn-lg { width: 100%; }
  .toast { bottom: auto; top: 68px; transform: translate(-50%, -12px); }
  .toast.show { transform: translate(-50%, 0); }

  .headline { font-size: clamp(48px, 15vw, 72px); }
  .intro { gap: 36px; padding-bottom: 40px; }
  .intro-greeting { font-size: clamp(38px, 11vw, 48px); }
  .intro-ask { font-size: 22px; margin-top: 12px; }
  .intro-lead { font-size: 15px; margin-top: 10px; }
  .intro-main .btn-lg { margin-top: 22px; }
  .label { font-size: 20px; }
  /* the phone hero: the still edge to edge, the game beneath it (text over a small picture is unreadable) */
  .hero { aspect-ratio: auto; margin: 0 -16px; border-radius: 0; background: transparent; }
  .hero-still { position: relative; aspect-ratio: 16 / 9; }
  .hero-scrim { display: none; }
  .hero-body { position: static; flex-direction: column; align-items: stretch; gap: 18px; padding: 16px 16px 0; }
  .hero-title { font-size: 38px; text-shadow: none; }
  .hero-side { align-items: flex-start; text-align: left; }
  .hero .scoreline { font-size: 64px; justify-content: flex-start; text-shadow: none; }
  .hero .numbers { justify-content: flex-start; }
  .hero .numbers div { align-items: flex-start; }
  .hero .feature-cta { width: 100%; }
  .home-side { grid-template-columns: 1fr; margin-top: 40px; }
  .numbers dd { font-size: 38px; }
  .recent { margin-top: 48px; }
  .recent-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; scroll-padding-inline: 16px; }
  .home-head { margin-bottom: 18px; }
  .to-do { margin-top: 40px; max-width: none; }
  .recent-row::-webkit-scrollbar { display: none; }
  .recent-row li { flex: 0 0 76%; scroll-snap-align: start; }
  .first-steps ol { grid-template-columns: 1fr; gap: 24px; }
  .section-bar .text-link { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .recent-game:hover { transform: none; }
}

/* ================================================================ SHOT DETAILS: result, rebound, shot origin, puck target
   Line-art rink and net in steel; the only strong colour is the reviewer's own selection (green Crease Line accent),
   a goal keeps its goal red. Both diagrams are drawn from the goalie's position, like footage from behind the net. */
.rv-detail.sd { display: block; border-top: 1px solid var(--steel); }
.rv-detail.sd > * { padding: 0; }
.sd-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 16px 0 10px; border-bottom: 1px solid var(--steel-soft); }
.sd-head-id { flex: 1 1 260px; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.sd-title { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; letter-spacing: .005em; line-height: 1; color: var(--ink); }
.sd-meta { font-size: 13px; color: var(--ink-2); }
.sd-head-actions { display: flex; align-items: center; gap: 4px 18px; }
.sd-head .rv-hl, .sd-head .rv-hl-static { margin-top: 0; }
/* Delete shot: the one control that removes a mark made by mistake. It sits with the shot it belongs to, reads as
   destructive, and stays a full touch target on a phone. */
.sd-delete { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; background: none; border: 0; color: var(--ink-2);
  font: inherit; font-size: 13px; cursor: pointer; transition: color .15s var(--ease); }
.sd-delete:hover { color: var(--goal); }
.sd-delete svg { width: 14px; height: 14px; }
.sd-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(250px, .85fr); }
.sd-col { min-width: 0; padding: 18px 26px 20px; border-left: 1px solid var(--steel-soft); }
.sd-col:first-child { padding-left: 0; border-left: 0; }
.sd-col .rv-sec-title { margin-bottom: 4px; color: var(--ink); }
.sd-help { margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.sd-gap { margin-top: 22px; }
.sd-seg { display: flex; }
.sd-seg .rv-seg-btn { flex: 1; min-height: 44px; padding: 0 8px; white-space: nowrap; }

.sd-rink { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 12px; overflow: visible; }
.sd-zone { fill: rgba(241, 243, 245, .035); stroke: var(--steel); stroke-width: 1.2; cursor: pointer; transition: fill .12s var(--ease); }
.sd-zone:hover { fill: rgba(241, 243, 245, .09); }
.sd-zone.is-on { fill: rgba(242, 217, 59, .16); stroke: var(--green); stroke-width: 2; }
.sd-rink-lines { fill: none; stroke: #3A4145; stroke-width: 1.2; pointer-events: none; }
.sd-rink-lines .sd-blue { stroke: var(--ink-3); stroke-width: 3; }
.sd-dot { fill: var(--ink-3); pointer-events: none; }
.sd-rink-nums text { fill: var(--ink); font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700;
  text-anchor: middle; pointer-events: none; }
.sd-rink-side { fill: var(--ink-2); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }

.sd-picks { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.sd-pick { min-height: 30px; padding: 0 2px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.sd-pick b { margin-right: 4px; color: var(--ink); font-family: var(--font-display); font-stretch: condensed; font-size: 15px; }
.sd-pick:hover:not(:disabled) { color: var(--ink); }
.sd-pick[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--green); }
.sd-pick:disabled { opacity: .4; cursor: default; }
.sd-unknown { color: var(--ink-3); }

/* the net opening from the goalie's side: posts and crossbar framing a 3 x 3 grid */
.sd-net { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(58px, auto));
  max-width: 380px; margin: 0 auto 10px; border: 5px solid #3A4145; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(45deg, rgba(241, 243, 245, .025) 0 1px, transparent 1px 9px),
              repeating-linear-gradient(-45deg, rgba(241, 243, 245, .025) 0 1px, transparent 1px 9px); box-shadow: 0 5px 0 -3px var(--steel); }
.sd-cell { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 6px 4px; background: transparent; color: var(--text-2);
  border: 0; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); font: inherit; cursor: pointer; }
.sd-cell:nth-child(3n) { border-right: 0; }
.sd-cell b { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; line-height: 1; color: var(--ink); }
.sd-cell span { font-size: 11px; line-height: 1.2; text-align: center; }
.sd-cell:hover:not(:disabled) { background: rgba(241, 243, 245, .06); color: var(--ink); }
.sd-cell[aria-pressed="true"] { position: relative; background: rgba(242, 217, 59, .16); color: var(--ink); box-shadow: inset 0 0 0 2px var(--green); }
.sd-cell:focus-visible { outline-offset: -4px; }
.sd-cell:disabled { cursor: default; opacity: .35; }
.sd-net-note { margin: 0 0 8px; text-align: center; font-size: 13px; color: var(--ink-2); }
.sd-target .sd-picks { justify-content: center; }

.sd-readonly { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 16px 0; }
.sd-readonly div { padding: 0 18px; border-left: 1px solid var(--steel-soft); }
.sd-readonly div:first-child { padding-left: 0; border-left: 0; }
.sd-readonly dt { font-size: 12px; color: var(--ink-2); }
.sd-readonly dd { margin: 4px 0 0; color: var(--ink); }

.sd-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 14px 0 4px;
  border-top: 1px solid var(--steel-soft); }
.sd-foot .rv-detail-actions { margin-top: 6px; }
.sd-time { display: grid; gap: 6px; margin-bottom: 6px; }
.sd-time-value { font-family: var(--font-display); font-stretch: condensed; font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sd-time-value.is-moved { color: var(--amber); }
/* nudging is a utility: four compact steps in one strip, and a text action to take the video's own position */
.sd-time-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sd-nudge { min-height: 28px; padding: 0 8px; background: transparent; border: 1px solid var(--steel); border-radius: 0; color: var(--text-2);
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; margin-right: -1px; }
.sd-nudge:first-child { border-radius: 4px 0 0 4px; }
.sd-nudge:nth-child(4) { border-radius: 0 4px 4px 0; margin-right: 6px; }
.sd-nudge:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-2); position: relative; }
.sd-nudge:disabled { opacity: .45; cursor: default; }
.sd-nudge-now { border: 0; padding: 0; margin: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.sd-nudge-now:hover:not(:disabled) { color: var(--ink); }
.sd-clip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--text-2); }
.sd-clip-state { display: inline-flex; align-items: center; gap: 4px; }
.sd-clip-state svg { width: 14px; height: 14px; }
.sd-clip.is-ready .sd-clip-state { color: var(--ink); }
.sd-clip.is-outdated .sd-clip-state { color: var(--amber); }
.sd-clip.is-none .sd-clip-state { color: var(--ink-3); }
.sd-clip-btn { padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sd-clip-btn:disabled { color: var(--ink-3); cursor: progress; text-decoration: none; }
.sd-clip-error { flex-basis: 100%; color: var(--goal); font-size: 12px; }
.sd-clip-error:empty { display: none; }
.sd-save { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.sd-status { font-size: 13px; color: var(--amber); }
.sd-save .btn { min-width: 132px; }
.sd-save .btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 1180px) {
  .sd-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sd-result { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--steel-soft); }
  .sd-result .sd-seg { max-width: 460px; }
}
@media (max-width: 760px) {
  .sd-body { grid-template-columns: 1fr; }
  .sd-head .sd-delete { min-height: 44px; }
  .sd-col { padding: 16px 0; border-left: 0; border-top: 1px solid var(--steel-soft); }
  .sd-col:first-child { border-top: 0; }
  .sd-readonly { grid-template-columns: 1fr; gap: 12px; }
  .sd-readonly div { padding: 0; border-left: 0; }
  .sd-save { width: 100%; }
  .sd-save .btn { flex: 1; min-width: 0; }
  .sd-status { flex-basis: 100%; text-align: right; }
}
.sd-rink-mark { fill: var(--ink-3); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.sd-net-sides { display: flex; justify-content: space-between; max-width: 380px; margin: -4px auto 10px; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ================================================================ CONFIRMATION DIALOG
   The app's own confirmation, so a destructive action always names itself and says what it changes. */
.confirm { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--steel); border-radius: var(--radius-card);
  background: var(--surface-1); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.confirm::backdrop { background: rgba(8, 9, 10, .72); }
.confirm-title { font-family: var(--font-display); font-stretch: condensed; font-size: 28px; font-weight: 700;
  letter-spacing: .005em; line-height: 1.05; }
.confirm-text { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
/* Every destructive action in the workspace is decided here, including on a phone, so both
   answers stay full-size touch targets rather than the 36px a small button would give. */
.confirm-actions .btn { min-width: 120px; min-height: 44px; }
@media (max-width: 480px) {
  .confirm-actions .btn { flex: 1; min-width: 0; }
}

/* ================================================================ SHOT REEL
   The condensed marked-shot video. A main output of reviewing a game, so it reads like the game summary beside it:
   one heading, one line of facts, one line of plain language, then the actions. */
.rv-reel { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--steel); }
.rv-reel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; }
.rv-reel-meta { font-size: 14px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rv-reel-text { margin-top: 10px; max-width: 74ch; color: var(--text-2); }
.rv-reel-error:empty, [data-reel-error]:empty { display: none; }
.rv-reel-stage { margin-top: 18px; }
.rv-reel-stage .rv-video { width: 100%; display: block; background: #000; border-radius: 6px; }
.rv-reel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.rv-reel[data-running] .rv-reel-meta { color: var(--amber); }
@media (max-width: 480px) {
  .rv-reel-actions .btn { width: 100%; }
}

/* ================================================================ COACH REVIEW STUDIO (Phase D)
   The clip is the page. Tools sit on the clip's edge as quiet text-and-icon buttons; the coaching panel is one narrow
   column of type. Only two things ever get colour: the coach's own marks on the clip, and the recording state. */
.gc-main.studio { padding-top: 18px; padding-bottom: 60px; }
.cs-head .back-link { margin-bottom: 6px; }
.cs-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; }
.cs-id { min-width: 0; }
.cs-title { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 3vw, 44px);
  line-height: .95; letter-spacing: -.004em; font-variant-numeric: tabular-nums; }
.cs-title-sep { color: var(--ink-3); font-weight: 500; margin: 0 2px; }
.cs-title-time { color: var(--ink-2); }
.cs-sub { margin-top: 6px; }
.cs-shot-labels { text-transform: none; letter-spacing: 0; }
.cs-head-end { display: flex; align-items: center; gap: 12px; }
.cs-save { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cs-save::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.cs-save[data-tone="saved"]::before { background: var(--gold); }
.cs-save[data-tone="saving"]::before, .cs-save[data-tone="dirty"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.cs-save[data-tone="failed"]::before { background: var(--goal); }
.cs-save[data-tone="saved"] { color: var(--ink); }
.cs-save[data-tone="saving"], .cs-save[data-tone="dirty"] { color: var(--ink-2); }
.cs-save[data-tone="failed"] { color: var(--goal); }
.cs-save-retry { background: none; border: 1px solid var(--goal); border-radius: var(--radius-btn); color: var(--goal); font: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer; }

/* what the goalie said about the shot itself, under the title */
.cs-shot-labels { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cs-shot-label b { color: var(--ink-2); font-weight: 600; }

/* previous / next shot: the coach walks the game without going back to the list */
.cs-shotnav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.cs-shotnav-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--steel); border-radius: var(--radius-btn);
  background: transparent; color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.cs-shotnav-btn svg { width: 15px; height: 15px; }
.cs-shotnav-btn:hover { border-color: var(--ink-2); background: var(--surface-raised); color: var(--ink); }
.cs-shotnav-btn.is-off { opacity: .32; pointer-events: none; }
.cs-shotnav-btn[data-busy] { opacity: .5; pointer-events: none; }
.cs-shotnav-count { font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap; }

.cs-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px); gap: 0 34px; margin-top: 14px; align-items: start; }
.cs-film { min-width: 0; }

/* the stage: the video, the drawing layer over it, and nothing else */
.cs-stage { position: relative; background: #000; border-radius: 8px 8px 0 0; overflow: hidden; aspect-ratio: 16 / 9; max-height: calc(100vh - 300px); min-height: 240px; outline: none; }
.cs-stage:has(+ .cs-session), .cs-stage:last-child { border-radius: 8px; }
.cs-stage.is-empty { display: none; }
.cs-stage:fullscreen { border-radius: 0; max-height: none; aspect-ratio: auto; width: 100vw; height: 100vh; }
.cs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.cs-overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.cs-overlay[data-tool="select"] { cursor: default; }
.cs-stage-error { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 10px; padding: 32px; background: rgba(8, 9, 10, .92); }
.cs-fs { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-btn);
  background: rgba(8, 9, 10, .6); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .15s var(--ease); }
.cs-fs svg { width: 18px; height: 18px; }
.cs-stage:hover .cs-fs, .cs-fs:focus-visible { opacity: 1; }
.cs-fs:hover { color: var(--ink); background: rgba(8, 9, 10, .85); }
.cs-rec-badge { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border-radius: var(--radius-tag);
  background: rgba(8, 9, 10, .78); color: var(--ink); font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.cs-rec-badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--goal); animation: cs-blink 1.2s steps(2, start) infinite; }
.cs-rec-badge.is-paused i { animation: none; background: var(--amber); }
@keyframes cs-blink { to { visibility: hidden; } }

/* tools: one quiet strip under the film */
.cs-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 12px 0 2px; }
.cs-tool-group { display: flex; align-items: center; gap: 2px; }
.cs-tool-group + .cs-tool-group { padding-left: 14px; border-left: 1px solid var(--steel-soft); }
.cs-history .cs-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-tool { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-btn);
  color: var(--ink-2); cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 500; }
.cs-tool svg { width: 17px; height: 17px; flex: none; stroke-width: 1.8; }
.cs-tool:hover:not(:disabled) { color: var(--ink); background: rgba(241, 243, 245, .04); }
.cs-tool[aria-pressed="true"] { color: var(--ink); border-color: var(--steel); background: var(--surface-raised); box-shadow: inset 0 -2px 0 var(--green); }
.cs-tool:disabled { opacity: .35; cursor: default; }
.cs-tool.is-puck[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--ink); }
.cs-tool.is-actual[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--amber); }
.cs-tool.is-ideal[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--green); }
.cs-tool-text { color: var(--text-2); border-color: var(--steel); }
.cs-tool:focus-visible { outline-offset: -2px; }

/* scrubber and transport: precise, small, tabular */
/* inset by margins, never borders or padding: studio.js maps the pointer through this element's own box */
.cs-scrub { position: relative; height: 28px; margin: 0 14px; background: #0A0C0D; box-shadow: -14px 0 0 #0A0C0D, 14px 0 0 #0A0C0D; cursor: pointer; touch-action: none; }
.cs-scrub-track { position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--steel); }
.cs-scrub-head { position: absolute; top: 4px; left: 0; width: 2px; height: 18px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.cs-scrub-shot { position: absolute; top: 7px; width: 2px; height: 12px; margin-left: -1px; background: var(--goal); pointer-events: none; }
.cs-scrub-mark { position: absolute; top: 8px; width: 6px; height: 10px; margin-left: -3px; padding: 0; border: 0; background: var(--green); cursor: pointer; }
.cs-scrub-mark::before { content: ""; position: absolute; inset: -6px -6px; }
.cs-transport { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 2px 10px 8px; background: #0A0C0D; border-radius: 0 0 8px 8px; }
.cs-transport-main { display: flex; align-items: center; gap: 4px; }
.cs-play, .cs-step { display: inline-grid; place-items: center; width: 40px; height: 38px; background: transparent; border: 0; border-radius: var(--radius-btn); color: var(--ink); cursor: pointer; }
.cs-play { width: 44px; }
.cs-play svg, .cs-step svg { width: 18px; height: 18px; stroke-width: 2; }
.cs-play .is-pause { display: none; }
.cs-play.is-playing .is-play { display: none; }
.cs-play.is-playing .is-pause { display: inline; }
.cs-play:hover, .cs-step:hover { background: rgba(241, 243, 245, .07); }
.cs-step { color: var(--text-2); }
.cs-play .is-play svg { fill: currentColor; }
.cs-time { margin-left: 12px; font-family: var(--font-display); font-stretch: condensed; font-size: 18px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cs-time-sep { margin: 0 6px; color: var(--ink-3); }
.cs-time-frame { margin-left: 12px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.cs-speed { display: inline-flex; gap: 2px; }
.cs-speed-btn { min-height: 32px; padding: 0 9px; background: transparent; border: 0; border-radius: 5px; color: var(--ink-2); cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-speed-btn:hover { color: var(--ink); background: rgba(241, 243, 245, .06); }
.cs-speed-btn[aria-pressed="true"] { color: var(--ink); background: rgba(241, 243, 245, .1); }
.cs-keys { margin-top: 10px; }

/* recording: the one place strong colour is allowed, because it is system state */
.cs-rec { margin-top: 16px; padding: 14px 0 12px; border-top: 1px solid var(--steel-soft); }
.cs-rec-idle { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cs-rec-start { gap: 12px; }
.cs-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--goal); flex: none; }
.cs-rec-dot.is-live { animation: cs-blink 1.2s steps(2, start) infinite; }
.cs-rec[data-state="paused"] .cs-rec-dot.is-live { animation: none; background: var(--amber); }
.cs-rec-help { max-width: 52ch; font-size: 13px; color: var(--ink-2); }
.cs-rec-live, .cs-rec-done { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.cs-rec-state { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.cs-rec[data-state="recording"] .cs-rec-state { color: var(--goal); }
.cs-rec[data-state="paused"] .cs-rec-state { color: var(--amber); }
.cs-rec[data-state="saving"] .cs-rec-state { color: var(--ink-2); }
.cs-rec[data-state="saved"] .cs-rec-state { color: var(--ink); }
.cs-rec[data-state="failed"] .cs-rec-state { color: var(--goal); }
.cs-rec-clock { font-variant-numeric: tabular-nums; }
.cs-rec-saved { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.cs-rec-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-rec-error { margin-top: 8px; }

/* the coaching panel: type on the dark canvas, divided by rules */
.cs-panel { display: grid; gap: 22px; padding-top: 6px; }
.cs-sec { padding-top: 14px; border-top: 1px solid var(--steel); }
.cs-sec:first-child { border-top: 0; padding-top: 0; }
.cs-sec .rv-sec-title { margin-bottom: 10px; color: var(--ink); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag { min-height: 34px; padding: 0 11px; background: transparent; border: 1px solid var(--steel); border-radius: var(--radius-btn); color: var(--text-2); cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease); }
.cs-tag:hover { color: var(--ink); border-color: var(--ink-2); }
.cs-tag[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-color: var(--green); background: rgba(242, 217, 59, .1); }
.cs-seg { display: flex; }
.cs-seg .rv-seg-btn { flex: 1; min-height: 42px; }
.cs-seg .rv-seg-btn.is-warn[aria-pressed="true"] { background: rgba(227, 174, 75, .12); box-shadow: inset 0 -2px 0 var(--amber); }
.cs-key { margin-top: 12px; }
.cs-summary { width: 100%; min-height: 150px; padding: 12px 14px; border-radius: var(--radius-input); border: 1px solid var(--steel); background: var(--surface-1); color: var(--ink); resize: vertical; line-height: 1.55; font-size: 15px; }
.cs-summary:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(242, 217, 59, .12); }
.cs-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.cs-actions { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--steel); }
.cs-actions [data-complete] { order: -1; min-height: 50px; }
.cs-actions .btn { width: 100%; }

/* watch page */
.cs-watch-state { display: flex; align-items: baseline; gap: 12px; }
.cs-watch-date { font-size: 13px; color: var(--ink-2); }
.cs-watch-state .rv-status-label { display: inline-flex; align-items: center; gap: 7px; }
.cs-watch-state .rv-status.is-done .rv-status-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.cs-watch-state .rv-status.is-open .rv-status-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.cs-session { padding: 14px 16px 14px; background: #0A0C0D; border-radius: 0 0 8px 8px; }
.cs-session-main { display: flex; align-items: center; gap: 18px; }
.cs-session-play { flex: none; gap: 12px; }
.cs-session-play svg { fill: currentColor; }
.cs-session-line { position: relative; flex: 1; height: 30px; cursor: pointer; touch-action: none; }
.cs-session-track { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--steel); }
.cs-session-fill { position: absolute; left: 0; top: 14px; height: 2px; width: 0; background: var(--green); }
.cs-session-head { position: absolute; top: 6px; left: 0; width: 2px; height: 18px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.cs-session-help { margin-top: 12px; max-width: 64ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cs-panel-read .cs-sec .rv-sec-title { color: var(--ink-2); }
.cs-read-assessment, .cs-read-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-read-summary { font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--ink); white-space: pre-wrap; }
/* the watch page leads with the coach: who, then their words at reading size, then the facts */
.cs-panel-read { gap: 26px; }
.cs-coach-by { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cs-coach-by .person-mark { width: 40px; height: 40px; font-size: 18px; }
.cs-coach-by strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.cs-coach-by span { font-size: 13px; color: var(--ink-2); }
.cs-watch .notice.warn { margin-bottom: 14px; }

/* the goalie's shot detail: delivered coach reviews */

.sd-review-text { grid-column: 1; font-size: 15.5px; line-height: 1.6; font-weight: 400; color: var(--text-2); white-space: pre-wrap; }

/* the coach's game page */
.cg .rv-head { display: block; }
.cg .rv-head .back-link { margin: 0 0 8px; }
.rv-head-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; }
.cg .rv-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.cg .rv-id .rv-meta, .cg .rv-id .cg-progress { flex-basis: 100%; }
.cg .rv-title .vs { text-transform: none; letter-spacing: 0; }
.rv-head-end { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.rv-head-coach { display: inline-flex; align-items: center; gap: 10px; }
.rv-head-coach-label { font-size: 13px; color: var(--ink-2); }
.cg .cg-note { margin-top: 16px; }
.cg .cg-summary { margin-top: 24px; }
.cg-request { align-items: center; }
.cg-note { margin: 12px 0 0; }
.cg-period { margin-top: 8px; }
.cg-empty { padding: 28px 0; color: var(--text-2); max-width: 60ch; }
.cg-shots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--steel); }
.cg-shot-link { position: relative; display: grid; grid-template-columns: 44px 76px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1fr) auto; align-items: center; gap: 10px 18px;
  padding: 14px 8px 14px 22px; border-bottom: 1px solid var(--steel-soft); color: var(--ink); text-decoration: none; }
.cg-shot-link:hover { background: rgba(241, 243, 245, .03); color: var(--ink); }
.cg-shot.is-done .cg-shot-link::before { content: ""; position: absolute; left: 6px; top: 14px; width: 2px; height: 20px; background: var(--ink); }
.cg-shot.is-draft .cg-shot-link::before { content: ""; position: absolute; left: 6px; top: 14px; width: 2px; height: 20px; background: var(--ink-3); }
.cg-shot-no { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cg-shot.is-done .cg-shot-no { color: var(--ink); }
.cg-shot-t { font-family: var(--font-display); font-stretch: condensed; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cg-shot-out { font-size: 14px; font-weight: 600; }
.cg-shot-out .is-goal { color: var(--goal); }
.cg-shot-out .is-none { color: var(--ink-3); }
.cg-shot-clip { font-size: 13px; color: var(--ink-3); }
.cg-noclip { color: var(--amber); }
.cg-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.cg-state svg { width: 14px; height: 14px; }
.cg-state.is-done { color: var(--ink); }
.cg-state.is-draft { color: var(--ink); }
.cg-shot-go { display: inline-flex; align-items: center; gap: 6px; justify-self: end; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.cg-shot-go svg { width: 16px; height: 16px; transition: transform .15s var(--ease); }
.cg-shot-link:hover .cg-shot-go { color: var(--ink); }
.cg-shot-link:hover .cg-shot-go svg { transform: translateX(2px); }

@media (max-width: 1180px) {
  .cg-shot-link { grid-template-columns: 44px 76px minmax(0, 1fr) auto; }
  .cg-shot-clip, .cg-shot-state { grid-column: 3; }
}
/* Tablet landscape (an iPad is a real coaching desk). A narrower coaching column keeps the frame and the words
   the coach is writing about it on screen together; stacking them put the clip a full screen away. */
@media (max-width: 1180px) and (min-width: 901px) {
  .cs-body { grid-template-columns: minmax(0, 1fr) clamp(258px, 30vw, 320px); gap: 0 22px; }
  .cs-stage { max-height: calc(100vh - 210px); }
  .cs-tools { gap: 6px 14px; }
}
@media (max-width: 900px) {
  .cs-body { grid-template-columns: 1fr; gap: 26px; }
  .cs-stage { max-height: none; }
  .cs-panel { padding-top: 0; display: flex; flex-direction: column; }
  /* Stacked, the coach scrolls away from the clip to write. The box they came for goes first; the tag list, which
     is long and read rather than written, goes after it. */
  .cs-sec-notes { order: -1; border-top: 0; padding-top: 0; }
  .cs-sec:first-child { border-top: 1px solid var(--steel); padding-top: 14px; }
  .cs-actions { order: 1; }
}
@media (max-width: 760px) {
  .gc-main.studio { padding: 12px 16px 110px; }
  .cs-title { font-size: 30px; }
  /* the shot walker keeps its arrows and its count; the words go, so it never pushes the header wide */
  .cs-shotnav { width: 100%; justify-content: space-between; }
  .cs-shotnav-btn { min-height: 44px; min-width: 44px; padding: 0 14px; justify-content: center; }
  .cs-shotnav-btn span { display: none; }
  .cs-stage { margin: 0 -16px; border-radius: 0; min-height: 0; }
  .cs-scrub { margin: 0; box-shadow: -16px 0 0 #0A0C0D, 16px 0 0 #0A0C0D; }
  .cs-transport, .cs-session { margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 0; }
  .cs-stage:has(+ .cs-session), .cs-stage:last-child { border-radius: 0; }
  .cs-tools { gap: 4px 12px; }
  .cs-tool-group + .cs-tool-group { padding-left: 10px; }
  .cs-tool { min-width: 44px; min-height: 44px; padding: 0 8px; justify-content: center; }
  .cs-tool span { display: none; }
  .cs-transport { flex-direction: column; align-items: stretch; }
  .cs-transport-main { justify-content: space-between; }
  .cs-play, .cs-step { min-height: 48px; }
  .cs-time { margin-left: 0; }
  .cs-speed { width: 100%; }
  .cs-speed-btn { flex: 1; min-height: 44px; }
  .cs-keys { display: none; }
  .cs-rec-idle .btn { width: 100%; }
  .cs-session-main { flex-wrap: wrap; }
  .cs-session-play { width: 100%; }
  
  
  .cg-shot-link { grid-template-columns: 40px minmax(0, 1fr) auto; padding-left: 20px; }
  .cg-shot-t, .cg-shot-out, .cg-shot-clip, .cg-shot-state { grid-column: 2; }
  .cg-shot-go { grid-column: 3; grid-row: 1 / span 5; }
}

/* ================================================================ PROGRESS and the profile record: facts, by season
   The season's save % is the one large number; what it is counted over stands next to it in plain words; the
   facts it is made of are a quiet row; every game and every coaching observation leads back to footage. */
.gc-main.record { max-width: 1100px; }
.pg-block { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--steel); }
.pg-season:first-of-type .pg-block { margin-top: 8px; border-top: 0; }
.pg-season { margin-top: 10px; }
.pg-season .pg-block { margin-top: 30px; }
.pg-record { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: 24px 56px; align-items: start; padding-top: 18px; }
.pg-facts { align-self: start; padding-top: 10px; }
.pg-hero-value { font-family: var(--font-display); font-stretch: condensed; font-size: clamp(64px, 7vw, 108px); font-weight: 700; line-height: .85;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pg-hero-label { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pg-hero-last { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.pg-hero-last b { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 2px; }
.pg-hero-hint { margin-top: 8px; max-width: 36ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 22px 56px; margin: 0; padding-bottom: 6px; }
.pg-facts div { display: flex; flex-direction: column; gap: 6px; }
.pg-facts dt { order: 2; font-size: 13px; color: var(--ink-2); }
.pg-facts dd { order: 1; margin: 0; font-family: var(--font-display); font-stretch: condensed; font-size: 40px; font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
.pg-facts dd small { margin-left: 4px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
/* all time, once there is more than one season: the same record, smaller */
.pg-compact .pg-record { grid-template-columns: minmax(160px, .5fr) minmax(0, 2fr); gap: 20px 40px; }
.pg-compact .pg-hero-value { font-size: clamp(44px, 4.6vw, 64px); }
.pg-compact .pg-hero-hint { display: none; }
.pg-compact .pg-facts dd { font-size: 30px; }
.pg-games { list-style: none; margin: 16px 0 0; padding: 0; }
.pg-game { display: grid; grid-template-columns: 112px 70px minmax(0, 1.2fr) minmax(0, 1.4fr) auto 18px; align-items: center; gap: 10px 18px; padding: 12px 0;
  border-bottom: 1px solid var(--steel-soft); color: var(--ink); text-decoration: none; }
.pg-game-frame { aspect-ratio: 16 / 9; border-radius: 6px; }
.pg-game-frame .still { filter: brightness(.86) saturate(.9); }
.pg-game:hover .pg-game-frame .still.is-ready { filter: brightness(.96); }
.pg-game-frame .still-empty { font-size: 10px; letter-spacing: .08em; }
.pg-game-frame .still-empty span { padding: 6px 0 0 10px; }
.pg-game-frame .still-empty span::before { width: 5px; height: 11px; }
.pg-game:hover { background: rgba(241, 243, 245, .02); }
.pg-game > svg { width: 16px; height: 16px; color: var(--ink-3); }
.pg-game-title { font-family: var(--font-display); font-stretch: condensed; font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.pg-game-title .vs { color: var(--ink-3); margin-right: 4px; }
.pg-game-score { margin-left: 10px; color: var(--ink-2); font-weight: 600; }
.pg-game-facts { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-game-review { display: flex; justify-content: flex-end; font-size: 13px; color: var(--ink-2); white-space: nowrap; }

@media (max-width: 900px) {
  .pg-record, .pg-compact .pg-record { grid-template-columns: 1fr; gap: 18px; }
  .pg-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
}
@media (max-width: 760px) {
  .pg-game { grid-template-columns: 96px minmax(0, 1fr) 18px; }
  .pg-game-frame { grid-row: 1 / span 4; align-self: start; }
  .pg-game-date, .pg-game-title, .pg-game-facts, .pg-game-review { grid-column: 2; }
  .pg-evidence-shot:has(.pg-evidence-frame) { grid-template-columns: 96px minmax(0, 1fr); }
  
  .pg-hero-value { font-size: 64px; }
  .pg-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
  .pg-facts dd { font-size: 32px; }
}

/* ============================================================ LANGUAGE
   The EN | FR control, and the only place the sheet accounts for French running longer than English.
   Nothing else in the design changes with the locale. */
.gc-lang { display: inline-flex; align-items: center; gap: 2px; margin: 18px 30px 0; font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.gc-lang > * { padding: 5px 9px; border-radius: var(--radius-tag); text-decoration: none; line-height: 1; }
.gc-lang-on { color: var(--ink); background: rgba(241, 243, 245, .06); }
.gc-lang-off { color: var(--ink-3); }
.gc-lang-off:hover, .gc-lang-off:focus-visible { color: var(--ink); background: rgba(241, 243, 245, .04); }
.gc-header-end .gc-lang, .card .gc-lang { margin: 0; }

@media (max-width: 1080px) {
  .gc-lang { margin: 18px auto 0; flex-direction: column; gap: 0; }
  .gc-lang > * { padding: 4px 6px; }
}
@media (max-width: 760px) {
  .gc-lang { margin: 0 0 0 auto; flex-direction: row; gap: 2px; }
  .gc-side .gc-account { margin: 0 0 0 12px; }
  /* Five bottom tabs on a 375px screen. French labels are the longest the product has, so only they
     step down a size; English keeps the type it has always had. */
  .gc-nav a span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-locale="fr"] .gc-nav a { min-width: 0; padding: 0 2px; }
  body[data-locale="fr"] .gc-nav a span { font-size: 10.5px; }
}

/* Coaching record (Progress): what human coaches have delivered, game after game. */
.cr { margin-top: 34px; }
.cr-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.cr-counts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.cr-counts div { display: flex; align-items: baseline; gap: 6px; }
.cr-counts dd { margin: 0; font-family: var(--font-display); font-stretch: condensed; font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cr-counts dt { font-size: 12.5px; color: var(--ink-2); }

/* what to work on / what is working: the coach's tag, how often, and the shots it was said on */
.pg-coaching { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin-top: 22px; }
.pg-focus-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pg-theme { padding: 14px 0 6px; border-top: 1px solid var(--steel-soft); }
.pg-theme-name { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.pg-theme-count { margin-left: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pg-evidence { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.pg-evidence li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 14px; padding: 9px 0; border-top: 1px solid rgba(241, 243, 245, .05); }
.pg-evidence li:first-child { border-top: 0; }
.pg-evidence-shot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; color: var(--ink); text-decoration: none; }
.pg-evidence-shot:has(.pg-evidence-frame) { grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; }
.pg-evidence-frame { grid-row: 1 / span 3; aspect-ratio: 16 / 9; border-radius: 6px; align-self: start; }
.pg-evidence-frame .still { filter: brightness(.86) saturate(.9); }
.pg-evidence-shot:hover .pg-evidence-frame .still.is-ready { filter: brightness(.96); }
.pg-evidence-where { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pg-evidence-words { font-size: 14.5px; line-height: 1.5; font-weight: 400; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-evidence-links .text-link { font-size: 12.5px; }
.pg-evidence-shot:hover .text-link { color: var(--ink); }
.pg-evidence-watch { font-size: 12.5px; padding-top: 2px; }
.pg-evidence-more { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.cr-all { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--steel); }
.cr-all > summary { font-size: 14px; font-weight: 500; color: var(--text-2); }
.cr-all > summary::before { color: var(--ink-3); }
.cr-item-facts { display: flex; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.cr-item-facts span + span::before { content: "·"; margin: 0 7px; color: var(--ink-3); }
.cr-item-facts .is-good { color: var(--ink); }
.cr-item-facts .is-warn { color: var(--amber); }
.pg-foot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--steel-soft); max-width: 80ch; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.cr-empty-title { margin: 16px 0 6px; font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; }

.cr-list { margin: 0; padding: 0; list-style: none; display: grid; }
.cr-item { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--steel-soft); }
.cr-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.cr-item-who { margin: 0; font-size: 14px; }
.cr-item-where { margin: 0; font-size: 13px; color: var(--ink-2); }
.cr-item-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 2px 0 0; }
@media (max-width: 720px) {
  
  
  .cr-cols, .pg-coaching { grid-template-columns: minmax(0, 1fr); }
}

/* The goalie's private note on their own game page. */
.rv-note-text { width: 100%; min-width: 260px; resize: vertical; font: inherit; line-height: 1.5; }
.rv-edit-result .row.between { gap: 14px; margin-top: 8px; }

/* ================================================================ PROFESSIONAL PROFILES (goalie and coach)
   A page a person would send: identity first, then the sections a reader scans in order. Typography, one
   consistent width and hairline rules carry the hierarchy; the only framed surfaces are footage and open forms.
   Both profiles share every primitive below (.pf-*) and differ only in content order. */
.gc-main.pf { max-width: 1160px; padding-top: 34px; }
.pf-h { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; letter-spacing: .005em; color: var(--ink); }
.pf-section { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--steel); }
.pf-nav + .pf-section, .pf-nav + .pf-overview-section { margin-top: 28px; border-top: 0; }
.pf-overview-section .pf-record { padding-left: 0; border-left: 0; }
.pf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.pf-section-head .pf-h { flex: none; }
.pf-section-note { flex: 1 1 320px; font-size: 13.5px; color: var(--ink-2); max-width: 62ch; }
.pf-fine { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); max-width: 70ch; }

/* preview and viewer framing */
.pf-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px;
  padding: 10px 14px; border: 1px solid var(--steel); border-left: 3px solid var(--gold); border-radius: var(--radius-btn); font-size: 14px; color: var(--text-2); background: var(--surface-1); }
.pf-preview > span { display: inline-flex; align-items: center; gap: 8px; }
.pf-preview svg { width: 16px; height: 16px; color: var(--ink-2); }

/* identity */
.pf-hero { padding: 6px 0 34px; }
.pf-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.pf-hero-main { min-width: 0; max-width: 760px; }
.pf-hero .eyebrow { margin-bottom: 14px; }
.pf-name { font-family: var(--font-display); font-stretch: condensed; font-size: clamp(46px, 6.2vw, 84px); line-height: .9; font-weight: 700;
  letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.pf-name-pending { color: var(--ink-2); }
.pf-role { margin-top: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pf-line { margin-top: 8px; font-size: 17px; color: var(--text-2); }
.pf-line-quiet { color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.pf-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; padding-bottom: 6px; }

/* the in-page navigation: four or six anchors on one rule */
.pf-nav { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--steel); border-bottom: 1px solid var(--steel-soft); }
.pf-nav::-webkit-scrollbar { display: none; }
.pf-nav a { flex: none; padding: 13px 0; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.pf-nav a:hover { color: var(--ink); }

/* section-level editing: the presentation and its form share a slot; only one is shown */
.pf-form { margin-top: 10px; padding: 22px 24px 20px; border: 1px solid var(--steel); border-radius: var(--radius-card); background: #121518; }
.pf-form-title { margin-bottom: 18px; font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; letter-spacing: .005em; }
.pf-form .form-actions { margin-top: 18px; }
.pf-identity-form { margin-top: 28px; }
.pf-stat-inputs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pf-stat-inputs input { text-align: center; padding-left: 6px; padding-right: 6px; }
.pf-remove { color: var(--ink-3); }
.pf-remove:hover { color: var(--goal); }

/* overview: facts as a definition list, never a spreadsheet */
.pf-overview { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 28px 56px; align-items: start; }

.pf-record { display: grid; gap: 8px; justify-items: start; padding-left: 12px; border-left: 1px solid var(--steel-soft); }
.pf-record-title { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pf-record-line { font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* hockey résumé: the season is the anchor */
.pf-seasons, .pf-timeline, .pf-creds, .pf-services, .pf-games, .pf-clips, .pf-ask-list, .pf-sample-list { list-style: none; margin: 0; padding: 0; }
.pf-season, .pf-entry, .pf-cred, .pf-service { border-bottom: 1px solid var(--steel-soft); }
.pf-season:last-child, .pf-entry:last-child, .pf-cred:last-child, .pf-service:last-child { border-bottom: 0; }
.pf-season-view, .pf-entry-view, .pf-cred-view, .pf-service-view { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px 32px; align-items: start; padding: 22px 0; }
.pf-cred-view, .pf-service-view { grid-template-columns: minmax(0, 1fr) auto; }
.pf-season-year span, .pf-entry-when span { display: inline-block; font-family: var(--font-display); font-stretch: condensed; font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.pf-entry-when span { font-size: 18px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); padding-top: 4px; white-space: nowrap; }
.pf-season-team, .pf-entry-title, .pf-service-title { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.pf-season-level, .pf-entry-org { margin-top: 5px; font-size: 15px; color: var(--text-2); }
.pf-entry-levels { color: var(--ink-2); }
.pf-entry-text, .pf-service-text, .pf-season-notes { margin-top: 10px; max-width: 64ch; color: var(--text-2); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.pf-stats { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pf-stats div { display: flex; align-items: baseline; gap: 7px; }
.pf-stats dt { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pf-stats dd { margin: 0; font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-season-actions, .pf-item-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: .55; transition: opacity .15s var(--ease); }
.pf-season:hover .pf-season-actions, .pf-entry:hover .pf-item-actions, .pf-cred:hover .pf-item-actions, .pf-service:hover .pf-item-actions,
.pf-season-actions:focus-within, .pf-item-actions:focus-within { opacity: 1; }

/* credentials: one line each; no badge, no mark */
.pf-cred-view { padding: 16px 0; }
.pf-cred-title { font-size: 16px; }
.pf-cred-org { font-weight: 650; }
.pf-cred-year { margin-top: 4px; font-size: 13px; }

/* specialties: compact tags, one colour */
.pf-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-tags .tag { min-height: 32px; padding: 0 13px; font-size: 14px; color: var(--ink); }

/* services: an offering, described; no price and no purchase */
.pf-service-view { padding: 24px 0; }
.pf-service-details { margin-top: 12px; }
.pf-service-includes { margin-top: 8px; max-width: 64ch; color: var(--text-2); font-size: 14.5px; line-height: 1.55; white-space: pre-line; }

/* editorial text: the biography, the sample review */
.pf-prose { max-width: 66ch; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.pf-prose p { white-space: pre-line; }
.pf-prose p + p { margin-top: 14px; }

/* highlights: one dominant reel, then a restrained grid */
.pf-featured { margin: 0 0 30px; }
.pf-featured-stage { aspect-ratio: 16 / 9; border-radius: 10px; background: #000; }
.pf-featured-video { display: block; width: 100%; height: 100%; background: #000; }
.pf-featured-locked { position: relative; width: 100%; height: 100%; }
.pf-featured-note { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; border-radius: var(--radius-tag); background: rgba(8, 9, 10, .78);
  font-size: 13px; font-weight: 500; color: var(--ink); }
.pf-featured-caption { display: flex; align-items: baseline; gap: 8px 22px; flex-wrap: wrap; padding: 14px 2px 0; }
.pf-featured-kicker { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pf-featured-title { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.pf-featured-title .vs { font-size: .7em; }
.pf-clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.pf-clip-link { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
a.pf-clip-link:hover .pf-clip-frame .still.is-ready { filter: brightness(.97) saturate(.95); }
.pf-clip-frame { aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 8px; }
.pf-clip-frame .still { filter: brightness(.84) saturate(.9); }
.pf-clip-title { font-family: var(--font-display); font-stretch: condensed; font-size: 21px; font-weight: 700; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.pf-clip-meta { font-size: 12.5px; }
.pf-clip.is-private .pf-clip-frame { opacity: .6; }
.pf-clip.is-private .pf-clip-meta { color: var(--ink-3); }

/* games: rows by season, aligned columns, one word of state */
.pf-games-season + .pf-games-season { margin-top: 34px; }
.pf-year { font-family: var(--font-display); font-stretch: condensed; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.005em; padding-bottom: 12px; border-bottom: 1px solid var(--steel); font-variant-numeric: tabular-nums; }
.pf-game { display: grid; grid-template-columns: 76px minmax(200px, 1.3fr) minmax(90px, .6fr) minmax(160px, 1fr) 118px 132px; align-items: center; gap: 10px 22px;
  padding: 16px 0; border-bottom: 1px solid var(--steel-soft); }
.pf-games.is-viewer .pf-game { grid-template-columns: 76px minmax(200px, 1.3fr) minmax(90px, .6fr) minmax(160px, 1fr) 132px; }
.pf-game-date { font-size: 13px; }
.pf-game-opp { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.pf-game-opp .vs { font-size: .68em; margin-right: 2px; }
.pf-game-score { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.pf-game-score b { font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--ink-2); margin-left: 2px; }
.pf-game-score i, .pf-game-facts i { font-style: normal; font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: var(--ink-3); }
.pf-game-facts { font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pf-game-state { display: flex; justify-content: flex-start; }
.pf-game-action { display: flex; justify-content: flex-end; }
.pf-game-action .text-link { font-size: 14px; }
.pf-game.is-private .pf-game-opp, .pf-game.is-private .pf-game-score { color: var(--text-2); }
/* AVAILABLE and PRIVATE: one word, two tones; the owner's control and the reader's label share a look */
.pf-avail { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-tag); border: 1px solid var(--steel);
  background: transparent; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.pf-avail svg { width: 13px; height: 13px; }
.pf-avail.is-available { color: var(--ink); border-color: #4A5256; }
.pf-avail.is-private { color: var(--ink-2); border-color: var(--steel); }
button.pf-avail { cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
button.pf-avail:hover { border-color: var(--ink-2); color: var(--ink); }
button.pf-avail.is-available:hover { color: var(--ink); border-color: var(--ink-2); }
button.pf-avail:disabled { opacity: .6; cursor: progress; }

/* the coach's request to show a review as a sample: the goalie's decision, above the fold */
.pf-asks { margin-top: 6px; padding: 18px 0 4px; border-top: 1px solid var(--steel); }
.pf-ask { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--steel-soft); }
.pf-ask-text { flex: 1 1 380px; max-width: 70ch; font-size: 15px; color: var(--text-2); }
.pf-ask-text p + p { margin-top: 4px; }

/* sample coaching: the coach's own words, given room */
.pf-sample-review { display: grid; gap: 26px; max-width: 760px; }
.pf-sample-kicker { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pf-sample-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pf-sample-summary .pf-prose { font-size: 18px; color: var(--ink); }
.pf-sample-list { display: grid; gap: 14px; padding-left: 14px; border-left: 2px solid #4A5256; }
.pf-sample-list li p:last-child { color: var(--text-2); font-size: 15.5px; line-height: 1.55; white-space: pre-line; }
.pf-sample-shot-meta { font-size: 12px; margin-bottom: 3px; }
.pf-sample-tags { font-size: 13px; }
.pf-sample-pick { max-width: 560px; margin-top: 8px; }

/* empty states: an invitation, not a hole */
.pf-empty { display: grid; gap: 8px; justify-items: start; max-width: 60ch; padding: 6px 0 4px; }
.pf-empty-title { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1.05; }
.pf-empty p:not(.pf-empty-title) { color: var(--text-2); font-size: 15.5px; }
.pf-empty .btn, .pf-empty .pf-form { margin-top: 10px; }

/* the game row's six columns need 886px with their gaps, which the content column offers only from ~1215px;
   below that the facts move to a second line under the opponent (the same two-row layout the tablet used) */
@media (max-width: 1220px) {
  .pf-game { grid-template-columns: 68px minmax(0, 1.2fr) minmax(80px, .5fr) auto 118px; grid-template-areas: "date opp score state action" "date facts facts facts facts"; row-gap: 4px; }
  .pf-games.is-viewer .pf-game { grid-template-columns: 68px minmax(0, 1.2fr) minmax(80px, .5fr) 132px; grid-template-areas: "date opp score action" "date facts facts facts"; }
  .pf-game-date { grid-area: date; align-self: start; padding-top: 6px; }
  .pf-game-opp { grid-area: opp; }
  .pf-game-score { grid-area: score; }
  .pf-game-facts { grid-area: facts; }
  .pf-game-state { grid-area: state; }
  .pf-game-action { grid-area: action; }
}
/* tablet */
@media (max-width: 1080px) {
  .pf-overview { grid-template-columns: 1fr; gap: 26px; }
  .pf-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-stat-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phone: identity, then each section as one column; game rows stack, stats wrap, video keeps its ratio */
@media (max-width: 760px) {
  .gc-main.pf { padding-top: 22px; }
  .pf-hero { padding-bottom: 24px; }
  .pf-hero-row { align-items: flex-start; }
  .pf-name { font-size: 44px; }
  .pf-role { font-size: 17px; margin-top: 10px; }
  .pf-line { font-size: 15px; }
  .pf-hero-actions { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 0; }
  .pf-nav { gap: 20px; margin: 0 -16px; padding: 0 16px; }
  .pf-nav a { font-size: 15px; padding: 12px 0; }
  .pf-section { margin-top: 40px; }
  .pf-section-head { margin-bottom: 16px; }
  
  
  .pf-season-view, .pf-entry-view { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .pf-season-year span { font-size: 26px; }
  .pf-season-team, .pf-entry-title, .pf-service-title { font-size: 23px; }
  .pf-stats { gap: 8px 18px; }
  .pf-season-actions, .pf-item-actions { justify-content: flex-start; opacity: 1; margin-top: 4px; }
  .pf-cred-view, .pf-service-view { grid-template-columns: 1fr; }
  .pf-form { padding: 18px 16px 16px; }
  .pf-form .form-grid { grid-template-columns: 1fr; }
  .pf-stat-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pf-form .form-actions .btn { flex: 1; }
  .pf-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .pf-clip-title { font-size: 18px; }
  .pf-featured-caption { padding-top: 10px; }
  .pf-featured-title { font-size: 22px; }
  .pf-year { font-size: 26px; }
  .pf-game { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date state" "opp opp" "score score" "facts facts" "action action"; gap: 6px 12px; padding: 16px 0 18px; }
  .pf-games.is-viewer .pf-game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "opp" "score" "facts" "action"; }
  .pf-game-action { justify-content: flex-start; margin-top: 4px; }
  .pf-preview { flex-direction: column; align-items: flex-start; }
  .pf-ask .row { width: 100%; }
  .pf-ask .row .btn { flex: 1; }
  .pf-empty .btn { width: 100%; }
}

/* ================================================================ THE PUBLIC PAGE (marketing only)
   Everything below is scoped to `.mk` / `.mk-*` and is reached only by templates/landing.html.
   No signed-in screen uses any of it, and it redefines nothing the workspace relies on.

   The page is an editorial layout, not a card grid: full-bleed rules separate the sections, the
   type does the work, and the two product figures are the only boxes on it. */

.mk { display: block; }
.mk-wrap, .mk-hero-inner, .mk-section, .mk-close, .mk-footer > * { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- public in-page navigation */
.mk-nav { display: flex; align-items: center; gap: 26px; margin-left: 10px; }
.mk-nav a { font-family: var(--font-display); font-stretch: condensed; font-size: 16px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: color .15s var(--ease); }
.mk-nav a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- shared rhythm */
.mk-h2 { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 56px); line-height: .96; letter-spacing: -.005em; max-width: 20ch; }
.mk-lead { color: var(--text-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; max-width: 62ch; margin-top: 14px; }
.mk-note { margin-top: 16px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; max-width: 60ch; }
.mk-head { margin-bottom: 44px; }
.mk-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.mk-section { padding: clamp(64px, 8vw, 118px) var(--gutter); border-top: 1px solid var(--steel-soft); max-width: none; }
.mk-section > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.mk-section-deep { background: var(--canvas-deep); }
/* The public header is sticky, so an anchor must stop below it rather than under it. */
.mk-section[id] { scroll-margin-top: 72px; }

/* ---------------------------------------------------------------- hero: the first viewport does the explaining */
.mk-hero { padding: clamp(40px, 5vw, 76px) var(--gutter) clamp(28px, 3vw, 44px); }
.mk-hero-inner { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: clamp(32px, 4vw, 72px);
  align-items: center; }
.mk-hero-copy { min-width: 0; }
.mk-headline { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(42px, 5.6vw, 88px); line-height: .92; letter-spacing: -.012em; margin-top: 6px; max-width: 14ch; }
.mk-hero .mk-lead { font-size: clamp(17px, 1.4vw, 21px); max-width: 48ch; margin-top: 20px; }
.mk-hero-figure { min-width: 0; }
.mk-figure-caption { margin-top: 16px; color: var(--ink-3); font-size: 13px; line-height: 1.5; max-width: 72ch; }
/* Two large buttons have to sit on one line inside the hero's narrower column. */
.mk-hero .mk-actions .btn-lg { font-size: 18px; padding: 0 22px; min-height: 54px; }

/* ---------------------------------------------------------------- the shot figure: the product's own chrome */
.mk-shot { margin: 0; background: var(--surface-1); border: 1px solid var(--steel); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.mk-shot-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--steel-soft);
  background: #0E1113; }
.mk-shot-id { font-family: var(--font-display); font-stretch: condensed; font-size: 19px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; }
.mk-shot-id i { color: var(--ink-3); font-style: normal; margin: 0 2px; }
.mk-shot-clock { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mk-shot-meta { font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mk-example { margin-left: auto; font-family: var(--font-display); font-stretch: condensed; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--steel); border-radius: var(--radius-tag);
  padding: 2px 7px; white-space: nowrap; }

.mk-shot-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; }
.mk-shot-film { min-width: 0; border-right: 1px solid var(--steel-soft); }
.mk-stage { position: relative; background: #050607; }
/* The frame is drawn, so it gets a projector's scanlines and a vignette; without them a flat SVG
   reads as clip art rather than as a still. */
.mk-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
              radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(0, 0, 0, .55) 100%); }
.mk-frame, .mk-marks { display: block; width: 100%; height: auto; }
.mk-marks { position: absolute; inset: 0; }
.mk-mark-label { font-family: var(--font-display); font-stretch: condensed; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.mk-legend { display: none; }

.mk-scrub { position: relative; height: 4px; background: var(--steel-soft); }
.mk-scrub-shot { position: absolute; left: 22%; width: 34%; top: 0; bottom: 0; background: rgba(242, 217, 59, .3); }
.mk-scrub-head { position: absolute; left: 42%; top: -3px; bottom: -3px; width: 2px; background: var(--green); }
.mk-transport { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #0E1113; }
.mk-t-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-btn);
  border: 1px solid var(--steel); color: var(--ink-2); }
.mk-t-btn svg { width: 15px; height: 15px; }
.mk-t-btn.is-play { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.mk-t-time { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mk-t-time i { font-style: normal; margin: 0 4px; opacity: .5; }
.mk-t-speed { margin-left: auto; font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 700;
  letter-spacing: .06em; color: var(--green-ink); background: var(--green); border-radius: var(--radius-tag); padding: 2px 8px; }

.mk-panel { padding: 16px; display: grid; gap: 12px; align-content: start; background: #0E1113; }
.mk-panel-head { font-family: var(--font-display); font-stretch: condensed; font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-panel-label { font-family: var(--font-display); font-stretch: condensed; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mk-panel-note { color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin-top: -6px; }

/* ---------------------------------------------------------------- how it works */
.mk-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--steel); }
.mk-step { padding: 26px 30px 0 0; position: relative; }
.mk-step + .mk-step { padding-left: 30px; }
.mk-step + .mk-step::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 6px; border-left: 1px solid var(--steel-soft); }
.mk-step + .mk-step::after { content: ""; position: absolute; left: 0; top: -2px; width: 30px; border-top: 2px solid var(--green); }
.mk-steps > .mk-step:first-child::after { content: ""; position: absolute; left: 0; top: -2px; width: 30px; border-top: 2px solid var(--green); }
.mk-step-no { font-family: var(--font-display); font-stretch: condensed; font-size: 15px; font-weight: 700;
  letter-spacing: .2em; color: var(--ink-3); }
.mk-step-title { margin-top: 10px; font-family: var(--font-display); font-stretch: condensed; font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
.mk-step-text { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- what a review is */
/* The studio's toolbar, shown rather than described. Same icons, same labels, same grouping. */
.mk-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 34px; padding: 14px 16px;
  border: 1px solid var(--steel); border-radius: var(--radius-btn); background: var(--surface-1); }
.mk-tools-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-tools-group + .mk-tools-group { padding-left: 14px; border-left: 1px solid var(--steel-soft); }
.mk-tools-speed { margin-left: auto; }
.mk-tool { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
  border-radius: var(--radius-tag); border: 1px solid var(--steel-soft); background: var(--surface-raised);
  font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.mk-tool svg { width: 16px; height: 16px; flex: none; stroke-width: 1.8; }
.mk-tool.is-puck { box-shadow: inset 0 -2px 0 var(--ink); }
.mk-tool.is-actual { box-shadow: inset 0 -2px 0 var(--amber); }
.mk-tool.is-ideal { box-shadow: inset 0 -2px 0 var(--green); }
.mk-tool.is-on { color: var(--ink); border-color: var(--steel); }

.mk-anatomy { margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--steel-soft); }
.mk-anatomy-item { background: var(--canvas-deep); padding: 28px 28px 30px; }
.mk-anatomy dt { font-family: var(--font-display); font-stretch: condensed; font-size: 21px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.08; }
.mk-anatomy dd { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- the record over a season */
.mk-split { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mk-split > * { max-width: none; margin: 0; }
.mk-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.mk-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.mk-points svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--green); stroke-width: 2.2; }

.mk-record { margin: 0; background: var(--surface-1); border: 1px solid var(--steel); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); }
.mk-record-bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--steel-soft); background: #0E1113; }
.mk-record-head { font-family: var(--font-display); font-stretch: condensed; font-size: 19px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.mk-numbers { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-numbers > div { padding: 20px 16px; border-right: 1px solid var(--steel-soft); border-bottom: 1px solid var(--steel-soft); }
.mk-numbers > div:last-child { border-right: 0; }
.mk-numbers dt { font-family: var(--font-display); font-stretch: condensed; font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.25; min-height: 2.5em; }
.mk-numbers dd { margin: 6px 0 0; font-family: var(--font-display); font-stretch: condensed; font-size: 38px;
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-record-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-record-lists > section { padding: 18px; }
.mk-record-lists > section + section { border-left: 1px solid var(--steel-soft); }
.mk-record-label { font-family: var(--font-display); font-stretch: condensed; font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }
.mk-record-lists ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.mk-record-lists li { display: flex; align-items: center; gap: 10px; }
.mk-record-lists em { font-style: normal; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- audiences */
.mk-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 56px); }
.mk-who-item { border-top: 1px solid var(--steel); padding-top: 24px; }
.mk-who-glyph { display: block; color: var(--green); }
.mk-who-glyph svg { width: 26px; height: 26px; stroke-width: 1.6; }
.mk-who-title { margin-top: 16px; font-family: var(--font-display); font-stretch: condensed; font-size: clamp(22px, 2vw, 30px);
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.mk-who-item p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* ---------------------------------------------------------------- how a coach gets in */
.mk-chain { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mk-chain-link { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px;
  border: 1px solid var(--steel-soft); border-radius: var(--radius-btn); background: var(--surface-1);
  font-family: var(--font-display); font-stretch: condensed; font-size: clamp(17px, 1.4vw, 21px); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.12; }
.mk-chain-link + .mk-chain-link::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px;
  border-top: 1px solid var(--steel); }
.mk-chain-no { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; color: var(--green); }
.mk-connect-cta { margin-top: 26px; }

/* ---------------------------------------------------------------- the close */
.mk-close { padding: clamp(72px, 9vw, 132px) var(--gutter); border-top: 1px solid var(--steel-soft); max-width: none;
  text-align: center; }
.mk-close > * { margin-left: auto; margin-right: auto; }
.mk-close-head { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 5.4vw, 74px); line-height: .95; letter-spacing: -.008em; max-width: 18ch; }
.mk-close .mk-lead { max-width: 56ch; }
.mk-close .mk-actions { justify-content: center; }
.mk-close .mk-note { max-width: 46ch; }

.mk-footer { padding: 34px var(--gutter) 54px; border-top: 1px solid var(--steel-soft); background: var(--canvas-deep); }
.mk-footer > * { max-width: 1320px; }
.mk-footer-brand { font-family: var(--font-display); font-stretch: condensed; font-size: 20px; font-weight: 700;
  letter-spacing: .1em; color: var(--ink-3); }
.mk-footer .mk-note { margin-top: 8px; }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1080px) {
  /* Below this the public header has no room for three section links beside the brand, the language
     switch and Sign in -- least of all in French, whose labels are half again as long. */
  .mk-nav { display: none; }
  .mk-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mk-headline { max-width: 18ch; }
  .mk-hero .mk-lead { max-width: 60ch; }
  .mk-shot-body { grid-template-columns: minmax(0, 1fr); }
  .mk-shot-film { border-right: 0; border-bottom: 1px solid var(--steel-soft); }
  .mk-panel { padding: 16px 18px 20px; }
  .mk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-step:nth-child(odd) { padding-left: 0; }
  .mk-step:nth-child(odd)::before { display: none; }
  .mk-step:nth-child(3), .mk-step:nth-child(4) { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--steel-soft); }
  .mk-step:nth-child(3)::after, .mk-step:nth-child(4)::after { top: -1px; }
  .mk-anatomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-tools-speed { margin-left: 0; }
  .mk-split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mk-who { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mk-who-item + .mk-who-item { margin-top: 30px; }
  .mk-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-chain-link:nth-child(odd)::before { display: none; }
}

/* ---------------------------------------------------------------- phone
   375 / 390 / 430: the first screen still has to answer what this is and what to do next, so the
   figure is recomposed (chrome and panel stay, the film keeps its aspect) rather than shrunk.
   760px, not a round number of my own: it is where the rest of this stylesheet already turns the
   product mobile, and a full-width .btn-lg starts, so the public page changes over with it. */
@media (max-width: 760px) {
  .mk-hero { padding: 30px 16px 26px; }
  .mk-headline { font-size: clamp(38px, 11.5vw, 50px); max-width: 15ch; }
  .mk-hero .mk-lead { font-size: 16.5px; }
  .mk-actions { margin-top: 24px; gap: 10px; }
  .mk-section { padding: 56px 16px; }
  .mk-head { margin-bottom: 30px; }
  .mk-h2 { font-size: clamp(28px, 8.6vw, 38px); max-width: 16ch; }

  .mk-shot-bar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .mk-shot-id { font-size: 17px; }
  .mk-example { margin-left: auto; }
  .mk-transport { gap: 8px; padding: 9px 12px; }
  .mk-t-time { display: none; }
  .mk-panel { gap: 10px; }
  /* The in-frame label plates shrink below reading size here; the legend carries the names instead. */
  .mk-mark-plate { display: none; }
  .mk-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 11px 14px;
    border-bottom: 1px solid var(--steel-soft); background: #0B0E0F; }
  .mk-legend li { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-stretch: condensed;
    font-size: 13.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
  .mk-legend-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
  .mk-legend .is-puck { color: var(--ink); background: var(--canvas); }
  .mk-legend .is-actual { color: var(--amber); }
  .mk-legend .is-ideal { color: var(--green); }

  .mk-steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .mk-step, .mk-step + .mk-step { padding: 22px 0 0; }
  .mk-step + .mk-step::before { display: none; }
  .mk-step::after, .mk-step + .mk-step::after { content: ""; position: absolute; left: 0; top: 0; width: 28px; border-top: 2px solid var(--green); }
  .mk-step + .mk-step { border-top: 1px solid var(--steel-soft); margin-top: 22px; }
  .mk-steps > .mk-step:first-child { border-top: 1px solid var(--steel); }

  .mk-tools { gap: 8px; padding: 12px; margin-bottom: 26px; }
  .mk-tools-group + .mk-tools-group { padding-left: 0; border-left: 0; padding-top: 8px;
    border-top: 1px solid var(--steel-soft); width: 100%; }
  .mk-anatomy { grid-template-columns: minmax(0, 1fr); }
  .mk-anatomy-item { padding: 22px 0 24px; background: transparent; border-top: 1px solid var(--steel-soft); }
  .mk-anatomy { background: transparent; gap: 0; }
  .mk-anatomy-item:first-child { border-top: 0; }

  .mk-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-numbers > div:nth-child(2n) { border-right: 0; }
  .mk-numbers dd { font-size: 32px; }
  .mk-record-lists { grid-template-columns: minmax(0, 1fr); }
  .mk-record-lists > section + section { border-left: 0; border-top: 1px solid var(--steel-soft); }

  .mk-chain { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mk-chain-link::before { display: none !important; }
  .mk-chain-link { flex-direction: row; align-items: baseline; gap: 12px; padding: 14px 16px; }

  .mk-close { padding: 64px 16px 72px; }
  .mk-close-head { font-size: clamp(30px, 9.4vw, 42px); }
  .mk-footer { padding: 28px 16px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk * { transition: none !important; }
}