/* Self-hosted Titillium Web + IBM Plex Mono (latin/latin-ext subsets).
   Replaces the render-blocking @import to fonts.googleapis.com: a CSS
   @import serialises round trips (load base.css, then discover the import,
   then fetch Google's CSS, then the font files) and adds an external
   origin. Local @font-face removes all of that; browsers still fetch only
   the subset a page needs via unicode-range. font-display: swap is kept. */
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/250613af4b.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/7febd16d7c.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/d41ec0a93e.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/7f25d9307a.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/d196e8ee77.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/e6406f48a7.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/5907a9b4db.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/0bd1c2538c.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/b42080b233.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/a7544cc400.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ea6907c89f.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/64963edf6d.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/0e01ed2dc3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/bf8910cb40.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/9b82705994.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;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/21d542d223.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/2d22e2a69e.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;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/96020beb7d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/1744e7f05b.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;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/1c5fe15dd1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/f53fa9251e.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;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/c46c45f52d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/4c8727c08a.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;
}
/* Broadsheet identity retarget (v5.7.343). The base palette and fonts were
   remapped from the legacy blue ink + Bebas/Barlow set to the Broadsheet
   tokens the Next front end uses (web/app/globals.css), so every legacy Flask
   page inherits the new look through these shared vars. Spec names in
   tokens.css alias to these, so the whole token tree shifts in one move. */
