/* OddsRaptor — an iOS-inspired design system.
 *
 * Built for the iPhone first, because that is where members are: Apple's system typeface, the
 * iOS colour roles (label / secondary label / grouped background / separator), frosted "material"
 * bars, rounded corners, and the brand lime used the way iOS uses a tint.
 * Dark by default (the brand is a near-black logo); Light when the member picks it, or on Auto
 * when the device is in light mode (static/theme.js sets `data-theme` on <html> before paint).
 *
 * Two lime roles, never swapped: `--tint*` FILLS (buttons, capsules: dark ink on bright lime,
 * readable in both schemes) and `--tint-text` for lime TEXT (a darker lime in light mode, so it
 * clears 4.5:1 on white). The contrast figures in the comments were measured, not guessed.
 *
 * The CSP is `style-src 'self'`: no inline style attributes anywhere, everything lives here.
 * Hover styles live only under `(hover: hover)`, so a tap on a phone never leaves a row lit. */

/* ============================================================ tokens */

:root {
  color-scheme: dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable",
          "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --fill: rgba(118, 118, 128, .24);
  --fill-2: rgba(118, 118, 128, .18);
  --fill-3: rgba(118, 118, 128, .12);
  --label: #fff;
  --label-2: rgba(235, 235, 245, .64);
  --label-3: rgba(235, 235, 245, .32);          /* marks only (chevrons, grabber), never text */
  --placeholder: rgba(235, 235, 245, .5);
  --tabgray: #98989f;
  --sep: rgba(84, 84, 88, .55);
  --hairline: rgba(255, 255, 255, .07);
  --field-border: transparent;

  --tint: #a3e635;
  --tint-hi: #c2f36b;
  --tint-lo: #84cc16;
  --tint-ink: #0c1400;
  --tint-soft: rgba(163, 230, 53, .15);
  --tint-text: #b9f15d;
  --ring: #b9f15d;

  --red-text: #ff6961;
  --warn-text: #ffb340;
  --pill-orange: #ffb340;
  --pill-red: #ff8a80;
  --confirm-red: #c4001a;
  --seg-track: rgba(118, 118, 128, .24);
  --seg-on: #636366;

  --c-red: #ff453a; --c-orange: #ff9f0a; --c-yellow: #ffd60a; --c-green: #30d158;
  --c-teal: #40c8e0; --c-blue: #0a84ff; --c-indigo: #5e5ce6; --c-purple: #bf5af2;
  --c-pink: #ff375f; --c-brown: #ac8e68; --c-gray: #8e8e93; --c-lime: #84cc16;

  --glass: rgba(22, 22, 24, .74);
  --glass-border: rgba(255, 255, 255, .09);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 28px rgba(0, 0, 0, .32);
  --lift: 0 16px 36px rgba(0, 0, 0, .45);
  --btn-glow: 0 4px 12px rgba(163, 230, 53, .14);

  --r-xl: 22px; --r-l: 16px; --r-m: 12px; --r-s: 10px;
  --tabbar-h: 58px;
  --topbar-h: 56px;
  --sidebar-w: 252px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Light. Chosen (`data-theme="light"`, set before paint by static/theme.js from the member's
   setting or Auto) — and, only if that script never ran, the device's own scheme. The two
   blocks are the same list; tests/test_web_theme.py keeps them identical. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --surface: #fff;
  --surface-2: #f2f2f7;
  --surface-3: #e5e5ea;
  --fill: rgba(120, 120, 128, .16);
  --fill-2: rgba(120, 120, 128, .12);
  --fill-3: rgba(118, 118, 128, .08);
  --label: #000;
  --label-2: rgba(60, 60, 67, .78);            /* 5.6:1 on white, 5.3:1 on #f2f2f7 */
  --label-3: rgba(60, 60, 67, .3);
  --placeholder: rgba(60, 60, 67, .62);
  --tabgray: #737378;
  --sep: rgba(60, 60, 67, .2);
  --hairline: rgba(0, 0, 0, .06);
  --field-border: rgba(60, 60, 67, .16);
  /* Lime FILLS stay bright with dark ink in light mode too: white on lime measured 1.98:1. */
  --tint: #a3e635;
  --tint-hi: #bef264;
  --tint-lo: #84cc16;
  --tint-ink: #1a2e05;
  --tint-soft: rgba(132, 204, 22, .16);
  --tint-text: #3f6212;                        /* 7.1:1 on white, 6.2:1 on its own soft pill */
  --ring: #3f6212;
  --red-text: #d70015;                         /* Apple's increased-contrast red: 5.4:1 */
  --warn-text: #a14a00;
  --pill-orange: #8a3f00;                      /* on its own orange tint: AA at 12px */
  --pill-red: #b8000f;
  --confirm-red: #c4001a;
  --seg-track: rgba(118, 118, 128, .12);
  --seg-on: #fff;
  --c-red: #ff3b30; --c-orange: #ff9500; --c-yellow: #ffcc00; --c-green: #34c759;
  --c-teal: #30b0c7; --c-blue: #007aff; --c-indigo: #5856d6; --c-purple: #af52de;
  --c-pink: #ff2d55; --c-brown: #a2845e; --c-gray: #8e8e93; --c-lime: #65a30d;
  --glass: rgba(249, 249, 251, .8);
  --glass-border: rgba(0, 0, 0, .08);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
  --lift: 0 14px 32px rgba(0, 0, 0, .12);
  --btn-glow: 0 1px 2px rgba(0, 0, 0, .12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f2f2f7;
    --surface: #fff;
    --surface-2: #f2f2f7;
    --surface-3: #e5e5ea;
    --fill: rgba(120, 120, 128, .16);
    --fill-2: rgba(120, 120, 128, .12);
    --fill-3: rgba(118, 118, 128, .08);
    --label: #000;
    --label-2: rgba(60, 60, 67, .78);            /* 5.6:1 on white, 5.3:1 on #f2f2f7 */
    --label-3: rgba(60, 60, 67, .3);
    --placeholder: rgba(60, 60, 67, .62);
    --tabgray: #737378;
    --sep: rgba(60, 60, 67, .2);
    --hairline: rgba(0, 0, 0, .06);
    --field-border: rgba(60, 60, 67, .16);
    /* Lime FILLS stay bright with dark ink in light mode too: white on lime measured 1.98:1. */
    --tint: #a3e635;
    --tint-hi: #bef264;
    --tint-lo: #84cc16;
    --tint-ink: #1a2e05;
    --tint-soft: rgba(132, 204, 22, .16);
    --tint-text: #3f6212;                        /* 7.1:1 on white, 6.2:1 on its own soft pill */
    --ring: #3f6212;
    --red-text: #d70015;                         /* Apple's increased-contrast red: 5.4:1 */
    --warn-text: #a14a00;
    --pill-orange: #8a3f00;                      /* on its own orange tint: AA at 12px */
    --pill-red: #b8000f;
    --confirm-red: #c4001a;
    --seg-track: rgba(118, 118, 128, .12);
    --seg-on: #fff;
    --c-red: #ff3b30; --c-orange: #ff9500; --c-yellow: #ffcc00; --c-green: #34c759;
    --c-teal: #30b0c7; --c-blue: #007aff; --c-indigo: #5856d6; --c-purple: #af52de;
    --c-pink: #ff2d55; --c-brown: #a2845e; --c-gray: #8e8e93; --c-lime: #65a30d;
    --glass: rgba(249, 249, 251, .8);
    --glass-border: rgba(0, 0, 0, .08);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
    --lift: 0 14px 32px rgba(0, 0, 0, .12);
    --btn-glow: 0 1px 2px rgba(0, 0, 0, .12);
  }
}

/* ============================================================ base */

* { box-sizing: border-box; }
/* `clip`, not `hidden`: nothing wider than the screen can make the page pan sideways, and no
   scroll container is created, so the sticky top bar and sidebar keep working. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip;
       scrollbar-gutter: stable; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--label);
  font: 16px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  overflow-x: clip;
}
a { color: var(--tint-text); text-decoration: none; }
b, strong { font-weight: 650; }
code { font-family: var(--mono); font-size: .9em; background: var(--fill-3); padding: 1px 6px;
       border-radius: 6px; }
::selection { background: var(--tint-soft); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; }

h1 { font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -.012em; margin: 0 0 6px; }
h2 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
h3 { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
p { margin: 0 0 12px; }
.muted { color: var(--label-2); }
.lede { color: var(--label-2); font-size: 17px; margin: 0 0 20px; max-width: 62ch; }

@media (hover: hover) {
  a:hover { text-decoration: underline; text-underline-offset: 2px; }
}

/* ============================================================ top bar (material) */

.topbar {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: .5px solid var(--sep);
}
.topbar-inner { height: var(--topbar-h); display: flex; align-items: center; gap: 10px;
                padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
/* Logged out, the bar lines up with the centred 1120px column below it. */
body.no-nav .topbar-inner { max-width: 1120px; margin: 0 auto;
                            padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--label); font-size: 18px; min-width: 0; }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; display: block; flex: 0 0 auto;
               box-shadow: 0 0 0 .5px var(--glass-border), 0 2px 8px rgba(0, 0, 0, .25); }
.wordmark { font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.wordmark b { color: var(--tint-text); font-weight: 750; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.toplink { color: var(--label); font-size: 15px; font-weight: 500; padding: 0 10px; border-radius: 10px;
           white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.avatar {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: var(--tint-ink);
  background: linear-gradient(160deg, var(--tint-hi), var(--tint-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* 44px target */
.avatar:active { filter: brightness(.92); }
/* What's new (web/changelog.py): the topbar link, its unseen dot, and the page's entries. */
.wnlink { position: relative; }
.wndot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
         background: var(--c-red); box-shadow: 0 0 0 2px var(--bg); }
.wnlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.wnitem h2 { font-size: 17px; margin: 4px 0 6px; }
.wnitem p { margin: 0 0 6px; color: var(--label-2); }
.wnmeta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); }
.wnnew { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
         background: color-mix(in srgb, var(--c-red) 14%, transparent); color: var(--c-red); }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px;
           border: 0; background: transparent; color: var(--label-2); cursor: pointer; }
.iconbtn .icon { width: 22px; height: 22px; }
.topbar .btn-sm { position: relative; }
.topbar .btn-sm::after { content: ""; position: absolute; inset: -4px 0; }
@media (hover: hover) {
  .brand:hover, .avatar:hover, .toplink:hover { text-decoration: none; }
  .toplink:hover, .iconbtn:hover { background: var(--fill-2); color: var(--label); }
}
@media (max-width: 400px) {
  .toplink { padding: 0 6px; font-size: 14.5px; }
  .topbar .btn-sm { padding: 0 11px; font-size: 14px; }
}
@media (max-width: 374px) { body.no-nav .wordmark { display: none; } }

/* ============================================================ shell + sidebar */

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; }
body.nav-anim .shell { transition: grid-template-columns .25s var(--ease); }
body.nav-collapsed .shell { grid-template-columns: 0 minmax(0, 1fr); }
body.nav-collapsed .sidenav { visibility: hidden; opacity: 0; }
main { min-width: 0; padding: 26px 32px 64px; }
main > * { max-width: 1240px; }
main.public { max-width: 1120px; margin: 0 auto; width: 100%;
              padding: 18px max(20px, env(safe-area-inset-right)) 64px max(20px, env(safe-area-inset-left)); }
@media (min-width: 901px) {
  /* Sidebar hidden: the 1240px column centres instead of hugging the left edge. */
  body.nav-collapsed main { padding-left: max(32px, calc((100% - 1240px) / 2));
                            padding-right: max(32px, calc((100% - 1240px) / 2)); }
}
/* Public pages: the footer rests at the bottom of a short page instead of floating mid-screen. */
body.no-nav { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.no-nav main.public { flex: 1 0 auto; }

.sidenav {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top));
  height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top));
  overflow-y: auto; padding: 14px 12px 24px;
  border-right: .5px solid var(--sep);
  transition: opacity .2s var(--ease), visibility .2s;
}
.navsec { margin-bottom: 12px; }
.navhead { font-size: 12.5px; font-weight: 650; color: var(--label-2); padding: 0 12px 5px; }
.navitem {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px;
  padding: 5px 10px; margin: 1px 0; border-radius: 11px; border: 0; background: none;
  color: var(--label); font: inherit; font-size: 15px; font-weight: 500; text-align: left;
  cursor: pointer; transition: background .15s var(--ease);
}
.navitem:active { background: var(--fill-2); transition: none; }
.navitem.on { background: var(--tint-soft); color: var(--tint-text); font-weight: 650; }
.signout { margin-top: 4px; padding-top: 8px; border-top: .5px solid var(--sep); }
@media (hover: hover) {
  .navitem:hover { background: var(--fill-3); text-decoration: none; }
  .navitem.on:hover { background: var(--tint-soft); }
}

/* iOS "settings" icons: a coloured rounded square behind a white glyph */
.tileicon {
  flex: 0 0 auto; display: grid; place-items: center; color: #fff;
  border-radius: 8px; width: 30px; height: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%), var(--tc, var(--c-gray));
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .3);
}
.tileicon.sm { width: 28px; height: 28px; border-radius: 7.5px; }
.tileicon.lg { width: 46px; height: 46px; border-radius: 12px; }
.tileicon .glyph { width: 62%; height: 62%; }
.c-red { --tc: var(--c-red); } .c-orange { --tc: var(--c-orange); } .c-yellow { --tc: var(--c-yellow); }
.c-green { --tc: var(--c-green); } .c-teal { --tc: var(--c-teal); } .c-blue { --tc: var(--c-blue); }
.c-indigo { --tc: var(--c-indigo); } .c-purple { --tc: var(--c-purple); } .c-pink { --tc: var(--c-pink); }
.c-brown { --tc: var(--c-brown); } .c-gray { --tc: var(--c-gray); } .c-lime { --tc: var(--c-lime); }

/* ============================================================ iPhone / iPad tab bar */

.tabbar { display: none; }

