/* ============================================================
   Visual refinement layer
   ============================================================ */

body {
  background:
    radial-gradient(1200px 700px at 8% -8%, color-mix(in oklch, var(--accent) 10%, var(--bg)) 0%, transparent 58%),
    radial-gradient(900px 520px at 96% 0%, color-mix(in oklch, var(--surface-2) 65%, transparent) 0%, transparent 62%),
    var(--bg);
  letter-spacing: -0.004em;
}

html[data-theme='dark'] body {
  background: #141d2c;
  background-color: #141d2c;
}

html[data-theme='dark'] {
  background-color: #141d2c;
}

.app {
  width: min(1120px, calc(100vw - 2rem));
}

.card,
.site-header,
.filters,
.calendar-overview,
.map-overview,
.race-card-new,
.calendar-month,
.calendar-tooltip,
.map-container .leaflet-popup-content-wrapper,
.map-popup-race,
.calendar-tooltip-item {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header,
.filters,
.calendar-overview,
.map-overview {
  border-radius: 14px;
}

.site-header::before {
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent-strong) 84%, transparent),
    color-mix(in oklch, var(--accent) 26%, transparent) 65%,
    transparent
  );
}

.header-title {
  letter-spacing: -0.038em;
  font-size: clamp(1.22rem, 2.7vw, 1.72rem);
}

.header-subtitle {
  font-size: 0.66rem;
  letter-spacing: 0.038em;
  color: color-mix(in srgb, var(--text-soft) 56%, var(--muted));
}

.live-badge {
  background: color-mix(in oklch, var(--accent) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.theme-toggle-btn {
  border-color: color-mix(in oklch, var(--border-strong) 82%, transparent);
}

.ticker-row {
  background: color-mix(in oklch, var(--surface-2) 72%, var(--surface));
}

.ticker-item-link:hover .ticker-item-name,
.ticker-item-link:focus-visible .ticker-item-name {
  color: var(--accent-strong);
}

.filters {
  background: color-mix(in oklch, var(--surface) 93%, transparent);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}

.filters::before {
  opacity: 0.5;
}

input[type='search'],
.multi-dropdown > summary,
.distance-buttons,
.clear-filters-btn,
.favorites-filter-btn,
.results-filter-btn,
.calendar-filter-btn,
.map-filter-btn {
  background: color-mix(in oklch, var(--surface-2) 84%, var(--surface));
  border-color: var(--border);
}

input[type='search'] {
  font-size: 0.92rem;
}

input[type='search']:focus,
.multi-dropdown[open] > summary {
  border-color: color-mix(in oklch, var(--accent) 58%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.distance-buttons {
  border-radius: 10px;
}

.distance-filter-btn {
  font-size: 12.2px;
}

.distance-filter-btn.active {
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  box-shadow: 0 1px 2px color-mix(in srgb, #0f172a 18%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--accent) 34%, var(--border));
}

.month-divider-label {
  font-size: 1.22rem;
  letter-spacing: -0.028em;
}

.month-divider-count {
  background: color-mix(in oklch, var(--surface-2) 88%, var(--surface));
}

.race-card-new {
  background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--surface) 92%, transparent) 0%,
      color-mix(in oklch, var(--surface-2) 62%, var(--surface)) 100%
    );
  border-color: color-mix(in oklch, var(--border-strong) 60%, var(--border));
  border-radius: 12px;
}

.race-card-new:hover {
  border-color: color-mix(in oklch, var(--accent) 30%, var(--border-strong));
  box-shadow: var(--shadow-md);
}

.card-name {
  font-size: 1.02rem;
  line-height: 1.25;
}

.card-title-link {
  color: color-mix(in oklch, var(--accent-strong) 94%, var(--text));
}

.card-title-link:visited {
  color: color-mix(in oklch, var(--accent-strong) 90%, var(--text));
}

.card-title-link:hover,
.card-title-link:focus-visible {
  color: var(--text);
}

.card-location {
  margin-top: 0.05rem;
}

.card-footer {
  border-top-color: color-mix(in oklch, var(--border-strong) 72%, transparent);
}

.distance-tag {
  font-size: 0.57rem;
  border-color: color-mix(in srgb, var(--border-strong) 78%, transparent);
}

.favorite-btn {
  border-color: color-mix(in oklch, var(--border-strong) 75%, var(--border));
}

.card-btn,
.calendar-tooltip-item-link,
.map-popup-link {
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
  color: var(--accent-strong);
}

.card-btn:hover,
.calendar-tooltip-item-link:hover,
.map-popup-link:hover {
  background: color-mix(in oklch, var(--accent) 20%, var(--surface));
  border-color: var(--accent-strong);
  color: var(--text);
}

.calendar-month-title,
.map-popup-name-primary {
  color: color-mix(in oklch, var(--accent-strong) 84%, var(--text));
}

.calendar-day-cell--interactive {
  border-color: color-mix(in oklch, var(--border-strong) 68%, var(--border));
}

.calendar-day-cell--interactive:hover {
  border-color: color-mix(in oklch, var(--accent) 34%, var(--border));
}

.map-container {
  border-color: var(--border-strong);
}

.map-container .leaflet-control-zoom a {
  border-color: var(--border);
  background: color-mix(in oklch, var(--surface) 92%, var(--surface-2));
}

.map-popup-race,
.calendar-tooltip-item {
  border-color: color-mix(in oklch, var(--border-strong) 70%, var(--border));
  background: color-mix(in oklch, var(--surface-2) 82%, var(--surface));
}

.empty,
.error {
  border-color: var(--border);
  background: color-mix(in oklch, var(--surface) 92%, var(--surface-2));
}

/* tighten mobile rhythm while preserving your existing layout behavior */
@media (max-width: 640px) {
  .app {
    width: min(100%, calc(100vw - 1rem));
  }

  .header-title {
    font-size: clamp(0.98rem, 4.7vw, 1.16rem);
  }

  .distance-filter-btn {
    font-size: 10.8px;
  }
}