/*
 * discover_tabs.css — shared styles for the SLATES / LINEUPS / future
 * pages that use the emerald title pill + card-button tab strip +
 * search overlay design language.
 *
 * Loaded explicitly from each page (slates.html, lineups.html) via a
 * <link> in their content block. NOT loaded in base.html because most
 * pages don't need it.
 *
 * All rules live under the `.sp-*` prefix. Scope each page's outer
 * wrapper with class="sp" so children can rely on `font-feature-settings`.
 */

.sp { font-feature-settings: "ss01"; }
.sp-h-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #94a3b8; }
.dark .sp-h-section { color: #64748b; }

/* ── Sticky page header — title pill + tab strip on ONE row.
   Pill is anchored left (doesn't scroll horizontally with tabs);
   scroll area flexes to fill remaining width on mobile. ── */
.sp-tabs-header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.sp-tabs-header > .sp-page-title-pill { flex-shrink: 0; }
.sp-tabs-header > .sp-tabs-scroll     { flex: 1 1 auto; min-width: 0; }

/* ── Page title pill — emerald-700, uppercase wordmark, pulsing
   emerald-300 dot. Mirrors the LiveSlate brand mark in the nav. ── */
.sp-page-title-row { display: flex; align-items: center; margin-bottom: 14px; }
.sp-page-title-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: #047857;
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px -4px rgba(4,120,87,0.40);
}
.dark .sp-page-title-pill { box-shadow: 0 4px 14px -4px rgba(4,120,87,0.50); }
.sp-page-title-pill-dot {
  position: relative; display: inline-block;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #6ee7b7;
  flex-shrink: 0;
}
.sp-page-title-pill-dot::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 9999px;
  background: #6ee7b7;
  animation: sp-page-title-pulse 1.8s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes sp-page-title-pulse {
  0%   { transform: scale(0.9); opacity: 0.85; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ── Tab strip ──
   Each tab is a self-contained card-square button. Inactive: white bg
   with subtle border. Active: emerald-tinted bg + emerald border with
   the icon scaling up ~17%. */
.sp-tabs-wrap {
  position: sticky; top: 56px; z-index: 5;
  padding: 10px 12px 12px;
  background: rgba(241,245,249,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  margin: 0 -14px;
  box-shadow:
    0 1px 0 rgba(15,23,42,0.06),
    0 8px 12px -10px rgba(15,23,42,0.22);
}
.dark .sp-tabs-wrap {
  background: rgba(2,6,23,0.85);
  box-shadow:
    0 1px 0 rgba(148,163,184,0.08),
    0 8px 12px -10px rgba(0,0,0,0.65);
}
.sp-tabs-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sp-tabs-scroll::-webkit-scrollbar { display: none; }

.sp-tabs-flex {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.sp-tab-spacer { flex: 1 1 auto; min-width: 16px; }

/* Hairline divider separating the cross-cutting tabs (ALL / LIVE / NEXT
   / MINE) from per-sport tabs. */
.sp-tab-divider {
  flex: 0 0 1px;
  width: 1px;
  align-self: center;
  height: 44px;
  background: rgba(15,23,42,0.10);
  margin: 0 8px;
}
.dark .sp-tab-divider { background: rgba(148,163,184,0.16); }

.sp-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px 12px 11px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  color: #6b7280;
  cursor: pointer;
  /* Explicit transition list — `transition: all` was briefly compositing
     the border + active-state ring shadow incorrectly during the icon
     scale-up, reading as top/bottom border flashing out. */
  transition:
    background-color 160ms cubic-bezier(0.22,1,0.36,1),
    border-color     160ms cubic-bezier(0.22,1,0.36,1),
    color            160ms cubic-bezier(0.22,1,0.36,1),
    box-shadow       160ms cubic-bezier(0.22,1,0.36,1),
    transform        160ms cubic-bezier(0.22,1,0.36,1);
  white-space: nowrap;
  min-width: 78px;
}
.dark .sp-tab {
  background: #0f172a;
  border-color: rgba(148,163,184,0.12);
  color: #94a3b8;
}
.sp-tab:hover {
  border-color: rgba(15,23,42,0.16);
  color: #111827;
  box-shadow: var(--ls-lift-sm);   /* flips light↔dark on its own */
}
.dark .sp-tab:hover {
  border-color: rgba(148,163,184,0.22);
  color: #f1f5f9;
}
.sp-tab.active {
  background: rgba(16,185,129,0.06);
  border-color: #10b981;
  color: #047857;
  box-shadow: 0 6px 16px -6px rgba(16,185,129,0.30);
}
.dark .sp-tab.active {
  background: rgba(52,211,153,0.10);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 6px 16px -6px rgba(52,211,153,0.30);
}

/* Icon container + scale-up on active for visual "closer-to-viewer". */
.sp-tab-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 28px; width: 28px;
}
.sp-tab-icon svg, .sp-tab-icon img {
  width: 26px; height: 26px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
  transform: scale(1);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms;
}
.sp-tab.active .sp-tab-icon svg,
.sp-tab.active .sp-tab-icon img {
  transform: scale(1.17);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.24));
}

/* Olympic theme icons — figures are pre-normalised at the source PNG
   level (every figure's long axis = 92% of the 256x256 canvas), so
   horizontal presence is already uniform. A modest 1.2x display scale
   gives all icons more comfortable visual mass; wide-aspect figures
   like tennis stay shorter than square ones (a function of pose, not
   a fix-able bug), but every icon reads as appropriately sized. The
   .sp-tab-icon-scoped rules override the base .sp-tab-icon img scale(1)
   and the active scale(1.17). */
img[src*="/olympic/"] { transform: scale(1.2); }

