/* HIKE & FLY HEROS — design tokens
   Aesthetic: rugged expedition badge. Amber + cream + ink black,
   condensed display type, stamped/distressed accents, mountain silhouettes,
   topographic contour line work as structural element.
*/

:root {
  /* Hike & Fly Hero badge palette — navy / orange / electric blue on light neutral grey */
  --paper: #f3f4f5;
  --paper-2: #e8eaec;
  --paper-3: #d8dbdf;
  --paper-line: #b3b7bd;
  --ink: #0f2342;          /* deep navy from badge */
  --ink-2: #1c3358;
  --ink-3: #4d6080;
  --ink-4: #8090a8;

  /* Brand — orange = primary accent (HERO wordmark), sky = secondary (AND + ribbon) */
  --amber: #f47c2c;        /* badge orange */
  --amber-deep: #d9621a;
  --amber-soft: #ffb27a;
  --orange-edge: #c2520e;
  --moss: #4a6a35;
  --sky: #2da9e8;          /* badge electric blue */
  --crimson: #c2331a;

  --topo-line: rgba(15,35,66,0.14);
  --topo-line-bold: rgba(15,35,66,0.30);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --font-display: "Anton", "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-stamp: "Bungee", "Anton", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] {
  /* Dark mode = navy badge field with bright orange/sky accents */
  --paper: #08152a;
  --paper-2: #0f2342;
  --paper-3: #16315a;
  --paper-line: #2c4674;
  --ink: #f0f4fa;
  --ink-2: #d4ddec;
  --ink-3: #9aabc6;
  --ink-4: #6a7d9c;
  --amber: #ff8a3a;
  --amber-deep: #f47c2c;
  --amber-soft: #ffb27a;
  --orange-edge: #ff7a30;
  --moss: #7fb86d;
  --sky: #3fb3f0;
  --crimson: #ff5a3c;
  --topo-line: rgba(240,244,250,0.08);
  --topo-line-bold: rgba(240,244,250,0.20);
}

[data-theme="topo"] {
  --paper: #e8efd6;
  --paper-2: #dde5c4;
  --paper-3: #ccd6ad;
  --paper-line: #a8b486;
  --ink: #1a2410;
  --ink-2: #2c3a1f;
  --ink-3: #5a6845;
  --ink-4: #8a9676;
  --amber: #d97e0e;
  --amber-deep: #b86610;
  --orange-edge: #c2520e;
  --moss: #4a6a35;
  --topo-line: rgba(26,36,16,0.26);
  --topo-line-bold: rgba(26,36,16,0.48);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

/* Display type — condensed, all-caps, expedition badge style */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.92;
  text-transform: uppercase;
}
.display-tight { letter-spacing: -0.01em; }

.stamp {
  font-family: var(--font-stamp);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }

/* Topographic SVG-style contour overlay (built via gradients) */
.topo-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 60% 40% at 25% 30%, transparent 38%, var(--topo-line) 38.5%, transparent 39%),
    radial-gradient(ellipse 60% 40% at 25% 30%, transparent 48%, var(--topo-line) 48.5%, transparent 49%),
    radial-gradient(ellipse 60% 40% at 25% 30%, transparent 58%, var(--topo-line) 58.5%, transparent 59%),
    radial-gradient(ellipse 50% 35% at 75% 70%, transparent 30%, var(--topo-line) 30.5%, transparent 31%),
    radial-gradient(ellipse 50% 35% at 75% 70%, transparent 42%, var(--topo-line) 42.5%, transparent 43%),
    radial-gradient(ellipse 50% 35% at 75% 70%, transparent 54%, var(--topo-line) 54.5%, transparent 55%);
}

/* Distressed grain — built from CSS noise */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, transparent 0, transparent 1px, rgba(0,0,0,0.025) 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, transparent 0, transparent 1px, rgba(0,0,0,0.025) 1.5px, transparent 2px),
    radial-gradient(circle at 40% 80%, transparent 0, transparent 1px, rgba(0,0,0,0.02) 1.5px, transparent 2px);
  background-size: 4px 4px, 6px 6px, 5px 5px;
  opacity: .6;
  mix-blend-mode: multiply;
}

/* Buttons */
.btn {
  appearance: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 18px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  position: relative;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--amber); }
