/* ==========================================================================
   GAME SPEED — athlete portal

   The design system is Gridiron's, ported: same type, same near-black ground,
   same measured-number-in-mono hierarchy. Two things are different, and both
   come from Kris's brief.

   1. THE ACCENT IS BLUE, not white. One line, below.

   2. THE PAGE HAS A SECOND COLOUR LANGUAGE — red / yellow / green — and unlike
      Gridiron's status colours it is not a footnote, it is the headline. Three
      categories replace the percentile as the first thing an athlete reads:
      Developing, Standard, Above Standard. That is why the accent is blue: the
      house colour has to stay clear of the red-yellow-green ramp or a chip
      stops meaning anything.
   ========================================================================== */

:root{
  /* ======================================================================
     THEME — change these and the whole site follows, including the
     downloadable cards, which read these tokens off the page.
     ====================================================================== */
  --brand-rgb:       56 160 255;  /* electric blue                           */
  --brand-light-rgb:  0  90 200;  /* the SAME accent, darkened for light mode:
                                     a bright blue on a near-white page is
                                     unreadable. Rebranding? These two lines. */
  --brand-ink-rgb:    12  12  12; /* page + card background                  */
  --brand-chalk-rgb: 242 242 242; /* text                                    */
  --brand-panel-rgb:  20  20  20; /* cards, tables, panels                   */
  --brand-steel-rgb: 142 142 142; /* muted labels                            */

  --accent-rgb: var(--brand-rgb);
  --ink-rgb:    var(--brand-ink-rgb);
  --chalk-rgb:  var(--brand-chalk-rgb);
  --panel-rgb:  var(--brand-panel-rgb);
  --steel-rgb:  var(--brand-steel-rgb);
  --on-accent:  #06121F;          /* text sitting ON the accent (buttons)    */

  /* derived — you shouldn't need to touch these */
  --accent: rgb(var(--accent-rgb));
  --ink:    rgb(var(--ink-rgb));
  --chalk:  rgb(var(--chalk-rgb));
  --panel:  rgb(var(--panel-rgb));
  --steel:  rgb(var(--steel-rgb));
  --body-text: rgb(var(--chalk-rgb) / .76);
  --soft:      rgb(var(--chalk-rgb) / .84);
  --faint:     rgb(var(--chalk-rgb) / .38);
  --line:      rgb(var(--chalk-rgb) / .13);
  --line-soft: rgb(var(--chalk-rgb) / .08);
  --wash:      rgb(var(--accent-rgb) / .08);

  /* ======================================================================
     THE THREE CATEGORIES
     Not derived from the brand, and never will be: developing has to read as
     developing whatever colour the accent turns. The boundaries that decide
     which one an athlete gets live in assets/js/data.js, not here.
     ====================================================================== */
  --dev-rgb: 255 110 110;   /* Developing     */
  --std-rgb: 240 186  64;   /* Standard       */
  --abv-rgb:  74 222 128;   /* Above Standard */

  /* Each category is TWO colours, not one, and the split is the whole reason
     light mode works. A 6px bar and a 9px chip label are not the same problem:
     a graphic needs 3:1 against the page, small text needs 4.5:1. Forcing one
     value to clear 4.5:1 is what turns a yellow into a brown — the only way to
     darken a yellow is to drain it. So: --*-rgb is the GRAPHIC (bars, swatches,
     borders, the display-size verdict), --*-ink-rgb is the SMALL TEXT.
     On the dark ground they are the same colour and this costs nothing. */
  --dev-ink-rgb: var(--dev-rgb);
  --std-ink-rgb: var(--std-rgb);
  --abv-ink-rgb: var(--abv-rgb);

  --ok-rgb:   74 222 128;
  --bad-rgb: 255 122 122;
  --ok:   rgb(var(--ok-rgb));
  --bad:  rgb(var(--bad-rgb));
  --ok-wash:  rgb(var(--ok-rgb) / .14);
  --bad-wash: rgb(var(--bad-rgb) / .14);

  --disp:'Archivo',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'Azeret Mono',ui-monospace,monospace;

  --gut:clamp(1.25rem,5vw,4rem);
  --max:1280px;
}

/* One class per category, setting one variable. Everything that needs to be
   the category's colour — chip, bar, radar dot, card border — reads --b-rgb
   and stops caring which category it is. */
.b--developing{--b-rgb:var(--dev-rgb);--b-ink-rgb:var(--dev-ink-rgb)}
.b--standard  {--b-rgb:var(--std-rgb);--b-ink-rgb:var(--std-ink-rgb)}
.b--above     {--b-rgb:var(--abv-rgb);--b-ink-rgb:var(--abv-ink-rgb)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--body-text);font-family:var(--body);
  font-size:clamp(1rem,.97rem+.2vw,1.06rem);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* [hidden] and a class that sets display have equal specificity, so whichever
   is written later wins — which silently un-hides things. Settle it here. */
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* --- type ---------------------------------------------------------------- */
.d{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' 79;letter-spacing:-.012em;line-height:.9;color:var(--chalk);margin:0}
.d--lg{font-size:clamp(2.1rem,5.2vw,3.9rem)}
.d--md{font-size:clamp(1.6rem,3.4vw,2.5rem)}
.d--sm{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.k{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--steel);margin:0}
.k--hot{color:var(--accent)}
.lede{font-size:clamp(1.05rem,1rem+.4vw,1.25rem);max-width:52ch}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 1.6rem;border:1px solid transparent;transition:.16s;cursor:pointer}
.btn__a{transition:transform .16s}
.btn:hover .btn__a{transform:translateX(4px)}
.btn--go{background:var(--accent);color:var(--on-accent)}
.btn--go:hover{background:var(--chalk);color:var(--ink)}
.btn--go[disabled]{opacity:.6;cursor:progress}
.btn--line{border-color:var(--line);color:var(--chalk);background:none}
.btn--line:hover{border-color:var(--chalk);background:rgb(var(--chalk-rgb) / .06)}

