/* SpotPump — modern, responsive UI */

/* Defaults shared by both themes */
:root {
  --accent: #34d399;
  --accent-2: #22c55e;
  --accent-warm: #fbbf24;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --maxw: 1200px;
  /* Display font for brand + headers; Inter stays the body default */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Brand mark + section/modal headers + hero/error display headlines */
.brand h1,
.hero-headline,
.results-meta h2,
.modal-header h2,
.error-title,
.welcome-card h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Dark theme */
:root,
[data-theme='dark'] {
  --bg: #0b0f1a;
  --bg-2: #0f1424;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e8ecf6;
  --text-dim: #aab1c4;
  --text-faint: #7c8398;
  --danger: #f87171;
  --price-text: var(--accent);
  --popup-bg: #131827;
  --popup-text: var(--text);
  --map-bg: #1a2030;
  --marker-ring: #0b0f1a;
  --bg-grad-1: rgba(52, 211, 153, 0.18);
  --bg-grad-2: rgba(99, 102, 241, 0.16);
  --bg-grad-base: linear-gradient(180deg, #0b0f1a 0%, #0a0d18 100%);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --tile-filter: none;
}

/* Light theme */
[data-theme='light'] {
  --bg: #f7f8fb;
  --bg-2: #ffffff;
  --surface: rgba(15, 20, 36, 0.03);
  --surface-2: rgba(15, 20, 36, 0.06);
  --border: rgba(15, 20, 36, 0.08);
  --border-strong: rgba(15, 20, 36, 0.16);
  --text: #1a1f2e;
  --text-dim: #4a5168;
  --text-faint: #7c8398;
  --danger: #dc2626;
  --price-text: #16a34a;
  --popup-bg: #ffffff;
  --popup-text: #1a1f2e;
  --map-bg: #e6e9ef;
  --marker-ring: #ffffff;
  --bg-grad-1: rgba(52, 211, 153, 0.14);
  --bg-grad-2: rgba(99, 102, 241, 0.10);
  --bg-grad-base: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  --shadow-lg: 0 20px 60px rgba(15, 20, 36, 0.10);
  --shadow-md: 0 8px 24px rgba(15, 20, 36, 0.06);
  --tile-filter: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  overflow-x: hidden;            /* belt-and-suspenders: never scroll sideways */
}

html { -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, var(--bg-grad-2), transparent 60%),
    var(--bg-grad-base);
  min-height: 100dvh;
  transition: background 240ms ease, color 240ms ease;
}

button { font-family: inherit; }

/* ---------- Layout ---------- */

.app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 20px 64px;
  /* Respect iOS safe areas (notch / home indicator) */
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

@media (min-width: 768px) {
  .app { padding: 36px 32px 80px; }
}

/* ---------- Hero ---------- */

.hero {
  margin-bottom: 28px;
}

.hero-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
  .hero-inner { padding: 44px 40px; }
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;            /* allow children to shrink instead of overflowing */
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.brand h1 {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-toggle {
  flex-shrink: 0;           /* never get squeezed by the brand */
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 80ms ease;
}

.theme-toggle:active { transform: scale(0.96); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 200ms ease, border-color 200ms ease;
}

.theme-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  transition: color 200ms ease, opacity 200ms ease;
}

.theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease;
  z-index: 0;
}

/* Dark theme: thumb on the right (covers moon), sun visible */
[data-theme='dark'] .theme-toggle-thumb { left: calc(100% - 27px); }
[data-theme='dark'] .theme-icon-sun { color: var(--accent); opacity: 1; }
[data-theme='dark'] .theme-icon-moon { color: var(--text-faint); opacity: 0.45; }

/* Light theme: thumb on the left (covers sun), moon visible */
[data-theme='light'] .theme-toggle-thumb { left: 3px; }
[data-theme='light'] .theme-icon-sun { color: var(--text-faint); opacity: 0.45; }
[data-theme='light'] .theme-icon-moon { color: #475569; opacity: 1; }

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #0b0f1a;
  box-shadow: 0 8px 20px rgba(52, 211, 153, 0.35);
}

.brand h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.brand-accent {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
  .brand h1 { font-size: 38px; }
  .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
  .brand-mark svg { width: 24px; height: 24px; }
}

