/* An event page (docs/design/eventside-v8.html): the masthead with its race
   impact, why it matters, who it matters to and the field. In the site's own
   colour (the event belongs to no region). Needs base.css and front.css. */
.event{--c:var(--sys);--ct:var(--sys-text);--on-c:var(--on-accent)}
.ehero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);margin:0 0 .5rem;
  background:#0b0f14}
/* the event's logo as the masthead's ghost, as a team page's: its own greys, a dark one inverted, never past its own height (`ClubLogos::ghost`) */
.eghost{position:absolute;right:18%;top:50%;transform:translateY(-50%);height:150%;max-width:50%;object-fit:contain;object-position:right center;
  opacity:.055;filter:grayscale(1) contrast(1.15);pointer-events:none;user-select:none}
.eghost--dark{filter:grayscale(1) invert(1) contrast(1.15)}
@media(max-width:800px){.eghost{right:-10%;max-width:80%}}
.ehero .container{position:relative;padding:3.6rem 1.5rem 3rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.4rem;align-items:center}
@media(max-width:800px){.ehero .container{grid-template-columns:1fr;gap:1.6rem}}
.event .kick{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ct)}
.event h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,6.4vw,4rem);line-height:.9;text-transform:uppercase;letter-spacing:-.025em;margin:.6rem 0 0}
.when{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.when b{color:var(--text-2);font-weight:400}
.escore{position:relative;text-align:center;min-width:220px}
.escore__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;justify-content:center;gap:.45rem}
.qm{display:inline-grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;border:1px solid var(--muted-2);color:var(--text-2);
  font-family:var(--disp);font-size:.72rem;letter-spacing:0;text-decoration:none}
.qm:hover{border-color:var(--ct);color:var(--ct)}
/* the impact as a number, large; in the site's colour once it is over the threshold */
.escore__v{font-family:var(--disp);font-weight:700;font-size:clamp(5rem,12vw,8.5rem);line-height:.85;letter-spacing:-.04em;color:var(--text);margin:.35rem 0 .2rem}
.escore.strong .escore__v{color:var(--ct)}
.escore__r{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-top:.8rem}
.event .sh{margin:4.2rem 0 1.4rem}
.event .lead{color:var(--muted);max-width:74ch;margin:0 0 1.8rem;font-size:.96rem}
.mix{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line)}
.mix>div{background:var(--panel);padding:1.4rem 1.5rem;position:relative;overflow:hidden}
.mix>div::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:var(--c);opacity:.75}
.mix--teams::before{background:var(--am)!important}
.mix--time::before{background:var(--up)!important}
.mix__v small{font-size:.5em;color:var(--muted-2);font-weight:500;margin-left:.25rem;text-transform:uppercase;letter-spacing:.04em}
.mix__bar{height:8px;background:rgba(255,255,255,.07);margin:.2rem 0 .7rem}
.mix__bar i{display:block;height:100%;background:var(--c)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.1rem 0 .7rem}
.chip{font-family:var(--disp);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;padding:.18rem .55rem;
  background:color-mix(in srgb,var(--rc) 16%,transparent);border-left:3px solid var(--rc);color:var(--text)}
