/* Tokens (light, dark), reset */
/* Fonts, served from assets/fonts (11/1: Google's stylesheet held the first paint): Google's Latin files (IBM Plex Sans
   one variable file for every weight, IBM Plex Mono and Barlow Condensed a file per weight); a character outside the
   range (an arrow, ≈) comes from the system's font, as it did from Google's */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/plex-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Tokens. Light: cool paper + ink. Dark: graphite. Accent = signal blue (legs to take); green/amber = edge. */
:root {
  color-scheme: light;
  --ground: #f2f3ef;
  --surface: #ffffff;
  --raised: #f7f8f5;
  --sunk: #eceee9;
  --ink: #12161b;
  --muted: #5d6670;
  --faint: #98a0a7;
  --line: #e2e5df;
  --line-strong: #cfd4cc;
  --panel-shadow: 0 1px 2px rgb(16 24 32 / 0.06), 0 8px 24px -10px rgb(16 24 32 / 0.14);
  --accent: #2b59c3;
  --accent-ink: #1f46a3;
  --accent-tint: #e7eefc;
  --on-accent: #ffffff;
  --pos: #0e7a4f;
  --pos-tint: #def2e7;
  --near: #b07a12;
  --near-tint: #f6ecd3;
  --far: #dfe2dc;
  --bad: #c2362b;
  --flash-up: rgba(14, 122, 79, 0.16);
  --flash-down: rgba(194, 54, 43, 0.14);
  --v-dk: #e3782b;
  --v-fd: #1b6ef3;
  --v-kalshi: #0f9f78;
  --v-polymarket: #7b5cf0;
  --v-novig: #222222;
  --v-mgm: #a8864a;
  --v-pin: #e2561e;
  --v-hr: #5b2fd6;
  --v-ud: #c99a00;
  --v-pp: #7b3fe4;
  --v-brs: #1f6f8b;
  --v-fan: #cc3038;
  --v-tsb: #0040f7;
  --v-bwy: #111111;
  --v-b365: #126e51;
  --v-rebet: #c2185b;
  --v-b105: #3a78bf;
  --v-mm: #8a3ffc;
  /* type (Avi 10/14, notes/mock-fonts-v2.html "4 refined"): IBM Plex Sans for words, IBM Plex Mono for every price and
     line; Barlow Condensed only for the BestBook wordmark (--brand) */
  --brand: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --display: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --num: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --row: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: var(--num);
  /* Scale. Type: xs labels · sm meta · md UI and body · lg emphasis · xl titles. Space: a 4px grid.
     Words in IBM Plex Sans (--body, --row, --display), prices and lines in IBM Plex Mono (--num); Barlow Condensed is the
     wordmark's alone (--brand). */
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 15px;
  --t-xl: 20px;
  --t-2xl: 28px;
  --nw: 320px; /* every table's row-name column: the longest name (31 characters) whole, with its OVER / UNDER */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --r: 4px;
  --r-sm: 2px;
  --ctl: 32px;
  --gutter: 24px;
  --maxw: 1560px;
}
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --nw: 168px;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --ground: #0d1012;
    --surface: #14181b;
    --raised: #1a1f23;
    --sunk: #101316;
    --ink: #e7eaec;
    --muted: #8e979e;
    --faint: #5d666d;
    --line: #232a2f;
    --line-strong: #313a40;
    --panel-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.045), 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 36px -14px rgb(0 0 0 / 0.75);
    --accent: #7fa3ff;
    --accent-ink: #a9c1ff;
    --accent-tint: #1b2846;
    --on-accent: #0d1012;
    --pos: #4cc98d;
    --pos-tint: #12301f;
    --near: #e2b053;
    --near-tint: #33280f;
    --far: #262d32;
    --bad: #ff6b5e;
    --flash-up: rgba(76, 201, 141, 0.2);
    --flash-down: rgba(255, 107, 94, 0.18);
    --v-dk: #f2924a;
    --v-fd: #4d8ef7;
    --v-kalshi: #2fc497;
    --v-polymarket: #9a82f7;
    --v-novig: #d6d6d6;
    --v-mgm: #cdb07a;
    --v-pin: #ff7a45;
    --v-hr: #9d85ff;
    --v-ud: #f5c518;
    --v-pp: #a678ff;
    --v-brs: #5fb3d3;
    --v-fan: #f0646c;
    --v-tsb: #6b8cff;
    --v-bwy: #e8e8e8;
    --v-b365: #3ccf8e;
    --v-rebet: #f06292;
    --v-b105: #6aa6e6;
    --v-mm: #b48cff;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #0d1012;
  --surface: #14181b;
  --raised: #1a1f23;
  --sunk: #101316;
  --ink: #e7eaec;
  --muted: #8e979e;
  --faint: #5d666d;
  --line: #232a2f;
  --line-strong: #313a40;
  --panel-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.045), 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 36px -14px rgb(0 0 0 / 0.75);
  --accent: #7fa3ff;
  --accent-ink: #a9c1ff;
  --accent-tint: #1b2846;
  --on-accent: #0d1012;
  --pos: #4cc98d;
  --pos-tint: #12301f;
  --near: #e2b053;
  --near-tint: #33280f;
  --far: #262d32;
  --bad: #ff6b5e;
  --flash-up: rgba(76, 201, 141, 0.2);
  --flash-down: rgba(255, 107, 94, 0.18);
  --v-dk: #f2924a;
  --v-fd: #4d8ef7;
  --v-kalshi: #2fc497;
  --v-polymarket: #9a82f7;
  --v-novig: #d6d6d6;
  --v-mgm: #cdb07a;
  --v-pin: #ff7a45;
  --v-hr: #9d85ff;
  --v-ud: #f5c518;
  --v-pp: #a678ff;
  --v-brs: #5fb3d3;
  --v-fan: #f0646c;
  --v-tsb: #6b8cff;
  --v-bwy: #e8e8e8;
  --v-b365: #3ccf8e;
  --v-rebet: #f06292;
  --v-b105: #6aa6e6;
  --v-mm: #b48cff;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: var(--ground);
  color: var(--ink);
  font: var(--t-md)/1.45 var(--body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- press feedback: every tappable thing answers the moment it's pressed, not on release (the apple-design skill:
   response). A tint laid over the element's own background (an "on" tab, an arb's green, a picked row stay visible under
   it); only the innermost pressed thing tints, so a price cell in an arb row doesn't darken the whole row. Chips and tabs
   also give a little (scale). iOS needs a touchstart listener before it applies :active (boot.js). Not a popup's backdrop:
   it carries data-line while a line is open, and holding a click on it to close tinted the whole screen (10/14) ---------- */
