/* 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; }
/* a button whose request is running: the label stays readable (opacity above), the cursor says "wait" and a small
   ring turns after the text, so a pressed button never looks merely dead */
.btn[aria-busy="true"], button[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; flex: none; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; opacity: .8; animation: gc-busy .8s linear infinite; }
@keyframes gc-busy { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: .5; } }
.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 { grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: flex-end; gap: 8px 28px; }
.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; }
/* a narrow desktop window (1024px with a classic scrollbar): side padding back to the phone gutter, so the video and
   the marking column still fit side by side (see .rv-grid) */
@media (min-width: 761px) and (max-width: 1100px) { .gc-main.review { padding-left: 16px; padding-right: 16px; } }
/* 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 + marking sidebar */
/* THE WORKSPACE GRID. Row 1: the shot bar over the video, and beside it the selected shot's head (title, highlight,
   delete) at the same height (--ctl-h). Row 2: the video, and the marking panel whose top meets the video's. The shot
   navigator (current moment, coaching, list) follows under the video. The period panel is the container: side by side
   only when it has room for the video at the width its own player row needs (572px: play, time, seven speeds, sound,
   fullscreen) beside a 296px marking column (572 + 20 + 296 = 888; a 1024px window with a 17px classic scrollbar
   leaves 899px once the review page's side padding is 16px). The column takes 34% up to 420px, never more than the
   video can spare. Below 888px: stacked, in the order bar, video, marking, navigator. --ctl-h is the one control
   height of the bar and the panel (44px on touch). */
.period-panel { container: panel / inline-size; }
.rv-grid { --ctl-h: 40px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main" "side" "nav" "more"; }
@media (pointer: coarse), (max-width: 760px) { .rv-grid { --ctl-h: 44px; } }
.rv-grid > .sb { grid-area: bar; }
.rv-main { grid-area: main; min-width: 0; }
.rv-mark-side { grid-area: side; min-width: 0; }
.rv-grid > .rv-side { grid-area: nav; min-width: 0; }
.rv-grid > .rv-previous { grid-area: more; }
@container panel (min-width: 888px) {
  .rv-grid { grid-template-columns: minmax(572px, 1fr) minmax(296px, min(34%, 420px, 100% - 592px)); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "bar side" "main side" "nav side" "more side"; column-gap: 20px; align-items: start; }
}
/* keyboard focus never lands under the panel's persistent actions (up to 112px on touch) or a phone's bottom navigation */
html:has(.gc-main.review) { scroll-padding-bottom: 120px; }
/* 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); }
/* the browser's own buffering / loading / error state, said on the picture (app.js::initBuffering) */
.rv-buffer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 6px; background: rgba(9, 10, 12, .78); color: var(--ink); font-size: 13.5px;
  pointer-events: none; z-index: 2; }
.rv-buffer[data-state="error"] { pointer-events: auto; flex-wrap: wrap; justify-content: center; background: rgba(9, 10, 12, .9); border: 1px solid rgba(232, 92, 74, .5); }
.rv-buffer-spin { width: 16px; height: 16px; flex: none; border: 2px solid rgba(241, 243, 245, .35); border-top-color: var(--ink); border-radius: 50%; animation: gc-busy .9s linear infinite; }
.rv-buffer[data-state="error"] .rv-buffer-spin { display: none; }
.rv-buffer-retry { min-height: 32px; padding: 0 12px; }
@media (prefers-reduced-motion: reduce) { .rv-buffer-spin { animation: none; border-top-color: rgba(241, 243, 245, .35); } }
.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 { margin-top: 18px; }
.rv-side-inner { display: flex; flex-direction: column; padding: 16px 18px 4px; background: var(--surface-1);
  border: 1px solid var(--steel-soft); border-radius: 8px; }
/* under a wide video: the current moment and its coaching beside the list, not a long single column */
@container panel (min-width: 640px) {
  .rv-side-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 28px; }
  .rv-side-inner .rv-shots { border-top: 0; }
}
/* 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; }
.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-state { display: grid; gap: 6px; flex: 1 1 320px; min-width: 0; }
.rv-clips-count, .rv-clips-note { margin: 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rv-clips-note.is-warn, .rv-reel-note.is-warn, .rv-footage-note.is-warn, .hr-note.is-warn { color: var(--amber); }
.rv-clips [data-clips-bar] { width: min(360px, 100%); }
.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); }

/* ---- Send this game for review: who has it, who the next send goes to, the chooser.
   The recipient line is the one fact the goalie must see before pressing Send: name in the UI face at reading size,
   the reason it is suggested in small print, the change action beside it (44px, wraps under on a phone). The Send
   button names the recipient. The "who has this game" rows above it keep the existing row grid. */