/* Hero headline + subtitle — replaces the old tiny tagline with a more
   confident, marketing-page presence. */
.hero-headline {
  margin: 22px 0 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  max-width: 22ch;
}
.hero-subtitle {
  margin: 0 0 24px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 56ch;
}

@media (min-width: 768px) {
  .hero-headline { font-size: 34px; margin: 28px 0 10px; }
  .hero-subtitle { font-size: 16px; margin-bottom: 28px; }
}

@media (max-width: 480px) {
  .hero-headline { font-size: 20px; margin: 18px 0 6px; max-width: 24ch; }
  .hero-subtitle { font-size: 13.5px; margin-bottom: 18px; }
}

/* ---------- Search ---------- */

.search {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: fit-content;
  flex-wrap: wrap;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 80ms ease;
}

.tab:hover { color: var(--text); }
.tab:active { transform: scale(0.97); }

.tab.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(34, 197, 94, 0.14));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.4);
}

.search-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 560px) {
  .search-row {
    grid-template-columns: 1fr auto;
  }
}

.search-input-wrap {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--popup-bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
}

.suggestion {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  transition: background 120ms ease;
}

.suggestion:hover,
.suggestion.is-active {
  background: var(--surface-2);
}

.suggestion-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.suggestion-text { min-width: 0; flex: 1; }

.suggestion-primary {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-secondary {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-input::placeholder { color: var(--text-faint); }

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
}

.search-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.search-btn {
  position: relative;
  padding: 14px 22px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #06251a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(52, 211, 153, 0.35);
  transition: transform 80ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.search-btn:hover { filter: brightness(1.05); }
.search-btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(52, 211, 153, 0.25); }
.search-btn:disabled { cursor: progress; opacity: 0.85; }

.search-btn .btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #06251a;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
  margin-left: 8px;
  vertical-align: -3px;
}

.search-btn.is-loading .btn-spinner { display: inline-block; }
.search-btn.is-loading .btn-label { opacity: 0.7; }

@keyframes spin { to { transform: rotate(360deg); } }

.hero-status {
  margin: 14px 0 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--text-faint);
}
.hero-status.is-error { color: var(--danger); }

/* ---------- Market signal card ---------- */

.market-signal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  /* Defaults — overridden by data-confidence below. The market-signal card's
     icon, left border, and header label all read from these so they stay in
     sync with the confidence chip color. */
  --tone-line: var(--text-faint);
  --tone-bg: var(--surface-2);
  --conf-line: var(--tone-line);
  --conf-bg: var(--tone-bg);
  border-left-width: 4px;
  border-left-color: var(--conf-line);
  transition: border-color 320ms ease, background 320ms ease;
}

.market-signal-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--conf-bg);
  color: var(--conf-line);
  transition: background 320ms ease, color 320ms ease;
}
.market-signal-body {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}
.market-signal-head { max-width: 100%; }
.market-signal-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--label-color, var(--tone-line));
  margin-bottom: 4px;
  transition: color 200ms ease;
}

/* Confidence drives the entire visual identity of the card:
   header label color, icon stroke + tile, and the left accent border. */
.market-signal[data-confidence='high'] {
  --label-color: #16a34a;
  --conf-line: #16a34a;
  --conf-bg: rgba(34, 197, 94, 0.14);
}
.market-signal[data-confidence='medium'] {
  --label-color: #b45309;
  --conf-line: #b45309;
  --conf-bg: rgba(245, 158, 11, 0.14);
}
.market-signal[data-confidence='low'] {
  --label-color: #64748b;
  --conf-line: #64748b;
  --conf-bg: rgba(148, 163, 184, 0.14);
}
[data-theme='dark'] .market-signal[data-confidence='high'] {
  --label-color: #34d399;
  --conf-line: #34d399;
}
[data-theme='dark'] .market-signal[data-confidence='medium'] {
  --label-color: #fbbf24;
  --conf-line: #fbbf24;
}
[data-theme='dark'] .market-signal[data-confidence='low'] {
  --label-color: #94a3b8;
  --conf-line: #94a3b8;
}
.market-signal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Chip group sits beside the verdict at desktop widths. On narrow screens
   it wraps to its own row below the verdict, and at really tiny widths
   the chips themselves stack vertically — guarantees no overflow into
   the page margins regardless of the verdict's length. */
