/* ==========================================================================
   Gridiron High School Showcase
   Subject: one day, one field, an athlete measured and filmed in front of
   U-Sport recruiters. What they walk away with is a PROSPECT CARD — numbers
   plus film they can send to a coach. That artifact is the product, so it is
   also the design's signature: shown filled in the hero, and it becomes the
   athlete's own card once they log in.

   COLOUR RULE: the palette is black and white, full stop. Pure white marks a
   measured value or the one action we want (register) — never decoration.
   Everything else steps down through chalk and steel on near-black, so the
   hierarchy comes from weight and brightness rather than hue.
   ========================================================================== */

:root{
  /* ======================================================================
     THEME — change these six and the whole site follows, including the
     downloadable cards. Everything below is derived from them.
     ====================================================================== */
  /* The brand, defined once. Light mode overrides the --*-rgb tokens below,
     but never these, so the downloadable cards keep their dark identity while
     still following a rebrand. Change a colour HERE and it reaches the site
     and the athletes' cards together. */
  --brand-rgb:      255 255 255;  /* the brand colour, as raw RGB channels   */
  --brand-light-rgb: 12  12  12;  /* the SAME accent, inverted for light mode:
                                     white on white is invisible, so the
                                     accent flips to near-black there.
                                     Rebranding? Change both of these two
                                     lines and nothing else.                 */
  --brand-ink-rgb:    12 12 12;   /* card background                         */
  --brand-chalk-rgb: 242 242 242; /* card text                               */
  --brand-panel-rgb:  20 20 20;   /* card inner panels                       */
  --brand-steel-rgb: 142 142 142; /* card 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:  #0C0C0C;        /* 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));
  --raise:  rgb(var(--panel-rgb) / .6);
  --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);
  --wash-2:    rgb(var(--accent-rgb) / .16);

  /* status — deliberately NOT derived from the brand: approved must read as
     approved even if the accent turns green one day */
  --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;
  --band:clamp(3.5rem,8vw,6.5rem);
}

*,*::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 buttons. 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)}
.photo{filter:grayscale(1) contrast(1.14)}
section[id]{scroll-margin-top:5.5rem}

/* --- 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}
/* Each phrase holds one line. The left column tops out at 523px (--max 1280
   less gutters and gap), so the cap is what "GET MEASURED." needs there. */
.d--xl{font-size:clamp(1.9rem,4.7vw,3.9rem)}
.d--lg{font-size:clamp(2.1rem,5.2vw,3.9rem)}
.d--md{font-size:clamp(1.6rem,3.4vw,2.5rem)}
.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--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. Everything else on the
   page lines up inside a centred 1280px measure, which on a wide screen pushed
   the crest ~144px in from the edge and left it floating toward the middle.
   A masthead belongs in the corner of the screen, so this one overrides .wrap
   and keeps only a small gutter of its own. */
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:68px;
  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 crest is painted, not placed: one greyscale PNG used as a mask and
   filled with the current text colour, so it inverts by itself on the
   light-mode pages instead of needing a second file that can drift. */
.mark__badge{flex:none;width:34px;height:35px;background:var(--chalk);
  -webkit-mask:url(../img/brand/gridiron-badge.png) center/contain no-repeat;
          mask:url(../img/brand/gridiron-badge.png) center/contain no-repeat}
.nav{display:flex;gap:1.5rem}
.nav a{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--steel)}
.nav a:hover{color:var(--chalk)}

/* Sign in is the one thing in the bar people are looking for, so it's boxed
   rather than left in the row of grey labels. Outlined, not filled: a solid
   slab in a 68px bar shouts over the wordmark. Square, because every other
   button on the site is. Brand token, so it follows a recolour. */
.nav .nav__cta{color:var(--accent);border:1px solid rgb(var(--accent-rgb) / .55);
  padding:.5rem .8rem;margin:-.5rem 0;font-weight:700;
  transition:background .16s,color .16s,border-color .16s}
.nav .nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hdr__tog{display:none;background:none;border:1px solid var(--line);color:var(--chalk);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;padding:.55rem .85rem;cursor:pointer}
@media(max-width:940px){
  .nav{position:fixed;inset:68px 0 auto;flex-direction:column;gap:0;background:var(--panel);
    border-bottom:1px solid var(--line);padding:.5rem var(--gut) 1.25rem;display:none}
  .nav[data-open='true']{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav .nav__cta{margin:.9rem 0 0;padding:.9rem;border:1px solid var(--accent);text-align:center}
  .hdr__tog{display:block}
}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;opacity:.66}
/* directional, not flat: heavy under the headline, clear through the middle so
   the photograph actually reads, then weighted again behind the card */
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(100deg,var(--ink) 4%,rgb(var(--ink-rgb) / .88) 32%,rgb(var(--ink-rgb) / .34) 58%,rgb(var(--ink-rgb) / .74) 100%),
    linear-gradient(to top,rgb(var(--ink-rgb) / .9) 0%,rgb(var(--ink-rgb) / 0) 42%)}
/* padding-block, not the padding shorthand: the shorthand zeroed the inline
   gutter .wrap supplies and ran the hero edge-to-edge on narrow screens. */
.hero__in{position:relative;padding-block:clamp(1.5rem,3vw,2.4rem) clamp(2.5rem,6vw,4.5rem);
  display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
/* The hero carries a headline AND two panels, which the standard 1280 wrap
   can't hold without the card's own labels wrapping. It gets more room. */
@media(min-width:1200px){ .hero .wrap{max-width:1560px} }
@media(min-width:1260px){ .hero__in{grid-template-columns:.85fr 1.42fr} }
.hero__sub{margin:1.5rem 0 2rem;color:var(--soft)}
.hero__sub b{color:var(--chalk);font-weight:600}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero__meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.hero__meta b{display:block;font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--chalk)}

/* --- THE PROSPECT CARD — the signature ----------------------------------- */
.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}
/* The header and footer strips the downloadable card has. Without them the
   preview on the home page didn't read as the same artifact. */
.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;
  letter-spacing:.14em;justify-content:center}
.card__foot span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card__foot-r{white-space:nowrap;flex:none}

.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}
.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__rows{padding:.35rem 1.5rem 1rem}
.row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.row__v{font-family:var(--mono);font-weight:800;font-size:1.05rem;color:var(--accent);font-variant-numeric:tabular-nums}
/* Gold, silver and bronze for the podium; everything else keeps the accent.
   Deliberately literal rather than derived from the theme — a silver medal is
   silver whatever colour the brand turns, and these survived the switch to a
   black-and-white palette for that reason. */
