@font-face{font-family:"Saira Stencil One";src:url(fonts/saira-stencil-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Saira";src:url(fonts/saira-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Saira";src:url(fonts/saira-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url(fonts/saira-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url(fonts/saira-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url(fonts/saira-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

/* colours from poster.py */
:root{
  --page:#141518;--asphalt:#2a2c30;--runoff:#1c1d20;--paint:#ebe8e1;--heat:#e63b2a;
  --rare:#f2c230;--never:#6a6e75;--ink:#ebe8e1;--ink2:#a9adb3;--ink3:#767b82;
  --line:#34363b;--raised:#1c1d20;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --cond:"Saira Condensed","Arial Narrow",sans-serif;
  --body:"Saira",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
.page{max-width:1240px;margin:0 auto;padding:40px 32px 32px}

/* ---- header ---- */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
h1{margin:0;font:400 clamp(48px,8vw,84px)/.95 "Saira Stencil One",var(--cond);letter-spacing:2px}
.sub{margin:14px 0 0;font-size:clamp(17px,2vw,23px);color:var(--ink2)}
.scope{margin:6px 0 0;font-size:clamp(15px,1.6vw,19px);color:var(--ink3);min-height:1.4em}

.label{font:600 14px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3)}

/* ---- controls ---- */
.controls{margin-top:28px;padding:14px 18px;background:var(--raised);border:1px solid var(--line);border-radius:6px;
  display:grid;grid-template-columns:minmax(0,1fr) 160px 180px auto auto;gap:22px;align-items:start}
.controls .tabs{box-sizing:border-box;height:var(--ctl-h)}
.controls .tab{display:inline-flex;align-items:center;height:100%;font-size:14px;padding:0 10px;letter-spacing:.5px}
.turnfield .tabs{justify-self:start}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}   /* never wider than its column */
.field-head{display:flex;justify-content:space-between;align-items:baseline}
/* seasons: the decade buttons sit on the label's line, so the slider lines up with the menus.
   The 24px-tall line is pulled up 5px to keep the label level with the others, and the gap
   puts the slider's middle on the menus' middle. */
.seasons{gap:11px}
.seasons .field-head{align-items:center;gap:12px;min-height:24px;margin-top:-5px}
.seasons .chips{flex:1 1 auto;min-width:0}
output{font:700 14px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dual-row{display:flex;align-items:center;gap:14px}
.dual-row .dual{flex:1 1 auto;min-width:0}
.dual-row output{flex:none}

.dual{position:relative;height:24px}
.dual-track{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--line)}
.dual-fill{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--heat)}
.dual input{position:absolute;inset:0;width:100%;height:24px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dual input::-webkit-slider-runnable-track{background:none;height:24px}
.dual input::-moz-range-track{background:none;height:24px}
.dual input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:var(--paint);border:3px solid var(--page);box-shadow:0 0 0 1px var(--ink3);cursor:grab;transition:transform .15s var(--ease)}
.dual input::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;
  background:var(--paint);border:3px solid var(--page);box-shadow:0 0 0 1px var(--ink3);cursor:grab}
.dual input:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15)}
.dual input:focus-visible{outline:none}
.dual input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--rare)}
.dual input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--rare)}