.market-signal-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: 100%;
  min-width: 0;
}
.market-signal-verdict {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Confidence chip — color-coded by signal strength (green/amber/gray),
   independent of the verdict's tone. Also a tooltip trigger that surfaces
   the verdict reasoning. */
.conf-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--conf-bg, var(--surface-2));
  color: var(--conf-text, var(--text-dim));
  border: 1px solid var(--conf-border, var(--border-strong));
  cursor: help;
  outline: none;
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
}
.conf-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--conf-dot, #94a3b8);
  box-shadow: 0 0 0 2px var(--conf-glow, transparent);
  transition: background 320ms ease, box-shadow 320ms ease;
}
.conf-chip:focus-visible {
  box-shadow: 0 0 0 3px var(--conf-glow, rgba(148, 163, 184, 0.25));
}

/* Confidence levels — same green/yellow/gray palette as the vol chip,
   so users can read both chips with the same mental model. */
.conf-chip.conf-high {
  --conf-dot: #22c55e;
  --conf-glow: rgba(34, 197, 94, 0.18);
  --conf-border: rgba(34, 197, 94, 0.35);
  --conf-bg: rgba(34, 197, 94, 0.10);
  --conf-text: #16a34a;
}
.conf-chip.conf-medium {
  --conf-dot: #f59e0b;
  --conf-glow: rgba(245, 158, 11, 0.18);
  --conf-border: rgba(245, 158, 11, 0.35);
  --conf-bg: rgba(245, 158, 11, 0.10);
  --conf-text: #b45309;
}
[data-theme='dark'] .conf-chip.conf-medium { --conf-text: #fbbf24; }
.conf-chip.conf-low {
  --conf-dot: #94a3b8;
  --conf-glow: rgba(148, 163, 184, 0.18);
  --conf-border: rgba(148, 163, 184, 0.30);
  --conf-bg: rgba(148, 163, 184, 0.10);
  --conf-text: #64748b;
}
[data-theme='dark'] .conf-chip.conf-low { --conf-text: #94a3b8; }
/* Reuse .vol-tip styling — appears on hover/focus of the confidence chip */
.conf-chip:hover .vol-tip,
.conf-chip:focus .vol-tip,
.conf-chip:focus-within .vol-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Volatility traffic-light chip — green / yellow / red */
.vol-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--vol-border, var(--border-strong));
  background: var(--vol-bg, var(--surface-2));
  color: var(--vol-text, var(--text-dim));
  cursor: help;
  outline: none;
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
}
.vol-chip:focus-visible {
  box-shadow: 0 0 0 3px var(--vol-glow, rgba(148, 163, 184, 0.25));
}
.vol-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vol-dot, #94a3b8);
  box-shadow: 0 0 0 2px var(--vol-glow, transparent);
  transition: background 320ms ease, box-shadow 320ms ease;
}

/* Themed tooltip on the volatility chip */
.vol-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--popup-bg);
  color: var(--popup-text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
.vol-tip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-bottom-color: var(--border-strong);
}
.vol-tip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 17px;
  margin-bottom: -1px;
  border: 5px solid transparent;
  border-bottom-color: var(--popup-bg);
}
.vol-chip:hover .vol-tip,
.vol-chip:focus .vol-tip,
.vol-chip:focus-within .vol-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.vol-tip-head {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vol-text, var(--text));
}
.vol-tip-body { color: var(--text-dim); }
.vol-tip-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* On phones, "tooltip" turns into a fixed-position bottom sheet — guarantees
   it never clips off-screen and is comfortably tappable. The arrow tail
   doesn't make sense when not anchored to the chip, so we hide it. */