.pct--m1{background:#D4AF37!important;border-color:#D4AF37!important;color:#2A1F00!important}
.pct--m2{background:#A8B0B8!important;border-color:#A8B0B8!important;color:#15181B!important}
.pct--m3{background:#B0762F!important;border-color:#B0762F!important;color:#1B0F00!important}
.pct{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--chalk);
  background:rgb(var(--chalk-rgb) / .09);padding:.24rem .45rem;min-width:3.1rem;text-align:center}
.card__body{padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--line);
  display:flex;gap:1.4rem;flex-wrap:wrap}
.card__body div{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.card__body b{color:var(--chalk);font-weight:700}

/* measurement tiles — the numbers a coach scans first, so they get room */
.card__body{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}
.tile__p{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.6rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tile__p::after{content:' PCTL'}

/* 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)}

/* year dropdown */
.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)}
.yearsel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card__tag{position:absolute;top:-1px;right:-1px;background:var(--accent);color:var(--on-accent);
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .6rem}

/* --- the film ------------------------------------------------------------
   Sits where the founder bios were. The frame keeps 16:9 whether the video
   has loaded, failed, or hasn't been supplied yet, so the section never
   collapses to nothing mid-page. */
/* Edge to edge, no padding and no heading: the reel is a band in its own
   right rather than a figure sitting inside the content column. */
.film{background:var(--ink)}
/* 16:9 (56.25vw is 9/16 of the window) until that gets tall enough to swallow
   the screen, then the height caps and the video crops instead.

   Height rather than `aspect-ratio` with a `max-height`, which is what this was
   and which quietly broke the full-bleed: when max-height clamps an
   aspect-ratio box, the browser shrinks the WIDTH to keep the ratio, so on a
   1440x900 window the band came out 1248px wide and sat off to one side.
   Setting the height directly leaves the width at 100% and lets object-fit do
   the cropping, which is the job it's there for. */
.film__frame{position:relative;margin:0;width:100%;height:min(56.25vw,78vh);
  overflow:hidden;background:var(--ink);
  border-block:1px solid var(--line)}
/* The still lives on its own layer, not only on the <video poster>: a video
   whose source is missing or fails drops its poster in some browsers and
   leaves a black box, and this section has to look finished before the footage
   exists. Left in colour to match the reel above it — a greyscale still that
   snaps to colour the instant playback starts reads as a fault. */
.film__frame::before{content:'';position:absolute;inset:0;
  background:url(../img/event/turf-drills.jpg) center/cover no-repeat}
/* The one piece of colour on the site, by request. Everything else — every
   photograph — is still forced to greyscale by .photo, so if this ever needs
   to fall back in line, the filter that rule uses is the thing to copy here.
   object-position centres the crop: the frame only ever crops when the
   viewport is short enough for max-height to bite. */
.film__v{position:relative;z-index:1;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center center}
/* Autoplay is muted by browser rule, so sound has to be the viewer's choice.
   Hidden until the file actually loads — an unmute button over a still frame
   is a promise the page can't keep. */
.film__sound{position:absolute;z-index:2;right:var(--gut);bottom:clamp(1rem,3vw,1.9rem);
  background:rgb(var(--ink-rgb) / .72);border:1px solid var(--line);color:var(--chalk);
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.6rem .9rem;cursor:pointer;
  transition:background .16s,border-color .16s}
.film__sound:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.film__sound:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- tiers: the two pathways ----------------------------------------------
   Each card names itself before it prices itself — what an athlete would call
   this day (BUILD / GET SEEN), then the plain label for what it is. Every row
   is one capability and what it actually means, and the wording is Kris's
   verbatim, so nothing here should be "improved" into longer sentences.

   With the accent now white, the two cards can't be told apart by hue, so the
   senior one takes a white keyline and the filled button. */
.tiers{padding-block:var(--band)}
.tiers__grid{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2.8rem}
@media(min-width:820px){.tiers__grid{grid-template-columns:1fr 1fr}}
.tier{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  padding:2rem;display:flex;flex-direction:column}
.tier--hot{border-color:var(--accent)}

.tier__g{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--steel)}
.tier__nm{align-self:start;
  font-family:var(--disp);font-style:italic;font-weight:900;
  font-size:clamp(2.5rem,5.5vw,3.5rem);line-height:.88;letter-spacing:-.035em;
  color:var(--chalk);margin:.8rem 0 0;text-transform:uppercase}
.tier__kind{display:block;font-family:var(--disp);font-style:italic;font-weight:800;
  font-size:clamp(1rem,2vw,1.15rem);text-transform:uppercase;
  color:var(--accent);margin-top:.4rem}

/* Price and "+ HST" share a baseline rather than the "+ HST" floating at the
   number's midpoint, which is what made the old block read as two things. */
.tier__price{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;
  margin:1.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.tier__p{font-family:var(--mono);font-weight:800;font-size:clamp(2.3rem,4.5vw,3rem);
  color:var(--accent);line-height:.9;letter-spacing:-.04em}
.tier__hst{font-family:var(--mono);font-size:.85rem;font-weight:500;
  letter-spacing:.06em;color:var(--steel)}

/* The one dash left on the card, so it still means something. */
.tier__say{position:relative;padding-left:1.65rem;margin:1.05rem 0 0;
  font-size:.98rem;color:var(--soft)}
.tier__say::before{content:'';position:absolute;left:0;top:.62em;
  width:.85rem;height:2px;background:var(--accent)}

.tier__list{list-style:none;margin:1.7rem 0 0;padding:1.7rem 0 0;
  border-top:1px solid var(--line-soft);display:grid;gap:1.2rem}
.tier__list li{display:grid;grid-template-columns:auto 1fr;gap:.95rem;align-items:start}
/* No frame around these. A box makes the glyph look like a button and leaves
   it floating in dead space, and the rows already have a left edge — the grid
   column gives them one. The glyph sits on the label's line instead, nudged
   down by a hair so its optical centre lands on the cap height rather than its
   bounding box lining up with the ascender. */
.tier__ico{width:24px;height:24px;flex:none;display:block;margin-top:.12rem}
.tier__ico svg{width:100%;height:100%;display:block;fill:none;stroke:var(--accent);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tier__list strong{display:block;font-family:var(--mono);font-size:.7rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--chalk);margin-bottom:.32rem}
.tier__list span{display:block;color:var(--body-text);font-size:.92rem;line-height:1.5}

/* auto margin, so both buttons land on the same line however unevenly the two
   lists wrap */
.tier__cta{margin:auto 0 0;padding-top:2.1rem}
.tier__sprite{position:absolute;width:0;height:0;overflow:hidden}


/* --- the day (a real sequence, so it gets numbers) ----------------------- */
.day{background:var(--panel);border-block:1px solid var(--line);padding-block:var(--band)}
.day__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:2.8rem}
.part__n{font-family:var(--mono);font-weight:800;font-size:.78rem;letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:.85rem}
.part__r{height:1px;background:var(--line);margin-bottom:1.1rem}
.part h3{font-family:var(--body);font-weight:600;font-size:1.08rem;color:var(--chalk);margin:0 0 .55rem}
.part p{margin:0;font-size:.94rem}

/* --- battery ------------------------------------------------------------- */
.batt{padding-block:var(--band)}
.batt__grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.test{background:var(--ink);padding:1.5rem}
.test b{display:block;font-family:var(--disp);font-style:italic;font-weight:800;
  font-variation-settings:'wdth' 79;text-transform:uppercase;font-size:1.25rem;color:var(--chalk);line-height:1}
.test span{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.batt__note{margin-top:1.6rem;font-size:.9rem;color:var(--steel)}

/* --- register ------------------------------------------------------------ */
.reg{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.reg__bg{position:absolute;inset:0}
.reg__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;opacity:.46}
.reg__scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 30%,rgb(var(--ink-rgb) / .55))}
.reg__in{position:relative;padding-block:var(--band)}
.reg__facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:2.2rem 0;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:56rem}
.fact{background:var(--ink);padding:1.3rem}
.fact b{display:block;font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--chalk)}
.fact span{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

/* --- results login ------------------------------------------------------- */
.back{border-top:1px solid var(--line);background:var(--panel);padding-block:var(--band)}
.back__in{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.back__in{grid-template-columns:1.2fr .8fr}}

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

/* --- motion -------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rise[data-in='true']{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* --- schools in attendance ------------------------------------------------
   Twelve U Sports football programs turned up last year. On a page selling
   exposure this is the proof, so it gets its own band rather than a footnote. */
.schools{border-top:1px solid var(--line);background:var(--panel);padding-block:clamp(2.5rem,6vw,4rem)}
/* Twelve crests, so the column count is pinned to factors of twelve. auto-fit
   landed on seven and left an orphan row of five, which reads as a mistake. */
.schools__row{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:2rem}
@media(min-width:480px){ .schools__row{grid-template-columns:repeat(3,1fr)} }
@media(min-width:760px){ .schools__row{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1080px){ .schools__row{grid-template-columns:repeat(6,1fr)} }

/* Each crest is a door to that programme's football page. The name is the
   point of the hover: a crest alone is a guessing game unless you already
   follow U Sports. */
.school{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  padding:1.4rem .8rem 1.1rem;border:1px solid transparent;border-radius:12px;
  text-decoration:none;text-align:center;
  transition:border-color .18s,background .18s,transform .18s}
.school img{height:clamp(58px,6.5vw,84px);width:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.7);opacity:.62;transition:filter .18s,opacity .18s}
.school__n{font-family:var(--mono);font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);transition:color .18s}
.school__t{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
  opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s}
