/* Redzone v1 systems, on top of D2's tokens and components (app.css).
   Player, tag form, play strip, film list, rail groups, transitions. One accent: Western purple. */

/* ---------- headings: plain heads, one short line under them ---------- */
.h2{font:600 clamp(26px,2.5vw,34px)/1.12 var(--serif);letter-spacing:-.018em;margin-bottom:10px}
.h2-sub{font:420 .5em/1 var(--sans);letter-spacing:0;color:var(--slate);margin-left:10px;vertical-align:.32em;white-space:nowrap}
.lede{font:400 clamp(18px,1.45vw,20px)/1.45 var(--serif);max-width:52ch;margin-bottom:28px;color:var(--ink)}
.lg-head .h2{margin:0}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.nf-p{margin-top:18px}
code{font:500 .92em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel);padding:2px 6px;border-radius:4px}
.patch.unsure{background:transparent;box-shadow:inset 0 0 0 1.5px var(--rule)}
.patch.unsure b{font:600 calc(var(--s) * .46)/1 var(--serif);color:var(--slate)}

/* ---------- top bar: our own page ---------- */
.uslink{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;padding:4px 10px 4px 4px;border-radius:999px;transition:background-color .14s}
.uslink:hover{background:var(--panel)}
.status .uslink span{display:inline}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;font-size:14.5px;font-weight:560;z-index:20;
  transition:opacity .2s,transform .28s var(--ease);box-shadow:0 10px 28px -12px rgba(23,21,30,.5)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- school: their film ---------- */
.flist{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-width:980px}
.fgame{display:grid;grid-template-columns:40px minmax(0,1.6fr) 84px 84px minmax(150px,1.2fr);gap:18px;align-items:center;padding:12px 10px;margin-inline:-10px;
  border-radius:var(--r);text-decoration:none;transition:background-color .14s}
.fgame:hover{background:var(--panel)}
.fg-t b{display:block;font:600 19px/1.2 var(--serif)}
.fg-t span{font-size:14px;color:var(--slate)}
.fg-n{display:grid;text-align:right}
.fg-n b{font:600 22px/1 var(--serif);font-variant-numeric:lining-nums}
.fg-n span{font-size:12.5px;color:var(--slate);margin-top:4px}
.fg-p{display:grid;gap:6px;font-size:13px;color:var(--slate)}
.meter{display:block;height:6px;border-radius:3px;background:var(--panel);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule)}
.meter i{display:block;height:100%;width:100%;background:var(--accent-text);transform-origin:left;transform:scaleX(var(--done,0))}
.fgame:hover .meter{background:var(--paper)}

/* ---------- school: nationals ---------- */
.games-list.events{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px 56px}
.games-list.events li{align-items:start}
.ev-o{display:grid;gap:2px;min-width:0}
.ev-o small{color:var(--slate);font-size:13px;padding-left:33px}
.ev-src{font-size:12.5px;margin-top:8px}
.ev-src a{color:var(--slate);text-underline-offset:3px}

/* ---------- school: not enough tags yet ---------- */
.invite{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.invite .muted{max-width:52ch;margin:-12px 0 26px}
.invite-meter{--z:200px;width:var(--z);height:var(--z);justify-self:center;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:conic-gradient(var(--accent-text) calc(var(--done) * 360deg),var(--panel) 0);position:relative}
.invite-meter::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.invite-meter b,.invite-meter span{position:relative}
.invite-meter b{font:600 64px/1 var(--serif);font-variant-numeric:lining-nums}
.invite-meter span{font-size:14px;color:var(--slate);margin-top:4px}

/* ---------- game ---------- */
.fnotes{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:6px;font-size:14.5px;color:var(--slate);max-width:56ch}
.fnotes li{padding-left:16px;position:relative}
.fnotes li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--bag)}
.board-score .ts:empty{display:none}
.tagmeter{display:grid;gap:8px;align-self:end;max-width:320px}
.tagmeter b{font:600 clamp(44px,4.6vw,64px)/1 var(--serif);font-variant-numeric:lining-nums}
.tagmeter > span:not(.meter){color:var(--slate);font-size:15px}
.tagmeter .meter{height:8px;margin-top:6px}

