/* ==========================================================================
   ScoreTab redesign — Step 1: global tokens, header, hero
   Calm, minimal, premium language: neutral base, one reserved accent color,
   generous space, slow deliberate motion. Loads after styles.site.css and
   only overrides what's needed — legacy rules stay as fallback.
   ========================================================================== */

:root {
  --background: #f5f2ee;
  --surface: #edeae5;
  --surface-soft: #f0ede9;
  --surface-strong: #eae7e2;
  --surface-card: var(--surface);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --text: #1a1714;
  --text-muted: #9a9590;
  --text-soft: #4a4540;
  --text-body: #4a4540;
  --text-meta: #9a9590;
  --border: #dedad4;
  --border-color: var(--border);
  --accent: #3d8b8b;
  --accent-soft: rgba(61,139,139,0.08);
  --accent-dark: #1a3535;
  --hover: #eae7e2;
  --shadow: 0 20px 48px rgba(28, 28, 26, 0.06);
}

html[data-theme="dark"] {
  --background: #0f0e0d;
  --surface: #151412;
  --surface-soft: #1a1816;
  --surface-strong: #131110;
  --surface-card: var(--surface-strong);
  --text: #ede9e4;
  --text-muted: #7a7672;
  --text-soft: #a09890;
  --text-body: #c8c0b8;
  --text-meta: #7a7672;
  --border: #242220;
  --border-color: var(--border);
  --accent: #3d8b8b;
  --accent-soft: #1a3535;
  --accent-dark: #3d8b8b;
  --hover: #1a1816;
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0f0e0d;
    --surface: #151412;
    --surface-soft: #1a1816;
    --surface-strong: #131110;
    --surface-card: var(--surface-strong);
    --text: #ede9e4;
    --text-muted: #7a7672;
    --text-soft: #a09890;
    --text-body: #c8c0b8;
    --text-meta: #7a7672;
    --border: #242220;
    --border-color: var(--border);
    --accent: #3d8b8b;
    --accent-soft: #1a3535;
    --accent-dark: #3d8b8b;
    --hover: #1a1816;
    --shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  }
}

/* ---- Base: ensure body uses the design token background ---- */

body {
  background: var(--background);
  font-variant-numeric: tabular-nums;
}

a:visited {
  color: inherit;
}

/* ---- Header: quiet the chrome, remove the badge-vs-logo standoff ---- */

.site-header {
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
}

