/* A team page (docs/design/holdside-v22.html): the act tabs, the masthead with
   its radar and five figures, and act one. In the region's colour (--c; as text
   --ct, lifted past 6:1; --cd the dark number on it). Needs base.css and, for
   the calendar's rows, front.css. */
.team{--c-lit:color-mix(in srgb,var(--c) 90%,#fff)}
.acts{position:sticky;top:56px;z-index:90;background:rgba(7,8,10,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.acts .container{display:flex;gap:1px;height:44px;align-items:center;overflow-x:auto;scrollbar-width:none}
.act-tab{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);padding:.55rem 1rem;
  white-space:nowrap;background:none;border:0;cursor:pointer;height:44px;border-bottom:2px solid transparent}
.act-tab:hover{color:var(--text-2)}
.act-tab.on{color:var(--ct);border-bottom-color:var(--c)}
.act-tab b{font-family:var(--disp);font-weight:700;font-size:.78rem;margin-right:.45rem;color:var(--muted-2)}
.act-tab.on b{color:var(--ct)}
/* The acts on a phone: three that share the width, a title on up to two lines, so none is off the edge. */
@media(max-width:640px){
  .acts .container{padding:0;gap:0;height:auto;min-height:62px;align-items:stretch}
  .act-tab{flex:1 1 0;min-width:0;height:auto;min-height:62px;white-space:normal;line-height:1.25;letter-spacing:.08em;font-size:.66rem;padding:.3rem .45rem;text-align:center}
  .act-tab b{display:block;margin:0 0 .1rem}
  .det{scroll-margin-top:130px}
}
.act-pane{display:none}
.act-pane.on,.no-js .act-pane{display:block}

/* the masthead's backdrop: the region's light, a dot grid, and the world standing as a ghost */
.tmastwrap{position:relative;overflow:hidden;margin:0 -1.5rem;padding:0 1.5rem;
  background:radial-gradient(1100px 420px at 78% 18%,color-mix(in srgb,var(--c) 16%,transparent),transparent 62%),
    radial-gradient(700px 340px at 8% 80%,rgba(255,255,255,.035),transparent 65%),linear-gradient(180deg,#0d1218 0%,#0a0e13 58%,var(--bg) 100%)}
.tmastwrap::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px;mask-image:radial-gradient(900px 400px at 70% 25%,#000 10%,transparent 72%);-webkit-mask-image:radial-gradient(900px 400px at 70% 25%,#000 10%,transparent 72%)}
.ghost{position:absolute;left:-.04em;top:50%;transform:translateY(-38%);font-family:var(--disp);font-weight:700;font-size:clamp(9rem,24vw,19rem);line-height:.72;
  color:rgba(255,255,255,.028);letter-spacing:-.05em;pointer-events:none;user-select:none;white-space:nowrap}
/* a club with a logo gets it as the ghost instead of the number, in its own greys (a white silhouette filled badges and dark
   fields in); a mostly dark logo inverted; never past the file's own height, set on the element (`ClubLogos::ghost`), and a small file keeps the number */
.ghost-logo{position:absolute;left:-2%;top:50%;transform:translateY(-46%);height:118%;max-width:58%;object-fit:contain;object-position:left center;
  opacity:.07;filter:grayscale(1) contrast(1.15);pointer-events:none;user-select:none}
.ghost-logo--dark{filter:grayscale(1) invert(1) contrast(1.15)}
.tmast{padding:3.2rem 0 2rem;position:relative}
.pread{margin-top:2rem;padding-left:1rem;border-left:2px solid var(--c);font-size:.95rem;line-height:1.6;color:var(--text-2);max-width:48ch}
.pread b{color:var(--text);font-weight:600}
.pread span{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);line-height:1.7}
.tmast[data-profile=against] .pread--before,.tmast[data-profile=before] .pread--against{display:none}
.tmast[data-profile=against] .profile .before,.tmast[data-profile=before] .profile .band,.tmast[data-profile=before] .profile .median{display:none}
.tmast[data-profile=before] .profile .dot.below,.tmast[data-profile=before] .profile .dot.above{fill:var(--c)}
.back{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);text-decoration:none}
.back:hover{color:var(--text)}
.tmast__grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:2.6rem;align-items:center;margin-top:1.2rem}
@media(max-width:860px){.tmast__grid{grid-template-columns:1fr}}
/* the region always under the name, however short the name (Betclic's had risen beside it) */
.tname{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.tname h1{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,9vw,5.4rem);line-height:.82;text-transform:uppercase;letter-spacing:-.025em;margin:0;max-width:none}
.tname h1 img{width:.8em;height:.8em;object-fit:contain;vertical-align:-.05em;margin-right:.25em}
.tname .rgn{display:block;font-family:var(--disp);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ct)}
.tname .rgn .stg{width:230px;margin-top:.55rem}
.roster{font-family:var(--mono);font-size:.72rem;color:var(--muted-2);margin-top:1.6rem;letter-spacing:.04em}
.roster b{color:var(--text-2);font-weight:400}

/* the radar */
.profile{margin:0;color:var(--c)}
.profile__h{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.5rem}
.profile figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.pseg{display:flex;gap:1px;background:var(--line);margin-left:auto}
.pseg button{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--panel-2);color:var(--muted-2);border:0;padding:.38rem .6rem;cursor:pointer;white-space:nowrap}
.pseg button:hover:not(.on){color:var(--text-2)}
/* Dark text on the region's colour sits on it lifted a tenth towards white: violet alone gives 5.9:1 (review of #27). */
.pseg button.on{background:var(--c-lit);color:var(--cd)}
.profile__plot{position:relative;width:100%;aspect-ratio:1;max-width:400px;margin:0 auto}
.profile__plot svg{position:absolute;left:17%;top:17%;width:66%;height:66%;overflow:visible}
.profile .ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:.6}
.profile .spoke{stroke:rgba(255,255,255,.08);stroke-width:.6}