@media (max-width: 900px) {
  .shell { display: block; }
  .sidenav, .sidebar-toggle { display: none; }
  main { padding: 18px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
  main.public { padding-bottom: 48px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-top: .5px solid var(--sep);
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
         gap: 3px; padding-top: 3px; min-height: 48px; color: var(--tabgray); font-size: 10.5px;
         font-weight: 500; -webkit-user-select: none; user-select: none; }
  .tab .tabicon { width: 27px; height: 27px; stroke-width: 1.8; transition: transform .2s var(--ease); }
  .tab.on { color: var(--tint-text); font-weight: 600; }
  .tab.on .tabicon { stroke-width: 2.1; }
  .tab:active .tabicon { transform: scale(.88); }
}
/* Seven tabs (`tools.phone_tabs`: Today and Today's promos added): a little narrower. */
@media (max-width: 900px) {
  .tabbar[data-tabs="7"] { grid-template-columns: repeat(7, 1fr);
    padding-left: max(2px, env(safe-area-inset-left)); padding-right: max(2px, env(safe-area-inset-right)); }
  .tabbar[data-tabs="7"] .tab { font-size: 9.5px; letter-spacing: -.1px; white-space: nowrap; }
  .tabbar[data-tabs="7"] .tab .tabicon { width: 25px; height: 25px; }
}
/* iPad portrait: the tabs stay grouped in the middle, as iPadOS draws them. */
@media (min-width: 641px) and (max-width: 900px) {
  .tabbar { grid-template-columns: repeat(5, minmax(0, 120px)); justify-content: center; }
  .tabbar[data-tabs="7"] { grid-template-columns: repeat(7, minmax(0, 110px)); }
  .tabbar[data-tabs="7"] .tab { font-size: 10.5px; }
}
@media (hover: hover) { .tab:hover { text-decoration: none; } }

/* ============================================================ titles */

.largetitle { margin: 4px 0 18px; }
.largetitle h1 { margin: 0; }
.largetitle .lede { margin-top: 6px; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
            flex-wrap: wrap; margin-bottom: 4px; }
.pagehead .lede { margin-bottom: 16px; }
.cmdhead { margin-bottom: 8px; }
.cmdhead .titlerow { display: flex; align-items: center; gap: 14px; }
.cmdhead h1 { margin: 0; }
.cmdhead .lede { margin: 12px 0 16px; }
.slash { font-family: var(--mono); color: var(--tint-text); font-size: 13px; font-weight: 600; }
.readable { max-width: 760px; }

/* ============================================================ cards / panels */

.panel, .card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
  border: .5px solid var(--hairline);
}
.panel h2 { margin-bottom: 14px; }
.flush { padding: 0; overflow: hidden; }
.panelhead { padding: 18px 20px 4px; }

.narrow { max-width: 440px; margin: 34px auto; }
.narrow .panel { padding: 26px 24px 24px; }
.w560 { max-width: 560px; }
.accesssteps { margin: 0; padding-left: 22px; } .accesssteps li { margin: 0 0 8px; }

.notice {
  display: block; padding: 13px 16px; border-radius: var(--r-l); margin-bottom: 14px;
  background: var(--tint-soft); color: var(--label); font-size: 15px;
  border: .5px solid color-mix(in srgb, var(--tint-lo) 35%, transparent);
}
.notice.warn { background: color-mix(in srgb, var(--c-orange) 14%, transparent);
               border-color: color-mix(in srgb, var(--c-orange) 35%, transparent); }
.notice.bad { background: color-mix(in srgb, var(--c-red) 12%, transparent);
              border-color: color-mix(in srgb, var(--c-red) 35%, transparent); }
.notice.trialbar { text-decoration: none; font-size: 14px; }
.error { color: var(--red-text); font-size: 15px; margin-top: 12px; font-weight: 500; }

/* ============================================================ buttons */

.btn, button.primary, button.ghost, .discordbtn, .codebox {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-m); border: 0;
  font: inherit; font-size: 16px; font-weight: 650;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s var(--ease), filter .15s var(--ease), background .15s var(--ease);
}
.btn:active, button.primary:active, button.ghost:active, .discordbtn:active, .codebox:active {
  transform: scale(.97); filter: brightness(.93); }

/* The glossy primary: a lit lime gradient, a hairline highlight on top, dark ink (7:1 and up). */
.btn-primary, button.primary {
  color: var(--tint-ink);
  background: linear-gradient(180deg, var(--tint-hi) 0%, var(--tint) 55%, var(--tint-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .08), var(--btn-glow);
}
button.primary { margin-top: 18px; }
button.primary:disabled { opacity: .5; cursor: progress; transform: none; }

.btn-secondary, button.ghost { color: var(--label); background: var(--fill); }
button.ghost { min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; }

/* Destructive, the iOS way: red text on a plain row, not a glowing red slab. */
.btn-danger { color: var(--red-text); background: var(--surface); font-weight: 600;
              box-shadow: var(--card-shadow); border: .5px solid var(--hairline); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14.5px; border-radius: 10px; }
.btn.btn-block, button.btn-block { width: 100%; min-height: 50px; font-size: 17px; }

.discordbtn { color: #fff; background: linear-gradient(180deg, #7086ff, #5865f2 60%, #4a55d6);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.discordbtn .icon { width: 22px; height: 22px; }
.narrow .discordbtn { width: 100%; min-height: 50px; }

.codebox { color: var(--label); background: var(--fill); font-weight: 600; }
.codebox.mono { font-family: var(--mono); letter-spacing: .06em; color: var(--tint-text); }

.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--tint-text);
           cursor: pointer; font-size: 15px; min-height: 44px; }
.inline { display: inline; margin: 0; }

@media (hover: hover) {
  .btn:hover, button.primary:hover, button.ghost:hover, .discordbtn:hover, .codebox:hover { text-decoration: none; }
  .btn-primary:hover, button.primary:hover, .discordbtn:hover { filter: brightness(1.05); }
  .btn-secondary:hover, button.ghost:hover { filter: brightness(1.12); }
  .linkish:hover { text-decoration: underline; }
}

.orline { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--label-2);
          font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.orline::before, .orline::after { content: ""; flex: 1; height: .5px; background: var(--sep); }

/* ============================================================ form controls */

label { display: block; font-size: 13px; font-weight: 600; color: var(--label-2); margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 46px; padding: 11px 14px; font: inherit; font-size: 16px;
  color: var(--label); background: var(--fill-2); border: 1px solid var(--field-border);
  border-radius: var(--r-m); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--tint-soft); }
select {
  padding-right: 38px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
select option { background: var(--surface); color: var(--label); }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: .4; }

.field { min-width: 0; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { flex: 1 1 170px; }
.filters .grow { flex: 2 1 240px; }
.filters label { margin-top: 0; }
/* A field's hint (the command's own option description) is one quiet line; the whole of it opens
   when the field has focus, which is when a member is actually deciding what to type. */
.hint { display: block; color: var(--label-2); font-size: 12.5px; line-height: 1.35; margin-top: 5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field:focus-within .hint { white-space: normal; overflow: visible; }
.req { color: var(--tint-text); }

/* iOS switch row: label leading, switch trailing, sentence case. */
.switch { display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
          margin: 12px 0 0 !important; cursor: pointer; color: var(--label) !important;
          font-size: 16px !important; font-weight: 500 !important; position: relative; min-height: 44px; }
.switch .knob { order: 2; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .knob { width: 51px; height: 31px; border-radius: 999px; background: var(--fill);
                position: relative; flex: 0 0 auto; transition: background .25s var(--ease); }
.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
                       border-radius: 50%; background: #fff;
                       box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06);
                       transition: transform .25s var(--ease); }
.switch input:checked + .knob { background: var(--c-green); }
.switch input:checked + .knob::after { transform: translateX(20px); }
.switch input:focus-visible + .knob { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Checklists (settings: books / sports): the iOS list with a trailing tint checkmark. */
.panel.list { padding: 0 18px; overflow: hidden; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 28px;
             margin-bottom: -1px; }
.checkgrid label { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 48px;
                   padding: 10px 2px; color: var(--label); font-size: 16px; font-weight: 500;
                   cursor: pointer; border-bottom: .5px solid var(--sep); }
.checkgrid label:active { background: var(--fill-3); }
.checkgrid input { order: 2; margin: 0 0 0 auto; -webkit-appearance: none; appearance: none;
                   width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center;
                   border: 0; background: none; cursor: pointer; }
.checkgrid input:checked::after { content: ""; width: 7px; height: 13px; margin-top: -3px;
                   border: solid var(--tint-text); border-width: 0 2.6px 2.6px 0; transform: rotate(45deg); }
.checkgrid input:focus-visible { outline: 3px solid var(--ring); outline-offset: 0; }

/* Segmented control. Segments size to their text (a count can be 4 digits) and shrink before
   they overflow; the counts are the first thing to go on the narrowest phones. */
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; background: var(--seg-track);
       min-width: 0; max-width: 100%; }
.seg button { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; font-weight: 500;
              padding: 0 12px; min-height: 34px; border: 0; border-radius: 8px; background: transparent;
              color: var(--label); cursor: pointer; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; transition: background .2s var(--ease), box-shadow .2s; }
.seg button.on { background: var(--seg-on); font-weight: 600;
                 box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
.seg .count { color: var(--label-2); font-variant-numeric: tabular-nums; }
/* The same control as a radio group, for a form (Settings → Show stakes as). The input stays
   in the tab order and drives the look; the segment is its label. */
.fieldlabel { display: block; font-size: 13px; font-weight: 600; color: var(--label-2); margin: 0 0 6px; }
.segradio { display: flex; width: 100%; } /* 42 + its 2px track = an input's 46px */
.segradio label { flex: 1 1 0; position: relative; margin: 0; display: grid; place-items: center;
                  min-height: 42px; border-radius: 8px; font-size: 15px; font-weight: 500;
                  color: var(--label); cursor: pointer; transition: background .2s var(--ease); }
.segradio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segradio label:has(input:checked) { background: var(--seg-on); font-weight: 600;
                 box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
.segradio label:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 1px; }
.stakeprefs { margin-top: 16px; }

.seg button.on .count { color: var(--label); }

/* Chips */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
/* The empty board's "Min EV 5% hides 23 · show them" chips (app.js renderRelax). */
.relaxrow { margin: 4px 0 14px; }
a.chip { text-decoration: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px;
        border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
        background: var(--fill-2); color: var(--label); border: 1px solid transparent;
        transition: background .15s var(--ease), transform .12s; white-space: nowrap; }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--tint-soft); color: var(--tint-text);
           border-color: color-mix(in srgb, var(--tint-lo) 50%, transparent); }
.chip .count { font-size: 12.5px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.chip.on .count { color: var(--tint-text); }
@media (hover: hover) { .chip:hover { background: var(--fill); } .chip.on:hover { background: var(--tint-soft); } }

/* ============================================================ hub tiles */

.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            grid-auto-rows: 1fr; gap: 12px; }
.tile {
  display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 78px;
  border-radius: var(--r-xl); background: var(--surface); color: var(--label);
  box-shadow: var(--card-shadow); border: .5px solid var(--hairline);
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .15s;
}
.tile:active { transform: scale(.985); background: var(--surface-2); transition: none; }
.tiletext { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tiletext b { font-size: 17px; font-weight: 650; }
.tiletext span { color: var(--label-2); font-size: 14px; line-height: 1.3; margin-top: 2px; }
.tile .chev { width: 18px; height: 18px; color: var(--label-3); flex: 0 0 auto; }
.tile .slash { font-size: 12px; margin-top: 3px; }
.signoutform { margin-top: 26px; max-width: 420px; }
@media (hover: hover) {
  .tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--lift); }
}

@media (max-width: 640px) {
  /* On a phone the tiles become one inset-grouped list: the Settings-app shape. */
  .tilegrid { display: block; background: var(--surface); border-radius: var(--r-l);
              overflow: hidden; box-shadow: var(--card-shadow); border: .5px solid var(--hairline); }
  .tile { border-radius: 0; box-shadow: none; border: 0; padding: 12px 14px; position: relative;
          background: transparent; min-height: 68px; }
  .tile:not(:last-child)::after { content: ""; position: absolute; left: 72px; right: 0; bottom: 0;
          height: .5px; background: var(--sep); }
  .tile:active { transform: none; background: var(--fill-2); }
  .tile .tileicon.lg { width: 44px; height: 44px; border-radius: 11px; }
  .signoutform { max-width: none; }
}

/* ============================================================ board */

.filterpanel { padding: 14px 16px; }
.filterbar { display: flex; gap: 10px; align-items: center; }
.searchfield { position: relative; flex: 1 1 auto; min-width: 0; }
.searchfield .icon { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px;
                     transform: translateY(-50%); color: var(--label-2); pointer-events: none; }
.searchfield input { padding-left: 40px; }
.filterbar > select { width: auto; min-width: 170px; }
#morebtn { gap: 6px; min-height: 46px; flex: 0 0 auto; }
#morebtn .icon { width: 18px; height: 18px; }
#activecount { color: var(--tint-text); }
.filterpanel .chiprow { margin-top: 10px; padding: 3px 0; }
.segrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          flex-wrap: wrap; margin-top: 10px; }
.clearbtn { font-size: 15px; font-weight: 500; }

.morefilters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense;
               gap: 12px; margin-top: 14px; padding-top: 14px; border-top: .5px solid var(--sep); }
.morefilters .field.wide { grid-column: span 2; }
.morefilters label { margin-top: 0; }
.sheethead, .sheetscrim, .sheetfoot, .phone-only { display: none; }
/* Desktop: advanced filters fold behind the Filters button so plays are on the first screen. */
@media (min-width: 901px) { .filterpanel:not(.open) .morefilters { display: none; } }

/* "The board changed" — floats under the top bar instead of reshuffling what you're reading. */
.boardnews { position: sticky; z-index: 20; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 10px);
             height: 0; display: flex; justify-content: center; }
.boardnews button { min-height: 38px; border-radius: 999px; padding: 0 18px; font: inherit; font-size: 14.5px;
                    font-weight: 650; border: 0; cursor: pointer; color: var(--tint-ink);
                    background: linear-gradient(180deg, var(--tint-hi), var(--tint));
                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--lift);
                    animation: rise .3s var(--ease) both; }
.boardnews button:active { transform: scale(.96); }
.rowcount { color: var(--label-2); font-size: 14px; margin: 14px 4px 10px; }
.empty { padding: 40px 12px; text-align: center; color: var(--label-2); }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--label-2); font-weight: 650; padding: 13px 14px; border-bottom: .5px solid var(--sep);
     white-space: nowrap; }