/* --- header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgb(var(--ink-rgb) / .9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* The bar spans the window, not the content column — a masthead belongs in the
   corner of the screen, not floating toward the middle of a 1280px measure. */
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:68px;flex-wrap:wrap;row-gap:.55rem;
  max-width:none;padding-inline:min(var(--gut),1.5rem)}
.mark{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 79;
  text-transform:uppercase;font-size:1.1rem;color:var(--chalk);text-decoration:none;margin-right:auto;line-height:1}
.mark__wd span{color:var(--accent)}
/* The chevrons are currentColor, so the mark inverts itself in light mode
   instead of needing a second file that can drift out of sync. */
.mark__badge{flex:none;width:26px;height:26px;fill:var(--accent)}

/* Back, the theme toggle and Sign out sit in a row, so they get one treatment. */
.hdrbtn{display:inline-flex;align-items:center;gap:.45rem;background:none;
  border:1px solid var(--line);color:var(--steel);font-family:var(--mono);
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:.68rem 1rem;cursor:pointer;white-space:nowrap;
  /* <a> inherits the body's line-height, <button> uses the UA's "normal" —
     that alone made the link 5px taller than the two buttons beside it */
  line-height:1;transition:color .16s,border-color .16s,background .16s}
.hdrbtn:hover{color:var(--chalk);border-color:var(--chalk);background:rgb(var(--chalk-rgb) / .06)}
.hdrbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.who-pill{display:flex;gap:.8rem;align-items:center;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- page shells --------------------------------------------------------- */
.page{min-height:70vh;padding-block:clamp(2.5rem,6vw,4.5rem)}
.panel{max-width:34rem}
.panel--wide{max-width:74rem}

.note{border:1px solid rgb(var(--accent-rgb) / .4);background:var(--wash);
  padding:.95rem 1.15rem;margin:1.4rem 0;font-size:.95rem}
/* the token, not the literal it was copied from: hardcoded, this border kept
   the dark-mode red on a light page while the wash beside it changed */
.note--bad{border-color:rgb(var(--bad-rgb) / .45);background:var(--bad-wash)}
.note strong{color:var(--chalk)}

/* --- forms --------------------------------------------------------------- */
.field{display:grid;gap:.4rem;margin-bottom:1.05rem}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel)}
/* width + min-width:0 are load-bearing: an <input> carries an intrinsic width
   and a grid item's min-width:auto refuses to shrink below it, which pushes a
   phone into horizontal scroll. Every field is held to the column. */
.field input{background:rgb(var(--chalk-rgb) / .045);border:1px solid var(--line);
  color:var(--chalk);font-family:var(--body);font-size:1rem;padding:.8rem .9rem;
  transition:border-color .15s;width:100%;min-width:0}
.field input:focus{border-color:var(--accent);outline:none}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.field--split{grid-template-columns:1fr}}
.swap{margin-top:1.6rem;font-size:.92rem}
.swap a{color:var(--accent)}

/* ==========================================================================
   THE WAY IN — sport, then age group, then who you are

   Three short steps instead of one long form, because each one is a single
   tap for a kid on a phone. Every step is its own URL (signin.html?sport=
   rugby&group=u16), so Back does what it looks like it should, and Kris can
   text a team a link that lands them straight on their own sign-in.
   ========================================================================== */
.panel--mid{max-width:52rem}

/* --- the sport picker ---------------------------------------------------- */
.sports{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:2.4rem 0 0;padding:0;list-style:none}
.sport{position:relative;display:flex;flex-direction:column;gap:1.3rem;min-height:15rem;
  padding:1.5rem;border:1px solid var(--line);background:var(--panel);color:var(--chalk);
  text-decoration:none;overflow:hidden;transition:border-color .16s,background .16s}
/* the accent rule draws in across the top on hover — the same 4px bar the
   athlete card carries, so the tile reads as the start of that card */
.sport::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}
.sport:hover{border-color:rgb(var(--accent-rgb) / .55)}
.sport:hover::before,.sport:focus-visible::before{transform:scaleX(1)}
.sport__ic{width:58px;height:58px;color:var(--accent);flex:none}
.sport__nm{font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 79;
  text-transform:uppercase;font-size:clamp(2.1rem,4.4vw,2.7rem);line-height:.9;margin:auto 0 0;color:var(--chalk)}
.sport__gr{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.sport__gr li{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);border:1px solid var(--line);border-radius:5px;
  padding:.22rem .45rem;line-height:1.3}