.rv-sublabel { margin: 18px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.rv-access .rv-sublabel { margin-top: 14px; }
.rv-access-state { font-weight: 500; color: var(--ink-2); }
.rv-send { margin-top: 6px; padding-top: 4px; }

/* ---- Review status (portal/review_status.py): the persisted truth of the coach review, one row per coach, the lead
   row in the display face. The primary action is the next useful thing (Watch feedback, Continue my review); sending
   to another coach is folded behind a secondary disclosure once a review is on its way or done. */
.rv-rs { display: grid; gap: 10px; margin-top: 14px; padding: 18px 20px; border: 1px solid var(--steel-soft); border-left: 3px solid var(--ink-3); border-radius: 0 8px 8px 0; background: var(--surface-1); }
.rv-rs.is-done { border-left-color: var(--green); }
.rv-rs.is-open { border-left-color: var(--gold); }
.rv-rs-row { display: grid; gap: 3px; min-width: 0; }
.rv-rs-row + .rv-rs-row { padding-top: 10px; border-top: 1px solid var(--steel-soft); }
.rv-rs-label { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.rv-rs-row.is-lead .rv-rs-label { font-family: var(--font-display); font-stretch: condensed; font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.rv-rs-row.is-closed .rv-rs-label { color: var(--text-2); font-weight: 500; }
.rv-rs-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--green); color: #07090A; }
.rv-rs-mark svg { width: 15px; height: 15px; }
.rv-rs-row.is-lead .rv-rs-mark { width: 30px; height: 30px; }
.rv-rs-row.is-lead .rv-rs-mark svg { width: 18px; height: 18px; }
.rv-rs-detail { font-size: 13.5px; line-height: 1.5; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rv-rs-hint { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.rv-rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 6px; }
.rv-rs-actions [data-review-primary] { min-height: 46px; }
.rv-send-more { margin-top: 16px; }
.rv-send-more-summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--steel); border-radius: var(--radius-btn); font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.rv-send-more-summary::-webkit-details-marker { display: none; }
.rv-send-more-summary:hover { color: var(--ink); border-color: #4A5256; }
.rv-send-more-summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rv-send-more-summary svg { width: 16px; height: 16px; }
.rv-send-more[open] .rv-send-more-summary { color: var(--ink); border-color: var(--ink); }
.rv-send-more .rv-send { margin-top: 10px; padding: 14px 16px 16px; border: 1px solid var(--steel-soft); border-radius: 8px; }
.rv-send-more .rv-send .rv-sublabel { margin-top: 0; }
.fb-states { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.hero-review.is-done { color: var(--ink); }
.hero-review.is-open { color: var(--ink); }
/* a library tile lists one line per coach; the dot sits on the first line of a wrapped label */
.lib-review strong { align-items: flex-start; line-height: 1.35; }
.lib-review strong::before { margin-top: 6px; }
.lib-review strong + strong { margin-top: 2px; }
@media (max-width: 640px) {
  .rv-rs { padding: 16px 14px; }
  .rv-rs-actions { flex-direction: column; align-items: stretch; }
  .rv-rs-actions .btn { width: 100%; justify-content: center; }
  .rv-send-more-summary { width: 100%; justify-content: center; }
}
.rv-send-keep { margin: 0 0 12px; padding: 10px 12px; border-left: 2px solid #4A5256; background: var(--surface-1); border-radius: 0 var(--radius-btn) var(--radius-btn) 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rv-send-recipient { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 0; border-top: 1px solid var(--steel-soft); border-bottom: 1px solid var(--steel-soft); }
.rv-send-coach { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.rv-send-coach-label { font-size: 13.5px; color: var(--ink-2); }
.rv-send-coach-name { font-size: 18px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.rv-send-coach-note { font-size: 13px; color: var(--ink-3); }
.rv-send-coach-note:empty { display: none; }
.rv-send-change { min-height: 44px; flex: none; }
.rv-send-form { display: grid; gap: 12px; margin-top: 14px; }
.rv-send-explain { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rv-send-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rv-send-actions [data-send-submit] { min-height: 44px; }
.rv-send-actions [data-send-submit]:disabled { opacity: .55; cursor: not-allowed; }
.rv-send-form .form-error:empty { display: none; }
/* the chooser */
.rv-chooser { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.rv-chooser-note { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.rv-chooser-group { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.rv-chooser-group + .rv-chooser-group { padding-top: 14px; border-top: 1px solid var(--steel-soft); }
.rv-chooser-legend { display: block; padding: 0; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.rv-chooser-text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rv-chooser-text + .btn, .rv-chooser-invites + .rv-chooser-text + .btn { margin-top: 10px; }
.rv-chooser-empty { font-size: 14px; color: var(--ink-3); }
.rv-chooser-invites { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 6px; }
.rv-chooser-invite { padding: 8px 10px; border-left: 2px 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-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rv-pick { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--steel-soft); border-radius: var(--radius-btn); cursor: pointer; }
.rv-pick:hover { border-color: #4A5256; }
.rv-pick:has(input:checked) { border-color: var(--ink); background: var(--surface-1); }
.rv-pick:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.rv-pick input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--green); }
.rv-pick-body { display: grid; gap: 2px; min-width: 0; }
.rv-pick-name { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.rv-pick-state { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.rv-pick.is-unavailable { cursor: not-allowed; }
.rv-pick.is-unavailable .rv-pick-name { color: var(--ink-2); }
.rv-pick.is-unavailable .rv-pick-state { color: var(--ink-3); }
/* the chooser scrolls on a short screen; its two actions stay in view at the bottom */
.rv-chooser .confirm-actions { position: sticky; bottom: -24px; margin: 22px -24px -24px; padding: 14px 24px 24px; background: var(--surface-1); border-top: 1px solid var(--steel-soft); }
@media (max-width: 720px) {
  .rv-send-recipient { flex-direction: column; align-items: stretch; }
  .rv-send-change { width: 100%; }
  .rv-send-actions [data-send-submit] { width: 100%; }
  .rv-chooser .confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .rv-chooser .confirm-actions .btn { width: 100%; }
}

@media (max-width: 1180px) {
  .rv-side-inner { padding: 16px 16px 4px; }
  .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-player-row { flex-wrap: wrap; }
  .rv-player-end { display: contents; }
  .rv-mute { margin-left: auto; }
  .rv-speed { order: 3; flex-basis: 100%; margin: 2px 0 0; gap: 2px; }
  .rv-speed-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0; }
  .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. */
/* The toggle leads the shot-details panel: a full button with its star and its words, 44px tall, wrapping rather than
   shrinking at narrow widths. Highlighted reads three ways at once: the filled star, the words ("Added to highlights"),
   and a solid edge on the left; never by colour alone. */
.sd-hl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-3) 0; border-bottom: 1px solid var(--steel-soft); }
.rv-hl { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 8px 16px;
  border: 1px solid var(--steel); border-radius: var(--radius-btn); background: var(--surface-raised); color: var(--ink);
  cursor: pointer; font: 600 14.5px/1.25 var(--font-ui); text-align: left; white-space: normal; overflow-wrap: anywhere; }
.rv-hl:hover { border-color: var(--ink-2); }
.rv-hl:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.rv-hl svg { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
.rv-hl .is-on { display: none; }
.rv-hl.is-on .is-on { display: inline-flex; }
.rv-hl.is-on .is-off { display: none; }
.rv-hl-icon { display: inline-flex; }
.rv-hl.is-on { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.rv-hl.is-pending { cursor: progress; opacity: .75; }
.rv-hl-error { color: var(--goal); font-size: 13px; }
.rv-hl-error:empty { display: none; }
/* the explanation on hover / keyboard focus, placed by app.js inside the viewport */
.gc-tip { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 8px 12px; border: 1px solid var(--steel);
  border-radius: 6px; background: var(--surface-overlay); color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45); pointer-events: none; }
.gc-tip[hidden] { display: none; }
.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-static { margin-top: 0; }
/* Delete shot: the one control that removes a mark made by mistake. It sits with the shot it belongs to and is a
   visible, labelled button (icon + "Delete shot"), restrained: red outline and text, no fill. Text #E85C4A on the panel
   is ~5.2:1; the 75% outline ~3.4:1 (non-text minimum 3:1). It stays a full touch target on a phone. */
.sd-delete { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px;
  background: transparent; border: 1px solid rgba(232, 92, 74, .75); border-radius: 6px; color: var(--goal);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.sd-delete:hover { background: var(--danger-soft); border-color: var(--goal); }
.sd-delete:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; background: var(--danger-soft); border-color: var(--goal); }
.sd-delete:disabled { opacity: .55; cursor: progress; }
.sd-delete svg { width: 14px; height: 14px; flex: none; }
.sd-col .rv-sec-title { 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: min(100%, var(--rink-w, 360px)); height: auto; overflow: visible; }
/* the rink as one control: the whole outline takes the tap, the marker shows the release point at any size */
.sd-rink-hit { fill: transparent; stroke: none; }
.sd-rink.is-control { cursor: crosshair; touch-action: manipulation; border-radius: 6px; }
.sd-rink.is-control:hover .sd-rink-hit { fill: rgba(241, 243, 245, .03); }
.sd-rink.is-control:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.sd-rink.is-unknown .sd-rink-lines { opacity: .55; }
.sd-rink-marker { pointer-events: none; }
.sd-rink-marker.is-hidden { display: none; }
.sd-rink-marker-halo { fill: rgba(242, 217, 59, .18); }
.sd-rink-marker-ring { fill: none; stroke: var(--green); stroke-width: 2.2; }
.sd-rink-marker-dot { fill: var(--ink); }
.sd-origin-clear { color: var(--ink-3); }
/* the net as one control: the goal opening takes the tap; the marker shows the placement at any size */
.sd-netmap { display: block; width: min(100%, var(--net-w, 320px)); height: auto; overflow: visible; cursor: crosshair; touch-action: manipulation; border-radius: 6px; }
.sd-netmap:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.sd-netmap.is-off { cursor: default; opacity: .4; }
.sd-netmap.is-unknown .sd-net-lines { opacity: .55; }
.sd-net-lines { fill: none; stroke: #3A4145; stroke-width: 5; stroke-linejoin: round; pointer-events: none; }
.sd-net-lines .sd-net-ice { stroke: var(--steel); stroke-width: 2; }
.sd-net-mesh { pointer-events: none; }
.sd-net-side { font-size: 8px; }
.sd-net-orient { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
/* shot context tags: quick, optional, and honest about "not assessed" */
.sd-context { margin-top: 18px; }
.sd-context > summary { display: flex; align-items: baseline; gap: 10px; min-height: 32px; cursor: pointer; list-style: none; font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.sd-context > summary::-webkit-details-marker { display: none; }
.sd-context > summary::before { content: "▸"; color: var(--ink-3); font-size: 11px; }
.sd-context[open] > summary::before { content: "▾"; }
.sd-context-summary { font-family: var(--font-ui); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.sd-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sd-tag { display: grid; gap: 2px; min-height: 44px; padding: 6px 10px; text-align: left; background: transparent; border: 1px solid var(--steel); border-radius: 6px; color: var(--ink-2); font: inherit; cursor: pointer; }
.sd-tag b { font-size: 13px; font-weight: 600; color: var(--ink); }
.sd-tag small { font-size: 11px; line-height: 1.25; color: var(--ink-3); }
.sd-tag:hover { border-color: var(--ink-3); }
.sd-tag[aria-pressed="true"] { border-color: var(--green); background: rgba(242, 217, 59, .1); }
.sd-tag-none { grid-column: 1 / -1; }
/* undo: quiet, next to the marking controls, explains itself */
.rv-undo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-undo-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; background: transparent; border: 1px solid var(--steel); border-radius: var(--radius-btn); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.rv-undo-btn svg { width: 14px; height: 14px; }
.rv-undo-btn:disabled { opacity: .4; cursor: default; }
.rv-undo-text { font-size: 12.5px; color: var(--ink-2); }
/* shot maps */
.sm { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--steel-soft); }
.sm-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.sm-complete { margin: 0; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sm-pct { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cg-maps { margin: 18px 0 8px; }
.sm-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 12px; }
.sm-chips { display: inline-flex; gap: 2px; }
.sm-chip { min-height: 32px; padding: 0 10px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.sm-chip:hover { color: var(--ink); }
.sm-chip[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--green); }
.sm-chip.is-goal[aria-pressed="true"] { border-bottom-color: var(--goal); }
.sm-filter-label { font-size: 12px; color: var(--ink-2); }
.sm-select { min-height: 36px; padding: 0 8px; background: var(--surface-1, #15181A); color: var(--ink); border: 1px solid var(--steel); border-radius: 6px; font: inherit; font-size: 13px; }
.sm-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px 36px; align-items: start; }
.sm-fig { margin: 0; min-width: 0; }
.sm-cap { margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.sm-orient { display: block; font-size: 11.5px; color: var(--ink-3); }
.sm-map { display: block; width: 100%; height: auto; overflow: visible; }
.sm-rink { max-width: 420px; }
.sm-net { max-width: 300px; }
.sm-bg { fill: rgba(241, 243, 245, .02); }
.sm-mark { cursor: pointer; }
.sm-mark-hit { fill: transparent; }
.sm-mark-save { fill: var(--ink); stroke: #0A0C0D; stroke-width: 1; }
.sm-mark-goal { fill: var(--goal); stroke: #0A0C0D; stroke-width: 1; }
.sm-mark-other { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.sm-mark:hover .sm-mark-save, .sm-mark:focus-visible .sm-mark-save { fill: var(--green); }
.sm-mark:hover .sm-mark-goal, .sm-mark:focus-visible .sm-mark-goal { stroke: var(--green); stroke-width: 2; }
.sm-mark:focus-visible { outline: none; }
.sm-mark:focus-visible .sm-mark-hit { fill: rgba(242, 217, 59, .25); }
.sm-bin rect { fill: rgba(241, 243, 245, .04); stroke: rgba(241, 243, 245, .12); stroke-width: .6; cursor: pointer; }
.sm-bin.d2 rect { fill: rgba(242, 217, 59, .14); }
.sm-bin.d3 rect { fill: rgba(242, 217, 59, .3); }
.sm-bin.d4 rect { fill: rgba(242, 217, 59, .5); }
.sm-bin.is-on rect { stroke: var(--green); stroke-width: 2; }
.sm-bin text { fill: var(--ink); font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 700; pointer-events: none; }
.sm-bin:focus-visible { outline: none; }
.sm-bin:focus-visible rect { stroke: var(--green); stroke-width: 2; }
.sm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.sm-key { display: inline-flex; align-items: center; gap: 6px; }
.sm-key svg { width: 12px; height: 12px; }
.sm-swatch { display: inline-block; width: 14px; height: 10px; border: 1px solid rgba(241, 243, 245, .15); }
.sm-swatch.d1 { background: rgba(241, 243, 245, .04); } .sm-swatch.d2 { background: rgba(242, 217, 59, .14); } .sm-swatch.d3 { background: rgba(242, 217, 59, .3); } .sm-swatch.d4 { background: rgba(242, 217, 59, .5); }
.sm-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.sm-details { margin-top: 10px; }
.sm-details > summary { min-height: 32px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.sm-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.sm-dl { margin: 6px 0 0; }
.sm-dl dt { margin-bottom: 4px; font-size: 12px; color: var(--ink); }
.sm-dl dd { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sm-dl dd b { color: var(--ink); font-weight: 600; }
.sm-legacy { margin-top: 4px !important; display: block !important; color: var(--ink-3) !important; }
.sm-empty { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.sm-region { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--steel-soft); border-radius: 6px; }
.sm-region-empty, .sm-region-title, .sm-region-pct { margin: 0; font-size: 13px; color: var(--ink-2); }
.sm-region-title b { color: var(--ink); }
.sm-region-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sm-region-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: none; font-size: 13px; }
.sm-region-link:hover { color: var(--green); }
.sm-region-link.is-goal { color: var(--goal); }
@media (max-width: 760px) {
  .sm-grid, .sm-detail-grid, .sd-tags { grid-template-columns: 1fr; }
  .sm-rink, .sm-net { max-width: none; }
  .sm-chip { min-height: 44px; }
  .sm-select { min-height: 44px; }
  .rv-undo-btn { min-height: 44px; }
  .sm-region-link { min-height: 44px; }
}
@media (pointer: coarse) { .sm-chip, .rv-undo-btn, .sm-region-link, .sd-tag { min-height: 44px; } }

/* ---- save percentage by area (Progress; templates/app/_season_areas.html). One map at a time, squares carry one
   number each. One hue (cyan, never the gold accent or the goal red) in four light steps; a small sample is left
   neutral with a ring; an empty square is a dash. The drawing underneath only orients. */
.sp { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--steel-soft); }
.sp-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.sp-head .rv-sec-title { margin-bottom: 0; color: var(--ink); }
.sp-summary { margin: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin: 14px 0 6px; }
.sp-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-1); border: 1px solid var(--steel-soft); border-radius: var(--radius-btn); }
.sp-switch .sm-chip { min-height: 34px; padding: 0 14px; border-radius: 6px; border-bottom: 0; }
.sp-switch .sm-chip[aria-pressed="true"] { background: var(--surface-overlay); color: var(--ink); box-shadow: inset 0 -2px 0 var(--green); }
.sp-game { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sp-game .sm-select { max-width: min(320px, 70vw); }
.sp-pct { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 4px 0 16px; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-pct-all { color: var(--ink-2); }
.sp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 980px) { .sp-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; } }
.sp-maps { min-width: 0; }
.sp-fig { margin: 0 auto; }
.sp-fig[hidden] { display: none; }
.sp-fig-net { max-width: 640px; }
.sp-fig-rink { max-width: 720px; }
.sp-cap { margin: 0 0 10px; font-size: 13px; color: var(--ink); }
.sp-edge { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sp-edge-top { margin-bottom: 4px; text-align: center; }
.sp-edge-sides { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 2%; }
.sp-board { position: relative; }
.sp-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.sp-diagram .sd-rink-lines, .sp-diagram .sd-dot { opacity: .45; }
.sp-diagram [data-pct-marks] { pointer-events: none; }
.sp-cells { position: absolute; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.sp-fig-net .sp-cells { left: 5%; top: 7.1429%; width: 90%; height: 85.7143%; }
.sp-fig-rink .sp-cells { inset: 0; }
/* the drill-down draws above the squares; the squares then step back so the marks read */
.sp-board.is-drill .sp-diagram { position: relative; z-index: 1; pointer-events: none; }
.sp-board.is-drill .sp-cell:not([aria-pressed="true"]) { opacity: .35; }
.sp-board.is-drill .sp-cell[aria-pressed="true"] .sp-val, .sp-board.is-drill .sp-cell[aria-pressed="true"] .sp-n { opacity: .25; }

.sp-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 0;
  margin: 0; padding: 2px; background: transparent; border: 0; box-shadow: inset 0 0 0 .5px rgba(241, 243, 245, .14); color: var(--ink);
  font: inherit; text-align: center; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.sp-cell:disabled { cursor: default; }
.sp-val { font-family: var(--font-display); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; font-size: clamp(18px, 3.4vw, 32px); }
.sp-fig-rink .sp-val { font-size: clamp(15px, 2.3vw, 24px); }
.sp-n { font-family: var(--font-display); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .02em; line-height: 1.1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-n:empty { display: none; }
.sp-cell[data-band="b1"] { background: rgba(83, 199, 216, .11); }
.sp-cell[data-band="b2"] { background: rgba(83, 199, 216, .2); }
.sp-cell[data-band="b3"] { background: rgba(83, 199, 216, .31); }
.sp-cell[data-band="b4"] { background: rgba(83, 199, 216, .44); }
.sp-cell[data-band^="b"] .sp-n { color: rgba(241, 243, 245, .82); }
.sp-cell[data-band="low"] { background: rgba(241, 243, 245, .035); }
.sp-cell[data-band="low"] .sp-val { color: var(--ink-2); }
.sp-cell[data-band="low"]::after { content: ""; position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border: 1.5px solid var(--ink-3); border-radius: 50%; }
.sp-cell[data-band="empty"] .sp-val { color: var(--ink-3); font-weight: 400; font-size: 14px; opacity: .6; }
.sp-cell:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(241, 243, 245, .45); }
.sp-cell[aria-pressed="true"], .sp-cell[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--green); }
.sp-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--green), 0 0 0 2px rgba(242, 217, 59, .3); z-index: 1; }
.sp-none { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; }

.sp-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sp-legend { display: grid; gap: 8px; font-size: 12px; color: var(--ink-2); }
.sp-legend-title { font-size: 12px; color: var(--ink); }
.sp-scale { display: flex; flex-wrap: wrap; gap: 6px 12px; }
@media (min-width: 980px) { .sp-scale { display: grid; grid-template-columns: repeat(2, max-content); } }
.sp-key { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sp-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 12px; border-radius: 2px;
  box-shadow: inset 0 0 0 .5px rgba(241, 243, 245, .2); font-style: normal; font-size: 10px; color: var(--ink-3); }
.sp-swatch[data-band="b1"] { background: rgba(83, 199, 216, .11); }
.sp-swatch[data-band="b2"] { background: rgba(83, 199, 216, .2); }
.sp-swatch[data-band="b3"] { background: rgba(83, 199, 216, .31); }
.sp-swatch[data-band="b4"] { background: rgba(83, 199, 216, .44); }
.sp-swatch[data-band="low"] { background: rgba(241, 243, 245, .035); }
.sp-ring { width: 6px; height: 6px; border: 1.5px solid var(--ink-3); border-radius: 50%; }
.sp-drawer { padding: 12px 14px; border: 1px solid var(--steel-soft); border-radius: var(--radius-input); background: var(--surface-1); min-width: 0; }
.sp-drawer-empty { margin: 0; font-size: 13px; color: var(--ink-2); }
.sp-drawer-title { margin: 0; font-size: 14px; color: var(--ink); }
.sp-drawer-sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.sp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 10px 0 0; }
.sp-facts dt { font-size: 11.5px; color: var(--ink-2); }
.sp-facts dd { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-drawer-low { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.sp-drawer-label { margin: 12px 0 0; font-size: 12px; color: var(--ink-2); }
.sp-clips { max-height: 264px; overflow-y: auto; margin-top: 4px; }
.sp-drawer-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; }
.sp-action { padding: 0; }
.sp-action[aria-pressed="true"] { border-bottom-color: var(--green); }
.sp-details-lead { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.sp-dl { max-width: 460px; }
.sp-dl dd[hidden] { display: none; }
@media (max-width: 720px) {
  .sp-controls { align-items: stretch; flex-direction: column; }
  .sp-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .sp-switch .sm-chip { min-height: 44px; }
  .sp-game .sm-select { flex: 1; max-width: none; min-height: 44px; }
  .sp-edge-sides { padding: 0; }
  .sp-action { min-height: 44px; }
}
@media (pointer: coarse) { .sp-action, .sp-switch .sm-chip { min-height: 44px; } }
/* keyboard focus scrolls a control into view clear of the sticky header and, on a phone, of the fixed bottom
   navigation (62 px + safe area), never underneath either */
.sp :is(button, select, a, summary) { scroll-margin-top: 80px; }
@media (max-width: 760px) { .sp :is(button, select, a, summary) { scroll-margin-bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* the base .sd-pick rule is declared after the phone block, so these two need their own weight to reach 44px on touch */
@media (max-width: 760px), (pointer: coarse) { .sd-origin-actions .sd-pick { min-height: 44px; padding: 0 12px; } }
.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-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-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-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; }
@media (max-width: 760px) {
  .sd-head .sd-delete { min-height: 44px; }
  .sd-readonly { grid-template-columns: 1fr; gap: 12px; }
  .sd-readonly div { padding: 0; border-left: 0; }
}
.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); }

/* ================================================================ SHOT DETAILS LAYOUT (the selected shot's marking)
   The marking workflow top to bottom: Shot from, Puck target, Result + Rebound, More details (time, context, clip,
   with their values in its summary), the review status (this shot, then the period), then Save / Check & next.
   One spacing scale throughout (--space-1..4: 4, 8, 12, 16px); sections are separated by one hairline and 12px; every
   control in the panel is --ctl-h tall. Only the rendered size of the maps changes with the screen: both SVGs keep
   their viewBox, so clicks and saved markers map to the same logical point at any size.
   Arrangements of the two maps, chosen by the room the details have:
     phone / one column ......... maps stacked and centred, options centred under each
     two columns ................ (a tablet's stacked page) rink | net on shared rows, so titles, maps and options
                                  line up across the pair
     column >= 374px ............ maps stacked on the panel's left edge, options in one column beside them
     column < 374px ............. maps stacked and centred, options under each, Result / Rebound with inline labels */
.sd-more { display: block; }
.rv-mark-empty { padding: var(--space-4) 0; font-size: 14px; color: var(--ink-3); }
.sd-col { min-width: 0; padding: var(--space-3) 0; }
.sd-target, .sd-result { border-top: 1px solid var(--steel-soft); }

/* a map section: rows title (with its "?" help at the end of the line; opened, the help flows under the title and
   pushes the map down, never covers it) / orientation / map / status / options */
.sd-origin, .sd-target { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.sd-origin > *, .sd-target > * { grid-column: 1 / -1; min-width: 0; }
.sd-origin > .rv-sec-title, .sd-target > .rv-sec-title { grid-row: 1; align-self: start; display: flex; align-items: center; min-height: 28px; margin: 0; padding-right: 36px; }
.sd-tip { grid-row: 1; }
.sd-tip > summary { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; list-style: none; cursor: pointer;
  border: 1px solid var(--steel); border-radius: 50%; color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1; }
.sd-tip > summary::-webkit-details-marker { display: none; }
.sd-tip > summary:hover, .sd-tip[open] > summary { color: var(--ink); border-color: var(--ink-2); }
.sd-tip > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sd-tip-body { margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--steel); background: rgba(241, 243, 245, .03);
  font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.sd-tip-body p + p { margin-top: var(--space-1); }
/* the net's viewing direction, always visible: short, never behind the help */
.sd-orient { grid-row: 2; margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-2); }
.sd-origin > .sd-rink, .sd-target > .sd-netmap { grid-row: 3; justify-self: center; margin: var(--space-1) 0; }
/* status lines: the marker and the pressed option already say what is marked, so the line is for screen readers,
   except when it says something the picture cannot (a location recorded before points existed; a missed net) */
.sd-origin-status { grid-row: 4; margin: 0; font-size: 12.5px; line-height: 18px; color: var(--text-2); text-align: center; }
.sd-origin-status:not([data-state="zone-only"]):not([data-state="miss"]) { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd-origin-actions { grid-row: 5; justify-content: center; align-items: center; gap: 0 var(--space-4); }
.sd-origin-actions .sd-pick { min-height: 32px; }
@media (pointer: coarse), (max-width: 760px) {
  .sd-origin > .rv-sec-title, .sd-target > .rv-sec-title { min-height: 44px; padding-right: 52px; }
  .sd-tip > summary { width: 44px; height: 44px; }
  .sd-origin-actions .sd-pick { min-height: 44px; padding: 0 var(--space-3); }
}

/* result and rebound: essential, side by side when they fit */
.sd-outcome { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.sd-field { min-width: 0; }
.sd-field-result { flex: 3 1 190px; }
.sd-field-rebound { flex: 1 1 96px; }
.sd-field .rv-sec-title { margin: 0 0 var(--space-1); line-height: 16px; }
.sd-field .sd-seg .rv-seg-btn { min-height: var(--ctl-h); padding: 0 var(--space-2); }

/* more details: labelled, with the current values in the summary; time turns amber once nudged */
.sd-result { padding-bottom: 0; }
.sd-extra { margin-top: var(--space-3); border-top: 1px solid var(--steel-soft); }
.sd-extra > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-3); min-height: var(--ctl-h); padding: var(--space-1) 0; cursor: pointer; list-style: none; }
.sd-extra > summary::-webkit-details-marker { display: none; }
.sd-extra > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sd-extra-title { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ink); white-space: nowrap; }
.sd-extra-title::before { content: "▸"; display: inline-block; width: 12px; color: var(--ink-3); font-size: 11px; }
.sd-extra[open] .sd-extra-title::before { content: "▾"; }
.sd-extra-values { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.sd-extra-value:first-child .sd-extra-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd-extra-values b, .sd-extra .sd-time-value { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sd-extra .sd-time-value.is-moved { color: var(--amber); }
.sd-extra-body { padding: var(--space-1) 0 var(--space-3); }
.sd-extra-body .rv-sec-title { margin: 0 0 var(--space-2); }
.sd-extra-body .sd-help { margin: 0 0 var(--space-2); font-size: 12px; }
.sd-extra-body .sd-gap { margin-top: var(--space-4); }
.sd-extra-clip .rv-detail-actions { margin-top: var(--space-3); }
.sd-full-clip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; }
.sd-full-clip .sd-help { margin: 0; flex: 1 1 14rem; }
@media (pointer: coarse) { .sd-full-clip .btn { min-height: 44px; } }

/* THE TAIL: the period's review line (checked count, "Unchecked only"), then the foot: the shot's status line (Checked
   with the one way back; Not checked; "Unsaved" with Cancel while edits are staged; "Saving…" while a write runs),
   a refused write's message, and Save + Check & next. By default (a phone, the narrow column) the review line is its
   own line above the foot and the foot stacks status over buttons; where there is room (a stacked tablet, a column of
   374px or more) the tail is one grid: status | period, then the buttons. The status line keeps its height in every
   state, so the buttons never move; only a refusal adds its line. */
/* in the flow the tail is no box of its own, so a sticky foot moves within the panel, not within the tail */
.sd-tail { display: contents; }
.sd-review { display: flex; align-items: center; min-height: 32px; border-top: 1px solid var(--steel-soft); }
.sd-progress { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; min-height: 32px; font-size: 12.5px; color: var(--ink-2); }
.sd-progress-text { display: inline-flex; align-items: center; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-progress-n { color: var(--ink); font-weight: 600; }
.sd-progress-word { white-space: pre; }
.sd-progress-mark { display: none; margin-left: var(--space-1); }
.sd-progress-mark svg { display: block; width: 12px; height: 12px; color: var(--ink-2); stroke-width: 2.6; }
.sd-filter { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0; background: none; border: 0; border-radius: 4px;
  color: var(--ink-2); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.sd-filter:hover { color: var(--ink); }
.sd-filter-box { flex: none; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; }
.sd-filter[aria-pressed="true"] { color: var(--ink); }
.sd-filter[aria-pressed="true"] .sd-filter-box { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px var(--surface-1); }
/* the foot */
.sd-foot { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-2) 0; border-top: 1px solid var(--steel-soft); }
.sd-foot .rv-detail-actions { margin-top: 0; }
.sd-check { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 32px; margin: 0; font-size: 13px; color: var(--ink-2); }
.sd-check-state { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.sd-check-state svg { flex: none; width: 14px; height: 14px; color: var(--green); stroke-width: 2.6; }
.sd-check-ring { flex: none; width: 12px; height: 12px; margin: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.sd-check.is-checked .sd-check-state { color: var(--ink); }
.sd-unsaved, .sd-saving { display: none; align-items: center; gap: var(--space-2); font-weight: 600; white-space: nowrap; }
.sd-unsaved { color: var(--amber); }
.sd-unsaved::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: var(--amber); }
.sd-saving { color: var(--ink-2); }
.sd-uncheck, .sd-cancel { min-height: 32px; padding: 0; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.sd-uncheck:hover, .sd-cancel:hover { color: var(--ink); }
.sd-cancel { display: none; color: var(--ink); }
/* staged edits: "Unsaved" and Cancel stand in for the status and "Mark unchecked" until they are saved or cancelled;
   while the write runs the line says so */
.is-dirty .sd-unsaved { display: inline-flex; }
.is-dirty .sd-cancel { display: inline-block; }
.is-dirty .sd-check-state, .is-dirty .sd-uncheck { display: none; }
.is-busy .sd-check-state, .is-busy .sd-uncheck, .is-busy .sd-unsaved, .is-busy .sd-cancel { display: none; }
.is-busy .sd-saving { display: inline-flex; }
.sd-error { display: none; margin: 0 0 var(--space-1); font-size: 12.5px; line-height: 1.4; color: var(--goal); overflow-wrap: anywhere; }
.sd-error:not(:empty) { display: block; }
.sd-filter:focus-visible, .sd-uncheck:focus-visible, .sd-cancel:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 760px) {
  .sd-review, .sd-progress, .sd-check, .sd-uncheck, .sd-cancel, .sd-filter, .sd-extra-body .sd-nudge { min-height: 44px; }
  .sd-extra-body .sd-nudge { min-width: 44px; }
  .sd-extra-body .sd-clip-btn { display: inline-flex; align-items: center; min-height: 44px; }
}

/* THE ACTIONS: Save (secondary), then the primary Check & next (Check shot on the last shot, Next once checked and
   unchanged), which takes the remaining width. The unsaved-changes sentence is a live region for screen readers; its
   visible counterpart is "Unsaved" in the status line above the buttons. */
.sd-save { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
.sd-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd-save .btn { flex: none; min-width: 0; min-height: var(--ctl-h); padding: 0 var(--space-4); font-size: 14px; white-space: nowrap; }
.sd-save .btn:disabled { opacity: .45; cursor: default; }
.sd-save .sd-check-next { flex: 1 1 auto; max-width: 320px; font-weight: 600; }
.sd-check-next.is-done { opacity: .6; }
@media (max-width: 760px) { .sd-save .sd-check-next { max-width: none; } }

/* the one-line tail: status | period on one line over the buttons; the count as "3/6" and a check mark (the words
   stay for screen readers and as the tooltip) */
@container panel (min-width: 640px) and (max-width: 887.98px) {
  .sd-tail { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "check progress" "error error" "actions actions"; column-gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--steel-soft); }
  .sd-review, .sd-foot { display: contents; }
  .sd-check { grid-area: check; min-height: var(--ctl-h); }
  .sd-progress { grid-area: progress; flex: none; min-height: var(--ctl-h); }
  .sd-error { grid-area: error; }
  .sd-save { grid-area: actions; }
  .sd-progress-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sd-progress-mark { display: block; }
}

/* two columns: the rink and the net share their rows */
@container panel (min-width: 640px) and (max-width: 887.98px) {
  .sd-body { display: grid; grid-template-columns: minmax(0, 1.125fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto); column-gap: var(--space-5); }
  .sd-origin, .sd-target { grid-row: 1 / span 5; grid-template-rows: subgrid; border-top: 0; }
  .sd-origin > .sd-rink, .sd-target > .sd-netmap { align-self: end; }
  .sd-origin-actions { align-self: start; }
}
@container panel (max-width: 887.98px) {
  .rv-video { max-height: none; }
}

/* SIDE BY SIDE: the head sits beside the shot bar, at its height; everything under it is the panel */
@container panel (min-width: 888px) {
  .rv-mark-side { container: side / inline-size; margin-top: 0; }
  .rv-mark-side .rv-detail.sd { border-top: 0; }
  .rv-mark-side .rv-detail.sd { --panel-pad: var(--space-4); }
  .rv-mark-side .sd-head { flex-wrap: nowrap; gap: var(--space-2); height: var(--ctl-h); margin: 0 0 var(--space-2);
    padding: 0 var(--space-2) 0 calc(var(--panel-pad) + 1px); border-bottom: 0; }
  .rv-mark-side .sd-head-id { flex: 1 1 auto; flex-wrap: nowrap; gap: var(--space-3); overflow: hidden; white-space: nowrap; }
  .rv-mark-side .sd-title { font-size: 20px; }
  .rv-mark-side .sd-meta { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .rv-mark-side .sd-head-actions { flex: none; gap: 0; }
  /* Delete shot stays a labelled button at the head's right, level with the title (the highlight toggle leads the
     panel below); the title's source line gives way first (ellipsis), never the button's label */
  .rv-mark-side .sd-delete { margin: 0; }
  .rv-mark-side .sd-panel, .rv-mark-side .rv-mark-empty { padding: 0 var(--panel-pad, var(--space-4)); background: var(--surface-1); border: 1px solid var(--steel-soft); border-radius: 8px; }
  .rv-mark-side .rv-mark-empty { padding: var(--space-4); }
  .rv-mark-side .sd-readonly { grid-template-columns: 1fr; gap: var(--space-3); }
  .rv-mark-side .sd-readonly div { padding: 0; border-left: 0; }
  .rv-mark-side .sd-save .sd-check-next { max-width: none; }
  /* THE ACTIONS STAY IN REACH: while the panel is taller than the window, the foot (the narrow column) or the whole
     tail (a wider one, see below) holds to the window's bottom edge; the page scrolls as ever and nothing scrolls
     inside the panel. Scrolled to the panel's end it rests in its own place, so every field can be scrolled clear of
     it. Opaque, the panel's width, its lower corners. */
  .rv-mark-side .sd-foot { position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * var(--panel-pad)); padding: var(--space-2) var(--panel-pad);
    background: var(--surface-1); border-radius: 0 0 7px 7px; }
  /* a short window: sections 8px apart instead of 12px, so the whole panel (not only its actions) fits a 720px screen */
  @media (max-height: 760px) {
    .rv-mark-side .sd-col { padding: var(--space-2) 0; }
    .rv-mark-side .sd-result { padding-bottom: 0; }
    .rv-mark-side .sd-extra { margin-top: var(--space-2); }
  }
  /* both maps stacked: their width follows the height left once everything else has its place */
  .rv-mark-side .sd-panel { --rink-w: clamp(225px, (100vh - 640px) * .65, 300px); --net-w: calc(var(--rink-w) * .9); }
}
/* the narrow column (a 1024px-wide window, where the video already sits at the width its player row needs): 12px of
   panel padding, the head keeps its title and actions, Result and Rebound take their label inline */
@container side (max-width: 373.98px) {
  .rv-mark-side .rv-detail.sd { --panel-pad: var(--space-3); }
  .rv-mark-side .sd-meta { display: none; }
  /* the foot's status line costs a row here, so the sections sit 8px apart as on a short window */
  .rv-mark-side .sd-col { padding: var(--space-2) 0; }
  .rv-mark-side .sd-result { padding-bottom: 0; }
  .rv-mark-side .sd-extra { margin-top: var(--space-2); }
  .rv-mark-side .sd-origin-actions { gap: 0 var(--space-2); }
  .rv-mark-side .sd-outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3); }
  .rv-mark-side .sd-field { display: contents; }
  .rv-mark-side .sd-field .rv-sec-title { margin: 0; letter-spacing: .06em; }
  .rv-mark-side .sd-field .sd-seg .rv-seg-btn { padding: 0 var(--space-1); }
  .rv-mark-side .sd-save .btn { padding: 0 var(--space-3); }
}
/* the regular column: the maps on the panel's left edge in one column (the net centred under the rink), their options
   in one column beside them (the net's orientation label on top of its options), which returns a row per map to the
   maps themselves; the review status on one line */
@container side (min-width: 374px) {
  .rv-mark-side .sd-panel { --rink-w: clamp(225px, (100vh - 470px) * .65, 300px); --net-w: clamp(200px, (100vh - 500px) * .6, 300px); }
  .rv-mark-side .sd-origin, .rv-mark-side .sd-target { grid-template-columns: min(var(--rink-w), max(225px, 100% - 140px)) minmax(0, 1fr); column-gap: var(--space-3); }
  .rv-mark-side .sd-origin > .sd-rink, .rv-mark-side .sd-target > .sd-netmap { grid-column: 1; grid-row: 2 / span 2; }
  .rv-mark-side .sd-origin > .sd-rink { width: 100%; }
  .rv-mark-side .sd-target > .sd-orient { grid-column: 2; grid-row: 2; align-self: end; }
  .rv-mark-side .sd-origin-actions { grid-column: 2; grid-row: 3; align-self: start; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
  .rv-mark-side .sd-origin > .sd-origin-actions { grid-row: 2 / span 2; align-self: center; }
  .rv-mark-side .sd-origin-actions .sd-pick { padding-left: 0; text-align: left; }
  .rv-mark-side .sd-origin-status { text-align: left; }
  /* the whole tail is the persistent block: status | period on one line, then the buttons */
  .rv-mark-side .sd-tail { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "check progress" "error error" "actions actions"; column-gap: var(--space-4); border-top: 1px solid var(--steel-soft);
    margin: 0 calc(-1 * var(--panel-pad)); padding: var(--space-2) var(--panel-pad); background: var(--surface-1); border-radius: 0 0 7px 7px; }
  .rv-mark-side .sd-review, .rv-mark-side .sd-foot { display: contents; }
  .rv-mark-side .sd-check { grid-area: check; min-height: var(--ctl-h); }
  .rv-mark-side .sd-progress { grid-area: progress; flex: none; min-height: var(--ctl-h); }
  .rv-mark-side .sd-error { grid-area: error; }
  .rv-mark-side .sd-save { grid-area: actions; }
  .rv-mark-side .sd-progress-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rv-mark-side .sd-progress-mark { display: block; }
}

/* ================================================================ 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); }
.rv-reel-run { display: grid; gap: 6px; margin-top: 12px; }
.rv-reel-progress, .rv-reel-note { margin: 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rv-reel-run .progress { width: min(360px, 100%); }
@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); }
@media (pointer: coarse) { .rv-speed-btn, .cs-speed-btn { min-width: 44px; min-height: 44px; } }
.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); }
/* The way forward at the end of the panel: Previous, then Next shot (or Finish review on the last shot). */
.cs-flow { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--steel); }
.cs-flow-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-flow-row .btn { flex: 1 1 auto; min-height: 50px; justify-content: center; }
.cs-flow-next { flex: 2 1 auto; }
.cs-flow .form-error:empty { display: none; }
[data-shot-nav].is-busy, [data-finish-open].is-busy { opacity: .6; pointer-events: none; }

/* 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; }
/* The coaching game page's one period selection, and what stays whole-game. */
.cg-period-select { display: grid; gap: 2px; margin-top: 14px; }
.cg-period-select-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cg-scope { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.cg-period-title { margin: 18px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.cg-shot-p { margin-right: 6px; font-size: 13px; color: var(--ink-3); }
.sm-scope { color: var(--ink-3); font-weight: 600; }
.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-flow { 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; }
  /* Six bottom tabs for a goalie (seven with coaching) on a 360px screen: every tab takes an equal share and none
     sets a minimum width, so the bar never overflows. A label longer than its tab ("Faits saillants") wraps to a
     second line inside the same 54px tab instead of being cut. French labels step down a size. */
  .gc-nav a { flex: 1 1 0; min-width: 0; padding: 0 2px; }
  .gc-nav a span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gc-nav:has(> a:nth-child(6)) { padding-left: 0; padding-right: 0; }
  .gc-nav:has(> a:nth-child(6)) a { padding: 0 1px; }
  .gc-nav:has(> a:nth-child(6)) a span { white-space: normal; text-align: center; line-height: 1.1; overflow-wrap: normal;
    max-height: 2.2em; }
  body[data-locale="fr"] .gc-nav a span { font-size: 10.5px; }
  body[data-locale="fr"] .gc-nav:has(> a:nth-child(6)) a span { font-size: 10px; letter-spacing: -.01em; }
  .gc-nav:has(> a:nth-child(7)) a span { font-size: 10px; letter-spacing: -.01em; }
  body[data-locale="fr"] .gc-nav:has(> a:nth-child(7)) a span { font-size: 9px; letter-spacing: -.02em; }
}

/* 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(7, 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.

   Two materials alternate down the page. The film room (the hero, the coach-feedback section, the footer) is
   the application's own charcoal; the paper (featured profiles, the walkthrough, the close) is a warm off-white
   with dark type. The paper sections redefine the ink and rule tokens for their own descendants, so every rule
   here reads the same variables on both materials, as the goalie website does (site.css). Type carries the
   hierarchy, photography carries the mood; the only boxes are the product's own pictures and the profile
   previews. No gradient but the one that lets the hero portrait meet the headline; no glow, no glass. */

.mk { display: block; }
.mk-wrap { 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); }

/* ---------------------------------------------------------------- materials */
.mk-deep { background: var(--canvas-deep); }
.mk-light, .mk-sheet { color: #15181B; color-scheme: light;
  --ink: #15181B; --ink-2: #4B535B; --ink-3: #5F6770; --text-2: #363D44;
  --steel: #D6D2C8; --steel-soft: #E8E4DB; --surface-1: #FFFFFF; --surface-raised: #FFFFFF;
  --mk-accent-deep: #7A6700; }
.mk-light { background: #F5F2EB; }
.mk-sheet { background: #FFFFFF; --steel: #D9D8D3; --steel-soft: #ECEBE7; }
.mk-light a, .mk-sheet a { color: var(--ink); }
.mk-light a:hover, .mk-sheet a:hover { color: #000; }
.mk-light :focus-visible, .mk-sheet :focus-visible { outline-color: #15181B; }
.mk-light .eyebrow, .mk-sheet .eyebrow { color: var(--mk-accent-deep); }
.mk-light .btn, .mk-sheet .btn { background: #FFFFFF; border-color: #C6C1B6; color: #15181B; }
.mk-light .btn:hover, .mk-sheet .btn:hover { background: #FFFFFF; border-color: #15181B; color: #15181B; }
.mk-light .btn-primary, .mk-sheet .btn-primary { background: var(--gold); border-color: #D9C22F; color: var(--green-ink); }
.mk-light .btn-primary:hover, .mk-sheet .btn-primary:hover { background: var(--green-hover); border-color: #D9C22F; color: var(--green-ink); }
.mk-light .text-link, .mk-sheet .text-link { color: var(--ink-2); }
.mk-light .text-link:hover, .mk-sheet .text-link:hover { color: var(--ink); }
.mk-light .mk-example, .mk-sheet .mk-example { color: var(--mk-accent-deep); border-color: rgba(122, 103, 0, .5); background: transparent; }

/* ---------------------------------------------------------------- shared rhythm */
.mk-h2 { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 60px); line-height: .95; letter-spacing: -.006em; max-width: 20ch; }
.mk-h3 { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1; letter-spacing: 0; max-width: 22ch; }
.mk-lead { color: var(--text-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; max-width: 60ch; margin-top: 16px; }
.mk-text { color: var(--text-2); font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.55; max-width: 52ch; 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: clamp(32px, 4vw, 52px); }
.mk-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.mk-section { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.mk-section > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.mk-deep.mk-section { border-top: 1px solid var(--steel-soft); }
/* The public header is sticky, so an anchor must stop below it rather than under it. */
.mk-section[id] { scroll-margin-top: 72px; }

/* ---------------------------------------------------------------- 1. hero: the first viewport does the explaining
   The brand portrait fills the right of the frame; the headline sits in the dark space the photograph leaves at
   the left. One fade at the picture's left edge lets the two meet; the photograph itself is otherwise untouched. */
.mk-hero { position: relative; overflow: hidden; background: #08090B; display: grid; align-items: center;
  min-height: clamp(560px, 80vh, 820px); padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(64px, 7vw, 104px); }
.mk-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: min(66%, 1080px); margin: 0; pointer-events: none; }
.mk-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%); mask-image: linear-gradient(to right, transparent 0, #000 34%); }
.mk-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; }
.mk-hero-copy { max-width: 640px; min-width: 0; }
.mk-headline { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(46px, 6.4vw, 98px); line-height: .9; letter-spacing: -.012em; max-width: 11ch; }
.mk-hero .mk-lead { font-size: clamp(17px, 1.35vw, 20px); max-width: 42ch; margin-top: 22px; color: #C5CCD2; }
.mk-hero .mk-actions { margin-top: 32px; }
.mk-hero .mk-actions .btn-lg { font-size: 17px; padding: 0 22px; min-height: 54px; }
.mk-hero .mk-note { max-width: 46ch; }

/* ---------------------------------------------------------------- 2. featured goalie profiles
   Each preview is the goalie website's first screen, small and faithful, inside a slim browser frame that shows
   the address it lives at. The first is the showcase; the others stack beside it. */
.mk-profiles .mk-head { max-width: 1320px; }
.mk-pv-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }
/* ONE featured profile: a single wide showcase, never a row of copies. The website's first screen (text and
   portrait) sits at the left and, when the owner put the reel on the website, its poster fills the right, like the
   website's own stage above its reel. Without a reel the stage alone spans the card. */
.mk-pv-grid.is-one { grid-template-columns: minmax(0, 1fr); }
.mk-pv-grid.is-one .mk-pv.is-showcase { max-width: 1180px; margin: 0 auto; width: 100%; }
.mk-pv-grid.is-one .mk-pv-site { display: grid; grid-template-columns: minmax(0, 1fr); }
.mk-pv-grid.is-one .mk-pv-site:has(.mk-pv-reel) { grid-template-columns: minmax(0, 12fr) minmax(0, 8fr); }
.mk-pv-grid.is-one .mk-pv-site:has(.mk-pv-reel) .mk-pv-reel { aspect-ratio: auto; min-height: 360px; border-top: 0;
  border-left: 1px solid rgba(241, 243, 245, .08); }
.mk-pv-grid.is-one .mk-pv-site.has-portrait .mk-pv-stage { grid-template-columns: minmax(0, 1fr) clamp(200px, 36%, 300px); }
.mk-pv-col { display: grid; gap: 28px; align-content: stretch; min-width: 0; }
.mk-profiles-foot { margin-top: clamp(28px, 3.5vw, 44px); display: flex; align-items: center; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap; }
.mk-profiles-foot .mk-note { margin-top: 0; max-width: 70ch; }

/* the frame */
.mk-pv { display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border: 1px solid var(--steel);
  border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -18px rgba(21, 24, 27, .22);
  --pv-accent: var(--gold); --pv-accent-ink: #121314; }
.mk-pv[data-accent="ice"] { --pv-accent: #8CC8E0; --pv-accent-ink: #0B1A20; }
.mk-pv[data-accent="red"] { --pv-accent: #E8604C; --pv-accent-ink: #FFFFFF; }
.mk-pv[data-accent="green"] { --pv-accent: #6CC98A; --pv-accent-ink: #0C1A10; }
.mk-pv[data-accent="orange"] { --pv-accent: #F2A24B; --pv-accent-ink: #1A1206; }
.mk-pv[data-accent="violet"] { --pv-accent: #B49CEB; --pv-accent-ink: #120D22; }
.mk-pv-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #EEEBE3; border-bottom: 1px solid var(--steel); }
.mk-pv-dots { display: inline-flex; gap: 5px; flex: none; }
.mk-pv-dots i { width: 9px; height: 9px; border-radius: 50%; background: #C9C4B8; }
.mk-pv-address { flex: 1 1 auto; min-width: 0; padding: 4px 10px; border-radius: 6px; background: #FFFFFF; border: 1px solid #DDD8CE;
  font-family: var(--mono); font-size: 12px; color: #4B535B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pv-bar .mk-example { margin-left: 0; flex: none; }

/* the website's stage, as site.css draws it: near-black, the name in the display face, the facts on a rule */
.mk-pv-site { flex: 1 1 auto; display: flex; flex-direction: column; background: #050607; color: #F1F3F5; container-type: inline-size;
  --ink: #F1F3F5; --ink-2: #9AA3AB; --ink-3: #7F8993; }
.mk-pv-stage { position: relative; overflow: hidden; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0 18px; padding: 22px 22px 24px; }
.mk-pv-site.has-portrait .mk-pv-stage { grid-template-columns: minmax(0, 1fr) 36%; align-items: end; padding-bottom: 0; }
.mk-pv-mark { position: absolute; right: -.04em; top: 50%; transform: translateY(-50%); z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-stretch: condensed; font-weight: 700; line-height: .8; letter-spacing: -.03em;
  font-size: clamp(120px, 44cqi, 260px); color: transparent; -webkit-text-stroke: 1.5px rgba(241, 243, 245, .12); }
.mk-pv-stage { container-type: inline-size; }
.mk-pv-text { position: relative; z-index: 1; min-width: 0; container-type: inline-size; }
.mk-pv-role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pv-accent); }
.mk-pv-role span { color: var(--ink-3); letter-spacing: .1em; }
.mk-pv-name { margin-top: 12px; font-family: var(--font-display); font-stretch: condensed; text-transform: uppercase; line-height: .9; }
.mk-pv-first { display: block; font-size: clamp(14px, 6cqi, 24px); font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.mk-pv-last { display: block; margin-top: .06em; font-size: clamp(28px, 15cqi, 64px); font-weight: 700; letter-spacing: -.005em; overflow-wrap: anywhere; }
.mk-pv-last[data-len="long"] { font-size: clamp(24px, 12cqi, 52px); }
.mk-pv-last[data-len="xlong"] { font-size: clamp(22px, 9.5cqi, 42px); }
.mk-pv-club { margin-top: 12px; font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(14px, 5.6cqi, 21px); line-height: 1.05; letter-spacing: .015em; overflow-wrap: anywhere; }
.mk-pv-club span { display: block; margin-top: 5px; font-size: .8em; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); }
.mk-pv-facts { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(241, 243, 245, .14); display: flex; flex-wrap: wrap; gap: 10px 0; }
.mk-pv-facts div { display: flex; flex-direction: column-reverse; gap: 5px; padding-right: clamp(12px, 4cqi, 22px); margin-right: clamp(12px, 4cqi, 22px);
  border-right: 1px solid rgba(241, 243, 245, .1); }
.mk-pv-facts div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.mk-pv-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); line-height: 1; }
.mk-pv-facts dd { margin: 0; font-family: var(--font-display); font-stretch: condensed; font-weight: 700; font-size: clamp(18px, 6.5cqi, 24px);
  line-height: 1; font-variant-numeric: tabular-nums; }
.mk-pv-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 34px; padding: 0 14px 0 12px; border-radius: 5px;
  background: var(--pv-accent); color: var(--pv-accent-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.mk-pv-cta svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.mk-pv-portrait { position: relative; display: block; align-self: end; aspect-ratio: 4 / 5; overflow: hidden; background: #15181B; }
.mk-pv-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* the reel's poster beneath the stage, with the website's own play pill */
.mk-pv-reel { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0E1113; border-top: 1px solid rgba(241, 243, 245, .08); }
.mk-pv-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-pv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 8px; border-radius: 999px; background: rgba(9, 10, 12, .8); color: #F1F3F5; font-size: 14px; font-weight: 600; white-space: nowrap; }
.mk-pv-play svg { width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: var(--pv-accent); color: var(--pv-accent-ink); fill: currentColor; stroke: none; }

/* the showcase: more room, a larger name */
.mk-pv.is-showcase .mk-pv-stage { padding: clamp(24px, 3cqi, 36px) clamp(24px, 3cqi, 36px) clamp(26px, 3cqi, 36px); }
.mk-pv.is-showcase .mk-pv-site.has-portrait .mk-pv-stage { padding-bottom: 0; }
.mk-pv.is-showcase .mk-pv-last { font-size: clamp(36px, 16cqi, 92px); }
.mk-pv.is-showcase .mk-pv-last[data-len="long"] { font-size: clamp(30px, 12.5cqi, 72px); }
.mk-pv.is-showcase .mk-pv-last[data-len="xlong"] { font-size: clamp(26px, 10cqi, 56px); }
.mk-pv.is-showcase .mk-pv-first { font-size: clamp(18px, 6cqi, 30px); }
.mk-pv.is-showcase .mk-pv-club { font-size: clamp(17px, 5.6cqi, 26px); }
.mk-pv.is-showcase .mk-pv-facts dd { font-size: clamp(22px, 6.5cqi, 30px); }

/* the readable foot: who this is, and the way in */
.mk-pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px;
  border-top: 1px solid var(--steel); background: #FFFFFF; }
.mk-pv-who { display: grid; min-width: 0; gap: 2px; }
.mk-pv-who strong { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.mk-pv-who span { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.mk-pv-demo-note { font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- 3. the walkthrough: three steps, then what they produce */
.mk-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px; border-top: 1px solid var(--steel); }
.mk-step { position: relative; padding-top: 26px; min-width: 0; }
.mk-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 36px; border-top: 2px solid var(--gold); }
.mk-step-no { font-family: var(--font-display); font-stretch: condensed; font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--mk-accent-deep); }
.mk-step-title { margin-top: 10px; font-family: var(--font-display); font-stretch: condensed; font-size: clamp(24px, 2vw, 30px);
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; }
.mk-step-text { margin-top: 10px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; max-width: 36ch; }
.mk-shown { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.mk-shown.is-one { grid-template-columns: minmax(0, 1fr); }
.mk-shown.is-one .mk-capture { max-width: 980px; }
/* the two season maps side by side (net, then rink), each the same width; the tools beneath them */
.mk-shown-maps { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.mk-shown + .mk-shown { margin-top: 28px; }
.mk-how > .mk-note { margin-top: 24px; }

/* a capture of a product page: the picture, then its caption and the Example tag on a rule beneath */
.mk-capture { position: relative; margin: 0; min-width: 0; border: 1px solid var(--steel); border-radius: var(--radius-card); overflow: hidden;
  background: var(--surface-1); box-shadow: 0 24px 48px -20px rgba(21, 24, 27, .22); }
.mk-capture img { display: block; width: 100%; height: auto; }
.mk-capture-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px;
  border-top: 1px solid var(--steel-soft); background: var(--surface-1); }
.mk-capture-caption { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.mk-capture-foot .mk-example { margin: 0; flex: none; }
.mk-deep .mk-capture { box-shadow: 0 24px 60px rgba(0, 0, 0, .42); }
.mk-deep .mk-capture-foot { background: #0E1113; }

/* ---------------------------------------------------------------- 4. coach feedback: the shot as a review shows it */
.mk-feedback-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.mk-feedback-copy, .mk-feedback-figure { min-width: 0; }
.mk-features { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.mk-features li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.3; }
.mk-features svg { width: 18px; height: 18px; flex: none; color: var(--gold); stroke-width: 1.8; }

.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: 14px; 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: 20px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.mk-shot-id i, .mk-shot-meta i { color: var(--ink-3); font-style: normal; margin: 0 2px; }
.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); white-space: nowrap; }
.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(--gold); border: 1px solid rgba(242, 217, 59, .45);
  border-radius: var(--radius-tag); padding: 2px 8px; white-space: nowrap; background: rgba(9, 10, 12, .8); }
.mk-shot-body { display: grid; grid-template-columns: minmax(0, 1fr) 216px; }
.mk-shot-film { min-width: 0; border-right: 1px solid var(--steel-soft); background: #050607; }
.mk-still { display: block; }
.mk-still img { display: block; width: 100%; height: auto; }
/* a still's transport: play glyph, the scrubber with the shot's marker and the playhead, the speed */
.mk-transport { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #0E1113; }
.mk-t-play { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-btn); color: var(--ink); }
.mk-t-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.mk-scrub { position: relative; flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--steel); }
.mk-scrub-head { position: absolute; left: 22%; top: -5px; width: 6px; height: 14px; border-radius: 3px; background: var(--gold); }
.mk-scrub-shot { position: absolute; left: 56%; top: -4px; width: 2px; height: 12px; background: var(--goal); }
.mk-t-speed { flex: none; font-family: var(--font-display); font-stretch: condensed; font-size: 15px; font-weight: 700;
  letter-spacing: .06em; color: var(--ink); border: 1px solid var(--steel); border-radius: var(--radius-btn); padding: 3px 10px; }
.mk-panel { padding: 16px; display: grid; gap: 12px; align-content: start; background: #0E1113; }
.mk-panel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; 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-sample { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--gold); border: 1px solid rgba(242, 217, 59, .45);
  border-radius: var(--radius-tag); padding: 1px 6px; }
.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: 14px; line-height: 1.5; margin-top: -6px; }

/* coaches, under the feedback: an invitation from a goalie, not a market */
.mk-coach { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--steel-soft);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.mk-coach-copy, .mk-coach-side { min-width: 0; }
.mk-connect-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-coach-side .mk-note { max-width: 46ch; }

/* ---------------------------------------------------------------- 5. the close */
.mk-close { padding: clamp(72px, 9vw, 132px) var(--gutter); text-align: center; border-top: 1px solid var(--steel-soft); }
.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-actions { justify-content: center; }
.mk-close .mk-note { max-width: 46ch; }

.mk-footer { padding: 34px var(--gutter) 54px; background: var(--canvas-deep); }
.mk-footer > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.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-art { width: 58%; }
  .mk-hero-copy { max-width: 520px; }
  .mk-headline { max-width: 12ch; }
  .mk-pv-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-pv-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-shown { grid-template-columns: minmax(0, 1fr); }
  .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-panel-note { max-width: 60ch; }
  .mk-feedback-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mk-feedback-copy .mk-text { max-width: 62ch; }
  .mk-coach { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------------------------------------------------------------- phone
   375 / 390 / 430: the portrait becomes a band above the headline (its own crop), the previews stack, the
   steps stack. 760px is where the rest of this stylesheet already turns the product mobile. */
@media (max-width: 760px) {
  .mk-hero { display: block; min-height: 0; padding: 0 0 36px; }
  .mk-hero-art { position: static; display: block; width: auto; aspect-ratio: 860 / 688; max-height: 62vh; }
  .mk-hero-art img { object-position: center top;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%); mask-image: linear-gradient(to top, transparent 0, #000 30%); }
  .mk-hero-inner { padding: 0 16px; margin-top: -44px; }
  .mk-headline { font-size: clamp(40px, 11.5vw, 52px); max-width: 12ch; }
  .mk-hero .mk-lead { font-size: 16.5px; margin-top: 16px; }
  .mk-actions { margin-top: 24px; gap: 10px; }
  .mk-hero .mk-actions .btn-lg { width: 100%; }
  .mk-section { padding: 56px 16px; }
  .mk-head { margin-bottom: 28px; }
  .mk-h2 { font-size: clamp(30px, 8.8vw, 40px); max-width: 16ch; }
  .mk-h3 { font-size: clamp(24px, 7.2vw, 30px); }

  .mk-pv-grid, .mk-pv-col { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mk-pv-grid.is-one .mk-pv-site:has(.mk-pv-reel) { grid-template-columns: minmax(0, 1fr); }
  .mk-pv-grid.is-one .mk-pv-site:has(.mk-pv-reel) .mk-pv-reel { aspect-ratio: 16 / 9; min-height: 0; border-left: 0;
    border-top: 1px solid rgba(241, 243, 245, .08); }
  .mk-pv-grid.is-one .mk-pv-site.has-portrait .mk-pv-stage { grid-template-columns: minmax(0, 1fr); }
  .mk-pv-bar { padding: 8px 10px; }
  .mk-pv-site.has-portrait .mk-pv-stage { grid-template-columns: minmax(0, 1fr); }
  .mk-pv-site.has-portrait .mk-pv-portrait { order: -1; aspect-ratio: 5 / 4; max-height: 320px; margin: -22px -22px 18px; }
  .mk-pv-site.has-portrait .mk-pv-portrait img { object-position: 50% 25%; }
  .mk-pv.is-showcase .mk-pv-site.has-portrait .mk-pv-portrait { margin: -24px -24px 18px; }
  .mk-pv-foot { padding: 12px 14px; }
  .mk-pv-foot .btn { width: 100%; }
  .mk-profiles-foot .btn { width: 100%; }

  .mk-steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; }
  .mk-step { padding: 22px 0 0; }
  .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-step::before { top: -1px; width: 28px; }
  .mk-step-text { max-width: none; }
  .mk-shown { gap: 20px; }
  .mk-shown-maps { grid-template-columns: minmax(0, 1fr); }
  .mk-shown + .mk-shown { margin-top: 20px; }
  .mk-capture-foot { flex-wrap: wrap; }

  .mk-shot-bar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .mk-shot-id { font-size: 17px; }
  .mk-transport { gap: 10px; padding: 10px 12px; }
  .mk-panel { gap: 10px; }
  .mk-features { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mk-connect-cta .btn { width: 100%; }

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

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

/* ------------------------------------------------------------------ profile photos (schema v14)
   A photo sits on top of the person's initial inside the mark they already had (same size, same ring), so where
   there is no photo, or it fails to load, nothing about the page changes. The hero shows a photo only when one
   exists (D3); the frozen portrait (page atmosphere) sits on the right, the photo on the left, never in its zone. */
.gc-avatar, .person-mark, .pf-photo-mark { position: relative; overflow: hidden; }
.has-photo > img[data-avatar-img] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.has-photo { color: transparent; }

.pf-avatar { flex: none; align-self: flex-end; width: 136px; height: 136px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--steel); background: var(--surface-raised); box-shadow: 0 0 0 6px rgba(15, 17, 19, .55); }
.pf-avatar:empty, .pf-avatar[hidden] { display: none; }
.pf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-hero-row:has(> .pf-avatar:not([hidden]):not(:empty)) { justify-content: flex-start; column-gap: 32px; }
.pf-hero-row:has(> .pf-avatar:not([hidden]):not(:empty)) > .pf-hero-actions { margin-left: auto; }
/* the frozen portrait (.is-profile) is composed for a name whose widest line ends 760px from the content's left
   edge; with a photo (136px + 32px gap) the text column is narrowed by the same amount, so that line ends where it
   always did and the portrait's composition is untouched */
.pf-hero-row:has(> .pf-avatar:not([hidden]):not(:empty)) > .pf-hero-main { flex: 1 1 320px; max-width: 592px; }
/* while Edit profile is open the hero's presentation is hidden; the photo goes with it */
.pf-hero:has(> form[data-form="identity"]:not([hidden])) .pf-avatar { display: none; }

/* Edit profile: the photo row at the top of the identity form */
.pf-photo-edit { display: flex; align-items: center; gap: 18px; margin: 4px 0 22px; padding: 14px 16px; border: 1px solid var(--steel-soft);
  border-radius: var(--radius-card); background: var(--surface-1); }
.pf-photo-mark { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 50%; border: 1px solid var(--steel);
  background: var(--surface-control); font-family: var(--font-display); font-stretch: condensed; font-size: 30px; font-weight: 700; color: var(--ink); }
.pf-photo-mark.has-photo { color: transparent; }
.pf-photo-edit-text { min-width: 0; }
.pf-photo-edit-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.pf-photo-edit-help { margin-top: 4px; font-size: 13px; color: var(--ink-2); max-width: 60ch; }
.pf-photo-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* the square crop */
.photo-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--steel); border-radius: var(--radius-card);
  background: var(--surface-content); color: var(--ink); }
.photo-dialog::backdrop { background: rgba(5, 6, 7, .72); }
.photo-dialog-body { padding: 22px 22px 18px; }
.photo-dialog-title { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1.05; }
.photo-dialog-help { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.photo-stage { position: relative; width: 100%; aspect-ratio: 1; margin-top: 16px; overflow: hidden; border-radius: var(--radius-btn);
  background: var(--surface-film); cursor: grab; touch-action: none; user-select: none; }
.photo-stage.is-dragging { cursor: grabbing; }
.photo-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.photo-stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
/* the circle is what most surfaces show; the corners outside it are dimmed, and the stored photo is the full square */
.photo-stage-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(5, 6, 7, .55);
  outline: 1px solid rgba(241, 243, 245, .5); outline-offset: -1px; pointer-events: none; }
.photo-zoom { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.photo-zoom input { flex: 1; accent-color: var(--gold); }
.photo-dialog .form-actions { margin-top: 16px; }

@media (max-width: 760px) {
  .pf-avatar { width: 96px; height: 96px; align-self: flex-start; }
  .pf-hero-row:has(> .pf-avatar:not([hidden]):not(:empty)) > .pf-hero-main { flex-basis: 100%; max-width: 760px; }
  .pf-photo-edit { align-items: flex-start; }
  .pf-photo-mark { width: 60px; height: 60px; font-size: 26px; }
}

/* ================================================================ the goalie website: the owner's controls (schema v16) */
/* On the owner's profile only: the address, who can see it, the preview. Rules and type, no box; the choice is a
   two-word segmented control with the current state in ink, never a toggle that hides what it means. */
.pf-site { margin-top: 6px; padding: 20px 0 22px; border-top: 1px solid var(--steel); }
.pf-site-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.pf-site-label { display: block; margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pf-site-address { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; }
.pf-site-url { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; line-height: 1.1; min-width: 0; }
.pf-site-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-site-slug { display: flex; align-items: stretch; max-width: 560px; margin-top: 8px; border: 1px solid var(--steel);
  border-radius: var(--radius-input); background: var(--surface-content); }
.pf-site-slug:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(242, 217, 59, .18); }
.pf-site-host { display: flex; align-items: center; padding: 0 2px 0 12px; font-size: 15px; color: var(--ink-3); white-space: nowrap; }
.pf-site-slug input { flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 0; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 600; }
.pf-site-choice { display: inline-flex; margin-top: 8px; border: 1px solid var(--steel); border-radius: var(--radius-btn); overflow: hidden; }
.pf-site-option { height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.pf-site-option + .pf-site-option { border-left: 1px solid var(--steel); }
.pf-site-option.is-on { background: var(--surface-selected); color: var(--ink); }
.pf-site-option:not(.is-on):hover { color: var(--ink); }
.pf-site .pf-fine { margin-top: 8px; }
/* What the website shows (schema v23): one quiet form under the visibility controls. Checkbox rows, a short list of
   games (each with its footage tick), six accent swatches, one Save. */
.pf-site-content { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--steel-soft); }
.pf-site-subtitle { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; letter-spacing: .005em; }
.pf-site-content-head .pf-fine { max-width: 72ch; }
.pf-site-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.35; }
.pf-site-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--gold); }
.pf-site-check-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pf-site-check:has(input:disabled) { cursor: default; color: var(--ink-3); }
.pf-site-empty { max-width: 60ch; }
.pf-site-games { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--steel-soft); }
.pf-site-game { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 24px; align-items: start; border-bottom: 1px solid var(--steel-soft); }
.pf-site-game .pf-site-check { margin-top: 0; }
.pf-site-game-opp { display: block; font-family: var(--font-display); font-stretch: condensed; font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; overflow-wrap: anywhere; }
.pf-site-game:not(.is-on) .pf-site-game-footage { opacity: .5; }
.pf-site-accents { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.pf-site-accent { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--steel); border-radius: var(--radius-btn); cursor: pointer; font-size: 14px; font-weight: 500; }
.pf-site-accent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-site-accent:has(input:checked) { border-color: var(--ink); background: var(--surface-selected); }
.pf-site-accent:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.pf-site-swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }
.pf-site-accent[data-accent="ice"] .pf-site-swatch { background: #8CC8E0; }
.pf-site-accent[data-accent="red"] .pf-site-swatch { background: #E8604C; }
.pf-site-accent[data-accent="green"] .pf-site-swatch { background: #6CC98A; }
.pf-site-accent[data-accent="orange"] .pf-site-swatch { background: #F2A24B; }
.pf-site-accent[data-accent="violet"] .pf-site-swatch { background: #B49CEB; }
.pf-site-content-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 18px; }
.pf-site-content-actions .pf-fine { margin: 0; }

.site-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--steel); border-radius: var(--radius-card);
  background: var(--surface-content); color: var(--ink); }
.site-dialog::backdrop { background: rgba(5, 6, 7, .72); }
.site-dialog-body { padding: 22px 22px 18px; }
.site-dialog-title { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1.05; }
.site-dialog-label { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.site-dialog-url { margin-top: 6px; font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; line-height: 1.1; }
.site-dialog-text { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.site-dialog-text strong { color: var(--ink); font-weight: 600; }
.site-dialog-confirm { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--steel);
  border-radius: var(--radius-btn); font-size: 14px; line-height: 1.45; cursor: pointer; }
.site-dialog-confirm input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--gold); }
.site-dialog .form-actions { margin-top: 16px; }
@media (max-width: 760px) {
  .pf-site-url { font-size: 21px; }
  .pf-site-option { height: 44px; }
}
/* three states on a phone: one per row, the same control stacked */
@media (max-width: 520px) {
  .pf-site-choice { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .pf-site-game { grid-template-columns: minmax(0, 1fr); }
  .pf-site-game .pf-site-game-footage { padding-top: 0; padding-left: 32px; }
  .pf-site-content-actions .btn { width: 100%; }
  .pf-site-option { text-align: left; }
  .pf-site-option + .pf-site-option { border-left: 0; border-top: 1px solid var(--steel); }
}


/* ================================================================ SHOT BAR (templates/app/_review.html::shot_bar)
   Navigation only, one row above the video: Previous / Next, then the numbered shots. Only the strip scrolls sideways
   (no scrollbar of its own, so the row keeps its height: the arrows, P / N, Tab, a sideways swipe or Shift + wheel
   move it, and the selected number is always brought into view; a vertical wheel over it scrolls the page as anywhere). Every button is --ctl-h square (40px, 44px on touch). The selected
   shot is filled (and aria-current); a checked shot carries a small check badge (and says so in its name), never
   colour alone. The check status, the period's progress and "Unchecked only" are in the shot's details (.sd-review). */
.sb { display: flex; align-items: center; gap: var(--space-2); min-width: 0; height: var(--ctl-h); margin: 0 0 var(--space-2); }
.sb[hidden] { display: none; }
.sb-step { flex: none; display: grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); padding: 0; background: transparent;
  border: 1px solid var(--steel); border-radius: var(--radius-btn); color: var(--ink); cursor: pointer; }
.sb-step svg { width: 16px; height: 16px; }
.sb-step:hover:not(:disabled) { border-color: var(--ink-3); }
.sb-step:disabled { opacity: .35; cursor: default; }
.sb-strip { flex: 1 1 auto; min-width: 0; height: var(--ctl-h); display: flex; align-items: center; gap: var(--space-1); overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none; }
.sb-strip::-webkit-scrollbar { display: none; }
.sb-shot { position: relative; flex: none; min-width: var(--ctl-h); height: var(--ctl-h); padding: 0 var(--space-2); background: transparent;
  border: 1px solid var(--steel-soft); border-radius: var(--radius-btn); color: var(--text-2); cursor: pointer;
  font-family: var(--font-display); font-stretch: condensed; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-shot:hover { border-color: var(--ink-3); color: var(--ink); }
.sb-shot:focus-visible, .sb-step:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.sb-shot.is-selected { background: var(--ink); border-color: var(--ink); color: #0A0C0D; font-weight: 700; }
.sb-shot.is-selected:focus-visible { outline-offset: -4px; outline-color: #0A0C0D; box-shadow: 0 0 0 2px var(--green); }
.sb-tick { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 12px; height: 12px;
  border-radius: 50%; background: var(--green); color: #0A0C0D; }
.sb-tick svg { width: 8px; height: 8px; stroke-width: 3.4; }
.sb-shot[hidden] { display: none; }
.sb.is-busy .sb-shot, .sb.is-busy .sb-step { cursor: progress; }

/* the shot list's own check mark */
.rv-shot-check { display: inline-flex; margin-left: 4px; color: var(--green); }
.rv-shot-check svg { width: 12px; height: 12px; stroke-width: 2.6; }


/* ================================================================ PERIOD FOOTAGE (templates/app/_review.html::footage_panel)
   Under the marking controls: the period's shot count, its marking state and the two steps from marking to clips-only
   (Finish marking; Confirm clips & delete full video). One quiet block between hairlines, on the same spacing scale as
   the marking panel; the stage word carries a dot whose colour is the state (steel while marking, amber while a
   deletion is pending, ink once only clips remain). The preview switch and Play all sit on their own row. */
.rv-footage { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--steel-soft); border-bottom: 1px solid var(--steel-soft); }
.rv-footage-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.rv-footage-head .rv-sec-title { margin: 0; color: var(--ink); }
.rv-footage-stage { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rv-footage-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rv-footage.is-preparing .rv-footage-dot { background: var(--amber); box-shadow: none; }
.rv-footage.is-clips-ready .rv-footage-dot { background: var(--green); box-shadow: none; }
.rv-footage.is-deletion-pending .rv-footage-dot { background: var(--amber); box-shadow: none; }
.rv-footage.is-clips-only .rv-footage-dot { background: var(--ink); box-shadow: none; }
.rv-footage.is-blocked .rv-footage-dot { box-shadow: inset 0 0 0 1.5px var(--amber); }
.rv-footage-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rv-footage-facts .is-done { color: var(--ink); }
.rv-footage-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); }
.rv-footage-kicker { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.rv-footage-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.rv-footage-text.is-warn, .rv-footage-text .is-warn { color: var(--amber); }
.rv-footage-error { display: block; margin-top: 2px; font-size: 12.5px; color: var(--goal); }
.rv-footage-recover, .rv-footage-running { display: block; margin-top: 4px; color: var(--text-2); }
.rv-footage-hint { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.rv-footage-step > .progress { grid-column: 1 / -1; }
/* the deployment switch is off: its explanation takes the actions' place, on a row of its own (not the narrow actions column) */
.rv-footage-step > [data-release-not-enabled] { grid-column: 1 / -1; }
.rv-footage-note, .rv-footage-status { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rv-footage-status { color: var(--amber); }
.rv-footage-status::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: gc-busy .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rv-footage-status::before { animation: none; } }
.rv-footage-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.rv-footage-evidence .rv-footage-text { flex: 1 1 280px; }
.rv-footage-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rv-footage-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.rv-footage-play .rv-seg-btn[aria-pressed="true"]::before { content: none; }
.rv-footage-play .rv-seg-btn { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.rv-play-all svg { width: 14px; height: 14px; fill: currentColor; }
.rv-play-all[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.rv-clip-stage { margin-top: 0; }
@media (max-width: 760px) {
  .rv-footage-step { grid-template-columns: minmax(0, 1fr); }
  .rv-footage-step .btn, .rv-footage-actions .btn, .rv-footage-evidence .btn { width: 100%; min-height: 44px; }
  .rv-footage-play .rv-seg { flex: 1 1 100%; }
  .rv-footage-play .rv-seg-btn { flex: 1; min-height: 44px; }
  .rv-play-all { flex: 1 1 100%; min-height: 44px; }
}
@media (pointer: coarse) { .rv-footage .btn, .rv-footage-play .rv-seg-btn { min-height: 44px; } }

/* the delete confirmation: the consequences as a list, the zero-shot warning and its checkbox, the error line */
.rv-release-dialog { width: min(520px, calc(100vw - 32px)); }
.rv-release-subject { margin: var(--space-1) 0 var(--space-3); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.rv-release-summary { margin: 0 0 var(--space-3); line-height: 1.45; }
.rv-release-dialog .rv-release-warn + .rv-release-list { margin-top: var(--space-3); }
@media (max-width: 480px) {
  .rv-release-dialog .confirm-actions { flex-direction: column; align-items: stretch; }
  .rv-release-dialog .confirm-actions .btn { flex: none; width: 100%; white-space: normal; }
}
.rv-release-list { margin: 0; padding: 0 0 0 18px; display: grid; gap: var(--space-2); line-height: 1.45; }
.rv-release-warn { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--amber); background: rgba(227, 174, 75, .08); color: var(--ink); font-size: 14px; }
.rv-release-ack { margin-top: var(--space-3); min-height: 44px; align-items: center; }
.rv-release-dialog .form-error:empty { display: none; }
.rv-release-dialog .form-error { margin-top: var(--space-3); }

/* the saved clip's boundaries, inside More details */
.sd-window-kind { margin-left: var(--space-2); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--ink-3); }
.sd-window-value { margin: 0 0 var(--space-2); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sd-window-value.is-moved { color: var(--amber); }
.sd-window-nudge .sd-nudge:nth-child(2) { border-radius: 0 4px 4px 0; margin-right: 6px; }
.sd-window-nudge .sd-nudge:nth-child(3) { border-radius: 4px 0 0 4px; }
.sd-window-nudge .sd-nudge:nth-child(4) { border-radius: 0 4px 4px 0; margin-right: 6px; }

/* ================================================================ GAME ACTIONS MENU (⋯) AND DELETING A GAME
   The owner's game-level actions sit behind one quiet button: on a Games tile in the picture's top corner, on the game
   page in the header's corner -- never among the playback or review controls. The only entry today is the
   destructive "Delete game", drawn in the goal colour. Touch targets are 44px. */
.gc-menu { position: relative; z-index: 3; }
.gc-menu-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent;
  border-radius: var(--radius-btn); background: transparent; color: var(--ink-2); cursor: pointer; }
.gc-menu-button svg { width: 22px; height: 22px; }
.gc-menu-button:hover, .gc-menu.is-open .gc-menu-button { color: var(--ink); background: var(--surface-raised); border-color: var(--steel); }
.gc-menu-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gc-menu-list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; padding: 6px; border: 1px solid var(--steel);
  border-radius: var(--radius-btn); background: var(--surface-overlay); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.gc-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink); font: 500 15px/1.2 var(--font-ui); text-align: left; cursor: pointer; }
.gc-menu-item svg { width: 18px; height: 18px; flex: none; }
.gc-menu-item.is-danger { color: var(--goal); }
.gc-menu-item:hover, .gc-menu-item:focus-visible { background: var(--danger-soft); outline: none; }
.gc-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--goal); }
/* on a Games tile: over the picture, readable on any frame; above the tile-wide link */
.lib-menu { position: absolute; top: 8px; right: 8px; }
.lib-menu .gc-menu-button { background: rgba(9, 10, 12, .72); color: var(--ink); border-color: rgba(241, 243, 245, .16); }
.lib-menu .gc-menu-button:hover, .lib-menu.is-open .gc-menu-button { background: rgba(9, 10, 12, .92); border-color: var(--ink-2); }
/* on the game page: the header's corner */
.rv-head.has-menu { position: relative; padding-right: 56px; }
.rv-head-menu { position: absolute; top: 0; right: 0; }

/* the confirmation: the game it names, what goes, the typed word when footage or coaching exists, the states after */
.gd-dialog { width: min(500px, calc(100vw - 32px)); }
.gd-subject { margin: var(--space-2) 0 0; color: var(--ink); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.gd-dialog .confirm-text p + p { margin-top: var(--space-2); }
.gd-irreversible { color: var(--goal); font-weight: 600; }
.gd-typed { margin-top: var(--space-4); display: grid; gap: 6px; }
.gd-typed .field span { font-size: 14px; color: var(--ink); font-weight: 600; }
.gd-word { width: 100%; min-height: 44px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.gd-state { margin-top: var(--space-3); }
.gd-state-text { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.gd-dialog.is-deleting .confirm-title::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px;
  border: 2px solid var(--ink-3); border-top-color: var(--ink); border-radius: 50%; vertical-align: 2px; animation: gd-spin .9s linear infinite; }
@keyframes gd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gd-dialog.is-deleting .confirm-title::after { animation: none; } }
.gd-dialog .form-error:not(:empty) { margin-top: var(--space-3); }
/* the permanent action is unmistakable: filled in the goal colour (the reversible ones stay outlined) */
.gd-dialog .gd-confirm { background: var(--goal); border-color: var(--goal); color: #160806; font-weight: 600; }
.gd-dialog .gd-confirm:hover:not(:disabled) { background: #F06E5D; border-color: #F06E5D; color: #160806; }
.gd-dialog .gd-confirm:disabled { background: transparent; border-color: rgba(232, 92, 74, .35); color: rgba(232, 92, 74, .6); cursor: not-allowed; }
.gd-dialog .gd-confirm svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .gd-dialog { padding: 20px; }
  .gd-dialog .confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .gd-dialog .confirm-actions .btn { flex: none; width: 100%; white-space: normal; }
}

/* Games: a confirmed deletion still running or incomplete, and the success line once it is done */
.gd-done { margin: 0 0 var(--space-5); }
.gd-done svg { color: var(--gold); }
.gd-tiles { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.gd-tile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  padding: 16px 18px; border: 1px solid var(--steel); border-left: 3px solid var(--ink-3); border-radius: var(--radius-btn); background: var(--surface-1); }
.gd-tile.is-incomplete { border-left-color: var(--goal); }
.gd-tile-copy { min-width: 0; display: grid; gap: 4px; }
.gd-tile-game { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.gd-tile-state { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gd-tile.is-incomplete .gd-tile-state { color: var(--goal); }
.gd-tile-text { font-size: 14px; color: var(--ink-2); line-height: 1.45; max-width: 62ch; }
.gd-tile .btn { min-height: 44px; }
@media (max-width: 480px) { .gd-tile .btn { width: 100%; } }
/* ================================================================ HIGHLIGHT REEL (schema v18)
   The goalie's one highlight reel: the profile's main media (pf-reel), the reel editor (/app/highlights, hr-*) and the
   sequence controls in a game's shot panel (sd-seq). Footage is the hero; the gold accent marks the one primary action
   (Publish) and the reel's length meter. Every control is a 44px touch target on a phone. */

/* ---------------------------------------------------------------- profile */
.pf-reel { margin: 4px 0 6px; }
.pf-reel-figure { margin: 0; }
.pf-reel-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.pf-reel-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pf-reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center;
  gap: 12px; min-height: 56px; padding: 0 24px 0 14px; border: 0; border-radius: 999px; background: rgba(8, 9, 10, .72);
  color: var(--ink); font: 600 16px/1 var(--font-ui); cursor: pointer; backdrop-filter: blur(6px);
  transition: background .15s var(--ease), transform .15s var(--ease); }
.pf-reel-play:hover { background: rgba(8, 9, 10, .88); transform: translate(-50%, -50%) scale(1.03); }
.pf-reel-play:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.pf-reel-play[hidden] { display: none; }
.pf-reel-play-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--green-ink); }
.pf-reel-play-icon svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; }
.pf-reel-play-time { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.pf-reel-play-text, .pf-reel-play-time { white-space: nowrap; }
.pf-reel-caption { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 14px 2px 0; }
.pf-reel-kicker { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pf-reel-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--steel); border-radius: var(--radius-tag);
  font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pf-reel-chip.is-busy { border-color: rgba(242, 217, 59, .45); color: var(--gold); }
.pf-reel-edit { margin-left: auto; min-height: 44px; }
.pf-reel-note { margin-top: 10px; }
.pf-reel-empty { display: grid; gap: 10px; justify-items: start; padding: 28px clamp(18px, 3vw, 34px); border: 1px dashed #3A4246;
  border-radius: var(--radius-card); background: linear-gradient(180deg, rgba(27, 31, 35, .7), rgba(15, 17, 19, .4)); }
.pf-reel-empty .pf-reel-kicker { margin: 0; }
.pf-reel-empty p { max-width: 62ch; color: var(--text-2); }
.pf-reel-empty .pf-empty-title { color: var(--ink); }
.pf-reel-empty.is-processing { border-style: solid; border-color: rgba(242, 217, 59, .35); }

/* ---------------------------------------------------------------- editor */
.gc-main.hr-page { max-width: 1240px; }
.hr-head { padding-bottom: 26px; }
.hr-head .display { font-size: clamp(40px, 5vw, 68px); line-height: .92; }
.hr-lede { margin-top: 12px; max-width: 68ch; color: var(--ink-2); font-size: 15px; }
.hr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.hr-stage { position: sticky; top: 18px; display: grid; gap: 14px; }
.hr-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-film); }
.hr-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.hr-player-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--ink-2);
  font-size: 14px; background: radial-gradient(ellipse at center, #15181B 0%, #050607 75%); }
.hr-player-empty[hidden] { display: none; }
.hr-now-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.hr-now { min-height: 20px; font-size: 13.5px; color: var(--text-2); }
.hr-meter { padding: 16px 18px; border: 1px solid var(--steel-soft); border-radius: var(--radius-card); background: var(--surface-1); }
.hr-total { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hr-total-now { font-size: 40px; color: var(--ink); }
.hr-total-max { font-size: 24px; color: var(--ink-3); }
.hr-bar { position: relative; height: 8px; margin: 12px 0 8px; border-radius: 999px; background: var(--steel-soft); overflow: hidden; }
.hr-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--green); transition: width .25s var(--ease); }
.hr-bar.is-over .hr-bar-fill { background: var(--goal); }
.hr-remaining { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hr-remaining.is-over { color: var(--goal); font-weight: 600; }
.hr-publish { display: grid; gap: 8px; }
.hr-save { min-height: 18px; font-size: 13px; color: var(--ink-3); }
.hr-save[data-state="failed"] { color: var(--goal); }
.hr-save[data-state="unsaved"] { color: var(--amber); }
.hr-status { font-size: 14.5px; color: var(--text-2); }
.hr-status[data-state="PUBLISHING"] { color: var(--gold); }
.hr-progress, .hr-note { margin: 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hr-progress { color: var(--gold); }
.hr-issues { margin: 0; padding-left: 18px; color: var(--amber); font-size: 13.5px; }
.hr-issues:empty { display: none; }
.hr-publish-actions { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 4px; }
.hr-publish-btn { min-width: 190px; }
.hr-publish-btn[aria-busy="true"] { cursor: progress; }
.hr-fine { font-size: 12.5px; color: var(--ink-3); max-width: 60ch; }
.coach-action-error { flex-basis: 100%; margin: 0; }
/* Studio: the Space shortcut, said once near the playback controls. */
.cs-space-hint { margin: 0 0 6px; font-size: 12px; color: var(--ink-3); }
.gopro-preparing { display: grid; gap: 6px; margin-top: 6px; }
.gopro-preparing p { margin: 0; color: var(--text-2); }
.rv-stage-note.is-warn { color: var(--amber); }
@media (hover: none) and (pointer: coarse) { .cs-space-hint { display: none; } }  /* no keyboard on a touch phone */
.coach-action-error:empty { display: none; }
/* Signed-out entry (login.html): Sign in and Create account side by side; stacked full width on a phone. */
.login-card { margin-top: 6vh; padding: 36px; }
.login-actions { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
.login-actions form { margin: 0; }
.login-note { margin-top: 18px; }
.onboarding-name { margin-top: 22px; display: grid; gap: 14px; }
.onboarding-name[hidden], .choices[hidden] { display: none; }
@media (max-width: 480px) {
  .gc-header:has(.gc-header-end form) .gc-brand > span { display: none; }  /* signed in: the mark alone */
}
@media (max-width: 760px) {
  /* Signed in on a public page (onboarding, entry): language + Open app + Sign out fit beside the mark on a phone. */
  .gc-header-end { gap: 6px; min-width: 0; }
  .gc-header-end .btn-sm { padding-left: 10px; padding-right: 10px; }
  .gc-header-end form { margin: 0; }
  .login-card { padding: 24px 18px; }
  .login-actions > a, .login-actions > form, .login-actions button { width: 100%; }
}
/* A refused action's reason (and, when it is the way forward, the Unpublish button), and the Unpublish row. */
.hr-notice { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border: 1px solid rgba(227, 174, 75, .35);
  border-radius: 10px; background: var(--warn-soft); color: var(--text-2); font-size: 13.5px; }
.hr-notice[hidden] { display: none; }
.hr-notice-text { margin: 0; max-width: 62ch; }
.hr-unpublish { display: grid; gap: 4px; justify-items: start; padding-top: 12px; border-top: 1px solid var(--steel-soft); }
.hr-unpublish[hidden] { display: none; }
.hr-unpublish-btn { min-height: 44px; }
.hr-lists { display: grid; gap: 34px; min-width: 0; container-type: inline-size; container-name: hr-lists; }
.hr-list-head { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--steel); margin-bottom: 4px; }
.hr-h { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; letter-spacing: .005em; }
.hr-count { color: var(--ink-3); font-size: .75em; }
.hr-help { font-size: 13.5px; color: var(--ink-2); max-width: 62ch; }
.hr-draft, .hr-waiting { list-style: none; margin: 0; padding: 0; }
.hr-item { border-bottom: 1px solid var(--steel-soft); background: transparent; transition: background .15s var(--ease); }
.hr-item.is-dragging { position: relative; z-index: 2; background: var(--surface-raised); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.hr-item.is-trimming { background: var(--surface-1); }
.hr-row { display: grid; grid-template-columns: auto auto 132px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 6px; }
.hr-wait .hr-row { grid-template-columns: 132px minmax(0, 1fr) auto; }
.hr-grip { display: inline-grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink-3);
  cursor: grab; touch-action: none; }
.hr-grip:active { cursor: grabbing; }
.hr-grip svg { width: 18px; height: 18px; }
.hr-pos { width: 22px; text-align: right; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hr-thumb { position: relative; display: block; width: 132px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: var(--surface-film); cursor: pointer; }
.hr-thumb:disabled { cursor: default; }
.hr-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-thumb img[hidden] { display: none; }
.hr-thumb-empty { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #15181B 0 8px, #111416 8px 16px); }
.hr-thumb-empty[hidden] { display: none; }
.hr-dur { position: absolute; right: 5px; bottom: 5px; padding: 2px 6px; border-radius: var(--radius-tag); background: rgba(8, 9, 10, .82);
  color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-dur:empty { display: none; }
.hr-info { min-width: 0; }
.hr-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.hr-meta { margin-top: 2px; }
.hr-flag { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.hr-item.has-problem .hr-flag { color: var(--amber); }
.hr-wait.is-blocked .hr-flag { color: var(--text-2); }
.hr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.hr-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-btn);
  background: transparent; color: var(--text-2); cursor: pointer; }
.hr-icon-btn:hover:not(:disabled) { background: var(--surface-raised); color: var(--ink); }
.hr-icon-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.hr-icon-btn:disabled { opacity: .3; cursor: default; }
.hr-icon-btn svg { width: 18px; height: 18px; }
.hr-actions .btn-sm { min-height: 44px; }
.hr-remove { color: var(--ink-2); }
.hr-remove:hover { color: var(--goal); }
.hr-trim { padding: 4px 6px 18px 6px; }
.hr-trim[hidden] { display: none; }
.hr-trim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.hr-trim-field { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.hr-trim-field output { margin-left: 6px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-trim-field input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--green); }
.hr-trim-bounds, .hr-trim-length { margin-top: 8px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hr-trim .form-actions { margin-top: 12px; justify-content: flex-start; }
.hr-trim .form-actions .btn { min-height: 44px; }
.hr-empty { padding: 18px 4px; color: var(--ink-2); font-size: 14px; display: grid; gap: 10px; justify-items: start; }
.hr-empty[hidden] { display: none; }
.hr-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; 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); }
.hr-dialog::backdrop { background: rgba(8, 9, 10, .72); }
.hr-dialog-body { padding: 24px; }
.hr-dialog-title { font-family: var(--font-display); font-stretch: condensed; font-size: 28px; font-weight: 700; line-height: 1.05; }
.hr-dialog-text { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.hr-replace-set { margin: 16px 0 0; padding: 0; border: 0; }
.hr-replace-list { list-style: none; margin: 0; padding: 0; max-height: min(46vh, 360px); overflow: auto; border-top: 1px solid var(--steel-soft); }
.hr-replace-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px;
  padding: 6px 4px; border-bottom: 1px solid var(--steel-soft); cursor: pointer; }
.hr-replace-option input { width: 20px; height: 20px; accent-color: var(--green); }
.hr-replace-name { display: grid; gap: 2px; overflow-wrap: anywhere; }
.hr-replace-meta { font-size: 12.5px; color: var(--ink-2); }
.hr-replace-dur { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hr-replace-sum { margin-top: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-replace-sum.is-over { color: var(--amber); }
.hr-dialog .form-actions .btn { min-width: 120px; min-height: 44px; }

/* A list row needs about 720px for thumbnail, words and actions on one line. In a narrower list column (the desktop
   two-column editor, a tablet, a phone) the actions take a line of their own under the words. */
@container hr-lists (max-width: 720px) {
  .hr-row { grid-template-columns: auto auto 120px minmax(0, 1fr); grid-template-areas: "grip pos thumb info" "grip pos actions actions";
    gap: 8px 12px; }
  .hr-grip { grid-area: grip; align-self: start; margin-top: 18px; }
  .hr-pos { grid-area: pos; align-self: start; margin-top: 22px; }
  .hr-thumb { grid-area: thumb; width: 120px; }
  .hr-info { grid-area: info; }
  .hr-actions { grid-area: actions; justify-content: flex-start; margin-left: -10px; }
  .hr-wait .hr-row { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "thumb info" "actions actions"; }
  .hr-wait .hr-actions { margin-left: -4px; }
}
@container hr-lists (max-width: 460px) {
  .hr-row { grid-template-columns: auto 104px minmax(0, 1fr); grid-template-areas: "grip thumb info" "actions actions actions"; padding: 12px 0; }
  .hr-pos { display: none; }
  .hr-thumb { width: 104px; }
  .hr-actions { margin-left: 0; }
  .hr-wait .hr-row { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .hr { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hr-stage { position: static; }
}
@media (max-width: 760px) {
  .hr-head { padding-bottom: 18px; }
  .hr-total-now { font-size: 34px; }
  .hr-trim-grid { grid-template-columns: 1fr; }
  .hr-publish-btn { flex: 1 1 auto; }
  .pf-reel-caption { gap: 8px 12px; }
  .pf-reel-edit { margin-left: 0; }
  .pf-reel-play { min-height: 52px; max-width: calc(100% - 24px); gap: 10px; padding-right: 16px; font-size: 14.5px; }
}

/* ---------------------------------------------------------------- shot panel: the highlight's sequence */
.sd-seq { display: grid; gap: 8px; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--steel-soft); border-radius: var(--radius-btn);
  background: var(--surface-1); }
.sd-seq[hidden] { display: none; }
.sd-seq-status { font-size: 13.5px; color: var(--text-2); }
.sd-seq-status:empty { display: none; }
.sd-seq-edit { display: grid; gap: 8px; }
.sd-seq-edit[hidden] { display: none; }
.sd-seq-summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--text-2); list-style: none; }
.sd-seq-summary::-webkit-details-marker { display: none; }
.sd-seq-summary::before { content: ""; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s var(--ease); }
.sd-seq-edit[open] > .sd-seq-summary::before { transform: rotate(45deg); }
.sd-seq-summary:hover { color: var(--ink); }
.sd-seq-summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.sd-seq-summary-length { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sd-seq-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 2px 8px; }
.sd-seq-name { font-size: 13.5px; color: var(--ink-2); }
.sd-seq-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-seq-btns { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sd-seq-btns .sd-seq-set { min-height: 44px; padding: 0 10px; margin-left: -10px; }
.sd-seq-nudge { min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--steel); border-radius: var(--radius-btn); background: transparent;
  color: var(--text-2); font: 600 13px/1 var(--font-ui); cursor: pointer; }
.sd-seq-nudge:hover { border-color: var(--ink-2); color: var(--ink); }
.sd-seq-nudge:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.sd-seq-length { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sd-seq-length:empty { display: none; }
.sd-seq-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-seq-actions .btn { min-height: 44px; }
.sd-seq-clip { font-size: 13px; color: var(--ink-2); }
.sd-seq-clip[hidden] { display: none; }
.sd-seq-link { min-height: 44px; }


/* ================================================================ THE COACH MARKETPLACE (schema v19)
   Public pages (`.mp` main: directory, coach) and the signed-in marketplace pages (`.mp-block`, `.mp-columns`, forms)
   share this block and nothing else of their own. The public pages sit in the public shell like the landing page;
   the signed-in ones in the workspace shell with its usual primitives (page-head, list-rows, field, btn, chip, tag). */
.mp { display: block; padding: clamp(28px, 4vw, 56px) var(--gutter) 64px; }
.mp > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.mp-h1 { font-family: var(--font-display); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 60px); line-height: .95; letter-spacing: -.008em; }
.mp-lead { color: var(--text-2); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; max-width: 62ch; margin-top: 12px; }
.mp-note { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; max-width: 70ch; margin-top: 10px; }
.mp-text { color: var(--text-2); line-height: 1.6; white-space: pre-line; }
.mp-label { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mp-head { padding-bottom: 22px; }
.mp-back { margin-bottom: 18px; }

/* directory filters and cards */
.mp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px 0 22px; border-top: 1px solid var(--steel-soft); border-bottom: 1px solid var(--steel-soft); }
.mp-filters .field { min-width: 180px; }
.mp-cards { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.mp-card-link { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px;
  border: 1px solid var(--steel); border-radius: var(--radius-card); background: var(--surface-1); color: inherit; text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.mp-card-link:hover { border-color: var(--ink-3); background: var(--surface-raised); }
.mp-card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mp-card-mark, .mp-hero-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--steel);
  background: var(--surface-control); font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; color: var(--ink); flex: none; }
.mp-hero-mark { width: 96px; height: 96px; font-size: 40px; }
.mp-card-body { min-width: 0; display: grid; gap: 4px; }
.mp-card-name { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; line-height: 1.05; }
.mp-card-headline { color: var(--text-2); font-size: 15px; }
.mp-card-line { color: var(--ink-2); font-size: 13.5px; }
.mp-card-line i { font-style: normal; color: var(--ink-3); margin: 0 6px; }
.mp-card-side { display: grid; justify-items: end; gap: 8px; text-align: right; }
.mp-price { font-family: var(--font-display); font-stretch: condensed; font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-price small { display: block; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.mp-card-cta { color: var(--gold); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.mp-card-cta svg { width: 16px; height: 16px; }
.mp-empty { padding: 36px 0 44px; border-top: 1px solid var(--steel); color: var(--text-2); max-width: 62ch; }
.mp-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--steel-soft); }

/* a coach's page */
.mp-hero { display: flex; gap: 24px; align-items: center; padding: 8px 0 26px; border-bottom: 1px solid var(--steel); }
.mp-hero-main { min-width: 0; display: grid; gap: 6px; }
.mp-hero-headline { color: var(--text-2); font-size: 17px; }
.mp-hero-line { color: var(--ink-2); font-size: 14px; }
.mp-columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); margin-top: 28px; align-items: start; }
.mp-section + .mp-section { margin-top: 8px; }
.mp-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.mp-list li { padding-bottom: 10px; border-bottom: 1px solid var(--steel-soft); }
.mp-services { padding: 20px 22px; border: 1px solid var(--steel); border-radius: var(--radius-card); background: var(--surface-1); }
.mp-service-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.mp-service { padding: 16px 0 18px; border-top: 1px solid var(--steel-soft); display: grid; gap: 8px; }
.mp-service-type { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); }
.mp-service-title { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 700; line-height: 1.05; }
.mp-terms { margin: 6px 0 0; display: grid; gap: 8px; }
.mp-terms div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.mp-terms dt { color: var(--ink-3); font-weight: 500; }
.mp-terms dd { margin: 0; color: var(--ink); }
.mp-service .btn { justify-self: start; margin-top: 6px; }

/* signed-in marketplace pages */
.mp-block { padding: 20px 22px 22px; border: 1px solid var(--steel-soft); border-radius: var(--radius-card); background: var(--surface-1); }
.mp-block .section-head { margin-bottom: 10px; }
.mp-visible { margin-top: 10px; font-weight: 600; }
.mp-fieldset { border: 1px solid var(--steel-soft); border-radius: var(--radius-btn); padding: 10px 14px 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mp-fieldset legend { padding: 0 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.mp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.mp-service-row { padding: 12px 0; border-top: 1px solid var(--steel-soft); }
.mp-service-row > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-service-row > form { margin-top: 14px; }
.mp-game-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mp-clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
/* checkbox rows inside the marketplace forms: the generic .choice is a large role card; here it is one compact row */
.mp-fieldset .choice, .mp-clip-grid .choice, .mp-block > form > .choice, .mp-block .stack > .choice { display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-btn); font-size: 14.5px; }
.mp-fieldset .choice input, .mp-clip-grid .choice input, .mp-block .choice input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--gold); }
.choice.is-off { opacity: .55; }
.mp-no-payment { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(242, 217, 59, .06); font-size: 14px; line-height: 1.5; }
.mp-summary { position: sticky; top: 18px; }

@media (max-width: 900px) {
  .mp-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mp-summary { position: static; }
  .mp-card-link { grid-template-columns: 48px minmax(0, 1fr); }
  .mp-card-side { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .mp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mp { padding: 24px 16px 48px; }
  .mp-hero { flex-direction: column; align-items: flex-start; }
  .mp-filters .field { flex: 1 1 100%; }
  .mp-terms div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mp-block { padding: 16px; }
  .mp-filters .btn, .mp-service .btn, .mp-block .form-actions .btn { width: 100%; }
}

/* a review accepted through the coach directory: its scope on the coach's game page, and clip states on the request pages */
.cg-mp-scope { margin-top: 6px; display: grid; gap: 6px; }
.cg-mp-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cg-mp-items li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.mp-clip-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.mp-clip-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gd-marketplace { margin-top: var(--space-2); color: var(--amber); font-weight: 600; }

/* ===================================================================== game record (schema v21, portal/game_stats.py)
   Shots on net leads the goalie's numbers; the team result reads "W 4–2"; the shot review and the result are two
   separate states. Edit game is a page of its own (templates/app/edit_game.html), on the Add a game layout. */
.rv-head .rv-edit-game { margin-left: auto; align-self: center; }
.rv-edit-game svg { width: 15px; height: 15px; }
.rv-head .rv-record { flex-basis: 100%; margin: 0; }
.rv-final { color: var(--ink); font-weight: 600; }
.rv-record-note { color: var(--amber); }
.rv-score.is-gap { color: var(--ink-2); }
.rv-saved { margin: 14px 0 0; }
.rv-saved svg { color: var(--gold); }
.rv-game-details .rv-edit-result { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.rv-game-details .rv-edit-result svg { width: 14px; height: 14px; }
.rv-review-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.chip.good { color: var(--ink); }
.chip.good::before { background: var(--gold); }
.rv-stats .rv-stat-primary dd { color: var(--ink); font-size: 30px; }
.rv-stats .rv-stat-primary dt { color: var(--ink); font-weight: 600; }
.rv-partial, .pg-partial, .lib-partial { font-family: var(--font-body, inherit); font-stretch: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--amber); }
.rv-stats dd .rv-partial { margin-left: 4px; vertical-align: middle; }
.lib-result { color: var(--ink); }
.lib-score .lib-result { padding-top: 0; align-self: center; }
.pg-fact-primary dd { color: var(--ink); }
.pg-review-line { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pg-team { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--steel-soft); }
.pg-team-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pg-team-facts { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 18px 56px; margin: 0; }
.pg-team-facts div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-team-facts dt { order: 2; font-size: 13px; color: var(--ink-2); }
.pg-team-facts dd { order: 1; margin: 0; font-family: var(--font-display); font-stretch: condensed; font-size: 34px; font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
.pg-team-facts small { order: 3; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.pg-team-note { margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.pg-team-disclaimer { margin: 6px 0 0; max-width: 70ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.pg-compact .pg-team-facts dd { font-size: 28px; }
.sd-tags .sd-tags-group { grid-column: 1 / -1; margin: 8px 0 0; }
.gf-title { margin: 28px 0 12px; }
.ng-form .gf-title:first-of-type { margin-top: 8px; }
.gf-result { display: contents; }
.gf-final { display: contents; }
.gf-finish span { min-height: 40px; }
.gf-legacy { grid-column: 1 / -1; }
.gf-aside { margin-top: 120px; }
.gf-points { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ng-edit .field { align-content: start; }
.gf-points li { display: block; padding-top: 12px; border-top: 1px solid var(--steel); font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ng-edit select { width: 100%; }
@media (max-width: 760px) {
  .rv-head .rv-edit-game { margin-left: 0; }
  .rv-stats .rv-stat-primary dd { font-size: 26px; }
  .pg-team-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 16px; }
  .pg-team-facts dd { font-size: 28px; }
}
@media (max-width: 960px) { .gf-aside { margin-top: 0; } }

/* ---------------------------------------------------------------- free early access (v43): legal pages, support
   links, the full-video allowance beside every upload control */
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; }
.legal-links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-links a:hover { color: var(--ink); }
.mk-footer .legal-links { margin-top: 12px; }
.legal .legal-section { margin-top: 22px; }
.legal .legal-section p { margin-top: 6px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; overflow-wrap: anywhere; }
.rv-allowance { margin: 0 0 10px; }
.rv-allowance.is-full { color: var(--goal); }

/* ---------------------------------------------------------------- the separate test environment (v44): every page
   of beta.goaliecore.com says it is not the live service; never rendered on the live tier */
.env-banner { position: sticky; top: 0; z-index: 1000; padding: 8px var(--gutter); text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; color: #1b1300; overflow-wrap: anywhere;
  background: repeating-linear-gradient(135deg, #f5b301 0 18px, #ffd34d 18px 36px); }

/* ------------------------------------------------------------------ the coach's review queue and roster (Coach tab)
   portal/coach_queue.py derives every status; this only lays it out. One row per requested game: who and which game,
   where the review stands, and one clear action. Status filters are page loads (links), the goalie filter a GET form. */
.cq-page > * { min-width: 0; }  /* grid children: long names and controls wrap instead of widening the column */
.cq-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.cq-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-input);
  border: 1px solid var(--steel); color: var(--text-2); font-weight: 500; font-size: 14px; text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease); }
.cq-filter:hover { border-color: var(--ink-2); color: var(--ink); }
.cq-filter[aria-current="true"] { background: var(--accent-soft); border-color: var(--green); color: var(--ink); }
.cq-filter:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cq-filter-n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 13px; }
.cq-filter[aria-current="true"] .cq-filter-n { color: var(--ink-2); }
.cq-goalie-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cq-goalie-label { font-size: 13.5px; color: var(--text-2); }
.cq-select { min-height: 44px; min-width: 0; max-width: min(280px, 70vw); }
.cq-list { list-style: none; margin: 0; padding: 0; }
.cq-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: center; padding: 18px 0;
  border-top: 1px solid var(--steel-soft); }
.cq-item:first-child { border-top: 0; }
.cq-who { font-family: var(--font-display); font-stretch: condensed; font-size: 22px; font-weight: 700; line-height: 1.05; color: var(--ink); }
.cq-game { margin-top: 3px; font-size: 15px; color: var(--text-2); }
.cq-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.cq-state .chip svg { width: 14px; height: 14px; }
.cq-detail { margin-top: 6px; font-size: 13.5px; color: var(--text-2); }
.cq-warn { color: var(--amber); }
.cq-note { margin-top: 6px; }
.cq-act { display: grid; justify-items: end; gap: 6px; }
.cq-where { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.cq-item.is-waiting .cq-who { color: var(--text-2); }
.cq-empty { display: grid; justify-items: start; gap: 12px; padding: 18px 0 4px; }
.cq-empty-title { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.cq-empty-title svg { width: 18px; height: 18px; }
.cq-more { padding-top: 12px; }
.cq-counts { margin-top: 6px; font-variant-numeric: tabular-nums; }
.cq-person { flex-wrap: wrap; }
.cq-person > .grow { min-width: 180px; }
.cq-past { border-top: 1px solid var(--steel); padding-top: 4px; }
.cq-past-summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--text-2); font-weight: 600; }
.cq-past-summary:hover { color: var(--ink); }
.cq-past-summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (pointer: coarse) { .cq-page .btn-sm { min-height: 44px; } }
@media (max-width: 760px) {
  .cq-item { grid-template-columns: minmax(0, 1fr); }
  .cq-act { justify-items: stretch; }
  .cq-act .btn { width: 100%; }
  .cq-where { text-align: left; }
  .cq-who { font-size: 20px; }
  .cq-goalie-form { width: 100%; }
  .cq-select { flex: 1 1 100%; width: 100%; max-width: none; }
  .cq-page .btn-sm { min-height: 44px; }
}

/* ================================================================ one workspace, one Publish (coach review)
   The Studio says what is stored (private draft, private changes, published), walks the game's shots on a rail,
   and publishes only from the Finish review sheet. The goalie reads published feedback from one page. */
.cs-save[data-tone="published"]::before { background: var(--gold); }
.cs-save[data-tone="published"] { color: var(--ink); }
.cs-finish-open { white-space: nowrap; }
.cs-finish-open svg, .cg-finish svg { width: 16px; height: 16px; }
.cs-pub-note, .cs-conflict, .cs-restore, .cs-pending { margin: 0 0 14px; align-items: center; flex-wrap: wrap; }
.cs-pub-note p, .cs-conflict p, .cs-restore p, .cs-pending p { flex: 1 1 320px; margin: 0; }
.cs-pub-note { border-left: 3px solid var(--gold); }
.cs-pub-note.is-changes { border-left-color: var(--ink-3); }
.cs-goalie-note { margin: 0 0 14px; }
/* published: the coach reads the goalie's version; changing it starts from "Update this shot" */
.cs[data-published="1"] .cs-tools, .cs[data-published="1"] .cs-rec-idle, .cs[data-published="1"] [data-rec-again],
.cs[data-published="1"] [data-rec-discard] { display: none; }
.cs[data-published="1"] .cs-tag[aria-disabled="true"], .cs[data-published="1"] .rv-seg-btn[aria-disabled="true"] { cursor: default; }
.cs[data-published="1"] .cs-summary[readonly] { background: transparent; }

/* the shot rail: every shot of the game in order; a dot is a private draft, a check is published */
.cs-rail { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px; }
.cs-rail-list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: thin; max-width: 100%; }
.cs-rail-chip { position: relative; display: inline-flex; align-items: baseline; gap: 4px; min-height: 36px; padding: 8px 10px 6px;
  border: 1px solid var(--steel); border-radius: var(--radius-btn); color: var(--ink-2); text-decoration: none; font-size: 13px; white-space: nowrap; }
.cs-rail-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.cs-rail-p { font-size: 11px; color: var(--ink-3); }
.cs-rail-n { font-family: var(--mono); font-weight: 600; }
.cs-rail-mark { width: 7px; height: 7px; border-radius: 50%; align-self: center; background: transparent; }
.cs-rail-chip.is-draft .cs-rail-mark { box-shadow: inset 0 0 0 1.5px var(--gold); }
.cs-rail-chip.is-published .cs-rail-mark { background: var(--gold); }
.cs-rail-chip.is-current { border-color: var(--gold); color: var(--ink); background: var(--surface-selected, rgba(242, 217, 59, .08)); }
.cs-rail-chip.is-noclip { border-style: dashed; }
.cs-rail-legend { display: flex; gap: 14px; margin: 0; font-size: 12px; color: var(--ink-3); }
.cs-rail-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-rail-legend i { width: 7px; height: 7px; border-radius: 50%; }
.cs-rail-legend .is-draft i { box-shadow: inset 0 0 0 1.5px var(--gold); }
.cs-rail-legend .is-published i { background: var(--gold); }

/* the finish sheet */
.confirm.cs-finish { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.cs-finish-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cs-finish-x { background: none; border: 0; color: var(--ink-2); padding: 6px; cursor: pointer; border-radius: var(--radius-btn); min-width: 44px; min-height: 44px; }
.cs-finish-x svg { width: 20px; height: 20px; }
.cs-finish-loading { margin-top: 14px; }
.cs-finish-body { display: grid; gap: 18px; margin-top: 12px; }
.cs-finish-to { font-size: 15px; color: var(--ink); font-weight: 600; }
.cs-finish-sec { display: grid; gap: 8px; }
.cs-finish-h { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.cs-finish-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-finish-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--steel); border-radius: var(--radius-btn); }
.cs-finish-item input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); }
.cs-finish-item-main { display: grid; gap: 2px; cursor: pointer; }
.cs-finish-item-main .meta { font-size: 13px; color: var(--ink-2); }
.cs-finish-item-notes { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.cs-finish-warn { color: var(--amber); }
.cs-finish-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.cs-finish-pre { white-space: pre-line; }
.cs-finish-completion:empty { display: none; }
.cs-finish-completion { font-size: 14px; color: var(--ink); }
.cs-finish-explain { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.cs-finish-explain svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cs-finish-done { margin-top: 14px; display: grid; gap: 8px; }
.cs-finish-done-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: var(--ink); }
.cs-finish-done-title svg { width: 20px; height: 20px; color: var(--gold); }
.cs-finish .form-error:empty { display: none; }
.cs-finish .form-error { margin-top: 12px; }

/* the goalie's feedback page: takeaways, then feedback in game order */
.fb-strip { display: grid; gap: 12px; margin: 0 0 16px; }
.fb-takeaway { display: grid; gap: 6px; padding: 16px 18px; border-left: 3px solid var(--gold); }
.fb-nav { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.fb-count { margin: 0; font-size: 13px; color: var(--ink-2); }
.fb-items { display: flex; gap: 6px; list-style: none; margin: 0; padding: 2px 0 4px; overflow-x: auto; max-width: 100%; flex: 1 1 240px; }
.fb-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--steel); border-radius: var(--radius-btn);
  color: var(--ink-2); text-decoration: none; font-size: 13px; white-space: nowrap; }
.fb-chip.is-current { border-color: var(--gold); color: var(--ink); }
.fb-steps { display: flex; gap: 8px; }
.fb-steps .btn { min-height: 44px; }
.fb-page { display: grid; gap: 16px; max-width: 760px; }

/* Home: the one way in to published coaching */
.home-feedback { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: -8px 0 28px;
  padding: 16px 20px; border: 1px solid var(--steel); border-left: 3px solid var(--gold); border-radius: var(--radius-card); background: var(--surface-1); }
.home-feedback-main { display: grid; gap: 4px; min-width: 0; }
.home-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.home-feedback-title { font-family: var(--font-display); font-stretch: condensed; font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.home-feedback-meta { font-size: 14px; color: var(--ink-2); }
.home-feedback .btn { min-height: 44px; }

.cs-flow-rec { display: none; }
.cs-flow-rec.is-live { border-color: var(--goal); color: var(--ink); }
.cs-flow-rec .cs-rec-dot { width: 10px; height: 10px; }
@media (max-width: 760px) {
  /* one hand on the phone: Record and Next shot stay on screen, just above the app's tab bar (63 px) */
  .gc-main.studio { padding-bottom: 200px; }
  .cs-flow { position: fixed; left: 0; right: 0; bottom: calc(63px + env(safe-area-inset-bottom)); z-index: 45; margin: 0;
    padding: 10px 16px; background: #0D0F10; border-top: 1px solid var(--steel); gap: 6px; }
  .cs-flow .cs-hint, .cs-flow-prev { display: none; }
  .cs-flow-rec { display: inline-flex; flex: 1 1 0; }
  .cs-flow-row { flex-wrap: nowrap; }
  .cs-flow-row .btn { min-height: 48px; flex: 1 1 0; }
  .cs-head-end { flex-wrap: wrap; }
  .cs-rail-legend { display: none; }
  .confirm.cs-finish { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: var(--radius-card) var(--radius-card) 0 0; padding: 18px 16px; }
  .cs-finish .confirm-actions { position: sticky; bottom: -18px; background: inherit; padding: 12px 0 4px; }
  .cs-finish .confirm-actions .btn { flex: 1 1 auto; min-width: 0; }
  .home-feedback .btn { width: 100%; justify-content: center; }
}