td { padding: 13px 14px; border-bottom: .5px solid var(--sep); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s var(--ease); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { tbody tr:hover { background: var(--fill-3); } }

/* EV as a glossy capsule */
.ev { display: inline-block; font-weight: 750; font-variant-numeric: tabular-nums; font-size: 14px;
      padding: 4px 9px; border-radius: 999px; color: var(--tint-ink);
      background: linear-gradient(180deg, var(--tint-hi), var(--tint));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.ev.low { color: var(--tint-text); background: var(--tint-soft); box-shadow: none; }
.bet { font-weight: 650; }
.sub { display: block; color: var(--label-2); font-size: 13px; margin-top: 2px; }
.book { font-weight: 650; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
        font-size: 12.5px; font-weight: 600; background: var(--fill-2); color: var(--label-2);
        white-space: nowrap; }
.pill.thin { color: var(--warn-text); }
/* Fair-line strength as a status dot (green strong / yellow fair / red thin), not an emoji. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
       background: var(--c-red); }
.dot.strong { background: var(--c-green); }
.dot.fair { background: var(--c-yellow); }
.pill.accent { color: var(--tint-text); background: var(--tint-soft); }
.slip { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
        border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--tint-text);
        background: var(--tint-soft); white-space: nowrap; }
.slip::after { content: ""; position: absolute; inset: -2px 0; }                        /* 44px target */
.slip:active { filter: brightness(.9); }
.cmpbtn { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
          padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 14px;
          font-weight: 650; color: var(--label); background: var(--fill-2); cursor: pointer;
          white-space: nowrap; }
.cmpbtn::after { content: ""; position: absolute; inset: -2px 0; }
.cmpbtn:active { background: var(--fill); }
.c-act { white-space: nowrap; text-align: right; }
.c-act > * + * { margin-left: 8px; }
.card-only, .card-inline { display: none; }
.card-inline, .when { white-space: nowrap; }
.boardtable tbody tr { cursor: pointer; }
.boardtable tbody tr:active { background: var(--fill-3); transition: none; }
@media (hover: hover) {
  .slip:hover { text-decoration: none; filter: brightness(1.1); }
  .cmpbtn:hover { background: var(--fill); }
}

/* The board switches to card rows by the space the TABLE has, not by the screen. With the sidebar
   open at 1024px, or on an iPad, the table needs ~800px it does not get, and the slip button
   ended up scrolled out of sight. A container query sees the panel's real width. Scoped to
   `.boardtable` so the admin tables keep their ordinary scrolling layout.

   A card, top to bottom: the EV capsule beside the bet and its price; the market and start
   time beside the book; the game on one line; then the stake and the two actions. */
.boardpanel { container-type: inline-size; }
@container (max-width: 860px) {
  .boardtable, .boardtable tbody { display: block; }
  .boardtable thead { display: none; }
  .boardtable tbody tr {
    display: grid; grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas: "ev bet odds" "ev bet book" ". game game" "stake act act";
    gap: 2px 12px; padding: 14px; position: relative;
  }
  .boardtable tbody tr:not(:last-child)::after {
    content: ""; position: absolute; left: 14px; right: 0; bottom: 0; height: .5px; background: var(--sep); }
  .boardtable tbody tr td { padding: 0; border: 0; }
  .boardtable td.c-ev { grid-area: ev; text-align: left; padding-top: 1px; }
  .boardtable td.c-bet { grid-area: bet; min-width: 0; }
  .boardtable td.c-bet .bet { font-size: 16px; }
  .boardtable .card-inline { display: inline; }
  .boardtable td.c-odds { grid-area: odds; font-weight: 650; font-size: 16px; }
  .boardtable td.c-odds .sub { display: none; }
  .boardtable td.c-book { grid-area: book; text-align: right; font-size: 14px; align-self: end; }
  .boardtable td.c-game { grid-area: game; min-width: 0; font-size: 13.5px; color: var(--label-2); padding-top: 2px; }
  .boardtable td.c-game .gamename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .boardtable td.c-game .when { display: none; }
  .boardtable td.c-stake { grid-area: stake; display: block; align-self: center; padding-top: 10px;
                           font-size: 13px; color: var(--label-2); white-space: nowrap; }
  .boardtable td.c-stake b { color: var(--label); font-size: 15px; font-variant-numeric: tabular-nums; }
  .boardtable td.c-act { grid-area: act; justify-self: end; padding-top: 10px; }
  .boardtable td.c-units { display: none; }
}
/* iPhone SE: no room for an EV column beside the bet, so the card stacks — EV, price and book on
   top, then the bet at full width. */
@container (max-width: 330px) {
  .boardtable tbody tr { grid-template-columns: minmax(0, 1fr) auto auto;
                         grid-template-areas: "ev odds book" "bet bet bet" "game game game" "stake act act"; }
  .boardtable td.c-odds { justify-self: end; align-self: center; }
  .boardtable td.c-book { align-self: center; }
  .boardtable td.c-bet { padding-top: 6px; }
}

/* ------------------------------------------------------------ one bet's book feed (a modal)
   A bottom sheet on a phone, a centred card on anything wider. */
.modalscrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45);
              opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.modalscrim.open { opacity: 1; pointer-events: auto; }
.betsheet {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
  transform: translateY(105%); visibility: hidden;
  transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.betsheet.open { transform: none; visibility: visible; transition: transform .32s var(--ease), visibility 0s; }
.betsheet:focus { outline: none; }
.mhead { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr;
         align-items: center; background: var(--surface); padding: 0 0 4px; }
.mhead .grabber { grid-column: 1 / -1; justify-self: center; width: 38px; height: 5px; border-radius: 3px;
                  background: var(--label-3); margin: 7px 0 6px; }
.mtitle { grid-column: 2; font-size: 15px; font-weight: 600; color: var(--label-2); }
.mhead .linkish { grid-column: 3; justify-self: end; font-size: 17px; font-weight: 650; }
@media (min-width: 641px) {
  .betsheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(480px, calc(100% - 48px));
              max-height: min(760px, calc(100vh - 80px)); border-radius: 22px; padding-bottom: 20px;
              box-shadow: var(--lift); opacity: 0; transform: translate(-50%, -47%) scale(.97);
              transition: transform .25s var(--ease), opacity .2s var(--ease), visibility 0s linear .25s; }
  .betsheet.open { opacity: 1; transform: translate(-50%, -50%);
                   transition: transform .25s var(--ease), opacity .2s var(--ease), visibility 0s; }
  .mhead { padding-top: 12px; }
  .mhead .grabber { display: none; }
}

.bethero { padding: 6px 0 14px; }
.bethero h2 { font-size: 24px; line-height: 1.2; margin: 10px 0 4px; }
.betline { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.bethero .sub { font-size: 14px; margin: 0; }
.bethero .feeline { font-size: 13px; margin: 6px 0 0; }
/* "after fee" under an exchange row's EV: the one place a fee changed the number. */
.feecue { font-size: 11.5px; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 11px 12px;
        border-radius: 14px; background: var(--fill-3); }
.statlabel { font-size: 12px; font-weight: 600; color: var(--label-2); }
.statvalue { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--label-2); }
.stat small .dot { margin-right: 5px; vertical-align: 1px; }

.listhead, .booklist li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center;
                          column-gap: 10px; }
.listhead { padding: 0 12px 6px; font-size: 12px; font-weight: 600; color: var(--label-2); }
.listhead span:not(:first-child) { text-align: right; }
.booklist { list-style: none; margin: 0; padding: 0; border-radius: 14px; overflow: hidden;
            background: var(--fill-3); }
.booklist li { min-height: 48px; padding: 8px 12px; position: relative; }
.booklist li:not(:last-child)::after { content: ""; position: absolute; left: 12px; right: 0; bottom: 0;
                                       height: .5px; background: var(--sep); }
.booklist li.mine { background: var(--tint-soft); }
.bk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.bk b { font-size: 15.5px; font-weight: 600; }
.tag { font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 999px; background: var(--fill);
       color: var(--label-2); white-space: nowrap; }
.tag.best { background: var(--tint); color: var(--tint-ink); }
.px { text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.evc { text-align: right; font-size: 14px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.evc.pos { color: var(--tint-text); }
.listfoot { font-size: 13px; color: var(--label-2); margin: 8px 12px 0; }
.betgo { margin-top: 18px; }

/* The ROOT only: `overflow:hidden` on body too makes body a scroll container, and the sticky
   top bar and sidebar then stick to it and jump while a sheet is open. */
html.modal-open { overflow: hidden; }

/* ============================================================ phones + small tablets: board chrome */

@media (max-width: 900px) {
  .filterpanel { padding: 12px; border-radius: var(--r-l); }
  .filterbar > select { display: none; }
  .phone-only { display: block; }
  .filterpanel .chiprow { flex-wrap: nowrap; overflow-x: auto; margin: 6px -12px 0; padding: 6px 12px;
                          scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filterpanel .chiprow::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .segrow { margin-top: 6px; }
  .seg { display: flex; width: 100%; }
  .seg button { padding: 0 8px; }
  .segrow .clearbtn { display: none; }

  /* Filters become an iOS bottom sheet: grabber, sticky header and footer, page dimmed behind.
     `visibility` (not just a transform) takes the closed sheet out of the focus order. */
  .morefilters {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; margin: 0;
    max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
    background: var(--surface); border-radius: 20px 20px 0 0; border-top: 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
    transform: translateY(105%); visibility: hidden;
    transition: transform .32s var(--ease), visibility 0s linear .32s;
  }
  .filterpanel.open .morefilters { transform: none; visibility: visible;
                                   transition: transform .32s var(--ease), visibility 0s; }
  .morefilters:focus { outline: none; }
  .morefilters .field.wide, .morefilters .field.wide-sm { grid-column: 1 / -1; }
  .sheethead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; grid-column: 1 / -1;
               position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 0 0 6px; }
  .grabber { grid-column: 1 / -1; justify-self: center; width: 38px; height: 5px; border-radius: 3px;
             background: var(--label-3); margin: 7px 0 8px; }
  .sheethead h2 { grid-column: 2; margin: 0; font-size: 17px; font-weight: 650; text-align: center; }
  .sheethead .linkish { grid-column: 3; justify-self: end; font-size: 17px; font-weight: 650; padding: 0 2px; }
  .sheetscrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .42);
                opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
  .filterpanel.open .sheetscrim { opacity: 1; pointer-events: auto; }
  .sheetfoot { display: flex; grid-column: 1 / -1; gap: 10px; position: sticky; bottom: 0; z-index: 2;
               background: var(--surface); padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
               border-top: .5px solid var(--sep); margin-top: 6px; }
  .sheetfoot .btn { flex: 1 1 0; }
}
/* iPad and landscape phones: a centred form sheet, not an edge-to-edge phone sheet. */
@media (min-width: 641px) and (max-width: 900px) {
  .morefilters { left: 50%; right: auto; width: min(560px, calc(100% - 48px));
                 bottom: calc(24px + env(safe-area-inset-bottom)); border-radius: 20px;
                 transform: translate(-50%, calc(100% + 60px)); }
  .filterpanel.open .morefilters { transform: translate(-50%, 0); }
  .sheethead { padding-top: 12px; }
  .grabber { display: none; }
  .sheetfoot { padding-bottom: 16px; }
}
@media (max-width: 400px) {
  .morefilters .field:has(select) { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  #morebtn { padding: 0 13px; }
  #morebtn .btnlabel { position: absolute; width: 1px; height: 1px; overflow: hidden;
                       clip: rect(0 0 0 0); white-space: nowrap; }
  .seg .count { display: none; }
}

/* ============================================================ command pages */

.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.formgrid .field { min-width: 0; }
.field.toggle { padding-top: 4px; }

details.more { margin-top: 14px; border-top: .5px solid var(--sep); padding-top: 2px; }
details.more summary { cursor: pointer; color: var(--tint-text); font-size: 15px; font-weight: 650;
                       list-style: none; -webkit-user-select: none; user-select: none;
                       min-height: 46px; display: flex; align-items: center; gap: 4px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; width: 16px; font-size: 18px; line-height: 1; }
details.more[open] summary::before { content: "\2212"; }
details.more .muted { font-weight: 500; }
/* "· 2 filters on": a leg filter left on under the fold (command.js `markMore`). */
details.more summary .moreon { color: var(--warn-text); font-weight: 600; font-size: 14px; }

.runhint { margin: 14px 0 0; font-size: 14px; }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.actions button.primary, .actions button.ghost { margin-top: 12px; }
.actions button.primary { min-width: 180px; min-height: 50px; font-size: 17px; }
.actions button.ghost { min-height: 50px; }

.combo { position: relative; }
ul.suggest { position: absolute; z-index: 40; left: 0; right: 0; top: 92px; margin: 0; padding: 6px;
             list-style: none; max-height: 300px; overflow-y: auto; background: var(--surface-2);
             border-radius: var(--r-l); box-shadow: var(--lift); border: .5px solid var(--glass-border); }
ul.suggest li { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
                cursor: pointer; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.suggest li.on { background: var(--tint-soft); color: var(--tint-text); }
@media (hover: hover) { ul.suggest li:hover { background: var(--tint-soft); color: var(--tint-text); } }

.jobstatus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px;
             border-radius: var(--r-l); margin-bottom: 16px; background: var(--surface);
             box-shadow: var(--card-shadow); font-size: 15px; font-weight: 500; }
.jobstatus.failed { color: var(--red-text); }
/* Scrolled into view after Run, clear of the sticky top bar and the tab bar. */
.jobstatus, .result { scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px);
                      scroll-margin-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
.spinner { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
           border: 2.5px solid var(--fill); border-top-color: var(--tint-lo);
           animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.result { margin-bottom: 26px; animation: rise .35s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.result.progress { opacity: .85; }
.resulthead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px;
              margin: 0 4px 10px; color: var(--label-2); }
.resulthead b { color: var(--label); font-family: var(--mono); font-size: 14px; }
.resulthead .right { margin-left: auto; }
.msg { margin-bottom: 12px; }
.msgcontent { background: var(--surface); border-radius: var(--r-l); padding: 14px 16px;
              margin-bottom: 10px; box-shadow: var(--card-shadow); }

/* A Discord embed, redrawn as an iOS card: the embed's colour is a thin top edge, and each
   field (each pick) is its own inset card inside it. */
.embed { position: relative; background: var(--surface); border-radius: var(--r-xl); padding: 18px 16px 14px;
         margin-bottom: 10px; overflow: hidden; overflow-wrap: anywhere; box-shadow: var(--card-shadow);
         border: .5px solid var(--hairline); }
.embed::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ec, var(--tint)); }
.eauthor { font-size: 13px; color: var(--label-2); margin-bottom: 4px; }
.etitle { display: block; font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--label);
          margin-bottom: 8px; }
a.etitle { color: var(--tint-text); }
.edesc { font-size: 15px; margin-bottom: 6px; }
.efields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.efield { grid-column: 1 / -1; min-width: 0; padding: 12px 14px; border-radius: var(--r-l);
          background: var(--fill-3); }
