/* hickling.me brand: dark slate canvas, teal accent, Inter + JetBrains Mono */
:root {
  color-scheme: dark;
  --bg: #0F172A;            /* slate-900 */
  --panel-bg: #1E293B;      /* slate-800 */
  --input-bg: #0F172A;
  --border: rgba(51, 65, 85, 0.5); /* slate-700 / 50% */
  --border-strong: #334155; /* slate-700 */
  --text: #E2E8F0;          /* slate-200 */
  --muted: #94A3B8;         /* slate-400 */
  --accent: #0D9488;        /* teal-600 */
  --accent-dark: #0F766E;   /* teal-700 */
  --accent-light: #2DD4BF;  /* teal-400 */
  --best: rgba(13, 148, 136, 0.12);
  --banner-bg: rgba(245, 158, 11, 0.1);
  --banner-border: rgba(245, 158, 11, 0.4);
  --radius: 12px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.app-header {
  padding: 16px 16px 12px;
  text-align: center;
}
.brand { display: inline-block; line-height: 0; }
.brand-logo { height: 40px; width: auto; }
.app-header h1 {
  margin: 6px 0 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 0%, #94A3B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.app-header h1 .by { font-weight: 500; font-size: 0.6em; letter-spacing: 0; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.app-download { display: inline-block; margin-top: 8px; font-size: 0.9rem; font-weight: 600; color: var(--accent, #0D9488); text-decoration: none; }
.app-download:hover { text-decoration: underline; }

.banner {
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: #FCD34D;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.field-group { margin-bottom: 14px; }
.field-group label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: var(--text); }
.row { display: flex; gap: 8px; margin-bottom: 6px; }
.row-inline { display: flex; gap: 16px; }
.row-inline > div { flex: 1; }

input, select, button {
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text);
}
input::placeholder { color: #64748B; }
input:focus, select:focus, button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3);
}
input[type="number"] { font-family: var(--font-mono); }

input[type="text"], input[type="number"], select { width: 100%; }
input[type="range"] { width: 100%; padding: 0; border: none; background: transparent; accent-color: var(--accent); }

button {
  cursor: pointer;
  background: var(--panel-bg);
  font-weight: 500;
}
button:hover { border-color: var(--accent); color: var(--accent-light); }

button.primary {
  width: 100%;
  background: var(--accent);
  color: white;
  border: none;
  padding: 12px;
  font-weight: 600;
  font-size: 1.05rem;
}
button.primary:hover { background: var(--accent-dark); color: white; }
button.primary:disabled { opacity: 0.6; cursor: not-allowed; }

.hint { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; }

.mode-toggle { display: flex; gap: 8px; }
.mode-option { flex: 1; }
.mode-option.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.mode-option.active:hover { background: var(--accent-dark); color: white; }
#max-distance-value { font-family: var(--font-mono); color: var(--accent-light); }

/* #3: only the results move when you scroll. The page's own scrollbar does
   the scrolling (no inner scroll box), while the settings and map are
   sticky, so the results slide up underneath the map. Phones: the settings
   scroll away first, then the map pins to the top in the same way. */
:root { --map-h: max(220px, 38vh); }
.map-panel {
  padding: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 500;  /* above the result cards scrolling beneath it */
  /* Page-coloured band in the 16px gap *below* the map only, hiding results
     as they scroll up under it. (A band all round reached above the map and
     clipped the header subtitle when there's no demo banner.) Square bottom
     corners so the sliver of this shadow that peeks out below the map is a
     flat rectangle, not a rounded notch that fights the results panel's own
     (differently-curved) top corner. */
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 16px 0 0 var(--bg);
}
#map { height: var(--map-h); width: 100%; background: var(--bg); }
/* Keep a card selected from its map pin clear of the sticky map. */
.result-card { scroll-margin-top: calc(var(--map-h) + 16px); }