/* Wide-aspect motorsport icons (cars) render visually tiny in a square
   box because content is ~3:1 W:H — even after recentering, object-fit:
   contain scales to the long axis leaving ~30% box height. Compensate
   with a heavy transform scale in the sub-navbar (slate-card badges
   use a different render path and already look fine).

   Bumped 2026-05-21 (1.8→2.2 fluent3d, +new 2.6 olympic) on Xav's
   feedback that F1 still looked tiny next to other sport icons. */
/* translateY(-2px) lifts the car so its visual mass sits a couple of
   pixels above the sport-name baseline, matching the other Fluent 3D
   pictograph icons (basketball/soccer ball/hockey stick) which have
   their weight in the upper half of the canvas. */
.sp-tab-icon img[src*="/fluent3d/f1.png"],
.sp-tab-icon img[src*="/fluent3d/nascar.png"] {
  transform: scale(2.2) !important;
  position: relative !important;
  top: 3px !important;
}
.sp-tab.active .sp-tab-icon img[src*="/fluent3d/f1.png"],
.sp-tab.active .sp-tab-icon img[src*="/fluent3d/nascar.png"] {
  transform: scale(2.6) !important;
  position: relative !important;
  top: 3px !important;
}

/* Olympic baseline scale (1.2) for all icons — wide-aspect cars need
   their own override on top since 1.2 isn't enough to rescue an 8px
   tall icon. Olympic motorsport ratio (3.32:1) is even more extreme
   than fluent3d's (2.52:1), so the scale is correspondingly higher. */
.sp-tab-icon img[src*="/olympic/"],
.sp-tab.active .sp-tab-icon img[src*="/olympic/"] {
  transform: scale(1.2);
}
/* translateY drops the car ~4px toward the sport name, so its baseline
   sits visually level with the standing-figure pictographs (golf, NBA,
   ice hockey) that taper at the feet. Without this, the car floats
   centred in the 28px box while pictographs hang lower. */
.sp-tab-icon img[src*="/olympic/f1.png"],
.sp-tab-icon img[src*="/olympic/nascar.png"] { transform: translateY(4px) scale(2.3); }
.sp-tab.active .sp-tab-icon img[src*="/olympic/f1.png"],
.sp-tab.active .sp-tab-icon img[src*="/olympic/nascar.png"] { transform: translateY(4px) scale(2.65); }

/* Inside a subnav tab, invert the emerald PNG to white so it's visible
   on the emerald bg. Restore the native emerald colour when the tab
   goes active (white card). Slate cards and the theme-picker preview
   are outside .sp-tab, so they keep their native emerald colour. */
.sp-tab .sp-tab-icon img[src*="/olympic/"] { filter: brightness(0) invert(1); }
.sp-tab.active .sp-tab-icon img[src*="/olympic/"] { filter: none; }

/* "Pills" mode — when active:
   1. Hide every tab's sport-name label (the pill IS the label).
   2. Hide the inline SVG on general tabs (ALL/LIVE/NEXT/MINE) and
      render a matching pill via a ::before pseudo-element. Each general
      tab carries data-pill-label="ALL" (etc.) on .sp-tab-icon, which
      ::before reads via attr(). The pill style mirrors the JS-rendered
      sport pill exactly (same gradient, border, shadows). */
/* Scope label-hiding to tabs that carry a sub-navbar icon slot — without
   this scope, the rule swept up the page-level section tabs on /settings
   too (those use .sp-tab with no .sp-tab-icon), blanking out DISPLAY /
   SLATES / LIVE FEED / etc. Sport tabs also use .sp-tab-icon but render
   their pill via the iconHtml span (not the ::before pseudo), so hiding
   .sp-tab-row here makes those pills the sole label too. */
html[data-icon-theme="pills"] .sp-tab:has(.sp-tab-icon) .sp-tab-row { display: none; }
html[data-icon-theme="pills"] .sp-tab-icon[data-pill-label] > svg { display: none; }
html[data-icon-theme="pills"] .sp-tab-icon[data-pill-label]::before {
  content: attr(data-pill-label);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #059669 0%, #065f46 100%);
  color: #ffffff;
  /* Sizes mirror the JS-rendered sport pill at subnav px=36
     (fontSize = round(36*0.42) = 15, padX = round(36*0.22) = 8,
      padY = round(36*0.08) = 3). Keeps general + sport pills at parity.
     Uppercase glyphs have no descenders — sit text slightly higher
     within the line box. Tuned 2026-05-21 to 3px top / 5px bot on
     Xav's feedback that pill text reads low. */
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px 5px; border-radius: 9999px;
  line-height: 1; white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 2px 5px rgba(0,0,0,0.25);
  text-shadow: 0 1px 1px rgba(0,0,0,0.30);
}

/* "No Icons" mode — restructure the tab so label + count sit on the
   SAME horizontal row, centred. Avoids the off-centre problem caused
   by an absolute-positioned pill + collapsed icon container in flex
   column layout. */
html[data-icon-theme="none"] .sp-tab {
  flex-direction: row;
  gap: 6px;
  justify-content: center;
  align-items: center;
}
/* Hide the empty sport-icon span (the x-html target) inside .sp-tab-icon.
   .sp-tab-icon itself stays as an inline-sized wrapper for the badge.
   Exempt the search-tab — its first child IS the SVG glyph (no wrapper),
   so the rule used to nuke it in "No Icons" mode. */
html[data-icon-theme="none"] .sp-tab:not(.sp-tab-search) .sp-tab-icon > :first-child {
  display: none;
}
html[data-icon-theme="none"] .sp-tab-icon {
  display: inline-flex;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  order: 2;                  /* badge sits to the right of the label */
}
html[data-icon-theme="none"] .sp-tab-row { order: 1; }
/* Count badge keeps its pill styling — just drop the absolute positioning
   so it flows inline next to the label. All other badge styles (bg,
   border, padding, rounded shape, live-red variant) are inherited from
   the base + desktop rules. */