/* the game on one line: every snap at its time in the film */
.strip{margin-top:6px}
.strip-key{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;margin-bottom:14px}
.strip-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.strip-key i.unk{background:transparent;box-shadow:inset 0 0 0 1.5px var(--slate)}
.strip-key b{font-weight:680;font-variant-numeric:lining-nums;margin-left:4px}
.strip-track{position:relative;height:84px;border-radius:var(--r);background:var(--turf);overflow:hidden}
.strip-track::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--turf-line)}
.tk{position:absolute;top:14px;bottom:14px;min-width:3px;border-radius:2px;background:var(--c);transform-origin:bottom;outline-offset:2px}
.tk.unk{background:transparent;box-shadow:inset 0 0 0 1.5px var(--slate);opacity:.75}
.tk.lo{top:30px;bottom:30px}
.tk.np{opacity:.25}
.tk.tg::after{content:"";position:absolute;left:50%;top:-9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent-text)}
.tk:hover,.tk:focus-visible{top:6px;bottom:6px;z-index:1;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.strip-axis{position:relative;height:22px;margin-top:6px;font-size:12.5px;color:var(--slate)}
.strip-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.strip-axis span:first-child{transform:none}

.plays td.ball{white-space:nowrap}
.plays td.ball .patch{margin-right:8px;vertical-align:-6px}
.plays td.what-c small{display:block;color:var(--bag);font-size:12.5px;margin-top:2px}
.plays td.tm,.plays td.by{color:var(--slate);white-space:nowrap}
.plays tr.untagged td.what-c{color:var(--slate)}
.plays tr.np td{opacity:.5}
.plays tbody{content-visibility:visible}

/* ---------- film room ---------- */
.room-head .reel-t{display:inline-flex;align-items:center;gap:10px;font-size:15px}
.room-head .reel-t b{font:600 19px/1 var(--serif)}
.room-head .pl{color:var(--slate)}
.stage{grid-template-columns:minmax(0,1.62fr) minmax(340px,1fr)}
.panel-col{position:sticky;top:16px;align-self:start}
.panel{display:grid;gap:14px}
.panel .ddl{display:flex;align-items:center;gap:14px}
.panel .ddl .patch{--s:44px}
.panel .dd{font:650 clamp(26px,2.4vw,34px)/1.06 var(--serif);letter-spacing:-.02em}
.panel .sp{color:var(--slate);font-size:14.5px;margin-top:4px}
.panel .res{font:650 clamp(22px,1.9vw,27px)/1.1 var(--serif);letter-spacing:-.012em;margin-top:4px}
.panel .res.td{color:var(--accent-text)}
.panel .res.muted{color:var(--slate);font-weight:500}
.panel dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0}
.panel dt{font-size:13px;color:var(--slate)}
.panel dd{margin:2px 0 0;font-weight:560;font-size:15px}
.panel dd span{display:block;font-weight:420;color:var(--slate);font-size:13.5px}
.panel .diagram svg{max-height:380px}
.untag-box{display:grid;gap:8px;justify-items:start;padding:22px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule)}
.untag-box .btn{margin-top:10px}
.untag-box kbd{margin-left:6px}
.btn kbd{background:rgba(255,255,255,.14);box-shadow:none;color:inherit}
.byline{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;color:var(--slate);padding-top:12px;border-top:1px solid var(--rule)}
.byline b{color:var(--ink);font-weight:620}