@media (max-width: 480px) {
  .vol-tip {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    border-radius: 14px;
    padding: 14px 16px;
    z-index: 2500;                 /* above the modals' 2000 baseline */
    transform: translateY(12px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45), var(--shadow-lg);
  }
  .vol-tip::before,
  .vol-tip::after { display: none; }
  .vol-chip:hover .vol-tip,
  .vol-chip:focus .vol-tip,
  .vol-chip:focus-within .vol-tip,
  .conf-chip:hover .vol-tip,
  .conf-chip:focus .vol-tip,
  .conf-chip:focus-within .vol-tip {
    transform: translateY(0);
  }
  .vol-tip-head { font-size: 13.5px; }
  .vol-tip-body { font-size: 13px; line-height: 1.5; }
}
.vol-chip.vol-low {
  --vol-dot: #22c55e;
  --vol-glow: rgba(34, 197, 94, 0.18);
  --vol-border: rgba(34, 197, 94, 0.35);
  --vol-bg: rgba(34, 197, 94, 0.10);
  --vol-text: #16a34a;
}
.vol-chip.vol-medium {
  --vol-dot: #f59e0b;
  --vol-glow: rgba(245, 158, 11, 0.18);
  --vol-border: rgba(245, 158, 11, 0.35);
  --vol-bg: rgba(245, 158, 11, 0.10);
  --vol-text: #b45309;
}
[data-theme='dark'] .vol-chip.vol-medium { --vol-text: #fbbf24; }
.vol-chip.vol-high {
  --vol-dot: #ef4444;
  --vol-glow: rgba(239, 68, 68, 0.18);
  --vol-border: rgba(239, 68, 68, 0.35);
  --vol-bg: rgba(239, 68, 68, 0.10);
  --vol-text: #dc2626;
}
[data-theme='dark'] .vol-chip.vol-high { --vol-text: #f87171; }
.market-signal-reasoning {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.market-signal-reasoning strong {
  color: var(--text);
  font-weight: 600;
}

/* Small hint shown under the chips */
.market-signal-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
}

/* Shared "Updated [date]" stamp — used everywhere EIA data is rendered so
   users always see how fresh the data is. */
.data-asof {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.01em;
  width: fit-content;
}
.data-asof::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2);
}
.data-asof.is-stale::before {
  background: var(--accent-warm);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

/* "How this works" expandable */
.market-signal-help {
  margin-top: 10px;
  font-size: 12px;
}
.market-signal-help summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-faint);
  font-weight: 500;
  list-style: none;
  user-select: none;
  padding: 2px 0;
  transition: color 140ms ease;
}
.market-signal-help summary::-webkit-details-marker { display: none; }
.market-signal-help summary::before {
  content: '▸';
  font-size: 10px;
  display: inline-block;
  transition: transform 160ms ease;
}
.market-signal-help[open] summary::before { transform: rotate(90deg); }
.market-signal-help summary:hover { color: var(--text-dim); }
.market-signal-help[open] summary { color: var(--text-dim); margin-bottom: 6px; }
.market-signal-help p {
  margin: 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.55;
}
.market-signal-help strong { color: var(--text-dim); font-weight: 600; }