html[data-icon-theme="none"] .sp-tab-count {
  position: static;
}
html[data-icon-theme="none"] .sp-tab-row {
  font-size: 12px;
}
@media (max-width: 640px) {
  html[data-icon-theme="none"] .sp-tab-row { font-size: 11px; }
}
/* No-Icons mode uses sport SHORT codes (FOOT / NHL / EL / F1) instead
   of the long display names, so the strip stays scannable without an
   icon to anchor each tab. Default desktop rule shows the long name —
   override it under this theme. */
html[data-icon-theme="none"] .sp-tab-name-short { display: inline; }
html[data-icon-theme="none"] .sp-tab-name-long  { display: none; }
@media (min-width: 641px) {
  html[data-icon-theme="none"] .sp-tab-name-short { display: inline; }
  html[data-icon-theme="none"] .sp-tab-name-long  { display: none; }
}
/* Defensive: hide any sport-icon span elsewhere on the page (slate
   cards, etc.) when No Icons is active, in case a stale-cached version
   of sportIconHtml returns broken <img> tags whose alt text would show. */
html[data-icon-theme="none"] [x-html*="sportIcon"] {
  display: none !important;
}
/* Belt-and-braces: hide any <img> pointing at removed icon-theme paths
   that stale cached code might still emit (mono/duotone/fill/manga/none). */
img[src*="/sports/mono/"],
img[src*="/sports/duotone/"],
img[src*="/sports/fill/"],
img[src*="/sports/manga/"],
img[src*="/sports/none/"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   When Olympic theme is active, recolour the hand-coded general SVGs
   (ALL grid / NEXT clock / MINE star) so they feel of-a-piece with the
   emerald pictograph sport icons. LIVE is excluded — its brand pulse is
   already emerald. Uses direct fill/stroke for each state (subnav inactive
   = white, subnav active = emerald) rather than a blanket CSS filter,
   because filter would flatten the NEXT clock's inner face + hands to a
   single colour and erase the contrast that makes the hands readable.
   The data-icon-theme attribute is stamped on <html> by the inline script
   in base.html head, before stylesheets parse.
   ───────────────────────────────────────────────────────────────────── */

/* Subnav inactive (white on emerald bg). Default state for tabs at rest.
   Excludes .sp-tab-search — its SVG is fill="none" stroke-only, and
   forcing fill:#fff would turn the magnifying-glass circle into a
   featureless white blob.
   Per-element opt-out: any rect/circle/path with `data-pin="emerald"`
   keeps its dark-emerald fill so the inner accents (cog centre, shield
   check, edit pencil stroke, etc.) stay readable on the emerald bar
   instead of becoming featureless white blobs. (Xav 2026-05-30.) */
html[data-icon-theme="olympic"] .sp-tab:not(.active):not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) rect:not([data-pin="emerald"]),
html[data-icon-theme="olympic"] .sp-tab:not(.active):not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) circle:not([data-pin="emerald"]),
html[data-icon-theme="olympic"] .sp-tab:not(.active):not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) path:not([data-pin="emerald"]) {
  fill:   #ffffff;
  stroke: #ffffff;
}
html[data-icon-theme="olympic"] .sp-tab:not(.active):not(.sp-tab-search) .sp-tab-icon svg [data-pin="emerald"] {
  fill:   #047857;
  stroke: #047857;
}
/* NEXT clock inner face — darker emerald so the white hands stand out.
   (translucent white would blend into the white outer ring + white hands,
    erasing the hand-on-face contrast we need to read the clock.)         */
html[data-icon-theme="olympic"] .sp-tab:not(.active):not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) circle[r="8"] {
  fill: #047857;
}

/* Subnav active — TRUE INVERSE of inactive (Xav 2026-05-30).
   Inactive: body white, accent (data-pin) emerald.
   Active:   body emerald, accent (data-pin) WHITE.
   Both states use the same flat palette but flip which element is which
   colour, so clicking a tab reads as a clean "pressed" inversion rather
   than the previous flatten-everything-to-one-colour behaviour. */
html[data-icon-theme="olympic"] .sp-tab.active:not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) rect:not([data-pin="emerald"]),
html[data-icon-theme="olympic"] .sp-tab.active:not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) circle:not([data-pin="emerald"]),
html[data-icon-theme="olympic"] .sp-tab.active:not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) path:not([data-pin="emerald"]) {
  fill:   #047857;
  stroke: #047857;
}
html[data-icon-theme="olympic"] .sp-tab.active:not(.sp-tab-search) .sp-tab-icon svg [data-pin="emerald"] {
  fill:   #ffffff;
  stroke: #ffffff;
}
/* NEXT clock inner face — emerald-100 so the emerald hands contrast. */
html[data-icon-theme="olympic"] .sp-tab.active:not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) circle[r="8"] {
  fill: #d1fae5;
}

/* ── EDIT-MODE bar colour inversion (Xav 2026-05-30) ───────────────
   When the sub-nav swaps to its white edit-mode skin, the icon palette
   flips with it: every white element becomes emerald, every emerald
   accent becomes white. Same per-element data-pin opt-out as the
   normal rules, just with the colours swapped. Targets both inactive
   and active tabs inside the .is-edit-mode wrap so the swap is total. */
