/* RaceAlpha — the professional gambler's desk.
   One dark shell for the card, the ledger and the book: deep navy ground, slate panels, white figures, one green
   that means action, selection and profit, amber for anything live, red only for money going the wrong way.
   Numbers are tabular everywhere. Built to sit beside a bookmaker's app and read at the same speed. */

:root{
  --bg:#0b1620; --bg-1:#0e1c28; --panel:#152838; --panel-2:#1b3346; --panel-3:#224056;
  --line:#223a4e; --line-2:#2f4b64;
  --ink:#ffffff; --ink-2:#d6e0ea; --muted:#9fb2c6; --faint:#6e8499;
  --act:#1fe07a; --act-ink:#06180d; --act-hover:#4beb95; --act-soft:rgba(31,224,122,.14);
  --blue:#3f93f7; --blue-soft:rgba(63,147,247,.16);
  --up:#2fdc83; --down:#ff6b6b; --win:#1fe07a; --win-soft:rgba(31,224,122,.12);
  --live:#ffb636; --live-ink:#1a1200;
  /* finishing places: 1st is the win green, 2nd silver, 3rd bronze; bronze is kept well off the live amber */
  --silver:#c5d0dc; --bronze:#cd8a4f; --podium-ink:#0b1620;
  /* names the older markup still speaks */
  --mark:var(--act); --mark-ink:var(--act-ink); --ground:var(--panel); --band:var(--panel-2); --band-2:var(--panel-3);
  --r:6px; --r-lg:10px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --font:"Red Hat Text",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --display:"Red Hat Display","Red Hat Text",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --tabbar-h:0px;
}
*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--act);outline-offset:2px;border-radius:4px}
[role=button]{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;padding-bottom:var(--tabbar-h)}
a{color:inherit}
button{font:inherit;color:inherit}
b,strong{font-weight:650}
h1,h2,.hero h1,.play h2,.empty h2,.meeting h3,.home section h2,.acct h2,.plan h3,.plan .price,.rec-line b,.ledger .stat b,.play .stat b{font-family:var(--display)}
::selection{background:var(--act);color:var(--act-ink)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px 96px}
.hidden{display:none!important}
.hide-sm{}
@media (max-width:640px){.hide-sm{display:none!important}}

/* ---------- header: the shell's top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--bg-1);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:18px}
.newbar{background:var(--panel);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2);text-align:center}.newbar-in{max-width:1080px;margin:0 auto;padding:6px 24px;line-height:1.45}.newbar a{color:var(--act);font-weight:600;text-decoration:none}.newbar a:hover{text-decoration:underline}
.brand{font-weight:750;letter-spacing:-.03em;font-size:17px;text-decoration:none;color:var(--ink);display:flex;align-items:center}
.brand-img{height:30px;width:auto;display:block}
.foot-mark{height:14px;width:auto;opacity:.9;margin-right:6px}
.brand span{color:inherit}
.top .date{color:var(--muted);font-size:13px}
.top nav{display:flex;gap:2px}
.top nav a,.top a.nav{text-decoration:none;color:var(--muted);font-weight:600;font-size:13.5px;padding:8px 12px;border-radius:var(--r);transition:background .12s,color .12s}
.top nav a.on{color:var(--ink);background:var(--panel-2)}
.top a.nav:hover,.top nav a:hover{color:var(--ink);background:var(--panel)}
.top nav a.menu-only{display:none}
.spacer{flex:1}
.who{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;padding:4px 12px 4px 4px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel)}
.who:hover,.who.on{border-color:var(--muted)}
.who .avatar{width:26px;height:26px;border-radius:50%;background:var(--act);color:var(--act-ink);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.who.signin{padding:8px 16px;border-color:var(--act);background:var(--act);color:var(--act-ink);font-weight:700}
/* the account menu: who is signed in, Account, Log out */
.who-wrap{position:relative;display:flex}
button.who{cursor:pointer;font-family:inherit;line-height:1.2}
.who-caret{width:10px;height:10px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.who[aria-expanded="true"]{border-color:var(--muted)} .who[aria-expanded="true"] .who-caret{transform:rotate(180deg)}
.who-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:208px;padding:6px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.who-menu[hidden]{display:none}
.who-id{padding:8px 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.who-id b{display:block;margin-top:1px;font-size:13.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.who-menu a,.who-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--r);background:none;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.who-menu a:hover,.who-menu button:hover,.who-menu a:focus-visible,.who-menu button:focus-visible{background:var(--panel-3);color:var(--ink);outline:none}
.who-menu svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.who-menu form{margin:0}
.who-menu form.out{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.top nav form.menu-out{display:none;margin:0}
.who.signin:hover{background:var(--act-hover);border-color:var(--act-hover)}
.menu-btn{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:16px;height:2px;background:var(--ink);border-radius:0;transition:transform .15s,opacity .15s}
.top.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)} .top.open .menu-btn span:nth-child(2){opacity:0} .top.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mock{font-size:11px;color:var(--faint)}
.viewas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-top:14px;border:1px dashed var(--line-2);border-radius:var(--r);font-size:12px;color:var(--muted)}
.viewas .lbl{font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.viewas .seg a{text-decoration:none;color:var(--muted);padding:5px 10px;border-radius:4px;font-weight:600}
.viewas .seg a.on{background:var(--act);color:var(--act-ink)}
.viewas .reset{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.viewas .note{flex-basis:100%;color:var(--faint)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);padding:2px;font-size:12px;font-weight:600;background:var(--panel)}
.seg button{border:0;background:transparent;padding:5px 10px;border-radius:4px;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--act);color:var(--act-ink)}

/* mobile tab bar */
.tabbar{display:none}
@media (max-width:760px){
  :root{--tabbar-h:60px}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--tabbar-h);background:var(--bg-1);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.02em}
  .tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.on{color:var(--act)}
}

/* ---------- day + meeting strips ---------- */
.days{display:flex;gap:4px;overflow-x:auto;padding:14px 0 10px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.days a{flex:0 0 auto;text-decoration:none;font-size:13px;font-weight:600;color:var(--muted);padding:7px 12px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.days a:hover{color:var(--ink);border-color:var(--line-2)}
.days a.on{color:var(--ink);border-color:var(--act);background:var(--panel-2)}
.days a small{display:block;font-weight:500;font-size:11px;color:var(--faint);margin-top:1px}
.days a .w{color:var(--up)} .days a .l{color:var(--down)}
/* Next to jump (/today): the race or two that just jumped, then every race to come, each with a countdown. Amber once a
   race is close and while it is running; a hairline once it has run. Swipes on a phone, arrows on a desk. */
.ntj{display:flex;align-items:stretch;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.ntj .eyebrow{flex:0 0 112px;display:flex;align-items:center;padding:9px 12px 9px 14px;border-right:1px solid var(--line);line-height:1.25;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.ntj-s{position:relative;flex:1;min-width:0;display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.ntj-s::-webkit-scrollbar{display:none}
.ntj-i{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;scroll-snap-align:start;white-space:nowrap;transition:background .12s}
.ntj-i:first-child{border-left:0}
.ntj-i:hover{background:var(--panel-2)}
.ntj-i:focus-visible{outline:2px solid var(--act);outline-offset:-2px;border-radius:0}
.ntj-i .rn{font-size:11.5px;font-weight:700;color:var(--ink);background:var(--panel-3);border-radius:4px;padding:2px 6px}
.ntj-i b{font-weight:650;max-width:132px;overflow:hidden;text-overflow:ellipsis}
.ntj-i .cd{font-size:11.5px;font-weight:700;min-width:52px;text-align:center;padding:2px 7px;border-radius:4px;background:var(--panel-3);color:var(--ink-2)}
.ntj-i .cd.near{background:transparent;color:var(--live);box-shadow:inset 0 0 0 1px var(--live)}
.ntj-i .cd.live{background:var(--live);color:var(--live-ink)}
.ntj-i .cd.ran,.ntj-i .cd.gone{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line-2)}
.ntj-i.past b,.ntj-i.past .rn{color:var(--muted)}
.ntj-i.on{background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--act)}
.ntj-note{align-self:center;padding:0 14px;color:var(--muted);font-size:12.5px;white-space:nowrap}
.ntj-arr{display:flex;flex:0 0 auto;border-left:1px solid var(--line)}
.ntj-arr button{width:34px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.ntj-arr button + button{border-left:1px solid var(--line)}
.ntj-arr button:hover:not(:disabled){background:var(--panel-2);color:var(--ink)}
.ntj-arr button:disabled{color:var(--faint);opacity:.45;cursor:default}
/* phones: swipe, no arrows; each race stacks (number and countdown over the track) so three fit across */
@media (max-width:640px){ .ntj .eyebrow{flex-basis:64px;font-size:10px;padding-left:12px} .ntj-arr{display:none}
  .ntj-i{display:grid;grid-template-columns:auto auto;justify-content:start;align-content:center;gap:4px 6px;padding:8px 11px;text-align:left}
  .ntj-i .rn{grid-area:1/1} .ntj-i .cd{grid-area:1/2;min-width:0} .ntj-i b{grid-area:2/1/3/3;max-width:92px;font-size:12.5px} }
.cardnav{position:sticky;top:var(--top-h,57px);z-index:15;background:var(--bg);border-bottom:1px solid var(--line);margin:14px 0 10px;padding:0 0 6px}
.today{display:flex;gap:6px;overflow-x:auto;padding:8px 0 6px;scrollbar-width:none}
.today::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:8px 13px;border-radius:var(--r);border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;background:var(--panel-2);transition:border-color .12s,background .12s}
.chip b{font-weight:700;letter-spacing:-.005em}
.chip:hover{border-color:var(--muted)}
.chip.on{background:var(--act);color:var(--act-ink);border-color:var(--act)}
.chip small{font-weight:500;color:var(--muted);margin-left:6px;font-size:11.5px}
.chip.on small{color:inherit;opacity:.75}
/* today: the next race jumps within 15 minutes (amber is live), or every race at the meeting has run */
.chip small i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:5px;vertical-align:1px}
.chip.on small i{background:var(--act-ink)}
.chip.soon small{color:var(--live);font-weight:650}
.chip.on.soon small{color:inherit}
.chip.done{background:var(--bg-1);border-style:dashed;border-color:var(--line-2);color:var(--muted)}
.chip.done small{color:var(--faint)}
.chip.done:hover{color:var(--ink-2);border-color:var(--muted)}
.chip.on.done{background:var(--act);border-style:solid;border-color:var(--act);color:var(--act-ink)}
.chip.on.done small{color:inherit}
/* the meeting was abandoned (whole or part-way): said in red so it does not read as an ordinary finished card */
.chip.ab small{color:var(--down);font-weight:650}
.chip.on.ab small{color:inherit}

/* the Today layout on a desk: meetings in a rail, the card beside it */
@media (min-width:1024px){
  .wrap.today-grid{display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:28px;align-items:start}
  .wrap.today-grid > *{grid-column:2;min-width:0}
  .wrap.today-grid > .cardnav{grid-column:1;grid-row:1 / span 12;position:sticky;top:calc(var(--top-h,57px) + 14px);margin:14px 0 0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:10px 10px 8px;max-height:calc(100vh - var(--top-h,57px) - 28px);overflow:auto}
  .wrap.today-grid .today{flex-direction:column;gap:4px;padding:0 0 8px;overflow:visible}
  .wrap.today-grid .chip{display:flex;justify-content:space-between;align-items:baseline;gap:8px;white-space:normal;text-align:left;background:transparent;border-color:transparent;padding:9px 10px;font-size:13.5px}
  .wrap.today-grid .chip:hover{background:var(--panel-2)}
  .wrap.today-grid .chip.done{background:transparent;border-color:transparent;color:var(--faint)}
  .wrap.today-grid .chip.done:hover{background:var(--panel-2);color:var(--ink-2)}
  .wrap.today-grid .chip.on.done{background:var(--act);color:var(--act-ink)}
  .wrap.today-grid .chip.on{background:var(--act);color:var(--act-ink)}
  .wrap.today-grid .chip small{margin:0;font-size:11px;white-space:nowrap}
  .wrap.today-grid .racenav{flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
  .wrap.today-grid .controls{flex-direction:column;align-items:stretch;gap:8px;border-top:1px solid var(--line);padding-top:10px;overflow:visible}
  .wrap.today-grid .ctl{justify-content:space-between}
  .wrap.today-grid .ctl-note{display:none}
}

/* ---------- the play (free visitors' teaser) ---------- */
.play{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-lg);padding:24px 24px 22px;margin-top:16px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.play .eyebrow{order:2;font-size:13px;color:var(--muted);margin-top:6px;letter-spacing:0;text-transform:none;font-weight:500}
.play .eyebrow::before{content:"";display:inline-block;width:10px;height:10px;background:var(--act);border-radius:50%;margin-right:8px;vertical-align:-1px;box-shadow:0 0 0 3px var(--act-soft)}
.play h2{order:1;margin:0;font-size:30px;letter-spacing:-.03em;line-height:1.08;font-weight:700}
.play h2 span{color:var(--muted);font-weight:500;font-size:17px;letter-spacing:-.01em;display:block;margin-top:6px}
.play .sub{order:3;color:var(--ink-2);font-size:14px;margin-top:14px}
.play .row{order:4;display:flex;gap:28px;margin-top:20px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.play .stat b{display:block;font-size:22px;letter-spacing:-.02em;line-height:1;font-weight:650}
.play .stat span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.play .why{order:5;margin-top:20px;padding:0;background:transparent;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:62ch}
.play .why b{color:var(--ink)}
.play .rest{order:6;margin-top:12px;font-size:14px;color:var(--muted)}
.play .rest b{color:var(--ink)}
.play .outcome{order:7;margin-top:18px;display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r);font-weight:650;font-size:14px}
.play .outcome.won{background:var(--win);color:var(--act-ink)}
.play .outcome.lost{background:var(--panel-3);color:var(--ink)}
.play .outcome.placed{background:var(--panel-3);color:var(--ink);border:1px solid var(--line-2)}
.play > div[style]{order:8}
/* member plays box: the plays of the day, every day */
.plays-box{border:1px solid var(--line);border-radius:var(--r-lg);margin-top:14px;background:var(--panel);box-shadow:var(--shadow)}
.pb-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.pb-h b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pb-h b::before{content:"";display:inline-block;width:9px;height:9px;background:var(--act);border-radius:50%;margin-right:9px;vertical-align:1px;animation:ignite 1.2s ease-out 1}
@keyframes ignite{0%{box-shadow:0 0 0 0 rgba(31,224,122,.9)}100%{box-shadow:0 0 0 14px rgba(31,224,122,0)}}
.pb-h span{font-size:12px;color:var(--muted)} .pb-h em{font-style:normal;font-weight:650;color:var(--ink)}
.pb-r{display:grid;grid-template-columns:1fr auto auto auto;gap:4px 14px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);cursor:pointer;transition:background .12s}
.pb-r:first-of-type{border-top:0}
.pb-r:hover{background:var(--panel-2)}
.pb-m{min-width:0} .pb-m b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-m small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-m .pb-why{color:var(--faint)}
.pb-o{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;background:var(--panel-3);border-radius:4px;padding:5px 9px;min-width:54px;text-align:center}
.pb-res{font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:4px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.pb-res.live{background:var(--live);border-color:var(--live);color:var(--live-ink)} .pb-res.won{background:var(--win);border-color:var(--win);color:var(--act-ink)} .pb-res.lost{color:var(--muted)}
.pb-res.placed{background:var(--panel-3);border-color:var(--line-2);color:var(--ink)}
.pb-res.p2{background:var(--silver);border-color:var(--silver);color:var(--podium-ink)} .pb-res.p3{background:var(--bronze);border-color:var(--bronze);color:var(--podium-ink)}
.pb-pnl{font-weight:650;font-size:13px;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.pb-r.pb-locked{cursor:default;color:var(--muted)} .pb-r.pb-locked b{color:var(--ink-2)}
.pb-f{padding:8px 16px 10px;font-size:11.5px;color:var(--faint);border-top:1px solid var(--line)}
.pb-cta{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--line);background:var(--panel-2)}
.pb-cta > div{flex:1 1 320px;min-width:0}
.pb-cta b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pb-cta span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;max-width:62ch}
.pb-r.pb-locked .pb-o{color:var(--faint)}
/* a recovered play: picked before the race but added to the ledger after it (14 to 21 October 2026) */
.rec-tag{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--line-2);border-radius:3px;font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);vertical-align:2px}
.pb-f .attr{color:var(--faint)}
/* a day without a play is one line, not a panel */
.plays-box.pb-none .pb-h{border-bottom:0}
.plays-box.pb-none .pb-h b::before{background:var(--faint);animation:none}
@media (max-width:640px){.pb-r{grid-template-columns:1fr auto auto;padding:10px 14px}.pb-pnl{display:none}.pb-m .pb-why{display:none}.pb-h{padding:11px 14px}.pb-h span{flex-basis:100%}.pb-f{padding:8px 14px 10px}}
.play .cta{background:var(--act);color:var(--act-ink)}
.locked-name{filter:blur(7px);user-select:none;pointer-events:none}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--act);color:var(--act-ink);border:0;border-radius:var(--r);padding:11px 18px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:background .12s,transform .12s}
.cta:hover{background:var(--act-hover)}
.cta:active{transform:translateY(1px)}
.cta.ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line-2);font-weight:600}
.cta.ghost:hover{background:var(--panel-3);border-color:var(--muted)}
.empty{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;margin-top:16px;background:var(--panel)}
.empty h2{margin:0 0 6px;font-size:26px;letter-spacing:-.03em}
.empty p{margin:0;color:var(--muted);font-size:14px;max-width:60ch}
.demo{margin:12px 0 0;font-size:12px;color:var(--faint);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.demo label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}