.efield.inline { grid-column: auto; }
.fname { font-weight: 700; font-size: 16px; margin-bottom: 5px; }
.fname:empty { display: none; }
.fvalue { font-size: 15px; color: var(--label); line-height: 1.5; }
.efooter { margin-top: 12px; font-size: 12.5px; color: var(--label-2); }

.md strong { color: var(--label); }
.md code { font-size: .88em; }
.md pre { background: var(--fill-3); border-radius: 12px; padding: 12px; overflow-x: auto; margin: 8px 0; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 3px 0; padding: 0 0 0 12px; border-left: 3px solid var(--fill); color: var(--label-2); }
.md .subtext { font-size: 12.5px; color: var(--label-2); }
.md .h1 { font-size: 19px; font-weight: 700; margin: 8px 0 3px; }
.md .h2 { font-size: 17px; font-weight: 700; margin: 8px 0 3px; }
.md .h3 { font-size: 15px; font-weight: 700; margin: 6px 0 3px; }
.md .li { padding-left: 16px; position: relative; }
.md .li::before { content: "\2022"; position: absolute; left: 3px; color: var(--label-2); }
.md .gap { height: 9px; }
.md .spoiler { background: var(--fill); color: transparent; border-radius: 4px; cursor: pointer; }
.md .spoiler:hover { color: inherit; background: transparent; }
.md .mention { color: var(--c-indigo); background: rgba(88, 101, 242, .16); border-radius: 4px; padding: 0 3px; }
.md time { border-bottom: 1px dotted var(--label-3); }

.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
/* An empty build's "Run again without main lines only, …" (command.js `retryRow`). */
.retryrow .retrybtn { min-height: 44px; white-space: normal; text-align: left; }
.slipbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
           border-radius: 999px; font-weight: 650; font-size: 14.5px; color: var(--tint-ink);
           background: linear-gradient(180deg, var(--tint-hi), var(--tint));
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.slipbtn:active { filter: brightness(.93); }
.slipbtn::after { content: "\2197"; opacity: .7; }
@media (hover: hover) { .slipbtn:hover { text-decoration: none; filter: brightness(1.05); } }

@media (max-width: 640px) {
  .cmdhead h1 { font-size: 30px; }
  .efields { grid-template-columns: minmax(0, 1fr); }
  .efield.inline { grid-column: 1 / -1; }
  .formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
  .formgrid .field.toggle, .formgrid .field.combo, .formgrid .field.wide,
  .formgrid .field:has(select) { grid-column: 1 / -1; }
  .embed { padding: 16px 12px 12px; border-radius: var(--r-l); }
  .resulthead .right { margin-left: 0; width: 100%; }
  /* The Run button rides above the tab bar, so it is one tap away however long the form is. */
  #cmdform .actions { position: sticky; z-index: 5; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
                      flex-wrap: nowrap; margin: 12px -20px -20px; padding: 12px 20px 14px;
                      border-radius: 0 0 var(--r-xl) var(--r-xl); border-top: .5px solid var(--sep);
                      background: var(--glass);
                      -webkit-backdrop-filter: saturate(180%) blur(20px);
                      backdrop-filter: saturate(180%) blur(20px); }
  #cmdform .actions button.primary { flex: 1 1 auto; min-width: 0; margin-top: 0; }
  #cmdform .actions button.ghost { flex: 0 0 auto; margin-top: 0; }
}
@media (max-width: 380px) {
  .formgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ landing */

.hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center;
        padding: 38px 0 18px; }
/* Full-bleed glow, exactly viewport-wide at any size (it used to reach 20vw past both edges). */
.hero::before { content: ""; position: absolute; z-index: -1; top: -60px; height: 520px;
                left: calc(50% - 50vw); right: calc(50% - 50vw);
                background: radial-gradient(600px 300px at 22% 30%, color-mix(in srgb, var(--tint) 24%, transparent), transparent 70%),
                            radial-gradient(500px 260px at 80% 10%, rgba(94, 92, 230, .16), transparent 70%);
                pointer-events: none; }
.appicon { width: 148px; height: 148px; border-radius: 33px; display: block;
           box-shadow: 0 0 0 .5px var(--glass-border), 0 18px 40px rgba(0, 0, 0, .35); }
:root[data-theme="light"] .appicon { box-shadow: 0 0 0 .5px var(--glass-border), 0 10px 24px rgba(0, 0, 0, .14); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .appicon { box-shadow: 0 0 0 .5px var(--glass-border), 0 10px 24px rgba(0, 0, 0, .14); }
}
.hero .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
             color: var(--tint-text); background: var(--tint-soft);
             padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.hero h1 { font-size: 48px; line-height: 1.04; letter-spacing: -.028em; font-weight: 800; margin-bottom: 14px; }
.hero .lede { font-size: 18px; }
.herocta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.herocta .btn, .herocta .discordbtn, .herocta .codebox { min-height: 52px; padding: 0 24px; font-size: 17px; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
@media (min-width: 1100px) { .features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature { background: var(--surface); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--card-shadow);
           border: .5px solid var(--hairline); }
.feature .tileicon { margin-bottom: 14px; }
.feature h3 { font-size: 18px; }
.feature p { margin: 0; color: var(--label-2); font-size: 15px; }
.betapanel { margin-top: 18px; }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 20px; padding-top: 22px; }
  .appicon { width: 96px; height: 96px; border-radius: 22px; }
  .hero h1 { font-size: 36px; }
}
@media (max-width: 640px) { .features { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .herocta { flex-direction: column; align-items: stretch; }
  .herocta > * { width: 100%; }
}

.authicon { width: 72px; height: 72px; border-radius: 17px; margin: 0 auto 18px; }
.narrow h1 { text-align: center; font-size: 30px; }
.narrow .lede { text-align: center; margin-left: auto; margin-right: auto; }
.tagicon { width: 15px; height: 15px; }

/* ============================================================ settings (inset grouped) */

.group { margin-bottom: 26px; }
.grouphead { font-size: 13px; font-weight: 600; color: var(--label-2); text-transform: uppercase;
             letter-spacing: .04em; padding: 0 16px 8px; }
.groupfoot { font-size: 13px; color: var(--label-2); padding: 8px 16px 0; }
.group > .panel { margin-bottom: 0; }
.rowline { display: flex; align-items: center; gap: 12px; }
.rowtext { display: flex; flex-direction: column; min-width: 0; }
.rowtext b { font-size: 16px; }
.rowtext span { color: var(--label-2); font-size: 14px; }
.settings-save { margin: 0 0 30px; }

/* ============================================================ footer + utilities */

.sitefoot { display: block; max-width: 1120px; width: 100%; margin: 0 auto;
            padding: 18px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
            color: var(--label-2); font-size: 12px; line-height: 1.5; }
body.has-nav .sitefoot { margin: 0 0 0 var(--sidebar-w); padding-left: 32px; max-width: none; width: auto; }
body.nav-collapsed .sitefoot { margin-left: 0; }

.small { font-size: 13px; } .mt0 { margin-top: 0 !important; } .mt8 { margin-top: 8px; }
.mt14 { margin-top: 14px; } .mt16 { margin-top: 16px; } .mt18 { margin-top: 18px; }
.mb10 { margin-bottom: 10px; } .pl0 { padding-left: 0; } .center { text-align: center; }
.noflex { flex: 0 0 auto !important; } .accent { color: var(--tint-text); }
.hintline { margin-top: -6px; }
.footnote { font-size: 13px; margin-top: 24px; max-width: 70ch; color: var(--label-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================ my watches */

.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            margin: 4px 0 18px; }
.titlebar h1 { margin: 0; }
.titlebar .btn .icon { width: 18px; height: 18px; }

.wcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.wcard { background: var(--surface); border-radius: var(--r-xl); padding: 16px;
         box-shadow: var(--card-shadow); border: .5px solid var(--hairline);
         display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Ended cards say so with a muted icon and background, not by fading the text below AA. */
.wcard.s-used, .wcard.s-expired { background: var(--surface-2); box-shadow: none; }
.wcard.s-used .tileicon, .wcard.s-expired .tileicon { filter: grayscale(1); opacity: .6; }
.wtop { display: flex; align-items: flex-start; gap: 12px; }
.wtop .tileicon { width: 40px; height: 40px; border-radius: 10px; }
.wtitle { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wtitle b { font-size: 17px; font-weight: 650; }
.wtitle .sub { font-size: 14px; }
.wmeta { font-size: 13.5px; color: var(--label-2); }
.wlegs { margin: 4px 0 2px; padding-left: 18px; font-size: 13.5px; }
.wlegs li { overflow-wrap: anywhere; }
.wlegs li.pulled { color: var(--red-text); text-decoration: line-through; }
.wmeta.wlive.on { color: var(--red-text); font-weight: 600; }
.wact { display: flex; gap: 8px; flex-wrap: wrap; }
.wact .btn { flex: 1 1 0; min-height: 40px; }

/* Status as a small capsule: green running, grey held, orange spent, red past its deadline. */
.spill { flex: 0 0 auto; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
         background: var(--fill-2); color: var(--label-2); white-space: nowrap; }
.spill.active { background: color-mix(in srgb, var(--c-green) 18%, transparent); color: var(--tint-text); }
.spill.used { background: color-mix(in srgb, var(--c-orange) 18%, transparent); color: var(--pill-orange); }
.spill.expired { background: color-mix(in srgb, var(--c-red) 16%, transparent); color: var(--pill-red); }

/* Rows of full-width actions — the iOS list/action-sheet shape. */
.panel.rows { padding: 0; overflow: hidden; }
.rowbtn { display: flex; align-items: center; width: 100%; min-height: 50px; padding: 0 18px;
          border: 0; background: none; font: inherit; font-size: 17px; font-weight: 500;
          color: var(--tint-text); text-align: left; cursor: pointer; position: relative; }
.rowbtn + .rowbtn::before { content: ""; position: absolute; left: 18px; right: 0; top: 0;
                            height: .5px; background: var(--sep); }
.rowbtn:active { background: var(--fill-3); }
.rowbtn.danger { color: var(--red-text); }
.rowbtn.confirm { background: var(--confirm-red); color: #fff; font-weight: 650; }
/* Inset, because `.panel.rows` clips anything drawn outside a row. */
.rowbtn:focus-visible { outline-offset: -4px; border-radius: 12px; }
.rowbtn[hidden] { display: none; }
@media (hover: hover) { .rowbtn:hover { background: var(--fill-3); } .rowbtn.confirm:hover { background: var(--confirm-red); } }
.bulk { margin-top: 24px; }
.sheetrows { margin: 4px 0 18px; box-shadow: none; background: var(--fill-3); }
.betsheet .grouphead { padding: 0 4px 8px; }
.choicegrid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.emptywatch { text-align: center; padding: 32px 20px; }
.emptywatch .muted { max-width: 42ch; margin: 0 auto 18px; }

/* A HUD-style note that rises above the tab bar and goes away on its own. */
.toast { position: fixed; z-index: 70; left: 16px; right: 16px; margin: 0 auto; width: fit-content;
         bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); max-width: 520px;
         padding: 12px 18px; border-radius: 16px; font-size: 15px; line-height: 1.35;
         color: var(--label); background: var(--glass); border: .5px solid var(--glass-border);
         -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
         box-shadow: var(--lift); }
.toast.show { animation: rise .25s var(--ease) both; }
@media (min-width: 901px) { .toast { bottom: 28px; } }
body.working { cursor: progress; }

@media (max-width: 640px) {
  .wcards { grid-template-columns: minmax(0, 1fr); }
}

.pingsave { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }

/* The legal line shows on phones too: above the tab bar, never under it. (After the desktop
   `body.has-nav .sitefoot` rule on purpose: same specificity, so the later one wins.) */
@media (max-width: 900px) {
  body.has-nav .sitefoot { margin: 0; max-width: none;
                           padding: 8px max(16px, env(safe-area-inset-right))
                                    calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px)
                                    max(16px, env(safe-area-inset-left)); }
}

/* ============================================================ book logos
   Each book's own icon (web/books.py), beside its name, never instead of it. */

/* ONE class for every logo on the site: `<span class="blogo"><img></span>`. The span is a thin
   gradient ring (light top-left to dark bottom-right) with a glossy highlight laid OVER the icon
   (an <img> can't carry a pseudo-element), and a soft glow in dark mode. The ring is what lets a
   dark icon (Caesars, Pinnacle, BookMaker) read on a dark page. Size with `--lg`. */
:root {
  --logo-ring-hi: rgba(255, 255, 255, .78); --logo-ring-mid: rgba(255, 255, 255, .2);
  --logo-ring-lo: rgba(255, 255, 255, .05); --logo-tile: #242426;
  --logo-shadow: 0 0 0 .5px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .55),
                 0 0 10px rgba(255, 255, 255, .07);
}
:root[data-theme="light"] {
  --logo-ring-hi: #fff; --logo-ring-mid: rgba(0, 0, 0, .06); --logo-ring-lo: rgba(0, 0, 0, .3);
  --logo-tile: #fff;
  --logo-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .16);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --logo-ring-hi: #fff; --logo-ring-mid: rgba(0, 0, 0, .06); --logo-ring-lo: rgba(0, 0, 0, .3);
    --logo-tile: #fff;
    --logo-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .16);
  }
}
.blogo { --lg: 18px; position: relative; display: inline-block; flex: 0 0 auto;
         width: var(--lg); height: var(--lg); padding: 1px; border-radius: calc(var(--lg) * .3);
         vertical-align: -4px; line-height: 0;
         background: linear-gradient(145deg, var(--logo-ring-hi), var(--logo-ring-mid) 48%, var(--logo-ring-lo));
         box-shadow: var(--logo-shadow); }
.blogo img { display: block; width: 100%; height: 100%; object-fit: contain;
             border-radius: calc(var(--lg) * .3 - 1px); background: var(--logo-tile); }
.blogo::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--lg) * .3 - 1px);
                pointer-events: none;
                background: linear-gradient(165deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 38%,
                                            rgba(255, 255, 255, 0) 55%);
                box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
.bkname { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%;
          vertical-align: bottom; }
.bkname .blogo { vertical-align: 0; }
.boardtable td.c-book .bkname { white-space: nowrap; }
.booklist .bk b .blogo { --lg: 20px; }
.stat small .bkname { gap: 5px; }
.stat small .blogo { --lg: 15px; }
.betgo .blogo { --lg: 22px; margin-right: 8px; }
.slipbtn .blogo { --lg: 22px; }
ul.suggest li .blogo { margin-right: 10px; }
.checkgrid .bkname { gap: 10px; }
.checkgrid .blogo { --lg: 24px; }
.wtitle .bkname { gap: 6px; }