:root {
  --bg: #0a0b0d; --bg2: #131519; --bg3: #1b1e24; --bg4: #242830;
  --border: rgba(255,255,255,0.07); --borderB: rgba(255,255,255,0.13);
  --t1: #f2f0ea; --t2: #99a1ab; --t3: #7c828d;
  --blue: #2ff0d6; --blueD: rgba(47,240,214,0.10);
  --green: #4ade80; --greenD: rgba(74,222,128,0.12);
  --gold: #f5b942; --goldD: rgba(245,185,66,0.12);
  --red: #fb5d6b;
  /* --orange removed in v5.7.114 — orange is not in the brand palette
     (brand pack §15). The longshot tag now uses --brand-soft per §12.2. */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Anchor root font size at the browser default so users who set a custom base
   size in their browser are respected, and so rem-based sizes scale with it.
   Per brand pack §7.2 / spec amendments §7.2: never set `font-size: 16px` on
   html. WCAG 1.4.4 (200% text resize) depends on rem-relative sizing. */
html { font-size: 100%; background: var(--bg); background-image: radial-gradient(120% 90% at 12% -8%, rgba(47,240,214,0.07), transparent 46%), radial-gradient(90% 80% at 108% 112%, rgba(245,185,66,0.045), transparent 50%); background-attachment: fixed; min-height: 100%; overflow-x: clip; }
body { font-family: 'Titillium Web', system-ui, sans-serif; background: transparent; color: var(--t1); padding: 1.5rem; max-width: 1200px; margin: 0 auto; line-height: 1.5; letter-spacing: 0.005em; }
.brand { font-family: var(--font-serif, 'Titillium Web', Georgia, serif); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.brand span { color: var(--blue); }
.sub { color: var(--t3); font-size: 12px; margin-bottom: 1.5rem; }
/* Sticky single-row site header — UI/UX spec §3.1.
   Brand left, primary nav centre, account right, sticky on scroll.
   Mobile/tablet (≤1023px): brand only — primary nav lives in the bottom tab bar
   (see mobile_tabbar.css + spec §3.2 / §9.1).
   Replaces the v5.7.x legacy three-row stack (brand / tagline / <nav>) plus
   hamburger drawer. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Full bleed. The body is a centred max-width:1200 box, so a normal child
     header would only span 1200px and its hairline would stop short of the
     screen edges. These negative side margins pull the bar out to the full
     viewport width (matching the Next header, which is full bleed). The
     negative top margin cancels the body's 1.5rem top padding so the bar sits
     flush to the very top, again like Next. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1.5rem;
  margin-bottom: var(--space-5);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Caps the header content at the same 1280px / centred / 32px-padded box as
   the Next header so brand, nav and account land at the same x positions on
   every page. 58px height matches Next h-[58px]. */
.site-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 58px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-sizing: border-box;
}
.site-brand { flex-shrink: 0; text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.site-brand .brand { margin-bottom: 0; }
/* Tagline beside the wordmark, matching the Next header (hidden below md). */
.site-brand-tag { display: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: var(--t3); margin-left: 2px; }
@media (min-width: 768px) { .site-brand-tag { display: inline; } }
/* Bold Cut S mark — brand pack §5. Mark sits left of the wordmark, sized to
   match the cap-height of SHARPCAST. Clear-space rule (half cap-height) is
   honoured by the .gap above. */
.site-brand-mark { display: inline-block; width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; }
.site-brand:hover .brand span { color: var(--brand-strong); transition: color 0.15s; }
@media (max-width: 768px) {  /* compact mark on tablet/mobile so the bottom tab bar can take primary nav */
  .site-brand-mark { width: 24px; height: 24px; }
}
/* margin-left:auto pushes the nav AND the account block that follows it to the
   right edge, clustered together, exactly like the Next header (brand left,
   links + account right). gap 1.5rem matches Next gap-6; 13.5px matches Next. */
.site-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; font-size: 13.5px; }
.site-nav a, .site-nav .nav-dd-trigger { color: var(--t2); text-decoration: none; letter-spacing: .04em; background: transparent; border: 0; cursor: pointer; font: inherit; padding: 4px 0; }
.site-nav a:hover, .site-nav .nav-dd-trigger:hover { color: var(--blue); }
.site-nav a.active, .site-nav .nav-dd-trigger.active { color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.site-account { display: flex; align-items: center; gap: 14px; flex-shrink: 0; font-size: 13.5px; }
.site-account a { color: var(--t2); text-decoration: none; letter-spacing: .04em; }
.site-account a:hover, .site-account a.active { color: var(--blue); }
.site-account a.members-cta { background: var(--blue); color: #04130f; padding: 6px 14px; border-radius: 6px; font-weight: 700; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
.site-account a.members-cta:hover { background: #14b8a3; color: #04130f; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(47,240,214,0.35); animation: none; }
/* Hamburger + slide-over drawer — matches the Next MobileMenu so the handset
   nav paradigm is identical to the home page everywhere. Hidden on desktop;
   the bottom tab bar is retired in favour of this single consistent menu. */
.site-burger { display: none; margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--t2); cursor: pointer; border-radius: 6px; }
.site-burger:hover { color: var(--t1); }
.site-drawer { position: fixed; inset: 0; z-index: 1000; display: none; }
.site-drawer.open { display: block; }
.site-drawer-scrim { position: absolute; inset: 0; background: rgba(10,11,13,0.7); backdrop-filter: blur(2px); }
.site-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 82%; max-width: 340px; background: var(--bg2, #131519); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
.site-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 16px; border-bottom: 1px solid var(--border); font-family: var(--font-serif, 'Titillium Web', serif); font-weight: 600; font-size: 20px; }
.site-drawer-word { white-space: nowrap; }
.site-drawer-head .site-drawer-word span { color: var(--brand); }
.site-drawer-close { width: 40px; height: 40px; background: transparent; border: 0; color: var(--t2); cursor: pointer; font-size: 22px; line-height: 1; }
.site-drawer a { display: block; padding: 13px 18px; color: var(--t2); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border); }
.site-drawer a:hover, .site-drawer a.active { color: var(--t1); background: var(--bg3, #1b1e24); }
/* Drawer group headings + indented children — mirrors the desktop dropdown
   grouping (Fixtures, About) inside the slide over menu. */
.site-drawer-h { display: block; padding: 14px 18px 6px; font-family: var(--fmono, 'IBM Plex Mono', monospace); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); }
.site-drawer a.site-drawer-sub { padding-left: 30px; }
.site-drawer a.members-cta { color: #04130f; background: var(--blue); margin: 12px; border-radius: 6px; text-align: center; font-weight: 700; border: 0; }
@media (max-width: 63.9375em) {  /* 1023px ÷ 16 — em breakpoint per brand pack §11 / spec amendments §7.2 */
  /* Hide the desktop nav links + account chrome; the hamburger drawer takes over. */
  .site-nav, .site-account { display: none; }
  .site-burger { display: inline-flex; }
  .site-header { margin-bottom: var(--space-4); }
  .site-header-inner { height: 52px; padding: 0 1.25rem; }
  /* Retire the bottom tab bar so the mobile nav matches the home page drawer. */
  .mtb-bar, .mtb-sheet, .mtb-upsell { display: none !important; }
}
h1 { font-family: var(--font-serif, 'Titillium Web', Georgia, serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
h2 { font-size: 14px; font-weight: 600; margin: 2rem 0 0.75rem; color: var(--t2); letter-spacing: .04em; text-transform: uppercase; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.5rem; }
/* v5.7.148 — KPI cards lifted to the new .surface pattern (depth + tilted
   gradient + hairline highlight). Was bare bg2 + border. */
.kpi {
  background: var(--bg-elev, var(--bg2));
  background-image: linear-gradient(140deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.32));
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
.kpi-label { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; }
.kpi-value { font-size: 28px; font-weight: 600; margin-top: 6px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi-value.green { color: var(--green); }
.kpi-value.red { color: var(--red); }
.kpi-value.gold { color: var(--gold); }
/* v5.7.167 — tabular-nums on every table cell. Digits in stats columns
   line up across rows (ROI, strike rate, edge, picks count) without
   needing per-cell .mono. Non-digit characters are unaffected. */
table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg2); border-radius: 8px; overflow: hidden; font-variant-numeric: tabular-nums; }
th { background: var(--bg3); color: var(--t3); font-size: 10px; font-weight: 600; padding: 10px 12px; text-align: left; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); vertical-align: middle; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }
.win { color: var(--green); font-weight: 600; }
.loss { color: var(--red); font-weight: 600; }
.pending { color: var(--t3); font-style: italic; font-size: 11px; }
/* v5.7.167 — tabular-nums on .mono so all 74-plus stat displays align
   columns of digits cleanly (ROIs, win counts, conviction scores, edge
   percentages, etc.). DM Mono already ships proportional-figure spacing
   for prose, so the override only matters where digits stack. */
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
/* v5.7.167 — opt-in helper for non-mono surfaces that still need column
   alignment (e.g. summary breakdowns with sans-serif numbers). */
.tnum { font-variant-numeric: tabular-nums; }
/* v5.7.169 — brand-pack §3 problem #1: green is overloaded. The HEADLINE
   and TOP PICK badges are decorative branding flags, not settled-win
   semantics, so they now wear the brand cyan accent. Green is reserved
   for "this thing settled as a win". */
.headline-tag { background: rgba(47,240,214,.15); color: var(--brand); border: 1px solid rgba(47,240,214,.3); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; }
.top-pick-tag { background: rgba(47,240,214,.15); color: var(--brand); border: 1px solid rgba(47,240,214,.35); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; cursor: help; white-space: nowrap; }
/* Longshot conviction chip — brand pack §12.2 conviction-chip pattern.
   Brand-soft background, --brand text, brand-line border. (Pre-v5.7.114
   used --orange which is not in the palette.) */
.longshot-tag { background: var(--brand-soft); color: var(--brand); border: 1px solid var(--border-brand); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; cursor: help; white-space: nowrap; }
/* Edge-size buckets — neutral language, no opinion on whether to back. */
/* Legacy `.value-*` text-colour classes — used by the terminology key and a
   few backtest views. Tier names align with the v1.3 §6.1 ladder. The v1.0
   "Huge" tier is renamed to "Under review" (see _edge_tier macro); the old
   .value-Huge selector is retained as an alias to avoid breaking pre-v1.3
   pages but should be considered deprecated. */
.value-Strong      { color: var(--green); font-weight: 700; }
.value-Healthy     { color: var(--blue);  font-weight: 600; }
.value-Modest      { color: var(--t2); }
.value-Slight      { color: var(--t3); }
.value-Negative    { color: var(--t3); }
.value-Underreview { color: var(--gold); font-weight: 600; }
.value-Huge        { color: var(--gold); font-weight: 600; } /* legacy alias */
/* Terminology key — collapsible glossary panel. */
.terms-key { margin: 1.5rem 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; }
.terms-key summary { padding: 12px 16px; cursor: pointer; user-select: none; list-style: none; font-size: 12px; letter-spacing: .04em; color: var(--t2); font-weight: 500; }
.terms-key summary::after { content: " ▼"; color: var(--t3); font-size: 9px; }
.terms-key[open] summary::after { content: " ▲"; }
.terms-key summary:hover { color: var(--t1); }
.terms-grid { padding: 0 16px 14px 16px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.terms-grid > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); }
.terms-term { color: var(--t1); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.terms-def { color: var(--t2); font-size: 12px; line-height: 1.55; }
.terms-def strong { color: var(--t1); }
.terms-def em { color: var(--t2); font-style: italic; }
@media (max-width: 540px) {
  .terms-grid > div { grid-template-columns: 1fr; gap: 4px; }
}
a.fixture-link { color: var(--blue); text-decoration: none; font-weight: 500; }
a.fixture-link:hover { text-decoration: underline; }
.foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 11px; color: var(--t3); line-height: 1.7; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--t3); }
.empty-state h3 { color: var(--t2); margin-bottom: 0.5rem; font-weight: 500; }
.button { display: inline-block; background: var(--bg3); color: var(--blue); border: 1px solid var(--blue); padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 12px; font-weight: 500; cursor: pointer; }
.button:hover { background: var(--blueD); }

/* ═══════════════════════════════════════════════════════════════════
   v5.6.3 — Mobile responsive layout (card-stacked tables)
   Breakpoint converted to em (760 ÷ 16 = 47.5em) per brand pack §11.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { padding: 0.6rem !important; font-size: 0.875rem !important; max-width: 100% !important; overflow-x: hidden; }
    h1 { font-size: 1.6rem !important; line-height: 1.15 !important; }
    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }

    /* Navigation wraps */
    nav, .nav, header nav, .top-nav {
        gap: 0.4rem !important;
        flex-wrap: wrap !important;
        font-size: 0.8125rem !important;  /* 13px → rem */
    }

    /* Cards / hero shrink */
    .fixture-hero, .card, .panel { padding: 0.85rem !important; }

    /* Force single column on any 2+ col grid */
    [class*="grid"]:not(.scoreline-grid) {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }
    .scoreline-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ─── Tables → vertical card stack ─── */
    table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 0.5rem !important;
        background: transparent !important;
    }
    thead, thead tr, thead th { display: none !important; }
    tbody { display: block !important; width: 100% !important; }
    tr {
        display: grid !important;
        grid-template-columns: max-content 1fr !important;
        gap: 0.25rem 0.75rem !important;
        background: var(--bg2, #1a1f2e) !important;
        border-radius: 10px !important;
        padding: 0.75rem 0.9rem !important;
        margin-bottom: 0.6rem !important;
        border: none !important;
        align-items: baseline;
    }
    td {
        display: contents !important;
        text-align: left !important;
        border: none !important;
        padding: 0 !important;
        font-size: 13.5px !important;
        white-space: normal !important;
    }
    /* Render the data-label as a column-1 span before the value (column-2) */
    td[data-label]::before {
        content: attr(data-label);
        text-transform: uppercase;
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--t3, #6b7280);
        font-weight: 600;
        padding-top: 1px;
    }
    /* The featured fixture cell spans the whole row at the top */
    td.cell-fixture {
        display: block !important;
        grid-column: 1 / -1;
        font-size: 15px !important;
        font-weight: 600;
        color: var(--t1) !important;
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    td.cell-fixture::before {
        display: none;
    }
    td.cell-fixture .fixture-link {
        color: var(--t1) !important;
        text-decoration: none;
    }

    /* Pills / badges compact */
    .pill, .badge, .tag, .confidence-pill, .edge-badge,
    .value-Strong, .value-Huge, .value-Healthy, .value-Modest, .value-Slight, .value-Negative,
    .headline-tag, .top-pick-tag, .longshot-tag,
    .win, .loss, .pending {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }

    /* Mono cells stay readable */
    .mono, code { font-size: 12.5px !important; }

    /* Separator rows from old "past fixtures" header — hide on mobile */
    tr td[colspan] {
        display: block !important;
        grid-column: 1 / -1;
        background: var(--bg3, #0f1422);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--t3);
        padding: 0.4rem 0.6rem !important;
        border-radius: 6px;
    }
    tr td[colspan]::before { display: none; }
}
/* end v5.6.3 mobile */

/* v5.7.62 — make the SHARPCAST wordmark a home link without losing its visual weight */
.brand-link { display: inline-block; text-decoration: none; color: inherit; }
/* v5.7.169 — wordmark hover lights the SHARP half in brand cyan to match
   the CAST half. Old hover flipped to green which was a competing accent. */
.brand-link:hover .brand span { color: var(--brand); transition: color 0.15s; }

/* v5.7.64 — Site footer (was a thin one-line .foot div). Proper grid with
   site nav, member nav, social slots, compliance + fineprint. */
/* Canonical footer. Markup in templates/partials/footer.html, kept in lockstep
   with web.py _BS_AUTH_FOOT (.bs-foot) and the Next SiteFooter so the structure
   and look match on every surface: brand + socials, three link columns, the
   ASA compliance band, the legal row, the probabilistic framing note. */
.site-footer { position: relative; z-index: 1; max-width: 1080px; margin: 64px auto 0; padding: 28px 24px 48px; border-top: 1px solid var(--border); color: var(--t3); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.footer-brand .brand-link { display: block; text-decoration: none; }
.footer-brand .brand { font-family: 'Titillium Web', system-ui, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--t1); }
.footer-brand .brand span { color: var(--blue); }
.footer-tagline { color: var(--t3); font-size: 13px; line-height: 1.6; margin-top: 12px; max-width: 40ch; }
/* v5.7.196 — footer column titles: h2 inside the contentinfo landmark
   so each footer column reads as a top-level region heading rather than
   a level skip from page h1. */
.footer-col h4,
.footer-col .footer-col-title { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--t3); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; font-weight: 500; }
.footer-col a { display: block; color: var(--t2); text-decoration: none; font-size: 13px; line-height: 1.95; transition: color .15s ease; }
.footer-col a:hover { color: var(--t1); }
/* Social icons — sit inside the brand column, square hairline buttons that
   lift to the signal accent on hover (matches .bs-socials + Next). */
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); color: var(--t3); transition: color .2s ease, border-color .2s ease; }
.footer-social a:hover { color: var(--blue); border-color: var(--borderB); }
.footer-social svg { width: 17px; height: 17px; }
/* ASA CAP compliance band — visible on every page. */
.footer-compliance { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 12.5px; color: var(--t2); }
.footer-compliance strong { color: var(--t1); font-weight: 600; }
.footer-compliance a { color: var(--t2); text-decoration: none; border-bottom: 1px solid var(--borderB); }
.footer-compliance a:hover { color: var(--t1); }
.footer-legal { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 12.5px; }
.footer-legal a { color: var(--t3); text-decoration: none; transition: color .15s ease; }
.footer-legal a:hover { color: var(--t1); }
.footer-note { margin-top: 16px; font-size: 12px; color: var(--t3); line-height: 1.6; max-width: 70ch; }
@media (max-width: 768px) {  /* 760px ÷ 16 */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   Desktop Competitions ▾ + avatar dropdowns (spec §3.1, redesigned 2026-05-06).
   Click-to-open with JS. Closes on outside click + Escape.
   Panels anchor to a side of the trigger (not centred) so they cannot
   overflow the right edge of the viewport at 110-150% zoom.
   ═══════════════════════════════════════════════════════════════════ */

/* Trigger looks like any other nav link. */
.nav-dd { position: relative; display: inline-block; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; user-select: none;
  color: var(--t2); letter-spacing: .04em; font-size: 12px;
  font-family: inherit;
}
.nav-dd-trigger:hover { color: var(--blue); }
.nav-dd-trigger.active { color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 4px; border-radius: 0; }
.nav-dd-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 3px; }
.nav-dd-caret { font-size: 10px; opacity: .7; transition: transform .15s; }
.nav-dd.open .nav-dd-caret { transform: rotate(180deg); }