.sport__go{position:absolute;top:1.5rem;right:1.5rem;font-family:var(--mono);font-size:1.1rem;
  color:var(--steel);transition:transform .16s,color .16s}
.sport:hover .sport__go{color:var(--accent);transform:translateX(4px)}

/* --- the age groups ------------------------------------------------------ */
.groups{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  margin:1.6rem 0 0;padding:0;list-style:none}
.group{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:4.4rem;
  padding:1rem 1.15rem;border:1px solid var(--line);background:var(--panel);text-decoration:none;
  font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 82;
  text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--chalk);
  transition:border-color .16s,background .16s}
.group:hover{border-color:var(--accent);background:var(--wash)}
.group .btn__a{font-family:var(--mono);font-style:normal;font-weight:500;font-size:.95rem;color:var(--steel)}
.group:hover .btn__a{color:var(--accent);transform:translateX(3px)}

/* where you are signing in to, with the way back out of it */
.chosen{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;margin:0 0 1.8rem;
  padding:.85rem 1.1rem;border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--panel)}
.chosen b{font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 82;
  text-transform:uppercase;font-size:1.3rem;line-height:1;color:var(--chalk);margin-right:auto}
.chosen a{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);text-decoration:none}
.chosen a:hover{text-decoration:underline}

/* The code is read off a card, so it is typed the way it is printed: big,
   spaced, capitals. autocapitalize does the rest on a phone keyboard. */
.field input.codein{font-family:var(--mono);font-size:1.35rem;font-weight:800;
  letter-spacing:.32em;text-transform:uppercase}
.field input.codein::placeholder{letter-spacing:.32em;color:var(--faint)}
.hint{margin:.1rem 0 0;font-size:.86rem;color:var(--steel)}
.fs{border:0;padding:0;margin:0;min-width:0}
/* name-or-code: two equal halves on one row at any width, because a toggle
   that wraps its second half onto its own line stops reading as a toggle */
.picker.picker--seg{display:grid;grid-template-columns:1fr 1fr;max-width:26rem}
.picker.picker--seg button{padding-inline:.5rem;white-space:nowrap}
@media(max-width:430px){.picker.picker--seg button{font-size:.62rem;letter-spacing:.06em}}

/* the demo list is a table of credentials, so it reads as one */
.demo{width:100%;border-collapse:collapse;margin-top:.9rem;font-family:var(--mono);font-size:.78rem}
.demo td{padding:.45rem .6rem .45rem 0;border-top:1px solid var(--line-soft);vertical-align:top}
.demo td:first-child{color:var(--chalk);font-weight:700}
.demo code{font-family:var(--mono);font-weight:800;color:var(--accent);letter-spacing:.12em}

/* --- registering ---------------------------------------------------------
   The one form on the athlete side that is more than a sign-in, so it gets a
   few more controls: a select, radio chips, a photo picker, and the code it
   hands back at the end. */
.field select,.field textarea{background:rgb(var(--chalk-rgb) / .045);border:1px solid var(--line);
  color:var(--chalk);font-family:var(--body);font-size:1rem;padding:.8rem .9rem;width:100%;min-width:0;
  border-radius:0;transition:border-color .15s}
.field select{appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel);padding:0;margin-bottom:.1rem}
.field .opt{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.8rem;color:var(--faint)}
fieldset.field{border:0;padding:0;margin:0 0 1.05rem;min-width:0}

/* radio buttons that look like the rest of the pickers but are real radios,
   so the form's own required check covers them */
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choices label{position:relative;display:inline-flex}
.choices input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.choices span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.05rem;
  border:1px solid var(--line);font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--steel);transition:.15s}
.choices label:hover span{color:var(--chalk)}
.choices input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.choices input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* the waiver: shown in full, scrolled rather than folded away, because a
   consent nobody was shown is not a consent. Focusable, so a keyboard can
   scroll it. */
.legal{max-height:20rem;overflow-y:auto;border:1px solid var(--line);background:var(--panel);
  padding:1.2rem 1.3rem;font-size:.9rem;line-height:1.6;overscroll-behavior:contain}
.legal:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.legal h3{font-family:var(--mono);font-size:.62rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:1.5rem 0 .5rem}
.legal p{margin:0 0 .7rem}
.legal ul{margin:0 0 .9rem;padding-left:1.1rem}
.legal li{margin-bottom:.3rem}
.legal>:first-child{margin-top:0}

.tick{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;
  font-family:var(--body);font-size:.93rem;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--body-text)}
.tick input[type=checkbox]{flex:none;width:1.25rem;height:1.25rem;min-height:0;margin:.15rem 0 0;
  accent-color:rgb(var(--accent-rgb));cursor:pointer}

