/* 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 (Sign out once signed in), the sport and state bubbles (web/context.js) and Join
   on the right (gone for a member). 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;justify-content:center;gap:9px;flex:none;min-width:24px;min-height:24px;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;white-space:nowrap;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{padding:5px 0;font:400 14px/1 var(--sans);text-decoration:none;opacity:.72;white-space:nowrap;transition:opacity .2s}.nav .signin:hover{opacity:1}
/* Skip to content: the first thing a keyboard reaches on every page, out of sight until it has focus */
.skip{position:fixed;top:12px;left:var(--gut);z-index:100;padding:10px 16px;border-radius:999px;background:var(--ink-d);color:var(--night);
  font:500 14px/1 var(--sans);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}.skip:focus,.skip:focus-visible{border-radius:999px}
/* Sign out (web/nav.js shows it once the members check finds someone signed in) looks like Sign in */
.nav .signout{display:flex;flex:none;margin:0}
.nav .signout button{padding:5px 0;border:0;background:none;color:inherit;font:400 14px/1 var(--sans);opacity:.72;white-space:nowrap;cursor:pointer;transition:opacity .2s}
.nav .signout button:hover{opacity:1}
.nav .signin[hidden],.nav .signout[hidden],.nav .pill.primary[hidden]{display:none}
.nav[data-account=member] .signin,.nav[data-account=signed-in] .signin{display:none}   /* signed in: never Sign in */
.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}

/* the instant search (web/search.js): a round button beside the links, and a panel under the whole capsule */
.nav .srchb{display:inline-flex;flex:none;width:40px;height:40px;padding:0;border-radius:999px;border:1px solid var(--nl);background:var(--nf);color:inherit;align-items:center;justify-content:center;cursor:pointer;transition:background .2s var(--ease-ui)}
.nav .srchb:hover{background:var(--nh)}.nav .srchb svg{width:17px;height:17px}
.srchpop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;max-height:min(72vh,680px);overflow:auto;padding:14px 16px 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)}
.srchpop[hidden]{display:none}
.nav.day .srchpop{background:#fff;border-color:var(--line);color:var(--ink)}
.srchin{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--nl);background:var(--nf)}
.srchin svg{width:17px;height:17px;flex:none;opacity:.6}
.srchin input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:inherit;font:500 16px/1 var(--sans);outline:none}
.srchin input::placeholder{color:inherit;opacity:.5}
.srchin input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.srchpop .note,.srchpop .fine,.srchpop .meta{margin:10px 2px 0;font-size:13px;line-height:1.5;opacity:.72;color:inherit}
.srchres{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.srchgrp{padding:12px 12px 4px;font:600 12px/1 var(--sans);opacity:.6}   /* Players, Teams, Tonight's lines (web/search.js) */
.srchgrp:first-child{padding-top:6px}
.srchres button{display:grid;gap:2px;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.srchres button b{font-weight:600;font-size:15px;letter-spacing:-.01em}.srchres button span{font-size:12.5px;opacity:.72}
.srchres button:hover,.srchres button[aria-selected=true]{background:var(--nh)}
.srchcard h3{margin:12px 2px 0;font:600 18px/1.3 var(--sans);letter-spacing:-.02em;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.srchcard h3 span{font-weight:500;font-size:15px;opacity:.8}
.srchback{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--nl);background:transparent;color:inherit;font:500 13px/1 var(--sans);cursor:pointer}
.srchcard .sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.srchcard h4{display:flex;justify-content:space-between;margin:0 0 6px;font:600 14px/1.3 var(--sans)}
.srchcard h4 span{font-weight:400;opacity:.72}
/* line shopping: the card leads with a price better than fair (green means value only), and each side names the
   worst price still worth taking */
.srchcard .lead{margin:10px 2px 0;font:600 15px/1.4 var(--sans);letter-spacing:-.01em;color:var(--pos-d)}
.nav.day .srchcard .lead{color:var(--pos)}
.srchcard .worth{margin:0 2px 8px;font-size:12.5px;line-height:1.45;opacity:.8}
/* the board page's own sheet loads after this one and styles .side and .fine for the bet view: the card keeps its own */
.srchcard .side{display:block}
.srchcard ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.srchcard li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid var(--nl)}
.srchcard li .bk{display:grid;min-width:0}.srchcard li .bk b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srchcard li .bk small{font-size:11.5px;opacity:.7}
.srchcard li .bk small.stale{opacity:1;color:var(--warn-d)}.nav.day .srchcard li .bk small.stale{color:var(--warn)}   /* a stale quote */
.srchcard li .pr{display:grid;justify-items:end;gap:3px;font:600 15px/1 var(--num);font-stretch:80%}
.srchcard li .pr small{font:500 11px/1 var(--sans);opacity:.7;white-space:nowrap}   /* where it opened today */
.srchcard li .cost{font:600 13px/1 var(--num);font-stretch:85%;opacity:.8}
.srchcard li .cost.better{color:var(--pos-d);opacity:1}.nav.day .srchcard li .cost.better{color:var(--pos)}
.srchcard li .bet{font:500 12.5px/1 var(--sans);padding:7px 10px;border-radius:999px;border:1px solid var(--nl);text-decoration:none;color:inherit}
.srchcard li.held,.srchcard li.none{grid-template-columns:1fr;font-size:13px}
.srchcard li.held a{color:inherit}
/* the usual stake (web/stake.js): a small field just above the books it ranks, its one sentence under it */
.srchcard .stake{display:flex;align-items:center;gap:10px;margin:12px 2px 0;font:500 13px/1.3 var(--sans)}
.srchcard .stake input{width:112px;min-width:0;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--nl);background:var(--nf);color:inherit;font:600 16px/1 var(--num);font-stretch:85%}
.srchcard .stake input::placeholder{color:inherit;opacity:.45}
.srchcard .stakec{margin:6px 2px 0;font-size:12.5px;line-height:1.45;opacity:.72}