/* Panels anchor to the right of the trigger (Competitions sits to the
   left of Track Record / About — anchoring right keeps the panel inside
   the viewport regardless of zoom). The avatar panel anchors right too,
   pinned to the right edge of the trigger. */
.nav-dd-panel {
  position: absolute; top: calc(100% + 8px);
  background: var(--bg2); border: 1px solid var(--borderB);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.30);
  z-index: 50;
}
/* Mega panel — Competitions. Constrains width so it can never reach the
   viewport edge at 110%+ zoom. left:0 anchors to the trigger (not the
   centre) so we always know which way it grows. */
.nav-dd-panel-mega {
  left: 0; padding: 16px 18px;
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 120px); overflow-y: auto;
}
/* Avatar panel anchors to right edge of trigger. */
.nav-dd-panel-avatar {
  right: 0; padding: 8px 0; min-width: 200px;
}
/* Simple menu panel — the Fixtures and About dropdowns. A short single
   column list anchored to the left edge of its trigger. */
.nav-dd-panel-menu {
  left: 0; padding: 6px; min-width: 280px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--borderB);
}
.nav-dd-panel-menu a {
  display: block; padding: 9px 12px; font-size: 13.5px; font-weight: 600;
  color: var(--t1); text-decoration: none; border-radius: 8px;
  border-bottom: none !important; line-height: 1.25;
}
.nav-dd-panel-menu a .dd-desc {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400;
  color: var(--t3, var(--t2)); letter-spacing: 0;
}
.nav-dd-panel-menu a:hover { background: var(--bg3); color: var(--blue); }
.nav-dd-panel-menu a.active { color: var(--blue); background: var(--bg3); }