.school__t i{font-style:normal}

.school:hover,.school:focus-visible{border-color:var(--line);background:rgb(var(--chalk-rgb) / .04);
  transform:translateY(-3px);outline:none}
.school:hover img,.school:focus-visible img{filter:none;opacity:1}
.school:hover .school__n,.school:focus-visible .school__n{color:var(--chalk)}
.school:hover .school__t,.school:focus-visible .school__t{opacity:1;transform:none}
.school:focus-visible{border-color:var(--accent)}

/* No hover on a touch screen, so the team name simply stays put there. */
@media(hover:none){
  .school__t{opacity:1;transform:none}
  .school img{filter:none;opacity:.9}
}

/* --- photo bands ----------------------------------------------------------
   Film Room's best move was letting a photograph run full width and be the
   whole section. Same idea here in this palette: no border, no card, just the
   frame and a caption sitting on it. */
.band{position:relative;overflow:hidden;border-block:1px solid var(--line)}
.band__img{position:relative;aspect-ratio:21/9;min-height:280px}
.band__img img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.band__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgb(var(--ink-rgb) / .93) 0%,rgb(var(--ink-rgb) / .15) 52%,rgb(var(--ink-rgb) / .35) 100%)}
.band__cap{position:absolute;inset:auto 0 0;padding-block:clamp(1.2rem,3vw,2.2rem)}
.band__cap h3{font-family:var(--disp);font-style:italic;font-weight:800;
  font-variation-settings:'wdth' 79;text-transform:uppercase;color:var(--chalk);
  font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:.95;margin:.5rem 0 0}
.band__cap p{margin:.6rem 0 0;max-width:44ch;color:var(--soft);font-size:.98rem}
@media(max-width:700px){.band__img{aspect-ratio:4/3}}

/* ==========================================================================
   23. Signed-in areas — login, athlete results
   ========================================================================== */

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

/* status messages: say what happened and what to do about it */
.note{border:1px solid rgb(var(--accent-rgb) / .4);background:var(--wash);
  padding:.95rem 1.15rem;margin:1.4rem 0;font-size:.95rem}
.note--bad{border-color:rgb(255 122 122 / .45);background:var(--bad-wash)}
.note--ok{border-color:rgb(74 222 128 / .45);background:var(--ok-wash)}
.note strong{color:var(--chalk)}
/* The roster's "these groups no longer match the birth years" notice: the same
   status panel, with its two actions on a line of their own under the wording. */
.oddgrp{margin:0 0 1.4rem}
.oddgrp p{margin:0}
.oddgrp__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1rem}

/* the two doors */
.doors{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2.5rem;max-width:52rem}
@media(min-width:720px){.doors{grid-template-columns:1fr 1fr}}
.door{background:var(--panel);border:1px solid var(--line);
  padding:1.8rem;transition:border-color .18s;position:relative;
  display:flex;flex-direction:column}
.door:hover{border-color:var(--accent)}
.door__acts{margin-top:auto;padding-top:1.3rem}
/* both actions are block-level so they always stack — never let the second one
   flow up alongside "Sign in" */
.door__go,.door__alt{display:block;width:fit-content}
.door__alt{margin-top:.75rem;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgb(var(--accent-rgb) / .45);padding-bottom:3px;transition:color .16s,border-color .16s}
.door__alt:hover{color:var(--chalk);border-bottom-color:var(--chalk)}
.door__note{display:block;margin-top:.75rem;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.door h2{font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 79;
  text-transform:uppercase;color:var(--chalk);font-size:1.7rem;margin:.7rem 0 .5rem;line-height:1}
.door p{margin:0;font-size:.94rem}
.door__go{font-family:var(--mono);font-size:.78rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;transition:color .16s}
.door__go:hover{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, not tidying. An <input> carries an
   intrinsic width from its size attribute, and a grid item's min-width:auto
   refuses to shrink below it — so the oversized athlete-code field (1.9rem
   mono, wide tracking) demanded 430px inside a 350px column and pushed the
   whole page into horizontal scroll on a phone. Every field is held to the
   column now, whatever type it is set at. */
.field input,.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;transition:border-color .15s;
  width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea: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 button{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}

/* 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}
.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)}
.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)}

/* results grid — CSS decides the columns, not JS */
.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(--accent);white-space:nowrap}
.m__bar{grid-column:1/-1;height:3px;background:rgb(var(--chalk-rgb) / .09);position:relative;margin-top:.35rem}
.m__fill{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.m__f{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  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)}

/* radar */
/* Its own band below the numbers, with a rule above it: squeezed into the
   right-hand column under the card it was half the size and read as an
   afterthought. */
.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)}
}
.radar{display:block;width:100%;max-width:40rem;height:auto;margin:0 auto}
.radar__ring{fill:none;stroke:rgb(var(--chalk-rgb) / .13)}
.radar__axis{stroke:rgb(var(--chalk-rgb) / .18)}
.radar__area{fill:rgb(var(--accent-rgb) / .17);stroke:var(--accent);stroke-width:2}
.radar__dot{fill:var(--accent)}
.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)}

/* --- 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)}

/* --- timesheet + coach tables --------------------------------------------- */
.sums{display:flex;gap:1.6rem;flex-wrap:wrap}
.sums b{display:block;font-family:var(--mono);font-weight:800;font-size:1.6rem;color:var(--accent);line-height:1}
.sums span{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.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 th.num{text-align:left}
.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)}
.pill{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .5rem;white-space:nowrap}
.pill--ok{background:var(--ok-wash);color:var(--ok)}
.pill--wait{background:var(--wash-2);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)}
.linkbtn--bad{color:var(--bad)}

/* --- 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's 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__row--head{padding:.6rem 1rem}
.map__from{color:var(--chalk);font-weight:600;overflow-wrap:anywhere}
.map__arrow{color:var(--steel);font-size:1.1rem;line-height:1}
.map__unused{background:var(--panel);padding:.8rem 1rem}
.map__unused summary{cursor:pointer}
.map__unused .map__row{padding:.8rem 0}
.map__row select{background:var(--ink);border:1px solid var(--line);color:var(--chalk);
  font-family:var(--mono);font-size:.82rem;padding:.5rem;width:100%}
/* 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}
.rev b{color:var(--chalk);font-weight:600}

/* the owner is one person, so this sits well below the two real doors */
/* The owner's door. Deliberately not a third card — it isn't for the public —
   but bordered and accented so Kris can find it at a glance. */
.ownerdoor{display:flex;align-items:center;gap:.9rem;width:fit-content;
  margin-top:2.6rem;padding:.9rem 1.2rem;text-decoration:none;
  border:1px solid rgb(var(--accent-rgb) / .5);background:rgb(var(--accent-rgb) / .07);
  transition:background .16s,border-color .16s,transform .16s}
.ownerdoor:hover,.ownerdoor:focus-visible{background:var(--accent);border-color:var(--accent);
  transform:translateY(-2px);outline:none}
.ownerdoor__h{font-family:var(--mono);font-size:.76rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--chalk)}
.ownerdoor__go{margin-left:.2rem;color:var(--accent);transition:transform .16s}
.ownerdoor:hover .ownerdoor__go{transform:translateX(3px)}
.ownerdoor:hover .ownerdoor__h,
.ownerdoor:hover .ownerdoor__go{color:var(--on-accent)}