/* one set of breakpoints for every page, measured to fit from 320px to 1440px (tests/test_responsive.py). The links
   never wrap; the two bubbles need 1130px at the longest state name (District of Columbia) beside Sign out and Join,
   and the link row 955px beside the one chip ("NBA · State"), so the chip takes over at 1140px and the menu at
   980px. */
@media (max-width:1140px){.ctxb.sp,.ctxb.st{display:none}.ctxb.one{display:inline-flex;padding:0 13px;gap:6px}}
@media (max-width:980px){
  .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:640px){.srchcard .sides{grid-template-columns:1fr}}
@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}
  .nav .srchb,.nav .menu{width:36px;height:36px}}
@media (max-width:360px){.nav .signin,.nav[data-account=signed-in] .pill.primary{display:none}}   /* Sign out stays; Pricing is in the menu */
@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}}
/* "Add to parlay" on a price card (web/parlay.js's tray): one capsule per side a book prices */
.srchpadds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.srchpadd{min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--nl);background:var(--nf);color:inherit;font:500 13.5px/1.2 var(--sans);cursor:pointer;text-align:left}
.srchpadd:hover{background:var(--nh)}
/* The parlay tray (web/parlay.js; markup from parlay-core.js trayHtml): the Overcharge Meter at the bottom of every
   page once a leg is added. A white capsule over the page, hairlines, numbers in Archivo, the overcharge in amber when
   the book pays under fair and in green when it pays more; night follows the board's toggle. Under the bet view, the
   sheets and the modal (z-index below theirs), over the board's status bar. */
.ptray{--t-s:#FFFFFF;--t-t1:var(--ink,#0D1320);--t-t2:var(--ink-2,#4B566B);--t-ln:var(--line-2,rgba(13,19,32,.13));--t-hi:var(--warn,#9A6100);--t-ok:var(--pos,#0A7A4E);
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:55;width:min(880px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;
  background:var(--t-s);color:var(--t-t1);border:1px solid var(--t-ln);border-radius:20px;box-shadow:0 30px 60px -30px rgba(13,19,32,.45);
  font:400 14px/1.4 var(--sans,ui-sans-serif,system-ui,sans-serif);font-feature-settings:"tnum" 1;text-align:left;-webkit-font-smoothing:antialiased}
:root[data-theme="dark"] .ptray{--t-s:#0D1321;--t-t1:#EEF1F6;--t-t2:#9BA5B7;--t-ln:rgba(255,255,255,.12);--t-hi:#F0B44C;--t-ok:#3DD68C}
.ptray[hidden]{display:none}
.ptray *{box-sizing:border-box}
.pt-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:8px 8px 8px 8px;min-height:56px}
.pt-toggle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--t-ln);background:transparent;color:inherit;font:inherit;cursor:pointer;flex:none}
.pt-toggle b{font-weight:600}
.pt-toggle span{color:var(--t-t2)}
.ptray .tag.sg{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:color-mix(in srgb,var(--t-hi) 14%,transparent);color:var(--t-hi);font:500 12px/1 var(--sans,inherit)}
.pt-nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;flex:1 1 220px;min-width:0;color:var(--t-t2)}
.pt-n{white-space:nowrap}
.pt-n b{font:600 16px/1 var(--num,inherit);color:var(--t-t1);margin-left:4px}
.pt-over b{color:var(--t-hi)}
.pt-over.good b{color:var(--t-ok)}
.pt-lab{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:var(--t-t1);color:var(--t-s);text-decoration:none;font-weight:500;flex:none;margin-left:auto}
.pt-body{padding:4px 16px 14px;border-top:1px solid var(--t-ln)}
.pt-legs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.pt-legs li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px}
.pt-leg{font-weight:500;min-width:0;overflow-wrap:anywhere}
.pt-at{color:var(--t-t2);white-space:nowrap}
.pt-x,.pt-clear{border:0;background:none;padding:0;min-height:24px;color:var(--t-t2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.pt-x{margin-left:auto}
.pt-note{margin:10px 0 0;color:var(--t-t2);font-size:13px}
.pt-clear{margin-top:10px}
.pt-toggle:focus-visible,.pt-lab:focus-visible,.pt-x:focus-visible,.pt-clear:focus-visible{outline:2px solid var(--cyan-day,#007A96);outline-offset:2px}
body.has-ptray{padding-bottom:88px}
body.has-ptray .toast{bottom:96px}
@media (max-width:600px){.pt-bar{padding:8px}.pt-nums{order:3;flex-basis:100%;padding:0 6px 4px}.pt-toggle{padding:0 12px}.pt-lab{padding:0 14px}
  body.has-ptray{padding-bottom:120px}body.has-ptray .toast{bottom:128px}}