html[data-icon-theme="olympic"] .sp-tabs-wrap.is-edit-mode .sp-tab:not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) rect:not([data-pin="emerald"]),
html[data-icon-theme="olympic"] .sp-tabs-wrap.is-edit-mode .sp-tab:not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) circle:not([data-pin="emerald"]),
html[data-icon-theme="olympic"] .sp-tabs-wrap.is-edit-mode .sp-tab:not(.sp-tab-search) .sp-tab-icon svg:not(.sp-icon-live) path:not([data-pin="emerald"]) {
  fill:   #047857;
  stroke: #047857;
}
html[data-icon-theme="olympic"] .sp-tabs-wrap.is-edit-mode .sp-tab:not(.sp-tab-search) .sp-tab-icon svg [data-pin="emerald"] {
  fill:   #ffffff;
  stroke: #ffffff;
}

/* LIVE icon — outer rings pulse out from the central red dot,
   staggered so the beacon reads as actively broadcasting. */
@keyframes sp-icon-live-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.15; }
}
@keyframes sp-icon-live-pulse-out {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.05; }
}
.sp-icon-live-r1 { animation: sp-icon-live-pulse     1.8s ease-in-out infinite; transform-origin: center; }
.sp-icon-live-r2 { animation: sp-icon-live-pulse-out 1.8s ease-in-out 0.4s infinite; transform-origin: center; }

/* Count badge — iOS app-badge style, top-right corner of the icon. */
.sp-tab-count {
  position: absolute;
  top: -7px; right: -11px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #475569;
  background: #f1f5f9;
  border: 1.5px solid #ffffff;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.dark .sp-tab-count {
  color: #cbd5e1;
  background: #1e293b;
  border-color: #0f172a;
}
.sp-tab-count.has-live {
  color: #ffffff;
  background: #10b981;
  border-color: #ffffff;
}
.dark .sp-tab-count.has-live {
  background: #10b981;
  border-color: #0f172a;
}