/* ==========================================================================
   24. Light mode — signed-in pages only
   The public site stays dark; these are the screens people actually read and
   work in. Only pages marked <html data-themeable> respond.

   The accent is DARKER here on purpose, and comes from --brand-light-rgb at
   the top of this file, so the whole palette still lives in one block.
   ========================================================================== */
[data-theme="light"]{
  --ink-rgb:     250 250 250;   /* page */
  --panel-rgb:   255 255 255;   /* cards, tables */
  --chalk-rgb:    20  20  20;   /* text */
  --steel-rgb:    94  94  94;   /* muted labels */
  --accent-rgb:  var(--brand-light-rgb);
  --on-accent:   #ffffff;
  --ok-rgb:   21 128 61;
  --bad-rgb: 185  28 28;
  --ok:  rgb(var(--ok-rgb));
  --bad: rgb(var(--bad-rgb));
  --ok-wash:  rgb(var(--ok-rgb) / .12);
  --bad-wash: rgb(var(--bad-rgb) / .10);
}
/* a couple of places lean on the dark ground for depth; give them a border
   instead of a shadow so the light theme doesn't look flat */
[data-theme="light"] .card,
[data-theme="light"] .tbl-wrap,
[data-theme="light"] .door{box-shadow:0 1px 2px rgb(20 21 24 / .06)}
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea,
[data-theme="light"] .tbl input{background:#fff}
[data-theme="light"] .hdr{background:rgb(250 250 250 / .92)}

/* the toggle itself */
/* Back, the theme toggle and Sign out sit in a row, so they get one treatment.
   They used to be three different sizes and two different colours. */
.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}

/* ---- the signed-in bar on a small screen ---------------------------------
   These pages carry more in the header than the public ones — who you are,
   Back, the theme toggle, Sign out — and none of it wrapped, shrank or
   truncated. On a phone the row simply ran past the right edge and took the
   whole page's horizontal scroll with it, so every screen below stretched too.
   Three things fix it: let the row wrap, let the buttons get smaller, and drop
   the one item the page already says elsewhere. */
.hdr__in{flex-wrap:wrap;row-gap:.55rem}
.who-pill,.whoami{min-width:0}
.who-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@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 further down on the results page,
     and the account menu still carries it on the dashboard. In a 390px bar it
     is the one thing that can go. */
  .who-pill{display:none}
  .whoami__name{max-width:7.5rem}
}
/* Below this the crest alone identifies the page; the wordmark is the next
   thing that can go rather than letting the row wrap to three lines. */
@media(max-width:430px){
  .mark__wd{display:none}
  .mark{gap:0}
}

/* ---- big state switches (admin) --------------------------------------------
   These two control whether parents can register and whether kids can see
   their numbers, so they read as status first and button second: current state
   in large type, a live dot, and the action spelled out underneath. ---------- */
.switches{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;margin:0 0 2.5rem}
.sw{display:block;width:100%;text-align:left;cursor:pointer;position:relative;
  padding:1.35rem 1.5rem;border:2px solid;border-radius:14px;background:var(--panel);
  font:inherit;color:var(--chalk);transition:transform .14s,box-shadow .16s,border-color .16s}
.sw:hover{transform:translateY(-2px)}
.sw:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sw[disabled]{opacity:.55;cursor:progress;transform:none}
.sw__k{display:block;font-family:var(--mono);font-size:.7rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.sw__state{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 .5rem;
  font-family:var(--disp);font-style:italic;font-weight:800;font-variation-settings:'wdth' 82;
  font-size:clamp(1.5rem,3.4vw,2rem);line-height:1;text-transform:uppercase}
.sw__dot{width:.7em;height:.7em;border-radius:50%;flex:none;background:currentColor}
.sw__do{display:block;font-family:var(--mono);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.sw:hover .sw__do{color:var(--chalk)}

.sw--on{border-color:var(--ok);background:linear-gradient(var(--ok-wash),var(--ok-wash)),var(--panel)}
.sw--on  .sw__state{color:var(--ok)}
.sw--on  .sw__dot{box-shadow:0 0 0 4px rgb(74 222 128 / .2)}
.sw--off{border-color:var(--bad);background:linear-gradient(var(--bad-wash),var(--bad-wash)),var(--panel)}
.sw--off .sw__state{color:var(--bad)}
.sw--off .sw__dot{box-shadow:0 0 0 4px rgb(255 122 122 / .18)}
[data-theme="light"] .sw--on  .sw__dot{box-shadow:0 0 0 4px rgb(21 128 61 / .18)}
[data-theme="light"] .sw--off .sw__dot{box-shadow:0 0 0 4px rgb(185 28 28 / .16)}

/* ---- confirm dialog ---- */
.ask{border:none;padding:0;max-width:min(30rem,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}
.ask p{margin:0;font-size:.95rem;line-height:1.6;color:var(--chalk)}
.ask__acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}

/* ---- scope toggle + secondary units (athlete results) ---- */
.scope{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.picker--sm button{padding:.4rem .8rem;font-size:.68rem}
/* the raw inches ride along with the feet-and-inches reading */
.m__raw{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;
  color:var(--steel);margin-left:.35rem}


/* ---- placing chip -------------------------------------------------------
   Sits beside the number and says where that number finished. Podium places
   get real medal colours, which are literal on purpose: silver is silver
   whatever the brand accent becomes. */
.rankchip{display:inline-block;margin-left:.55rem;vertical-align:.18em;
  font-family:var(--mono);font-size:.62rem;font-weight:800;letter-spacing:.06em;
  padding:.22rem .45rem;border-radius:6px;min-width:2.3rem;text-align:center;
  color:var(--accent);background:rgb(var(--accent-rgb) / .14);
  border:1px solid rgb(var(--accent-rgb) / .4)}
.rankchip--m1{background:#D4AF37;border-color:#D4AF37;color:#2A1F00}
.rankchip--m2{background:#A8B0B8;border-color:#A8B0B8;color:#15181B}
.rankchip--m3{background:#B0762F;border-color:#B0762F;color:#1B0F00}


/* The verified strip on the home page's example card. Green rather than the
   brand: this is the one thing on the card making a claim about truth — these
   numbers were taken on a clock, on this date — and a status reads as a status.
   It's also the only colour the black-and-white palette allows itself, which is
   exactly why it carries. */
.card__verify{display:inline-flex;align-items:center;gap:.5rem;margin:0 auto 1.4rem;
  padding:.5rem .9rem;border:1px solid rgb(var(--ok-rgb) / .45);border-radius:999px;
  background:var(--ok-wash);font-family:var(--mono);font-size:.54rem;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ok);
  max-width:calc(100% - 3rem);text-align:center;line-height:1.5}
.card__verify-d{color:var(--steel);font-weight:700}
.card__verify-wrap{display:flex;justify-content:center}
.card__verify .tick{width:.85rem;height:.5rem;flex:none;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);margin-top:-.2rem}

/* ---- did not test -------------------------------------------------------
   Muted rather than red: skipping a drill isn't a failure, and a card 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}

/* ---- owner dashboard: hub tiles ----------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.bigtile{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left;
  padding:1.7rem 1.6rem 1.5rem;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);color:var(--chalk);font:inherit;cursor:pointer;
  transition:transform .14s,border-color .16s,box-shadow .16s}
.bigtile:hover{transform:translateY(-3px);border-color:var(--accent)}
.bigtile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.bigtile__k{font-family:var(--mono);font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.bigtile__h{font-family:var(--disp);font-style:italic;font-weight:800;
  font-variation-settings:'wdth' 82;font-size:1.6rem;line-height:1;text-transform:uppercase}
.bigtile__p{font-size:.9rem;line-height:1.55;color:var(--body-text);margin-top:.2rem}
.bigtile__go{margin-top:auto;padding-top:.7rem;font-family:var(--mono);font-size:.7rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.bigtile:hover .bigtile__go{color:var(--accent)}

.backlink{display:inline-block;margin-bottom:2rem;background:none;border:0;cursor:pointer;
  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)}

/* a code is meant to be read aloud and typed, so give it room */
.codecell{font-family:var(--mono);font-weight:800;font-size:1rem;letter-spacing:.08em;color:var(--accent)}

/* ---- roster: second lines in a cell, and the whole row opens the athlete ---- */
.cellsub{display:block;font-family:var(--mono);font-size:.74rem;color:var(--steel);
  margin-top:.2rem;overflow-wrap:anywhere}
.tbl strong{font-weight:600;color:var(--chalk)}
.rosterrow{cursor:pointer}
/* green for signed, like the verified strip: it's a status, not decoration */
.waiv{font-family:var(--mono);font-size:.78rem;font-weight:700;white-space:nowrap;color:var(--ok)}
.waiv--no{color:var(--steel);font-weight:500}
.rosterrow:focus-visible td{background:rgb(var(--accent-rgb) / .08)}
.rosterrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---- athlete profile dialog ---- */
.ath{max-width:min(52rem,calc(100vw - 2rem))}
/* A column: the profile (or the edit form) scrolls, and the buttons stay under
   it, so Save is on screen however far down a long form Kris is. dvh, where
   there is one, because 100vh on a phone runs under the browser's toolbar and
   would hide those buttons. */
.ath__in{position:relative;display:flex;flex-direction:column;
  max-height:calc(100vh - 4rem);max-height:calc(100dvh - 2rem)}
.ath__scroll{overflow-y:auto;overscroll-behavior:contain;padding:2rem 2rem 1.6rem}
.ath .ath__acts{margin:0;padding:1rem 2rem 1.2rem;border-top:1px solid var(--line)}
.ath__acts .note{flex-basis:100%;margin:0 0 .2rem}
/* off to the right, away from Edit and Close */
.ath__acts .ath__del{margin-left:auto;align-self:center}
/* a background of its own: the profile scrolls underneath it */
.ath__x{position:absolute;top:1rem;right:1.1rem;z-index:1;background:var(--panel);border:0;border-radius:8px;cursor:pointer;
  color:var(--steel);font-size:1.8rem;line-height:1;padding:.2rem .4rem}
.ath__x:hover{color:var(--chalk)}
.ath__top{display:flex;gap:1.2rem;align-items:center;padding-right:2.5rem}
.ath__top h2{margin:.35rem 0 .3rem}
.ath__top .codecell{margin:0}
.ath__pic{width:88px;height:88px;object-fit:cover;border-radius:12px;border:1px solid var(--line);flex:none}
/* min(): on a phone the dialog is narrower than 20rem, and a column that
   refuses to shrink scrolls the whole profile sideways */
.ath__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));gap:1.4rem 2rem;margin-top:1.6rem}
.ath__sec{border-top:1px solid var(--line);padding-top:.9rem}
.ath dl{display:grid;grid-template-columns:9.5rem 1fr;gap:.45rem .8rem;margin:.7rem 0 0}
.ath dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);padding-top:.18rem}
.ath dd{margin:0;font-size:.92rem;color:var(--chalk);overflow-wrap:anywhere}
.ath dd a{color:var(--accent)}
.ath__none{color:var(--steel);font-size:.85rem}
.ath__pre{white-space:pre-wrap}
.ath .ath__saved{margin:1.2rem 0 0}
/* The edit form: the profile's sections, each answer a field. The dialog's
   own `.ask p` would otherwise turn the hints into full-size body text. */