.photo-pick{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.photo-pick .avatar--hero{width:84px;height:84px;font-size:1.7rem}

/* the code, once they're registered: the one thing on the page to keep */
.codecard{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:2rem 0;padding:1.4rem 1.5rem;border:1px solid rgb(var(--accent-rgb) / .5);
  border-left:5px solid var(--accent);background:var(--wash)}
.codecard__v{display:block;margin-top:.5rem;font-family:var(--mono);font-weight:800;
  font-size:clamp(2.2rem,8vw,3.2rem);letter-spacing:.22em;color:var(--chalk);line-height:1}
.howto{margin:1.2rem 0 0;padding-left:1.3rem;display:grid;gap:.7rem}
.howto li{padding-left:.3rem}
.howto b{color:var(--chalk)}

/* --- the athlete's photo ------------------------------------------------
   Beside their name at the top of the results page, sized to the name so the
   two read as one block. Their initials, set in the display face, until there
   is a photo. .avatar--sm is the same thing on the coach roster. */
.avatar{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;
  display:inline-grid;place-items:center;background:var(--wash);
  border:2px solid rgb(var(--accent-rgb) / .6);color:var(--accent);
  font-family:var(--mono);font-size:.8rem;font-weight:800;letter-spacing:.02em;line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar--sm{width:34px;height:34px;font-size:.66rem;border-width:1px}
.hero{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.6rem);min-width:0}
.hero>div{min-width:0}
.avatar--hero{width:clamp(76px,9vw,108px);height:clamp(76px,9vw,108px);border:3px solid var(--accent);
  font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 82;
  font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.01em}

/* --- dashboard chrome ---------------------------------------------------- */
.dash__top{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1px solid var(--line);margin-bottom:2.2rem}
/* the showcase and compare-to pickers, side by side, wrapping on a phone */
.dash__picks{display:flex;gap:.8rem 1.4rem;flex-wrap:wrap;align-items:center}
/* on a phone the compare-to list is too wide to sit beside its label, so both
   labels go above their selects and the pair reads as one set of controls */
@media(max-width:760px){.dash__picks{align-items:flex-start}
  .dash__picks .yearsel{flex-direction:column;align-items:flex-start;gap:.4rem}}
.picker{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.picker button{background:none;border:1px solid var(--line);color:var(--steel);
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:.6rem 1.05rem;cursor:pointer;transition:.15s}
.picker button[aria-pressed='true']{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.picker button:hover{color:var(--chalk)}
.picker--sm button{padding:.4rem .8rem;font-size:.68rem}
.scope{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.yearsel{display:flex;align-items:center;gap:.7rem;margin-bottom:2rem}
.yearsel label{margin:0}
.yearsel select{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  color:var(--chalk);background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:.5rem 2.2rem .5rem .8rem;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.yearsel select:hover{border-color:var(--accent)}

/* ==========================================================================
   THE VERDICT — the headline of the whole page

   Kris's brief in one component: the category first, at display size, in its
   own colour, with the sentence that tells a parent what to do about it. The
   percentile that decided it is present but quiet, in the corner.
   ========================================================================== */
.verdict{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:start;
  padding:clamp(1.4rem,3vw,2rem);margin-bottom:clamp(2rem,4vw,3rem);
  border:1px solid rgb(var(--b-rgb) / .45);border-left:5px solid rgb(var(--b-rgb));
  background:linear-gradient(rgb(var(--b-rgb) / .09),rgb(var(--b-rgb) / .09)),var(--panel)}
@media(min-width:820px){.verdict{grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem)}}
.verdict__state{font-family:var(--disp);font-style:italic;font-weight:800;
  font-variation-settings:'wdth' 82;text-transform:uppercase;line-height:.92;
  font-size:clamp(2rem,5.4vw,3.1rem);color:rgb(var(--b-rgb));margin:0}
.verdict__k{margin-bottom:.55rem}
.verdict__p{margin:0;color:var(--soft);font-size:1rem;max-width:56ch}
.verdict__num{display:block;margin-top:.9rem;font-family:var(--mono);font-size:.64rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}

/* the legend, so nobody has to guess what green means */
.key{display:flex;gap:1.3rem;flex-wrap:wrap;margin:0 0 2rem;padding:0;list-style:none}
.key li{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.64rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.key i{width:.85rem;height:.85rem;border-radius:3px;background:rgb(var(--b-rgb));flex:none}
.key b{color:var(--chalk);font-weight:700}

/* the chip that sits beside a number */
.chip{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:.26rem .5rem;border-radius:6px;
  color:rgb(var(--b-ink-rgb));background:rgb(var(--b-rgb) / .15);
  border:1px solid rgb(var(--b-rgb) / .5);white-space:nowrap}

/* --- results grid -------------------------------------------------------- */
.res{display:grid;gap:clamp(2rem,4vw,3.2rem);grid-template-columns:1fr}
@media(min-width:1000px){.res{grid-template-columns:1.08fr .92fr}}

/* one measurable */
.m{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.2rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.m:first-child{border-top:1px solid var(--line)}
.m__k{font-weight:600;color:var(--chalk);font-size:1rem}
.m__v{font-family:var(--mono);font-weight:800;font-size:1.15rem;color:var(--chalk);white-space:nowrap}
.m__v .chip{margin-left:.55rem;vertical-align:.14em}
/* The bar is the category, not the brand. It is the fastest read on the row. */
.m__bar{grid-column:1/-1;height:6px;background:rgb(var(--chalk-rgb) / .09);position:relative;margin-top:.5rem}
.m__fill{position:absolute;inset:0 auto 0 0;background:rgb(var(--b-rgb));transition:width .5s ease-out}
/* the two boundaries, so a bar shows how close it is to the next category */
.m__bar::before,.m__bar::after{content:'';position:absolute;top:-2px;bottom:-2px;width:1px;
  background:rgb(var(--chalk-rgb) / .28)}
.m__bar::before{left:33%}
.m__bar::after{left:66%}
.m__f{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel)}
.m__f b{color:var(--chalk)}
.up{color:var(--ok)}
.down{color:var(--bad)}
/* Muted rather than red: skipping a drill isn't a failure, and a profile full
   of real numbers shouldn't be shouted at by the one that's missing. */
.dnt{font-family:var(--mono);font-weight:800;letter-spacing:.1em;color:var(--steel)}
.m--dnt .m__k,.m--dnt .m__f{color:var(--steel);opacity:.75}

/* --- the card ------------------------------------------------------------ */
.card{background:var(--panel);border:1px solid var(--line);position:relative}
.card::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:var(--accent);z-index:1}
.card__head,.card__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 1.5rem;font-family:var(--mono);font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.card__head{padding-top:1.1rem}
.card__head-r,.card__foot-r{color:var(--accent)}
.card__foot{border-top:1px solid var(--line);margin-top:.2rem;font-size:.56rem;justify-content:center}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:.4rem 1.5rem 1.1rem;border-bottom:1px solid var(--line)}
.card__no{font-family:var(--mono);font-weight:800;font-size:2.6rem;line-height:.8;color:var(--accent);letter-spacing:-.04em}
.card__no small{display:block;font-size:.6rem;font-weight:500;letter-spacing:.18em;color:var(--steel);margin-top:.55rem}
/* the # sits smaller and dimmer than the number it introduces */
.card__no i{font-style:normal;font-size:.55em;vertical-align:.22em;margin-right:.05em;
  color:rgb(var(--accent-rgb) / .6)}
.card__who{text-align:right}
.card__nm{font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 79;
  text-transform:uppercase;font-size:1.5rem;color:var(--chalk);line-height:.95}
.card__pos{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-top:.45rem}
.card__body{padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.tile{padding:.75rem .85rem;border:1px solid var(--line);border-radius:9px;
  background:rgb(var(--chalk-rgb) / .03);display:block}
.tile__k{display:block;font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.tile__v{display:block;margin-top:.4rem;font-family:var(--mono);font-size:1.35rem;
  font-weight:800;letter-spacing:-.02em;color:var(--chalk);line-height:1}

/* --- radar --------------------------------------------------------------- */
.rank{margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(2rem,5vw,3rem);
  border-top:1px solid var(--line);display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.rank{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
.radarwrap{position:relative}
.radar{display:block;width:100%;max-width:40rem;height:auto;margin:0 auto}
/* The rings are the three categories, so the chart carries the same language
   as everything else: a shape inside the red ring is a shape to work on. */
/* fill-rule is load-bearing, not tidying: it is what turns each of these from
   a filled polygon into a ring with the next one punched out. */
.radar__zone--developing,
.radar__zone--standard,
.radar__zone--above{stroke:none;fill-rule:evenodd}
.radar__zone--developing{fill:rgb(var(--dev-rgb) / .16)}
.radar__zone--standard  {fill:rgb(var(--std-rgb) / .16)}
.radar__zone--above     {fill:rgb(var(--abv-rgb) / .16)}
.radar__ring{fill:none;stroke:rgb(var(--chalk-rgb) / .16)}
.radar__axis{stroke:rgb(var(--chalk-rgb) / .18)}
.radar__area{fill:rgb(var(--accent-rgb) / .18);stroke:var(--accent);stroke-width:2}
/* the dot is its own category's colour — the class on the circle sets --b-rgb */
.radar__dot{fill:rgb(var(--b-rgb));stroke:var(--ink);stroke-width:1.5}
.radar__lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:var(--steel)}
.radar__sc{font-family:var(--mono);font-size:8px;fill:var(--faint)}
.radar__hit{fill:transparent;cursor:pointer}
.radar__hit:focus-visible{outline:none;fill:rgb(var(--accent-rgb) / .18);
  stroke:var(--accent);stroke-width:1.5}
.rtip{position:absolute;z-index:5;pointer-events:none;min-width:9rem;
  padding:.6rem .75rem;background:var(--panel);
  border:1px solid rgb(var(--b-rgb) / .55);box-shadow:0 12px 30px rgb(0 0 0 / .45)}
.rtip__k{display:block;font-family:var(--mono);font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.rtip__v{display:block;margin-top:.25rem;font-family:var(--mono);font-size:1.15rem;
  font-weight:800;color:var(--chalk);line-height:1}
.rtip__p{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.58rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--b-ink-rgb))}

/* ==========================================================================
   WHAT TO WORK ON
   The generic messaging, one block per drill. Ordered worst first, because the
   thing to work on is the thing to read first.
   ========================================================================== */
.work{margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--line)}
.work__list{display:grid;gap:1rem;margin-top:2rem;grid-template-columns:1fr}
@media(min-width:860px){.work__list{grid-template-columns:1fr 1fr}}
.wk{padding:1.4rem 1.5rem;border:1px solid var(--line);border-top:3px solid rgb(var(--b-rgb));
  background:var(--panel)}
.wk__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.wk__k{font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 82;
  text-transform:uppercase;font-size:1.25rem;color:var(--chalk);margin:0;line-height:1}
.wk__what{margin:.9rem 0 0;color:var(--soft);font-size:.97rem}
.wk__how{margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid var(--line-soft);
  font-size:.93rem;color:var(--body-text)}
.wk__how b{display:block;font-family:var(--mono);font-size:.6rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--b-ink-rgb));margin-bottom:.45rem}

/* ==========================================================================
   THE PHYSIO ASSESSMENT
   Read-only here. The clinician upload that fills it is not built yet.
   ========================================================================== */
.assess{margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--line)}
.assess__meta{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);margin:.9rem 0 0}
.assess__list{display:grid;gap:.6rem;margin-top:1.8rem;padding:0;list-style:none}
.as{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:baseline;
  padding:1rem 1.2rem;border:1px solid var(--line);background:var(--panel)}