.sp-tab-row {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.sp-tab.active .sp-tab-row { font-weight: 700; }

/* Short label on mobile, long label on desktop. Both render in the DOM —
   CSS picks which one is visible based on viewport. (Long labels are the
   per-platform display names: "Football"/"Soccer", "Basketball", etc.) */
.sp-tab-name-long  { display: none; }
.sp-tab-name-short { display: inline; }
@media (min-width: 641px) {
  .sp-tab-name-short { display: none; }
  .sp-tab-name-long  { display: inline; }
}

/* Search-icon tab — smaller than regular tabs, no label row.
   The subnav strip is emerald on desktop (light) and slate-950 on dark,
   so the search glyph rides on a dark-ish bg in both modes. Base colour
   inherits the .sp-tab default (white-ish on emerald, slate-200 on dark)
   and overrides below ensure hover + has-query stay readable. */
.sp-tab-search {
  min-width: 48px;
  padding: 12px 12px 11px;
}
.sp-tab-search .sp-tab-icon { color: rgba(255,255,255,0.85); }
.dark .sp-tab-search .sp-tab-icon { color: rgba(241,245,249,0.78); }
.sp-tab-search:hover .sp-tab-icon { color: #ffffff; }
.dark .sp-tab-search:hover .sp-tab-icon { color: #ffffff; }
/* has-query → emerald glyph would vanish on the emerald strip; use a
   bright tonal contrast (white) plus a soft inner glow so the user can
   still tell the tab is "armed" with a query. */
.sp-tab-search.has-query .sp-tab-icon { color: #ffffff; }
.sp-tab-search.has-query { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55); }
.dark .sp-tab-search.has-query .sp-tab-icon { color: #34d399; }
.dark .sp-tab-search.has-query { box-shadow: inset 0 0 0 1.5px rgba(52,211,153,0.45); }
.sp-tab-search .sp-tab-icon svg { width: 20px; height: 20px; filter: none; }

/* Search overlay — replaces the tab row inside the wrap when active. */
.sp-search-overlay {
  position: absolute;
  inset: 4px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  padding: 0 10px;
  z-index: 1;
}
.dark .sp-search-overlay {
  background: #0f172a;
  border-color: rgba(148,163,184,0.12);
}
.sp-search-back, .sp-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: #6b7280;
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
  flex-shrink: 0;
}
.dark .sp-search-back, .dark .sp-search-clear { color: #94a3b8; }
.sp-search-back:hover, .sp-search-clear:hover {
  background: rgba(15,23,42,0.05);
  color: #111827;
}
.dark .sp-search-back:hover, .dark .sp-search-clear:hover {
  background: rgba(148,163,184,0.10);
  color: #f1f5f9;
}
.sp-search-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0;
  padding: 10px 0;
  font-size: 14px; font-weight: 500;
  color: #111827;
  outline: none;
}
.dark .sp-search-input { color: #ffffff; }
.sp-search-input::placeholder { color: #9ca3af; font-weight: 400; }
.dark .sp-search-input::placeholder { color: #64748b; }

/* ── Lineups inline search (Xav 2026-07-12) — an always-visible, labelled search
   box pinned to the right of the tab strip. Lives OUTSIDE .sp-tabs-scroll (as a
   sibling in .sp-tabs-header) so it never scrolls away, and replaces the old
   click-to-open magnifier that took over the whole subnav. ── */
.ls-lnsearch {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 1 240px; min-width: 132px;
  height: 40px; padding: 0 7px 0 11px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  transition: border-color 120ms, box-shadow 120ms;
}
.dark .ls-lnsearch { background: #0f172a; border-color: rgba(148,163,184,0.14); }
.ls-lnsearch:focus-within { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.14); }
.ls-lnsearch > svg { width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0; }
.ls-lnsearch:focus-within > svg { color: #10b981; }
.ls-lnsearch input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-size: 13px; font-weight: 500; color: #111827;
  padding: 9px 0;
}
.ls-lnsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dark .ls-lnsearch input { color: #f1f5f9; }
.ls-lnsearch input::placeholder { color: #9ca3af; font-weight: 400; }
.dark .ls-lnsearch input::placeholder { color: #64748b; }
.ls-lnsearch-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  color: #9ca3af; background: transparent; cursor: pointer; flex-shrink: 0;
  transition: background-color 120ms, color 120ms;
}
.ls-lnsearch-clear:hover { background: rgba(15,23,42,0.06); color: #374151; }
.dark .ls-lnsearch-clear:hover { background: rgba(148,163,184,0.12); color: #e2e8f0; }

/* Grid panel — single bordered container around the card grid below
   the tab strip. Transparent bg so individual white cards still
   contrast. (Used by the SLATES discover page.) */
.sp-grid-panel {
  background: transparent;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  padding: 16px;
}
.dark .sp-grid-panel {
  border-color: rgba(148,163,184,0.12);
}

/* Filter pill — used on /slates for "Upcoming only". */
.sp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px; font-weight: 500;
  color: #6b7280;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
}
.dark .sp-pill { background: #0f1530; border-color: rgba(148,163,184,0.10); color: #94a3b8; }
.sp-pill:hover { color: #111827; border-color: rgba(15,23,42,0.16); }
.dark .sp-pill:hover { color: #f1f5f9; border-color: rgba(148,163,184,0.20); }
.sp-pill.active {
  color: #059669;
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.32);
}
.dark .sp-pill.active { color: #34d399; background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.32); }

/* Inline search input — different from the search overlay above; used
   for legacy in-page searches. */
.sp-search {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 9999px;
  padding: 7px 14px 7px 34px;
  font-size: 12px;
  color: #111827;
  width: 100%;
  transition: all 120ms;
}
.dark .sp-search { background: #0f1530; border-color: rgba(148,163,184,0.10); color: #f1f5f9; }
.sp-search::placeholder { color: #9ca3af; }
.dark .sp-search::placeholder { color: #64748b; }
.sp-search:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }

/* ── Mobile compaction (≤640px) ── */
@media (max-width: 640px) {
  .sp-tabs-wrap { padding: 4px 4px; }
  .sp-tab {
    min-width: 60px;
    padding: 9px 8px 8px;
    gap: 4px;
  }
  .sp-tab-row { gap: 3px; font-size: 10px; letter-spacing: 0.06em; }
  .sp-tab-icon { height: 24px; width: 24px; }
  .sp-tab-icon svg, .sp-tab-icon img { width: 22px; height: 22px; }
  .sp-grid-panel { padding: 8px; border-radius: 10px; }
}

/* ───────────────────────────────────────────────────────────────────
   ── Desktop subnav (≥641px) ──
   Tabs themselves stay as the chunky stacked card-button design (icon
   top, sport name beneath, live count pill top-right). Only the
   surrounding chrome changes: page-title pill is dropped, and the
   strip's bg breaks out of main's padding to span the full content
   width — reads as the navbar's second row.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) {

  /* Page title hidden on desktop — current section is signposted by
     the nav menu above. */
  .sp-page-title-pill { display: none; }

  /* Sticky chrome → emerald-tinted second row of the navbar. One shade
     LIGHTER than the navbar (emerald-600 #059669 vs nav's emerald-700
     #047857) so there's a subtle horizontal seam between the two — they
     read as related but distinct rows of chrome.
     Negative h-margins break the strip out of main's px-3 sm:px-6 so
     the bg spans the full content width. Negative top-margin eats
     main's sm:pt-3 so it sits flush against the nav. */
  .sp-tabs-wrap {
    margin: -12px -24px 16px;
    padding: 10px 24px 12px;
    background: #059669;
    border-bottom: 1px solid rgba(0,0,0,0.20);
    box-shadow: none;
  }
  .dark .sp-tabs-wrap {
    background: rgba(15,23,42,0.95);
    border-bottom-color: rgba(148,163,184,0.10);
  }

  /* Header row — pill hidden, so single child (scroll) fills width */
  .sp-tabs-header { gap: 0; align-items: stretch; }

  /* Tabs on the emerald subnav — translucent at rest, white when active.
     The active card pops against the emerald like a real "current tab". */
  .sp-tab {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.82);
  }
  .sp-tab:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.24);
    color: #ffffff;
    box-shadow: none;
  }
  .sp-tab.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #047857;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.28);
  }

  /* Dark mode: tabs on slate-950 — keep same translucent treatment */
  .dark .sp-tab {
    background: rgba(148,163,184,0.08);
    border-color: rgba(148,163,184,0.14);
    color: rgba(241,245,249,0.78);
  }
  .dark .sp-tab:hover {
    background: rgba(148,163,184,0.14);
    border-color: rgba(148,163,184,0.24);
    color: #f1f5f9;
  }
  .dark .sp-tab.active {
    background: rgba(52,211,153,0.14);
    border-color: #34d399;
    color: #34d399;
    box-shadow: 0 6px 16px -8px rgba(52,211,153,0.40);
  }

  /* Count badge — readable on emerald + on white-active.
     Border colour matches the strip bg (#059669) so the badge feels
     "cut out" of the strip rather than outlined. */
  .sp-tab-count {
    background: rgba(0,0,0,0.30);
    color: rgba(255,255,255,0.92);
    border-color: #059669;
  }
  .sp-tab.active .sp-tab-count {
    background: #f1f5f9;
    color: #475569;
    border-color: #ffffff;
  }
  /* Live pill — red on the emerald bg so it actually pops */
  .sp-tab-count.has-live {
    background: #ef4444;
    color: #ffffff;
    border-color: #059669;
  }
  .sp-tab.active .sp-tab-count.has-live {
    background: #ef4444;
    border-color: #ffffff;
  }

  /* Dark-mode count badges — slate base, emerald active */
  .dark .sp-tab-count {
    background: rgba(148,163,184,0.18);
    color: #f1f5f9;
    border-color: #020617;
  }
  .dark .sp-tab.active .sp-tab-count {
    background: rgba(52,211,153,0.20);
    color: #34d399;
    border-color: #020617;
  }

  /* Divider — light hairline on emerald */
  .sp-tab-divider { background: rgba(255,255,255,0.18); height: 40px; }
  .dark .sp-tab-divider { background: rgba(148,163,184,0.18); }

  /* Fixed-width tabs on desktop — gives the count badge real estate in
     the top-right corner without overlapping the icon, and locks the
     visual rhythm so eyes don't have to recalibrate per tab. EUROLEAGUE
     (the longest standard label) fits comfortably at 100px. The search
     tab keeps its own narrower width since it's icon-only. */
  .sp-tab {
    padding: 6px 10px 6px;
    width: 100px;
    min-width: 100px;
    flex-shrink: 0;
  }
  .sp-tabs-flex { gap: 6px; }
  .sp-tab-search { padding: 6px 10px 6px; width: 48px; min-width: 48px; }

  /* Anchor the count badge to the TAB's corner, not the icon container's
     corner. By default `.sp-tab-icon` is the positioned ancestor, so
     the badge follows the icon to the centre of the (now wider) tab.
     Dropping that positioning makes the badge ascend to `.sp-tab` and
     sit cleanly in the top-right of the tab itself. */
  .sp-tab-icon { position: static; }
  .sp-tab-count {
    top: 5px;
    right: 6px;
  }

  /* LIVE icon's pulse rings are white for vibrance on the emerald subnav,
     but when the LIVE tab is active the tab itself flips to a white card —
     white rings on white = invisible. Swap to emerald-400 in that case so
     the beacon stays readable. */
  .sp-tab.active .sp-icon-live-ring { stroke: #34d399; }
}


/* ───────────────────────────────────────────────────────────────────
   ── EXPERIMENTAL: Mobile emerald subnav (≤640px) ──
   TEST: extending the desktop emerald-bg + white-active-card treatment
   down to phone. To REVERT, delete this entire block — the mobile
   compaction block above will restore the original white-strip + SLATES
   pill design.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Hide page title pill — navbar already identifies the section. */
  .sp-page-title-pill { display: none; }

  /* Emerald strip extends edge-to-edge over main's px-3 + pt-2 via
     negative margins. Inner padding restores content alignment. */
  .sp-tabs-wrap {
    margin: -8px -12px 16px;
    padding: 8px 12px 10px;
    background: #059669;
    border-bottom: 1px solid rgba(0,0,0,0.20);
    box-shadow: none;
  }
  .dark .sp-tabs-wrap {
    background: rgba(15,23,42,0.95);
    border-bottom-color: rgba(148,163,184,0.10);
  }

  .sp-tabs-header { gap: 0; }

  /* Translucent-white card-buttons at rest, solid-white when active —
     matches the desktop treatment. */
  .sp-tab {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.82);
  }
  .sp-tab.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #047857;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.28);
  }
  .dark .sp-tab {
    background: rgba(148,163,184,0.08);
    border-color: rgba(148,163,184,0.14);
    color: rgba(241,245,249,0.78);
  }
  .dark .sp-tab.active {
    background: rgba(52,211,153,0.14);
    border-color: #34d399;
    color: #34d399;
    box-shadow: 0 6px 16px -8px rgba(52,211,153,0.40);
  }

  /* Count badge — readable on emerald + on white-active. */
  .sp-tab-count {
    background: rgba(0,0,0,0.30);
    color: rgba(255,255,255,0.92);
    border-color: #059669;
  }
  .sp-tab.active .sp-tab-count {
    background: #f1f5f9;
    color: #475569;
    border-color: #ffffff;
  }
  .sp-tab-count.has-live {
    background: #ef4444;
    color: #ffffff;
    border-color: #059669;
  }
  .sp-tab.active .sp-tab-count.has-live {
    background: #ef4444;
    border-color: #ffffff;
  }
  .dark .sp-tab-count {
    background: rgba(148,163,184,0.18);
    color: #f1f5f9;
    border-color: #020617;
  }
  .dark .sp-tab.active .sp-tab-count {
    background: rgba(52,211,153,0.20);
    color: #34d399;
    border-color: #020617;
  }

  /* Divider — light hairline on emerald. */
  .sp-tab-divider { background: rgba(255,255,255,0.18); }
  .dark .sp-tab-divider { background: rgba(148,163,184,0.18); }

  /* LIVE tab active — rings flip to emerald on the white card. */
  .sp-tab.active .sp-icon-live-ring { stroke: #34d399; }

}

/* ── .sp-tabs-wrap--bare — modifier that strips the emerald banner so
     the filter sits inline with the page (no full-width strip, no
     sticky positioning). Lives OUTSIDE all media queries with
     !important on background-critical properties so it wins over both
     the mobile base rule and the desktop emerald-strip rule without
     ambiguity. Pills revert to white-card light-bg styling. */
.sp-tabs-wrap--bare,
.dark .sp-tabs-wrap--bare {
  /* Split margins so per-instance Tailwind utilities (mb-4, mt-2, etc.)
     can set vertical spacing without being trumped by !important. */
  margin-top: 0    !important;
  margin-left: 0   !important;
  margin-right: 0  !important;
  padding: 0       !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: static !important;
  top: auto        !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sp-tabs-wrap--bare .sp-tab {
  background: #ffffff !important;
  border-color: rgba(15,23,42,0.08) !important;
  color: #6b7280 !important;
  /* Full pill shape so narrow ("ALL") and wide ("UNASSIGNED") pills
     read as the same shape — matches the .sp-action-pill curvature. */
  border-radius: 9999px !important;
  /* Lock the box-model so filter pills and action pills are pixel-
     identical when sitting on the same row. */
  height: 28px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  /* Filter pills grow to fit their label — the default .sp-tab is
     fixed at 100px wide for the page-level subnav (where every label
     is short), but inline filter pills can have longer labels like
     "SPORT ASSIGNMENTS" / "FORMAT FILTERS" that need full width. */
  width: auto !important;
  min-width: 0 !important;
}
.sp-tabs-wrap--bare .sp-tab:hover {
  border-color: rgba(15,23,42,0.16) !important;
  color: #111827 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.10) !important;
}
.sp-tabs-wrap--bare .sp-tab.active {
  background: rgba(16,185,129,0.06) !important;
  border-color: #10b981 !important;
  color: #047857 !important;
  box-shadow: 0 6px 16px -6px rgba(16,185,129,0.30) !important;
}
.dark .sp-tabs-wrap--bare .sp-tab {
  background: #0f172a !important;
  border-color: rgba(148,163,184,0.12) !important;
  color: #94a3b8 !important;
}
.dark .sp-tabs-wrap--bare .sp-tab:hover {
  border-color: rgba(148,163,184,0.22) !important;
  color: #f1f5f9 !important;
}
.dark .sp-tabs-wrap--bare .sp-tab.active {
  background: rgba(52,211,153,0.10) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  box-shadow: 0 6px 16px -6px rgba(52,211,153,0.30) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   .sp-tab--action — action-button MODIFIER on the .sp-tab component.
   Locked 2026-05-22. Same exact markup + box model as .sp-tab, just
   recoloured to solid emerald with a pulsing white dot prefix. Using
   a modifier (not a parallel class) guarantees pixel-identical
   dimensions because both share every other .sp-tab rule.

   Usage (inside or outside .sp-tabs-wrap--bare):
     <button class="sp-tab sp-tab--action">
       <span class="sp-tab-row">
         <span class="sp-tab-action-dot" aria-hidden="true"></span>
         <span class="sp-tab-name">Refresh from lobbies</span>
       </span>
     </button>
   ────────────────────────────────────────────────────────────────── */
.sp-tab.sp-tab--action,
.sp-tabs-wrap--bare .sp-tab.sp-tab--action {
  background: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(4,120,87,0.20) !important;
  /* Pixel-identical box model to filter pills (.sp-tabs-wrap--bare .sp-tab),
     applied regardless of wrap context so a stand-alone "Add platform"
     button on /admin/platforms looks the same as an in-row action button. */
  height: 28px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
  border-radius: 9999px !important;
  /* Action pills grow to fit their label instead of clipping at .sp-tab's
     fixed 100px width. */
  width: auto !important;
  min-width: 0 !important;
  padding: 0 16px !important;
}
.sp-tab.sp-tab--action:hover,
.sp-tabs-wrap--bare .sp-tab.sp-tab--action:hover {
  background: #10b981 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px -3px rgba(16,185,129,0.40) !important;
}
.sp-tab.sp-tab--action:active {
  transform: translateY(1px);
}
.sp-tab.sp-tab--action:disabled,
.sp-tabs-wrap--bare .sp-tab.sp-tab--action:disabled {
  opacity: 0.50 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.dark .sp-tab.sp-tab--action,
.dark .sp-tabs-wrap--bare .sp-tab.sp-tab--action {
  background: #047857 !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
}

/* Pulsing white dot prefix — sits inside the existing .sp-tab-row flex,
   so it picks up the row's align-items: center automatically. */
.sp-tab-action-dot {
  position: relative;
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: #ffffff;
  flex-shrink: 0;
  margin-right: 2px;
}
.sp-tab-action-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: #ffffff;
  opacity: 0.75;
  animation: sp-tab-action-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes sp-tab-action-ping {
  0%        { transform: scale(1);   opacity: 0.75; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}
.sp-tab--action:disabled .sp-tab-action-dot::before { animation: none; }


/* ─────────────────────────────────────────────────────────────────────
   .sp-action-pill — per-row action button family. Same shape +
   pulsing-white-dot signature as the locked .sp-tab--action page-level
   pill, but offered in multiple tones so destructive vs constructive
   row actions stay legible (Promote=amber, Disable=orange, Reset PW=
   blue, Delete=red, Re-enable=emerald). Locked 2026-05-23 alongside
   the /admin user management buildout.

   Markup:
     <button class="sp-action-pill sp-action-pill--amber">
       <span class="sp-action-pill-dot" aria-hidden="true"></span>
       <span>Promote</span>
     </button>
   ────────────────────────────────────────────────────────────────── */
.sp-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  cursor: pointer;
  user-select: none;
}
.sp-action-pill:active { transform: translateY(1px); }
.sp-action-pill:disabled {
  opacity: 0.40;
  cursor: not-allowed;
  box-shadow: none !important;
  filter: saturate(0.7);
}

/* Pulsing white dot — same animation as .sp-tab-action-dot but sized
   for the smaller row-action variant. */
.sp-action-pill-dot {
  position: relative;
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 9999px;
  background: #ffffff;
  flex-shrink: 0;
}
.sp-action-pill-dot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: #ffffff;
  opacity: 0.75;
  animation: sp-tab-action-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.sp-action-pill:disabled .sp-action-pill-dot::before { animation: none; }

/* Tone variants — solid background + matching darker hover. Each tone
   maps to a semantic action category. */
.sp-action-pill--amber   { background: #d97706; border-color: #b45309; box-shadow: 0 1px 2px rgba(180,83,9,0.20); }
.sp-action-pill--amber:hover:not(:disabled)   { background: #f59e0b; box-shadow: 0 4px 10px -3px rgba(245,158,11,0.40); }

.sp-action-pill--orange  { background: #ea580c; border-color: #c2410c; box-shadow: 0 1px 2px rgba(194,65,12,0.20); }
.sp-action-pill--orange:hover:not(:disabled)  { background: #f97316; box-shadow: 0 4px 10px -3px rgba(249,115,22,0.40); }

.sp-action-pill--emerald { background: #059669; border-color: #047857; box-shadow: 0 1px 2px rgba(4,120,87,0.20); }
.sp-action-pill--emerald:hover:not(:disabled) { background: #10b981; box-shadow: 0 4px 10px -3px rgba(16,185,129,0.40); }

.sp-action-pill--blue    { background: #2563eb; border-color: #1d4ed8; box-shadow: 0 1px 2px rgba(29,78,216,0.20); }
.sp-action-pill--blue:hover:not(:disabled)    { background: #3b82f6; box-shadow: 0 4px 10px -3px rgba(59,130,246,0.40); }

.sp-action-pill--red     { background: #dc2626; border-color: #b91c1c; box-shadow: 0 1px 2px rgba(185,28,28,0.20); }
.sp-action-pill--red:hover:not(:disabled)     { background: #ef4444; box-shadow: 0 4px 10px -3px rgba(239,68,68,0.40); }


/* ─────────────────────────────────────────────────────────────────────
   .sp-chip — compact filter pill, sibling of .sp-tab.
   Same emerald-glow active state, smaller padding, single-line layout.
   Used by horizontal filter strips on /admin pages (e.g. All / FT / DK
   / Active / Inactive). Reuse via:
     <button class="sp-chip" :class="filter === id && 'active'">
       <span>Label</span><span class="sp-chip-count">31</span>
     </button>
   ────────────────────────────────────────────────────────────────── */
.sp-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 4px;
  color: #6b7280;
  cursor: pointer;
  transition:
    background-color 160ms cubic-bezier(0.22,1,0.36,1),
    border-color     160ms cubic-bezier(0.22,1,0.36,1),
    color            160ms cubic-bezier(0.22,1,0.36,1),
    box-shadow       160ms cubic-bezier(0.22,1,0.36,1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dark .sp-chip {
  background: #0f172a;
  border-color: rgba(148,163,184,0.12);
  color: #94a3b8;
}
.sp-chip:hover {
  border-color: rgba(15,23,42,0.16);
  color: #111827;
}
.dark .sp-chip:hover {
  border-color: rgba(148,163,184,0.22);
  color: #f1f5f9;
}
.sp-chip.active {
  background: rgba(16,185,129,0.06);
  border-color: #10b981;
  color: #047857;
  box-shadow: 0 6px 16px -6px rgba(16,185,129,0.30);
}
.dark .sp-chip.active {
  background: rgba(52,211,153,0.10);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 6px 16px -6px rgba(52,211,153,0.30);
}
.sp-chip-count { color: #9ca3af; font-weight: 400; }
.dark .sp-chip-count { color: #64748b; }
.sp-chip.active .sp-chip-count { color: #34d399; opacity: 0.7; }


/* ─────────────────────────────────────────────────────────────────────
   .sp-segmented — literal mirror of the /settings sub-nav .sp-tab
   styling on desktop. Inline emerald-strip container; each item is a
   rounded-rectangle (12px), 100px fixed-min width, 11px / 600 / 0.08em
   uppercase. Locked 2026-05-22 after three earlier mismatches:
   the /settings tabs are NOT fully-rounded pills — they are rounded
   rectangles at 12px radius, fixed 100px width. The emerald strip
   makes them read pill-ish at small scale but they're squares.

   Usage:
     <div class="sp-segmented">
       <button class="sp-segmented-item" :class="filter === 'all' && 'active'">All</button>
       ...
     </div>
   ────────────────────────────────────────────────────────────────── */
.sp-segmented {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px 8px;
  background: #059669;                                 /* emerald-600 (matches .sp-tabs-wrap) */
  border-radius: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.20);
}
.dark .sp-segmented {
  background: rgba(15,23,42,0.95);
  border-bottom-color: rgba(148,163,184,0.10);
}

.sp-segmented-item {
  /* Mirrors .sp-tab + desktop overrides exactly */
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 6px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: rgba(255,255,255,0.82);
  width: 100px;
  min-width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms cubic-bezier(0.22,1,0.36,1),
    border-color     160ms cubic-bezier(0.22,1,0.36,1),
    color            160ms cubic-bezier(0.22,1,0.36,1),
    box-shadow       160ms cubic-bezier(0.22,1,0.36,1);
}
.dark .sp-segmented-item {
  background: rgba(148,163,184,0.08);
  border-color: rgba(148,163,184,0.14);
  color: rgba(241,245,249,0.78);
}

.sp-segmented-item:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
  color: #ffffff;
  box-shadow: none;
}
.dark .sp-segmented-item:hover {
  background: rgba(148,163,184,0.14);
  border-color: rgba(148,163,184,0.24);
  color: #f1f5f9;
}

.sp-segmented-item.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #047857;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.28);
}
.dark .sp-segmented-item.active {
  background: rgba(52,211,153,0.14);
  border-color: #34d399;
  color: #34d399;
  box-shadow: 0 6px 16px -8px rgba(52,211,153,0.40);
}

/* Counts removed from pills entirely — /settings carries none. If the
   admin needs the count, show it as a result line ("28 of 62 rows")
   alongside the strip, not inside each pill. */