.chips{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{font:500 11.5px/1 var(--mono);color:var(--ink2);background:none;border:1px solid var(--line);border-radius:3px;height:24px;padding:0 6px;cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,background-color .15s}
.chip:hover{color:var(--ink);border-color:var(--ink3)}
.chip[aria-pressed="true"]{color:var(--page);background:var(--paint);border-color:var(--paint)}

/* every control on the filter row is --ctl-h tall and starts --ctl-top down, under its label
   (label 14px + the field's 10px gap), so they line up whatever their content */
:root{--ctl-h:36px;--ctl-top:24px}
select,.reset{box-sizing:border-box;height:var(--ctl-h);font:500 15px/1.2 var(--body);color:var(--ink);background:var(--page);border:1px solid var(--line);border-radius:3px;padding:0 10px;width:100%}
select{cursor:pointer}
select:hover,.reset:hover{border-color:var(--ink3)}
.reset{width:auto;margin-top:var(--ctl-top);padding:0 16px;cursor:pointer;color:var(--ink2)}
.reset:disabled{opacity:.35;cursor:default;border-color:var(--line)}
.chip:focus-visible,select:focus-visible,.reset:focus-visible,.close:focus-visible{outline:2px solid var(--rare);outline-offset:2px}

/* ---- view switch ---- */
[hidden]{display:none!important}
.viewbar{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.viewbar-main{display:flex;flex-wrap:wrap;gap:12px}
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.tab{font:600 15px/1 var(--cond);letter-spacing:1px;text-transform:uppercase;color:var(--ink2);background:none;border:0;padding:10px 16px;cursor:pointer;
  transition:color .15s,background-color .15s}
.tab + .tab{border-left:1px solid var(--line)}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{color:var(--page);background:var(--paint)}
.tab:focus-visible{outline:2px solid var(--rare);outline-offset:-2px}
.dot{width:16px;height:16px;border-radius:2px}
.dot.heat{width:30px;background:linear-gradient(90deg,rgb(58,24,52),rgb(214,51,108),rgb(247,162,92),rgb(255,244,200))}
.dot.out{background:rgba(235,232,225,.3)}
.dot.mode{background:rgb(247,162,92);box-shadow:inset 0 0 0 1.5px #141518,inset 0 0 0 3px rgba(255,255,255,.85)}

/* ---- matrix ---- */
.mx-scroll{overflow:auto;max-height:calc(100vh - 32px);overscroll-behavior:contain;border:1px solid var(--line);border-radius:6px;background:var(--runoff)}
/* where the table fits, let the page scroll it so the headings can stick to the top of the screen */
@media (min-width:1240px){.mx-scroll{overflow:visible;max-height:none}}
.mx{border-collapse:separate;border-spacing:2px;table-layout:fixed;width:100%;min-width:820px;padding:8px}
.mx th{font:700 11px/1 var(--mono);color:var(--ink2);padding:0;height:26px;text-align:center}
.mx thead th{vertical-align:bottom;padding-bottom:6px;position:sticky;top:0;z-index:3;background:var(--runoff);box-shadow:0 0 0 2px var(--runoff)}
.mx thead th.corner{left:0;z-index:4}
.mx thead th.fx{z-index:4}
.mx .corner{width:46px}
.mx .axis{font:600 12px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);text-align:left;padding:4px 0 8px 4px;caption-side:top}
.mx tbody th{text-align:left;padding-left:4px;position:sticky;left:0;background:var(--runoff);z-index:1}
.mx td{height:26px;padding:0;text-align:center;font:500 11px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--asphalt);border-radius:2px;position:relative;cursor:pointer;outline:none;transition:background-color .35s var(--ease)}
.mx td.empty{cursor:default;color:transparent}
.mx td.mode{box-shadow:inset 0 0 0 1px #141518,inset 0 0 0 2px rgba(255,255,255,.85)}
.mx td[data-r]:not(.empty):hover,.mx td[data-r]:focus-visible{box-shadow:inset 0 0 0 1px #141518,inset 0 0 0 2.5px #fff}
.mx td.sel{box-shadow:inset 0 0 0 1px #141518,inset 0 0 0 2.5px var(--rare)}
.mx .tot,.mx td.tot{width:52px;background:none;color:var(--ink3);cursor:default;text-align:right;padding-right:4px;box-shadow:none}
.mx .gap{width:6px;background:none;cursor:default}
.mx tr.none th,.mx tr.none td{opacity:.35}
/* by-track table */
.mx.tk{min-width:1130px}
.mx.tk .corner{width:138px;text-align:left;padding-left:4px}
.mx.tk .tk-turn{width:24px;font:700 11px/1 var(--mono);color:var(--ink3);background:none;cursor:default;text-align:center;box-shadow:none}
.mx.tk .tk-races{width:44px;text-align:right}
.mx.tk th.tk-avg{width:46px}
.mx.tk td.tk-avg{font-weight:800}
/* standout marks: small arrow in the cell's top-right corner, in the cell's own text colour */
.mx.tk td.hi::after,.mx.tk td.lo::after{position:absolute;top:2px;right:3px;font-size:9px;line-height:1}
.mx.tk td.hi::after{content:"▲"}
.mx.tk td.lo::after{content:"▼"}
.mark{font:400 11px/1 var(--mono);color:var(--ink2);margin-right:2px}
.nums .n.up{color:var(--rare)}
.nums .n.down{color:#e8799c}
.nums.cmp{padding-top:12px;border-top:1px solid var(--line)}
.mx.tk tbody th{font:600 14px/1 var(--cond);color:var(--ink);white-space:nowrap}
.mx.tk .flag{display:inline-block;width:18px;height:12px;margin-right:8px;vertical-align:-1px;object-fit:cover;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.mx.tk tr.sum th{padding-left:30px}   /* line All tracks up with the names after the flags */
.mx.tk td[data-r]:not(.empty):hover,.mx.tk td[data-r]:focus-visible,.mx.tk td.sel{box-shadow:inset 0 0 0 1px #141518,inset 0 0 0 2.5px #fff}
.mx.tk td.sel{color:inherit}
.bar.ramp{background:linear-gradient(90deg,rgb(58,24,52),rgb(214,51,108),rgb(247,162,92),rgb(255,244,200))}
.dot.faded{background:rgb(214,51,108);opacity:.5}
.mx tr.sum th,.mx tr.sum td{font-weight:800;cursor:default;position:sticky;top:var(--head-h,34px);z-index:2;box-shadow:0 0 0 2px var(--runoff)}
.mx tr.sum th{left:0;z-index:3}
.mx tr.sum th{color:var(--rare)}
.sort{all:unset;cursor:pointer;color:inherit;font:inherit;padding:2px 0}
.sort:hover{color:var(--ink)}
.sort.on{color:var(--rare)}
.sort:focus-visible{outline:2px solid var(--rare);outline-offset:2px}
/* matrix axis labels */
.mx.sf thead th{padding-top:22px}
.mx.sf .corner{width:62px}
.mx.sf tbody th{padding-left:22px}
.mx.sf tbody tr:first-child th{z-index:2}   /* so START can run down over the rows below */
.mx .ax{position:absolute;font:600 12px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);white-space:nowrap;pointer-events:none}
.mx .ax-x{top:4px;left:2px}
.mx .ax-y{top:3px;left:2px;writing-mode:vertical-rl}
/* matrix: columns outside the chosen metric stay plain */
.mx td.out{color:var(--ink3)}
.mx thead th.in{color:var(--ink)}
.mx .tot.met{color:var(--ink);font-weight:700;width:68px}
.mx thead th{white-space:nowrap}   /* a wrapped heading makes the row taller and shifts the whole table */
.mx thead .pv{display:block;min-height:10px;margin-top:3px;font:500 10px/1 var(--mono);color:var(--rare)}
.mx-note{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--ink3)}
.bars{margin:14px 0 0;display:grid;gap:8px}
.bars div{display:grid;grid-template-columns:118px 1fr 52px;align-items:center;gap:10px;font:500 16px/1 var(--cond);color:var(--ink2)}
.bars i{height:8px;border-radius:2px;background:var(--line);overflow:hidden}
.bars b{display:block;height:100%;background:var(--paint)}
.bars .up b{background:var(--heat)}
.bars span:last-child{font:700 13px/1 var(--mono);color:var(--ink);text-align:right}

/* ---- legend ---- */
.legend{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.scale{position:relative;width:210px;height:34px}
.bar{position:absolute;left:0;right:0;top:0;height:12px;border-radius:2px;
  background:linear-gradient(90deg,rgba(230,59,42,.12),rgba(230,59,42,.9))}
.ticks span{position:absolute;top:19px;font:500 13px/1 var(--mono);color:var(--ink2);transform:translateX(-50%)}
.ticks span:first-child{transform:none}
.ticks span:last-child{transform:translateX(-100%)}
.key{display:flex;align-items:center;gap:10px;font:500 17px/1 var(--cond);color:var(--ink2)}
.swatch{width:30px;height:14px;border:3px solid var(--rare);border-bottom:0}
.swatch.never{border-color:var(--never);border-style:dashed}

/* ---- stage ---- */
.stage{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.stage.matrix{grid-template-columns:minmax(0,1fr) 300px;gap:20px}
.stage.triple{grid-template-columns:1fr}
/* by track: summary above, table at full width */
.stage.tracks{grid-template-columns:1fr;gap:20px}
.stage.tracks .panel{order:-1}
.stage.tracks .panel:not(.open){display:grid;grid-template-columns:1.3fr 1fr 1fr}
.stage.tracks .panel:not(.open) .panel-head{border-bottom:0}
.stage.tracks .panel:not(.open) .panel-head + .panel-head{border-left:1px solid var(--line)}

/* ---- three grids: left-first, all, right-first ---- */
.grids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gridcol{margin:0;min-width:0}
.gridcol figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 4px;padding:0 6%}
.gc-title{font:600 17px/1.1 var(--cond);letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.gc-sub{font:500 13px/1 var(--mono);color:var(--ink3);white-space:nowrap}
.side-tag{margin:8px 0 0;font:600 13px/1 var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--rare)}
@media (min-width:1101px){
  /* with three grids across, details float over the page instead of taking a column */
  .stage.triple .panel,.stage.tracks .panel{position:static;max-height:none}
  .stage.triple .panel.open,.stage.tracks .panel.open{position:fixed;top:auto;right:24px;bottom:24px;width:380px;max-height:72vh;z-index:10;
    box-shadow:0 18px 50px rgba(0,0,0,.6);animation:rise .28s var(--ease)}
}
.track{min-width:0}
.track svg{display:block;width:100%;height:auto;overflow:hidden}   /* the Turn 1 bends stop at the grid's edge */

.slot{cursor:pointer;outline:none}
.slot .fill{transition:opacity .45s var(--ease),fill .45s var(--ease)}
/* bright boxes on the ramp: dark text */
.slot.light .pct,.slot.light .lbl,.slot.light .y26{fill:#141518}
.slot.light .cnt,.slot.light .unit{fill:#3b3d44}
.slot.light .ghost{fill:#141518}
.slot .frame{stroke:var(--paint);transition:stroke .3s,stroke-width .15s}
.slot .ghost{transition:opacity .2s}
.slot .lbl{fill:var(--ink2)}
.slot .pct{fill:var(--ink)}
.slot.rare .frame{stroke:var(--rare)}
.slot.rare .lbl{fill:var(--rare)}
.slot.zero .frame{stroke:var(--never);stroke-dasharray:7 7}
.slot.zero .pct{fill:var(--ink3)}
.slot .ring{opacity:0;transition:opacity .15s}
.slot:hover .ring{opacity:.35}
.slot:hover .ghost{opacity:.22}
.slot:focus-visible .ring{opacity:.7}
.slot.sel .ring{opacity:1}
.slot.sel .frame{stroke-width:5}
.has-sel .slot:not(.sel) .fill{filter:saturate(.55)}
.note{transition:opacity .25s}
.has-sel .note:not(.sel){opacity:.45}

/* ---- side panel ---- */
.panel:empty{display:none}   /* a view with nothing to say in the panel leaves no empty box */
.panel{position:sticky;top:20px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  background:var(--raised);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.panel-head{padding:18px 20px 16px;border-bottom:1px solid var(--line)}
.panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.panel h2{margin:0;font:400 44px/1 "Saira Stencil One",var(--cond);letter-spacing:1px}
.panel h2.small{font:600 22px/1.15 var(--cond);letter-spacing:0}
.close{font:500 13px/1 var(--mono);color:var(--ink2);background:none;border:1px solid var(--line);border-radius:3px;padding:7px 9px;cursor:pointer}
.close:hover{color:var(--ink);border-color:var(--ink3)}
.big{margin:10px 0 0;font:800 30px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.big small{font:500 13px/1 var(--mono);color:var(--ink2);margin-left:10px}
/* label | count | share: one grid for all rows so the number columns line up */
.nums{margin:14px 0 0;display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:20px;row-gap:7px;align-items:baseline}
.nums .l{font:500 16px/1.25 var(--cond);color:var(--ink3)}
.nums .l.on{color:var(--ink)}
.nums .n{font:500 14px/1.25 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.nums .n.dim{color:var(--ink3)}
.nums.rank{grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:14px}
.nums.cmp{grid-template-columns:minmax(0,1fr) max-content}
.nums .h{font:600 11px/1 var(--cond);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);padding-bottom:2px;white-space:nowrap}
.nums .h.r{text-align:right}
.facts{margin:14px 0 0;display:grid;gap:6px}
.facts div{display:flex;gap:10px;font:500 16px/1.25 var(--cond)}
.facts dt{flex:0 0 78px;color:var(--ink3)}
.facts dd{margin:0;color:var(--ink)}
.hint{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--ink2)}
.races{list-style:none;margin:0;padding:6px 0;overflow-y:auto;overscroll-behavior:contain}
.races li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;padding:7px 20px}
.races li.deep{grid-template-columns:44px 36px minmax(0,1fr)}
.races li.climb{grid-template-columns:44px 62px minmax(0,1fr)}
.races li:hover{background:rgba(235,232,225,.04)}
.races .yr{font:700 13px/1.5 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums}
.races .pos{font:700 13px/1.5 var(--mono);color:var(--rare)}
.races .who{font:600 17px/1.2 var(--cond);color:var(--ink)}
.races .where{display:block;font:500 15px/1.25 var(--cond);color:var(--ink2)}
.empty{padding:20px;font-size:14px;line-height:1.45;color:var(--ink2)}

.foot{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:14px;color:var(--ink3)}

@media (max-width:1239px){
  .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto}
  .seasons{grid-column:1/-1}
}
@media (max-width:1100px){
  .stage,.stage.matrix{grid-template-columns:1fr}
  .panel{position:static;max-height:none}
}
@media (max-width:700px){
  .grids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .gridcol{flex:0 0 84%;scroll-snap-align:center}
  .stage.tracks .panel:not(.open){grid-template-columns:1fr}
  .stage.tracks .panel:not(.open) .panel-head + .panel-head{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .page{padding:24px 16px 24px}
  .top{flex-direction:column;gap:18px}
  .controls{margin-top:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:16px}
  .turnfield{grid-column:1/-1}
  .reset{grid-column:1/-1;margin-top:0;width:100%}

  .panel .races{max-height:none}
}
@media (max-width:1100px){
  /* a selected slot opens as a sheet over the bottom of the screen */
  .panel.open{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:10;max-height:58vh;border-radius:10px 10px 0 0;
    border-width:1px 0 0;box-shadow:0 -18px 40px rgba(0,0,0,.55);animation:rise .28s var(--ease)}
  .panel.open .races{overflow-y:auto}
  body.sheet .foot{padding-bottom:58vh}
}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}