.as__st{font-family:var(--mono);font-size:.58rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:.26rem .5rem;border-radius:6px;white-space:nowrap;
  color:rgb(var(--b-ink-rgb));background:rgb(var(--b-rgb) / .15);border:1px solid rgb(var(--b-rgb) / .5)}
.as__k{font-weight:600;color:var(--chalk)}
.as__n{grid-column:2/-1;font-size:.93rem;color:var(--body-text)}
@media(max-width:560px){.as__n{grid-column:1/-1}}

/* --- shareable cards ----------------------------------------------------- */
.share{margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--line)}
.share__grid{display:grid;gap:1.6rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:760px){.share__grid{grid-template-columns:1fr 1fr;max-width:60rem}}
.share__one{margin:0}
.share__one canvas{width:100%;height:auto;display:block;border:1px solid var(--line);background:var(--ink)}
.share__one figcaption{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.9rem;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel)}

/* --- footer -------------------------------------------------------------- */
.ftr{border-top:1px solid var(--line);padding-block:2.5rem;margin-top:clamp(3rem,7vw,5rem)}
.ftr__in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   THE SECTION TABS

   A table of contents for the profile. It sticks under the masthead, so it is
   still there when you are four screens down looking at the physio notes and
   want the cards.

   --hdr-h and --tabs-h are measured in results.html and written onto <html>,
   rather than hardcoded here: the masthead wraps to two rows on a narrow
   phone, and a hardcoded 68px would park the tab bar across the middle of it.
   ========================================================================== */