/* ---------- recent plays ---------- */
.recent{margin-top:24px}
.recent .eyebrow{font-size:15px;font-weight:650;letter-spacing:-.01em;text-transform:none;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.recent .eyebrow a{color:var(--muted);text-decoration:none;font-weight:500;font-size:13px}
.recent .eyebrow a:hover{color:var(--ink)}
.strip{display:flex;gap:0;overflow-x:auto;padding:0 14px;scrollbar-width:none;border:1px solid var(--line);border-radius:var(--r-lg);margin-top:10px;background:var(--panel)}
.strip::-webkit-scrollbar{display:none}
.rp{flex:0 0 160px;display:flex;flex-direction:column;gap:2px;padding:12px 12px 12px 0;margin-right:12px;font-size:11.5px;border-right:1px solid var(--line)}
.rp:last-child{border-right:0;margin-right:0}
.rp b{display:block;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp .res{display:block;margin-top:auto;padding-top:8px;font-weight:650;font-size:11px;letter-spacing:.04em}
.rp .res span{display:inline-block;padding:3px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink-2)}
.rp.won .res span{background:var(--win);color:var(--act-ink);border-color:var(--win)}
.rp.placed .res span{background:var(--panel-3);color:var(--ink);border-color:var(--line-2)}
.rp.lost .res span{color:var(--muted)}
.rp.live .res span{background:var(--live);color:var(--live-ink);border-color:var(--live)}

/* ---------- meeting header, controls ---------- */
.meeting{display:flex;align-items:baseline;gap:12px;margin:26px 0 8px;flex-wrap:wrap}
.meeting h3{margin:0;font-size:22px;letter-spacing:-.03em;font-weight:700}
.meeting .meta{color:var(--muted);font-size:12px;white-space:normal}
.free-note{font-size:13px;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);padding:10px 14px;border-radius:var(--r);margin:8px 0 10px}
.free-note a{color:var(--act)}
.controls{display:flex;gap:14px;align-items:center;padding:4px 0 2px;font-size:12px;color:var(--muted);overflow:hidden}
.ctl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ctl span{font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ctl select{appearance:none;-webkit-appearance:none;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d6e0ea' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;font:inherit;font-size:12px;font-weight:650;color:var(--ink);padding:5px 24px 5px 8px;cursor:pointer}
.ctl select:focus-visible{outline:2px solid var(--act);outline-offset:1px}
.ctl-note{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.ctl-note{display:none}.controls{gap:10px}}

/* best edges */
.best{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px 8px;margin:8px 0 12px;background:var(--panel)}
.best .eyebrow{font-size:14px;font-weight:650;color:var(--ink);text-transform:none;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:10px}
.best .eyebrow span:last-child{color:var(--muted);font-weight:400;font-size:12px}
.best .strip{border:0;margin-top:2px;padding:8px 0 0;border-radius:0;background:transparent}
.be{flex:0 0 176px;padding:10px 14px 12px 0;margin-right:14px;border-right:1px solid var(--line);cursor:pointer}
.be:last-child{border-right:0}
.be:hover b{text-decoration:underline;text-underline-offset:3px}
.be b{display:block;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.be small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.be .e{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.be .e b{font-size:20px;letter-spacing:-.02em;color:var(--up)}
.be .e span{font-size:11px;color:var(--muted)}
.best .eyebrow em{font-style:normal;font-weight:650}
.be-res{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.be-res.won{background:var(--win);border-color:var(--win);color:var(--act-ink)} .be-res.placed{background:var(--panel-3);border-color:var(--line-2);color:var(--ink)} .be-res.p2{background:var(--silver);border-color:var(--silver);color:var(--podium-ink)} .be-res.p3{background:var(--bronze);border-color:var(--bronze);color:var(--podium-ink)} .be-res.lost{color:var(--muted)} .be-res.live{background:var(--panel-3);border-color:var(--panel-3);color:var(--muted)}
.be.w > b{color:var(--win)} .be.l .e b{color:var(--muted)}
.prov{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);margin-left:5px;vertical-align:middle}
.be-stake{display:inline-block;margin:8px 0 0 6px;font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;border:1px solid var(--up);color:var(--up);white-space:nowrap;text-transform:uppercase}
.pl .stake{color:var(--up);font-weight:650}
.be-more{text-decoration:none;color:inherit;display:block}
.be-more > b{color:var(--ink-2)}
.be-more .e b{color:var(--faint)}
.be-more .be-res{background:var(--act);border-color:var(--act);color:var(--act-ink)}

/* ---------- races: one panel a race, rows like a market ---------- */
.race{border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 10px;background:var(--panel);overflow:hidden}
.race.open{border-color:var(--line-2)}
.race-h{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;user-select:none}
.race-h:hover{background:var(--panel-2)}
.race.open .race-h{border-bottom:1px solid var(--line);background:var(--panel-2)}
.race-b{padding:0 16px}
.rn{font-weight:700;font-size:13px;min-width:34px;color:var(--ink);background:var(--panel-3);border-radius:4px;padding:4px 0;text-align:center}
.race-t{flex:1;min-width:0}
.race-t b{display:block;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.race-t > span{font-size:12px;color:var(--muted)}
/* the play, on its own line under the race name: the green the design keeps for the play marks the tag and the
   panel's edge, so a play race reads as one at a glance whether it is open or closed */
.race.has-play,.race.has-play.open{border-color:var(--act)}
.race-play{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px;font-size:13.5px;min-width:0}
.race-t .race-play b{display:inline;font-size:13.5px;font-weight:700;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.race-play .rp-tag{color:var(--act);box-shadow:inset 0 0 0 1px var(--act);font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:4px}
.race-play.won .rp-tag{background:var(--act);color:var(--act-ink)}
.race-play .rp-o{font-size:12.5px;font-weight:700;background:var(--bg-1);color:var(--ink);border-radius:4px;padding:3px 7px;font-variant-numeric:tabular-nums}
.race-play .rp-res{font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink)}
.race-play .rp-res.won{background:var(--win);border-color:var(--win);color:var(--act-ink)}
.race-play .rp-res.p2{background:var(--silver);border-color:var(--silver);color:var(--podium-ink)}
.race-play .rp-res.p3{background:var(--bronze);border-color:var(--bronze);color:var(--podium-ink)}
.race-play .rp-res.void{color:var(--muted);border-style:dashed}
.race-play .rp-when,.race-play .rp-why{font-size:12px;color:var(--muted)}
@media (max-width:640px){.race-play .rp-why{display:none}}
/* live feed: a delayed start is a live status (amber); a provisional result is waiting on the official one */
.race-t em.r-late{font-style:normal;font-weight:650;color:var(--live)}
.race-t em.r-prov{font-style:normal;color:var(--faint);border-bottom:1px dashed var(--line-2)}
.verdict{font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:4px;white-space:nowrap;border:1px solid var(--line-2);color:var(--ink-2)}
.verdict.play{background:var(--act);border-color:var(--act);color:var(--act-ink)}
/* no play: the runner the sort puts first, as information rather than a verdict. Class "lead", not "top":
   .top is the sticky site header and would pin the chip above everything. */
.verdict.lead{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:420px;font-size:13.5px;letter-spacing:0;font-weight:600;padding:5px 5px 5px 10px;border-radius:var(--r);background:var(--panel-3);border-color:var(--faint);color:var(--ink);box-shadow:var(--shadow)}
.verdict.lead small{font-size:9.5px;letter-spacing:.08em;font-weight:700;color:var(--muted)}
/* the active Show filter, named in the chip so the runner reads as the top of that slice, not the race */
.verdict.lead .vf{margin-left:5px;color:var(--act);letter-spacing:.04em}
.verdict.lead b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.verdict.lead em{font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.verdict.lead .pr{font-weight:700;font-size:12.5px;background:var(--bg-1);border-radius:4px;padding:3px 7px;font-variant-numeric:tabular-nums;color:var(--ink)}
.verdict.lead.none{padding:5px 10px;font-size:11px;letter-spacing:.06em;font-weight:700;background:transparent;border-style:dashed;border-color:var(--line-2);color:var(--muted);box-shadow:none}
.verdict.lead i{font-style:normal;font-weight:700;margin-left:1px}
.verdict.lead i.tick{color:var(--win);font-size:13px;line-height:1}
.verdict.lead i.fin{color:var(--ink-2);font-size:11px}
.verdict.lead i.fin.p2,.verdict.lead i.fin.p3{color:var(--podium-ink)}
.verdict.lead.hit{border-color:var(--win)}
/* on a phone the chip takes its own line under the race name, lined up with it, so neither has to squeeze */
@media (max-width:640px){.race-h:has(.verdict.lead){flex-wrap:wrap;row-gap:8px}.race-h .chev{order:2}.race-h .verdict.lead{order:3;flex:1 1 100%;max-width:none;margin-left:44px;gap:6px;font-size:13px;padding-left:9px}.verdict.lead.done em{display:none}}
.verdict.ran{background:var(--panel-3);border-color:var(--panel-3);color:var(--ink)}
.verdict.won{background:var(--win);border-color:var(--win);color:var(--act-ink)}
.verdict.lostplay{background:transparent;color:var(--ink)}
.chev{color:var(--faint);transition:transform .15s;font-size:11px}
.race.open .chev{transform:rotate(180deg)}
.race-b{display:none}
.race.open .race-b{display:block;animation:reveal .22s cubic-bezier(.2,.7,.2,1)}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.race.open .race-b{animation:none}.pb-h b::before{animation:none}}
.rlist{padding:0 0 8px}
.rr{display:flex;gap:12px;align-items:stretch;padding:10px 0;cursor:pointer;border-top:1px solid var(--line)}
.rr:hover .name{text-decoration:underline;text-underline-offset:3px}
.rr.on{background:var(--panel-2)}
.rr.on{margin:0 -16px;padding-left:16px;padding-right:16px}
/* the winner reads apart from the play: green belongs to the play row, so the winner gets a neutral lift, a white
   rank cell edge and its green 1st badge; a play that won keeps the play's green (.pick comes after) */
.rr.winner{background:var(--panel-2);margin:0 -16px;padding-left:16px;padding-right:16px}
/* the play is outlined in green; filled green is kept for a win (the 1st badge, and a play that won), so a play
   that lost never reads as a winner */
.rr.pick{margin:6px -8px;padding-left:8px;padding-right:8px;border:1px solid var(--act);border-radius:var(--r)}
.rr.pick + .rr{border-top-color:transparent}
.rk{flex:0 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line-2);color:var(--ink);background:var(--panel-2)}
.rk b{font-size:14px;line-height:1;font-weight:700}
.rk small{font-size:10px;font-weight:600;color:var(--muted);margin-top:3px}
.rr.lead3 .rk{background:var(--panel-3);border-color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--ink-2);color:var(--ink)}
.rr.winner:not(.pick) .rk{border-color:var(--ink);box-shadow:none}
.rr.lead3 .rk b{font-weight:800;font-size:15px}
.rr.lead3 .rk small{color:var(--ink-2)}
.rr.pick .rk{background:transparent;border-color:var(--act);box-shadow:none;color:var(--act)}
.rr.pick .rk small{color:var(--act);opacity:.8}
.rr.pick.winner .rk{background:var(--act);color:var(--act-ink)}
.rr.pick.winner .rk small{color:var(--act-ink);opacity:.72}
.rmain{flex:1;min-width:0}
.l1{display:flex;align-items:center;gap:8px;min-width:0}
.cloth{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line-2);border-radius:3px;padding:1px 5px;min-width:22px;text-align:center}
.name{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.meta{font-size:11px;color:var(--faint);white-space:nowrap}
.grow{flex:1}
.playtag{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--act);box-shadow:inset 0 0 0 1px var(--act);padding:2px 6px;border-radius:3px}
.rr.pick.winner .playtag{background:var(--act);color:var(--act-ink)}
.price{font-weight:700;font-size:14px;background:var(--panel-3);border-radius:4px;padding:4px 9px;min-width:54px;text-align:center;font-variant-numeric:tabular-nums}
.fin{display:inline-block;min-width:46px;text-align:center;font-weight:800;font-size:14px;padding:4px 7px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
/* the first three fill: green, silver, bronze; everything after stays outlined with the place in white */
.fin.p1{background:var(--win);border-color:var(--win);color:var(--act-ink)}
.fin.p2{background:var(--silver);border-color:var(--silver);color:var(--podium-ink)}
.fin.p3{background:var(--bronze);border-color:var(--bronze);color:var(--podium-ink)}
.fin small{display:block;font-weight:600;font-size:10.5px;opacity:.85}
.rr .more{color:var(--faint);font-size:10px;transition:transform .15s}
.rr.on .more{transform:rotate(180deg)}
.l2{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.pbar{position:relative;flex:1 1 140px;min-width:120px;height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden}
.pbar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.pbar .mkt{background:var(--line-2)}
.pbar .us{background:var(--act)}
.rr.pick .pbar .us{background:var(--act)}
.pl{font-size:12px;color:var(--muted);white-space:nowrap}
.pl b{color:var(--ink)} .pl em{font-style:normal;font-weight:650} .pl em.pos{color:var(--up)} .pl em.neg{color:var(--muted)}
.style{font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px;white-space:nowrap;border:1px solid var(--line-2);color:var(--ink-2)}
.style.lead{border-color:var(--muted);color:var(--ink)}
.style.fade{color:var(--ink);border-color:var(--muted);border-style:dashed}
.style.close{color:var(--ink);border-color:var(--muted)}
.style.fc{background:var(--panel-3);border-color:var(--line-2);color:var(--ink);font-weight:700}
.style.na{border-color:transparent;color:var(--faint);font-weight:500}
.elo{font-size:11px;color:var(--muted);margin-left:auto}
.legend{font-size:11.5px;color:var(--muted);padding:10px 0 12px;max-width:70ch}
.legend b{color:var(--ink);font-weight:600}
.cnt{font-size:11px;color:var(--faint);padding:0 0 8px}
.empty-race{padding:14px 0;color:var(--muted);font-size:13px}

/* race strip */
.racenav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.racenav::-webkit-scrollbar{display:none}
.racenav button{flex:0 0 auto;position:relative;border:1px solid var(--line-2);background:var(--panel);border-radius:var(--r);padding:6px 11px;font-size:12px;font-weight:650;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.racenav button:hover{border-color:var(--muted)}
.racenav button.ran{color:var(--muted);border-style:dashed}
.racenav button.on{background:var(--act);border-color:var(--act);color:var(--act-ink)}
.racenav button i{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--live);border:1px solid var(--bg)}
.racestep{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0 12px;border-top:1px solid var(--line)}
.racestep button{border:1px solid var(--line-2);background:var(--panel-2);border-radius:var(--r);padding:6px 11px;font-size:12px;font-weight:650;color:var(--ink);cursor:pointer}
.racestep button:hover{border-color:var(--muted)}
.racestep-mid{font-size:11px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;font-weight:600}

/* locked */
.race.locked .rk,.race.locked .l2{filter:blur(6px);user-select:none}
.race.locked .race-b{position:relative}
.unlock{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;justify-content:center;background:rgba(11,22,32,.35);pointer-events:none;padding:56px 12px 12px}
.unlock .box{position:sticky;top:76px;pointer-events:auto;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px 18px;text-align:center;max-width:320px;box-shadow:var(--shadow)}
.unlock .box b{display:block;font-size:15px;margin-bottom:4px}
.unlock .box p{margin:0 0 12px;font-size:13px;color:var(--muted)}
.unlock .box .cta{width:100%;justify-content:center}
.unlock .box .alt{display:block;margin-top:10px;font-size:12px;color:var(--muted);cursor:pointer;background:none;border:0;text-decoration:underline;text-underline-offset:3px}
.unlock .box .alt-note{display:block;margin-top:10px;font-size:12px;color:var(--muted)}

/* ---------- runner detail ---------- */
.det-wrap{margin:0 -16px 4px;padding:0 16px;background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.det{display:grid;grid-template-columns:1.1fr 1fr;gap:0}
.det > div{padding:16px 0}
.det > div + div{padding-left:20px;border-left:1px solid var(--line);margin-left:20px}
.det h5{margin:0 0 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.det .cm{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 12px;max-width:52ch}
.det .ped{font-size:12px;color:var(--muted);margin-bottom:10px}
.det .ped b{color:var(--ink);font-weight:600}
.recs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rec{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:6px 8px}
.rec span{display:block;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.rec b{font-size:13px}
.rec.good b{color:var(--up)} .rec.bad b{color:var(--faint)}
.gear{margin-top:10px;font-size:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2);border-radius:4px;padding:6px 10px}
.ourread{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.ourread .rec b{font-size:15px}
.sect{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.meter{display:inline-flex;align-items:center;gap:6px}
.meter i{display:inline-block;width:54px;height:5px;background:var(--panel-3);border-radius:3px;overflow:hidden;position:relative}
.meter i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--c,var(--ink));border-radius:3px}
.runs{width:100%;font-size:12px;border-collapse:collapse}
.runs th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;text-align:left;padding:0 6px 4px 0;border-bottom:1px solid var(--line-2);white-space:nowrap}
.runs th b{text-transform:none;letter-spacing:0;font-weight:650}
.runs th.r{text-align:right}
.runs td{padding:5px 6px 5px 0;border-bottom:1px solid var(--line);vertical-align:top}
.runs tr:last-child td{border-bottom:0}
.runs .pos{font-weight:700;width:44px} .runs td.pos{color:inherit} /* a finishing position, not the green "positive" .pos */
.runs .pos.w{color:var(--win)} .runs .pos.p{color:var(--ink-2)}
.runs td.r{text-align:right}
.spark{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;color:var(--muted)}
.spark svg{width:120px;height:32px;overflow:visible}
.spark b{color:var(--ink)}
.empty-det{font-size:12px;color:var(--faint)}
.model-det{}
.race.locked .model-det{filter:blur(6px);user-select:none}

/* ---------- ledger footer ---------- */
.ledger{margin-top:36px;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;background:var(--panel)}
.ledger .eyebrow{font-size:15px;font-weight:650;color:var(--ink);text-transform:none;letter-spacing:-.01em}
.ledger .row{display:flex;gap:28px;flex-wrap:wrap;margin-top:14px}
.ledger .stat b{display:block;font-size:22px;letter-spacing:-.02em;line-height:1;font-weight:650}
.ledger .stat span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.ledger p{margin:16px 0 0;font-size:13.5px;color:var(--muted);max-width:66ch}

/* ---------- paybar ---------- */
.paybar{position:fixed;left:0;right:0;bottom:var(--tabbar-h);z-index:30;background:var(--bg-1);border-top:1px solid var(--line);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.paybar.tucked{transform:translateY(calc(100% + var(--tabbar-h)))}
.paybar-in{max-width:1080px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px}
.paybar b{display:block;font-size:14px;font-weight:650}
.paybar span{font-size:12px;color:var(--muted)}

/* ---------- results page ---------- */
h1{font-size:42px;letter-spacing:-.035em;margin:30px 0 8px;line-height:1.05;font-weight:700}
.lede{color:var(--muted);margin:0 0 20px;font-size:15px;max-width:60ch}
.lede b{color:var(--ink);font-weight:600}
.rec-line{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(4,1fr)}
.rec-line:has(> :nth-child(6)){grid-template-columns:repeat(6,1fr)}
.rec-line:has(> :nth-child(5)):not(:has(> :nth-child(6))){grid-template-columns:repeat(5,1fr)}
.rec-line:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns:repeat(3,1fr)}
.rec-line div{background:var(--panel);padding:16px 14px;min-width:0}
.rec-line b{display:block;font-size:26px;letter-spacing:-.03em;line-height:1;font-weight:650}
.rec-line span{display:block;color:var(--muted);font-size:12px;margin-top:6px}
@media (max-width:760px){
  .rec-line:has(> :nth-child(6)){grid-template-columns:repeat(3,1fr)}
  .rec-line:has(> :nth-child(5)):not(:has(> :nth-child(6))){grid-template-columns:repeat(5,1fr)}
}
@media (max-width:640px){
  .rec-line,.rec-line:has(> :nth-child(6)),.rec-line:has(> :nth-child(5)):not(:has(> :nth-child(6))){grid-template-columns:repeat(2,1fr)}
  .rec-line:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns:repeat(3,1fr)}
  .rec-line b{font-size:24px}
  .rec-line div{padding:14px 12px}
}
.curve{margin-top:18px}
.curve-tip .tip-list{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--line-2)}
.curve-tip .tip-list div{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2);font-size:11.5px;line-height:1.5}
.curve-tip .tip-list em{font-style:normal;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.curve-tip strong{font-weight:650;color:var(--ink)}.curve-tip strong.pos{color:var(--up)}.curve-tip strong.neg{color:var(--down)}
.curve-tip .tip-list div span{color:var(--muted);white-space:nowrap}
.curve-tip .tip-list div.won span{color:var(--up)}
.curve-tip .tip-list div.placed span{color:var(--ink-2)}
.curve-tip em{font-style:normal;font-weight:650}
.curve svg{width:100%;height:150px;display:block;overflow:visible}
.curve .cap{font-size:13px;color:var(--muted);margin-top:8px;max-width:66ch}

.note{font-size:12px;color:var(--muted)}
.month{border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 14px;margin:18px 0;background:var(--panel)}
.month table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.month th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);text-align:left;padding:8px 8px 8px 0;font-weight:600;border-bottom:1px solid var(--line)}
.month th.r,.month td.r{text-align:right}
.month td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line)}
.month tr:last-child td{border-bottom:0}
.month td a{text-decoration:none;font-weight:650;color:var(--ink)}
.day{border-top:1px solid var(--line);margin-bottom:0}
.day:last-child{border-bottom:1px solid var(--line)}
.day-h{display:flex;align-items:baseline;gap:12px;padding:16px 0 8px}
.day-h h3{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.day-h h3 a{color:var(--ink);text-decoration:none}
.day-h .sum{color:var(--muted);font-size:13px}
.day-h .pnl{margin-left:auto;font-weight:650}
.pos{color:var(--up)} .neg{color:var(--down)} .flat{color:var(--muted)}
.day .entry{display:grid;grid-template-columns:1fr auto auto;gap:6px 16px;align-items:center;padding:12px 0;border-top:1px dashed var(--line)}
.day .entry:first-of-type{border-top:0}
.pw{min-width:0}
a.pw{color:inherit;text-decoration:none} a.pw:hover b{text-decoration:underline}
.pw b{display:block;font-size:14px;font-weight:650;line-height:1.3}
.pw small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.4}
.pw small em{font-style:normal;color:var(--ink-2)}
.day .res{font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:4px;white-space:nowrap;border:1px solid var(--line-2);color:var(--ink-2)}
.day .res.won{background:var(--win);border-color:var(--win);color:var(--act-ink)} .day .res.placed{background:var(--panel-3);border-color:var(--line-2);color:var(--ink)} .day .res.lost{color:var(--muted)} .day .res.pending{background:var(--live);border-color:var(--live);color:var(--live-ink)} .day .res.scratched{color:var(--faint)}
.amt{font-weight:650;min-width:56px;text-align:right}
.fb .pw b{color:var(--muted)}
.faq{margin-top:34px}
.faq h2{font-size:22px;letter-spacing:-.02em;margin:0 0 10px}
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-weight:650;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:var(--r)}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0}
/* the open/close marker: a plus in a ring, a green minus when open, so a question reads as something to tap */
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:linear-gradient(var(--ink-2),var(--ink-2)) center/11px 1.5px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) center/1.5px 11px no-repeat;transition:border-color .12s,background-size .15s}
.faq summary:hover h3{color:var(--ink)} .faq summary:hover::after{border-color:var(--muted)}
.faq details[open] > summary::after{border-color:var(--act);background:linear-gradient(var(--act),var(--act)) center/11px 1.5px no-repeat}
.faq summary:focus-visible{outline:2px solid var(--act);outline-offset:4px}
.faq p{margin:8px 0 0;color:var(--ink-2);font-size:14px;max-width:66ch}