.brand,
.main-nav a {
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.main-nav a:hover {
  color: var(--text);
}

.main-nav {
  gap: 40px;
}

@media (max-width: 760px) {
  .main-nav {
    gap: 0 !important;
  }
}

/* F6S badge: hidden from header (absolute-positioned in base CSS, floats over page),
   lives quietly in the footer legal line instead. */
.f6s-award-badge {
  display: none !important;
}

.footer-award-badge {
  display: inline-block !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  margin-top: 10px;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 5px;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.footer-award-badge:hover {
  opacity: 0.9;
}

.footer-award-badge img {
  height: 24px;
  width: auto;
  display: block;
}

.site-header .theme-toggle-btn {
  color: var(--text-muted);
}

.menu-toggle .bar {
  background-color: var(--text);
}

/* ---- Hero: fewer competing elements, calmer type ---- */

/* ---- Hero band — matches header surface, theme-aware ---- */
.hero-band {
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  padding: 12px 40px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

.hero-band-tagline {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-right: 28px;
  border-right: 0.5px solid var(--border);
  flex-shrink: 0;
}

.hero-band-counts {
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-right: 0.5px solid var(--border);
  flex-shrink: 0;
  gap: 0;
}

.hero-band-sport {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-right: 0.5px solid var(--border);
}

.hero-band-sport:first-child { padding-left: 0; }
.hero-band-sport:last-child { border-right: none; padding-right: 0; }

.hero-band-sport-icon { font-size: 14px; flex-shrink: 0; }

.hero-band-sport-name {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}

.hero-band-count-num {
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-left: 14px;
}

.hero-band-count-sep {
  width: 0.5px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 10px;
}

.hero-band-count-done {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero-band-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 28px;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.hero-band-strip-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-band-strip-sports {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
}

.hero-band-strip-sport {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-band-strip-icon {
  font-size: 11px;
  filter: grayscale(1);
  opacity: 0.5;
}

/* Standalone strip (schedule / tournaments pages) — centered */
.container > .hero-band-strip,
.schedule-container > .hero-band-strip {
  flex: unset;
  justify-content: center;
  padding-left: 0;
  overflow: visible;
}

.container > .hero-band-strip .hero-band-strip-sports,
.schedule-container > .hero-band-strip .hero-band-strip-sports {
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
}

@media (max-width: 640px) {
  .hero-band {
    padding: 10px 16px;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .hero-band-tagline { display: none; }

  .hero-band-strip { min-width: max-content; }
}

/* ==========================================================================
   Step 2: calendar filter + calendar grid + live match filter pills
   ========================================================================== */

/* Sports nav: one family of line icons, quiet selection, no nested plates. */
.sidebar-item.active,
.sports-sidebar-horizontal .sidebar-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-dark) !important;
  box-shadow: inset 0 0 0 0.5px var(--accent);
}
.sidebar-item:hover {
  background: var(--surface-soft);
  color: var(--text);
}
.sports-sidebar .sidebar-item {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
}

.sidebar-icon,
.sports-sidebar-horizontal .sidebar-icon {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent !important;
  border-radius: 0;
}

.sidebar-icon-img,
.filter-pill .pill-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.sidebar-item:hover .sidebar-icon-img,
.filter-pill:hover .pill-image {
  opacity: 0.7;
}

.sidebar-item.active .sidebar-icon-img,
.filter-pill.active .pill-image {
  opacity: 1;
}

html[data-theme="dark"] .sidebar-icon-img,
html[data-theme="dark"] .filter-pill .pill-image {
  filter: invert(1);
  opacity: 0.45;
}

html[data-theme="dark"] .sidebar-item:hover .sidebar-icon-img,
html[data-theme="dark"] .filter-pill:hover .pill-image {
  filter: invert(1);
  opacity: 0.75;
}

.sidebar-icon-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 1;
  opacity: 1;
  filter: grayscale(0.5);
  transition: filter 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.sidebar-item:hover .sidebar-icon-emoji,
.filter-pill:hover .sidebar-icon-emoji {
  filter: grayscale(0);
}

.sidebar-item.active .sidebar-icon-emoji,
.filter-pill.active .sidebar-icon-emoji {
  filter: grayscale(0);
}

.pill-image-container .sidebar-icon-emoji {
  font-size: 40px;
}

html[data-theme="dark"] .sidebar-item.active .sidebar-icon-img,
html[data-theme="dark"] .filter-pill.active .pill-image {
  filter: invert(1);
  opacity: 1;
}
html[data-theme="dark"] .sidebar-item.active,
html[data-theme="dark"] .sports-sidebar-horizontal .sidebar-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-dark) !important;
  box-shadow: inset 0 0 0 0.5px var(--accent);
}
.sports-sidebar {
  background: var(--surface);
  border-color: var(--border);
}

.sport-banner-tag {
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 0.5px solid var(--border);
}

html[data-theme="dark"] .sport-banner-tag {
  background: var(--surface-strong);
  color: var(--text);
  border-color: var(--border);
}

.sidebar-label {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  font-weight: 500;
  box-shadow: var(--shadow);
}

/* Calendar header type: was 800/900 weight everywhere, competing with the
   data itself for attention. One clear heading weight is enough. */
.calendar-month-title {
  font-weight: 500;
  color: var(--text);
}

.btn-nav-arrow {
  color: var(--text-soft);
}

.btn-today {
  font-weight: 500;
  color: var(--text-soft);
  background: var(--surface);
  border-color: var(--border);
  letter-spacing: 0.03em;
}

.btn-today:hover {
  background: var(--surface-soft);
  border-color: var(--text-muted);
}

.weekday-row {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: 500;
}

.weekday-row span {
  border-color: var(--border);
}

.calendar-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  padding: 14px 12px 12px;
  gap: 12px;
  overflow: hidden;
}

.calendar-empty {
  background: var(--surface-soft);
}

/* "Today" was a thick black border + solid blue fill + a drop-shadowed
   badge — three signals stacked on one cell. One quiet accent-tinted
   background does the same job. Dark-mode rules in site.css used
   !important royal blue + a white pill; match this specificity. */
.calendar-today,
html[data-theme="dark"] .calendar-today {
  background: var(--accent-soft) !important;
  border: 0.5px solid var(--accent) !important;
  box-shadow: none;
}

html[data-theme="dark"] .calendar-today .calendar-number,
html[data-theme="dark"] .calendar-today .event-item,
html[data-theme="dark"] .calendar-today .event-text {
  color: var(--text);
}

html[data-theme="dark"] .calendar-today .view-more {
  color: var(--accent);
}

.today-label,
html[data-theme="dark"] .today-label {
  background: transparent;
  color: var(--accent);
  border: none;
  box-shadow: none;
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.1em;
  padding: 0;
}

.calendar-number {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}

.calendar-empty .calendar-number {
  color: var(--text-muted);
}

.event-list,
.event-items {
  gap: 8px;
}

.event-item {
  font-weight: 500;
  color: var(--text-soft);
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.event-item:hover {
  color: var(--text);
  transform: none;
}

.event-dot {
  width: 5px;
  height: 5px;
  background: var(--text-muted);
  opacity: 0.5;
}

.event-text {
  white-space: nowrap;
  overflow: hidden;
}

.view-more {
  margin-top: 2px;
  color: var(--text-muted);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}

.view-more:hover {
  color: var(--text-soft);
}

@media (max-width: 768px) {
  .calendar-card {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    padding: 8px 6px !important;
    gap: 8px !important;
  }

  .event-list,
  .event-items {
    gap: 6px !important;
  }

  .event-item {
    gap: 6px !important;
  }

  .event-text {
    font-size: 11px !important;
  }

  .event-dot {
    width: 5px !important;
    height: 5px !important;
    background: var(--text-muted) !important;
    opacity: 0.5;
  }

  .view-more {
    font-size: 10px !important;
    text-align: left !important;
  }
}

/* Live match filter pills: flat gray boxes with a heavy active outline +
   shadow + color-change combo. Replaced with a quiet surface card and a
   single accent-bottom-border for the active state — one signal, not three. */
.filter-pill {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  font-weight: 500;
  box-shadow: none;
}

.filter-pill:hover {
  background: var(--surface-soft);
  border-color: var(--text-muted);
  transform: none;
}

.filter-pill.active,
html[data-theme="dark"] .filter-pill.active {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  border: 0.5px solid var(--accent) !important;
  outline: none;
  box-shadow: none;
}

html[data-theme="dark"] .filter-pill.active .pill-name {
  color: var(--text) !important;
}

.scroll-arrow {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-soft);
  box-shadow: none;
}

.scroll-arrow:hover {
  background: var(--surface-soft);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}

.calendar-popup {
  box-shadow: none;
}

html[data-theme="dark"] .calendar-popup,
html[data-theme="dark"] .popup-close-btn,
html[data-theme="dark"] .popup-date,
html[data-theme="dark"] .popup-nav-arrow,
html[data-theme="dark"] .popup-match-card,
html[data-theme="dark"] .popup-match-card:hover,
html[data-theme="dark"] .popup-match-card:active,
html[data-theme="dark"] .popup-team-initial-logo {
  box-shadow: none;
}

.popup-close-btn:hover,
.popup-close-btn:active,
.popup-nav-arrow:hover,
.popup-nav-arrow:active,
.popup-match-card:hover,
.popup-match-card:active {
  transform: none;
}

.popup-close-btn:hover {
  background-color: var(--accent-dark);
}

.popup-match-card:hover {
  background: var(--surface-soft);
}

.popup-league-title,
.popup-team-name,
.popup-league-subheader {
  color: var(--text);
}

.popup-league-subheader-text,
.popup-team-name,
.popup-team-initial-logo,
.popup-match-vs,
.popup-match-meta {
  font-weight: 500;
}

.popup-match-card {
  background: var(--surface);
  color: var(--text);
  height: auto;
  flex-shrink: 0;
  overflow: visible;
}

.popup-match-card--stack {
  min-height: 0;
  align-items: flex-start;
}

.popup-match-team,
.popup-match-vs,
.popup-match-meta {
  flex-shrink: 0;
}

.live-main-title {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ==========================================================================
   Step 3: live match card
   The card hardcoded black text (.live-card, .set-score, .team-crest
   .initials all had color:#000000), a red pulsing dot, glass-blur badges,
   and 800/900-weight type everywhere. Hardcoded black text is a real dark
   mode bug, not just a style choice — it goes near-invisible on a dark
   card background. Retoned to the shared calm language: tokenized color,
   the reserved accent instead of red, tabular score numerals, one signal
   per state instead of stacked badge effects.
   ========================================================================== */

.live-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

.live-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.badge {
  background: var(--surface-strong);
  color: var(--text);
  border: 0.5px solid var(--border);
  font-weight: 500;
  letter-spacing: 0.03em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.live-badge {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
}

/* Slow, calm breathing dot in the reserved accent color instead of a fast
   red pulse — live should read as "ongoing", not "alarm". */
.live-badge::before {
  background-color: var(--accent);
  animation: breatheAccent 3.2s infinite ease-in-out;
}

@keyframes breatheAccent {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.5;
    box-shadow: none;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: none;
  }
}

.score-league-badge {
  color: var(--text);
  background: var(--surface-strong);
  border-color: var(--border);
  font-weight: 500;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card-group-match-details {
  color: var(--text-soft);
  font-weight: 500;
}

.card-footer-row {
  border-color: var(--border);
}

.venue-text {
  color: var(--text-soft);
  font-weight: 500;
  opacity: 1;
}

.team-abbr {
  font-weight: 500;
  color: var(--text);
}

.team-crest .initials {
  color: var(--text);
  font-weight: 500;
}

.main-score {
  font-family: var(--font-sans);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.set-score {
  color: var(--text-soft);
  font-weight: 500;
  opacity: 1;
}

.vs-text {
  font-size: 11px;
  font-weight: 400;
  color: var(--match-dim);
  margin: 0 8px;
  flex-shrink: 0;
}

.player-name {
  color: var(--text);
  font-weight: 500;
}

/* The live tennis points pill was hardcoded blue regardless of theme —
   now uses the same reserved accent as the live badge. */
.card-tennis-live-points {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
}

html[data-theme="dark"] .card-tennis-live-points {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* ==========================================================================
   Step 4: schedule ("Upcoming") page
   ========================================================================== */

/* Header: no spacing needed — only league-back button lives here now */
.schedule-page-header {
  justify-content: flex-start;
  margin-bottom: 0;
}

.schedule-section-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 12px;
  letter-spacing: 0.01em;
}

/* TODAY button placed beside week strip — match the strip nav buttons */
.schedule-today-btn {
  border: 0.5px solid var(--border) !important;
  box-shadow: none !important;
  background: var(--surface);
  color: var(--text-soft);
  font-weight: 500;
}

.schedule-today-btn:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.schedule-today-btn:active {
  transform: none;
}
.week-strip,
.league-search-wrapper .search-input-container,
.league-card {
  border: 0.5px solid var(--border) !important;
  box-shadow: none !important;
}

/* --- Week strip --- */
.week-strip {
  background: var(--surface);
  flex: 1;
  display: flex;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}

.week-strip::-webkit-scrollbar {
  display: none;
}

.week-day-card {
  border-right: 0.5px solid var(--border);
  flex: 1;
  min-width: 44px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* Arrow buttons — fixed width, never flex-grow */
.week-strip-nav-btn {
  flex-shrink: 0 !important;
  width: 32px !important;
  min-height: 48px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* TODAY button — sibling of .week-strip-container, right-aligned above the last day */
.week-today-btn {
  display: block;
  text-align: right;
  padding-right: 34px; /* aligns above last cell: next-arrow width */
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  line-height: 1;
  margin-bottom: 2px;
  background: none;
  border: none;
  cursor: pointer;
}

.week-today-btn:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.week-day-card:hover {
  background: var(--surface-soft);
}

/* Selected day: underline only — no background fill */
.week-day-card.active {
  background: var(--surface) !important;
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}

/* Today (not selected): same neutral background as all others */
.week-day-card.today-card:not(.active) {
  background: var(--surface);
}

.week-day-name,
.week-day-month {
  color: var(--text-muted);
  font-weight: 500;
  opacity: 1;
}

.week-day-card.active .week-day-name,
.week-day-card.active .week-day-month {
  color: var(--accent);
  opacity: 1;
}

.week-day-number {
  font-weight: 500;
  color: var(--text);
}

.week-day-card.active .week-day-number {
  color: var(--accent);
}

/* Today dot: small accent dot above the date, only when not also selected */
.today-dot {
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  border: none !important;
  animation: none !important;
}

/* Hide dot when the day is also selected (underline is enough) */
.week-day-card.active .today-dot {
  display: none !important;
}

/* --- Match count: plain tabular number, no badge --- */
.week-match-count {
  display: block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

.week-day-card.active .week-match-count {
  color: var(--accent) !important;
  background: transparent !important;
  border: none !important;
}

html[data-theme="dark"] .week-day-card.active .week-match-count {
  color: var(--accent) !important;
  background: transparent !important;
}

/* Override the amber badge for today's match count */
.week-day-card.today-card:not(.active) .week-match-count {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
}

html[data-theme="dark"] .week-day-card.today-card:not(.active) .week-match-count {
  background: transparent !important;
  color: var(--text-muted) !important;
}

/* --- BY DATE / BY LEAGUE toggle --- */



.league-search-wrapper .search-input-container {
  background: var(--surface);
}

.league-card {
  background: var(--surface);
}

.league-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow) !important;
}

.league-card:active {
  transform: none;
}

/* ==========================================================================
   Step 5: match detail tabs + statistics comparison bars
   Tabs used the same thick-border/offset-shadow pattern as the schedule
   page. Stat bars used a blue-vs-lime-green pairing unrelated to the rest
   of the palette. Both retoned to the shared language: hairline borders,
   one accent for "active"/"home", neutral gray for the other side.
   ========================================================================== */

.tab-btn {
  background: var(--surface);
  border: 0.5px solid var(--border);
  box-shadow: none;
  color: var(--text-soft);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
}

.tab-btn:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-soft);
}

.tab-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tab-btn.active:hover {
  transform: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Home side carries the one reserved accent; away side stays neutral
   gray — a comparison needs two distinguishable tones, not two
   competing saturated hues. */


/* ==========================================================================
   Step 6: events timeline, lineups, head-to-head
   Same two recurring problems as everywhere else on this site: thick
   black borders with offset shadows, and one-off saturated colors that
   don't relate to the rest of the palette. Goal/card/substitution icons keep
   their real-world colors (yellow card, red card) since those carry
   actual sport meaning — not part of this cleanup.
   ========================================================================== */


.player-jersey {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--text);
  font-weight: 500;
}

.lineup-list-header h4 {
  font-weight: 500;
}

.lineup-formation-tag {
  border: 0.5px solid var(--border);
  box-shadow: none;
  font-weight: 500;
}

/* Active state was an unrelated hot pink — now the same reserved accent
   used for "active"/"live"/"selected" everywhere else on the site. */


/* ==========================================================================
   Step 7: footer, scroll-to-top, legal pages, standings, about page
   Footer used an unrelated navy seen nowhere else on the site.
   Legal pages had the same thick-border/offset-shadow pattern as the
   schedule page. Standings table wasn't tokenized at all, so it wouldn't
   adapt to dark mode. About page and the 404 page were already close to
   the calm language, so only light touch-ups here.
   ========================================================================== */

.site-footer {
  background-color: var(--text);
  color: var(--background);
}

.footer-links a {
  color: var(--background);
  font-weight: 500;
}

.footer-copyright {
  color: var(--background);
  font-weight: 500;
  opacity: 1;
}

.footer-contact {
  font-size: 13px;
  font-weight: 500;
  color: var(--background);
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.footer-contact a {
  color: var(--background);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-legal-details {
  font-size: 11px;
  color: var(--background);
  opacity: 0.92;
  text-align: center;
  line-height: 1.6;
  margin-top: 6px;
  max-width: 560px;
}

html[data-theme="dark"] .site-footer {
  background-color: var(--surface);
  color: var(--text);
  border-top: 0.5px solid var(--border);
}

html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-copyright,
html[data-theme="dark"] .footer-contact,
html[data-theme="dark"] .footer-contact a,
html[data-theme="dark"] .footer-legal-details {
  color: var(--text);
}

.scroll-to-top-btn {
  background: var(--accent);
  border: none;
  box-shadow: none;
}

.scroll-to-top-btn:hover {
  background: var(--accent-dark);
  box-shadow: none;
}

.terms-panel {
  border: 0.5px solid var(--border) !important;
  box-shadow: none !important;
}

.terms-panel-head {
  border-bottom: 0.5px solid var(--border) !important;
}

.terms-pretitle {
  font-weight: 500;
}

.terms-main-title {
  font-weight: 500;
  text-transform: none;
}

.terms-heading {
  font-weight: 500;
  text-transform: none;
  border-bottom: 1px solid var(--accent);
}

/* Standings table wasn't tokenized at all — same colors regardless of
   theme, so it would look wrong in dark mode. */
.standings-table-wrapper {
  border-color: var(--border);
  background: var(--surface);
}

.standings-table th {
  background: var(--surface-strong);
  color: var(--text-muted);
  font-weight: 500;
  border-bottom-color: var(--border);
}

.standings-table td {
  border-bottom-color: var(--border);
  color: var(--text-soft);
}

.standings-row:hover {
  background: var(--hover);
}

.about-hero-copy h1 {
  font-weight: 500;
}

.about-download-card strong {
  font-weight: 500;
}

.comments-header h2 {
  font-weight: 500;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.footer-main-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
}

.footer-links {
  justify-self: start;
}

.footer-copyright {
  justify-self: center;
  text-align: center;
  margin: 0;
}

.footer-badges {
  justify-self: end;
}

.footer-contact,
.footer-legal-details {
  width: 100%;
  text-align: center;
}

.footer-legal-details {
  max-width: 720px;
}

.app-store-badge-for-dark {
  display: none;
}

html[data-theme="dark"] .app-store-badge-for-light {
  display: none;
}

html[data-theme="dark"] .app-store-badge-for-dark {
  display: block;
}

.store-badge.app-store img {
  filter: none;
  border: 0;
}

html:not([data-theme="dark"]) .app-store-badge-for-light {
  outline: 1px solid rgba(250, 250, 248, 0.35);
  outline-offset: 0;
  border-radius: 6px;
}

@media (max-width: 900px) {
  .footer-main-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 16px;
  }

  .footer-links,
  .footer-copyright,
  .footer-badges {
    justify-self: center;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.about-direct-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  margin: -8px 0 20px;
}

.about-direct-contact a {
  color: var(--accent-dark);
  text-decoration: none;
}

.about-direct-contact a:hover {
  text-decoration: underline;
}

.about-direct-contact span {
  color: var(--text-muted);
}

.about-registered-office {
  padding: 16px 18px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.about-registered-office strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}

.about-registered-office p {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0 0 4px;
}

.about-registered-office .about-cin {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0;
}

/* ==========================================================================
   Step 8: Today page + empty states
   Header buttons here weren't tokenized at all (hardcoded light colors),
   so they'd stay light-mode-colored even in dark mode. Active-date badge
   and loading bar used yet another unrelated navy/indigo-blue. Empty
   state sport chips hovered to the old blue accent instead of the
   reserved teal.
   ========================================================================== */
.btn-today-outline {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--text-soft);
  font-weight: 500;
  box-shadow: none;
}
.btn-today-outline:hover {
  transform: none;
  box-shadow: none;
  color: var(--text);
  border-color: var(--text-muted);
}

.today-loading-bar.active {
  background: var(--accent-soft);
}

.today-loading-bar.active::after {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.timeline-empty-title {
  font-weight: 500;
  color: var(--text-soft);
}

.timeline-empty-subtitle {
  font-weight: 500;
  color: var(--text-muted);
}

.timeline-empty-available-label {
  font-weight: 500;
  color: var(--text-muted);
}

.timeline-empty-sport-chip {
  background: var(--surface-strong);
  border: 0.5px solid var(--border);
  color: var(--text-soft);
  font-weight: 500;
  text-transform: none;
}

.timeline-empty-sport-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

/* ==========================================================================
   Step 9: remaining shared partials (ad label, no-matches placeholder)
   Both were hardcoded and wouldn't adapt to dark mode.
   ========================================================================== */

.ad-label {
  color: var(--text-muted);
}

/* ==========================================================================
   Step 10: odds/media tabs, info rows, dashboard cards
   Same recurring issue: hardcoded grays that never adapted to dark mode.
   ========================================================================== */

.info-item {
  border-bottom-color: var(--border);
}

.info-label {
  color: var(--text-muted);
}

.info-value {
  font-weight: 500;
  color: var(--text);
}

.dashboard-card-wrap {
  background: var(--surface);
  border: 0.5px solid var(--border);
  box-shadow: none;
}

.dashboard-card-header-bar {
  background: var(--surface-strong);
  border-bottom: 0.5px solid var(--border);
  font-weight: 500;
  color: var(--text-soft);
}

.empty-dashboard-state {
  color: var(--text-muted);
}

/* ==========================================================================
   Step 11: media cards
   Same comic-shadow pattern one more time, plus a real bug: these rules
   referenced var(--text-primary) — --text-primary was never
   defined anywhere in the codebase, so it silently always fell back to
   the hardcoded hex regardless of theme. Retoned to the real --text
   token and removed the now-unnecessary duplicate dark-mode block.
   ========================================================================== */

.media-section-title {
  font-weight: 500;
  color: var(--text);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .media-section-title {
  color: var(--text);
  border-bottom-color: var(--border);
}

.media-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  box-shadow: none;
}

.media-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.media-card:active {
  transform: none;
}

html[data-theme="dark"] .media-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .media-card:hover {
  box-shadow: var(--shadow);
}

.media-card-title {
  font-weight: 500;
  color: var(--text);
}

html[data-theme="dark"] .media-card-title {
  color: var(--text);
}

.media-card-type {
  font-weight: 500;
  color: var(--text-muted);
}

html[data-theme="dark"] .media-card-type {
  color: var(--text-muted);
}

/* ==========================================================================
   Step 12: schedule match row (.timeline-match-bar)
   The row had tokenized spot colors from a mechanical sweep but never a
   real pass: leftover hover jiggle, a green livePulse keyframe, a blue
   "upcoming" badge, a red live-dot glow, 800/900 type, and DONE inheriting
   by accident. Same quiet language as the rest of the redesign.
   ========================================================================== */

.timeline-match-bar:hover,
.timeline-match-bar:active,
.timeline-match-bar.status-live:hover {
  transform: none;
}
.match-bar-league,
.match-bar-teams,
.match-bar-countdown,
.match-bar-score {
  font-weight: 500;
}

.match-bar-countdown.countdown-upcoming,
html[data-theme="dark"] .match-bar-countdown.countdown-upcoming {
  background: var(--surface-strong);
  color: var(--text-soft);
  border: 0.5px solid var(--border);
}

.match-bar-countdown.countdown-completed,
html[data-theme="dark"] .match-bar-countdown.countdown-completed,
.schedule-container .match-bar-countdown.countdown-completed,
html[data-theme="dark"] .schedule-container .match-bar-countdown.countdown-completed {
  background: var(--surface-strong) !important;
  color: var(--text-muted) !important;
  border: 0.5px solid var(--border) !important;
}

html[data-theme="dark"] .schedule-container .timeline-match-bar.status-completed,
html[data-theme="dark"] .schedule-container .timeline-match-bar.status-completed:hover {
  background: var(--surface-strong) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .schedule-container .timeline-match-bar.status-completed .match-bar-teams,
html[data-theme="dark"] .schedule-container .timeline-match-bar.status-completed .match-bar-doubles-team span {
  color: var(--text-soft) !important;
}

.match-bar-doubles-vs {
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  padding: 0;
  border-radius: 0;
}

/* Finished / not-live match status: base pill used white type for LIVE.
   status-not-live sits on surface-strong, so white-on-pale-gray disappeared
   in light mode. Tokenized fill + text reads in both themes. */


/* Statistics comparison (shared tennis-* classes, all sports):
   away was hot pink; legend used untokenized glass + colored glows. */

.legend-item.away {
  color: var(--text-soft);
}

/* ==========================================================================
   Step 13: Bloomberg display discipline
   Structural hierarchy refactor of the match list UI: unified surface ramp
   (tokens above), teal restriction to live-only, three-level luminance,
   hairline dividers replacing bordered cards, monospaced score column,
   league section headers (requires renderTimeline JS change), flat date
   rail (step 12 already handles underline), monospace time column.
   ========================================================================== */

/* --- 2. Teal restriction: neutralize decorative accent uses --- */

/* Sport sidebar active → neutral weight, not accent fill */
.sidebar-item.active,
html[data-theme="dark"] .sidebar-item.active {
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.sidebar-item.active .sidebar-label,
html[data-theme="dark"] .sidebar-item.active .sidebar-label {
  color: var(--text) !important;
}

/* Sport filter pills active → neutral */
.filter-pill.active,
html[data-theme="dark"] .filter-pill.active {
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.filter-pill.active .pill-name,
html[data-theme="dark"] .filter-pill.active .pill-name {
  color: var(--text) !important;
}

/* Schedule toggle active → neutral underline */


/* "in Xm" upcoming countdown → accent (the one permitted near-future signal) */
.match-bar-countdown.countdown-upcoming,
html[data-theme="dark"] .match-bar-countdown.countdown-upcoming {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 0.5px solid var(--accent) !important;
}
html[data-theme="dark"] .match-bar-countdown.countdown-upcoming {
  color: var(--accent-dark) !important;
}

/* Home stat bar fill → neutral (teal was decorative here) */


/* --- 3. Score column — unified five-state / winner-luminance standard --- */

/* Resting colour = 70% (upcoming / imminent / soon / tied). Winner-encoding
   spans (.mscore--win|lose|draw, .mname--win|lose|draw) carry live/finished. */
.match-bar-score {
  color: var(--match-draw);
}
.match-bar-teams,
.match-bar-doubles-team span {
  color: var(--match-draw);
}

/* Score-column countdown states */
.match-bar-score.mscore--upcoming { color: var(--match-dim)  !important; font-weight: 500; }
.match-bar-score.mscore--imminent { color: var(--match-live) !important; font-weight: 600; }

/* Team-name luminance (singles / team) */
.match-bar-side.mname--win  { color: var(--match-full) !important; }
.match-bar-side.mname--lose { color: var(--match-dim)  !important; }
.match-bar-side.mname--draw { color: var(--match-draw) !important; }

/* Team-name luminance (doubles — class sits on the pair wrapper) */
.match-bar-doubles-team.mname--win  span { color: var(--match-full) !important; }
.match-bar-doubles-team.mname--lose span { color: var(--match-dim)  !important; }
.match-bar-doubles-team.mname--draw span { color: var(--match-draw) !important; }

/* League / metadata / time: tertiary / most muted */
.match-bar-league,
.match-bar-league-header,
.timeline-time-marker {
  color: #9a9590;
}
html[data-theme="dark"] .match-bar-league,
html[data-theme="dark"] .match-bar-league-header,
html[data-theme="dark"] .timeline-time-marker {
  color: #5c5550;
}

/* --- 4. Hairline dividers replacing bordered cards --- */

/* Remove card shape; each row is a flat row with a bottom hairline */
.timeline-match-bar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border) !important;
  animation: none !important;
  padding: 10px 4px 10px 4px !important;
  margin: 0 !important;
}
.timeline-match-bar.status-live {
  border-bottom-color: var(--border) !important;
  animation: none !important;
}
.timeline-match-bar:hover {
  background: var(--hover) !important;
}

/* Left accent stripe no longer needed with hairline layout */


/* --- 5. Monospaced score column --- */

/* Match-list container: capped width, centred, edge padding (spec — applies to
   the whole schedule list: section headers, rows, NOW marker, filter line). */
.schedule-container .timeline-container,
.league-matches-results {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .schedule-container .timeline-container,
  .league-matches-results { padding-left: 16px; padding-right: 16px; }
}

/* Match bar → fixed-column grid.
   Schedule has a left time rail (~200px) so the bar is ~432px wide.
   Column budget: 20 + 1fr + 100 + 44 + 3×12(gaps) = 200 + 1fr → teams ~232px. */
.timeline-match-bar {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) minmax(100px, max-content) 44px !important;
  align-items: center !important;
  column-gap: 12px !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}
@media (max-width: 600px) {
  .timeline-match-bar {
    grid-template-columns: 16px minmax(0, 1fr) minmax(80px, max-content) 36px !important;
    column-gap: 8px !important;
    gap: 8px !important;
  }
}
.match-bar-sport-icon { grid-column: 1; margin: 0 !important; width: auto !important; }
.match-bar-details    { grid-column: 2; min-width: 0; }
.match-bar-countdown  { grid-column: 4; justify-self: end; }

.match-bar-score {
  grid-column: 3;
  justify-self: end;
  font-family: 'IBM Plex Mono', ui-monospace, var(--font-mono), monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

/* Schedule page team logo/flag — mirrors home hlb-crest / hlb-flag sizes */


/* Teams column — flex row so vs-text sits between the two name spans */
.match-bar-teams {
  font-size: 14px;
  overflow: hidden;
}

.match-bar-versus {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.match-bar-side {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--match-draw);
}

/* --- 6. League section header (CSS side; JS emits .match-bar-league-header) --- */

.match-bar-league-header {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #9a9590;
  padding: 12px 4px 4px 4px;
  width: 100%;
  box-sizing: border-box;
}
html[data-theme="dark"] .match-bar-league-header {
  color: #5c5550;
}

/* Per-row league label is now rendered as a section header above the group */
.match-bar-league {
  display: none !important;
}

/* --- 7. Date rail — step 12 handles underline; ensure flat strip background --- */

.week-day-card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .week-day-card {
  border: none !important;
  border-radius: 0 !important;
}

/* --- 8. Match time column: monospace, fixed-width, muted --- */

.timeline-time-marker {
  font-family: 'IBM Plex Mono', ui-monospace, var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 400;
  min-width: 64px;
  width: 64px;
}

/* ---- IBM Plex Mono as primary monospace token ---- */
:root {
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ==========================================================================
   Step 14: Bloomberg display discipline — completion pass
   Fixes gaps after Step 13:
   - System prefers-color-scheme dark path (token bridge)
   - Week strip: remove outer container border (Step 4 added one)
   - View toggle: flat tab strip, teal underline, no container border
   - Sport sidebar / filter pills: no filled background on active
   - Inactive day numbers: 40% luminance (Step 12 left them full-contrast)
   - Active day number: full-contrast text, not teal
   ========================================================================== */

/* --- System dark mode token bridge ---
   html[data-theme="dark"] covers the explicit toggle.
   prefers-color-scheme covers the default/unset state (most viewers).
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0f0e0d;
    --surface: #151412;
    --surface-soft: #1a1816;
    --surface-strong: #131110;
    --surface-card: var(--surface-strong);
    --text: #ede9e4;
    --text-muted: #7a7672;
    --text-soft: #a09890;
    --border: #242220;
    --border-color: var(--border);
    --accent: #3d8b8b;
    --accent-soft: #1a3535;
    --accent-dark: #3d8b8b;
    --shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  }
}

/* --- 7. Date rail: flat open strip, no outer border, height 62px,
         inactive day numbers at 40% luminance, active number full-contrast --- */

.week-strip {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: transparent !important;
}
html[data-theme="dark"] .week-strip {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .week-strip {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
}

.week-day-card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 62px;
}

/* Inactive day number: 40% luminance */
.week-day-number {
  color: #9a9590 !important;
}
html[data-theme="dark"] .week-day-number {
  color: #5c5550 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .week-day-number {
    color: #5c5550 !important;
  }
}

/* Active day number: full contrast — teal is reserved for the underline only */
.week-day-card.active .week-day-number {
  color: var(--text) !important;
}

/* Active day name/month: accent colour marks the selected cell's labels */
.week-day-card.active .week-day-name,
.week-day-card.active .week-day-month {
  color: var(--accent) !important;
  opacity: 1;
}

/* --- 8. View toggle: flat tab strip, no container border,
         teal 2px underline on active tab only --- */

@media (prefers-color-scheme: dark) {
}

/* Active tab: full-contrast label + 2px teal bottom underline */


/* --- 10. Sport filter sidebar: no filled-background on active,
          full-brightness icon is the only active indicator --- */

.sidebar-item.active,
html[data-theme="dark"] .sidebar-item.active,
.sports-sidebar-horizontal .sidebar-item.active,
html[data-theme="dark"] .sports-sidebar-horizontal .sidebar-item.active {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.sidebar-item.active .sidebar-label,
html[data-theme="dark"] .sidebar-item.active .sidebar-label {
  color: var(--text) !important;
}
.sidebar-item.active .sidebar-icon-img,
html[data-theme="dark"] .sidebar-item.active .sidebar-icon-img {
  opacity: 1 !important;
  filter: none !important;
}

/* Filter pills: same flat-active treatment */
.filter-pill.active,
html[data-theme="dark"] .filter-pill.active {
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
}
.filter-pill.active .pill-name,
html[data-theme="dark"] .filter-pill.active .pill-name {
  color: var(--text) !important;
}
.filter-pill.active .pill-image,
html[data-theme="dark"] .filter-pill.active .pill-image {
  opacity: 1 !important;
  filter: none !important;
}

/* ==========================================================================
   Step 15: Flat date rail — remove all button containers
   Arrows (◀ ▶) and TODAY become plain text controls; active day card loses
   its filled-background box, keeping only the 2px teal bottom underline.
   ========================================================================== */

/* --- Nav arrows: plain glyph, no box --- */
.week-strip-nav-btn,
html[data-theme="dark"] .week-strip-nav-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  transition: color 0.1s ease !important;
}
.week-strip-nav-btn:hover,
html[data-theme="dark"] .week-strip-nav-btn:hover {
  background: transparent !important;
  color: var(--text) !important;
}
.week-strip-nav-btn:active,
html[data-theme="dark"] .week-strip-nav-btn:active {
  transform: none !important;
  box-shadow: none !important;
  color: var(--accent) !important;
}

/* --- TODAY button: plain monospace text tab, same style as toggle --- */
.schedule-today-btn,
html[data-theme="dark"] .schedule-today-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  padding: 4px 0 !important;
}
.schedule-today-btn:hover,
html[data-theme="dark"] .schedule-today-btn:hover {
  background: transparent !important;
  color: var(--text) !important;
}
.schedule-today-btn:active,
html[data-theme="dark"] .schedule-today-btn:active {
  transform: none !important;
  color: var(--accent) !important;
}

/* --- Active day card: underline only, no filled background box --- */
.week-day-card.active,
html[data-theme="dark"] .week-day-card.active {
  background: transparent !important;
  border-radius: 0 !important;
}

/* --- Container: tighter gap to match plain-text controls --- */
.week-strip-container {
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
}

/* ==========================================================================
   Step 16: Sport filter — remove outer pill container
   The sidebar column loses its background, border, and border-radius.
   Active sport is indicated by icon brightness only (set in Step 14/15).
   ========================================================================== */
.sports-sidebar,
html[data-theme="dark"] .sports-sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 4px !important;
}

@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .sports-sidebar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   Step 17: Sport filter icon visibility + active ring
   Problem: Step 14 set filter:none on active icons, which makes black PNG
   icons invisible on dark surfaces. Inactive opacity 0.45 is also too low
   once the container background is gone.
   Fix: restore invert(1) for dark, lift opacity, add accent ring on active.
   ========================================================================== */

/* --- Light mode: icons at readable opacity, no filter needed --- */
.sidebar-icon-img,
.filter-pill .pill-image {
  opacity: 0.55;
}
.sidebar-item:hover .sidebar-icon-img,
.filter-pill:hover .pill-image {
  opacity: 0.8;
}
.sidebar-item.active .sidebar-icon-img,
.filter-pill.active .pill-image {
  opacity: 1 !important;
  filter: none !important;
}

/* --- Dark mode: black PNG icons need invert(1) to appear on dark surface --- */
html[data-theme="dark"] .sidebar-icon-img,
html[data-theme="dark"] .filter-pill .pill-image {
  filter: invert(1) !important;
  opacity: 0.6 !important;
}
html[data-theme="dark"] .sidebar-item:hover .sidebar-icon-img,
html[data-theme="dark"] .filter-pill:hover .pill-image {
  filter: invert(1) !important;
  opacity: 0.85 !important;
}
html[data-theme="dark"] .sidebar-item.active .sidebar-icon-img,
html[data-theme="dark"] .filter-pill.active .pill-image {
  filter: invert(1) !important;
  opacity: 1 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-icon-img,
  :root:not([data-theme="light"]) .filter-pill .pill-image {
    filter: invert(1) !important;
    opacity: 0.6 !important;
  }
  :root:not([data-theme="light"]) .sidebar-item:hover .sidebar-icon-img,
  :root:not([data-theme="light"]) .filter-pill:hover .pill-image {
    filter: invert(1) !important;
    opacity: 0.85 !important;
  }
  :root:not([data-theme="light"]) .sidebar-item.active .sidebar-icon-img,
  :root:not([data-theme="light"]) .filter-pill.active .pill-image {
    filter: invert(1) !important;
    opacity: 1 !important;
  }
}

/* --- Active ring: 1.5px accent outline around the icon container --- */
.sidebar-icon {
  border-radius: 6px;
  transition: box-shadow 0.15s ease;
}

.sidebar-item.active .sidebar-icon,
html[data-theme="dark"] .sidebar-item.active .sidebar-icon {
  box-shadow: 0 0 0 1.5px var(--accent) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-item.active .sidebar-icon {
    box-shadow: 0 0 0 1.5px var(--accent) !important;
  }
}

/* Remove the old accent-soft filled background that Step 13/15 overrode — 
   make absolutely sure no background creeps back */
.sidebar-item.active,
html[data-theme="dark"] .sidebar-item.active,
.sports-sidebar-horizontal .sidebar-item.active,
html[data-theme="dark"] .sports-sidebar-horizontal .sidebar-item.active {
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Step 18: Fix time-marker dot overlap
   Step 13 narrowed .timeline-time-marker to 44px but the ::after dot stayed
   at right:0 — putting it inside the text's 16px padding zone and overlapping
   the time text. Shift it to right:-4px so it sits at the column boundary.
   ========================================================================== */

/* Step 18 band-aid removed — width restored to 64px so right:0 aligns with track line */

/* ==========================================================================
   Step 19: Remove timeline dot — proper Bloomberg fix
   The dot (::after on .timeline-time-marker) occupies the same vertical band
   as the "12:15 / AM" two-line text block. No horizontal offset fixes this
   without moving the dot out of the text's vertical range entirely.
   Bloomberg discipline: the track line alone marks the axis — no dot needed.
   ========================================================================== */

.timeline-time-marker::after {
  display: none !important;
}

/* Reduce track line to a hairline */
.timeline-track-line,
html[data-theme="dark"] .timeline-track-line {
  width: 1px !important;
  background: var(--border) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .timeline-track-line {
    background: var(--border) !important;
  }
}

/* ==========================================================================
   Step 20: Align sidebar icons with first timestamp
   .sports-sidebar starts at the top of the flex row; the first timestamp
   text starts at padding-top:14px inside .timeline-time-marker.
   Add matching padding-top to push the first icon into alignment.
   ========================================================================== */
.sports-sidebar {
  padding-top: 14px !important;
}

/* ==========================================================================
   Step 21: Compact view toggle to content width
   Base CSS sets width:100% on .schedule-option-toggle and flex:1 on buttons,
   stretching them across the full week strip. Override to intrinsic width.
   ========================================================================== */


/* ==========================================================================
   Step 22: TODAY button moved into toggle row above last week-strip day
   Toggle is now full-width flex with tabs grouped left and TODAY on the right.
   ========================================================================== */


/* Tabs sit on the bottom hairline of the toggle container */


/* ==========================================================================
   Step 23: Home page TODAY button — same flat monospace treatment as schedule
   ========================================================================== */

.btn-today,
html[data-theme="dark"] .btn-today {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  padding: 4px 0 !important;
  text-decoration: none !important;
}
.btn-today:hover,
html[data-theme="dark"] .btn-today:hover {
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
}

/* ==========================================================================
   Step 24: By League view — Bloomberg discipline refactor (point 11)
   Single-column ruled list, sport section headers, flat search bar,
   no card borders / backgrounds / chevrons / per-row sport labels.
   ========================================================================== */

/* --- Grid → single-column ruled list --- */
.leagues-grid:not([style*="display: none"]):not([style*="display:none"]),
html[data-theme="dark"] .leagues-grid:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0 80px !important;
  align-items: flex-start !important;
  grid-template-columns: unset !important;
}

/* --- Sport section header (same treatment as match-bar-league-header) --- */
.league-sport-section-header {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #9a9590 !important;
  padding: 20px 0 6px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 0 !important;
}
html[data-theme="dark"] .league-sport-section-header {
  color: #5c5550 !important;
  border-bottom-color: var(--border) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league-sport-section-header {
    color: #5c5550 !important;
  }
}

/* --- League card: flat row with hairline divider --- */
.league-card,
html[data-theme="dark"] .league-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background 0.1s ease !important;
  overflow: visible !important;
}
.league-card:hover {
  background: #eae7e2 !important;
  transform: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .league-card:hover {
  background: #1a1816 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league-card:hover {
    background: #1a1816 !important;
  }
}
.league-card:active,
html[data-theme="dark"] .league-card:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Remove decorative parts */


/* --- Icon: flat 16px, no container box --- */

@media (prefers-color-scheme: dark) {
}

/* --- League name: 13px, 70% luminance --- */
.league-card .league-card-name,
html[data-theme="dark"] .league-card .league-card-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4a4540 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html[data-theme="dark"] .league-card .league-card-name {
  color: #a09890 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league-card .league-card-name {
    color: #a09890 !important;
  }
}

/* --- league-card-info wrapper: remove extra margin/padding --- */


/* --- Search bar: flat bottom-border only, no pill --- */
.league-search-wrapper .search-input-container,
html[data-theme="dark"] .league-search-wrapper .search-input-container {
  background: var(--surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 44px !important;
  padding: 0 !important;
}
html[data-theme="dark"] .league-search-wrapper .search-input-container {
  background: transparent !important;
  border-bottom-color: var(--border) !important;
}

.league-search-wrapper .search-input-container .search-icon,
html[data-theme="dark"] .league-search-wrapper .search-input-container .search-icon {
  color: #9a9590 !important;
  margin-right: 10px !important;
}
html[data-theme="dark"] .league-search-wrapper .search-input-container .search-icon {
  color: #5c5550 !important;
}

.league-search-wrapper .search-input-container input,
html[data-theme="dark"] .league-search-wrapper .search-input-container input {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  background: transparent !important;
}
.league-search-wrapper .search-input-container input::placeholder,
html[data-theme="dark"] .league-search-wrapper .search-input-container input::placeholder {
  color: #9a9590 !important;
  font-weight: 400 !important;
}
html[data-theme="dark"] .league-search-wrapper .search-input-container input::placeholder {
  color: #5c5550 !important;
}

.league-search-wrapper .search-input-container input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.league-search-wrapper .search-input-container:focus-within {
  border-bottom-color: var(--accent) !important;
}

/* ==========================================================================
   Step 25: League list — icon on section header only, no per-row dividers
   ========================================================================== */

/* Section header: flex row with icon + label */
.league-sport-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.league-sport-header-icon {
  width: 14px !important;
  height: 14px !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}
html[data-theme="dark"] .league-sport-header-icon {
  filter: invert(1) !important;
  opacity: 0.45 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league-sport-header-icon {
    filter: invert(1) !important;
    opacity: 0.45 !important;
  }
}

/* Remove icon from individual league rows */


/* Remove per-row hairline — rows are separated by proximity, not borders */
.league-card,
html[data-theme="dark"] .league-card {
  border-bottom: none !important;
}

/* ============================================================
   League / Tournament SEO landing page — Bloomberg treatment
   ============================================================ */

/* League title — compact mono label, not a giant hero h1 */
.selected-league-title,
html[data-theme="dark"] .selected-league-title {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--text) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* Header row — hairline separator, flush margin */
.league-matches-header {
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 0 !important;
  gap: 12px !important;
}

/* ALL LEAGUES back button — flat mono, no pill */


/* View standings — flat teal mono link */
.view-standings-link,
html[data-theme="dark"] .view-standings-link {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.view-standings-link:hover {
  text-decoration: underline !important;
}

/* Date section — zero bottom margin; header is the separator */
.league-date-section {
  margin: 0 !important;
}

/* Date header — 9px mono label, hairline below, transparent ground */
.league-date-header,
html[data-theme="dark"] .league-date-header {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  display: block !important;
  padding: 16px 0 8px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* NOW pointer — strip the blue pill, replace with flat teal mono label */


/* Anchor slot — time column goes teal */
.league-matches-results .timeline-slot.is-current-time-anchor > .timeline-time-marker {
  color: var(--accent) !important;
}

/* Results container — transparent, no card */
.league-matches-results {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* League sub-headers are redundant on a single-league page — the page title gives context */
.league-matches-results .match-bar-league-header {
  display: none !important;
}

/* Sport icon is also redundant — all matches on this page are the same sport */
.league-matches-results .match-bar-sport-icon {
  display: none !important;
}

/* Loading state — mono muted */
.league-matches-loading {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  gap: 10px !important;
  padding: 32px 0 !important;
}

/* No-matches placeholder — flat, no card */


/* ==========================================================================
   Step 26: By League — multi-column layout, no search bar, no sport sidebar
   ========================================================================== */

/* Load IBM Plex Mono from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Remove search bar entirely */
.league-search-wrapper {
  display: none !important;
}

/* Remove sport sidebar from league mode (sidebar is redundant — columns are per-sport) */
.league-schedule-container > .sports-sidebar,
.league-schedule-container > .sports-sidebar-horizontal {
  display: none !important;
}

/* League main area fills the full width when sidebar is gone */
.league-schedule-container .league-main-area {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Leagues grid: remove card styling; gap controlled by Step 24 rule */
.leagues-grid {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0 80px !important;
}

/* Each sport column */
.league-sport-column {
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
}

/* Section header spans its column — icon and label left-aligned, tight */
.league-sport-column .league-sport-section-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 0 !important;
}

/* Reset sidebar-icon-emoji inside the column header so it doesn't stretch */
.league-sport-column .league-sport-section-header .sidebar-icon-emoji {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

/* Cards in a column have a hairline top (except the first) */
.league-sport-column .league-card {
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
}

.league-sport-column .league-card:first-of-type {
  border-top: none !important;
}

/* Hover state per spec */
.league-sport-column .league-card:hover {
  background: var(--hover) !important;
}
html[data-theme="dark"] .league-sport-column .league-card:hover {
  background: var(--hover) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league-sport-column .league-card:hover {
    background: var(--hover) !important;
  }
}

/* Secondary label in league-card-name uses text-soft */
.league-sport-column .league-card .league-card-name {
  color: var(--text-soft) !important;
}
html[data-theme="dark"] .league-sport-column .league-card .league-card-name {
  color: var(--text-soft) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league-sport-column .league-card .league-card-name {
    color: var(--text-soft) !important;
  }
}

/* Mobile: stack columns */
@media (max-width: 640px) {
  .leagues-grid {
    flex-direction: column !important;
    gap: 32px 0 !important;
  }
  .league-sport-column {
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Step 27: League header — logo + identity, hide TODAY in league mode
   ========================================================================== */

/* Identity wrapper: logo + title inline */
.league-header-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* League logo: square, no border */
.league-header-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* =========================================================================
   Homepage live matches — Bloomberg discipline refactor
   ========================================================================= */

/* Remove TODAY pretitle entirely */


/* Plain inline sport tabs */
.live-sport-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .live-sport-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    gap: 20px;
  }
  .live-sport-tabs::-webkit-scrollbar {
    display: none;
  }
  .live-sport-tab {
    flex-shrink: 0;
  }
}

/* Fix 6 — Calendar: allow horizontal scroll so Sat/Sun aren't clipped */
@media (max-width: 800px) {
  .calendar-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .calendar-grid-wrapper {
    min-width: 600px !important;
    width: auto !important;
  }
}

.live-sport-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 4px 0;
  cursor: pointer;
  color: var(--text-muted);
}

.live-sport-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.live-sport-tab-icon img,
.live-sport-tab-icon svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.live-sport-tab-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
}

.live-sport-tab.active .live-sport-tab-icon {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.live-sport-tab.active .live-sport-tab-icon img,
.live-sport-tab.active .live-sport-tab-icon svg {
  opacity: 1 !important;
}

.live-sport-tab.active .live-sport-tab-label {
  color: var(--text);
  opacity: 1;
}

.live-sport-tab:hover .live-sport-tab-icon img,
.live-sport-tab:hover .live-sport-tab-icon svg {
  opacity: 0.7;
}
.live-sport-tab:hover .live-sport-tab-label {
  opacity: 0.7;
  color: var(--text-soft);
}

/* Empty state — bare, no container */

.between-matches-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.between-inner {
  text-align: left;
  min-width: unset;
  width: 100%;
  max-width: 480px;
  padding: 0 16px;
  box-sizing: border-box;
}
.between-heading {
  font-family: var(--font-mono, monospace);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-body);
  margin: 0 0 20px 0;
}
.next-line {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-meta);
  margin: 0 0 16px 0;
}
.next-datetime {
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 400;
  color: #9a9590;
  margin: 0 0 12px 0;
}
html[data-theme="dark"] .next-datetime { color: #7a7672; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .next-datetime { color: #7a7672; } }
.bem-time-group {
  margin-bottom: 4px;
}
.bem-time-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-meta);
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #dedad4;
}
html[data-theme="dark"] .bem-time-label { border-bottom-color: #242220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bem-time-label { border-bottom-color: #242220; } }
.bem-time-group:first-child .bem-time-label { margin-top: 0; }
.tournament-group {
  margin-bottom: 16px;
}
.tournament-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-meta);
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #dedad4;
}
html[data-theme="dark"] .tournament-label { border-bottom-color: #242220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tournament-label { border-bottom-color: #242220; } }
.match-line {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-meta);
  margin: 0 0 6px 0;
  text-decoration: none;
  display: block;
}
.match-line:hover { color: var(--accent); }
.match-line.bem-hidden { display: none; }
.bem-more-toggle {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #3d8b8b;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
}

.live-empty-link {
  display: inline-block;
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  padding: 0 0 2px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.live-empty-link:hover {
  color: var(--accent);
}

/* Hide old card/pill/container styles for these elements */


/* =========================================================================
   Homepage live matches — Bloomberg hairline row layout
   ========================================================================= */

/* Override grid to plain block */
.live-matches-grid {
  display: block !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  background: none !important;
}

/* Section spacing */
.live-matches-grouped .hlb-section {
  margin-bottom: 28px;
}
.live-matches-grouped .hlb-section:last-child {
  margin-bottom: 0;
}

/* Summary line */
.hlb-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  padding-bottom: 10px;
}

.hlb-summary-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 20px;
}

/* League header */
.hlb-league-header.sport-banner-tag {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: var(--text-muted) !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 0 8px 0 !important;
  margin: 0 0 0 0 !important;
}

/* Match-list container: capped width, centred, edge padding (spec) */
.live-matches-container {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 40px 40px 80px !important;
}
@media (max-width: 768px) {
  .live-matches-container { padding: 24px 16px 60px !important; }
  .hlb-row.live-card { grid-template-columns: 56px 1fr 100px 0px !important; column-gap: 8px !important; }
}
@media (max-width: 430px) {
  .hlb-row.live-card { grid-template-columns: 52px 1fr 80px 0px !important; column-gap: 6px !important; }
  .live-matches-container { padding: 0 12px !important; }
}
@media (max-width: 390px) {
  .hlb-row.live-card { grid-template-columns: 48px 1fr 72px 0px !important; column-gap: 6px !important; }
}
@media (max-width: 375px) {
  .live-matches-container { padding: 24px 10px 60px !important; }
  .hlb-row.live-card { grid-template-columns: 44px 1fr 68px 0px !important; column-gap: 4px !important; }
}
@media (max-width: 360px) {
  .live-matches-container { padding: 24px 8px 60px !important; }
  .hlb-row.live-card { grid-template-columns: 40px 1fr 64px 0px !important; column-gap: 4px !important; }
}

/* Match row — element is <a> for full-row click target */
.hlb-row.live-card {
  display: grid !important;
  grid-template-columns: 72px 1fr 180px 20px;
  align-items: start !important;
  column-gap: 16px;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
  /* reset card styles — override height:265px, overflow:hidden, background:#fff from .live-card */
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: unset !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
/* Kill inherited background from .live-card in dark theme */
html[data-theme="dark"] .hlb-row.live-card,
:root:not([data-theme="light"]) .hlb-row.live-card {
  background: none !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.hlb-row.live-card:hover {
  background-color: var(--hover) !important;
  box-shadow: none !important;
  transform: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

html[data-theme="dark"] .hlb-row.live-card:hover {
  background-color: var(--hover) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hlb-row.live-card:hover {
    background-color: var(--hover) !important;
  }
}

.hlb-time {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--match-draw);
  text-align: left;
  white-space: nowrap;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
.hlb-time--dim {
  color: var(--match-dim);
}
.hlb-time--split {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.hlb-time-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--match-draw);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


.hlb-teams {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.hlb-team-row {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--match-draw);
  scrollbar-width: none;
}

.hlb-team-row::-webkit-scrollbar {
  display: none;
}

.hlb-pname {
  min-width: 0;
}
@media (prefers-color-scheme: dark) {
}

/* live score column — football/other: single line */
.hlb-score {
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--match-draw);
  text-align: right;
  white-space: nowrap;
}

/* tennis: two rows of per-set digits, one per player */
.hlb-score--sets {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  align-self: center;
}
.hlb-score-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1.6ch;
  column-gap: 5px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hlb-set-cell {
  text-align: right;
}

.hlb-dot {
  grid-column: 4;
  justify-self: end;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Serving indicator: teal ● first, before flag */
.hlb-serve-dot {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  line-height: 1;
}

.serving-dot {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex-shrink: 0;
  margin: 0 3px;
}
.hero-game-serve-ball {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Match detail hero serve dot */
.hero-serve-dot {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

/* Transparent placeholder — same size as dot — keeps non-serving name aligned */
.hlb-serve-placeholder {
  display: inline-block;
  width: 11px;
  height: 11px;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Tennis player flag: 12px inline image at 80% opacity, after dot */
.hlb-flag {
  display: inline-block;
  width: 12px;
  height: 12px;
  object-fit: cover;
  border-radius: 1px;
  opacity: 0.8;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Football team crest: 20px inline image */
.hlb-crest {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Suppress old card interior elements inside hlb-row */
.hlb-row .live-card-overlay,
.hlb-row .live-card-content,
.hlb-row .card-header-row,
.hlb-row .card-body-row,
.hlb-row .card-footer-row { display: none !important; }

/* ==========================================================================
   Today page — Bloomberg discipline rows (Step 83)
   ========================================================================== */

/* Hide the sport-level banner tag — used only for JS sport-filter identification */
.tday-sport-tag {
  display: none !important;
}

/* Matches grid is now a block, not grid */
.today-matches-grid {
  display: block !important;
}

/* ---------- League section / collapse ---------- */

/* ---------- Match-list container: capped width, centred, edge padding ---------- */
/* Everything in the list (live strip, filter line, section headers, rows,
   more-leagues link) shares this width. No child adds its own horizontal
   padding — all breathing room comes from here. */
.tday-main-col {
  width: 100%;
  padding-left: 15px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .tday-main-col { padding-left: 15px; }
  .tday-row { grid-template-columns: 56px 1fr 100px 0px; column-gap: 8px; }
  .tday-league-header { grid-template-columns: 1fr 80px 20px; column-gap: 10px; }
}

.tday-league-section {
  border-bottom: 1px solid var(--border);
  /* paragraph break between groups is the header's 24px top padding */
}

.tday-league-section:last-child {
  border-bottom: none;
}

.tday-league-header {
  display: grid;
  grid-template-columns: 1fr 180px 20px;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  padding: 24px 15px 8px 15px;   /* 15px side padding matches match rows */
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: var(--match-dim);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}

.tday-league-header:hover {
  color: var(--text-soft);
}

.tday-league-name {
  grid-column: 1;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--match-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tday-live-dot {
  grid-column: 2;
  justify-self: start;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.tday-league-meta {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  font-size: 10px;
  font-weight: 500;
  color: var(--match-dim);
  font-family: var(--font-mono);
}

.tday-league-chevron {
  grid-column: 3;
  justify-self: end;
  width: 12px;
  height: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tday-league-chevron::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
  margin-top: -3px;
}

.tday-league-expanded .tday-league-chevron::before {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* Collapsed by default: rows hidden */
.tday-league-rows {
  display: none;
}

/* Expanded state: show rows — 8px below the header hairline to the first row */
.tday-league-expanded .tday-league-rows {
  display: block;
  padding-top: 8px;
}

/* ---------- Match rows ---------- */

.tday-row {
  display: grid !important;
  /* score track: 180px normally (aligns every row), grows leftward only for a
     wider score — e.g. a best-of-5 tennis match — while its right edge stays
     anchored; the teams track (min-width:0) absorbs it and ellipsis-truncates. */
  grid-template-columns: 72px minmax(0, 1fr) minmax(180px, max-content) 20px;
  align-items: center;
  column-gap: 16px;
  padding: 12px 15px 12px 15px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  transition: background 0.1s;
}

/* Hairline between rows within a group (not above the first) */
.tday-league-rows .tday-row + .tday-row {
  border-top: 1px solid var(--border);
}

.tday-row:hover {
  background: var(--hover) !important;
}

/* Suppress old card interior layout inside tday-row */
.tday-row .live-card-overlay,
.tday-row .live-card-content,
.tday-row .card-header-row,
.tday-row .card-body-section,
.tday-row .card-footer-row,
.tday-row .match-card-detail-link,
.tday-row .team-vs-layout,
.tday-row .singles-vs-layout,
.tday-row .doubles-vs-layout,
.tday-row .racing-layout,
.tday-row .racing-layout-today {
  display: none !important;
}

.tday-time {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--match-dim);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* Live game clock — time column stays 40% luminance in both modes (spec);
   teal is reserved for the imminent countdown and the live dot only.
   Weight 500 keeps the running clock legible at reduced luminance. */
.tday-time--live {
  color: var(--match-dim);
  font-weight: 500;
}

.tday-teams {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--match-draw);
  min-width: 0;
  overflow: hidden;
}

.tday-side {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}

.tday-side::-webkit-scrollbar {
  display: none;
}

.tday-side--home {
  justify-content: flex-end;
}

.tday-side--away {
  justify-content: flex-start;
}

/* Tennis live 1v1 — two-row stacked layout, same as homepage */
.tday-teams--tennis {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  gap: 3px;
  align-items: stretch;
}

.tday-vs {
  color: var(--match-dim);
  font-size: 11px;
  font-weight: 400;
}
.tday-pair-sep {
  color: var(--match-dim);
  font-size: 12px;
  font-weight: 400;
}

.tday-score {
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--match-draw);
  white-space: nowrap;
  text-align: right;
}

.tday-dot {
  grid-column: 4;
  justify-self: end;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Completed & live rows: name / score luminance is carried entirely by the
   .tday-name--winner|loser|draw and .tday-score--winner|loser|draw classes
   (winner encoding). No blanket muting here — it would flatten that signal.
   Only the leftover "vs" separator stays dim. */
.tday-row--done .tday-vs {
  color: var(--match-dim);
}

.tday-row--tennis,
.tday-row--football {
  align-items: start !important;
}

/* Countdown row inside score column — override the fixed-column grid so the text flows naturally */
.tday-score-row--countdown {
  display: block !important;
  text-align: right;
}
.tday-score--tennis-countdown {
  color: #3d8b8b;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Cap score column so countdown text never overflows the row */
.tday-row--tennis,
.tday-row--football {
  grid-template-columns: 72px minmax(0, 1fr) 180px 20px !important;
}

@media (max-width: 768px) {
  .tday-row--tennis,
  .tday-row--football { grid-template-columns: 56px 1fr 100px 0px !important; column-gap: 8px !important; }
}

@media (max-width: 430px) {
  .tday-row { grid-template-columns: 52px 1fr 80px 0px; column-gap: 6px; padding: 10px 12px !important; }
  .tday-row--tennis,
  .tday-row--football { grid-template-columns: 52px 1fr 80px 0px !important; column-gap: 6px !important; }
  .tday-league-header { grid-template-columns: 1fr 60px 16px; column-gap: 8px; padding: 16px 12px 8px 12px; }
  .tday-league-name { white-space: normal; line-height: 1.3; }
  .tday-main-col { padding-left: 12px; }
}

@media (max-width: 390px) {
  .tday-row { grid-template-columns: 48px 1fr 72px 0px; column-gap: 6px; }
  .tday-row--tennis,
  .tday-row--football { grid-template-columns: 48px 1fr 72px 0px !important; column-gap: 6px !important; }
  .tday-league-header { grid-template-columns: 1fr 60px 16px; column-gap: 8px; }
  .tday-league-name { white-space: normal; line-height: 1.3; }
}

@media (max-width: 375px) {
  .tday-row { grid-template-columns: 44px 1fr 68px 0px; column-gap: 4px; padding: 10px 10px !important; }
  .tday-row--tennis,
  .tday-row--football { grid-template-columns: 44px 1fr 68px 0px !important; column-gap: 4px !important; }
  .tday-league-header { grid-template-columns: 1fr 48px 0px; column-gap: 6px; padding: 16px 10px 8px 10px; }
  .tday-league-chevron { display: none !important; }
  .tday-dot { display: none !important; }
  .tday-main-col { padding-left: 10px; }
}
@media (max-width: 360px) {
  .tday-row { grid-template-columns: 40px 1fr 64px 0px; column-gap: 4px; padding: 10px 8px !important; }
  .tday-row--tennis,
  .tday-row--football { grid-template-columns: 40px 1fr 64px 0px !important; column-gap: 4px !important; }
  .tday-league-header { padding: 12px 8px 8px; }
  .tday-league-name { font-size: 9px; letter-spacing: 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tday-main-col { padding-left: 8px; }
  .tday-container, .schedule-container { padding: 0 8px; }
  .between-inner { min-width: unset; width: 100%; padding: 0 8px; }
  .week-day-card { min-width: 40px !important; }
  .week-day-number { font-size: 16px; }
  .week-day-name { font-size: 9px; }
  .set-score { font-size: 10px; padding: 2px 2px; min-width: 22px; }
  .set-label { font-size: 8px; padding: 0 4px 3px; min-width: 22px; }
  .player-label-cell { font-size: 9px; padding-right: 6px; }
  .stat-label { font-size: 8px; letter-spacing: 0.5px; }
}

@media (max-width: 375px) {
  .set-score { font-size: 11px; padding: 2px 3px; min-width: 24px; }
}

@media (max-width: 430px) {
  .set-score { font-size: 12px; padding: 2px 4px; min-width: 28px; }
  .set-label { font-size: 8px; padding: 0 4px 3px; min-width: 28px; }
  .player-label-cell { font-size: 9px; padding-right: 6px; }
}

@media (max-width: 412px) {
  .tday-row {
    grid-template-columns: 46px 1fr 76px 0px;
    column-gap: 5px;
  }
  .tday-row--tennis,
  .tday-row--football { grid-template-columns: 46px 1fr 76px 0px !important; column-gap: 5px !important; }
  .tday-league-name {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .week-day-cell {
    min-width: 42px;
  }
}


/* ── Schedule page: two-row football/tennis bars ── */

/* Two-row bars: hide sport icon, use today-page proportions (teams 1fr | score 180px) */
.match-bar--two-row {
  grid-template-columns: 0 minmax(0, 1fr) 180px 0 !important;
  align-items: start !important;
  column-gap: 0 !important;
  padding: 12px 15px !important;
}
.match-bar--two-row .match-bar-sport-icon {
  display: none !important;
}
.match-bar--two-row .match-bar-details {
  padding-right: 16px;
}
@media (max-width: 768px) {
  .match-bar--two-row {
    grid-template-columns: 0 minmax(0, 1fr) 140px 0 !important;
    padding: 10px 12px !important;
  }
}
@media (max-width: 430px) {
  .match-bar--two-row {
    grid-template-columns: 0 minmax(0, 1fr) 110px 0 !important;
    padding: 10px 10px !important;
  }
}
@media (max-width: 375px) {
  .match-bar--two-row {
    grid-template-columns: 0 minmax(0, 1fr) 88px 0 !important;
  }
}
@media (max-width: 360px) {
  .match-bar--two-row {
    grid-template-columns: 0 minmax(0, 1fr) 76px 0 !important;
    padding: 10px 8px !important;
  }
}

.mbr-teams {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1px;
}
.mbr-team-row {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
}
.mbr-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.mbr-flag {
  width: 12px;
  height: 9px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 1px;
}
.mbr-name {
  font-size: 14px;
  font-weight: 500;
}
.mbr-score--two-row {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  align-self: start;
  padding-top: 1px;
  overflow: hidden;
}
.mbr-score-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 1.3em;
  width: 100%;
}
/* Set score cells inside schedule two-row bars */
.mbr-score-row.hlb-score-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1.6ch;
  column-gap: 5px;
  justify-content: end;
}
.mbr-countdown-text {
  color: #3d8b8b;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Date rail temporal luminance ---------- */

.week-day-card.week-day-past {
  opacity: 0.4;
}

.week-day-card.week-day-future {
  opacity: 0.7;
}

/* Active/today cards always full opacity */
.week-day-card.active,
.week-day-card.today-card {
  opacity: 1 !important;
}

/* Week strip: no outer border, only bottom hairline; sticky below site header */
.week-strip-container,
.today-week-strip-container {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 73px !important;
  z-index: 50;
  background: var(--surface) !important;
}

/* Today active tab: teal underline */
.week-day-card.active.today-card {
  border-bottom: 2px solid var(--accent);
}


/* Override legacy .live-card styles when used as Bloomberg row */
.tday-row.live-card {
  min-height: 0 !important;
  height: auto !important;
  background-image: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 12px 0 !important;
}


/* ==========================================================================
   Today page — Live strip, Time window, Jump-to-now, Following toggle (Step 84)
   ========================================================================== */

/* Live Now strip */
.tday-live-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.tday-live-strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: tday-pulse 1.6s infinite;
}

@keyframes tday-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.tday-live-strip-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  flex: 1;
}

.tday-jump-now-btn {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 100;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.tday-jump-now-btn:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* Matches header (All / Following toggle) */
.tday-matches-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 15px 6px 15px;
}

.tday-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tday-filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 16px;
  text-decoration: none;
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tday-filter-btn.active {
  color: var(--text);
}

.tday-filter-btn:hover {
  color: var(--text-soft);
}

.tday-filter-sep {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* More leagues expand link */
#tday-more-leagues {
  padding: 12px 0 4px;
}

.tday-more-leagues-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.03em;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tday-more-leagues-btn:hover {
  color: var(--accent-dark);
}

/* Followed league header indicator */
.tday-hdr-followed .tday-league-name {
  color: var(--text-soft);
}

/* Following empty state */
.tday-following-empty {
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}


/* Prevent legacy centered-card centering from affecting Bloomberg rows */
.tday-row.centered-card,
.tday-league-rows .centered-card {
  width: 100% !important;
  margin: 0 !important;
  grid-column: auto !important;
  justify-self: auto !important;
  text-align: left !important;
}


/* Remove legacy next-upcoming highlight entirely from Bloomberg rows */
.tday-row.next-upcoming-highlight {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
}
.tday-league-rows .tday-row.next-upcoming-highlight + .tday-row,
.tday-league-rows .tday-row + .tday-row.next-upcoming-highlight {
  border-top: 1px solid var(--border) !important;
}
.tday-row [class*="next-up"] {
  display: none !important;
}


/* Suppress ::after NEXT UP pseudo-element on Bloomberg rows */
.tday-row.next-upcoming-highlight::after {
  display: none !important;
  content: none !important;
}


/* Today Bloomberg rows — 20px logo + round label (Step 90) */

.tday-logo {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

.tday-logo--flag {
  width: 12px;
  height: 12px;
  border-radius: 1px;
  opacity: 0.8;
}

.tday-row--done .tday-logo {
  opacity: 0.45;
}

.tday-league-round {
  color: var(--match-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.tday-time-round {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--match-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Inline logo alignment inside teams span (Step 91).
   gap:0 — spacing is set per-element so each flag/logo hugs the name it labels
   and the gaps between players and sides are deliberate, not uniform. */
/* (tday-teams canonical definition is above; this block adds logo margin rules) */

.tday-teams .tday-logo {
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 8px;          /* club crest → its team name */
}

.tday-teams .tday-logo--flag {
  margin-right: 6px;          /* flag → its player / country name */
}

/* "vs" between the two sides */
.tday-vs { margin: 0 10px; }

/* mid-dot between doubles partners */
.tday-pair-sep { margin: 0 6px; }

/* ── Match score-column luminance encoding (v98) ──
   ONE standard, every page (/, /today, /schedule). Three tiers + teal:
   full  = winner / live leader / won side          (100%)
   draw  = both names when upcoming/imminent/soon/tied/drawn   (70%)
   dim   = losing side · match-time · FT · section headers      (40%)
   live  = teal, live + imminent + soon states + live dot only  */
:root {
  --match-full: #1a1714;
  --match-dim:  #9a9590;
  --match-draw: #363230;
  --match-live: #3d8b8b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --match-full: #ede9e4;
    --match-dim:  #7a7672;
    --match-draw: #a09890;
  }
}
:root[data-theme="dark"] {
  --match-full: #ede9e4;
  --match-dim:  #7a7672;
  --match-draw: #a09890;
}

.tday-name { display: inline; }
.tday-name--winner { color: var(--match-full) !important; }
.tday-name--loser  { color: var(--match-dim)  !important; }
.tday-name--draw   { color: var(--match-draw) !important; }

.tday-score--winner { color: var(--match-full) !important; }
.tday-score--loser  { color: var(--match-dim)  !important; }
.tday-score--draw   { color: var(--match-draw) !important; }

/* Score column — upcoming (—) 40% · imminent (in Xm) / soon → teal */
.tday-score-countdown { font-weight: 400; }
.tday-score--upcoming { color: var(--match-dim)  !important; font-weight: 400; }
.tday-score--imminent { color: var(--match-live) !important; font-weight: 500; }

/* FT label at 40% luminance */
.tday-time--done { color: var(--match-dim); }

/* ===== Shared score-column classes — usable on any page (/, /schedule) ===== */
.mscore {
  font-family: var(--font-mono, 'IBM Plex Mono', 'SF Mono', Consolas, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  color: var(--match-draw);
}
.mscore--win      { color: var(--match-full)  !important; }
.mscore--lose     { color: var(--match-dim)   !important; }
.mscore--draw     { color: var(--match-draw)  !important; }
.mscore--upcoming { color: var(--match-dim)   !important; font-weight: 400; }
.mscore--imminent { color: var(--match-live)  !important; font-weight: 500; }
.mname--win  { color: var(--match-full) !important; }
.mname--lose { color: var(--match-dim)  !important; }
.mname--draw { color: var(--match-draw) !important; }

/* Flag variant: 12px at 80% opacity (singles, doubles, international teams) */
.tday-logo--flag {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.8;
  border-radius: 1px;
  object-fit: cover;
}


/* Schedule page dark mode — raised text luminance */
html[data-theme="dark"] .schedule-today-page {
  --text: #f0ece8;
  --text-soft: #c8c0b8;
  --text-muted: #7a7672;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .schedule-today-page {
    --text: #f0ece8;
    --text-soft: #c8c0b8;
    --text-muted: #7a7672;
  }
}

/* Current set / live phase indicator — always teal, all themes */
.hero-tennis-phase,
.current-set-label,
.active-set-indicator,
[class*="current-set"],
[class*="active-set"],
[class*="set-indicator"] {
  color: #3d8b8b !important;
}

/* FIX 3 — Theme toggle and search back button touch targets */
.theme-toggle-btn,
.search-popup-back-btn {
  min-height: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

/* FIX 9 — Mobile touch targets */
/* League card rows: 48px minimum height */
.league-card {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

/* Section header — dot before match count, universal (no media query scoping) */
.tday-league-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tday-league-name {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 4px !important;
  grid-column: unset !important;
}

.tday-live-dot {
  flex-shrink: 0 !important;
  grid-column: unset !important;
  justify-self: unset !important;
  order: 2; /* dot before meta */
}

.tday-league-meta {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  text-align: left !important;
  grid-column: unset !important;
  justify-self: unset !important;
  order: 3;
}

.tday-league-chevron {
  flex-shrink: 0 !important;
  grid-column: unset !important;
  justify-self: unset !important;
  display: flex !important;
  order: 4;
}

/* Sport filter pills — plain inline tab treatment, no card/border/background */
.sidebar-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px 10px !important;
  min-height: 48px !important;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .sidebar-item {
  color: var(--text-muted) !important;
}

.sidebar-item:hover {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-soft) !important;
}

html[data-theme="dark"] .sidebar-item:hover {
  color: var(--text-soft) !important;
}

/* Active — full text + teal underline only */
.sidebar-item.active,
.sports-sidebar-horizontal .sidebar-item.active,
html[data-theme="dark"] .sidebar-item.active,
html[data-theme="dark"] .sports-sidebar-horizontal .sidebar-item.active {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

.sidebar-item.active::after,
.sports-sidebar-horizontal .sidebar-item.active::after {
  content: none;
}

/* Active sport: icon box highlight */
.sports-sidebar-horizontal .sidebar-item.active .sidebar-icon {
  background: var(--accent-soft) !important;
  border-radius: 6px !important;
  padding: 4px !important;
  width: 28px !important;
  height: 28px !important;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Active sport: full-brightness icon + accent label; inactive: dimmed */
.sports-sidebar-horizontal .sidebar-item .sidebar-icon-img,
.sports-sidebar-horizontal .sidebar-item .sidebar-icon-emoji,
.sports-sidebar-horizontal .sidebar-item .sidebar-icon-emoji svg,
.sports-sidebar-horizontal .sidebar-item .sidebar-icon-emoji img {
  opacity: 0.35;
  transition: opacity 0.15s;
}
.sports-sidebar-horizontal .sidebar-item.active .sidebar-icon-img,
.sports-sidebar-horizontal .sidebar-item.active .sidebar-icon-emoji,
.sports-sidebar-horizontal .sidebar-item.active .sidebar-icon-emoji svg,
.sports-sidebar-horizontal .sidebar-item.active .sidebar-icon-emoji img {
  opacity: 1 !important;
}
.sports-sidebar-horizontal .sidebar-item .sidebar-label {
  opacity: 0.45;
  transition: opacity 0.15s;
}
.sports-sidebar-horizontal .sidebar-item.active .sidebar-label {
  opacity: 1;
  color: var(--text) !important;
}
.sports-sidebar-horizontal .sidebar-item:hover .sidebar-icon-img,
.sports-sidebar-horizontal .sidebar-item:hover .sidebar-icon-emoji,
.sports-sidebar-horizontal .sidebar-item:hover .sidebar-label {
  opacity: 0.7;
}

/* Date rail week cells: 44px minimum width */
.week-day-card {
  min-width: 44px !important;
}

/* Result label (Ret., W/O, etc.): position:absolute keeps it out of flow so it
   never adds height to .hero-team and misaligns flags. */
.dashboard-hero-card.themed-hero-card .hero-team {
  position: relative;
}
.dashboard-hero-card.themed-hero-card .hero-result-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Match detail header — vertical stacking at mobile */
@media (max-width: 480px) {
  .match-hero-matchup {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .matchup-name {
    font-size: 13px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 140px !important;
  }

  .matchup-crest {
    width: 40px !important;
    height: 40px !important;
  }

  .matchup-crest img {
    width: 28px !important;
    height: 28px !important;
  }

  .matchup-avatar {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 360px) {
  .matchup-name {
    font-size: 12px !important;
    max-width: 120px !important;
  }

  .matchup-crest {
    width: 32px !important;
    height: 32px !important;
  }

  .matchup-crest img {
    width: 22px !important;
    height: 22px !important;
  }

  .matchup-avatar {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Month label above date rail */
.week-month-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0 4px;
  text-align: left;
  width: 100%;
  line-height: 1;
  min-height: 1em;
}