.tabs{position:sticky;top:var(--hdr-h,68px);z-index:50;
  display:flex;gap:.4rem;margin:0 0 2.2rem;
  /* full-bleed background, so content scrolling under it is covered edge to
     edge even though the bar itself sits in the padded content column */
  padding:.55rem 0;background:rgb(var(--ink-rgb) / .92);backdrop-filter:blur(10px);
  box-shadow:0 0 0 100vmax rgb(var(--ink-rgb) / .92);clip-path:inset(0 -100vmax);
  border-bottom:1px solid var(--line);
  /* five tabs do not fit on a 375px phone. Scroll them sideways rather than
     wrapping to a second row — a two-row sticky bar eats the screen the page
     is trying to show. */
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* keep the swipe horizontal — without this a slightly-off swipe scrolls the
     page instead of the bar, which reads as the bar being stuck */
  overscroll-behavior-x:contain;touch-action:pan-x}
.tabs::-webkit-scrollbar{display:none}
/* A cut-off tab is the only thing telling you the bar scrolls, and on a wide
   phone the last one can land flush with the edge and look like the end of the
   list. Fade whichever side has more behind it — set by results.html, which is
   what knows the scroll position. */
.tabs[data-more="right"]{mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
.tabs[data-more="left"] {mask-image:linear-gradient(to right,transparent,#000 34px)}
.tabs[data-more="both"] {mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.tabs a{flex:none;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);
  padding:.55rem .9rem;border:1px solid transparent;border-radius:7px;
  white-space:nowrap;transition:color .16s,background .16s,border-color .16s}
.tabs a:hover{color:var(--chalk);background:rgb(var(--chalk-rgb) / .06)}
.tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the section you are actually looking at */
.tabs a[aria-current]{color:var(--accent);border-color:rgb(var(--accent-rgb) / .45);
  background:var(--wash)}

/* Land the heading below BOTH sticky bars instead of behind them. This is what
   makes the jump land right; the smooth part is scroll-behavior on <html>. */
#verdict,#shape,#work,#assess,#cards{
  scroll-margin-top:calc(var(--hdr-h,68px) + var(--tabs-h,44px) + 1.1rem)}

@media(max-width:560px){
  .tabs a{padding:.5rem .7rem;font-size:.64rem;letter-spacing:.08em}
}
/* Someone who has asked the system for less movement gets the jump without the
   ride — including the page-level smooth scroll, which is set on <html>. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tabs a{transition:none}
}

/* ==========================================================================
   THE COACH SIDE
   Ported from Gridiron's admin. Every colour is a token, so all of this
   follows light mode without a single override below.
   ========================================================================== */
.backlink{display:inline-block;margin-bottom:2rem;background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);padding:0}
.backlink:hover{color:var(--accent)}

/* --- the dashboard stats -------------------------------------------------- */
/* NOT .tile — the athlete card up at line ~295 already owns that name for the
   height/weight boxes, and redefining it here silently blew the type size up
   on a page this file was not even about. */
.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-top:2rem}
.stat{padding:1.3rem 1.4rem;border:1px solid var(--line);background:var(--panel)}
.stat__k{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin:0}
.stat__v{font-family:var(--mono);font-weight:800;font-size:1.9rem;color:var(--chalk);
  margin:.5rem 0 0;line-height:1}