.tline{position:relative;height:30px;margin:.35rem 0 .55rem}
.tline::before{content:'';position:absolute;left:0;right:0;top:7px;height:6px;background:rgba(255,255,255,.07)}
.tline::after{content:'';position:absolute;right:0;top:2px;width:2px;height:16px;background:var(--text)}
.tline__ev{position:absolute;top:7px;height:6px;background:var(--up);box-shadow:0 0 12px color-mix(in srgb,var(--up) 60%,transparent)}
.tline__a,.tline__b{position:absolute;top:18px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.tline__a{left:0}.tline__b{right:0;color:var(--text-2)}
.eexplain{font-size:.9rem;line-height:1.65;color:var(--text-2);max-width:78ch;margin:1.5rem 0 0;padding-left:1rem;border-left:2px solid var(--c)}
.eexplain b{color:var(--text);font-weight:600}
.mix__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.mix__v{font-family:var(--disp);font-weight:700;font-size:1.8rem;line-height:1.1;margin:.25rem 0 .45rem}
.mix__s{font-size:.85rem;color:var(--text-2);line-height:1.55}
.event .enote{font-size:.92rem;line-height:1.7;color:var(--muted);margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line);max-width:80ch}
.event .enote b{color:var(--text-2);font-weight:600}
/* who it matters to */
.ehd,.erw{display:grid;grid-template-columns:minmax(0,1fr) 15rem minmax(0,1.1fr) 1.4rem;gap:1.3rem;align-items:center}
.ehd{padding:.5rem 0 .7rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.eitem{border-top:1px solid var(--line);box-shadow:inset 3px 0 0 var(--rc,transparent)}
.eitem .erw{padding-left:.9rem}
.sd__elo{margin-left:.5rem;padding-left:.5rem;border-left:1px solid var(--line);color:var(--text-2)}
.eitem:first-of-type{border-top:0}
.erw{width:100%;padding:1.1rem 0;cursor:pointer;background:none;border:0;color:inherit;font:inherit;text-align:left}
.erw:hover{background:rgba(255,255,255,.022)}
.eitem.open .erw{background:color-mix(in srgb,var(--rc,var(--c)) 8%,transparent)}
@media(max-width:800px){.ehd{display:none}.erw{grid-template-columns:minmax(0,1fr) 1.4rem;row-gap:.45rem}.erw .st,.erw .need{grid-column:1/-1}}
.event .nm{font-family:var(--disp);font-weight:700;font-size:1.18rem;text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.45rem}
.tlogo{width:1.1em;height:1.1em;object-fit:contain}
.sd{font-family:var(--mono);font-size:.69rem;color:var(--muted-2);margin-top:.2rem;display:flex;align-items:center;gap:.4rem}
.sd i{width:7px;height:7px;border-radius:50%;flex:none}
.st{display:flex;align-items:center;gap:.7rem}
.st.hold{--tone:var(--gain)}.st.risk{--tone:var(--lose)}.st.cont{--tone:var(--up)}.st.out{--tone:var(--muted-2)}
/* the chance today in the team's region colour, the status beside it in its own tone */
.st__n{font-family:var(--disp);font-weight:700;font-size:1.6rem;line-height:1;color:var(--rt,var(--text));min-width:3.2rem}
.st__n small{font-size:.5em;margin-left:1px}
.st__l{font-family:var(--disp);font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tone);line-height:1.1}
.st__l small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted-2);margin-top:.2rem}
.need{font-family:var(--disp);font-weight:700;font-size:1.12rem;text-transform:uppercase;line-height:1.1;padding-left:.8rem;border-left:3px solid var(--tone)}
.need.close{--tone:var(--gain)}.need.far{--tone:var(--up)}.need.none{--tone:#4b535e}.need.fav{--tone:var(--gain)}.need.gone{--tone:var(--lose)}
.need__l{color:var(--tone)}
.need small{display:block;font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.03em;color:var(--muted-2);text-transform:none;margin-top:.2rem}
.need.none .need__l{color:var(--muted)}
.cv{font-family:var(--mono);color:var(--muted-2);text-align:center;transition:transform .25s,color .2s}
.eitem.open .cv{transform:rotate(90deg);color:var(--ct)}
.ebody{display:none;margin:.2rem 0 1.6rem 1.4rem;padding:.3rem 0 0 1.4rem;border-left:2px solid color-mix(in srgb,var(--rc,var(--c)) 45%,transparent)}
.eitem.open .ebody,.no-js .ebody{display:block}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--line)}
.step{background:var(--panel-2);padding:.95rem 1rem}
.step__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
.step__v{font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1.1;margin-top:.2rem}
.step__d{font-family:var(--mono);font-size:.66rem;margin-top:.15rem;color:var(--muted-2)}
.step.up .step__v,.step.up .step__d{color:var(--gain)}.step.dn .step__v,.step.dn .step__d{color:var(--lose)}
.step__bar{position:relative;height:4px;background:rgba(255,255,255,.07);margin-top:.55rem}
.step__bar i{display:block;height:100%;background:var(--rc,var(--c))}
.step__bar u{position:absolute;top:-3px;width:2px;height:10px;background:var(--text);opacity:.7}
.bexp{font-size:.92rem;line-height:1.6;color:var(--text-2);margin:1.2rem 0 0;max-width:72ch}
.opps{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.opp{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;background:var(--panel-2);border:1px solid var(--line);padding:.3rem .6rem;color:var(--muted-2);text-decoration:none}
.opp b{color:var(--text-2);font-weight:400}
a.opp:hover{color:var(--text)}
/* the field */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);margin-top:.6rem}
@media(max-width:820px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.card{padding:.95rem .9rem 1rem}.card__top{flex-wrap:wrap}}
.card{background:var(--panel);padding:1.15rem 1.2rem 1.2rem;position:relative;min-height:150px;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--rc,#39414c) 9%,var(--panel))}
.card.race{background:color-mix(in srgb,var(--rc,#39414c) 20%,var(--panel))}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;min-height:44px}
.card__logo{width:44px;height:44px;object-fit:contain}
.card__mono{width:44px;height:44px;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.4rem;color:var(--rt,var(--muted));
  background:color-mix(in srgb,var(--rc,#39414c) 18%,transparent)}
.card__race{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-accent);background:var(--up);padding:.15rem .4rem;white-space:nowrap}
.card__e{font-family:var(--mono);font-size:.66rem;color:var(--text-2);margin-top:.2rem}
.card__t{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.card__n{font-family:var(--disp);font-weight:700;font-size:1.18rem;text-transform:uppercase;line-height:1.08;margin-top:auto}
.card__n a{color:inherit;text-decoration:none}.card__n a:hover{text-decoration:underline}
.card__r{font-family:var(--mono);font-size:.66rem;color:var(--rt,var(--muted-2));margin-top:.3rem}
.card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.card::after{background:var(--rc,#39414c)}.card.q::after{background:#252c35}.card.q{background:var(--panel-2)}
.card.q .card__n{color:var(--muted);font-size:.95rem;font-weight:600}
/* the after state */
.seg{display:flex;gap:1px;background:var(--line);width:max-content;max-width:100%;margin:3rem 0 1rem}
.seg button{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:var(--panel-2);color:var(--muted-2);border:0;padding:.55rem 1.1rem;cursor:pointer}
.seg button.on{background:var(--c);color:var(--on-c)}
.estate{display:none}.estate.on,.no-js .estate{display:block}
.erows{margin-top:1.4rem}
.erow{display:grid;grid-template-columns:minmax(0,1fr) 9rem minmax(0,1.2fr);gap:1.3rem;align-items:center;padding:1rem 0;border-top:1px solid var(--line)}
.erow:first-child{border-top:0}
@media(max-width:720px){.erow{grid-template-columns:minmax(0,1fr) auto}.erow .erow__d{grid-column:1/-1}}
.erow .nm a{color:inherit;text-decoration:none}.erow .nm a:hover{text-decoration:underline}
.erow .nm{flex-wrap:wrap}
.erow .sd{width:100%}
.erow__v{font-family:var(--disp);font-weight:700;font-size:1.05rem}
.erow__v small,.erow__d small{display:block;font-family:var(--mono);font-size:.68rem;font-weight:400;color:var(--muted-2);text-transform:none;margin-top:.15rem}
.erow__v b.g,.erow__d.g{color:var(--gain)}.erow__v b.l,.erow__d.l{color:var(--lose)}
.erow__d{font-family:var(--disp);font-weight:700;font-size:1.05rem}

#race-impact{scroll-margin-top:90px}

.event h1{display:flex;align-items:center;gap:.35em}
.elogo{width:1.1em;height:1.1em;object-fit:contain;flex:none}

.st__r{font-family:var(--mono);font-size:.66rem;color:var(--muted-2);line-height:1.4}
.st__m{display:flex;flex-direction:column;gap:.15rem}
.st__c{font-family:var(--disp);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
.st__c small{font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--muted-2);margin-left:.3rem;letter-spacing:0}

/* After: the winner in the masthead */
.echamp{position:relative;text-align:center;min-width:240px;padding:1.2rem 1.6rem 1.3rem;background:color-mix(in srgb,var(--rc) 12%,var(--panel));border-top:3px solid var(--rc)}
.echamp__logo,.echamp__mono{width:84px;height:84px;margin:.9rem auto .2rem;display:block;object-fit:contain}
.echamp__mono{display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:2.6rem;color:var(--rt);background:color-mix(in srgb,var(--rc) 22%,transparent)}
.echamp__n{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4.4vw,2.8rem);line-height:1;text-transform:uppercase;letter-spacing:-.01em;margin-top:.5rem;color:var(--rt)}
.echamp__n a{color:inherit;text-decoration:none}.echamp__n a:hover{text-decoration:underline}
.echamp__r{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-top:.5rem}

/* After: how it finished. No boxes, one row, one size: a big numeral in the
   region's colour, the logo, the name in the region's colour, the record. */
.podium{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 2rem;align-items:start;padding:1.2rem 0 1.4rem;border-bottom:1px solid var(--line)}
@media(max-width:820px){.podium{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pod{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .7rem;align-items:center;min-width:0}
.pod__num{grid-row:1/5;font-family:var(--disp);font-weight:700;font-size:6rem;line-height:.8;color:var(--rc);letter-spacing:-.06em;align-self:center}
.pod__body{display:contents}
.pod__k{grid-column:2;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.pod__logo,.pod__mono{width:44px;height:44px;object-fit:contain;grid-column:2}
.pod__mono{display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.4rem;color:var(--on-accent);background:var(--rc)}
.pod__n{font-family:var(--disp);font-weight:700;font-size:1.5rem;text-transform:uppercase;line-height:1;letter-spacing:-.01em;color:var(--rt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:2}
.pod__n a{color:inherit;text-decoration:none}.pod__n a:hover{text-decoration:underline}
.pod__rec{grid-column:2;font-family:var(--disp);font-weight:700;font-size:1.25rem;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.pod__rec small{display:block;font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.05em;color:var(--muted-2);margin-top:.3rem;text-transform:none}

/* After: winners and losers as bars either side of zero */
.etrophy{font-size:1rem;line-height:1.6;color:var(--text);max-width:74ch;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--panel-2);border-left:3px solid var(--up)}
.wls{border-top:1px solid var(--line)}
.wl{display:grid;grid-template-columns:minmax(0,1fr) 10.5rem minmax(0,1.6fr) 8.5rem;gap:.4rem 1.3rem;align-items:center;padding:1rem 0 1rem .9rem;
  border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 var(--rc)}
.wl .nm a{color:inherit;text-decoration:none}.wl .nm a:hover{text-decoration:underline}
.wl__r{font-family:var(--disp);font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.wl__r small{display:block;font-family:var(--mono);font-size:.64rem;font-weight:400;color:var(--muted-2);margin-top:.1rem;white-space:nowrap}
.wl__bar{display:grid;grid-template-columns:1fr 1fr;align-items:center;height:28px}
.wl__neg,.wl__pos{display:flex;align-items:center;gap:.5rem;height:100%}
.wl__neg{justify-content:flex-end;border-right:1px solid rgba(255,255,255,.25)}
.wl__neg i,.wl__pos i{display:block;height:14px}
.wl__neg i{background:var(--lose)}
.wl__pos i{background:var(--gain)}
.wl__bar b{font-family:var(--disp);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.wl__neg b{color:var(--lose)}.wl__pos b{color:var(--gain)}
.wl__pos b.wl__zero{color:var(--muted-2);margin-left:.5rem}
.wl__m{text-align:right;white-space:nowrap}
.wl__m b{display:block;font-family:var(--disp);font-weight:700;font-size:1.15rem;line-height:1;color:var(--text-2);font-variant-numeric:tabular-nums}
.wl__m b .up{color:var(--gain)}.wl__m b .dn{color:var(--lose)}
.wl--plain{grid-template-columns:minmax(0,1fr) 10.5rem minmax(0,1.6fr)}
.wl__m small{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;color:var(--muted-2);margin-top:.25rem}
.wl__m small.up{color:var(--gain)}.wl__m small.dn{color:var(--lose)}
.wl__key{font-size:.92rem;line-height:1.7;color:var(--muted);margin:1.1rem 0 0;max-width:80ch}
@media(max-width:720px){
  .wl{grid-template-columns:minmax(0,1fr) auto;}
  .wl__bar{grid-column:1/-1;grid-row:3}
  .wl__m{grid-row:1;grid-column:2}
  .wl__r{grid-row:2;grid-column:1}
}