/* The word race (/lab/words/race): the field on the left, the column on the right. Shell tokens only. */
.race-page{--display:"Outfit",var(--ui);--serif:"Lab Serif",Georgia,serif}
/* The document never scrolls: the field fills the left, the column scrolls inside itself (the bench's rule). */
html:has(body.race-page){height:100%;overflow:hidden}
body.race-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.race-page>.pb{flex:none}
.race{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,28vw,400px);align-items:stretch}
.race-field{position:relative;height:100%;min-height:0;overflow:hidden;background:var(--field,#050506);border-right:1px solid var(--line)}
.race-field canvas{display:block;width:100%;height:100%}
.race-legend{position:absolute;left:12px;bottom:10px;display:flex;gap:14px;margin:0;font-size:13px;color:var(--ink3);pointer-events:none}
.race-key::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:0}
.race-key-jev::before{background:var(--accent)}
.race-key-you::before{background:var(--accent2)}
.race-key-target::before{background:none;border:1.5px solid var(--ink)}
.race-side{min-width:0;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;padding:18px 24px 48px;background:var(--surf)}
.race-head{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.race-crumb{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 13px/16px var(--display);letter-spacing:.1em;font-variant-caps:all-small-caps;color:var(--ink3)}
.race-crumb a{color:var(--ink3);text-decoration:none}
.race-crumb a:hover{color:var(--ink)}
.race-crumb .race-all{margin-left:auto}
.race-head h1{margin:0;font:500 26px/1.15 var(--display);letter-spacing:-.005em;color:var(--ink)}
.race-says{margin:8px 0 0;font:400 16px/1.45 var(--serif);color:var(--ink2)}
.race-guide{margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--ink2)}
.race-setup{display:grid;gap:10px;margin:0 0 12px}
.race-label{position:relative;display:grid;gap:4px;font-size:13px;color:var(--ink3)}
.race-pick{position:absolute;left:0;right:0;top:100%;z-index:5;margin:4px 0 0;padding:4px;list-style:none;border:1px solid var(--line2);border-radius:6px;background:var(--bg);max-height:280px;overflow:auto}
.race-pick li{display:block;padding:6px 8px;border-radius:4px;font-size:14px;color:var(--ink);cursor:pointer}
.race-pick li small{display:block;font-size:12px;line-height:1.35;color:var(--ink3)}
.race-pick li:hover,.race-pick li[aria-selected="true"]{background:var(--surf2)}
.race-label input{width:100%;padding:7px 9px;border:1px solid var(--line2);border-radius:6px;background:var(--bg);font-size:15px;color:var(--ink)}
.race-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.race-switch{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--ink2);cursor:pointer}
.race-par{font-size:14px;color:var(--ink3)}
.race-status{min-height:20px;margin:0 0 8px;font-size:14px;color:var(--ink3)}
.race-lane{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.race-lane h2{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font-size:15px}
.race-clock{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--ink3)}
.race-at{margin:0 0 8px;font-size:14px;color:var(--ink2)}
.race-links{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.race-links button{max-width:100%;padding:6px 10px;border:1px solid var(--line2);border-radius:6px;background:none;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.race-links button:hover{border-color:var(--accent);color:var(--accent)}
.race-links button.race-goal{border-color:var(--accent2);color:var(--accent2)}
.race-trail{margin:0;padding:0;list-style:none;counter-reset:hop}
.race-hop{display:grid;grid-template-columns:22px minmax(0,1fr) 72px;grid-template-rows:auto auto;column-gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.race-hop::before{counter-increment:hop;content:counter(hop);grid-row:1/3;font-family:var(--mono);font-size:12px;color:var(--ink3);padding-top:2px}
.race-hop-name{color:var(--ink)}
.race-hop small{display:block;grid-column:2;font-size:13px;line-height:1.4;color:var(--ink3)}
.race-hop-bar{grid-column:3;grid-row:1;height:4px;margin-top:8px;border-radius:2px;background:var(--line2);overflow:hidden}
.race-hop-bar i{display:block;height:100%;background:var(--accent)}
.race-hop-ms{grid-column:3;grid-row:2;font-family:var(--mono);font-size:12px;color:var(--ink3);text-align:right}
.race-hop.is-dim .race-hop-name{color:var(--ink3)}
.race-hop.is-dim .race-hop-bar i{opacity:.45}
.race-hop.is-you .race-hop-bar{display:none}
.race-sum{margin:10px 0 0;font-size:14px;color:var(--ink2)}
.race-finish{margin:4px 0 8px;font-size:16px;line-height:1.5;color:var(--ink)}
.race-finish:empty{display:none}
@media (max-width:899px){
  html:has(body.race-page){height:auto;overflow:auto}
  body.race-page{display:block;height:auto;overflow:visible}
  .race{display:block}
  .race-field{height:auto;aspect-ratio:1/1;border-right:0;border-bottom:1px solid var(--line)}
  .race-side{height:auto;overflow:visible;padding:20px 16px 40px}
}
@media (prefers-color-scheme:light){
  :root{--bg:#f7f7f5;--surf:#ffffff;--surf2:#ededea;--line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.2);--ink:#141414;--ink2:#3a3a3a;--ink3:#6f6f6f;--accent:#0f9a6c;--accent2:#b97a17;--field:#fbfbfa;color-scheme:light;
    --pb-ink:rgba(0,0,0,.9);--pb-dim:rgba(0,0,0,.45);--pb-fill:rgba(0,0,0,.05)}
  .lab-btn-main:hover{background:#000}
}
/* Second pass: hint, readout, the weighed words, the about block. */
.race-hint{position:absolute;left:0;right:0;top:44%;margin:0;padding:0 24px;text-align:center;font-size:14px;color:var(--ink3);pointer-events:none}
.race-readout{margin:4px 0 10px}
.race-readout-line{margin:0 0 6px;font-family:var(--mono);font-size:13px;color:var(--ink2)}
.race-track{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:4px}
.race-track i{display:block;background:var(--line2);border-radius:1px}
.race-track i.is-jev{background:var(--accent)}
.race-track i.is-dim{background:var(--accent);opacity:.4}
.race-hop{grid-template-rows:auto auto auto}
.race-hop::before{grid-row:1/4}
.race-why{grid-column:2/4;grid-row:3;margin:4px 0 0;font-size:13px}
.race-why summary{color:var(--ink3);cursor:pointer;list-style:none}
.race-why summary::-webkit-details-marker{display:none}
.race-why summary::before{content:"+ ";font-family:var(--mono)}
.race-why[open] summary::before{content:"– "}
.race-why ul{margin:6px 0 0;padding:0;list-style:none}
.race-why li{display:grid;grid-template-columns:minmax(0,1fr) 72px 40px;gap:8px;align-items:center;padding:2px 0;color:var(--ink3)}
.race-why li.is-pick{color:var(--ink)}
.race-why b{display:block;height:3px;background:var(--line2);border-radius:2px;overflow:hidden}
.race-why b i{display:block;height:100%;background:var(--ink3)}
.race-why li.is-pick b i{background:var(--accent)}
.race-why small{font-family:var(--mono);font-size:11px;text-align:right}
.race-links button kbd{margin-right:6px;font-size:11px;color:var(--ink3)}
.race-about{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.race-about h2{margin:20px 0 6px;font-size:15px}
.race-about p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink2)}
.race-about a{color:var(--accent);text-decoration:none}
.race-about a:hover{text-decoration:underline}
.race-stats{margin:0 0 10px;padding:0}
.race-stats div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.race-stats dt{color:var(--ink3)}
.race-stats dd{margin:0;color:var(--ink);text-align:right}