/* Sectioned help content — bullets per topic */
.market-signal-help .help-section {
  margin-bottom: 10px;
}
.market-signal-help .help-section h4 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.market-signal-help ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
}
.market-signal-help ul li { margin-bottom: 3px; }
.market-signal-help ul li::marker { color: var(--text-faint); }
.market-signal-help .help-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-faint);
}
.help-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.05);
}
.help-dot.dot-green { background: #22c55e; }
.help-dot.dot-yellow { background: #f59e0b; }
.help-dot.dot-red { background: #ef4444; }

/* Tone variants */
.market-signal.tone-urgent {
  --tone-line: #ef4444;          /* red-500 */
  --tone-bg: rgba(239, 68, 68, 0.12);
}
.market-signal.tone-caution {
  --tone-line: #f59e0b;          /* amber-500 */
  --tone-bg: rgba(245, 158, 11, 0.14);
}
.market-signal.tone-neutral {
  --tone-line: #94a3b8;          /* slate-400 */
  --tone-bg: rgba(148, 163, 184, 0.14);
}
.market-signal.tone-wait {
  --tone-line: #16a34a;          /* green-600 */
  --tone-bg: rgba(34, 197, 94, 0.14);
}

@media (max-width: 480px) {
  .market-signal { padding: 10px 12px; gap: 10px; }
  .market-signal-icon { width: 26px; height: 26px; }
  .market-signal-icon svg { width: 15px; height: 15px; }
  .market-signal-verdict { font-size: 13.5px; }
  .market-signal-reasoning { font-size: 12px; }
  .market-signal-hint { font-size: 11px; margin-top: 4px; }
  .market-signal-help { margin-top: 6px; }
  .market-signal-label { margin-bottom: 2px; }

  /* Chips already wrap by default; just trim them down a bit on mobile. */
  .conf-chip,
  .vol-chip {
    padding: 2px 7px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    gap: 5px;
    max-width: 100%;
  }
  .conf-chip::before,
  .vol-chip::before {
    width: 6px;
    height: 6px;
  }
}

/* Final-fallback for very narrow phones: stack the chips vertically so they
   can never extend past the card. Each chip becomes its own row at full width. */
@media (max-width: 400px) {
  .market-signal-chips {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .conf-chip,
  .vol-chip {
    align-self: flex-start;
  }
}

/* ---------- Action pills (row) ---------- */

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}
.action-pill:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.action-pill:active { transform: scale(0.97); }
.action-pill svg { color: var(--accent); }

/* Small "WIP" / status tag inside an action pill */
.action-pill-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 2px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
[data-theme='dark'] .action-pill-tag { color: #fbbf24; }

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: modalFade 200ms ease;
}
[data-theme='light'] .modal-backdrop { background: rgba(15, 20, 36, 0.4); }

.modal-card-wide { max-width: 720px !important; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 40px);
  background: var(--popup-bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalRise 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.modal-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

.modal-body {
  padding: 14px 22px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rank-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  transition: background 140ms ease;
}
.rank-row:hover { background: var(--surface-2); }
.rank-row .rank-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-faint);
  text-align: center;
}
/* Top 3 in modal get podium-shaped badges */
.rank-row.is-top .rank-num {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.rank-row.is-top:nth-child(1) .rank-num {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #2b1d00;
}
.rank-row.is-top:nth-child(2) .rank-num {
  background: linear-gradient(135deg, #f1f5f9, #94a3b8);
  color: #0f172a;
}
.rank-row.is-top:nth-child(3) .rank-num {
  background: linear-gradient(135deg, #fdba74, #b45309);
  color: #3d1500;
}
.rank-row .rank-name {
  font-weight: 500;
  color: var(--text);
}
.rank-row .rank-price {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--price-text);
  letter-spacing: -0.01em;
}

.modal-foot {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.5;
}
.modal-foot a { color: var(--text-dim); }
/* News list */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.news-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  transition: background 140ms ease, transform 80ms ease;
  border: 1px solid transparent;
}
.news-item:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.news-item:active { transform: scale(0.995); }
.news-item-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.35;
  margin: 0 0 4px;
}
.news-item-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.news-item-source {
  font-weight: 600;
  color: var(--text-dim);
}
.news-item-meta .dot { color: var(--text-faint); }
.news-item-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .news-item { padding: 10px 10px; }
  .news-item-title { font-size: 13.5px; }
  .news-item-desc { font-size: 12.5px; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Crude oil trends modal */
.crude-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.crude-stat {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.crude-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.crude-stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.crude-stat-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.crude-stat-price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.crude-stat-num {
  font-variant-numeric: tabular-nums;
}
.crude-stat-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-faint);
}
.crude-stat-change {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  margin-left: 4px;
}
.crude-stat-change.up { background: rgba(248, 113, 113, 0.15); color: #ef4444; }
.crude-stat-change.down { background: rgba(52, 211, 153, 0.15); color: #16a34a; }

.crude-chart-wrap {
  position: relative;
  height: 320px;
  width: 100%;
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  .crude-chart-wrap { height: 260px; }
  .crude-stats { grid-template-columns: 1fr; }
}

.rank-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.rank-skeleton-row {
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- Welcome / empty state ---------- */

.welcome { margin-top: 24px; }

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .welcome-grid { grid-template-columns: 1fr; gap: 10px; }
}

.feature-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-md);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 200ms ease,
              box-shadow 220ms ease;
  overflow: hidden;
}
.feature-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Subtle accent strip on top edge — picks up the brand */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, transparent 100%);
  opacity: 0.6;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.18), rgba(34, 197, 94, 0.14));
  color: var(--accent);
  margin-bottom: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(52, 211, 153, 0.20);
}

.feature-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.feature-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
}

.welcome-tip {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.welcome-tip svg {
  color: var(--accent);
  animation: tipBounce 1.8s ease-in-out infinite;
}
@keyframes tipBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-tip svg { animation: none; }
}