:root {
  --press: color-mix(in srgb, var(--ink) 9%, transparent);
}
:is(button, a[href], a[data-view], [role='tab'], [data-line], .ac[data-id], summary, .arow[data-id], .arow[data-rp], .arow[data-ox], .dr[data-p], .pl, .ftitle, .fx, .hist .hg, .arbhead, .rpp-r[data-t], .olmore, [data-pid], [data-st], [data-col],
  [data-dxv], [data-close], [data-pback], [data-pall], .dx-cols span) {
  -webkit-tap-highlight-color: transparent;
}
:is(button, a[href], a[data-view], [role='tab'], [data-line], .ac[data-id], summary, .arow[data-id], .arow[data-rp], .arow[data-ox], .dr[data-p], .pl, .ftitle, .fx, .hist .hg, .arbhead, .rpp-r[data-t], .olmore, [data-pid], [data-st], [data-col],
  [data-dxv], [data-close], [data-pback], [data-pall], .dx-cols span):not(:disabled, .pop):active:not(
    :has(:is(button, a[href], a[data-view], [role='tab'], [data-line], .ac[data-id], summary, .arow[data-id], .arow[data-rp], .arow[data-ox],
      .dr[data-p], .pl, .ftitle, .fx, .hist .hg, .rpp-r[data-t], .olmore, [data-pid],
      [data-st], [data-col], [data-dxv], [data-close], [data-pback], [data-pall], .dx-cols span):active)
  ) {
  background-image: linear-gradient(var(--press), var(--press)) !important;
}
/* chips and tabs: a small give under the finger */
:is(.game, .lgs button, .bnav a, .bmore a, .tda, .am, .seg button, .perseg button):not(:disabled):active {
  scale: 0.97;
}
@media (prefers-reduced-motion: reduce) {
  :is(.game, .lgs button, .bnav a, .bmore a, .tda, .am, .seg button, .perseg button):active {
    scale: none;
  }
}