.ath .ath__lede{margin:.9rem 0 0;max-width:62ch;font-size:.92rem;color:var(--body-text)}
.ath__form .ath__sec > .k{margin-bottom:.9rem}
.ath__form .field{margin-bottom:.85rem}
.ath__form .field--split{gap:.8rem}
.ath .field__hint{margin:.45rem 0 0;font-size:.8rem;line-height:1.45;color:var(--body-text)}
/* the photo: changed where the profile shows it. The file input itself is
   hidden (still focusable) behind a button-looking label. */
.ath__pic--none{display:grid;place-items:center;border-style:dashed;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.ath__photoacts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin-top:1rem}
.ath .ath__photobtn{padding:.6rem 1rem;font-size:.68rem}
.ath__file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.ath__photoacts:has(.ath__file:focus-visible) .ath__photobtn{outline:2px solid var(--accent);outline-offset:3px}
.ath__photonote{flex-basis:100%;font-size:.82rem;color:var(--body-text)}
.ath__photonote:empty{display:none}
@media (max-width:30rem){
  .ath dl{grid-template-columns:1fr;gap:.1rem} .ath dd{margin-bottom:.5rem}
  .ath__scroll{padding:1.5rem 1.1rem 1.2rem}
  /* side by side, not stacked: a pinned bar two buttons tall eats the form */
  .ath .ath__acts{padding:.9rem 1.1rem 1rem;gap:.5rem}
  .ath__acts .btn{padding-inline:1rem;justify-content:center;white-space:nowrap}
  .ath__acts .btn--go{flex:1}
}

/* A button that isn't a link yet. Reads as a state, not something to click. */
.btn--soon{background:rgb(var(--chalk-rgb) / .09);color:var(--steel);cursor:default;
  border:1px dashed var(--line)}
.btn--soon:hover{background:rgb(var(--chalk-rgb) / .09)}




/* ---- hero: the two artifacts, side by side -------------------------------
   An athlete leaves with a numbers card and a ranking card. They sit next to
   each other, the chart dropped lower so the pair reads as two things laid
   down rather than one block. Hovering either lifts it. */
.hero__art{display:grid;gap:1.1rem;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(19.5rem,1fr))}

.hero__art .card{position:relative;z-index:2;width:100%;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.hero__art .card:hover{z-index:4;transform:translateY(-6px);
  box-shadow:0 30px 70px rgb(0 0 0 / .6)}

/* Matched to the card beside it rather than dropped below it: the grid
   stretches both to the taller of the two, and the plot takes whatever height
   is left over after the header strip. The chart keeps its aspect ratio and
   centres in that space, so it grows without distorting. */
.sh{position:relative;z-index:1;width:100%;margin:0;
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 26px 60px rgb(0 0 0 / .62);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.sh:hover{z-index:5;transform:translateY(-6px) scale(1.02);
  box-shadow:0 34px 80px rgb(0 0 0 / .7)}
.sh::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:var(--accent)}
.sh__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.1rem 1.2rem .2rem;font-family:var(--mono);font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.sh__head-r{color:var(--accent)}
/* Mirrors the card's foot so the pair reads as two artifacts of the same kind,
   and gives the taller tile something to close on. */
.sh__foot{display:flex;justify-content:flex-end;padding:.55rem 1.2rem 1rem;
  border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:.58rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sh__svg{display:block;width:100%;height:100%;padding:.15rem .45rem .5rem}

/* A thin trace with lit nodes, not a filled blob: the plot should read as an
   instrument, which is what the whole day is about. */
.sh__ring{fill:none;stroke:rgb(var(--chalk-rgb) / .1)}
.sh__axis{stroke:rgb(var(--chalk-rgb) / .14)}
.sh__area{fill:rgb(var(--accent-rgb) / .13);stroke:var(--accent);stroke-width:1.75;
  stroke-linejoin:round}
.sh__dot{fill:var(--accent)}
/* Refitted around the bigger plot: the viewBox now maps roughly 1:1 to CSS
   pixels in this tile, so these sizes are what actually lands on screen —
   smaller numbers here than before, but larger type than the old 13/16 once
   the old 0.78 downscale is taken out. */
.sh__lab{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  fill:rgb(var(--chalk-rgb) / .62)}
.sh__val{font-family:var(--mono);font-size:14px;font-weight:800;letter-spacing:.01em;
  fill:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .hero__art .card,.sh{transition:none}
  .hero__art .card:hover,.sh:hover{transform:none}
}


/* Back sits with the other header controls but reads as navigation, not an
   action: quieter than Sign out, which is the one destructive thing up there. */

/* ---- radar point readout ------------------------------------------------- */
.radarwrap{position:relative}
.radar__hit{fill:transparent;cursor:pointer}
.radar__hit:hover ~ .radar__dot,.radar__dot{transition:r .14s}
.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(--accent-rgb) / .38);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(--accent);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:var(--chalk)}