.nav-mega-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
}
@media (max-width: 68.75em) and (min-width: 47.5625em) {  /* 1100px / 761px in em */
  .nav-dd-panel-mega { padding: 14px 16px; width: min(560px, calc(100vw - 48px)); }
  .nav-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nav-mega-col h4,
.nav-mega-col .nav-mega-h {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3); margin: 0 0 6px; font-weight: 500;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.nav-mega-col ul { list-style: none; padding: 0; margin: 0; }
.nav-mega-col li { margin: 0; padding: 0; }
.nav-mega-col li a {
  display: block; padding: 4px 0; font-size: 12.5px;
  color: var(--t1); text-decoration: none; letter-spacing: .02em;
  border-bottom: none !important;
}
.nav-mega-col li a:hover { color: var(--blue); background: transparent; }
.nav-mega-col li a.off { color: var(--t3); }
.nav-mega-col li a.off:hover { color: var(--t2); }
.nav-mega-live {
  display: inline-block; margin-left: 4px;
  background: rgba(46,204,113,.18); color: var(--green);
  border: 1px solid rgba(46,204,113,.35);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 4px; border-radius: 2px; vertical-align: middle;
  font-weight: 700;
}

.nav-mega-foot {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--border); text-align: right;
}
.nav-mega-foot a {
  font-size: 11.5px; color: var(--blue); text-decoration: none;
  letter-spacing: .04em; border-bottom: none !important;
}
.nav-mega-foot a:hover { text-decoration: underline; }