/* The landing page's row of book icons. */
.bookstrip { list-style: none; margin: 8px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.bookstrip li { display: grid; place-items: center; }
.bookstrip .blogo { --lg: 38px; }

/* ============================================================ command output: quieter asides */

/* A line the bot set wholly in italics (a caveat, a "no deep link" hint, a leg count) is kept, in
   a smaller, quieter voice than the bet above it. */
.md .note { font-size: 13.5px; color: var(--label-2); }
.md .note em { font-style: normal; }
.md .note strong { color: var(--label); }
/* Long how-it-works prose above an answer's bets sits behind a toggle (discordmd NOTES_FOLD_AT). */
details.enotes { margin: 0 0 4px; }
details.enotes summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
                         gap: 4px; min-height: 32px; font-size: 13.5px; font-weight: 600;
                         color: var(--tint-text); -webkit-user-select: none; user-select: none; }
details.enotes summary::-webkit-details-marker { display: none; }
details.enotes summary::before { content: "+"; width: 12px; }
details.enotes[open] summary::before { content: "\2212"; }
details.enotes .edesc { font-size: 14px; color: var(--label-2); }
.efooter { font-size: 12px; }
.fvalue .gap { height: 6px; }

/* ============================================================ builder ticket cards
   /single /parlay /sgp /sgpx answers drawn from the builder's own tickets (oddsbot/web_cards.py):
   the filter pills, then one card per ticket — rank, EV, type and book; boosted / base / fair
   and the stake; the same ticket elsewhere; each leg with its price and fair line; the slip. */

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.pill2 { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px;
         border-radius: 12px; background: var(--surface); border: .5px solid var(--glass-border);
         box-shadow: var(--card-shadow); font-size: 15px; }
.pill2 .k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
            color: var(--label-2); }
.pill2 { max-width: 100%; }
.pill2 b { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.pill2 .bkname { font-weight: 700; }

.tickets { margin-bottom: 12px; }
.twarn { margin: 0 0 10px; padding: 12px 14px; border-radius: var(--r-l); font-size: 14px;
         background: color-mix(in srgb, var(--c-orange) 13%, transparent);
         border: .5px solid color-mix(in srgb, var(--c-orange) 35%, transparent); }

/* The card, a Wallet pass: a lime band (book, type, rank), the price as the hero number with
   the EV opposite, labelled fields, the legs on a numbered timeline, the same ticket elsewhere,
   and a black/white pill to the slip (inverted per scheme). Generous type, nothing boxed.
   A negative ticket's band turns orange; an ungraded one's goes grey. */
.tcard { position: relative; margin: 0 0 16px; min-width: 0; overflow: hidden; border-radius: 22px;
         background: var(--surface); border: .5px solid var(--glass-border); box-shadow: var(--card-shadow);
         font-variant-numeric: tabular-nums; }

.tband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
         padding: 13px 20px; background: linear-gradient(180deg, var(--tint-hi), var(--tint)); color: var(--tint-ink); }
.tcard.neg .tband { background: color-mix(in srgb, var(--c-orange) 70%, var(--surface)); }
.tcard.ungraded .tband { background: var(--surface-3); color: var(--label); }
.tband .bkname { font-size: 17px; font-weight: 750; color: inherit; }
.tband .blogo { --lg: 26px; }
.tkind { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: pre; }

.thero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px;
         padding: 18px 20px 4px; }
.thero small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
               color: var(--label-2); }
.thodds b { display: block; font-size: 48px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
/* The book's own price under the boosted odds: "+217 before the 50% boost". */
.thodds .tbasenote { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600;
                     color: var(--label-2); }
.tev { text-align: right; }
.tev b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--tint-text); }
.tcard.neg .tev b { color: var(--red-text); }
.tcard.ungraded .tev b { color: var(--label-2); font-size: 20px; }

.tfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px 12px;
           margin: 12px 20px 0; padding: 12px 0; border-top: .5px solid var(--sep); border-bottom: .5px solid var(--sep); }
.tfields dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label-2); }
.tfields dd { margin: 1px 0 0; font-size: 18px; font-weight: 650; }
.tfields .tstake.none dd { color: var(--label-2); }

.tlegs { list-style: none; margin: 0; padding: 8px 20px 0; }
.tgroup { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0 2px 38px; font-size: 12px;
          font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); }
.tgroup b { color: var(--label); }
.tleg { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
/* The timeline: a line from each leg's number down to the next. */
.tleg::before { content: ""; position: absolute; left: 12px; top: 40px; bottom: -8px; width: 2px; background: var(--sep); }
.tleg:last-child::before { display: none; }
.tdot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
        border: 2px solid var(--tint-text); color: var(--tint-text); font-size: 12px; font-weight: 800; }
.lmain { min-width: 0; }
.ltop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lname { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.lprice { font-size: 20px; font-weight: 800; white-space: nowrap; }
.lsub { display: flex; justify-content: space-between; gap: 4px 12px; margin-top: 2px; font-size: 13.5px; color: var(--label-2); }
.lsub > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.lfair { white-space: nowrap; }
.lcomps { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }

.pchip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
         color: var(--label-2); white-space: nowrap; }
.pchip .blogo { --lg: 18px; }
.pchip .pbook { font-weight: 650; color: var(--label); }

.talso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 20px 0; padding-top: 12px;
         border-top: .5px solid var(--sep); }
.talso .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label-2); }
.talsorow { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }

/* The one action: an Apple-Pay-style pill, white on dark and black on light. With no deep link
   it goes quiet grey and says where to enter the legs. */
.tbet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-height: 52px;
        margin: 16px 20px 20px; padding: 8px 18px; border-radius: 999px; background: var(--label); color: var(--bg);
        font-size: 17px; font-weight: 600; }
.tbet .blogo { --lg: 24px; }
.tbet .tbook { font-weight: 750; }
.tbet small { flex-basis: 100%; text-align: center; font-size: 11.5px; font-weight: 600; opacity: .75; }
a.tbet:active { opacity: .8; }
@media (hover: hover) { a.tbet:hover { text-decoration: none; opacity: .88; } }
.tbet.off { background: var(--fill-2); color: var(--label); }

details.tdetails { margin: -4px 0 16px; }
details.tdetails summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px;
                           min-height: 36px; padding: 0 4px; font-size: 14px; font-weight: 650;
                           color: var(--tint-text); -webkit-user-select: none; user-select: none; }
details.tdetails summary::-webkit-details-marker { display: none; }
details.tdetails summary::before { content: "+"; width: 12px; }
details.tdetails[open] summary::before { content: "\2212"; }
.embed.flat { box-shadow: none; background: var(--fill-3); border: 0; margin-top: 6px; }
.embed.flat::before { display: none; }

@media (max-width: 640px) {
  .tcard { border-radius: var(--r-l); }
  .tband, .thero { padding-left: 16px; padding-right: 16px; }
  .tfields, .talso { margin-left: 16px; margin-right: 16px; }
  .tfields { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
  .tlegs { padding-left: 16px; padding-right: 16px; }
  .tbet { margin: 14px 16px 16px; }
  .thodds b { font-size: 42px; }
  .lname { font-size: 17px; }
  .pill2 { font-size: 14px; min-height: 34px; padding: 0 10px; }
}

/* ============================================================ promos
   Today's promos (web/templates/promos.html), the builders' "Use a promo" picker, and
   Settings -> Promos. Boosts reuse the ticket card (.tcard); promos are Wallet-ish tiles. */

/* My watches | Today's promos — the segmented control, as links. */
.seg.pagetabs { display: flex; width: 100%; max-width: 420px; margin: -6px 0 18px; }
.pagetabs a { flex: 1 1 0; display: grid; place-items: center; min-height: 36px; padding: 0 10px;
              border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--label);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagetabs a.on { background: var(--seg-on); font-weight: 600;
                 box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
@media (hover: hover) { .pagetabs a:hover { text-decoration: none; } }

.promometa { margin: 0 0 6px; font-size: 14px; }
.promohint { margin: 0 0 10px; }
.quietnote { margin: 0 0 6px; font-size: 13px; color: var(--label-2); }
.quietnote .blogo { --lg: 15px; }
.jumprow { margin: 12px 0 20px; }
.jumprow .chip { background: var(--surface); border: .5px solid var(--hairline); color: var(--label); }
@media (hover: hover) { .jumprow .chip:hover { text-decoration: none; } }
/* Book picker (promos, 2026-10-15): one row that scrolls sideways on a phone, never the page. */
.bookpick { flex-wrap: nowrap; overflow-x: auto; margin: 12px 0 4px; padding: 3px 2px 6px;
            scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bookpick::-webkit-scrollbar { display: none; }
.bookpick .chip { flex: 0 0 auto; background: var(--surface); border: .5px solid var(--hairline);
                  color: var(--label); font: inherit; cursor: pointer; }
.bookpick .chip[aria-selected="true"] { background: var(--tint-soft); color: var(--tint-text);
                                        border-color: transparent; }
.bookpick .chip[aria-selected="true"] .count { color: var(--tint-text); }
.bookpick .chip.done .count::after { content: " ¹3"; }
.bookpick .chip:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.bookprogress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; }
.bookprogress .linkbtn { padding: 4px 2px; font-size: 14px; }
.pflag.on { background: var(--tint-soft); color: var(--tint-text); }
.sechead { font-size: 22px; font-weight: 750; letter-spacing: -.01em; margin: 0 0 12px; }
.promogroup { scroll-margin-top: calc(var(--topbar-h) + 12px); }

.pcards, .bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.bcards .tcard { margin: 0; }
.pcard { background: var(--surface); border-radius: var(--r-xl); padding: 16px 18px;
         box-shadow: var(--card-shadow); border: .5px solid var(--hairline);
         display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pcard.ended { background: var(--surface-2); box-shadow: none; }
.ptop { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ptop .bkname { font-weight: 700; font-size: 15px; }
.ptop .blogo { --lg: 24px; }
.pkind { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
         padding: 4px 9px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); }
.ptitle { font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.psum { margin: 0; color: var(--label-2); font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.pworth { margin: 0; color: var(--label); font-size: 14.5px; line-height: 1.35; }
/* "Watch this": the watch's starting point, as the bot's /watch reply shows it (2026-10-05). */
.pstart { margin-top: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--fill);
          font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.pstart-title { font-weight: 600; margin-bottom: 4px; }
.pstart .btn { margin-top: 8px; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.pclock { font-weight: 650; color: var(--tint-text); }
.pcard.ended .pclock { color: var(--label-2); }
.pact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* The member's own boost % (a promo that shows it only on claiming): one field above the taps. */
.pboost { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.pboost input { width: 7em; min-height: 40px; font-size: 16px; }
/* ...as taps on its range (`boost_chips`), the field opening under "Other". */
.pboost.haschips { flex-wrap: wrap; }
.pboost.haschips > label { flex: 1 0 100%; }
.pboost .chiprow, .lv-boost { gap: 6px; }
.pboost .chip, .lv-boost .chip { min-height: 36px; padding: 0 13px; font-size: 14.5px;
  background: var(--surface); border: .5px solid var(--hairline); color: var(--label); }
.pboost .chip.on, .lv-boost .chip.on { background: var(--tint-soft); color: var(--tint-text); }
.pboost input[hidden] { display: none; }
.lv-boost { margin-top: 6px; }
.pact .btn { flex: 1 1 0; min-height: 44px; white-space: nowrap; }
.pact .btn .icon { width: 18px; height: 18px; }
.pact .btn.done { background: var(--tint-soft); color: var(--tint-text); box-shadow: none; }
.plinks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; }
.plinks:empty { display: none; }
.plinks a { font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
details.pterms summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px;
                         min-height: 36px; font-size: 14px; font-weight: 650; color: var(--tint-text);
                         -webkit-user-select: none; user-select: none; }
details.pterms summary::-webkit-details-marker { display: none; }
details.pterms summary::before { content: "+"; width: 12px; }
details.pterms[open] summary::before { content: "\2212"; }
.pnotes { margin: 2px 0 10px; padding-left: 18px; font-size: 14px; }
.pnotes li { margin: 0 0 4px; }
.rawterms { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.45;
            color: var(--label-2); background: var(--fill-3); border-radius: var(--r-m); padding: 10px 12px;
            max-height: 260px; overflow-y: auto; }
.plink { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 14px; }

/* A boost is a ticket: its own title under the band, and a quiet confidence flag. */
.btitle { padding: 12px 20px 0; font-size: 15px; font-weight: 650; color: var(--label-2); overflow-wrap: anywhere; }
.bconf { margin: 6px 20px 0; display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px;
         border-radius: 999px; background: color-mix(in srgb, var(--c-orange) 18%, transparent);
         color: var(--pill-orange); }
.showall { margin-top: 14px; }
/* New-account offer cards (promos.html signup_section): the summary and the Open button sit on
   the same inset as the title and fields, not flush against the card edge. */
.scard > p { margin: 8px 20px 0; }
.scard .fact { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 16px; }
@media (max-width: 640px) {
  .scard > p { margin-left: 16px; margin-right: 16px; }
  .scard .fact { padding-left: 16px; padding-right: 16px; }
}

/* My feed (`web/myfeed.py`): a boost-style card per play — the bet under the band, the game and
   its start below it, then odds and EV. */
.mfmeta a { font-weight: 600; }
.mftitle { color: var(--label); font-size: 16px; }
.mftitle b { font-weight: 750; }
.mfgame { padding: 2px 20px 0; font-size: 13.5px; color: var(--label-2); overflow-wrap: anywhere; }
.mfalso { margin: 0 20px 8px; font-size: 13.5px; color: var(--label-2); }
.mfalso.muted { font-size: 12.5px; }
.placeslot:empty { display: none; }
.placeslot { padding: 0 16px 14px; }
details.ungraded { margin-top: 16px; padding: 0 18px; }
details.ungraded summary { cursor: pointer; min-height: 50px; display: flex; align-items: center;
                           font-weight: 650; color: var(--tint-text); }
.plist { list-style: none; margin: 0 0 8px; padding: 0; }
.plist li { padding: 12px 0; border-top: .5px solid var(--sep); min-width: 0; }
.plrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plrow .bkname { font-weight: 650; font-size: 14px; }
.plprice { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pltitle { font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.plist .small { overflow-wrap: anywhere; }

/* "Use a promo" on a builder: the first thing in the form, compact. */
.promopick { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-l);
             background: var(--tint-soft); border: .5px solid color-mix(in srgb, var(--tint-lo) 35%, transparent); }
.promopick > label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px;
                     font-weight: 700; color: var(--tint-text); }
.promopick > label .icon { width: 18px; height: 18px; }
.promopick select { width: 100%; }
.promonote { margin-top: 10px; font-size: 14px; line-height: 1.4; }
.promonote .pnline { color: var(--label-2); font-size: 13px; margin-top: 3px; }
.promonote .pnreset { color: var(--label); font-weight: 600; }
.promonote .linkish { margin-top: 6px; font-weight: 650; min-height: 32px; }
/* What the promo filled: a lime ring and a small "from promo" mark on the label. */
.field.pfilled input, .field.pfilled select { border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); }
.field.pfilled > label::after, .field.pfilled .switch .lbl::after {
  content: "from promo"; margin-left: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tint-ink); background: var(--tint); padding: 2px 6px; border-radius: 6px;
  vertical-align: 1px; }

/* Settings -> Promos. */
.promoprefs .prefrow { padding: 14px 0 16px; border-bottom: .5px solid var(--sep); }
.promoprefs .prefrow:last-child { border-bottom: 0; }
.promoprefs .switch { margin-top: 0 !important; }
.promoprefs .fieldlabel { font-size: 16px; font-weight: 500; color: var(--label); margin: 4px 0 2px; }
.phint { margin: 2px 0 10px; color: var(--label-2); font-size: 13.5px; line-height: 1.4; }
.promoprefs .segradio { margin: 4px 0 10px; }
.field.inline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.field.inline > label { margin: 0; font-size: 15px; color: var(--label); font-weight: 500; }
.field.inline select { width: auto; max-width: 100%; min-width: 0; }
.suffixed { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--label-2); }
.suffixed input { width: 88px; text-align: right; }
/* Only the mode's own blurb swaps; the last-call pick list sits outside the panes because both
   modes get last calls (Joe 2026-10-05). */
.promoprefs .prefrow:has(input[value="best"]:checked) .modepane[data-mode="floor"],
.promoprefs .prefrow:has(input[value="floor"]:checked) .modepane[data-mode="best"] { display: none; }

@media (max-width: 640px) {
  .pcards, .bcards { grid-template-columns: minmax(0, 1fr); }
  .btitle, .mfgame { padding-left: 16px; padding-right: 16px; }
  .mfalso { margin-left: 16px; margin-right: 16px; }
  .bconf { margin-left: 16px; }
  .pact .btn { min-height: 46px; }
}

/* ============================================================ first-run wizard (web/welcome.py) */

.wizard { margin: 0 auto; }
.wizhead { margin: 4px 0 18px; }
.wizmeta { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           min-height: 36px; }
.wizcount { font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--label-2);
            text-transform: uppercase; }
.inlineform { display: inline; margin: 0; }
.linkbtn { border: 0; background: none; padding: 8px 2px; font: inherit; font-size: 15px;
           font-weight: 500; color: var(--tint-text); cursor: pointer; min-height: 36px; }
.linkbtn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.wizbar { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 6px; margin: 8px 0 0; padding: 0; }
.wizbar li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wizbar li::before { content: ""; height: 4px; border-radius: 999px; background: var(--fill); }
.wizbar li.done::before, .wizbar li.on::before { background: var(--tint); }
.wizbar span { font-size: 12.5px; color: var(--label-2); white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
.wizbar li.on span { color: var(--label); font-weight: 600; }
.wizard .panel .field select, .wizard .panel .field input { width: 100%; }
.wizactions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 10px;
              align-items: center; margin: 22px 0 8px; }
.wizactions button { margin-top: 0; min-height: 50px; padding: 0 22px; font-size: 17px; }
.wizactions button.primary { flex: 1 1 200px; }
.trytiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
button.trytile { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.trytile .tileicon { flex: 0 0 auto; }
@media (max-width: 640px) {
  .wizbar span { display: none; }            /* "Step 2 of 4" + the page title say it */
  .wizactions button.primary { flex-basis: 100%; }   /* Continue on its own row, on top */
  .wizactions button.ghost { flex: 1 1 0; }
}

/* Settings -> Notifications (web push, static/push.js). */
.pushkind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 12px; padding: 6px 0; }
.pushkind .switch { flex: 1 1 220px; }
.pushonly { display: inline-flex; align-items: center; gap: 6px; }
.pushdevices { list-style: none; margin: 4px 0 0; padding: 0; }
.pushdevices li { padding: 6px 0; overflow-wrap: anywhere; }
.pushsteps { margin: 8px 0 10px; padding-left: 22px; line-height: 1.5; }
.pushsteps li { margin: 4px 0; }
button.pushlink { background: none; border: 0; padding: 0 2px; color: var(--tint-text, inherit);
  text-decoration: underline; cursor: pointer; }

/* ============================================================ bet log
   "✅ I placed it" (static/place.js) on the builders' cards, the board and the bet sheet, and the
   My bets page (web/templates/mybets.html). Up/down numbers use the text roles, never a raw
   system colour: --tint-text and --red-text clear 4.5:1 in both schemes. */

.placewrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
             gap: 6px 14px; margin: -6px 20px 18px; min-height: 44px; }
.betsheet .placewrap { margin: 12px 0 4px; }
.placebtn { font: inherit; font-size: 15.5px; font-weight: 650; min-height: 44px; padding: 0 20px;
            border-radius: 999px; border: 0; cursor: pointer; width: 100%;
            background: var(--tint-soft); color: var(--tint-text); }
.placebtn:active { transform: scale(.98); }
.placebtn:disabled { opacity: .6; cursor: default; }
.placebtn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) { .placebtn:hover { background: color-mix(in srgb, var(--tint) 24%, transparent); } }
.placedline { font-size: 14.5px; color: var(--label-2); }
.placedline b { color: var(--tint-text); font-weight: 700; }
.placewrap .linkish { font-size: 14.5px; font-weight: 600; min-height: 32px; }
/* The board row's compact version sits beside Compare and Slip. */
.placewrap.compact { display: inline-flex; margin: 0 0 0 8px; min-height: 0; gap: 4px 8px;
                     justify-content: flex-start; }