@media (max-width: 480px) {
  .feature-card { padding: 18px 18px 16px; }
  .feature-card h3 { font-size: 15px; }
  .feature-card p { font-size: 13px; }
  .welcome-tip { margin-top: 14px; font-size: 12.5px; }
}

/* ---------- Results ---------- */

.results {
  margin-top: 8px;
  animation: fadeIn 280ms ease;
  scroll-margin-top: 16px;            /* breathing room for auto-scroll */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 4px 4px 14px;
}

.results-meta h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  flex-shrink: 0;
}

.results-count {
  color: var(--text-faint);
  font-size: 13px;
  margin-left: auto;
}

/* Grade toggle (regular / premium / diesel) */
.grade-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.grade-tab {
  position: relative;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 7px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.grade-tab:hover { color: var(--text); }
.grade-tab.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(34, 197, 94, 0.14));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.4);
}

@media (max-width: 480px) {
  .results-meta { gap: 8px 10px; }
  .results-meta h2 { font-size: 16px; flex: 1 1 auto; }
  .results-count { font-size: 12px; }
  .grade-toggle { order: 3; flex: 1 0 100%; justify-content: stretch; }
  .grade-tab { flex: 1; padding: 7px 6px; font-size: 12px; }
}

.results-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 980px) {
  .results-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
}

.list-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  max-height: none;
  overflow: visible;
  box-shadow: var(--shadow-md);
}

@media (min-width: 980px) {
  .list-pane {
    max-height: 70vh;
    overflow-y: auto;
  }
}

.station-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.station-card {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
  outline: none;
  overflow: hidden;             /* contain the shimmer pseudo-element */
}

.station-card:hover,
.station-card:focus-visible {
  background: var(--surface-2);
}

/* Generic hover border — only for non-medal, non-active rows so the top-3
   medal borders stay visible. */
.station-card:not(.is-active):not(:nth-child(-n+3)):hover,
.station-card:not(.is-active):not(:nth-child(-n+3)):focus-visible {
  border-color: var(--border-strong);
}

/* Subtle gold / silver / bronze borders on the top 3 stations.
   Independent of the rank badge color (which stays as-is). */
.station-card:nth-child(1),
.station-card.rank-1 {
  border-color: rgba(245, 158, 11, 0.32);
  --shimmer: rgba(245, 158, 11, 0.22);
}
.station-card:nth-child(2),
.station-card.rank-2 {
  border-color: rgba(148, 163, 184, 0.32);
  --shimmer: rgba(203, 213, 225, 0.26);
}
.station-card:nth-child(3),
.station-card.rank-3 {
  border-color: rgba(180, 83, 9, 0.32);
  --shimmer: rgba(251, 146, 60, 0.22);
}

/* Selected (clicked → marker focused on map) overrides medal styling */
.station-card.is-active {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.40);
}

/* ---------- Shimmer sweep on hover / tap ---------- */
.station-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    var(--shimmer, rgba(255, 255, 255, 0.06)) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 0;
}
.station-card > * { position: relative; z-index: 1; }
.station-card:hover::before,
.station-card:focus-visible::before,
.station-card:active::before {
  animation: shimmerSweep 850ms ease-out;
}
@keyframes shimmerSweep {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .station-card::before { display: none; }
}

.rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}

