/* The one nav, the same on every page: edgefinder/site.py _nav() writes it, the board's page included ({{NAV}}),
   and web/nav.js runs it. A floating glass capsule, night over the arena and white once the page turns: the logo,
   the links beside it, then Sign in, the sport and state bubbles (web/context.js) and Join on the right. Only the
   tokens site.css and board.css both define. Cyan marks the logo and focus, nothing else. */
.nav{position:fixed;top:16px;left:var(--gut);right:var(--gut);z-index:50;height:60px;border-radius:var(--r-pane);
  display:flex;align-items:center;gap:24px;padding:0 10px 0 22px;color:var(--ink-d);
  --nl:var(--line-d);--nf:rgba(255,255,255,.04);--nh:rgba(255,255,255,.09);
  background:rgba(8,12,22,.42);border:1px solid var(--line-d);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  transition:background .4s var(--ease-ui),color .4s var(--ease-ui),border-color .4s var(--ease-ui)}
.nav.day{background:rgba(255,255,255,.72);color:var(--ink);border-color:var(--line);--nl:var(--line-2);--nf:rgba(255,255,255,.7);--nh:#fff}
.nav.deep{background:rgba(8,12,22,.72)}
.nav .logo{display:inline-flex;align-items:center;gap:9px;flex:none;text-decoration:none;font:500 18px/1 var(--sans);letter-spacing:-.02em;color:inherit}
.nav .logo svg{width:21px;height:21px}.nav .logo circle{fill:var(--cyan)}.nav.day .logo circle{fill:var(--cyan-day)}
.nav .logo b{font-weight:700}.nav .logo span{font-weight:400;margin-left:-9px}
.nav .links{display:flex;gap:26px;margin:0 auto 0 10px;font:400 14px/1.4 var(--sans)}
.nav .links a{text-decoration:none;opacity:.72;transition:opacity .2s}.nav .links a:hover{opacity:1}
.nav .links a[aria-current=page]{opacity:1}
.nav .menu{display:none;flex:none;width:40px;height:40px;padding:0;border-radius:999px;border:1px solid var(--nl);background:transparent;color:inherit;align-items:center;justify-content:center;cursor:pointer}
.nav .menu svg{width:18px;height:18px}
.nav .signin{font:400 14px/1 var(--sans);text-decoration:none;opacity:.72;white-space:nowrap;transition:opacity .2s}.nav .signin:hover{opacity:1}
.nav .pill.primary{display:inline-flex;align-items:center;justify-content:center;flex:none;height:40px;padding:0 18px;border-radius:999px;border:1px solid transparent;
  font:500 14px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;background:var(--ink-d);color:var(--night)}
.nav.day .pill.primary{background:var(--ink);color:#fff}

/* the sport and state bubbles and the panel they open (web/context.js): the board's old nav buttons, glass over the
   arena, white once the nav turns light */
.nav .ctx{display:flex;gap:8px;align-items:center;flex:none}
.ctxb{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--nl);background:var(--nf);
  color:inherit;font:500 14px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .2s var(--ease-ui)}
.ctxb:hover{background:var(--nh)}
.ctxb svg{width:16px;height:16px;flex:none}
.ctxb .dot{width:7px;height:7px;border-radius:50%;background:var(--pos-d);flex:none}
.ctxb .sep{opacity:.5}
.ctxb.one{display:none}

/* the panel: under the capsule at its right edge, night over the arena, white once the nav turns light */
.ctxpop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:min(360px,calc(100vw - 2 * var(--gut)));padding:18px 18px 16px;
  border-radius:var(--r-pane);background:#0B1120;border:1px solid var(--line-d);color:var(--ink-d);font:400 14px/1.5 var(--sans)}
.ctxpop[hidden]{display:none}
.nav.day .ctxpop{background:#fff;border-color:var(--line);color:var(--ink)}
.ctxhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ctxhead b{font-weight:600;font-size:15px;letter-spacing:-.01em}
.ctxx{width:32px;height:32px;padding:0;border-radius:999px;border:1px solid var(--nl);background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ctxx svg{width:14px;height:14px}
.ctxsports{border:0;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ctxsports legend,.ctxfield>span{display:block;margin-bottom:8px;font-size:12.5px;opacity:.72}
.ctxsport{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--nl);font-size:13.5px;cursor:pointer}
.ctxsport input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ctxsport:has(input:checked){background:var(--ink-d);color:var(--night);border-color:var(--ink-d)}
.nav.day .ctxsport:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.ctxsport:has(input:focus-visible){outline:2px solid currentColor;outline-offset:2px}
.ctxsport.soon{cursor:default;opacity:.55}
.ctxsport.soon span{font-size:11px}
.ctxfield{display:block}
.ctxfield select{width:100%;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--nl);background:transparent;color:inherit;font:500 14px/1 var(--sans)}
.ctxfield option,.ctxfield optgroup{color:#0D1320}
.ctxfine{margin:12px 0 0;font-size:12.5px;line-height:1.5;opacity:.72}

/* one set of breakpoints for every page, measured to fit from 320px to 1440px */
@media (max-width:1020px){.ctxb.sp,.ctxb.st{display:none}.ctxb.one{display:inline-flex;padding:0 13px;gap:6px}}
@media (max-width:900px){
  .nav{gap:10px;padding:0 8px 0 18px}.nav .links{display:none}.nav .menu{display:inline-flex;margin-left:auto}
  .nav.open .links{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;padding:18px 22px;gap:18px;font-size:16px;border-radius:var(--r-pane);background:#0B1120;border:1px solid var(--line-d);color:var(--ink-d)}
  .nav.day.open .links{background:#fff;border-color:var(--line);color:var(--ink)}}
@media (max-width:480px){.nav .logo b,.nav .logo span{display:none}.nav .logo{gap:0}}
@media (max-width:400px){.nav{gap:6px;padding:0 6px 0 14px}.nav .pill.primary{padding:0 14px}.ctxb.one{padding:0 11px;gap:5px}}
@media (max-width:360px){.nav .signin{display:none}}
@media (prefers-reduced-transparency:reduce){.ctxb{background:#0B1120}.nav.day .ctxb{background:#fff}.nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0B1120}.nav.day{background:#fff}}