/* ─── Avatar circle (pro members) ─── */
.nav-avatar-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--borderB);
  color: var(--t1); font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.nav-avatar-trigger:hover .nav-avatar-circle { border-color: var(--blue); color: var(--blue); }
.nav-avatar-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 50%; }

.nav-avatar-email {
  padding: 6px 14px 10px; margin: 0 0 4px;
  font-size: 11px; color: var(--t3); border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.nav-dd-panel-avatar a {
  display: block; padding: 8px 14px; font-size: 12.5px;
  color: var(--t1); text-decoration: none;
  border-bottom: none !important;
}
.nav-dd-panel-avatar a:hover { background: var(--bg3); color: var(--blue); }
.nav-dd-panel-avatar a.active { color: var(--blue); }
.nav-avatar-divider {
  display: block; height: 1px; background: var(--border); margin: 6px 0;
}

/* ─── Mobile collapse — burger drawer ─── */
@media (max-width: 768px) {  /* 760px ÷ 16 */
  /* Inside the burger drawer, dropdowns become open inline blocks. The JS
     toggle still works (panel hidden→visible) and the panel sits flush
     beneath the trigger as a flat list. */
  .nav-dd { display: block; width: 100%; }
  .nav-dd-trigger {
    width: 100%; padding: 11px 14px; border-radius: 6px;
    font-size: 14px; color: var(--t2); background: transparent;
    justify-content: space-between;
  }
  .nav-dd-trigger.active { background: rgba(47,240,214,0.10); border-bottom: 0; padding-bottom: 11px; }
  .nav-dd-panel {
    position: static; min-width: 0; max-width: none;
    box-shadow: none; padding: 6px 4px 10px; margin-top: 4px;
    background: var(--bg); width: auto;
  }
  .nav-dd-panel-mega { padding: 6px 4px 10px; max-height: none; }
  .nav-mega-grid { grid-template-columns: 1fr; gap: 12px; }
  .nav-mega-col h4,
  .nav-mega-col .nav-mega-h { padding-left: 10px; }
  .nav-mega-col li a { padding: 8px 14px; font-size: 13.5px; border-radius: 4px; }
  .nav-mega-col li a:hover { background: var(--bg3); }
  .nav-mega-foot { text-align: left; padding-left: 14px; }

  .nav-dd-avatar { margin-left: 0 !important; }
  .nav-avatar-email { padding: 6px 14px; max-width: none; }
}

/* WC contextual banner — small dismissable strip during the tournament window. */
/* v5.7.169 — World Cup strip was a green-AND-blue gradient with a green
   border, two competing accents on a single banner. Now brand-cyan only. */
.wc-strip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; margin: 0 0 1rem; background: linear-gradient(135deg, rgba(47,240,214,0.10), rgba(47,240,214,0.04)); border: 1px solid rgba(47,240,214,0.30); border-radius: 6px; font-size: 13px; color: var(--t2); }
.wc-strip .emoji { font-size: 16px; }
.wc-strip a { color: var(--brand); text-decoration: none; font-weight: 600; }
.wc-strip a:hover { text-decoration: underline; }
.wc-strip strong { color: var(--t1); }
@media (max-width: 768px) {  /* 760px ÷ 16 */
  .wc-strip { font-size: 11.5px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v5.7.147 — Global polish pass.
   Restyles native form controls + tables + interactive elements with
   coherent hover/focus states and smooth transitions, lifting the
   "looks like 2010 HTML" feel without touching any markup.
   ═══════════════════════════════════════════════════════════════════ */

/* Transitions on every interactive element. Skip on prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  a, button, summary, .button,
  input[type=text], input[type=email], input[type=password], input[type=date],
  input[type=search], input[type=number], textarea, select {
    transition:
      color var(--dur-fast, 120ms) var(--ease-out, ease-out),
      background-color var(--dur-fast, 120ms) var(--ease-out, ease-out),
      border-color var(--dur-fast, 120ms) var(--ease-out, ease-out),
      box-shadow var(--dur-fast, 120ms) var(--ease-out, ease-out),
      transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
  }
}

/* Native form controls — restyled to match the dark surface system.
   Eliminates the "default OS dropdown" stamp that screams 2010. */
select, input[type=text], input[type=email], input[type=password],
input[type=date], input[type=search], input[type=number], textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--t1);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
}
select {
  /* Custom caret — replaces the default OS triangle. */
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--t2) 50%),
    linear-gradient(135deg, var(--t2) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  cursor: pointer;
}
select:hover, input:hover, textarea:hover {
  border-color: var(--borderB);
}
select:focus-visible, input:focus-visible, textarea:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 240, 214, 0.18);
}