/* player */
.clip{aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
.vp{display:grid;gap:0;border-radius:var(--r);overflow:hidden;background:#0E0D12;color:#F1EFF6}
.vp-stage{position:relative;aspect-ratio:16/9;cursor:pointer;background:#0E0D12}
.vp:fullscreen .vp-stage,.vp-stage:fullscreen{aspect-ratio:auto;height:100%}
.vp-v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .16s}
.vp-v.on{opacity:1}
.vp-big{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(250,248,254,.92);color:#17151E;display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);transition:transform .16s var(--ease)}
.vp-big:hover{transform:scale(1.06)}
.vp-big svg{width:32px;height:32px;margin-left:4px;fill:currentColor}
.vp-msg{position:absolute;left:14px;top:12px;font-size:13px;color:rgba(241,239,246,.8)}
.vp-msg:empty{display:none}
.vp-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#17151E}
.vp-btn{border:0;background:transparent;color:inherit;min-width:38px;height:36px;padding:0 9px;border-radius:8px;cursor:pointer;font:600 13.5px/1 var(--sans);
  display:inline-grid;place-items:center;transition:background-color .14s,color .14s}
.vp-btn:hover{background:rgba(241,239,246,.1)}
.vp-btn svg{width:20px;height:20px;fill:currentColor}
.vp-play .i-pause{display:none}
.vp[data-state="playing"] .vp-play .i-play{display:none}
.vp[data-state="playing"] .vp-play .i-pause{display:inline}
.vp-tog[aria-pressed="true"]{background:#C4ABF5;color:#17151E}
.vp-time{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(241,239,246,.75);white-space:nowrap;padding:0 6px}
.vp-scrub{position:relative;flex:1;height:36px;cursor:pointer;touch-action:none;min-width:60px}
.vp-scrub::before,.vp-buf,.vp-fill{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.vp-scrub::before{background:rgba(241,239,246,.16)}
.vp-buf{background:rgba(241,239,246,.28);transform-origin:left;transform:scaleX(0)}
.vp-fill{background:#C4ABF5;transform-origin:left;transform:scaleX(0)}
.vp-knob{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#FAF8FE;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .12s}
.vp-scrub:hover .vp-knob,.vp-scrub:focus-visible .vp-knob{transform:scale(1.25)}
.vp-scrub:focus-visible{outline-offset:-2px}

/* rail */
.rail-h{align-items:center}
.rail-key i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--slate)}
.rail-key i.tg{background:var(--accent-text);box-shadow:none}
.rail-prog{font-variant-numeric:lining-nums}
.rail-track{gap:14px;align-items:flex-end}
.rg{display:flex;flex-direction:column;gap:4px;border-bottom:3px solid var(--team);padding-bottom:3px}
.rg.multi{border-bottom-color:var(--rule)}
.rg-l{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--slate);white-space:nowrap}
.rg-l .patch{--s:16px}
.rg-l span:last-child{margin-left:4px}
.rg-d{display:flex}
.rp::before{background:transparent;box-shadow:inset 0 0 0 1.75px var(--c)}
.rp.tg::before{background:var(--c);box-shadow:none}
.rp.np::before{opacity:.25}
.rp.on::before{width:11px;height:11px;box-shadow:inset 0 0 0 1.75px var(--c),0 0 0 2.5px var(--paper),0 0 0 4.5px var(--ink)}
.rp.tg.on::before{box-shadow:0 0 0 2.5px var(--paper),0 0 0 4.5px var(--ink)}

/* ---------- tag form ---------- */
.tf{display:grid;gap:16px}
.tf-who{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--slate)}
.tf-who b{color:var(--ink)}
.tf-name{display:grid;gap:6px;width:100%;font-size:13px;color:var(--slate)}
.tf input,.tf textarea{font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper);border:0;border-radius:8px;padding:10px 12px;
  box-shadow:inset 0 0 0 1.5px var(--rule);width:100%;transition:box-shadow .14s}
.tf input:focus,.tf textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent-text)}
.tf textarea{resize:vertical;min-height:58px}
.tf-f{display:grid;gap:7px}
.tf-l{font-size:13px;font-weight:600;color:var(--slate)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;background:var(--panel);color:var(--ink);font:560 14.5px/1 var(--sans);padding:0 13px;min-height:40px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:background-color .12s,color .12s,box-shadow .12s,transform .12s var(--ease)}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--accent-text)}
.chip:active{transform:scale(.97)}
.chip[aria-checked="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.chips.teams .chip{padding-left:6px;min-height:44px;font-size:15px}
.chips.teams .chip[aria-checked="true"] .patch{box-shadow:0 0 0 2px var(--on-accent)}
.chips.kind .chip[data-v="other"][aria-checked="true"]{background:var(--ink);color:var(--paper)}
/* "ball went to": the receivers across the line, as they line up */
.chips.slots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:12px 10px 10px;border-radius:var(--r);background:var(--turf);position:relative}
.chips.slots::before{content:"";position:absolute;left:10px;right:10px;top:31px;border-top:2px dashed var(--rz-los);opacity:.6}
.chip.slot{justify-content:center;padding:0;min-height:38px;font-weight:680;font-size:13.5px;position:relative;background:var(--paper)}
.chip.slot.c{border-radius:6px}
.chip.slot.q{grid-column:4;margin-top:4px;width:38px;justify-self:center}
.chip.slot[aria-checked="true"]{background:var(--accent);color:var(--on-accent)}
.yds{display:flex;align-items:center;gap:8px;max-width:240px}
.yds input{text-align:center;font-weight:650;font-variant-numeric:lining-nums}
.chip.step{width:44px;justify-content:center;padding:0;font-size:18px}
.tf-ball{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:center;font-size:13px;color:var(--slate)}
.tf-more summary{cursor:pointer;font-weight:620;font-size:14px;color:var(--accent-text);padding:4px 0}
.tf-more[open] summary{margin-bottom:12px}
.tf-more .tf-f + .tf-f{margin-top:14px}
.tf-err{color:#C7362F;font-size:14px;font-weight:560}
.tf-err:empty{display:none}
.tf-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;bottom:0;padding:12px 0 4px;background:linear-gradient(transparent,var(--paper) 30%)}
.tf-act .btn[type="submit"]{min-width:140px}
.panel.tagging{padding:16px;border-radius:calc(var(--r) + 4px);box-shadow:inset 0 0 0 1.5px var(--accent-text);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}