/* ---- owner: registration / results segmented controls --------------------
   Both states sit on screen with the live one filled, so there's nothing to
   read to work out what a click does. Replaces a pair of green/red slabs whose
   colour showed the state while the label described the action — you had to
   parse it to be sure which was which. */
.seg{padding:1.25rem 1.4rem 1.15rem;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)}
.seg--live{border-color:rgb(var(--accent-rgb) / .4)}
.seg__k{display:block;font-family:var(--mono);font-size:.62rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.seg__row{display:inline-flex;margin-top:.85rem;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:rgb(var(--chalk-rgb) / .04)}
.seg__row button{font-family:var(--mono);font-size:.74rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);background:none;border:0;cursor:pointer;
  padding:.7rem 1.15rem;transition:background .16s,color .16s}
.seg__row button + button{border-left:1px solid var(--line)}
.seg__row button:hover:not(.is-on){color:var(--chalk);background:rgb(var(--chalk-rgb) / .06)}
.seg__row button.is-on{background:var(--accent);color:var(--on-accent);cursor:default}
.seg__row button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.seg__note{margin:.85rem 0 0;font-size:.87rem;line-height:1.5;color:var(--body-text)}
.seg.is-busy{opacity:.55;pointer-events:none}

/* roster header: year picker sits next to the search box */
.rosterbar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.rosterbar .yearsel{margin-bottom:0}

/* the showcase you're currently managing, in the list of all of them */
.tbl tr.is-current td{background:rgb(var(--accent-rgb) / .06)}

/* ---- signed-in nav -------------------------------------------------------
   Replaces the Sign in button once someone's signed in. Same footprint, so the
   header doesn't shift when it swaps. */
.whoami{position:relative}
.whoami__btn{display:inline-flex;align-items:center;gap:.5rem;background:none;
  border:1px solid rgb(var(--accent-rgb) / .55);color:var(--accent);
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.5rem .8rem;margin:-.5rem 0;cursor:pointer;
  line-height:1;max-width:15rem;transition:background .16s,color .16s,border-color .16s}
.whoami__btn:hover,.whoami__btn[aria-expanded="true"]{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}
.whoami__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.whoami__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoami__caret{width:0;height:0;flex:none;border:4px solid transparent;
  border-top-color:currentColor;margin-top:2px}

.whoami__menu{position:absolute;right:0;top:calc(100% + .55rem);z-index:70;
  min-width:11rem;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 16px 40px rgb(0 0 0 / .5);display:flex;flex-direction:column}
.whoami__menu a,.whoami__menu button{display:block;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--chalk);padding:.8rem 1rem;transition:background .14s,color .14s}
.whoami__menu a:hover,.whoami__menu button:hover,
.whoami__menu a:focus-visible,.whoami__menu button:focus-visible{
  background:rgb(var(--accent-rgb) / .14);color:var(--accent);outline:none}
.whoami__menu button[data-signout]{border-top:1px solid var(--line)}

@media(max-width:940px){
  /* the nav is a stacked panel down here, so the menu sits in the flow */
  .whoami{width:100%}
  .whoami__btn{width:100%;justify-content:space-between;margin:.9rem 0 0;padding:.9rem}
  .whoami__menu{position:static;margin-top:.5rem;box-shadow:none}
}

/* ---- hero: the card recording results ------------------------------------
   One authored moment. Numbers settle like a timer coming to rest, each
   placing stamps in behind its own number, then the trace plots outward from
   the centre — which is how a result actually arrives on the day. */
.pct[data-stamp]{opacity:0;transform:scale(1.5);transform-origin:center;
  transition:opacity .18s ease-out,transform .28s cubic-bezier(.16,1,.3,1)}
.pct[data-stamp][data-in]{opacity:1;transform:none}

/* the plot draws from the middle out, spoke tips lighting up after it */
.sh__area{transform-box:view-box;transform-origin:190px 250px;
  transform:scale(.04);opacity:0;
  transition:transform .72s cubic-bezier(.16,1,.3,1) .30s,opacity .3s ease-out .30s}
.sh[data-in] .sh__area{transform:none;opacity:1}
.sh__dot{transform-box:view-box;transform-origin:190px 250px;
  opacity:0;transition:opacity .22s ease-out calc(.72s + var(--i) * .07s)}
.sh[data-in] .sh__dot{opacity:1}
.sh__lab,.sh__val{opacity:0;transition:opacity .3s ease-out calc(.80s + var(--i) * .07s)}
.sh[data-in] .sh__lab,.sh[data-in] .sh__val{opacity:1}

@media(prefers-reduced-motion:reduce){
  .pct[data-stamp],.sh__area,.sh__dot,.sh__lab,.sh__val{
    opacity:1;transform:none;transition:none}
}

/* ---- hero chart: point readout ------------------------------------------
   Same behaviour as an athlete's own chart, so the demo isn't a lesser thing
   than the real one. */
.sh__plot{position:relative;flex:1;min-height:0;display:flex}
.sh__hit{fill:transparent;cursor:pointer}
.sh__hit:focus-visible{outline:none;fill:rgb(var(--accent-rgb) / .18);
  stroke:var(--accent);stroke-width:1.5}
.shtip{position:absolute;z-index:6;pointer-events:none;min-width:8.5rem;
  padding:.55rem .7rem;background:var(--panel);
  border:1px solid rgb(var(--accent-rgb) / .38);box-shadow:0 12px 30px rgb(0 0 0 / .5)}
.shtip b{display:block;font-family:var(--mono);font-size:1.05rem;font-weight:800;
  color:var(--accent);line-height:1;margin:.22rem 0 .28rem}
.shtip i{display:block;font-style:normal;font-family:var(--mono);font-size:.55rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.shtip u{display:block;text-decoration:none;font-family:var(--mono);font-size:.55rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk)}

/* Which showcase the two switches below are acting on. Plain text, not a
   control — the picker lives in Athletes and in Setup. */
.managing{margin:0 0 .9rem;color:var(--steel)}

/* ---- registration not open yet --------------------------------------------
   Stands in for the register button until there's a payment link to send
   people to. This was an email capture for a waiting list; that was dropped,
   so it states the position instead of asking for anything. Shaped like the
   outlined button it will be replaced by, so the block doesn't jump when the
   real one appears. */
.regshut{display:inline-block;margin:0;padding:.95rem 1.2rem;
  border:1px solid var(--line);background:rgb(var(--chalk-rgb) / .04);
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft)}

/* The footer is set in tracked-out capitals; an email address is neither, and
   at this length it would run off a phone screen. */
.ftr__mail{color:var(--accent);text-decoration:none;border-bottom:1px solid rgb(var(--accent-rgb) / .4);
  text-transform:none;letter-spacing:.04em;overflow-wrap:anywhere}
.ftr__mail:hover{color:var(--chalk);border-bottom-color:var(--chalk)}

/* The athlete's registration code — their way back in if a name gets typed
   differently, and the key Kris's spreadsheet matched on. */
.yourcode{margin:1.1rem 0 0;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);line-height:1.7}
.yourcode b{color:var(--accent);font-weight:800;letter-spacing:.14em;font-size:.8rem}