/* Subtle row-stripe on dense data tables — improves scanability without
   shouting. Only applies to plain <table> elements (not the styled
   v13-mt-table or .market-table which already have their own treatment). */
table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.012);
}
table tbody tr:hover td {
  background: rgba(47, 240, 214, 0.05);
  transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

/* Section h2 underline — refine the heavy 1px border to a softer fade so
   sections feel less like a Word document. */
h2 {
  border-bottom-color: transparent !important;
  background-image: linear-gradient(90deg, var(--border), transparent 60%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

/* Default `.button` — give it a subtle gradient + hover lift for visual
   consistency with the new `.surface` token language. */
.button {
  background: var(--bg3);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 6px rgba(0,0,0,0.20);
}
.button:hover {
  background: var(--blueD);
  border-color: var(--brand-strong, #14b8a3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47,240,214,0.20);
}

/* ──────────────────────────────────────────────────────────────────────────
   Member track a pick — the Track control (design spec section 4.1).
   The watchlist star idiom in button form: a small pill reading "Track" with
   a + glyph idle, "Tracking" with a check when the member has backed it. The
   signal aqua appears only on the active (tracking) state border, never as an
   idle fill (accent reserve rule). Tabular numerals are not used here (it is a
   verb), but the control inherits the site sans. Lives on the fixture Main
   Outcome, every All Markets row, /picks cards, /todays-tips rows, /free-tips
   singles and /world-cup picks.
   ────────────────────────────────────────────────────────────────────────── */
.sc-track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--hair, rgba(255,255,255,0.12));
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sc-track:hover { color: var(--ink, #f2f0ea); border-color: var(--brand-line, rgba(47,240,214,0.30)); }
.sc-track:focus-visible { outline: 2px solid var(--brand-line, rgba(47,240,214,0.45)); outline-offset: 2px; }
.sc-track .sc-track-glyph { font-size: 13px; line-height: 1; }
.sc-track .sc-track-glyph::before { content: "+"; }
.sc-track.on {
  color: var(--brand-strong, #14b8a3);
  border-color: var(--brand-strong, #14b8a3);
  background: var(--brand-soft, rgba(47,240,214,0.10));
}
.sc-track.on .sc-track-glyph::before { content: "\2713"; } /* check */
.sc-track[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* A small icon-only variant for dense rows (All Markets board). */
.sc-track.sc-track-mini { padding: 4px 8px; min-height: 28px; gap: 4px; font-size: 12px; }

/* 44px touch target on mobile (design: mobile first). */
@media (max-width: 540px) {
  .sc-track { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-track { transition: none; }
}