.placebtn.sm { width: auto; font-size: 13px; min-height: 32px; padding: 0 12px; }
.placewrap.compact .placedline, .placewrap.compact .linkish { font-size: 13px; }

/* My bets */
.mbstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.mbstats .stat { background: var(--surface); box-shadow: var(--card-shadow); padding: 14px; border-radius: var(--r-l); }
.mbstats .statvalue { font-size: 24px; letter-spacing: -.01em; }
.statvalue.up, .mbfacts dd.up, .mbcharthead b.up { color: var(--tint-text); }
.statvalue.down, .mbfacts dd.down, .mbcharthead b.down { color: var(--red-text); }
@media (max-width: 720px) { .mbstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mbearly { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-m); font-size: 14px; line-height: 1.45;
           background: color-mix(in srgb, var(--c-orange) 12%, transparent); color: var(--label); }
.mbearly b { color: var(--warn-text); }

.mbchart { padding: 14px 16px 10px; margin: 0 0 16px; }
.mbledger { padding: 14px 16px 10px; margin: 0 0 16px; }
.mbledger th[scope="row"] { text-align: left; font-weight: 500; }
.mbledger tr.kind th, .mbledger tr.kind td { font-weight: 650; }
.mbledger tr.book th { padding-left: 14px; color: var(--label-2); }
.mbrewards { padding: 14px 16px 10px; margin: 0 0 16px; }
.mbreward { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.mbreward .btn { margin-left: auto; }
.mbcharthead, .mbchartfoot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mbcharthead span { font-size: 13px; font-weight: 600; color: var(--label-2); }
.mbcharthead b { font-size: 17px; font-variant-numeric: tabular-nums; }
.mbchartfoot { font-size: 12px; color: var(--label-2); font-variant-numeric: tabular-nums; margin-top: 4px; }
.mbchart svg { display: block; width: 100%; height: 150px; margin-top: 8px; overflow: visible; }
.mbchart .zero { stroke: var(--sep); stroke-width: 1; stroke-dasharray: 4 4; }
.mbchart .line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.mbchart .line.up { stroke: var(--tint-text); }
.mbchart .line.down { stroke: var(--red-text); }
.mbchart .area { stroke: none; }
.mbchart .area.up { fill: var(--tint-soft); }
.mbchart .area.down { fill: color-mix(in srgb, var(--c-red) 14%, transparent); }

.mbfilters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 0 0 14px; }
.mbfilter { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; flex: 1 1 130px; max-width: 220px; }
.mbfilter span { font-size: 12px; font-weight: 600; color: var(--label-2); }
.mbfilter select { width: 100%; min-height: 40px; }
.mbfilters .linkish { min-height: 40px; font-size: 14px; }
.mbtabs { margin: 0 0 14px; }
.mbtabs .count { margin-left: 5px; color: var(--label-2); font-variant-numeric: tabular-nums; }

.mblist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.mblist > p { grid-column: 1 / -1; margin: 0; }
.mbcard { position: relative; min-width: 0; padding: 14px 16px 12px; border-radius: var(--r-l); background: var(--surface);
          box-shadow: var(--card-shadow); border-left: 4px solid var(--fill); }
.mbcard.won { border-left-color: var(--tint); }
.mbcard.lost { border-left-color: var(--red-text); }
.mbtop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.mbtop .bkname { font-weight: 650; }
.mbstatus { margin-left: auto; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
            background: var(--fill-2); color: var(--label-2); }
.mbstatus.won, .mbstatus.dead_heat { background: var(--tint-soft); color: var(--tint-text); }
.mbstatus.lost { background: color-mix(in srgb, var(--c-red) 14%, transparent); color: var(--red-text); }
.mbstatus.needs_you { background: color-mix(in srgb, var(--c-orange) 16%, transparent); color: var(--warn-text); }
.mblabel { display: block; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.mblegs { list-style: none; margin: 8px 0 0; padding: 0; border-top: .5px solid var(--sep); }
.mblegs li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px;
             border-bottom: .5px solid var(--sep); }
.mblegs li span { min-width: 0; overflow-wrap: anywhere; }
.mblegs li b { font-variant-numeric: tabular-nums; }
.mblegs li.won span::before { content: "✓ "; color: var(--tint-text); font-weight: 700; }
.mblegs li.lost span::before { content: "✗ "; color: var(--red-text); font-weight: 700; }
.mblegs li.void span, .mblegs li.push span { color: var(--label-2); text-decoration: line-through; }
.mbfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 6px; }
.mbfacts div { min-width: 0; }
.mbfacts dt { font-size: 11.5px; font-weight: 600; color: var(--label-2); }
.mbfacts dd { margin: 1px 0 0; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mbfacts dd small { display: block; font-size: 12px; font-weight: 500; color: var(--label-2); }
.mbmeta { margin: 4px 0 0; font-size: 12.5px; color: var(--label-2); }
.mbnote { margin: 6px 0 0; font-size: 13px; color: var(--warn-text); }
.mbgrade { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.mbacts { display: flex; gap: 18px; margin: 8px 0 0; }
.mbacts .linkish { font-size: 14px; font-weight: 600; min-height: 36px; }
.linkish.danger { color: var(--red-text); }
.mbedit { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; align-items: end;
          margin: 8px 0 2px; padding: 10px; border-radius: var(--r-m); background: var(--fill-3); }
.mbedit[hidden] { display: none; }
.mbedit label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--label-2); }
/* `type=text` on each field gives them the site's field style and its 16px text (below 16px
   iOS zooms the page on focus); 44px is the smallest comfortable tap target. */
.mbedit input { width: 100%; min-height: 44px; }
.mbempty { text-align: center; padding: 28px 22px; }
.mbempty .tileicon { margin: 0 auto 10px; }
.mbempty p { max-width: 460px; margin: 6px auto 16px; }
.mbnone { padding: 18px 4px; }
.mbclear { margin: 22px 0 8px; }
.mbclear summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--red-text); min-height: 36px;
                   display: inline-flex; align-items: center; }
.mbclear form { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.confirmrow { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
@media (max-width: 520px) {
  .mbfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbfilter { flex: 1 1 calc(50% - 10px); max-width: none; }
}

/* ============================================================ theme menu (static/thememenu.js)
   A compact icon in the top bar that shows the current choice; a small menu of Light / Dark /
   Auto. Every row is a 44px target. */

.themepick { position: relative; }
.themebtn { width: 44px; height: 44px; }
.themebtn .icon { display: none; }
.themebtn[data-shows="light"] .ti-light, .themebtn[data-shows="dark"] .ti-dark,
.themebtn[data-shows="auto"] .ti-auto { display: block; }
.thememenu { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); min-width: 236px; padding: 6px;
             background: var(--surface); border: .5px solid var(--glass-border); border-radius: 14px;
             box-shadow: var(--lift); }
.thememenu[hidden] { display: none; }
.thememenu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
                    border: 0; border-radius: 10px; background: none; color: var(--label); font: inherit;
                    font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.thememenu button .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.thememenu button small { font-size: 12.5px; color: var(--label-2); white-space: nowrap; }
.thememenu button[aria-checked="true"] { background: var(--tint-soft); color: var(--tint-text); font-weight: 650; }
.thememenu button[aria-checked="true"]::after { content: "\2713"; margin-left: auto; font-weight: 700; }
.thememenu button:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
@media (hover: hover) { .thememenu button:hover { background: var(--fill-2); } }
/* The logo is a white mark on its own dark rounded tile: in light mode it keeps the tile and
   gets a hairline so the tile's edge reads on the pale bar. */
:root[data-theme="light"] .brand .logo { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .14); }

/* ============================================================ builder ticket cards, Clean (E)
   `?cards=e` / Settings -> Card style (static/command.js `ticketCardE`). The pass's data in a
   calmer layout: a slim lime band (the one bright moment), the price and EV as big plain
   numbers, a quiet facts row, flat legs on thin dividers with the other books' prices on a
   second line, the price's age, one outlined action to the slip plus small text actions.
   Every colour is a role token, so both themes clear WCAG AA (lime TEXT is --tint-text: deep
   olive on white in light mode, never pale lime). */

.tickets.clean { max-width: 760px; }
.tk-card { margin: 0 0 14px; min-width: 0; overflow: hidden; border-radius: 16px; background: var(--surface);
           border: .5px solid var(--glass-border); box-shadow: var(--card-shadow); font-variant-numeric: tabular-nums; }

.tk-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
           padding: 7px 16px; background: linear-gradient(180deg, var(--tint-hi), var(--tint)); color: var(--tint-ink); }