/* ===========================================================================
   Registration form
   A long form, filled in on a phone in a car park. Every group is a fieldset
   so sections get announced, and every tappable thing clears 44px.
   ======================================================================== */
.reg__set{
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.5rem 1.4rem 1.2rem;
  margin:0 0 1.6rem;
  min-width:0;
}
.reg__leg{
  font-family:'Azeret Mono',ui-monospace,monospace;
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  padding:0 .6rem; margin-left:-.2rem;
}
.field__hint{
  margin:.5rem 0 0; font-size:.82rem; line-height:1.45;
  color:var(--body-text);
}
.field__opt{ font-weight:400; color:var(--faint); }
.field__lbl{
  display:block; margin-bottom:.55rem;
  font-size:.86rem; font-weight:600; color:var(--soft);
}

/* Secondary positions ---------------------------------------------------- */
/* What the whole trip looks like, before anyone is sent off to Stripe. */
.reg__how{
  margin:1.8rem 0 0; padding:0; list-style:none; counter-reset:how;
  max-width:46rem; display:grid; gap:.75rem;
}
.reg__how li{
  counter-increment:how; position:relative; padding-left:2.2rem;
  font-size:.95rem; line-height:1.55; color:var(--body-text);
}
.reg__how li::before{
  content:counter(how); position:absolute; left:0; top:.05rem;
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:1px solid rgb(var(--accent-rgb) / .45); color:var(--accent);
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  display:grid; place-items:center;
}
.reg__how strong{ color:var(--chalk); }

.reg__chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
/* four extra positions picked: the rest can't be, and look it */
.reg__chip:has(input:disabled){ opacity:.38; cursor:not-allowed; }
.reg__chip{
  position:relative; display:inline-flex; align-items:center;
  min-height:44px; padding:0 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:'Azeret Mono',ui-monospace,monospace;
  font-size:.8rem; font-weight:700; letter-spacing:.06em;
  color:var(--soft);
  cursor:pointer; user-select:none;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.reg__chip input{
  position:absolute; inset:0; opacity:0;
  width:100%; height:100%; margin:0; cursor:pointer;
}
.reg__chip:hover{ border-color:rgb(var(--accent-rgb) / .6); }
.reg__chip:has(input:checked){
  background:var(--accent); border-color:var(--accent);
  color:var(--on-accent);
}
/* Ring sits OUTSIDE the chip — an inset ring on the filled state would be
   white on white and effectively invisible. */
.reg__chip:has(input:focus-visible){
  outline:3px solid var(--chalk); outline-offset:3px;
}

/* Height in feet and inches --------------------------------------------- */
.reg__ht{ display:flex; align-items:center; gap:.5rem; }
.reg__ht input{ width:5.5rem; }
.reg__ht span{
  font-family:'Azeret Mono',ui-monospace,monospace;
  font-size:.8rem; color:var(--faint);
}

/* Head shot preview ------------------------------------------------------ */
.reg__prev{ display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.reg__prev img{
  width:84px; height:84px; object-fit:cover;
  border-radius:12px; border:1px solid var(--line);
  background:var(--raise);
}

/* Step 1 ----------------------------------------------------------------- */
.reg__paybox{
  margin-top:2rem; padding:1.6rem 1.5rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--wash);
}
.reg__paynote{
  margin:1rem 0 0; font-size:.86rem; line-height:1.5;
  color:var(--body-text);
}
.reg__gate{
  margin-top:2rem; display:flex; flex-wrap:wrap;
  align-items:center; gap:1.2rem;
}
.reg__check{
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:44px; cursor:pointer; font-weight:600; color:var(--soft);
}
.reg__check input{
  width:22px; height:22px; accent-color:var(--accent);
}

/* The code --------------------------------------------------------------- */
.reg__code{
  margin-top:2rem; padding:1.8rem 1.6rem;
  border:2px solid var(--accent);
  border-radius:16px; text-align:center;
  background:var(--wash-2);
}
.reg__code-k{
  display:block;
  font-family:'Azeret Mono',ui-monospace,monospace;
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--body-text);
}
.reg__code strong{
  display:block; margin-top:.7rem;
  font-family:'Azeret Mono',ui-monospace,monospace;
  font-size:clamp(2.4rem,10vw,3.8rem); font-weight:800;
  letter-spacing:.16em; line-height:1;
  color:var(--accent);
}
.reg__doneRow{
  margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem;
}

/* Step 3: the waiver ----------------------------------------------------- */
/* Plain page text, not a scrolling box inside the page: on a phone a box
   within a scroll is easy to get stuck in, and the tick box sits after the
   text, so reaching it means passing the whole thing anyway. */
.reg__waiver{
  margin-top:2rem; max-width:46rem; padding:1.5rem 1.4rem;
  border:1px solid var(--line); border-radius:14px; background:var(--raise);
  font-size:.92rem; line-height:1.6; color:var(--body-text);
}
.reg__waiver h2{
  margin:0 0 1rem; font-family:'Azeret Mono',ui-monospace,monospace;
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.reg__waiver p{ margin:0 0 .9rem; }
.reg__waiver p:last-child{ margin-bottom:0; }
.reg__waiver b{ color:var(--chalk); }
.reg__waiver h3{
  margin:1.6rem 0 .6rem; font-family:'Azeret Mono',ui-monospace,monospace;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--chalk);
}
.reg__waiver-meta{
  font-family:'Azeret Mono',ui-monospace,monospace; font-size:.76rem;
  letter-spacing:.04em; color:var(--steel);
}
/* whose waiver this is, right above the box that signs it */
.reg__for{ margin:1.4rem 0 0; max-width:46rem; font-size:.92rem; color:var(--body-text); }
.reg__for strong{ color:var(--chalk); }
.reg__for + .reg__agree{ margin-top:.7rem; }
/* The whole card is the tap target, not just a 16px box. */
.reg__agree{
  display:flex; gap:.85rem; align-items:flex-start;
  margin-top:1.4rem; max-width:46rem; padding:1rem 1.1rem;
  border:1px solid var(--line); border-radius:14px; cursor:pointer;
  font-size:.95rem; line-height:1.5; color:var(--chalk);
  transition:border-color .14s ease, background .14s ease;
}
.reg__agree input{
  flex:none; width:22px; height:22px; min-height:0; margin:.1rem 0 0; padding:0;
  accent-color:var(--accent); cursor:pointer;
}
.reg__agree:has(input:checked){ border-color:var(--accent); background:var(--wash); }
/* the same card, sitting inside a fieldset between two fields */
.reg__agree--sm{ margin:.4rem 0 1.4rem; padding:.85rem 1rem; font-size:.92rem; }
/* The waiver is longer than a phone screen, so the button rides along the
   bottom instead of sitting under a screenful of text. */
.reg__formbar{
  position:sticky; bottom:0; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem;
  margin-top:1.4rem; padding:1rem 0 calc(1rem + env(safe-area-inset-bottom));
  background:var(--ink); border-top:1px solid var(--line);
}
.reg__formhint{ font-size:.86rem; color:var(--body-text); }

@media (max-width:560px){
  .reg__set{ padding:1.2rem 1rem 1rem; }
}

/* Textareas inherit the input treatment above; these are the bits that only
   make sense for a multi-line box. */
.field textarea{ resize:vertical; min-height:6.5rem; line-height:1.55; }

/* The file picker is the one control the browser draws itself, so the button
   inside it gets styled separately or it arrives as raw grey chrome. */
.field input[type=file]{ padding:.6rem; font-size:.9rem; cursor:pointer; }
.field input[type=file]::file-selector-button{
  margin-right:.9rem; padding:.55rem 1rem;
  border:1px solid var(--line); border-radius:8px;
  background:var(--raise); color:var(--chalk);
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; cursor:pointer;
}
.field input[type=file]:hover::file-selector-button{ border-color:var(--accent); }