.profile .band{fill:var(--text-2);fill-opacity:.12;stroke:none}
.profile .median{fill:none;stroke:var(--text-2);stroke-width:1;stroke-dasharray:3 2.5;opacity:.75}
.profile .before{fill:none;stroke:var(--text-2);stroke-width:1.2;stroke-dasharray:3 2.5;opacity:.8}
.profile .glow{fill:none;stroke:var(--c);stroke-width:2.4;opacity:.55}
.profile .now{fill:url(#pfill);stroke:var(--c);stroke-width:1.8;stroke-linejoin:round}
.profile .dot{fill:var(--c);stroke:var(--bg);stroke-width:1}
.profile .dot.below{fill:var(--lose)}
.profile .dot.above{fill:var(--gain)}
.profile .paxis{position:absolute;width:max-content;max-width:9rem;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);text-align:center;line-height:1.25;white-space:normal}
.profile .paxis b{display:block;font-family:var(--disp);font-size:.95rem;font-weight:700;color:var(--ct);letter-spacing:0}
.profile .paxis.ours{color:var(--muted-2)}
.profile .paxis.ours b{color:var(--text-2)}
.profile__key{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.profile__key i{display:inline-block;width:14px;height:3px;margin-right:.35rem;vertical-align:2px}
.profile__key .k-valve{background:var(--ct)}
.profile__key .k-ours{background:var(--text-2)}
.profile__key .k-scale{color:var(--muted-2)}

/* the five figures */
.tbar{display:grid;grid-template-columns:minmax(210px,auto) repeat(auto-fit,minmax(170px,1fr));gap:1px;margin-top:2.4rem;background:var(--line);border:1px solid var(--line)}
@media(max-width:1000px){.tbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tbar{grid-template-columns:1fr}}
.odds{background:var(--c-lit);color:var(--cd);padding:1.05rem 1.35rem;
  display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none}
.odds__n{font-family:var(--disp);font-weight:700;font-size:3.4rem;line-height:.78;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.odds__n span{font-size:.4em;margin-left:.06em}
.odds__l{font-family:var(--disp);font-weight:700;font-size:.92rem;text-transform:uppercase;line-height:1.15;margin-top:.7rem}
.odds__d{font-family:var(--mono);font-size:.7rem;margin-top:.22rem;letter-spacing:.03em}
.cell{background:var(--panel-2);padding:1.3rem 1.4rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:122px}
.cell__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:auto}
.cell__v{font-family:var(--disp);font-weight:700;font-size:2.1rem;line-height:.85;font-variant-numeric:tabular-nums;margin-top:.8rem}
.cell__v small{font-size:.48em;color:var(--muted-2)}
.cell__s{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-top:.5rem}
.cell--next .cell__v{font-size:1.4rem;text-transform:uppercase}
.cell--next .when{font-family:var(--disp);font-weight:700;font-size:2.1rem;line-height:.85;color:var(--ct);margin-top:.4rem;font-variant-numeric:tabular-nums}
.cell--next .when small{font-family:var(--mono);font-size:.3em;letter-spacing:.12em;color:var(--muted-2);margin-left:.4rem;font-weight:400;text-transform:uppercase}
/* the ladder: two above and two below, in the racing figure's type */
.ladder{list-style:none;margin:.7rem 0 0;padding:0}
.ladder li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.5rem;align-items:center;height:24px;padding:0 .3rem;
  font-family:var(--disp);font-weight:600;font-size:.88rem;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder li span{font-weight:700;text-align:right;color:var(--muted-2);font-variant-numeric:tabular-nums}
.ladder li.me{background:rgba(255,255,255,.045);color:var(--ct)}
.ladder li.me span{color:var(--ct)}
.ladder li.last{box-shadow:inset 0 -1px 0 var(--sys)}
.spark{display:block;width:100%;height:30px;margin-top:.55rem}
.spark polyline{fill:none;stroke:var(--c);stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark--rank line{stroke:var(--sys);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}

/* act one */
.act{margin:4.5rem 0 1.8rem}
.act__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ct)}
.act h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,5vw,3rem);line-height:.95;text-transform:uppercase;margin:.35rem 0 0}
.act p{margin:.6rem 0 0;color:var(--muted);max-width:66ch;font-size:.95rem}
.team .sh{margin:3.8rem 0 1.4rem}
.team .sh h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,3.4vw,1.9rem);line-height:1;text-transform:uppercase;margin:0}
.team .sh .meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-left:auto}
.team .lv2{overflow:visible}
.verdict{display:grid;gap:1rem}
.vn{font-family:var(--disp);font-weight:700;font-size:3.4rem;line-height:.8;color:var(--ct);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vn small{font-size:.32em;margin-left:.15em}
.vt{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,2.6vw,1.4rem);text-transform:uppercase;line-height:1.2}
.vt b{color:var(--ct)}
.vm{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.expiring{margin:1.4rem 0 0;padding-left:1rem;border-left:2px solid var(--up);font-size:.95rem;color:var(--text-2)}
.expiring b{color:var(--text);font-weight:600}

.racing__ctl{display:inline-flex;gap:1px;background:var(--line);margin-bottom:1.3rem}
.racing__ctl button{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;background:var(--panel-2);color:var(--muted-2);border:0;padding:.45rem .85rem;cursor:pointer}
.racing__ctl button:hover{color:var(--text)}
.racing__ctl button.on{color:var(--ct);background:var(--panel);box-shadow:inset 0 -2px 0 var(--c)}
.racing__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,.55fr) minmax(0,1fr);align-items:start}
.racing[data-view=today] .racing__grid{grid-template-columns:minmax(0,1fr)}
.racing[data-view=cut] .racing__grid{grid-template-columns:minmax(0,1fr)}
.racing[data-view=today] .racing__links,.racing[data-view=today] .racing__col--cut{display:none}
.racing[data-view=cut] .racing__links,.racing[data-view=cut] .racing__col--today{display:none}
.racing__h{display:flex;justify-content:space-between;gap:1rem;height:2.6rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);padding-bottom:.55rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;align-items:flex-end}
.racing__h span:last-child{color:var(--muted-2);text-align:right}
.racing__rows{position:relative}
.racing__links{display:block;width:100%;margin-top:calc(2.6rem + .4rem + 1px);overflow:visible}
.racing__links path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke:var(--muted-2);opacity:.3}
.racing__links path.me{stroke:var(--text);opacity:1;stroke-width:3.5}
.racing__links path.up{stroke:var(--gain);opacity:.95}
.racing__links path.out{stroke:var(--lose);opacity:.95}
.rrow{position:absolute;left:0;right:0;height:36px;display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.6rem;align-items:center}
.rrow .r{font-family:var(--disp);font-weight:700;font-size:1.05rem;color:var(--muted-2);text-align:right;font-variant-numeric:tabular-nums}
.rrow .n{font-family:var(--disp);font-weight:600;font-size:1rem;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .n a{color:inherit;text-decoration:none}
.rrow .n a:hover{color:var(--text)}
.rrow .n small{font-family:var(--mono);font-weight:400;font-size:.62rem;color:var(--muted-2);margin-left:.45rem;text-transform:none}
.rrow .p{font-family:var(--mono);font-size:.72rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.rrow .c{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
.rrow.me{background:rgba(255,255,255,.035)}
.rrow.me .n,.rrow.me .r{color:var(--ct)}
.rrow.up .n,.rrow.up .r{color:var(--gain)}
.rrow.out .n,.rrow.out .r{color:var(--lose)}
.racing__grid{position:relative}
.racing__lines{position:absolute;left:0;right:0;top:calc(2.6rem + .4rem + 1px);pointer-events:none}
.rline{position:absolute;left:0;right:0;height:1px;background:color-mix(in srgb,var(--c) 70%,transparent)}
.rline.cut{background:var(--sys)}
.rline span{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:0 .45rem;background:var(--panel);white-space:nowrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ct)}
.rline.cut span{color:var(--sys-text)}
.racing__key{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.racing__key i{display:inline-block;width:16px;height:3px;margin-right:.4rem;vertical-align:3px}
.racing__key .k-me{background:var(--text);height:4px}
.racing__key .k-up{background:var(--gain)}
.racing__key .k-out{background:var(--lose)}
.racing__key .k-cut{background:var(--sys)}
.racing__concl{margin:1.4rem 0 0;padding-left:1rem;border-left:2px solid var(--text-2);font-size:.95rem;color:var(--text-2)}
.racing .src{font-size:.92rem;line-height:1.7;color:var(--muted);margin:1.2rem 0 0;max-width:80ch}
.racing .src b{color:var(--text-2);font-weight:600}
@media(max-width:760px){
  .racing__grid{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}
  .rrow{grid-template-columns:1.4rem minmax(0,1fr) auto;gap:.35rem}
  .rrow .p,.rrow .n small,.racing__h span:last-child{display:none}
  .rline span{display:none}
}

.tcal{padding-top:.4rem}
.tev{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;gap:.4rem 1.2rem;align-items:center;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.tev__nm{font-family:var(--disp);font-weight:600;font-size:1.05rem;text-transform:uppercase}
.tev__nm small{display:block;font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.04em;text-transform:none;color:var(--muted-2);margin-top:.15rem}
.tev__stake{grid-column:1/-1}
.tev__stake .stake-row{border-top:0;padding:.2rem 0 0}
.tcal__none,.tcal__more{font-size:.9rem;color:var(--text-2);margin:.8rem 0 .2rem}

/* acts two and three: the headings, and prose in the region's rule */
.team .act{margin:4.5rem 0 1.8rem;padding-top:.5rem}
.team .act__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ct)}
.team .act h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,5vw,3rem);line-height:.95;text-transform:uppercase;margin:.35rem 0 0}
.team .act p{margin:.8rem 0 0;color:var(--muted);max-width:62ch;font-size:.95rem}
.team .read{margin:1.6rem 0 0;padding-left:1rem;border-left:2px solid var(--c);font-size:.93rem;line-height:1.6;color:var(--text-2);max-width:72ch}
.team .src{font-size:.92rem;line-height:1.7;color:var(--muted);margin:1.3rem 0 0;max-width:80ch}