@media (max-width:640px){
  .wrap{padding:0 16px 96px}
  .paybar-in{padding:9px 16px;gap:10px}
  .paybar b{font-size:13px}
  .paybar span{display:none}
  .paybar .cta{padding:9px 14px;font-size:13px}
  .top-in{padding:10px 16px;gap:10px}
  .top .date{display:none}
  .who .who-label{display:none} .who{padding:3px} .who.signin{padding:8px 12px}
  .menu-btn{display:flex}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg-1);border-bottom:1px solid var(--line);padding:6px 8px 10px;box-shadow:var(--shadow)}
  .top.open nav{display:flex}
  .top nav a{font-size:15px;padding:12px 12px;border-radius:var(--r)} .top nav a.on{background:var(--panel-2)}
  .top nav a.menu-only{display:block;border-top:1px solid var(--line);margin-top:6px;padding-top:14px;border-radius:0}
  .top nav form.menu-out{display:block} .top nav form.menu-out[hidden]{display:none}
  .top nav form.menu-out button{display:block;width:100%;text-align:left;font:inherit;font-size:15px;font-weight:600;color:var(--muted);background:none;border:0;padding:12px;border-radius:var(--r);cursor:pointer}
  .top nav form.menu-out button:hover{color:var(--ink);background:var(--panel)}
  .who .who-caret{display:none}
  .mock{display:none}
  .play{padding:20px 16px 18px}
  .play h2{font-size:24px}
  .play .why{font-size:13px;margin-top:14px}
  .play .sub{margin-top:10px;font-size:13px}
  .chip{padding:7px 11px;font-size:12.5px}
  .play .row{gap:20px}
  .play .stat b{font-size:22px}
  .race-h{padding:10px 12px;gap:10px}
  .race-b{padding:0 12px}
  .rr.on,.rr.winner{margin:0 -12px;padding-left:12px;padding-right:12px}
  .rr.pick{margin:6px -6px;padding-left:6px;padding-right:6px}
  .det-wrap{margin:0 -12px 4px;padding:0 12px}
  .det{grid-template-columns:1fr}
  .det > div + div{padding-left:0;border-left:0;margin-left:0;border-top:1px solid var(--line)}
  .recs{grid-template-columns:repeat(3,1fr)}
  .ourread{grid-template-columns:repeat(2,1fr)}
  .rk{flex-basis:36px}
  .name{font-size:14px}
  .pl{white-space:normal;font-size:11px}
  .elo{margin-left:0}
  h1{font-size:32px}
  .day .entry{grid-template-columns:1fr auto;gap:8px 12px}
  .day .entry .amt{grid-column:2;grid-row:1}
  .day .entry .res{grid-column:1;grid-row:2;justify-self:start}
}