/* Stands in for a <label> on the checkbox group, which has no single control
   to point at — so it matches what a real label looks like. */
.field__lbl{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel);
}

/* ===========================================================================
   Scout sheet
   A hundred athletes have to fit on one sheet, front and back. That rules out
   anything card-shaped: it's a dense table, and the print rules below turn it
   landscape at 6pt so ~50 rows land on each side.
   ======================================================================== */
.scout__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  margin:1.8rem 0 1.4rem;
}
.scout__count{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel);
}
.scout__head{ display:none; }

.stbl{ font-size:.82rem; }
.stbl th{ padding:.6rem .55rem; }
.stbl td{ padding:.5rem .55rem; vertical-align:middle; white-space:nowrap; }
.stbl__name{ font-weight:600; color:var(--chalk); }
.stbl__code{ color:var(--accent); letter-spacing:.06em; }
.stbl__dim{ color:var(--steel); }
.stbl__wrap{ white-space:normal; overflow-wrap:anywhere; }

/* --------------------------------------------------------------------------
   Printing. This is the point of the whole view.
   ----------------------------------------------------------------------- */
@media print{
  /* Print the sheet and nothing else. The dashboard's toggles, counters and
     headings all live outside the view, and left alone they ate the top third
     of page one. So: hide every sibling, then walk back down to the table. */
  .hdr,.ftr,#demoNote,#setup,#denied{ display:none !important; }
  #app > *:not(.view),
  .view:not(#view-scouts){ display:none !important; }
  #view-scouts > .backlink,
  #view-scouts > .dash__top,
  #view-scouts > .lede,
  #view-scouts > .scout__bar{ display:none !important; }

  html,body{ background:#fff !important; color:#000 !important; }
  .page,.wrap,.panel,#app,#view-scouts,.scout__wrap{
    padding:0 !important; margin:0 !important;
    max-width:none !important; border:0 !important; background:#fff !important;
    box-shadow:none !important; overflow:visible !important;
  }

  .scout__head{
    display:flex; justify-content:space-between; align-items:baseline;
    gap:1rem; padding-bottom:3pt; margin-bottom:5pt;
    border-bottom:1.5pt solid #000; font-size:8pt;
  }
  .scout__head strong{ font-size:10pt; }

  /* Landscape, because eighteen columns will not fit across a portrait page.
     6pt is small, but this is a reference sheet you scan for a number — not
     something anyone reads end to end. */
  @page{ size:landscape; margin:8mm; }

  .stbl{
    font-size:5.5pt; table-layout:fixed; width:100%;
    border-collapse:collapse;
  }
  /* Without this the percentages below are CONTENT widths and the 2pt of
     padding on eighteen columns is added on top — enough to push the table
     past the page edge and clip the last column's text. */
  .stbl th,.stbl td{ box-sizing:border-box; }
  /* Repeats the header on the back of the sheet automatically. */
  .stbl thead{ display:table-header-group; }
  .stbl tr{ break-inside:avoid; page-break-inside:avoid; }
  .stbl th{
    font-size:5pt; letter-spacing:.04em; color:#000 !important;
    font-weight:700; padding:2pt 2pt; white-space:normal;
    line-height:1.1; border-bottom:1pt solid #000;
  }
  /* .num has to be named explicitly: `.tbl td.num` outranks a bare `.stbl td`,
     and its nowrap was pushing the last columns clean off the right edge. */
  .stbl td,.stbl td.num{
    padding:1pt 2pt; color:#000 !important;
    border-bottom:.4pt solid #bbb;
    white-space:normal; overflow-wrap:anywhere;
    /* The body's 1.6 line-height cost ~4pt a row — about ten athletes a page —
       for no benefit at this size. */
    line-height:1.12;
  }
  .stbl tr:hover td{ background:none !important; }
  .stbl__name{ font-weight:700; }
  .stbl__code,.stbl__dim{ color:#333 !important; }

  /* Fixed widths, tuned to what actually appears in these columns, so no row
     wraps to a second line and blows the rows-per-page count. */
  .stbl th:nth-child(1),.stbl td:nth-child(1){ width:1.6%;  }  /* #        */
  .stbl th:nth-child(2),.stbl td:nth-child(2){ width:3%;    }  /* code     */
  .stbl th:nth-child(3),.stbl td:nth-child(3){ width:8.5%;    }  /* athlete  */
  .stbl th:nth-child(4),.stbl td:nth-child(4){ width:2.6%;  }  /* pos      */
  .stbl th:nth-child(5),.stbl td:nth-child(5){ width:3.2%;  }  /* also     */
  .stbl th:nth-child(6),.stbl td:nth-child(6){ width:2.4%;  }  /* class    */
  .stbl th:nth-child(7),.stbl td:nth-child(7){ width:1.6%;  }  /* grade    */
  .stbl th:nth-child(8),.stbl td:nth-child(8){ width:2.8%;  }  /* group    */
  .stbl th:nth-child(9),.stbl td:nth-child(9){ width:3.8%;  }  /* height   */
  .stbl th:nth-child(10),.stbl td:nth-child(10){ width:2%;    } /* weight  */
  .stbl th:nth-child(11),.stbl td:nth-child(11){ width:10%;   } /* school  */
  .stbl th:nth-child(12),.stbl td:nth-child(12){ width:8.7%;  } /* osfl    */
  .stbl th:nth-child(13),.stbl td:nth-child(13){ width:2%;    } /* average */
  .stbl th:nth-child(14),.stbl td:nth-child(14){ width:7%;    } /* study   */
  .stbl th:nth-child(15),.stbl td:nth-child(15){ width:5%;    } /* from    */
  .stbl th:nth-child(16),.stbl td:nth-child(16){ width:12.4%;   } /* email   */
  .stbl th:nth-child(17),.stbl td:nth-child(17){ width:7.2%;    } /* phone   */
  .stbl th:nth-child(18),.stbl td:nth-child(18){ width:8.2%;  } /* instagram */
}


/* A disabled .btn looked identical to an enabled one, so "Continue to my
   details" read as broken rather than as waiting on the checkbox above it. */
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed;
}
.btn:disabled:hover .btn__a,
.btn[aria-disabled="true"]:hover .btn__a{ transform:none; }
.btn--go:disabled:hover{ background:var(--accent); color:var(--on-accent); }

/* A price and the link that charges it belong together — separating them is how
   you end up with seniors paying the junior rate. */
.paytier{
  border:1px solid var(--line); border-radius:12px;
  padding:1.1rem 1.1rem .1rem; margin-bottom:1rem;
}
.paytier__k{
  margin:0 0 .8rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent);
}

/* Registration step 1 */
.reg__year{ max-width:22rem; margin-top:2rem; }
.reg__price{
  margin:0 0 1rem; display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
}
.reg__price strong{
  font-family:var(--mono); font-size:2rem; font-weight:800;
  line-height:1; color:var(--accent);
}
.reg__price span{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}
.reg__chosen{
  margin:0; display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
}
.reg__chosen strong{ font-size:1rem; color:var(--chalk); }
.reg__after{
  margin:1.4rem 0 0; max-width:44ch;
  font-size:.9rem; line-height:1.55; color:var(--body-text);
}

/* Athlete code entry. Codes are read off a phone screen and typed by someone
   else, so the field is oversized and monospaced with the characters spaced out. */
.codein{
  font-family:var(--mono) !important;
  font-size:1.9rem !important;
  font-weight:800;
  letter-spacing:.35em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem .6rem !important;
}
.codein::placeholder{ color:var(--faint); font-weight:400; letter-spacing:.35em; }
.codenote{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line-soft);
  max-width:48ch; font-size:.86rem; line-height:1.6; color:var(--body-text);
}