/* act two: pick an event on the left, read it on the right */
.two{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.4fr);gap:1px;background:var(--line)}
@media(max-width:820px){.two{grid-template-columns:1fr}.two__l{max-height:320px;overflow-y:auto}}
.two__l{background:var(--panel-2);padding:.4rem 0}
.two__r{background:var(--panel);padding:1.8rem 1.9rem;min-width:0}
.pick{display:grid;grid-template-columns:2.8rem minmax(0,1fr) 3.4rem;gap:.7rem;align-items:center;width:100%;padding:.85rem 1.2rem;cursor:pointer;
  border:0;border-left:3px solid transparent;background:none;text-align:left;color:inherit;font:inherit}
.pick:hover{background:rgba(255,255,255,.03)}
.pick.on{background:color-mix(in srgb,var(--c) 10%,transparent);border-left-color:var(--c)}
.pick__d{font-family:var(--mono);font-size:.68rem;color:var(--muted-2);line-height:1.3}
.pick__n{font-family:var(--disp);font-weight:600;font-size:.98rem;text-transform:uppercase;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick.on .pick__n{color:var(--text)}
.pick.unres .pick__n{color:var(--muted-2);font-weight:500}
.pick__v{font-family:var(--disp);font-weight:700;font-size:.95rem;text-align:right;font-variant-numeric:tabular-nums}
.pick__v.p,.ml__v.p,.det__st b.p{color:var(--ct)}
.pick__v.n,.ml__v.n,.det__st b.n{color:var(--muted)}
.det{display:none;scroll-margin-top:110px}
.det.on,.no-js .det{display:block}
.no-js .det+.det{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.det__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}
.det__n{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,3.4vw,2rem);text-transform:uppercase;line-height:1.05;margin:.3rem 0 .15rem}
.det__s{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted-2);line-height:1.6}
.det__st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);margin:1.5rem 0}
.det__st>div{background:var(--panel-2);padding:.95rem 1.05rem}
.det__st span{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);display:block}
.det__st b{font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1.15;display:block;margin-top:.15rem;font-variant-numeric:tabular-nums}
@media(max-width:560px){.det__st>div{padding:.6rem .65rem}.det__st b{font-size:1.2rem}.det__st span{font-size:.6rem;letter-spacing:.06em}
  .pick__n{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15}.two__r{padding:1.2rem 1rem}}