/* membership block on the home page */
.plan{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:24px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.plan h3{margin:0;font-size:22px;letter-spacing:-.03em}
.plan .price{font-size:32px;letter-spacing:-.03em;font-weight:700;margin:6px 0 0;line-height:1}
.plan .price small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}
.plan .price .was{font-size:18px;color:var(--faint);font-weight:600;margin-right:8px;vertical-align:.3em}
.plan ul{margin:14px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:14px}
.plan li{padding:7px 0;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan .free{border-left:1px solid var(--line);padding-left:28px}
.plan .free h4{margin:0 0 4px;font-size:15px;font-weight:650}
.plan .free p{margin:0 0 12px;color:var(--muted);font-size:14px}
.plan .actions{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.plan .note{font-size:12px;color:var(--faint)}
@media (max-width:640px){.plan{grid-template-columns:1fr;padding:18px}.plan .free{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}}

/* interactive curve */
.curve svg .band{fill:transparent;cursor:pointer}
.curve svg .pt{fill:var(--bg);stroke:var(--ink);stroke-width:1.5;cursor:pointer;opacity:0;transition:opacity .12s;pointer-events:none}
.curve svg:hover .pt,.curve svg:focus-within .pt{opacity:1}
.curve svg .pt.won{fill:var(--win);stroke:var(--win)}
.curve svg .band{outline:none}
.curve svg .band:focus-visible{fill:var(--act-soft)}
.curve-tip{position:absolute;transform:translate(-50%,-100%);background:var(--panel-3);color:var(--ink);border:1px solid var(--line-2);border-radius:6px;padding:10px 12px;font-size:12px;line-height:1.4;width:260px;max-width:calc(100vw - 40px);pointer-events:none;z-index:5;box-shadow:var(--shadow)}
.curve-tip.below{transform:translate(-50%,0)}
.curve-tip b{display:block;font-size:14px;margin-bottom:2px}
.curve-tip span{display:block;color:var(--ink-2)}
.curve-tip span.pos{color:var(--up)} .curve-tip span.neg{color:var(--down)}
.curve-tip .tip-more{display:block;color:var(--muted);margin-top:4px;font-size:11px}
.curve-hint{font-size:12px;color:var(--faint);margin-top:4px}

/* plain-HTML summary for crawlers; hidden once the app renders */
.static-summary{padding:16px 0 0}
.static-summary h1{font-size:28px;margin:12px 0 6px}
.static-summary h2{font-size:18px;margin:16px 0 4px}
.static-summary ul{margin:6px 0;padding-left:18px;color:var(--ink-2);font-size:14px}
.static-summary p{color:var(--muted);font-size:14px;margin:4px 0}
/* Once the card starts the summary is hidden, but its h1 stays the page's heading for screen readers. */
.static-summary[hidden]{display:block;padding:0}
.static-summary[hidden]>:not(h1){display:none}
.static-summary[hidden] h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* stands in for the card while it starts: the day strip and the play box, in outline */
.card-loading{padding:14px 0 0}
.card-loading:not([hidden]) ~ *{display:none} /* the card's empty shells wait behind it */
.sk-days{display:flex;gap:4px;overflow:hidden}
.sk-days i{flex:0 0 auto;width:92px;height:46px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.sk-card{margin-top:16px;padding:24px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.sk-card i{display:block;height:14px;max-width:62ch;margin-top:12px;border-radius:6px;background:var(--panel-2)}
.sk-card i:first-child{width:45%;height:28px;margin-top:0}
.sk-card i:last-child{width:70%}
.card-loading i{animation:sk-pulse 1.1s ease-in-out infinite alternate}
@keyframes sk-pulse{from{opacity:.5}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.card-loading i{animation:none}}

/* generated reports */
.race-rep{margin:0;padding:12px 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:70ch;border-bottom:1px solid var(--line)}
.race.locked .race-rep{filter:blur(6px);user-select:none}
.day-rep{color:var(--ink-2)!important}

/* record cards, shared by results and accuracy */
.record{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;margin-top:2px;background:var(--panel)}
.record+.record{margin-top:14px}
.record .rec-line{border-radius:6px}
.record .rec-line div{background:var(--panel-2)}
.rec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.rec-h h2{font-size:17px;letter-spacing:-.02em;margin:0}
.rec-h span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.record .note b{color:var(--ink)}
.record .empty{color:var(--muted);font-size:13px;margin:0;border:0;padding:0;background:transparent}
.rec-line b.txt{font-size:17px;line-height:1.2;letter-spacing:-.01em}
.dims{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.dims button{border:1px solid var(--line-2);background:var(--panel-2);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.dims button.on{background:var(--act);border-color:var(--act);color:var(--act-ink)}
table.bd{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.bd th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);text-align:left;padding:6px 8px 6px 0;font-weight:600;border-bottom:1px solid var(--line)}
table.bd th.r,table.bd td.r{text-align:right;white-space:nowrap}
table.bd td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
table.bd tr:last-child td{border-bottom:0}
table.bd td small{color:var(--faint);font-weight:500}
table.bd tr.thin td,table.bd tr.thin td.pos,table.bd tr.thin td.neg{color:var(--faint)}
table.bd .barh{width:26%;padding-right:0}
.bar{position:relative;display:block;height:8px;background:var(--panel-3);border-radius:4px;overflow:hidden}
.bar::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-2)}
.bar i{position:absolute;top:0;bottom:0;display:block;background:var(--muted)}
.bar i.pos{background:var(--win)} .bar i.neg{background:var(--down)}
.record .note{font-size:13px;color:var(--muted);margin:10px 0 0;max-width:72ch;line-height:1.5}
@media (max-width:640px){
  .record{padding:14px 14px 12px}
  table.bd{font-size:12px} table.bd th.hide-sm,table.bd td.hide-sm{display:none} table.bd .barh{width:18%}
  table.bd th,table.bd th.r{white-space:normal;line-height:1.25;padding-right:6px} table.bd td{padding:8px 6px 8px 0}
}

/* form tool: speed map, rated price, lanes, connections */
.smap{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-1);padding:10px 12px 8px;margin:10px 0}
.smap-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.smap-h b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.smap-h span{font-size:12px;color:var(--muted)}
.smap-h .tempo{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.tempo.t-fast{border-color:var(--live);color:var(--live)} .tempo.t-moderate{border-color:var(--ink-2);color:var(--ink)} .tempo.t-slow{color:var(--muted)}
.smap-tools{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
.smap-suits+.smap-tools{margin-left:0}
.smap-btn{border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-2);border-radius:var(--r);padding:3px 9px;font:inherit;font-size:11px;font-weight:650;cursor:pointer;line-height:1.3}
.smap-btn:hover{border-color:var(--muted);color:var(--ink)} .smap-btn.on{background:var(--act);border-color:var(--act);color:var(--act-ink)}
.smap-moved{font-size:11px;color:var(--blue);font-weight:600}
.smap-hint{font-size:12px;color:var(--muted);margin:-2px 0 8px}
.smap.editing .smap-row .sc{cursor:grab;border-style:solid;border-color:var(--line-2)} .smap.editing .smap-row .sc:hover{border-color:var(--act)}
.smap-row .sc.moved,.smap.editing .smap-row .sc.moved{border-color:var(--blue)} .smap-row .sc.moved b{background:var(--blue-soft);color:var(--blue)}
.smap-order i.moved b{color:var(--blue)}
/* the three views: settling (the grid), barrier speed and closing speed (bars by barrier) */
.smap-tabs{display:flex;gap:4px;margin:0 0 10px;flex-wrap:wrap}
.smap-tabs button{border:1px solid var(--line-2);background:transparent;color:var(--muted);border-radius:999px;padding:4px 11px;font:inherit;font-size:12px;font-weight:650;cursor:pointer;line-height:1.3}
.smap-tabs button:hover{color:var(--ink);border-color:var(--muted)} .smap-tabs button.on{background:var(--panel-3);color:var(--ink);border-color:var(--ink-2)}
.smap-bars{display:flex;flex-direction:column;gap:4px}
.bar-row{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center}
.bar-b{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line-2);border-radius:3px;text-align:center;padding:3px 0;line-height:1.2}
.bar-track{position:relative;height:30px;background:var(--bg-1);border-radius:4px;cursor:pointer;min-width:0}
.bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--panel-2);transition:width .2s}
.bar-fill.lane-F{background:var(--panel-3);box-shadow:inset 0 0 0 1px var(--ink-2)} .bar-fill.lane-M{background:var(--panel-3)} .bar-fill.lane-B{background:var(--panel-2)} .bar-fill.lane-X{background:repeating-linear-gradient(135deg,var(--panel-2) 0 6px,var(--bg-1) 6px 12px)}
.bar-row.nodata .bar-fill{width:12%!important}
.bar-chip{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--v) * 1%);margin-left:8px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;font-size:12.5px;color:var(--ink-2);pointer-events:none}
.bar-chip.in{left:auto;right:calc((100 - var(--v)) * 1% + 8px);margin-left:0;color:var(--ink)}
.bar-chip em{font-style:normal;font-weight:700;font-size:11px;background:var(--panel-3);border:1px solid var(--line-2);padding:1px 7px;border-radius:999px;color:var(--ink);font-variant-numeric:tabular-nums}
.bar-chip b{color:var(--ink)}
.bar-chip.pick em{background:var(--act);border-color:var(--act);color:var(--act-ink)} .bar-chip.won em{background:var(--win);border-color:var(--win);color:var(--act-ink)}
.bar-row.moved .bar-b{border-color:var(--blue);color:var(--blue)}
.bar-track:hover .bar-fill{filter:brightness(1.15)}
.smap-axis.bars{padding-left:38px;min-width:0}
.smap-legend{display:flex;gap:4px 10px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--muted)}
.smap-legend i{display:inline-block;width:14px;height:10px;border-radius:2px;background:var(--panel-3);margin-right:2px;vertical-align:-1px}
.smap-legend i.lane-F{box-shadow:inset 0 0 0 1px var(--ink-2)} .smap-legend i.lane-B{background:var(--panel-2)} .smap-legend i.lane-X{background:repeating-linear-gradient(135deg,var(--panel-2) 0 3px,var(--bg-1) 3px 6px)}
@media (max-width:640px){ .bar-chip{font-size:11.5px} .bar-chip em{display:none} }
.smap-call{font-size:12px;color:var(--muted)}
.smap-suits{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap} .smap-suits b{color:var(--ink)}
/* the map: three rows (wide, one off, rail) by settle position, leaders on the left; scrolls sideways when the field is big */
.smap-v{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:thin}
.smap-rows{display:flex;flex-direction:column;gap:3px;min-width:calc(var(--n) * 46px + 56px)}
.smap-row{display:grid;grid-template-columns:52px repeat(var(--n),minmax(42px,1fr));gap:3px 4px;align-items:stretch;min-height:36px}
.smap-v.named .smap-rows{min-width:calc(var(--n) * 84px + 56px)}
.smap-v.named .smap-row{grid-template-columns:52px repeat(var(--n),minmax(80px,1fr))}
.smap-row h6{grid-column:1;grid-row:1;margin:0;align-self:center;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600}
.smap-row.r0{border-bottom:2px solid var(--line-2);padding-bottom:4px}
.smap-row.r0 h6{color:var(--muted)}
.smap-row .sc{grid-column:calc(var(--p) + 1);grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px 3px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);cursor:pointer;min-width:0;color:var(--ink-2);font-size:12px;line-height:1.2}
.smap-row .sc b{min-width:22px;height:18px;border:0;background:var(--panel-3);color:var(--ink);font-size:11px;font-weight:700;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.smap-row .sc em{display:none;font-style:normal;font-size:11px;color:var(--ink-2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smap-v.named .smap-row .sc em{display:block}
.smap-row .sc small{font-size:10px;color:var(--faint)}
.smap-row .sc.lane-F{border-color:var(--muted)}
.smap-row .sc.est{border-style:dashed} .smap-row .sc.est b{background:var(--panel-2);color:var(--muted)}
.smap-row .sc.pick{background:var(--act-soft);border-color:var(--act)} .smap-row .sc.pick b{background:var(--act);color:var(--act-ink)}
.smap-row .sc.won{border-color:var(--win)} .smap-row .sc.won b{background:var(--win);color:var(--act-ink)}
.smap-row .sc:hover,.smap-row .sc:focus-visible{border-color:var(--ink-2);color:var(--ink)}
.smap-axis{display:flex;justify-content:space-between;padding:5px 0 0 56px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);min-width:calc(var(--n) * 46px + 56px)}
.smap-v.named .smap-axis{min-width:calc(var(--n) * 84px + 56px)}
.smap-order{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-2);margin-top:8px;align-items:center}
.smap-order span{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600}
.smap-order i{font-style:normal;cursor:pointer;white-space:nowrap} .smap-order i b{color:var(--ink)} .smap-order i small{color:var(--faint)} .smap-order i:hover{text-decoration:underline;text-underline-offset:3px}
.smap-n{font-size:11px;color:var(--faint);margin-top:8px}
/* runner colours on the map: the same slot as the runner's line in the position guide (F.colourOf) */
.smap .c0{--c:var(--w0)} .smap .c1{--c:var(--w1)} .smap .c2{--c:var(--w2)} .smap .c3{--c:var(--w3)} .smap .c4{--c:var(--w4)} .smap .c5{--c:var(--w5)} .smap .c6{--c:var(--w6)} .smap .c7{--c:var(--w7)} .smap .c8{--c:var(--w8)} .smap .c9{--c:var(--w9)} .smap .c10{--c:var(--w10)} .smap .c11{--c:var(--w11)}
.smap-row .sc[class*=" c"]{background:color-mix(in srgb,var(--c) 9%,var(--panel));border-color:color-mix(in srgb,var(--c) 45%,var(--line-2))}
.smap-row .sc[class*=" c"] b,.smap-row .sc.est[class*=" c"] b{background:var(--c);color:var(--act-ink)}
.smap-row .sc.est[class*=" c"]{border-color:color-mix(in srgb,var(--c) 35%,var(--line-2))}
.smap-row .sc.pick[class*=" c"]{border-color:var(--act);box-shadow:0 0 0 1px var(--act)} .smap-row .sc.won[class*=" c"]{border-color:var(--win);box-shadow:0 0 0 1px var(--win)}
.smap-row .sc.moved[class*=" c"]{border-color:var(--blue)}
.smap-row .sc[class*=" c"]:hover,.smap-row .sc[class*=" c"]:focus-visible{border-color:var(--c)}
.smap-order i[class*="c"] b{color:var(--c)} .smap-order i.moved b{color:var(--blue)}
.bar-chip > i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--muted));display:inline-block;flex:none}
/* the form worm: every runner's ELO over its last runs, a colour per runner (the only place the shell uses a palette) */
.smap,.worm{--w0:#5aa9ff;--w1:#ff8a5b;--w2:#ffd166;--w3:#7ee787;--w4:#c8a2ff;--w5:#ff6b9d;--w6:#4dd4c6;--w7:#e8e8e8;--w8:#9fb2c6;--w9:#f5a623;--w10:#8ab4f8;--w11:#d4a5a5}
.worm{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-1);padding:10px 12px 8px;margin:10px 0}
.pg-tabs{display:inline-flex;gap:4px;margin-left:4px}
.pg-tabs button{border:1px solid var(--line-2);background:transparent;color:var(--muted);border-radius:999px;padding:2px 9px;font:inherit;font-size:11px;font-weight:650;cursor:pointer;line-height:1.3}
.pg-tabs button:hover{color:var(--ink);border-color:var(--muted)} .pg-tabs button.on{background:var(--panel-3);color:var(--ink);border-color:var(--ink-2)}
.worm-svg .wl.est{stroke-dasharray:5 4;opacity:.55} .worm-svg .wd.est{fill:var(--bg-1);stroke:var(--c);stroke-width:1.5} .worm-svg .wd.gate{fill:var(--bg-1);stroke:var(--c);stroke-width:1.5}
.worm-svg .ws.on .wl.est,.worm-svg .ws:hover .wl.est{opacity:.9}
.pg-verdict{color:var(--muted)}
.worm-going{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 8px}
.worm-going button{border:1px solid var(--line-2);background:transparent;color:var(--muted);border-radius:999px;padding:3px 10px;font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;line-height:1.3}
.worm-going button small{color:var(--faint);font-weight:500} .worm-going button:hover{color:var(--ink);border-color:var(--muted)} .worm-going button.on{background:var(--panel-3);color:var(--ink);border-color:var(--ink-2)}
/* The sectionals tab: the field side by side, splits tinted by lengths against the benchmark, the column's best ringed. */
.worm-going .sec-gap{width:1px;align-self:stretch;background:var(--line-2);margin:2px 4px}
.sec-rank{list-style:none;margin:0;padding:0}
.sec-row{display:grid;grid-template-columns:46px minmax(0,15rem) minmax(0,1fr) 56px;gap:12px;align-items:center;padding:7px 2px;border-top:1px solid var(--line)}
.sec-row:first-child{border-top:0}
.sec-pos{background:var(--panel);border-radius:4px;text-align:center;padding:3px 0;font-size:12px;font-weight:600;color:var(--muted)}
.sec-nm{min-width:0;font-size:13px;font-weight:600;color:var(--ink-2)} .sec-nm span{cursor:pointer} .sec-nm span:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sec-nm small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:1px}
.sec-bar{position:relative;height:12px} .sec-bar::before{content:"";position:absolute;left:50%;top:-5px;bottom:-5px;border-left:1px solid var(--line-2)}
.sec-bar i{position:absolute;top:1px;height:10px;border-radius:2px;background:var(--faint)}
.sec-row.t-p .sec-bar i{background:var(--up)} .sec-row.t-n .sec-bar i{background:var(--down)}
.sec-v{text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sec-row.t-p .sec-v{color:var(--up)} .sec-row.t-n .sec-v{color:var(--down)}
.sec-row.thin .sec-bar i,.sec-row.thin .sec-v{opacity:.55}
.sec-row.pick .sec-nm span::after{content:"play";margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--act)}
.sec-row.won .sec-nm span{color:var(--win)}
@media (max-width:560px){.sec-row{grid-template-columns:40px minmax(0,1fr) 52px;gap:4px 10px}.sec-bar{grid-column:2 / 4;grid-row:2}}
.sec-wrap{overflow-x:auto;margin:0 -2px}
.sec-t{width:100%;border-collapse:separate;border-spacing:2px;font-size:12.5px}
.sec-t thead th{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);text-align:center;padding:0 2px 4px;white-space:nowrap}
.sec-t thead th:first-child{text-align:left}
.sec-t thead button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:2px 4px;cursor:pointer;border-radius:3px}
.sec-t thead button:hover{color:var(--ink)} .sec-t thead th.on button{color:var(--ink);box-shadow:inset 0 -2px 0 var(--act)}
.sec-t tbody th{text-align:left;font-weight:600;color:var(--ink-2);padding:0 10px 0 2px;white-space:nowrap;position:sticky;left:0;background:var(--bg-1);z-index:1}
.sec-t tbody th span{cursor:pointer} .sec-t tbody th span:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sec-t tbody tr.pick th span::after{content:"play";margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--act)}
.sec-t tbody tr.won th span{color:var(--win)}
.sec-t td{text-align:center;padding:6px 8px;border-radius:4px;background:var(--panel);color:var(--ink-2);font-weight:600;white-space:nowrap;min-width:52px}
.sec-t td.sec-n{background:transparent;color:var(--faint);font-weight:500;min-width:34px}
.sec-t td.none{color:var(--faint);font-weight:400}
.sec-t td.t-p1{background:color-mix(in srgb,var(--up) 13%,var(--panel));color:var(--up)} .sec-t td.t-p2{background:color-mix(in srgb,var(--up) 32%,var(--panel));color:var(--ink)}
.sec-t td.t-n1{background:color-mix(in srgb,var(--down) 13%,var(--panel));color:var(--down)} .sec-t td.t-n2{background:color-mix(in srgb,var(--down) 32%,var(--panel));color:var(--ink)}
.sec-t td.thin{opacity:.55}
.sec-t td.best{box-shadow:inset 0 0 0 1.5px var(--ink-2);color:var(--ink)}
.worm-svg{display:block;width:100%;height:auto;max-height:280px}
.worm-svg .wg{stroke:var(--line);stroke-width:1} .worm-svg .wt{fill:var(--faint);font-size:10px;font-family:var(--font)}
.worm-svg .ws{cursor:pointer;--c:var(--muted)} .worm-svg .wh{fill:none;stroke:transparent;stroke-width:16}
.worm-svg .c0{--c:var(--w0)} .worm-svg .c1{--c:var(--w1)} .worm-svg .c2{--c:var(--w2)} .worm-svg .c3{--c:var(--w3)} .worm-svg .c4{--c:var(--w4)} .worm-svg .c5{--c:var(--w5)} .worm-svg .c6{--c:var(--w6)} .worm-svg .c7{--c:var(--w7)} .worm-svg .c8{--c:var(--w8)} .worm-svg .c9{--c:var(--w9)} .worm-svg .c10{--c:var(--w10)} .worm-svg .c11{--c:var(--w11)}
.worm-svg .wl{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;opacity:.7;transition:opacity .12s,stroke-width .12s}
.worm-svg .wd{fill:var(--c);opacity:.85} .worm-svg .wn{display:none;fill:var(--ink);font-size:10px;font-weight:700;font-family:var(--font);paint-order:stroke;stroke:var(--bg-1);stroke-width:3px;stroke-linejoin:round}
.worm-svg .ws.on .wl,.worm-svg .ws:hover .wl,.worm-svg .ws:focus-visible .wl{opacity:1;stroke-width:3}
.worm-svg .ws.on .wn,.worm-svg .ws:hover .wn,.worm-svg .ws:focus-visible .wn{display:block}
.worm-svg .ws.pick .wl,.worm-svg .ws.won .wl,.worm-svg .ws.full .wl{opacity:1;stroke-width:2.6}
.worm-svg .ws.top.full .wl{stroke-width:3.2}
.worm.all .worm-svg .ws .wl.est{opacity:.22;stroke-width:1.4} .worm.all .worm-svg .ws .wd.est{opacity:.55} .worm.all .worm-svg .ws.dim .wd{opacity:.14}
.worm.all .worm-svg .ws.full .wl:not(.est){opacity:.8;stroke-width:1.9} .worm.all .worm-svg .ws.pick .wl:not(.est){opacity:1;stroke-width:2.6}
.worm.all .worm-svg .ws.won .wl:not(.est){opacity:1;stroke-width:3.6} .worm.all .worm-svg .ws:hover .wl.est{opacity:.7}
.worm-svg .wc{display:none;stroke:var(--c);stroke-width:1;opacity:.55}
.worm-svg .ws.full .wc,.worm-svg .ws.on .wc,.worm-svg .ws:hover .wc,.worm-svg .ws:focus-visible .wc{display:inline} .worm-svg .ws.full .wl.est{opacity:.9}
.worm-svg .ws.full .wn{display:block}
/* every horse not drawn in full: one faint line (its actual path once run), no rings or dots, up in full on hover */
.worm-svg .ws.quiet .wl{opacity:.3;stroke-width:1.3} .worm-svg .ws.quiet .wd,.worm-svg .ws.quiet.act .wl.est,.worm-svg .ws.quiet.act .wh.est{display:none}
.worm-svg .ws.quiet:hover .wd,.worm-svg .ws.quiet:hover .wl.est,.worm-svg .ws.quiet:focus-visible .wd,.worm-svg .ws.quiet:focus-visible .wl.est{display:inline}
.worm-svg .ws.quiet:hover .wl,.worm-svg .ws.quiet:focus-visible .wl{opacity:1;stroke-width:2.6} .worm-svg .ws.quiet:hover .wl.est{opacity:.9}
.worm-svg .ws.dim .wl{opacity:.14} .worm-svg .ws.dim:hover .wl{opacity:.8}
.worm-svg:hover .ws:not(:hover):not(.on):not(.dim) .wl{opacity:.35}
.worm-svg .ws:focus-visible{outline:none}
.worm-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--ink)}
.worm-key span{display:inline-flex;align-items:center;gap:7px}
.worm-key line{stroke:var(--ink-2);stroke-width:2.4;stroke-linecap:round} .worm-key line.k-est{stroke-dasharray:5 4;opacity:.7} .worm-key circle{fill:var(--ink-2)} .worm-key circle.k-est{fill:var(--bg-1);stroke:var(--ink-2);stroke-width:1.5}
.worm-legend{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:8px}
.worm-legend button{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--ink-2);border-radius:999px;padding:3px 9px 3px 7px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;line-height:1.3;--c:var(--muted)}
.worm-legend button i{width:9px;height:9px;border-radius:50%;background:var(--c);display:inline-block}
.worm-legend .c0{--c:var(--w0)} .worm-legend .c1{--c:var(--w1)} .worm-legend .c2{--c:var(--w2)} .worm-legend .c3{--c:var(--w3)} .worm-legend .c4{--c:var(--w4)} .worm-legend .c5{--c:var(--w5)} .worm-legend .c6{--c:var(--w6)} .worm-legend .c7{--c:var(--w7)} .worm-legend .c8{--c:var(--w8)} .worm-legend .c9{--c:var(--w9)} .worm-legend .c10{--c:var(--w10)} .worm-legend .c11{--c:var(--w11)}
.worm-legend button:hover{border-color:var(--line-2);color:var(--ink)} .worm-legend button.on{border-color:var(--ink-2);background:var(--panel-2);color:var(--ink)} .worm-legend button.dim{color:var(--faint)} .worm-legend button.dim i{opacity:.35}
@media (max-width:640px){ .worm-legend button{font-size:11px;padding:2px 7px 2px 6px} }
/* the going tag on a runner row, the going line on a wet race, the going grid in the panel */
.going{font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap;line-height:1.3}
.going small{font-weight:500;color:var(--faint);font-size:10px}
.going.g-won{border-color:var(--win);color:var(--ink)} .going.g-placed{border-color:var(--muted)} .going.g-untested{border-style:dashed;color:var(--muted)} .going.g-unplaced{color:var(--muted)}
.l2.l2-pub{margin-top:6px}
.race-going{font-size:12.5px;color:var(--muted);margin:8px 0 6px;line-height:1.55;max-width:80ch} .race-going b{color:var(--ink)}
.race-going i{font-style:normal;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)} .race-going i:hover{color:var(--ink)}
.going-grid .rec.today{box-shadow:inset 0 0 0 1px var(--ink-2)} .going-grid .rec.today.g-won{box-shadow:inset 0 0 0 1px var(--win)} .going-grid .rec.today.g-won b{color:var(--win)}
.going-grid .rec.today.g-untested{box-shadow:inset 0 0 0 1px var(--line-2);border-style:dashed}
.going-note{font-size:12px;color:var(--muted);margin:6px 0 10px;line-height:1.5;max-width:70ch} .going-note small{color:var(--faint)}
.stats-grid{grid-template-columns:repeat(6,1fr);margin-bottom:4px}
.stats-grid .rec.today{box-shadow:inset 0 0 0 1px var(--ink-2)} .stats-grid .rec.today.g-won{box-shadow:inset 0 0 0 1px var(--win)} .stats-grid .rec.today.g-won b{color:var(--win)}
.stats-grid .rec.today.g-untested{border-style:dashed}
.stats-grid .rec b small{font-size:10px}
.l4c small.bench{display:block;font-size:10px;color:var(--faint)} .l4c small.bench.pos,.stats-grid small.pos,.more-secs .pos{color:var(--up)} .l4c small.bench.neg,.stats-grid small.neg,.more-secs .neg{color:var(--down)}
@media (max-width:900px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:640px){ .stats-grid{grid-template-columns:repeat(3,1fr)} }
.ctl-link{font-size:12px;font-weight:650;color:var(--ink);text-decoration:none;border:1px solid var(--line-2);border-radius:var(--r);padding:5px 9px;background:var(--panel-2);white-space:nowrap}
.ctl-link:hover{border-color:var(--muted)}
.filterstrip .fs-new b{color:var(--act)}
.pl .rated{color:var(--ink-2)}
.style.lane-F,.style.lane-M,.style.lane-B{border-style:dotted;color:var(--muted)}
.style.lane-F{border-color:var(--ink-2)}
.rec.thin b{color:var(--muted);font-weight:500}
.rec b small{color:var(--faint);font-weight:500;font-size:11px}
.rec b small.pos{color:var(--up)} .rec b small.neg{color:var(--down)}
.ourread .rec b.pos{color:var(--up)} .ourread .rec b.neg{color:var(--down)}
.map-det{margin-top:-6px}
@media (max-width:640px){
  .smap-suits{margin-left:0}
}
.runs td:nth-child(2){width:100%;min-width:96px}
.runs td.r{white-space:nowrap}
.runs td.r small{display:block;font-size:10px}