/* ---------- motion: route changes ---------- */
@supports (view-transition-name: none){
  .bar{view-transition-name:bar}
  ::view-transition-old(root){animation:rz-out .18s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:rz-in .34s cubic-bezier(.2,.8,.2,1) .04s both}
  ::view-transition-group(hero-mark){animation-duration:.52s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  ::view-transition-old(hero-mark),::view-transition-new(hero-mark){animation-duration:.52s;mix-blend-mode:normal}
}
@keyframes rz-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes rz-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- responsive ---------- */
@media (max-width: 1023px){
  .fgame{grid-template-columns:40px minmax(0,1fr) 70px 70px;row-gap:8px}
  .fg-p{grid-column:2 / -1}
}
@media (max-width: 900px){
  .stage{grid-template-columns:minmax(0,1fr)}
  .panel-col{position:static}
  .panel.tagging{max-height:none;margin:0}
  .clip{order:1}.stepper{order:2}.panel{order:3}
}
@media (max-width: 767px){
  /* while tagging on a phone, the clip stays pinned above the form */
  .room:has(.panel.tagging) .clip{position:sticky;top:0;z-index:3;margin-inline:calc(clamp(16px,4vw,48px) * -1);padding:0 0 6px;background:var(--paper)}
  .room:has(.panel.tagging) .clip .vp{border-radius:0}
}
@media (max-width: 767px){
  .invite{grid-template-columns:minmax(0,1fr)}
  .invite-meter{--z:150px;justify-self:start}
  .invite-meter b{font-size:48px}
  .fgame{grid-template-columns:36px minmax(0,1fr) 56px;gap:10px 12px}
  .fgame .fg-n:nth-of-type(2){display:none}
  .fg-n b{font-size:19px}
  .strip-track{height:64px}
  .tk{top:10px;bottom:10px}
  .vp-time{display:none}
  .vp-auto{font-size:12.5px;padding:0 7px}
  .h2-sub{display:block;margin:6px 0 0}
  .chip{min-height:44px}
  .chips.slots .chip.slot{min-height:42px}
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- Quebec cégeps: the home list and a cégep's league table ---------- */
.cg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px)}
.cg-conf h3{font:600 clamp(21px,1.8vw,25px)/1.2 var(--serif);letter-spacing:-.01em;margin-bottom:6px}
.cg-conf h3 span,.cg-div h4 span{font:420 14px/1 var(--sans);letter-spacing:0;color:var(--slate);margin-left:8px;white-space:nowrap}
.cg-div{margin-top:22px}
.cg-div h4{font:650 14px/1.2 var(--sans);letter-spacing:.01em;padding-bottom:8px;border-bottom:1px solid var(--rule);margin:0 0 6px}
.cg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:0 18px}
.cg-list a{display:flex;align-items:center;gap:10px;padding-block:6px;min-height:46px;text-decoration:none;font:560 15.5px/1.2 var(--serif)}
.cg-list a:hover span,.cg-list a:focus-visible span{text-decoration:underline;text-underline-offset:3px}
.cg-gone{margin-top:40px}
.cg-table{max-width:820px}
.cg-table + .cg-table{margin-top:38px}
.cg-table h3{font-size:15px;font-weight:680;margin-bottom:8px}
.cg-seg{margin-bottom:26px}
.stand tr.me td{background:color-mix(in srgb,var(--team) 14%,transparent)}
.stand tr.me td:first-child{box-shadow:inset 3px 0 0 var(--team)}
.stand tr.me .sch b{font-weight:700}
@media (max-width: 1023px){
  .cg-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 767px){
  .cg-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
  .cg-list a{font-size:15px;gap:9px}
  .cg-seg{display:flex}
  .cg-seg button{flex:1;padding-inline:6px}
  .stand .sch small{display:none}
}
.rec.solo{grid-template-columns:minmax(0,1fr)}
.rec.solo > div{max-width:760px}
.rec.solo .h2h,.rec.solo .h2h-axis{max-width:calc(var(--n) * 130px)}