.fade{font-size:.9rem;color:var(--muted);margin:-.4rem 0 1.1rem;line-height:1.55}
.fade.low{color:var(--lose)}
.ml{margin-top:.2rem}
.ml__r{display:grid;grid-template-columns:1.5rem minmax(0,1fr) 4.2rem;gap:.9rem;align-items:center;padding:.65rem 0}
.ml__r+.ml__r{border-top:1px solid var(--line)}
.ml__wl{width:1.5rem;height:1.5rem;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;font-weight:700;border-radius:2px}
.ml__wl.w{background:color-mix(in srgb,var(--gain) 18%,transparent);color:var(--gain)}
.ml__wl.l{background:color-mix(in srgb,var(--lose) 18%,transparent);color:var(--lose)}
.ml__o{min-width:0}
.ml__nm{display:block;font-family:var(--disp);font-weight:500;font-size:.98rem;text-transform:uppercase;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml__nm small{font-family:var(--mono);font-size:.68rem;color:var(--muted-2);text-transform:none;margin-left:.5rem}
.ml__v{font-family:var(--disp);font-weight:700;font-size:1rem;text-align:right;font-variant-numeric:tabular-nums}
.ml__w{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted-2);margin-top:.1rem}
.ml__key{font-family:var(--mono);font-size:.66rem;color:var(--muted-2);line-height:1.6;margin:.3rem 0 .4rem}
/* a win that holds counting slots: the row lit in the region's colour, one tag per factor */
.ml__r.counts{background:color-mix(in srgb,var(--c) 7%,transparent);box-shadow:inset 3px 0 0 var(--c);margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem}
.ml__r.counts .ml__nm{color:var(--text);font-weight:600}
.ml__slots{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.ml__slots span{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .45rem;border-radius:2px;
  border:1px solid var(--line);color:var(--muted-2)}
.ml__slots span.on{background:var(--c-lit);border-color:var(--c-lit);color:var(--cd);font-weight:700}
.ml__slots b{font-weight:700}
.cf{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--c);padding:1.3rem 1.45rem;margin-top:1.7rem}
.cf__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ct)}
.cf__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:.8rem}
.cf__c>span{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);display:block}
.cf__c b{font-family:var(--disp);font-weight:700;font-size:1.6rem;display:block;margin-top:.15rem;font-variant-numeric:tabular-nums}
.cf__c b small{font-size:.5em;color:var(--muted-2);font-weight:400}
.cf__c.now b{color:var(--ct)}.cf__c.alt b{color:var(--muted)}
.cf__v{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);font-size:.93rem;line-height:1.55;color:var(--text-2)}
.cf__v b{color:var(--text);font-weight:600}
.cf__s{font-family:var(--mono);font-size:.68rem;color:var(--muted-2);margin:.6rem 0 0;line-height:1.7}