.btn-primary:hover { box-shadow: 4px 4px 0 var(--amber); transform: translate(-1px,-1px); }
.btn-amber { background: var(--amber); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn-amber:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Cards */
.card {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
}

.hairline { background: var(--paper-line); height: 1px; width: 100%; }
.hairline-v { background: var(--paper-line); width: 1px; height: 100%; }

/* Pulse for live dots */
@keyframes hnf-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@keyframes hnf-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 0; transform: scale(2.4); }
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crimson);
  position: relative;
  display: inline-block;
}
.live-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--crimson);
  animation: hnf-pulse 1.6s ease-in-out infinite;
}

/* Custom scrollbar */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--paper-line) transparent; }
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: 3px; }

/* Tabs */
.tab-row { display: flex; gap: 0; border-bottom: 1.5px solid var(--ink); }
.tab {
  background: transparent;
  border: none;
  padding: 11px 18px 12px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  margin-bottom: -1.5px;
  position: relative;
}
.tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1.5px; height: 1.5px;
  background: var(--amber);
}
.tab:hover:not([aria-selected="true"]) { color: var(--ink); }

/* Pill / chip */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-body);
  background: var(--paper-3);
  border: 1px solid var(--paper-line);
  color: var(--ink-2);
}
.chip-live { background: var(--crimson); color: #fff; border-color: transparent; }
.chip-amber { background: var(--amber); color: var(--ink); border-color: transparent; }
.chip-sky { background: rgba(45,108,184,0.14); color: var(--sky); border-color: rgba(45,108,184,0.28); }
.chip-moss { background: rgba(74,106,53,0.14); color: var(--moss); border-color: rgba(74,106,53,0.28); }
.chip-ink { background: var(--ink); color: var(--paper); border-color: transparent; }

/* Image placeholder — striped */
.img-placeholder {
  background:
    repeating-linear-gradient(135deg, var(--paper-line) 0 1px, transparent 1px 8px),
    var(--paper-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Range slider styling for track scrubber */
.scrub {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 3px;
  background: var(--paper-line);
  border-radius: 0;
  outline: none;
}
.scrub::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--ink);
  cursor: pointer;
}
.scrub::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--ink);
  cursor: pointer;
}

/* Badge stamp — for podium ranks */
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  background: var(--paper-3);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.rank-badge.gold { background: var(--amber); color: var(--ink); border-color: var(--ink); }
.rank-badge.silver { background: #d8d2c2; color: var(--ink); border-color: var(--ink); }
.rank-badge.bronze { background: #c98555; color: #fff; border-color: var(--ink); }

/* Diagonal stripe banner — for headers */
.stripe-banner {
  background: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 12px,
    var(--amber) 12px 24px
  );
  height: 6px;
}

/* Map shading helpers */
.map-canvas {
  background:
    radial-gradient(ellipse 70% 50% at 30% 35%, #c8d8e8 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 70% 65%, #a8bfd6 0%, transparent 55%),
    linear-gradient(135deg, #d8e4f0 0%, #b0c2d8 100%);
}
[data-theme="dark"] .map-canvas {
  background:
    radial-gradient(ellipse 70% 50% at 30% 35%, #2a3320 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 70% 65%, #1c2418 0%, transparent 55%),
    linear-gradient(135deg, #1a2014 0%, #0f140a 100%);
}
[data-theme="topo"] .map-canvas {
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, var(--topo-line) 14px 14.5px),
    repeating-linear-gradient(90deg, transparent 0 14px, var(--topo-line) 14px 14.5px),
    var(--paper-2);
}


/* ── Leaflet maps ─────────────────────────────────────────────── */
.sky-map-wrap {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.sky-leaflet { z-index: 0; }
.sky-leaflet .leaflet-tile-pane {
  /* push tiles toward the warm paper aesthetic without obscuring topo info */
  filter: sepia(0.30) saturate(0.85) contrast(0.92) brightness(1.02);
}
[data-theme="dark"] .sky-leaflet .leaflet-tile-pane {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.95) contrast(0.95);
}
.sky-leaflet .leaflet-control-attribution {
  background: rgba(243, 238, 226, 0.85);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
}
.sky-leaflet .leaflet-control-zoom a {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.sky-leaflet .leaflet-control-zoom a:hover {
  background: var(--amber);
}

/* Tooltip — paper card style instead of default Leaflet white box */
.sky-tooltip.leaflet-tooltip {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  font-family: var(--font-body);
  font-size: 11px;
  padding: 6px 9px;
  white-space: normal;
}
.sky-tooltip.leaflet-tooltip::before { display: none; }

/* Live pulsing marker */
.sky-live-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.55;
  animation: sky-pulse 1.6s ease-out infinite;
}
@keyframes sky-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}