/* Lime is for a ticket worth playing; a negative or ungraded one gets a neutral band. */
.tk-card.neg .tk-band, .tk-card.ungraded .tk-band { background: var(--surface-3); color: var(--label); }
.tk-band .bkname { font-size: 15px; font-weight: 700; color: inherit; }
.tk-band .blogo { --lg: 20px; }
.tk-kind { font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.tk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px;
           padding: 14px 16px 8px; }
.tk-k { display: block; font-size: 13px; font-weight: 500; color: var(--label-2); }
.tk-big { display: block; font-size: 40px; font-weight: 750; letter-spacing: -.03em; line-height: 1.08; color: var(--label); }
.tk-basenote { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--label-2); }
.tk-ev { text-align: right; }
.tk-evv { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--label); }
.tk-card.pos .tk-evv { color: var(--tint-text); }
.tk-card.neg .tk-evv { color: var(--red-text); }
.tk-card.ungraded .tk-evv { font-size: 18px; font-weight: 600; color: var(--label-2); }
/* An estimated EV's 🟡 (web_cards `estimate`), under the number, quiet. */
.tk-est, .tev .testimate { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0;
                          text-transform: none; color: var(--label-2); }

.tk-facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding: 2px 16px 12px;
            border-bottom: .5px solid var(--sep); }
.tk-facts dt { font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.tk-facts dd { margin: 0; font-size: 16px; font-weight: 650; }
.tk-facts .tk-stake.none dd { color: var(--label-2); font-weight: 500; }

.tk-legs { list-style: none; margin: 0; padding: 0 16px; }
.tk-group { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 2px; font-size: 13.5px;
            font-weight: 650; color: var(--label-2); }
.tk-group span { min-width: 0; overflow-wrap: anywhere; }
.tk-group b { color: var(--label); }
.tk-leg { padding: 11px 0; border-bottom: .5px solid var(--sep); }
.tk-leg:last-child { border-bottom: 0; }
.tk-lrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tk-lmain { min-width: 0; }
.tk-lname { display: block; font-size: 16.5px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.tk-lsub { display: block; margin-top: 1px; font-size: 13.5px; color: var(--label-2); overflow-wrap: anywhere; }
.tk-lprice { flex: 0 0 auto; text-align: right; }
.tk-lprice b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; }
.tk-lfair { display: block; font-size: 12.5px; color: var(--label-2); white-space: nowrap; }
.tk-comps { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.tk-card .pchip { font-size: 13.5px; font-weight: 600; }
.tk-card .pchip .blogo { --lg: 16px; }

.tk-also { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 16px;
           border-top: .5px solid var(--sep); }
.tk-alsorow { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.tk-age { padding: 8px 16px 0; font-size: 12.5px; color: var(--label-2); }
/* Why a ticket carries no stake when it is not the price (web_cards.no_stake). */
.tk-why { padding: 8px 16px 0; font-size: 12.5px; color: var(--label-2); }
.tcard .tk-why { padding: 8px 20px 0; }
/* "✅ You placed this" — a bet already in the member's own log (oddsbot/placed.py). */
.tplaced { margin: 10px 20px 0; font-size: 13.5px; font-weight: 700; color: var(--label); }
.tk-placed { margin: 10px 16px 0; }
/* A card's own line in words (web_cards.ticket `notes`): a watch ping's bet types differ from the
   promo's terms, or are held on them. */
.tnote { margin: 10px 20px 0; font-size: 13.5px; font-weight: 600; color: var(--label-2); }
.tk-tnote { margin: 10px 16px 0; }
.lplaced { display: inline-block; margin: 2px 8px 0 0; font-size: 12px; font-weight: 700;
           color: var(--label-2); white-space: nowrap; }

.tk-actions { padding: 12px 16px 14px; }
.tk-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The one action: outlined, high contrast in both themes — not a full-width lime bar. */
.tk-go { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
         min-height: 46px; padding: 6px 18px; border-radius: 12px; border: 1.5px solid var(--label);
         /* Solid (Joe, 2026-09-27, option 3): the one action on the card should pop — white on
            dark, near-black on light — while the band carries the lime. */
         background: var(--label); color: var(--bg); font-size: 15.5px; font-weight: 700; }
.tk-go .blogo { --lg: 20px; }
.tk-go .tbook { font-weight: 750; }
a.tk-go:active { filter: brightness(.9); }
@media (hover: hover) { a.tk-go:hover { text-decoration: none; filter: brightness(1.08); } }
/* No deep link: says where to enter the legs, as text on a quiet fill — not a button. */
.tk-go.off { border-color: transparent; background: var(--fill-3); color: var(--label); font-weight: 500; }
.tk-note { margin-top: 6px; font-size: 12.5px; color: var(--label-2); }
.tk-tools { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
.tk-text { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--tint-text); font: inherit;
           font-size: 14.5px; font-weight: 600; cursor: pointer; }
.tk-text:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
/* "How much did you stake?" after a tap has logged a bet (static/place.js adjustStake). */
.stakeback { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
             padding: 16px; background: rgba(0, 0, 0, .5); }
@media (min-width: 641px) { .stakeback { align-items: center; } }
.stakebox { width: 100%; max-width: 420px; padding: 18px; border-radius: 16px; background: var(--surface);
            border: .5px solid var(--hairline); box-shadow: var(--card-shadow); color: var(--label); }
.stakehead { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.stakefield { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 12px;
              background: var(--fill); border: 1px solid var(--field-border); font-size: 20px; font-weight: 650; }
.stakefield:focus-within { outline: 3px solid var(--ring); outline-offset: 1px; }
.stakecur { color: var(--label-2); }
/* Scoped under its field so it outranks the site-wide `input[type=text]` / `input:focus` rules,
   which drew a second bordered box (and a second focus ring) inside the field. */
.stakefield .stakein, .stakefield .stakein:focus { flex: 1 1 auto; width: auto; min-width: 0; min-height: 0;
  padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; outline: none; }
.stakechips { margin-top: 12px; }
.stakehint { margin: 10px 0 0; font-size: 13.5px; color: var(--label-2); }
.stakeerr { margin: 8px 0 0; font-size: 14px; color: var(--red-text); }
.stakeerr[hidden] { display: none; }
.stakeacts { display: flex; gap: 10px; margin-top: 16px; }
.stakeacts .placebtn { flex: 1 1 auto; }
.stakecancel { min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--sep); background: transparent;
               color: var(--label); font: inherit; font-weight: 600; cursor: pointer; }
/* "I placed it", as a secondary button beside the slip. */
.tk-card .placewrap.tk-place { margin: 0; min-height: 46px; justify-content: flex-start; }
.tk-card .tk-place .placebtn { width: auto; min-height: 46px; padding: 0 16px; border-radius: 12px; font-size: 15px;
                               font-weight: 600; background: transparent; color: var(--label);
                               border: 1px solid var(--sep); }
@media (hover: hover) { .tk-card .tk-place .placebtn:hover { background: var(--fill-3); } }
.srcopy { position: fixed; left: -9999px; top: 0; opacity: 0; }

@media (max-width: 640px) {
  .tk-big { font-size: 36px; }
  .tk-evv { font-size: 23px; }
  .tk-go, .tk-card .placewrap.tk-place, .tk-card .tk-place .placebtn { flex: 1 1 100%; width: 100%; }
}

/* The builder's form, folded to one line once it has answered (Clean). */
#cmdform[hidden] { display: none; }
.runsummary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px; margin: 0 0 14px;
              padding: 6px 8px 6px 16px; border-radius: 14px; background: var(--surface);
              border: .5px solid var(--hairline); box-shadow: var(--card-shadow); }
.runsummary[hidden] { display: none; }
.rs-text, .rfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.rs-text { flex: 1 1 auto; font-size: 15px; font-weight: 600; }
.rs-text > span, .rfilters > span { min-width: 0; overflow-wrap: anywhere; }
.rs-dot { color: var(--label-2); font-weight: 400; }
.rs-count { font-size: 14px; color: var(--label-2); white-space: nowrap; }
.rs-edit { margin-left: auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--fill-2);
           color: var(--tint-text); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; }
.rs-edit:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.rfilters { margin: -2px 0 12px; font-size: 14px; color: var(--label-2); }
.rfilters .blogo { --lg: 16px; }
/* The newest answer's filters are already in the summary line above the page. */
.runsummary:not([hidden]) ~ .output > .result:first-child .rfilters { display: none; }

/* ============================================================ Today's promos, grouped (Clean)
   Ready to use / Needs review / Expired (web/promos.py `promo_state`). An expired or stale
   promo is greyed and carries no Watch or Build. */

.pgroup { margin: 0 0 20px; }
.pgrouphead { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 4px; font-size: 17px; font-weight: 700; }
.pgrouphead .count { font-size: 15px; font-weight: 500; color: var(--label-2); }
.pgrouphint { margin: 0 0 10px; font-size: 13.5px; color: var(--label-2); }
.pflag { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
         background: color-mix(in srgb, var(--c-orange) 18%, transparent); color: var(--pill-orange); }
.pflag.off { background: var(--fill-2); color: var(--label-2); }
.pcard.expired { background: var(--surface-2); box-shadow: none; }
.pcard.expired .ptitle { color: var(--label-2); }
.pcard.expired .pkind { background: var(--fill); color: var(--label); }
.pcard .pact[hidden], .pcard .plinks[hidden], .pcard .pboost[hidden] { display: none; }

/* ============================================================ a ping's page (/ping/<id>) */

.pinghead { margin: 4px 0 16px; max-width: 640px; }
.pinghead h1 { margin: 0; font-size: 30px; }
.pingsub { font-size: 17px; font-weight: 600; color: var(--label); margin-top: 4px; }
.pingage { font-size: 14px; margin-top: 4px; }
.pingstale { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             flex-wrap: wrap; max-width: 640px; }
.pingstale[hidden] { display: none; }
.pingstale .btn { min-height: 44px; }
.pingwithout { display: flex; align-items: center; justify-content: space-between; gap: 12px;
               flex-wrap: wrap; max-width: 640px; }
.pingwithout[hidden] { display: none; }
.pingwithout .btn { min-height: 44px; }
.pingticket, .pingout, .pingnote { max-width: 640px; }
.pingticket .msg { margin: 0; }
.pingactions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; max-width: 640px; }
.pingactions .btn { min-height: 44px; flex: 1 1 140px; }
.pingnote { font-size: 14.5px; margin: 0 0 16px; }
.pingnote[hidden] { display: none; }
.pingnote .pinglogged { color: var(--label); font-weight: 600; margin-top: 6px; }
.pingout { margin-top: 18px; }
.wact .wlastping { text-decoration: none; }
@media (max-width: 720px) {
  .pinghead h1 { font-size: 26px; }
}

/* ============================================================ the Live page (/live) */

/* The folded filters: one summary line, a count of what is set, and Edit. */
.lv-filterbar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 10px;
                padding: 8px 14px; border: .5px solid var(--glass-border); border-radius: var(--r-l);
                background: var(--surface); color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.lv-filterbar .icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--label-2); }
.lv-fsum { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
           text-overflow: ellipsis; }
.lv-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid;
            place-items: center; font-size: 12px; font-weight: 800; background: var(--tint); color: var(--tint-ink); }
.lv-badge[hidden] { display: none; }
.lv-fedit { flex: 0 0 auto; font-size: 14.5px; font-weight: 650; color: var(--tint-text); }
.lv-filterbar:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.lv-filterbar.open { border-bottom-left-radius: var(--r-s); border-bottom-right-radius: var(--r-s); }
.liveform[hidden] { display: none; }
.liveform { margin-bottom: 12px; }
.lv-chips { gap: 6px; margin-top: 2px; }
.lv-chips .chip { min-height: 36px; padding: 0 13px; font-size: 14.5px; }
.lv-done { justify-content: flex-end; }
.lv-done button.primary { min-width: 120px; min-height: 44px; margin-top: 8px; }

/* The refresh line: ONE sticky row above the cards (toggle · interval · Refresh · status). */
.lv-bar { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 5;
          display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 6px; padding: 6px 10px;
          border-radius: var(--r-m); border: .5px solid var(--glass-border);
          /* Opaque: cards scroll UNDER this row, and glass let their numbers read through it. */
          background: var(--surface); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .5); }
.lv-auto { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0;
           min-height: 36px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--label); }
.lv-auto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lv-auto .knob { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--fill);
                 transition: background .2s var(--ease); flex: 0 0 auto; }
.lv-auto .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
                        border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
                        transition: transform .2s var(--ease); }
.lv-auto input:checked + .knob { background: var(--c-green); }
.lv-auto input:checked + .knob::after { transform: translateX(16px); }
.lv-auto input:focus-visible + .knob { outline: 3px solid var(--ring); outline-offset: 2px; }
.lv-bar select { flex: 0 0 auto; width: auto; min-width: 0; min-height: 36px; padding: 0 28px 0 10px;
                 background-position: right 7px center; background-size: 14px; font-size: 14px; border-radius: 10px; }
.lv-refresh { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill);
              color: var(--label); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.lv-refresh { display: inline-flex; align-items: center; gap: 6px; }
.lv-refresh .icon { width: 18px; height: 18px; }
.lv-refresh:active { transform: scale(.97); }
/* On a phone the button is its icon (it keeps its accessible name); the status gets the room. */
@media (max-width: 520px) { .lv-reflbl { display: none; } .lv-refresh { padding: 0 9px; } }
.lv-refresh:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.lv-state { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; justify-content: flex-end;
            min-width: 0; font-size: 13.5px; font-weight: 650; color: var(--label); white-space: nowrap; }
.lv-short { overflow: hidden; text-overflow: ellipsis; }
.lv-updated { color: var(--label-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.lv-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--c-gray); }
.lv-state[data-kind="live"] .lv-dot { background: var(--c-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 22%, transparent); }
.lv-state[data-kind="warm"] .lv-dot, .lv-state[data-kind="warn"] .lv-dot { background: var(--c-orange); }
.lv-state[data-kind="bad"] .lv-dot { background: var(--c-red); }
.lv-state[data-kind="warn"] .lv-short { color: var(--warn-text); }
.lv-state[data-kind="bad"] .lv-short { color: var(--red-text); }
.lv-state.busy .lv-dot { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .lv-state[data-kind="live"] .lv-dot { animation: lvpulse 2s var(--ease) infinite; }
}
@keyframes lvpulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-green) 0%, transparent); } }
/* "N new · Show": a changed list waits here while the member is scrolled into the old one. */
.lv-newpill { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 6;
              min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tint);
              color: var(--tint-ink); font: inherit; font-size: 14px; font-weight: 750; white-space: nowrap;
              box-shadow: var(--lift); cursor: pointer; }