/* Podium colors for top 3 stations (gold / silver / bronze) */
.station-card:nth-child(1) .rank,
.station-card.rank-1 .rank {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #2b1d00;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.station-card:nth-child(2) .rank,
.station-card.rank-2 .rank {
  background: linear-gradient(135deg, #f1f5f9, #94a3b8);
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(100, 116, 139, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.station-card:nth-child(3) .rank,
.station-card.rank-3 .rank {
  background: linear-gradient(135deg, #fdba74, #b45309);
  color: #3d1500;
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.station-main { min-width: 0; }

.station-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.station-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-distance {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.station-address {
  margin: 2px 0 0;
  color: var(--text-dim);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.station-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--text-faint);
}
.station-meta-sep {
  font-size: 12px;
  color: var(--text-faint);
  opacity: 0.5;
}
.station-freshness {
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.station-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 64px;
}

.price-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--price-text);
}

.price-value.no-price {
  color: var(--text-faint);
  font-size: 14px;
  font-weight: 500;
}

.price-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.empty-state {
  text-align: center;
  color: var(--text-faint);
  padding: 40px 20px;
}

/* Inline "Open in Maps" link on the station card — only visible when the
   card is selected. Spans full width of the 3-col grid so it sits cleanly
   below the existing row content. */
.station-maps-link {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: color 140ms ease, gap 140ms ease;
}
.station-maps-link svg { flex-shrink: 0; }
.station-maps-link:hover {
  color: var(--accent-2);
  gap: 8px;
}
.station-card.is-active .station-maps-link {
  display: flex;
  animation: revealMapsLink 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes revealMapsLink {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .station-card.is-active .station-maps-link { animation: none; }
}

/* ---------- Map ---------- */

.map-pane {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  min-height: 360px;
  position: relative;
}

#map {
  width: 100%;
  height: 360px;
}

@media (min-width: 980px) {
  #map { height: 70vh; }
}

.leaflet-container { background: var(--map-bg); }
.leaflet-tile-pane { filter: var(--tile-filter); }

/* Themed zoom controls — flip with light/dark mode */
.leaflet-container .leaflet-bar {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--popup-bg);
}
.leaflet-container .leaflet-bar a,
.leaflet-touch .leaflet-container .leaflet-bar a {
  background: var(--popup-bg);
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  width: 34px;
  height: 34px;
  line-height: 32px;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.leaflet-container .leaflet-bar a:last-child {
  border-bottom: 0;
}
.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus {
  background: var(--surface-2);
  color: var(--text);
}
.leaflet-container .leaflet-bar a.leaflet-disabled {
  background: var(--popup-bg);
  color: var(--text-faint);
  opacity: 0.5;
  cursor: not-allowed;
}
.leaflet-container .leaflet-bar a:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.leaflet-container .leaflet-bar a:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.price-marker {
  position: relative;
  background:
    linear-gradient(180deg, #6ee7b7 0%, var(--accent) 48%, var(--accent-2) 100%);
  color: #052e1d;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  /* Layers (top → bottom):
     1. inner highlight along the top edge (lit-from-above)
     2. inner soft border for crispness
     3. outer ring matching the page bg (separates marker from map)
     4. colored ambient glow
     5. depth shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 2px var(--marker-ring),
    0 6px 18px rgba(34, 197, 94, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 160ms ease;
}

.price-marker:hover {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 2px var(--marker-ring),
    0 8px 22px rgba(34, 197, 94, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

.price-marker.no-price {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  color: var(--text-dim);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px var(--border-strong),
    0 0 0 2px var(--marker-ring),
    0 3px 8px rgba(0, 0, 0, 0.25);
}

/* Cluster badge — indigo gradient so clusters read as "groups" rather than
   blending with the green price pills. Matches the indigo accents already
   used in the page background and search-center pin. */
.cluster-marker {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #a5b4fc 0%, #6366f1 48%, #4338ca 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(30, 27, 75, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 2px var(--marker-ring),
    0 6px 18px rgba(99, 102, 241, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cluster-marker-wrap:hover .cluster-marker {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 2px var(--marker-ring),
    0 8px 22px rgba(99, 102, 241, 0.65),
    0 3px 8px rgba(0, 0, 0, 0.45);
}

/* Override Leaflet.markercluster default backgrounds so only ours show */
.marker-cluster,
.marker-cluster div,
.marker-cluster span {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
}

.price-marker.is-active {
  background:
    linear-gradient(180deg, #fef3c7 0%, #fde68a 45%, #f59e0b 100%);
  color: #2b1d00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: scale(1.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 0 2px var(--marker-ring),
    0 10px 26px rgba(245, 158, 11, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.45);
  z-index: 1000 !important;
}

.leaflet-popup-content-wrapper {
  background: var(--popup-bg);
  color: var(--popup-text);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-strong);
}

.leaflet-popup-tip { background: var(--popup-bg); }

.leaflet-popup-content { margin: 12px 14px; font-size: 13px; }
.leaflet-popup-content strong { color: var(--popup-text); }
.leaflet-popup-content .pop-price {
  color: var(--price-text);
  font-weight: 700;
  font-size: 15px;
}
.leaflet-popup-content .pop-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  width: 100%;
  transition: color 140ms ease, gap 140ms ease;
}
.leaflet-popup-content .pop-maps-link:hover {
  color: var(--accent-2);
  gap: 7px;
}
.leaflet-popup-content .pop-maps-link svg { flex-shrink: 0; }

.leaflet-control-attribution {
  background: var(--surface-2) !important;
  color: var(--text-faint) !important;
}
.leaflet-control-attribution a { color: var(--text-dim) !important; }

/* ---------- Error page (404) ---------- */

.brand-link {
  text-decoration: none;
  color: inherit;
}

.error-page {
  text-align: center;
  padding: 60px 24px 80px;
  max-width: 540px;
  margin: 0 auto;
  animation: fadeIn 380ms ease;
}
.error-mark {
  display: inline-grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #052e1d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 14px 38px rgba(34, 197, 94, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
.error-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.error-title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.error-sub {
  margin: 0 auto 32px;
  max-width: 36ch;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.5;
}
.error-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #06251a;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(52, 211, 153, 0.35);
  transition: filter 200ms ease, transform 80ms ease, box-shadow 200ms ease;
}
.error-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(52, 211, 153, 0.45);
}
.error-cta:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.25);
}

@media (max-width: 480px) {
  .error-page { padding: 40px 16px 60px; }
  .error-mark { width: 80px; height: 80px; border-radius: 20px; }
  .error-mark svg { width: 44px; height: 44px; }
  .error-title { font-size: 22px; }
  .error-sub { font-size: 14.5px; }
}

/* ---------- Footer ---------- */

.foot {
  margin-top: 32px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.foot-sep { opacity: 0.6; }

/* ---------- Custom scrollbars ---------- */

.list-pane,
.suggestions {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.list-pane::-webkit-scrollbar,
.suggestions::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.list-pane::-webkit-scrollbar-track,
.suggestions::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.list-pane::-webkit-scrollbar-thumb,
.suggestions::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background-color 160ms ease;
}

.list-pane::-webkit-scrollbar-thumb:hover,
.suggestions::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-faint);
  background-clip: padding-box;
}

.list-pane::-webkit-scrollbar-thumb:active,
.suggestions::-webkit-scrollbar-thumb:active {
  background-color: var(--accent);
  background-clip: padding-box;
}

/* ---------- Reduced motion ---------- */

/* ---------- Small screens (phones) ---------- */

@media (max-width: 480px) {
  .app {
    padding-top: 16px;
    padding-bottom: 56px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .hero-inner {
    padding: 22px 18px;
    border-radius: 18px;
  }
  .brand h1 { font-size: 22px; letter-spacing: -0.01em; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .brand-mark svg { width: 18px; height: 18px; }
  .brand { gap: 10px; }
  .hero-top { gap: 10px; }
  .tagline { font-size: 14px; margin: 12px 0 18px; }

  .search-tabs {
    width: 100%;
    flex-wrap: nowrap;          /* never break onto a second line */
  }
  .tab {
    flex: 1 1 0;                /* every tab gets an equal slice */
    min-width: 0;
    justify-content: center;
    padding: 8px 6px;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
  }
  .tab svg { width: 13px; height: 13px; flex-shrink: 0; }

  .search-input { padding: 12px 14px; font-size: 14.5px; }
  .search-btn { padding: 13px 18px; font-size: 14.5px; }

  /* Tighten the toggle a hair so it never crowds the brand */
  .theme-toggle-track { width: 50px; height: 28px; padding: 0 6px; }
  .theme-toggle-thumb { width: 22px; height: 22px; }
  [data-theme='dark'] .theme-toggle-thumb { left: calc(100% - 25px); }

  .results-meta { margin: 4px 2px 12px; }
  .station-card { padding: 12px 10px; gap: 10px; grid-template-columns: 28px 1fr auto; }
  .station-name { font-size: 14.5px; }
  .price-value { font-size: 17px; }
  .station-price { min-width: 56px; }

  .welcome-card { padding: 18px 18px; }
}

/* Very small screens — drop tab icons so labels never wrap or clip */
@media (max-width: 380px) {
  .tab { gap: 0; padding: 8px 4px; font-size: 11.5px; }
  .tab svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}