/* act three: the build-up, the factor tracks, the formula */
.build{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:1px;background:var(--line)}
.build>div{background:var(--panel-2);padding:1.3rem 1.4rem}
.build.elo{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:620px){.build{grid-template-columns:1fr}.build .op{padding:.2rem 1.15rem!important}}
.build span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);display:block}
.build b{font-family:var(--disp);font-weight:700;font-size:1.85rem;line-height:1.1;display:block;margin-top:.2rem;font-variant-numeric:tabular-nums}
.build b small{font-size:.5em;color:var(--muted-2);font-weight:400}
.build b.up{color:var(--gain)}.build b.down{color:var(--lose)}
.build .sum b{color:var(--ct)}
.build .op{display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-family:var(--disp);font-weight:700;font-size:1.6rem;padding:0 .9rem}
.fac{margin-top:.2rem}
.frow{display:grid;grid-template-columns:15rem minmax(0,1fr) 5.2rem;gap:1.3rem;align-items:center;padding:1.15rem 0}
.frow+.frow{border-top:1px solid var(--line)}
@media(max-width:760px){.frow{grid-template-columns:minmax(0,1fr) 5rem;row-gap:.4rem}.frow .ft{grid-column:1/-1;grid-row:2}}
.fk{font-family:var(--disp);font-weight:600;font-size:1.05rem;text-transform:uppercase;line-height:1.15}
.fk small{display:block;font-family:var(--mono);font-size:.68rem;color:var(--muted-2);text-transform:none;letter-spacing:0;font-weight:400;margin-top:.2rem;line-height:1.5}
.ft{position:relative;height:20px}
.ft::before{content:'';position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:rgba(255,255,255,.06)}
.ft i{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;background:var(--c);opacity:.5}
.ft b{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--ct)}
.ft u{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--panel);border:2px solid var(--muted-2)}
.fv{font-family:var(--disp);font-weight:700;font-size:1.3rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--ct)}
.fv small{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted-2);font-weight:400}
.avg{display:flex;align-items:baseline;gap:1rem 1.4rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.avg b{font-family:var(--disp);font-weight:700;font-size:1.25rem;color:var(--text);margin-left:.4rem}
.avg__key{margin-left:auto;display:flex;gap:1.2rem;flex-wrap:wrap}
.avg i{display:inline-block;border-radius:50%;margin-right:.4rem;vertical-align:-1px}
.avg .k-me{width:11px;height:11px;background:var(--ct)}
.avg .k-med{width:9px;height:9px;border:2px solid var(--muted-2)}
.formula{font-family:var(--mono);font-size:.74rem;line-height:1.9;color:var(--muted-2);background:var(--panel-2);padding:1.1rem 1.3rem;margin-top:1.5rem;overflow-x:auto;white-space:nowrap}
.formula b{color:var(--ct);font-weight:400}
.fnote{font-size:.92rem;line-height:1.7;color:var(--muted);margin:1rem 0 0;max-width:80ch}
.fnote b{color:var(--text-2);font-weight:600}
.blk{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:2.4rem 0 1.1rem}
.form{display:flex;flex-wrap:wrap;gap:3px}
.form span{width:1.45rem;height:1.45rem;display:grid;place-items:center;font-family:var(--mono);font-size:.64rem;font-weight:700;border-radius:2px}
.form .w{background:color-mix(in srgb,var(--gain) 18%,transparent);color:var(--gain)}
.form .l{background:color-mix(in srgb,var(--lose) 18%,transparent);color:var(--lose)}
.sc{position:relative;height:300px;margin:2rem 0 2.6rem 1.8rem}
.sc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sc line{stroke:rgba(255,255,255,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.sc line.zero{stroke:rgba(255,255,255,.26)}
.sc line.own{stroke:var(--c);stroke-dasharray:4 4;opacity:.6}
.sc__pt{position:absolute;z-index:1;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#4e5764;opacity:.7}
.sc__pt.mid{width:10px;height:10px;margin:-5px 0 0 -5px}
.sc__pt.big{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
.sc__pt.mid.up,.sc__pt.big.up{background:var(--c);opacity:.95}
.sc__pt.mid.down,.sc__pt.big.down{background:var(--muted);opacity:.85}
@media(max-width:560px){.sc{height:240px}.sc__lb,.sc__x.minor{display:none}.sc__ax{font-size:.58rem;letter-spacing:.06em}}
.sc__y,.sc__x,.sc__ax,.sc__me,.sc__lb{position:absolute;pointer-events:none;white-space:nowrap;z-index:2}
.sc__y,.sc__x{font-family:var(--mono);font-size:.68rem;color:var(--muted-2)}
.sc__y{left:-1.8rem;transform:translateY(-50%)}
.sc__x{bottom:-1.1rem;transform:translateX(-50%)}
.sc__ax{bottom:-2.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.sc__ax--l{left:0}.sc__ax--r{right:0}
.sc__me{top:-.2rem;transform:translate(-50%,-100%);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ct)}
.sc__lb{transform:translate(-50%,calc(-100% - 10px));font-family:var(--disp);font-weight:600;font-size:.9rem;text-transform:uppercase;color:var(--text);
  background:var(--panel);padding:0 .3rem;border-radius:2px}
.sc__lb.below{transform:translate(-50%,10px)}
.sc__lb.start{transform:translate(-8px,calc(-100% - 10px))}.sc__lb.start.below{transform:translate(-8px,10px)}
.sc__lb.end{transform:translate(calc(-100% + 8px),calc(-100% - 10px))}.sc__lb.end.below{transform:translate(calc(-100% + 8px),10px)}
.sc__read{font-size:.9rem;color:var(--text-2);line-height:1.6;margin:1.9rem 0 0;max-width:72ch}

/* the worked formula and the notes under it: body text, not a grey mono wall */
.calc{margin-top:1.6rem;border:1px solid var(--line);background:var(--panel-2)}
.calc__row{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.95rem 1.3rem}
.calc__row+.calc__row{border-top:1px solid var(--line)}
@media(max-width:620px){.calc__row{grid-template-columns:1fr;gap:.2rem}}
.calc__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.calc__v{font-family:var(--disp);font-size:1.15rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.calc__v b{color:var(--ct);font-weight:700;font-size:1.3rem}
.explain{margin:1.3rem 0 0;padding:0;list-style:none;max-width:72ch}
.explain li{position:relative;padding-left:1.1rem;font-size:.92rem;line-height:1.6;color:var(--text-2)}
.explain li+li{margin-top:.6rem}
.explain li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--c);border-radius:50%}
.explain b{color:var(--text);font-weight:600}
.elo__how{margin:1.2rem 0 0;font-size:.92rem;line-height:1.6;color:var(--text-2);max-width:72ch}
.elo__how a{color:var(--ct);text-decoration:none;white-space:nowrap}
.elo__how a:hover{text-decoration:underline}

.det__link{display:inline-block;margin-top:.35rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ct);text-decoration:none}
.det__link:hover{text-decoration:underline}
.tev__nm a{color:inherit;text-decoration:none}.tev__nm a:hover{text-decoration:underline}