.lv-newpill[hidden] { display: none; }
.lv-newpill:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.lv-stateline { margin: 2px 4px 4px; font-size: 13.5px; color: var(--label-2); }
.lv-cards + .panel, #lv_empty { margin-top: 8px; }
#lv_error[hidden], #lv_count[hidden], #lv_empty[hidden], #lv_notes[hidden] { display: none; }
.lv-cards .rowcount, #lv_count { margin: 2px 4px 10px; }

/* Cards: one column on a phone, a grid where there is room (the card keeps its phone width). */
.lv-cards { min-width: 0; container-type: inline-size; }
.lv-cards .tickets { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
                     align-items: start; }
.lv-cards .tickets > * { margin: 0; }
@container (min-width: 700px) { .lv-cards .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .lv-cards .tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A refresh that moved this card's price or EV: a brief ring and an "Updated" tag. */
.lv-card { transition: box-shadow .3s var(--ease); }
.lv-card.lv-changed { box-shadow: 0 0 0 2px var(--tint), var(--card-shadow); }
.lv-cue { margin-left: auto; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800;
          letter-spacing: .06em; text-transform: uppercase; background: var(--tint-ink); color: var(--tint); }
.tk-card.neg .lv-cue, .tk-card.ungraded .lv-cue { background: var(--label); color: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .lv-card.lv-changed { animation: lvflash 1.4s var(--ease); }
}
@keyframes lvflash { 0% { box-shadow: 0 0 0 6px var(--tint-soft), var(--card-shadow); }
                     100% { box-shadow: 0 0 0 2px var(--tint), var(--card-shadow); } }
/* A price past the in-play ceiling (or a feed gone quiet): greyed, its actions put away. */
.lv-card.lv-stale { opacity: .55; filter: grayscale(.7); }
.lv-card.lv-stale a.tk-go, .lv-card.lv-stale a.tbet { pointer-events: none; }
.lv-card.lv-stale .placewrap:not(.logged), .lv-card.lv-stale .tk-tools { display: none; }
.lv-card.lv-stale .tk-age { color: var(--warn-text); font-weight: 600; }
.tcard .lv-age { padding: 0 20px 10px; }
.lv-notes { margin: 6px 4px 12px; font-size: 13.5px; color: var(--label-2); }
.lv-notes summary { cursor: pointer; font-weight: 600; }
.lv-notes ul { margin: 6px 0 0; padding-left: 18px; }
.lv-foot { font-size: 13px; margin: 8px 4px 18px; max-width: 64ch; }
@media (max-width: 359px) {
  .lv-bar { gap: 6px; padding: 6px 8px; }
  .lv-autolbl { display: none; }
  .lv-refresh { padding: 0 10px; }
}


/* ============================================================ Get the app (web/getapp.py)
   The install guide: a tab per device, numbered steps, and the push switch as the last step.
   Each step's picture is a small HTML mock-up of the browser's own control, drawn from the
   tokens above so it follows Light/Dark; `.gm-hl` is the thing to tap. Tabs are LINKS
   (`?device=`), so they work with scripts off; static/getapp.js switches them in place. */

.gahero { display: flex; align-items: center; gap: 16px; margin: 4px 0 10px; }
.gahero h1 { margin: 0; }
.gaicon { width: 64px; height: 64px; border-radius: 15px; flex: 0 0 auto; display: block;
          box-shadow: 0 0 0 .5px var(--glass-border), 0 8px 20px rgba(0, 0, 0, .22); }
.galede { margin-bottom: 18px; }
.gainapp { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.gacheck { width: 22px; height: 22px; flex: 0 0 auto; color: var(--tint-text); margin-top: 1px; }

.gatabs { display: flex; padding: 2px; gap: 2px; border-radius: 10px; background: var(--seg-track);
          margin: 0 0 14px; }
.gatabs a { flex: 1 1 0; min-width: 0; display: grid; place-items: center; min-height: 40px;
            padding: 0 6px; border-radius: 8px; color: var(--label); font-size: 14.5px; font-weight: 500;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            transition: background .2s var(--ease); }
.gatabs a.on { background: var(--seg-on); font-weight: 600;
               box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
@media (hover: hover) {
  .gatabs a:hover { text-decoration: none; }
  .gatabs a:not(.on):hover { background: var(--fill-3); }
}

.gapanel { padding: 4px 20px 18px; }
.gasteps { list-style: none; margin: 0; padding: 0; counter-reset: gastep; }
.gastep { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px;
          align-items: start; padding: 16px 0; border-bottom: .5px solid var(--sep); }
.gastep:last-child { border-bottom: 0; padding-bottom: 6px; }
.gastep::before { counter-increment: gastep; content: counter(gastep); grid-column: 1; grid-row: 1 / span 2;
                  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
                  background: var(--tint); color: var(--tint-ink); font-size: 15px; font-weight: 750; }
.gatext { grid-column: 2; min-width: 0; }
.gatext h3 { margin: 3px 0 4px; }
.gatext p { margin: 0; color: var(--label-2); font-size: 15px; line-height: 1.45; }
.gatext b { color: var(--label); }
.gainl { width: 1.2em; height: 1.2em; vertical-align: -.25em; color: var(--label); }
h3 .gainl { color: inherit; }
.gafoot { margin: 10px 0 0; }
.gastatus { margin: 12px 0 0; }
.gastatus:empty { display: none; }
.gaquick { padding: 16px 0 2px; }
.gaquick .btn .icon { width: 20px; height: 20px; }
.gaquick p { margin: 8px 0 0; }
.gaswitch { margin: 16px 0 4px; }
.gaswitch p { margin-bottom: 10px; }
.gacopyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gaurl { overflow-wrap: anywhere; }
.gacopyrow .btn .icon { width: 17px; height: 17px; }

/* The mock-ups. */
.gamock { max-width: 300px; padding: 10px; border-radius: 16px; background: var(--surface-2);
          border: .5px solid var(--hairline); color: var(--label); font-size: 13.5px;
          -webkit-user-select: none; user-select: none; }
.gastep .gamock { grid-column: 2; margin-top: 12px; }
.gamock .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.gm-hl { color: var(--tint-text); background: var(--tint-soft); box-shadow: inset 0 0 0 1.5px var(--tint);
         font-weight: 650; }
.gm-url { display: block; min-width: 0; padding: 6px 12px; border-radius: 10px; background: var(--fill-2);
          color: var(--label-2); text-align: center; font-size: 12.5px; white-space: nowrap; overflow: hidden;
          text-overflow: ellipsis; }
/* Safari's compact bar (iOS 26 on) with the ⋯ menu open above it. */
.gm-safari { display: flex; flex-direction: column; gap: 8px; }
.gm-pop { align-self: flex-end; width: 180px; max-width: 100%; border-radius: 14px;
          background: var(--surface); box-shadow: var(--card-shadow); }
.gm-bar { display: flex; align-items: center; gap: 8px; }
.gm-bar .gm-url { flex: 1 1 auto; padding: 8px 12px; border-radius: 999px; }
.gm-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
          flex: 0 0 auto; background: var(--fill-2); color: var(--label); }
.gm-btn.gm-hl { color: var(--tint-text); background: var(--tint-soft); }
.gm-ring { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.gm-list { padding: 6px; }
.gm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px;
          padding: 0 10px; border-radius: 10px; }
.gm-row + .gm-row { margin-top: 2px; }
.gm-row .icon { width: 18px; height: 18px; }
.gm-menu .gm-head { min-height: 28px; font-weight: 650; color: var(--label-2); }
.gm-home { display: grid; grid-template-columns: repeat(4, 44px); justify-content: space-between;
           padding: 14px 16px 10px; }
.gm-app { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gm-app i { display: block; width: 44px; height: 44px; border-radius: 11px; background: var(--fill); }
.gm-app img { display: block; width: 44px; height: 44px; border-radius: 11px;
              box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--tint); }
.gm-app small { font-size: 10.5px; line-height: 1.2; color: var(--label); white-space: nowrap; }
.gm-dialog { padding: 14px; }
.gm-dialog > b { display: block; font-size: 15px; margin-bottom: 10px; }
.gm-appline { display: flex; align-items: center; gap: 10px; }
.gm-appline img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.gm-appline span { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.gm-appline small { font-weight: 400; color: var(--label-2); font-size: 12px; }
.gm-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.gm-btns span { padding: 6px 14px; border-radius: 999px; color: var(--label-2); font-weight: 600; }
.gm-btns .gm-hl { color: var(--tint-text); }
.gm-addr { display: flex; align-items: center; gap: 8px; }
.gm-addr .gm-url { flex: 1 1 auto; text-align: left; }
.gm-addr .gm-ring { width: 34px; height: 34px; border-radius: 10px; }

/* The notifications step, with the banner the test push draws on a lock screen. */
.ganotify { margin-top: 28px; scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px); }
.ganotify .lede { margin-bottom: 14px; }
.gm-note { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start;
           max-width: 380px; margin: 0 0 18px; padding: 12px 14px; border-radius: 20px;
           background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
           box-shadow: var(--card-shadow); }
.gm-note img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.gm-notetext { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.3; }
.gm-note small { color: var(--label-2); font-size: 12px; }
.gasignin .gacta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) {
  .gapanel { padding-left: 16px; padding-right: 16px; }
  .gasignin .gacta > * { flex: 1 1 100%; }
}
/* Wider screens: the picture sits beside its step. */
@media (min-width: 720px) {
  .gastep { grid-template-columns: 30px minmax(0, 1fr) 250px; }
  .gastep .gamock { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; width: 100%; }
}
/* Already running as the installed app: the browser says so before any script runs (and
   getapp.js adds `.ga-in` where it doesn't — iOS reports `navigator.standalone`). */
@media (display-mode: standalone) { .gainstall, .galede { display: none; } }
.getapp.ga-in .galede { display: none; }

/* "Get the app" links on the landing, sign-in and setup pages. */
.applink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px;
           font-weight: 600; }
.applink .icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* ============================================================ "⚠️ Something's off"
   static/report.js (2026-10-05): a quiet text control on every card and answer, and ONE dialog on
   <body> (never inside a card — the Live page redraws its cards every few seconds). A bottom
   sheet's width on a phone, a small centred card on anything wider. Text roles only. */

.reportbtn { color: var(--label-2); }
.reportbtn.sent { color: var(--tint-text); cursor: default; }
.reportbtn:disabled { opacity: 1; }
.tcard > .reportbtn.tcardreport { display: block; margin: -10px auto 14px; font-size: 13.5px;
                                  min-height: 32px; }
.reportslot { display: flex; justify-content: center; margin: 0 16px 12px; min-height: 0; }
.reportslot .reportbtn { font-size: 13.5px; min-height: 32px; }
.pcard .reportslot { justify-content: flex-start; margin: 8px 0 0; }
.resultfoot { display: flex; justify-content: flex-end; margin: 6px 2px 0; }
.resultfoot .reportbtn { font-size: 13.5px; min-height: 32px; }
.rpdialog { border: 0; padding: 0; border-radius: var(--r-xl); background: var(--surface);
            color: var(--label); box-shadow: var(--lift); width: min(440px, calc(100% - 32px));
            max-width: 100%; }
.rpdialog::backdrop { background: rgba(0, 0, 0, .42); }
.rpform { display: grid; gap: 10px; padding: 18px 18px 16px; }
.rpform h2 { margin: 0; font-size: 18px; font-weight: 700; }
.rpform p { margin: 0; }
.rplabel { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.rpbox { width: 100%; min-height: 96px; resize: vertical; font: inherit; font-size: 16px; }
.rperr { color: var(--red-text); font-size: 14px; }
.rpacts { display: flex; gap: 10px; justify-content: flex-end; }
.rpacts .btn { min-height: 44px; min-width: 96px; }
@media (max-width: 520px) { .rpacts .btn { flex: 1 1 0; } }

/* My bets -> Your reports */
.myreports { margin-top: 16px; }
.rplist { list-style: none; margin: 0 0 10px; padding: 0; }
.rpitem { padding: 10px 0; border-top: 1px solid var(--sep); }
.rpitem:first-child { border-top: 0; }
.rptop { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rp-fixed .rpstatus { color: var(--tint-text); }
.rpnote { margin: 4px 0 0; color: var(--label-2); font-size: 14px; overflow-wrap: anywhere; }

/* Admin: selection coverage (web/coverage_page.py). Status is a word AND a colour, never colour
   alone: complete / partial / failed / unobserved / excluded. */
.covpill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
           font-size: 12.5px; font-weight: 650; white-space: nowrap; background: var(--fill-2);
           color: var(--label-2); }
.covpill.complete { background: color-mix(in srgb, var(--c-green) 18%, transparent); color: var(--tint-text); }
.covpill.partial { background: color-mix(in srgb, var(--c-orange) 18%, transparent); color: var(--pill-orange); }
.covpill.failed { background: color-mix(in srgb, var(--c-red) 16%, transparent); color: var(--pill-red); }
.covpill.unobserved { background: var(--fill-2); color: var(--label-2); }
.covpill.excluded { background: var(--fill-3); color: var(--label-2); }
.covtable td, .covtable th { padding: 9px 12px; font-size: 14px; }
.covtable td.small { font-size: 13px; color: var(--label-2); }
.covbook { margin-top: 16px; }
.covbook > summary { cursor: pointer; padding: 14px 16px; list-style: none; }
.covbook > summary::-webkit-details-marker { display: none; }
.covbook > summary h2 { margin: 0; font-size: 18px; }
.covsport { padding: 4px 0 14px; }
.covsport h3 { margin: 10px 16px 6px; font-size: 15px; }
.covnote { margin: 4px 16px 8px; }

/* ============================================================ Today (web/today.py) */
.todaygroup .panel > .btn { margin-top: 10px; }
.todayboost { margin-top: 8px; }
.todayfoot { margin: 18px 4px 8px; }
/* My bets: log a bet from its slip (web/static/mybets.js) */
.mbslippick { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.mbslippick select { max-width: 100%; }
.mbslipleg { margin: 10px 0; }

/* Guides (`web/guides.py`): one card per video, full width on a phone. */
.guidelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
             grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.guidecard { background: var(--surface); border-radius: var(--r-l); padding: 14px 14px 16px;
             scroll-margin-top: 72px; }
.guidecard h2 { margin: 0 0 4px; font-size: 19px; }
.guidecard h2 a { color: var(--label); text-decoration: none; }
.guidecard p { margin: 0 0 10px; font-size: 15px; }
/* The recordings are phone screens (390x844): portrait, capped so a computer isn't all video. */
.guidecard video { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto;
                   aspect-ratio: 390 / 844;
                   border-radius: var(--r-m); background: var(--surface-2); }