/* my book: blackbook strip and tags, the book block in a runner, the account page */
.bookstrip{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-top:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.bookstrip .eyebrow{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.bookstrip a{text-decoration:none;color:var(--ink);font-size:13px;line-height:1.25} .bookstrip a b{font-weight:650} .bookstrip a small{display:block;color:var(--muted);font-size:11px}
.bookstrip a:hover b{text-decoration:underline;text-underline-offset:3px}
.likestrip a small+small{color:var(--faint)} .likestrip .ls-note{font-size:11px;color:var(--faint);margin-left:auto}
/* On the card the three strips share one panel, a line each: the label stays put and the horses scroll sideways, so
   a long blackbook costs one row of height, not a screen. */
.mybook:has(.bookstrip){margin-top:10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.mybook .bookstrip{flex-wrap:nowrap;gap:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow-x:auto;scrollbar-width:none;align-items:stretch}
.mybook .bookstrip::-webkit-scrollbar{display:none}
.mybook > div + div .bookstrip{border-top:1px solid var(--line)}
.mybook .bookstrip .eyebrow{position:sticky;left:0;z-index:1;flex:0 0 112px;display:flex;align-items:center;padding:9px 12px 9px 14px;background:var(--panel);border-right:1px solid var(--line);line-height:1.25}
.mybook .bookstrip a{flex:0 0 auto;max-width:200px;padding:8px 14px;border-left:1px solid var(--line);white-space:nowrap}
.mybook .bookstrip .eyebrow + a{border-left:0}
.mybook .bookstrip a b,.mybook .bookstrip a small{overflow:hidden;text-overflow:ellipsis}
.mybook .bookstrip a b{display:block}
.mybook .bookstrip a:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.mybook .likestrip .ls-note{flex:0 0 auto;align-self:center;margin:0;padding:0 14px;white-space:nowrap}
@media (max-width:640px){ .mybook .bookstrip .eyebrow{flex-basis:84px;font-size:10px;padding-left:12px} .mybook .bookstrip a{max-width:168px;padding:8px 12px} }
.bbtag{font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:3px;border:1px solid var(--blue);color:var(--blue);line-height:1.2}
.bettag{font-size:11px;font-weight:650;padding:2px 6px;border-radius:3px;background:var(--blue-soft);color:var(--blue);line-height:1.2;font-variant-numeric:tabular-nums}
.bk{display:flex;flex-direction:column;gap:8px;font-size:12px}
.bk-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bk-btn{border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);border-radius:4px;padding:6px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.bk-btn:hover{border-color:var(--muted)} .bk-btn.on{background:var(--blue);color:#fff;border-color:var(--blue)} .bk-btn:disabled{opacity:.6;cursor:default}
.bk-form .bk-btn[type=submit]{background:var(--act);color:var(--act-ink);border-color:var(--act);font-weight:700}
.bk-form .bk-btn[type=submit]:hover{background:var(--act-hover)}
.bk-note-in{flex:1;min-width:140px;border:0;border-bottom:1px solid var(--line-2);padding:4px 2px;font:inherit;font-size:12px;background:transparent;color:var(--ink)}
.bk-note-in:focus{outline:0;border-bottom-color:var(--act)}
.bk-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bk-form label{display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
.bk-form input,.bk-form select{border:1px solid var(--line-2);border-radius:4px;padding:5px 6px;font:inherit;font-size:12px;width:68px;background:var(--panel-2);color:var(--ink);font-variant-numeric:tabular-nums}
.bk-form select{width:auto}
.bk-form input[type=checkbox]{width:auto;padding:0;margin:0;accent-color:var(--act)}
.bk-form input:focus,.bk-form select:focus{outline:0;border-color:var(--act)}
.bk-bet{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.bk-bet .bk-res{color:var(--muted);flex:1} .bk-bet em{font-style:normal;font-weight:650;color:var(--ink)} .bk-bet em.pos{color:var(--up)} .bk-bet em.neg{color:var(--down)}
.bk-note{color:var(--muted);font-size:12px;line-height:1.45;margin:0} .bk-note b{color:var(--ink)} .bk-note a{color:var(--act)}
button.x{border:0;background:transparent;color:var(--faint);font-size:16px;cursor:pointer;padding:0 4px;line-height:1} button.x:hover{color:var(--down)}
.pb-bet{display:block;margin-top:4px;color:var(--muted)} .pb-bet button{border:1px solid var(--line-2);background:var(--panel-2);border-radius:3px;padding:2px 7px;font:inherit;font-size:11px;font-weight:600;cursor:pointer;color:var(--ink)} .pb-bet button:hover{border-color:var(--act);color:var(--act)}
.acct h2{font-size:22px;letter-spacing:-.02em;margin:36px 0 6px}
.acct table.book{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.acct table.book th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;text-align:left;padding:0 8px 6px 0;border-bottom:1px solid var(--line-2);white-space:nowrap}
.acct table.book td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.acct table.book th.r,.acct table.book td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.acct table.book td.pos{color:var(--up);font-weight:650} .acct table.book td.neg{color:var(--down)}
.acct table.book tr.w td b{color:var(--up)}
.acct table.book small{color:var(--faint)}
.acct table.book a{color:var(--ink)}
.acct table.book .bet-edit-btn{padding:3px 8px;font-size:11px}
.acct table.book tr.bet-ed td{background:var(--panel);padding:10px 10px 8px;white-space:normal}
.acct table.book tr:has(+ tr.bet-ed:not([hidden])) td{border-bottom-color:transparent;background:var(--panel)}
.bet-ed .bet-del{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.bet-ed .bet-del-sure{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .bet-ed .bet-del-sure[hidden],.bet-ed .bet-del-ask[hidden]{display:none}
.bet-ed .bet-del-ask{color:var(--down)} .bet-ed .bk-btn.bet-del-yes{background:var(--down);border-color:var(--down);color:#fff}
.bet-ed .bet-ed-note{margin:8px 0 0;font-size:12px;color:var(--muted)} .bet-ed .bet-ed-note.err{color:var(--down)}
.exo-log{margin:14px 0 4px} .exo-log summary{cursor:pointer;font-weight:650;font-size:13px;color:var(--ink-2);width:max-content}
.exo-log[open] summary{margin-bottom:8px} .exo-log .bk-form input.exo-wide{width:130px} .exo-log .bk-form input.exo-date{width:auto}
.exo-log .bet-ed-note{margin:8px 0 0;font-size:12px;color:var(--muted)} .exo-log .bet-ed-note.err{color:var(--down)}
.bet-ed .bk-form input.exo-wide{width:130px}
/* On a phone the table scrolls sideways: Edit stays pinned at the right edge and the editor stays inside the screen. */
@media (max-width:640px){ .acct table.book tr>:last-child{position:sticky;right:0;background:var(--bg);padding-left:6px} .acct table.book tr:has(+ tr.bet-ed:not([hidden]))>:last-child{background:var(--panel)} .acct table.book tr.bet-ed>td{position:static;padding:10px 0} .bet-ed .bk-form,.bet-ed .bet-ed-note{position:sticky;left:0;width:calc(100vw - 32px);box-sizing:border-box;padding:0 10px} .bet-ed .bet-del{margin-left:0} }
.acct input.note{width:100%;min-width:160px;border:0;border-bottom:1px solid var(--line-2);padding:4px 2px;font:inherit;font-size:13px;background:transparent;color:var(--ink)} .acct input.note:focus{outline:0;border-bottom-color:var(--act)} .acct input.note.saved{border-bottom-color:var(--up)}
.acct .empty-book{color:var(--muted);font-size:14px} .acct .empty-book a{color:var(--act)}
.acct .staking{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px;margin-top:8px}
.acct .staking label{display:inline-flex;align-items:center;gap:6px}
.acct .staking .unit{color:var(--muted);margin-right:-2px}
.acct .staking input[type=number],.acct .staking select{border:1px solid var(--line-2);border-radius:4px;padding:7px 8px;font:inherit;font-size:14px;width:120px;background:var(--panel-2);color:var(--ink)}
.acct .staking select{width:auto}
.acct .staking .chk{width:100%}
.acct .rec-line b.pos{color:var(--up)} .acct .rec-line b.neg{color:var(--down)}
.acct .legend a{color:var(--act)}
.acct-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:22px 0 0;overflow-x:auto;scrollbar-width:none}
.acct-tabs::-webkit-scrollbar{display:none}
.acct-tabs a{padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.acct-tabs a:hover{color:var(--ink)}
.acct-tabs a.on{color:var(--ink);border-bottom-color:var(--act)}
.acct.tabbed .acct-pane{display:none} .acct.tabbed .acct-pane.on{display:block}
.acct.tabbed .acct-pane > h2:first-child{margin-top:24px}
.acct h3{font-size:16px;letter-spacing:-.01em;margin:28px 0 6px}
.acct .kelly-p{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:72ch;margin:8px 0} .acct .kelly-p b{color:var(--ink)}
.acct ol.kelly{margin:10px 0;padding-left:20px;max-width:72ch;font-size:14px;color:var(--ink-2);line-height:1.55}
.acct ol.kelly li{margin:0 0 8px} .acct ol.kelly b{color:var(--ink)}
.acct .kelly-ex{font-size:14px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--act);border-radius:var(--r);background:var(--panel);max-width:72ch}
.acct .kelly-ex b{color:var(--up)}
.acct .prefs{border:1px solid var(--line);border-radius:var(--r);margin:10px 0 18px;max-width:640px;background:var(--panel)}
.acct .prefs form{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.acct .prefs form:first-of-type{border-top:0}
.acct .prefs b{font-size:15px} .acct .prefs small{grid-column:1;color:var(--muted);font-size:13px}
.acct .prefs button{grid-column:2;grid-row:1/3;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.acct .prefs button:hover{border-color:var(--muted)}
@media (max-width:640px){ .acct table.book{display:block;overflow-x:auto;white-space:nowrap} .bk-form input{width:60px} }
/* Account head, tab counts and the blackbook as cards (23 Oct 2026): the horses a member follows, grouped by when they
   run, each with its race and prices in dark cells, a note box and the way to its lookalikes. */
.acct{padding-top:32px}
.acct-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acct-id{display:flex;align-items:center;gap:14px;min-width:0}
.acct-av{width:48px;height:48px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font:700 20px/1 var(--display);color:var(--ink);flex:none}
.acct-id h1{font-size:34px;letter-spacing:-.035em;line-height:1.05;margin:0}
.acct-id p{margin:4px 0 0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.acct-plan{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 12px 12px 16px;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.acct-plan:hover{border-color:var(--line-2);background:var(--panel-2)}
.acct-plan b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.acct-plan small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.acct-plan-go{font-size:12.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r);padding:6px 10px}
.acct-tabs .tab-n{margin-left:7px;font-size:11px;font-weight:700;color:var(--ink-2);background:var(--panel-2);border-radius:999px;padding:2px 7px}
.acct-tabs a.on .tab-n{background:var(--panel-3);color:var(--ink)}
.bb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:24px}
.acct .bb-top h2{margin:0 0 2px}
.bb-top .legend{padding:4px 0 0;margin:0}
.bb-finder{padding:9px 14px;font-size:13px}
.bb-group{margin-top:24px}
.acct .bb-group h3{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 10px}
.bb-n{font:700 11px/1 var(--font);color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;padding:3px 8px}
.bb-hint{font-size:12.5px;color:var(--faint);margin:-4px 0 10px}
.bb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:10px}
.bb-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .15s}
.bb-card:hover{border-color:var(--line-2)}
.bb-main{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.bb-who{min-width:0}
.bb-name{font:650 16px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.bb-name:hover{text-decoration:underline;text-underline-offset:3px}
.bb-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:5px 0 0;font-size:12.5px;color:var(--ink-2)}
.bb-meta i{font-style:normal;color:var(--faint);margin-right:4px;font-weight:600}
.bb-acts{display:flex;align-items:center;gap:6px;flex:none}
.bb-like{font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--line-2);background:var(--panel-2);border-radius:var(--r);padding:7px 11px;white-space:nowrap;transition:background .15s,border-color .15s}
.bb-like:hover{background:var(--panel-3);border-color:var(--muted)}
.bb-like.off{color:var(--faint);background:transparent;cursor:help}
.bb-like.off:hover{background:transparent;border-color:var(--line-2)}
.bb-x{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:transparent;color:var(--muted);cursor:pointer;padding:0;transition:color .15s,border-color .15s}
.bb-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bb-x:hover{color:var(--down);border-color:var(--down)}
.bb-x:disabled{opacity:.5;cursor:default}
.acct input.bb-note{min-width:0;width:100%;border:1px solid var(--line);border-radius:999px;background:var(--bg-1);padding:8px 14px;font-size:13px;color:var(--ink);transition:border-color .15s}
.acct input.bb-note::placeholder{color:var(--faint)}
.acct input.bb-note:focus{outline:0;border-color:var(--act)}
.acct input.bb-note.saved{border-color:var(--up)}
.bb-race{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:border-color .15s}
a.bb-race:hover{border-color:var(--line-2)}
.bb-rn{width:34px;padding:7px 0;border-radius:4px;background:var(--panel-3);text-align:center;font-weight:700;font-size:13px}
.bb-rt{min-width:0;display:flex;flex-direction:column;gap:1px}
.bb-rt b{font-size:14px;font-weight:650}
.bb-rt span{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-rt small{font-size:12px;color:var(--muted)}
.bb-px{display:flex;gap:6px}
.bb-px > span{display:flex;flex-direction:column;align-items:center;gap:3px}
.bb-px i{font-style:normal;font-size:10.5px;color:var(--faint);font-weight:600}
.bb-px b{min-width:54px;text-align:center;background:var(--panel-3);border-radius:4px;padding:6px 8px;font-size:14px;font-weight:700}
.bb-res{font-size:12px;font-weight:700;border:1px solid var(--line-2);border-radius:4px;padding:5px 9px;color:var(--ink-2)}
.bb-res.won{background:var(--act);color:var(--act-ink);border-color:var(--act)}
.bb-empty{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;margin-top:16px;max-width:640px}
.bb-empty b{font-size:16px} .bb-empty p{color:var(--muted);margin:6px 0 0;font-size:14px} .bb-empty a{color:var(--act)}
@media (max-width:640px){
  .acct{padding-top:20px}
  .acct-plan{width:100%;justify-content:space-between}
  .acct-id h1{font-size:28px}
  .bb-card{padding:12px}
  .bb-main{flex-direction:column} .bb-acts{width:100%} .bb-like{flex:1;text-align:center}
  .bb-race{gap:10px;padding:10px} .bb-px b{min-width:48px;padding:6px 6px} .bb-rt span{white-space:normal}
}


/* entity pages: horse, jockey, trainer */
.ent-top{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.kv.ent-kv{grid-template-columns:repeat(3,1fr)}
.kv.ent-kv4{grid-template-columns:repeat(4,1fr)}
.kv b small{color:var(--muted);font-weight:500;font-size:12px}
.kv b a{color:var(--ink)}
.ent-book{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ent-book[hidden]{display:none}
.like-why{color:var(--ink-2);font-size:13px;max-width:300px} .like-tb td small{display:block} .like-next{display:block;white-space:nowrap;font-size:13px}
.agg-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
.agg-grid .tbl-wrap{margin:10px 0}
.elo-wrap{margin:10px 0 0}
.elo-svg{width:100%;max-width:520px;height:auto;display:block}
.tb td.pos,.tb b.pos{color:var(--up)} .tb td.neg,.tb b.neg{color:var(--down)}
.tb td.r,.tb th.r{text-align:right;white-space:nowrap}
.tb td small{color:var(--muted);font-weight:500;font-size:12px}
.tb td.race{min-width:150px} .tb td.race small{display:block}
.tb td.pos.w{color:var(--up)} .tb td.pos.p{color:var(--ink-2)}
.tb tr.w td:first-child{color:var(--up)}
.tb caption{text-align:left;font-size:12px;color:var(--muted);padding:8px 12px}
.ent-search{display:flex;gap:8px;margin:0 0 18px;max-width:520px}
.ent-search input{flex:1;border:1px solid var(--line-2);border-radius:var(--r);padding:11px 12px;font:inherit;font-size:15px;background:var(--panel);color:var(--ink);min-width:0}
.ent-search input::placeholder{color:var(--faint)}
.ent-search input:focus{outline:0;border-color:var(--act)}
.ent-list{columns:3;column-gap:18px;list-style:none;margin:10px 0 0;padding:0;font-size:14px}
.ent-list li{break-inside:avoid;padding:3px 0} .ent-list small{color:var(--muted);font-size:12px}
.prose section{margin-top:6px}
@media (max-width:640px){ .like-tb th:nth-child(3),.like-tb td:nth-child(3){display:none} .kv.ent-kv,.kv.ent-kv4{grid-template-columns:1fr 1fr} .agg-grid{grid-template-columns:1fr} .ent-list{columns:2} }
.det .ped a,.det h5 .ent-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.det h5 .ent-link{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.det h5 .asof{font-size:inherit;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;padding:52px 0 24px}
.hero h1{font-size:50px;letter-spacing:-.04em;line-height:1.02;margin:0;max-width:14ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--act)}
.hero p{font-size:17px;color:var(--ink-2);max-width:46ch;margin:18px 0 0;line-height:1.5}
.hero-actions{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.hero-actions .cta{padding:13px 20px;font-size:15px}
.hero-actions a.quiet{color:var(--muted);text-decoration:none;font-size:14px}
.hero-actions a.quiet:hover{color:var(--ink)}
.hero-proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--muted)}
.hero-proof b{color:var(--ink);font-weight:650}
.hero-panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.hero-panel .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.hero-panel .ph b{font-size:14px;font-weight:700}
.hero-panel .ph b::before{content:"";display:inline-block;width:9px;height:9px;background:var(--act);border-radius:50%;margin-right:9px;vertical-align:1px;animation:ignite 1.2s ease-out 1}
.hero-panel .ph span{font-size:12px;color:var(--muted)}
.hero-panel .pb-r{cursor:default}
.hero-panel .pb-r:hover{background:transparent}
.hero-panel .pf{padding:10px 16px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hero-panel .pf a{color:var(--ink)}
.hero-panel .pf em{font-style:normal;font-weight:650;color:var(--ink)}
.hero-panel .empty-plays{padding:16px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.now{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.now .dot{width:10px;height:10px;background:var(--live);border-radius:50%;flex:0 0 auto}
.now b{font-weight:650}
.now span{color:var(--muted)}
.now a{margin-left:auto;font-size:14px;color:var(--ink)}
.home section{padding:44px 0 0}
.home section h2{font-size:28px;letter-spacing:-.03em;margin:0 0 6px;line-height:1.1;text-wrap:balance}
.home section .sub{color:var(--muted);font-size:15px;margin:0 0 18px;max-width:60ch}
.rt-next{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rt-next a{text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:10px 12px;min-width:0}
.rt-next a:hover{border-color:var(--line-2);background:var(--panel-2)}
.rt-next .cd{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--panel-3)}
.rt-next .cd.soon{background:var(--live);color:var(--live-ink)}
.rt-next b{display:block;font-size:14px;margin-top:6px}
.rt-next small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-wins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rt-wins a{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--ink);display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.rt-wins a:hover{background:var(--panel-2)}
.rt-wins b{font-size:15px} .rt-wins small,.rt-wins span{grid-column:1;color:var(--muted);font-size:12px}
.rt-wins em{grid-column:2;grid-row:1/4;align-self:center;font-style:normal;font-weight:700;color:var(--up)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feat > div{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:14px 16px 14px;min-width:0}
.feat h3{margin:0 0 8px;font-size:15px;letter-spacing:-.01em;font-weight:650}
.feat p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.feat .live{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.feat .recs{grid-template-columns:repeat(2,1fr)}
.demo-race{margin-top:4px}
.home .plan{margin-top:4px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.how > div{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:16px}
.how h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em;font-weight:650}
.how p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.home footer{margin-top:64px;border-top:1px solid var(--line);padding:20px 0 40px;font-size:12px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.home footer a{color:var(--muted);text-decoration:none}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:22px;padding:36px 0 16px}
  .hero h1{font-size:40px}
  .feat,.how{grid-template-columns:1fr}
  .rt-next{grid-template-columns:1fr 1fr}
  .rt-wins{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero h1{font-size:34px}
  .hero p{font-size:16px}
  .home section{padding:34px 0 0}
  .home section h2{font-size:24px}
  .now a{margin-left:0}
}

/* ---------- runs read from our own sectionals: run cards, the run line, the people-page table ---------- */
svg.trace{display:block;width:100%;height:auto;overflow:visible}
svg.trace .ax{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
svg.trace line.up{stroke:var(--act);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg.trace line.dn{stroke:var(--faint);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg.trace line.eq{stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg.trace circle.pt{fill:var(--ink-2)} svg.trace circle.fin{fill:var(--ink)} svg.trace circle.won{fill:var(--act)}
svg.trace text.tk{fill:var(--faint);text-anchor:middle;font-family:var(--font)}  /* size is set on the element, in the chart's own units */
svg.trace text.pn{fill:var(--ink-2);text-anchor:middle;font-family:var(--font);font-weight:600;font-variant-numeric:tabular-nums}
svg.trace text.pn.f{fill:var(--ink);font-weight:700} svg.trace text.pn.won{fill:var(--act)}
.runs-list{margin-top:10px}
.run{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);margin:0 0 10px;overflow:hidden}
.run-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px 16px;border-bottom:1px solid var(--line)}
.run-fin{min-width:58px;text-align:center;border-radius:6px;background:var(--panel-3);padding:7px 8px 6px;border:1px solid var(--line-2)}
.run-fin b{display:block;font-family:var(--display);font-size:20px;line-height:1;font-weight:700;letter-spacing:-.02em}
.run-fin small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.run-fin.w{background:var(--act);border-color:var(--act);color:var(--act-ink)} .run-fin.w small{color:var(--act-ink);opacity:.75}
.run-fin.p{border-color:var(--ink-2)}
.run-l1{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.run-l1 b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.run-l1 a,.run-l1 span{font-size:13px;color:var(--muted);text-decoration:none} .run-l1 a:hover{color:var(--ink);text-decoration:underline}
.run-l2{font-size:12.5px;color:var(--muted);margin-top:2px}
.run-l3{font-size:12.5px;color:var(--muted);margin-top:2px} .run-l3 a{color:var(--ink-2);text-decoration:none} .run-l3 a:hover{color:var(--ink);text-decoration:underline}
.run-tags{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.tp{font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap;background:var(--bg-1)}
.tp.tp-hard{border-style:dashed}
.tag-rk{font-size:11.5px;color:var(--muted);white-space:nowrap}
.run-b{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:12px 16px 14px;align-items:start}
.run-trace{margin:0;background:var(--bg-1);border:1px solid var(--line);border-radius:6px;padding:8px 10px 8px}
.run-trace figcaption{font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.45}
.run-trace.none p{margin:0;font-size:12.5px;color:var(--muted)}
.run-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rc-cell{background:var(--bg-1);border:1px solid var(--line);border-radius:4px;padding:7px 9px;min-width:0}
.rc-cell span{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600}
.rc-cell b{display:block;font-size:15px;font-weight:700;margin-top:2px;font-family:var(--display)}
.rc-cell b em{font-style:normal;font-size:12px;font-weight:650;font-family:var(--font)} .rc-cell b em.pos{color:var(--up)} .rc-cell b em.dim{color:var(--muted)}
.rc-cell small{display:block;font-size:11px;color:var(--muted);line-height:1.35}
.rc-cell.best{border-color:var(--act)} .rc-cell.best b{color:var(--up)}
table.rt td{vertical-align:middle}
table.rt td.rt-fin{font-weight:700;white-space:nowrap} table.rt td.rt-fin small{color:var(--muted);font-weight:500}
table.rt td.rt-fin.w{color:var(--up)}
table.rt td.rt-race{min-width:140px} table.rt td.rt-race small{display:block;color:var(--muted);font-size:11.5px}
table.rt td.rt-run{width:120px;min-width:110px;padding-top:6px;padding-bottom:6px}
table.rt td.rt-run svg{max-width:110px}
table.rt .rt-gh{margin:0;height:10px;width:64px;display:inline-block;vertical-align:middle} table.rt td.r .rt-gh{width:44px}
@media (max-width:760px){
  .run-h{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px}
  .run-tags{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap}
  .run-b{grid-template-columns:1fr;padding:12px}
  .run-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:12px 0}
.stat-tiles > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.stat-tiles span{display:block;color:var(--faint);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.stat-tiles b{display:block;font-size:17px;margin-top:4px;font-weight:700;font-family:var(--display);letter-spacing:-.01em}
.stat-tiles b small{display:block;font-family:var(--font);font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px}
svg.trace text.yl{text-anchor:end}
/* the card's previous runs, traced */
.runs.rruns td.rrun{width:104px;padding-top:7px} .runs.rruns td.rrun svg{max-width:96px}
.runs.rruns td.l4c b{display:block;font-weight:700} .runs.rruns td.l4c b.best{color:var(--up);border:0;padding:0;margin:0;background:none} /* not the Best edges panel */ .runs.rruns td.l4c small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap}
.runs.rruns td.r small{display:block;font-size:10.5px}
.runs.rruns small.more-secs{color:var(--faint);font-size:11px}
.runs.rruns .tpi{color:var(--muted)}
.runs.rruns td.r small.pos{color:var(--up)}
table.rt td:nth-child(2){white-space:nowrap}
.det-runs{border-top:1px solid var(--line);padding:14px 0 16px}
.det-runs .runs.rruns td.rrun{width:150px} .det-runs .runs.rruns td.rrun svg{max-width:140px}
@media (max-width:640px){ .det-runs .runs.rruns td.rrun{width:100px} .det-runs .runs.rruns td.rrun svg{max-width:96px} }
.runs.rruns td:nth-child(2){width:auto;min-width:0}
.runs.rruns td.rrun{min-width:120px} .runs.rruns td.rrun svg{width:100%;min-width:96px}
/* ---------- members-only sectionals (14 Oct 2026): locked, never faked ----------
   The public page says which figures exist and prints none of them; blank bars stand where the numbers go. */
.sec-lock{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:12px 0;padding:12px 14px;border:1px solid var(--line-2);border-left:3px solid var(--act);border-radius:var(--r);background:var(--panel);font-size:13px;line-height:1.45;color:var(--ink-2)}
.sec-lock .lock-ico{flex:none;color:var(--act)}
.sec-lock span{flex:1 1 280px;min-width:0}
.sec-lock .cta{padding:8px 14px;font-size:13px}
.sec-lock .alt{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sec-lock .alt:hover{color:var(--ink)}
.det-runs .sec-lock{margin:10px 0 0}
.model-det .sec-lock{margin:0 0 12px}
.gh{display:block;height:12px;margin-top:8px;border-radius:3px;background:var(--panel-3);opacity:.7}
.gh-cell .gh{width:72%}
.gh-tiles .gh{width:60%;height:16px}
.gh-elo .gh{height:120px;width:100%;margin:0;border-radius:var(--r);background:var(--panel)}
.run-trace.ghost{display:flex;align-items:flex-start;gap:9px;min-height:64px;color:var(--muted)}
.run-trace.ghost .lock-ico{flex:none;margin-top:2px;color:var(--faint)}
.run-trace.ghost p{margin:0;font-size:12.5px;line-height:1.45}
.run-trace.ghost p small{display:block;margin-top:3px;font-size:11.5px;color:var(--faint)}
.run-b.run-b-none{grid-template-columns:1fr} .run-b-none .run-cells{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
/* the members gate on horse, jockey and trainer pages: the offer sits straight under the last open run, over blurred
   empty run cards or table rows. The ghost holds no data. */
.gate{position:relative;margin:0 0 10px;padding:24px 0 8px}
.gate-ghost{position:absolute;inset:0;overflow:hidden;filter:blur(2.5px);opacity:.6;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(#000 30%,transparent 95%);mask-image:linear-gradient(#000 30%,transparent 95%)}
.gate-ghost .run-trace{min-height:64px}
.gate-lines .gh{margin:0 0 9px;height:10px} .gate-lines .gh:nth-child(1){width:34%;height:13px} .gate-lines .gh:nth-child(2){width:56%} .gate-lines .gh:nth-child(3){width:78%;margin:0}
.gate-rows{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.gate-rows > div{display:grid;grid-template-columns:.5fr .8fr 1.5fr 1.3fr .6fr;gap:16px;padding:14px 14px;border-bottom:1px solid var(--line)}
.gate-rows .gh{margin:0;height:10px}
.gate-card{position:relative;max-width:520px;margin:0 auto;padding:22px 24px 20px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);text-align:center}
.gate-card .lock-ico{display:block;margin:0 auto;color:var(--act)}
.gate .gate-card h3{margin:10px 0 0;font-family:var(--display);font-size:19px;line-height:1.25;letter-spacing:-.01em}
.gate-card ul{list-style:none;margin:14px 0 18px;padding:0;text-align:left;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.gate-card li{position:relative;padding:0 0 0 22px;margin:0 0 7px} .gate-card li:last-child{margin:0}
.gate-card li::before{content:"";position:absolute;left:3px;top:5px;width:9px;height:5px;border:solid var(--act);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.gate-acts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px}
.gate-acts .alt{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .gate-acts .alt:hover{color:var(--ink)}
@media (max-width:640px){ .gate{padding-top:16px} .gate-card{padding:18px 16px} .gate .gate-card h3{font-size:17px} .gate-acts .cta{width:100%;justify-content:center} }
/* sign in: Google's standard four-colour G, left of the label, per their sign-in button guidelines */
.btn-google{width:100%;justify-content:center;gap:12px}
.btn-google svg{flex:none;display:block}
/* void plays and abandoned races: not a result, so no win or loss colour, struck through on the race strip */
.pb-void{padding:9px 16px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.pb-res.abandoned,.pb-res.scratched,.rp.abandoned .res span,.rp.scratched .res span,.day .res.abandoned{color:var(--faint);border-style:dashed}
.verdict.ab{background:transparent;color:var(--faint);border-style:dashed}
.racenav button.ab{color:var(--faint);border-style:dashed;text-decoration:line-through}
/* a coming-soon meeting's results: on a phone the run line shrinks so the horse keeps the room */
@media (max-width:640px){.runs.soonres td.rrun{width:66px;min-width:0}.runs.soonres td.rrun svg{max-width:62px;min-width:0}.runs.soonres td.l4c{width:58px}}

/* ---------- the finder: every runner on the card, filtered; a sentence turned into a filter ---------- */
.finder{padding-top:28px}
.finder h1{font-size:34px;letter-spacing:-.035em;margin:0 0 6px}
.fp{display:flex;gap:8px;align-items:stretch;margin:16px 0 10px}
.fp input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px}
.fp input::placeholder{color:var(--faint)}
.fp input:focus-visible{outline:2px solid var(--act);outline-offset:1px}
.fp-ex{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.fp-ex span{font-size:11px;color:var(--faint);align-self:center;margin-right:2px}
.fp-ex button,.f-read .alt,.f-saved .alt{border:1px solid var(--line-2);background:var(--panel-2);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;line-height:1.35;transition:border-color .12s,color .12s}
.fp-ex button:hover,.f-read .alt:hover,.f-saved .alt:hover{border-color:var(--muted);color:var(--ink)}
.f-read{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px;margin-bottom:10px;font-size:13px;color:var(--muted)}
.f-read .lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-right:2px}
.f-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink-2);background:var(--panel);border-radius:999px;padding:4px 6px 4px 11px;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.f-chip button{border:0;background:var(--panel-3);color:var(--muted);width:18px;height:18px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.f-chip button:hover{background:var(--line-2);color:var(--ink)}
.f-read .note{flex-basis:100%;font-size:12.5px;color:var(--muted);line-height:1.5}
.f-read .note b{color:var(--ink);font-weight:600}
.f-read .ai{color:var(--act);font-weight:600}
.f-facets{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);margin:0 0 14px}
.f-facets summary{cursor:pointer;padding:12px 16px;font-weight:650;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:10px}
.f-facets summary::-webkit-details-marker{display:none}
.f-facets summary::after{content:"▾";margin-left:auto;color:var(--faint);transition:transform .15s}
.f-facets[open] summary::after{transform:rotate(180deg)}
.f-facets summary small{color:var(--muted);font-weight:500}
.f-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:8px;align-items:start;padding:12px;border-top:1px solid var(--line)}
.f-g{display:flex;flex-direction:column;gap:6px;padding-top:10px}
.f-g h6{margin:0 0 2px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.f-g label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer;min-height:24px}
.f-g label input[type=checkbox]{accent-color:var(--act);width:15px;height:15px;margin:0}
.f-g select,.f-g input[type=number],.f-g input[type=text]{font:inherit;font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:5px 8px;min-width:0}
.f-g input[type=number]{width:74px}
.f-g .pair{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.f-g .pair input{width:70px}
.f-g select{appearance:none;-webkit-appearance:none;padding-right:24px;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d6e0ea' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center}
.f-g select:focus-visible,.f-g input:focus-visible{outline:2px solid var(--act);outline-offset:1px}
.f-g .sel-row{display:flex;flex-wrap:wrap;gap:6px}
.f-g .sel-row label{border:1px solid var(--line-2);border-radius:999px;padding:3px 10px 3px 7px;font-size:12px;min-height:0;background:var(--panel-2)}
.f-g .sel-row label:has(input:checked){border-color:var(--ink-2);color:var(--ink);background:var(--panel-3)}
/* Finder, 23 Oct 2026: six key filters always in view under the search box, the rest grouped under More filters, each
   group closed until opened or set. The day the finder runs over is named, and picked under Card. */
.f-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.f-head .lede{margin-bottom:14px}
.f-day{margin:0 0 14px}
.f-day label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.f-day select{font:inherit;font-size:13px;color:var(--ink);background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d6e0ea' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;border:1px solid var(--line-2);border-radius:var(--r);padding:7px 28px 7px 10px;appearance:none;-webkit-appearance:none;cursor:pointer}
.f-note{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:11px 14px;margin:0 0 14px;font-size:13.5px;color:var(--ink-2);max-width:none}
.f-note b{color:var(--ink)}
.f-key{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:0 0 10px}
.f-k{background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.f-k > span{font-size:11px;font-weight:600;color:var(--faint)}
.f-k select,.f-k input[type=number]{font:inherit;font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:6px 8px;min-width:0}
.f-k select{appearance:none;-webkit-appearance:none;padding-right:24px;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d6e0ea' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center}
.f-k .pair{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.f-k .pair input{width:64px}
.f-k .sel-row{display:flex;flex-wrap:wrap;gap:6px}
.f-k label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer}
.f-k input[type=checkbox]{accent-color:var(--act);width:15px;height:15px;margin:0}
.f-k .sel-row label{border:1px solid var(--line-2);border-radius:999px;padding:3px 10px 3px 7px;font-size:12px;background:var(--panel-2)}
.f-k .sel-row label:has(input:checked){border-color:var(--ink-2);color:var(--ink);background:var(--panel-3)}
@media (max-width:900px){ .f-key{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .f-key{grid-template-columns:repeat(2,minmax(0,1fr))} .f-key .f-k-lane{grid-column:1/-1} .f-k .pair input{width:52px} }
.f-k select:focus-visible,.f-k input:focus-visible{outline:2px solid var(--act);outline-offset:1px}
.f-sec{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r)}
.f-sec[open]{border-color:var(--line-2)}
.f-sec summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:650;color:var(--ink)}
.f-sec summary::-webkit-details-marker{display:none}
.f-sec summary::after{content:"+";margin-left:auto;color:var(--faint);font-weight:500;font-size:16px;line-height:1}
.f-sec[open] summary::after{content:"−"}
.f-sec summary small{font-size:11px;font-weight:700;color:var(--act-ink);background:var(--act);border-radius:999px;padding:2px 7px}
.f-sec summary small:empty{display:none}
.f-sec .f-g{padding:2px 12px 12px}
.f-body .f-reset{grid-column:1/-1}
.f-g .sel-row input{width:13px;height:13px}
.f-reset{grid-column:1 / -1;display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);padding-top:4px}
.f-reset button{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:var(--r);padding:5px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.f-reset button:hover{border-color:var(--muted);color:var(--ink)}
.f-saved{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.f-saved:empty{display:none}
.f-saved .eyebrow{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-right:4px}
.f-saved .sv{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-2);border-radius:999px;padding:3px 4px 3px 11px;background:var(--panel-2);font-size:12.5px;line-height:1.3}
.f-saved .sv.on{border-color:var(--act);background:var(--act-soft)}
.f-saved .sv > button:first-child{border:0;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;padding:0}
.f-saved .sv small{color:var(--muted);font-size:11px;margin-left:2px}
.f-saved .sv .x{border:0;background:var(--panel-3);color:var(--muted);width:18px;height:18px;border-radius:50%;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.f-saved .sv .x:hover{background:var(--line-2);color:var(--ink)}
.f-saved form{display:flex;gap:6px;margin-left:auto;align-items:center}
.f-saved form input{font:inherit;font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:6px 10px;width:200px;max-width:50vw}
.f-saved form button{border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);border-radius:var(--r);padding:6px 11px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;white-space:nowrap}
.f-saved form button:hover{border-color:var(--muted)}
.f-saved .note{font-size:12.5px;color:var(--muted)} .f-saved .note a{color:var(--ink)}
.f-count{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 10px;font-size:13px;color:var(--muted)}
.f-count b{color:var(--ink);font-size:20px;letter-spacing:-.02em;font-family:var(--display)}
.f-count .lock{color:var(--muted)} .f-count .lock a{color:var(--ink)}
.f-meet{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.f-meet > h2{margin:0;padding:11px 16px;font-size:16px;letter-spacing:-.02em;display:flex;gap:10px;align-items:baseline;background:var(--panel-2);border-bottom:1px solid var(--line)}
.f-meet > h2 small{font-size:12px;color:var(--muted);font-weight:500}
.f-race{padding:8px 16px 4px;border-top:1px solid var(--line)} .f-race:first-of-type{border-top:0}
.f-race > a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--ink);font-size:13px;padding:4px 0 6px}
.f-race > a b{font-weight:700} .f-race > a span{color:var(--muted);font-size:12px} .f-race > a em{margin-left:auto;font-style:normal;color:var(--act);font-weight:600;font-size:12px;white-space:nowrap}
.f-race > a:hover em{text-decoration:underline;text-underline-offset:3px}
.f-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);min-width:0;flex-wrap:wrap}
.f-row .rk{flex:0 0 38px;min-height:34px} .f-row .rk.none{border-style:dashed;color:var(--faint);background:transparent}
.f-row .name{font-size:14px;font-weight:650;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.f-row .name:hover{text-decoration:underline;text-underline-offset:3px}
.f-row .meta{font-size:11px;color:var(--faint);white-space:nowrap}
.f-row .f-who{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 140px}
.f-row .tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.f-row .price{margin-left:auto}
.f-row .pl{white-space:nowrap}
.f-empty{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;background:var(--panel);color:var(--muted);font-size:14px;line-height:1.55}
/* the member box on the finder sits in the flow under the results, not over the page like the race card's overlay */
.f-unlock{position:static;inset:auto;transform:none;display:block;margin:8px 0 0;padding:0;background:none;backdrop-filter:none}
.f-unlock .box{position:static;transform:none;max-width:none;margin:0;box-shadow:none;text-align:left;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:18px 20px}
.f-unlock .box b{flex-basis:100%;font-size:16px} .f-unlock .box p{flex:1 1 320px;margin:0;color:var(--muted);font-size:13.5px;line-height:1.55} .f-unlock .box .cta{white-space:nowrap;width:auto} .f-unlock .box .alt{font-size:12.5px;color:var(--muted)}
.f-empty b{color:var(--ink)}
@media (max-width:640px){
  .finder{padding-top:18px} .finder h1{font-size:28px}
  .fp{flex-direction:column} .fp .cta{justify-content:center}
  .f-saved form{margin-left:0;width:100%} .f-saved form input{flex:1;max-width:none}
  .f-row .f-who{flex-basis:100%;order:5} .f-row .name{max-width:50vw}
}

/* The asks at the foot of an open race: a well like the speed map's, headed by the guide's mark and a label, with
   one ghost button per ask (icon, title, a muted line saying what it reads). Two columns on a phone. */
.ask{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-1);padding:10px 12px 12px;margin:10px 0 12px}
.ask-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ask-av{width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto}
.ask-av img{width:15px;height:auto;display:block}
.ask-h b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.ask-h span:last-child{font-size:12px;color:var(--muted)}
.ask-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ask-b button,.ask-b a{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-2);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s}
.ask-b svg{flex:0 0 auto;margin-top:1px;color:var(--muted);transition:color .12s}
.ask-b button:hover svg,.ask-b a:hover svg{color:var(--ink)}
.ask-b span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ask-b b{font-size:13px;font-weight:650}
.ask-b small{font-size:11.5px;color:var(--muted);margin-top:2px}
.ask-b button:hover,.ask-b a:hover{background:var(--panel-3);border-color:var(--muted)}
.ask-b button:active,.ask-b a:active{transform:translateY(1px)}
@media (max-width:640px){.ask-b{grid-template-columns:1fr 1fr}.ask-b button,.ask-b a{padding:9px 10px;gap:7px}.ask-b small{font-size:11px}}
@media (prefers-reduced-motion:reduce){.ask-b button,.ask-b a{transition:none}}