.stat__n{margin:.4rem 0 0;font-size:.85rem;color:var(--body-text)}

/* --- tables --------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);text-align:left;font-weight:500;padding:.7rem .8rem;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.75rem .8rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl td.num{font-family:var(--mono);color:var(--chalk);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgb(var(--chalk-rgb) / .025)}
.tbl strong{font-weight:600;color:var(--chalk)}

/* The status pill reuses the category ink, so "clear" on the coach side is
   the same green as "Above Standard" on the athlete side. */
.pill{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .5rem;border-radius:5px;white-space:nowrap}
.pill--ok{background:var(--ok-wash);color:var(--ok)}
.pill--wait{background:var(--wash);color:var(--accent)}
.pill--no{background:var(--bad-wash);color:var(--bad)}
.linkbtn{background:none;border:0;color:var(--accent);font:inherit;font-size:.82rem;
  cursor:pointer;padding:0;text-decoration:underline}
.linkbtn:hover{color:var(--chalk)}

/* --- upload + column mapping ---------------------------------------------- */
.drop{border:1px dashed rgb(var(--accent-rgb) / .45);padding:clamp(2rem,6vw,3.5rem);text-align:center;
  margin-top:1.6rem;transition:border-color .2s,background .2s}
.drop[data-over='true']{border-color:var(--accent);background:rgb(var(--accent-rgb) / .06)}
.drop input[type=file]{display:block;margin:1rem auto 0;color:var(--steel);
  font-family:var(--mono);font-size:.82rem}
.map{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:1.5rem 0}
/* sheet heading -> where it is saved: reads left to right as one sentence */
.map__row{background:var(--panel);padding:.8rem 1rem;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr);gap:1rem;align-items:center}
.map__from{color:var(--chalk);font-weight:600;overflow-wrap:anywhere}
.map__arrow{color:var(--steel);font-size:1.1rem;line-height:1}
.map__row select,.cell input,.cell select{background:var(--ink);border:1px solid var(--line);
  color:var(--chalk);font-family:var(--mono);font-size:.82rem;padding:.5rem;width:100%;border-radius:6px}
.map__row select:focus,.cell input:focus{border-color:var(--accent);outline:none}
@media(max-width:620px){
  .map__row{grid-template-columns:1fr;gap:.5rem}
  .map__arrow{display:none}
}

/* A review note is prose, not a label — the tracked-out .k style shreds it
   into one word per line inside a narrow table cell. */
.rev{display:block;margin-top:.35rem;font-size:.82rem;color:var(--steel);
  letter-spacing:0;text-transform:none;line-height:1.5}
.cell{min-width:8rem}
.cell--dob{min-width:10rem}

/* --- dialogs -------------------------------------------------------------- */
.ask{border:none;padding:0;max-width:min(34rem,calc(100vw - 2rem));width:100%;
  background:var(--panel);color:var(--chalk);border-radius:16px;
  border:1px solid var(--line);box-shadow:0 30px 80px rgb(0 0 0 / .5)}
.ask::backdrop{background:rgb(0 0 0 / .65)}
.ask__in{padding:2rem}
.ask h2{font-family:var(--disp);font-style:italic;font-weight:800;
  font-variation-settings:'wdth' 82;font-size:1.7rem;line-height:1.05;
  text-transform:uppercase;margin:.7rem 0 .9rem;color:var(--chalk)}
.ask p{margin:0;font-size:.95rem;line-height:1.6;color:var(--body-text)}
.ask__acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.ask__grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1.4rem}
@media(max-width:560px){.ask__grid{grid-template-columns:1fr}}

/* --- steps ---------------------------------------------------------------- */
.steps{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 2.2rem;padding:0;list-style:none}
.steps li{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding:.4rem .7rem;border:1px solid var(--line-soft)}
.steps li[data-on='true']{color:var(--accent);border-color:rgb(var(--accent-rgb) / .5);
  background:var(--wash)}
.steps li[data-done='true']{color:var(--steel);border-color:var(--line)}

/* ==========================================================================
   LIGHT MODE
   These are the screens people sit and read, so they get the choice. The
   accent DARKENS here, from --brand-light-rgb at the top of this file.

   The three categories do NOT simply darken with it. Darkening is what breaks
   them: a yellow only gets darker by getting browner, and a page whose middle
   category is brown has lost the traffic light. Each one splits instead — a
   saturated GRAPHIC colour that stays recognisably red / amber / green and
   clears 3:1 for bars, swatches, borders and the display-size verdict, and a
   deeper INK that clears 4.5:1 for the 9px chip labels. Nothing has to be
   brown, because nothing is doing both jobs any more.
   ========================================================================== */