.results h2 {
  margin-top: 0;
  font-size: 1.1rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #94A3B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.result-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px 14px;
  align-items: center;
  background: rgba(15, 23, 42, 0.4);
}
.result-card.best { background: var(--best); border-color: var(--accent); }
.result-card { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.result-card:hover, .result-card:focus-visible { border-color: var(--accent-light); outline: none; }
.result-card.selected { border-color: var(--accent-light); box-shadow: 0 0 0 2px var(--accent-light); }

/* Numbered result pins on the map, matching the list numbering */
.station-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  font: 600 12px/1 var(--font-mono);
}
.station-pin.best { background: var(--accent-light); color: var(--bg); font-size: 14px; }

.rank-badge {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--accent-light);
  min-width: 1.5em;
  text-align: center;
}

.result-main { grid-column: 2; }
.result-name { font-weight: 600; }
.result-address { color: var(--muted); font-size: 0.85rem; }
.result-stats { font-size: 0.85rem; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); }
.result-stats span strong { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.result-meta { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }

.result-cost {
  grid-column: 3;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-light);
}
.result-cost small { display: block; font-family: var(--font-sans); font-size: 0.7rem; color: var(--muted); font-weight: 400; }

.result-directions { grid-column: 1 / -1; font-size: 0.85rem; }
.result-directions a { color: var(--accent-light); text-decoration: none; }
.result-directions a:hover { text-decoration: underline; }

.empty-state { color: var(--muted); font-size: 0.9rem; }

/* Leaflet controls and popups, restyled for the dark canvas */
.leaflet-container { font-family: var(--font-sans); }
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--panel-bg);
  color: var(--text);
  border-bottom-color: var(--border-strong);
}
.leaflet-bar { border: 1px solid var(--border-strong) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.8) !important;
  color: var(--muted);
}
.leaflet-control-attribution a { color: var(--accent-light); }

/* Wide screens: the original layout - settings on the left, map top right,
   results under the map. Settings and map stay put; the results scroll. */
@media (min-width: 900px) {
  :root { --map-h: min(420px, 55vh); }  /* leave room for results on short windows */
  .layout {
    grid-template-columns: 340px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .controls { grid-row: 1 / 3; grid-column: 1; }
  .map-panel { grid-row: 1; grid-column: 2; top: 0; }
  .results { grid-row: 2; grid-column: 2; }
}

/* Only pin the settings when the window is tall enough to show all of them
   (and the search button) - otherwise they'd be cut off. The map pins at
   the same top offset so the two panels stop level with each other. */
@media (min-width: 900px) and (min-height: 640px) {
  .controls { position: sticky; top: 16px; }
  .map-panel { top: 16px; }
  /* The map pins 16px down, so results would scroll through that gap above
     it. Mirror the band below with one above, and give the layout the room
     for it at rest so it doesn't cover the header. */
  .layout { padding-top: 16px; }
  .map-panel { box-shadow: 0 -16px 0 0 var(--bg), 0 16px 0 0 var(--bg); }
}

/* Deliberately low-key - not a banner, just something to read off and quote
   when filing an issue against what's on screen. Bottom-left, not
   bottom-right, so it doesn't sit under Leaflet's attribution control (which
   lives in the map's bottom-right corner) once the map scrolls into view. */
.app-version {
  position: fixed;
  left: 6px;
  bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  max-width: calc(100vw - 12px);
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  user-select: text;
  z-index: 600;  /* above the sticky map (500) on narrow screens */
}
.app-version-text { opacity: 0.45; }
.app-version:hover .app-version-text { opacity: 1; }
.price-age-key { opacity: 0.85; }
.key-item { margin-left: 8px; }
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  vertical-align: -1px;
}

/* Pastel highlights for how old a result's prices are (see priceAgeClass in main.ts) */
.price-age-amber { background: #FDE68A; color: #78350F; }
.price-age-red { background: #FECACA; color: #7F1D1D; }
.swatch.price-age-amber, .swatch.price-age-red { border-color: transparent; }
.result-meta.price-age-amber, .result-meta.price-age-red {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}