[data-theme="light"]{
  --ink-rgb:     250 250 250;
  --panel-rgb:   255 255 255;
  --chalk-rgb:    20  20  20;
  --steel-rgb:    94  94  94;
  --accent-rgb:  var(--brand-light-rgb);
  --on-accent:   #ffffff;
  /*             graphic — on #FAFAFA        ink — small text            */
  --dev-rgb:     220  38  38;   /* 4.8:1 */  --dev-ink-rgb: 185  28  28;  /* 6.4:1 */
  --std-rgb:     200 128   0;   /* 3.2:1 */  --std-ink-rgb: 146  92   0;  /* 5.5:1 */
  --abv-rgb:      22 163  74;   /* 3.2:1 */  --abv-ink-rgb:  21 118  56;  /* 5.7:1 */

  /* the trend arrows are small text and nothing else, so they take the inks */
  --ok-rgb:   21 118  56;
  --bad-rgb: 185  28  28;
  --ok-wash:  rgb(var(--ok-rgb) / .12);
  --bad-wash: rgb(var(--bad-rgb) / .10);
}
[data-theme="light"] .card,
[data-theme="light"] .wk,
[data-theme="light"] .as,
[data-theme="light"] .sport,
[data-theme="light"] .group{box-shadow:0 1px 2px rgb(20 21 24 / .06)}
[data-theme="light"] .field input{background:#fff}
[data-theme="light"] .hdr{background:rgb(250 250 250 / .92)}
[data-theme="light"] .rtip{box-shadow:0 12px 30px rgb(0 0 0 / .18)}

/* ==========================================================================
   PHONES

   Almost every athlete opens this on a phone, so this is the case that has to
   be right, not the one that has to survive.
   ========================================================================== */
@media(max-width:760px){
  .hdr__in{gap:.5rem}
  .hdrbtn{font-size:.6rem;letter-spacing:.08em;padding:.58rem .68rem;gap:.3rem}
  /* The name is the <h1> a couple of lines down the page anyway. In a 390px
     bar it is the one thing that can go. */
  .who-pill{display:none}

  /* THE MASTHEAD STOPS STICKING.

     Two sticky bars cost 122px on a 375x812 phone — 15% of the screen, gone,
     on every screenful of a 6000px page. The masthead is a wordmark, a theme
     toggle and Sign out: nothing anybody needs within reach at all times. The
     tab bar is the part worth keeping, so it keeps the top of the screen to
     itself and the masthead scrolls away like ordinary content.

     --hdr-h is set to 0 by results.html when it sees this, which drops the tab
     bar to top:0 and pulls every jump target up with it. One number, read from
     the live layout, so the two cannot disagree. */
  .hdr{position:static}
}

/* A finger is not a mouse pointer. 44px is the smallest thing a thumb hits
   reliably — Apple's number, and Google's is larger still — and every control
   on this page was between 27px and 35px. Height only: the text and the
   padding stay where they are, the box just grows to something hittable. */
@media(max-width:760px),(pointer:coarse){
  .hdrbtn,
  .tabs a,
  .picker button,
  .mark,
  .backlink,
  .chosen a,
  .btn{min-height:44px}
  .backlink,.chosen a{display:inline-flex;align-items:center}
  /* the flex is so the label stays centred once min-height takes over */
  .tabs a,.hdrbtn,.picker button{display:inline-flex;align-items:center;justify-content:center}
  .yearsel select{min-height:44px;
    /* under 16px, iOS zooms the whole page in when you tap a control and
       leaves you there, scrolled sideways, wondering what happened */
    font-size:1rem}
  .field input,.field select{min-height:48px}
  /* A row action in a table is still something a thumb has to land on. */
  .linkbtn{display:inline-flex;align-items:center;min-height:44px}

  /* The grey flash iOS paints over a tapped link is the wrong shape on a
     padded tab and the wrong colour everywhere. Replaced with a press state
     that actually tracks the finger. */
  a,button{-webkit-tap-highlight-color:transparent}
  .tabs a:active,.hdrbtn:active,.picker button:active{background:rgb(var(--chalk-rgb) / .12)}
  .btn:active{transform:translateY(1px)}
}

/* Notched phones: the masthead and the footer sit against the hardware. */
@supports(padding:max(0px)){
  @media(max-width:760px){
    .hdr__in{padding-left:max(min(var(--gut),1.5rem),env(safe-area-inset-left));
             padding-right:max(min(var(--gut),1.5rem),env(safe-area-inset-right))}
    .ftr{padding-bottom:max(2.5rem,env(safe-area-inset-bottom))}
  }
}

@media(max-width:760px){
  /* A phone shows one card at a time, so the preview can be bigger than the
     desktop's two-up and still fit. */
  .share__one figcaption{flex-wrap:wrap}

  /* A <select> is as wide as its longest option wants to be, and on the coach
     side that option is "Game Speed Combine 2026". In a flex row it refuses to
     shrink — min-width:auto is the default — and pushes itself off the screen.
     Let it wrap under its label and give it permission to be narrower. */
  .yearsel{flex-wrap:wrap}
  .yearsel select{min-width:0;max-width:100%}
  /* "7'8"" beside a chip beside a label is three things in one 280px row.
     The grid already gives the value whatever it needs and lets the drill name
     wrap under itself; trimming the number a little is what keeps the chip on
     the same line as it at 320px instead of dropping below. */
  .m__v{font-size:1.05rem}
}
@media(max-width:430px){
  .mark__wd{display:none}
  .mark{gap:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}