@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

:root{
  /* Analog warmth — aged paper, ink, vinyl */
  --font-d:'League Gothic','Arial Narrow',sans-serif;
  --font-m:'Space Mono','Courier New',monospace;
  --font-b:'Inter','Helvetica Neue',sans-serif;
  --font-h:'Caveat',cursive;

  /* Warm dark palette — like a record store basement */
  --bg:#1a1714;--s1:#211e1a;--s2:#292520;--s3:#332e28;
  --bdr:rgba(200,180,150,.1);--bdr2:rgba(200,180,150,.18);
  --tx:#d4cdc0;--tx2:#9a9080;--tx3:#6b6155;

  /* Accent: warm amber — like the glow of a tube amp */
  --ac:#d4a054;--ac-d:rgba(212,160,84,.12);--ac-g:rgba(212,160,84,.25);
  /* Secondary: faded red — like old ink / vinyl labels */
  --red:#c45c3c;--red-d:rgba(196,92,60,.15);
  /* Muted blue — cassette label vibes */
  --blue:#6889a8;

  --r-s:4px;--r-m:6px;--r-l:10px;--r-xl:14px;--r-f:9999px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font-b);background:var(--bg);color:var(--tx);
  font-size:14px;line-height:1.5;overflow:hidden;height:100dvh;
  display:flex;flex-direction:column;
  /* Subtle noise texture */
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
a{color:var(--ac);text-decoration:none}
img{display:block;max-width:100%}
input,textarea{font:inherit;color:inherit}

/* === BANNER === */
#banner{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;background:var(--s1);border-bottom:1px solid var(--bdr);
  font-size:12px;color:var(--tx2);font-family:var(--font-b);text-align:center;
  flex-wrap:wrap;
}
#banner a{
  color:var(--ac);font-weight:600;white-space:nowrap;
}
#banner a:hover{text-decoration:underline}

/* === MAP === */
#map-area{flex:1;position:relative;min-height:0}
#map{width:100%;height:100%}

/* No results overlay */
#no-results{
  position:absolute;inset:0;z-index:8;
  display:none;align-items:center;justify-content:center;
  pointer-events:none;
}
#no-results.visible{display:flex}
.nr-inner{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--tx3);font-family:var(--font-m);font-size:13px;
  background:rgba(26,23,20,.7);padding:20px 32px;border-radius:var(--r-l);
  border:1px solid var(--bdr);backdrop-filter:blur(4px);
}

/* Floating header — like a label on a record sleeve */
#header{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(26,23,20,.92) 0%,rgba(26,23,20,.5) 70%,transparent 100%);
  pointer-events:none;
}
#header>*{pointer-events:auto}
.header-left{display:flex;align-items:center;gap:10px}
.logo-text{
  font-family:var(--font-d);font-size:16px;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
@media(min-width:768px){.logo-text{font-size:20px}}
.header-stats{display:flex;gap:14px;font-size:11px;color:var(--tx2);margin-right:44px;font-family:var(--font-m)}
.header-stats b{color:var(--ac);font-weight:700}

/* Markers — like pins on a corkboard */
.vm{
  border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(212,160,84,.3);
  transition:transform 150ms var(--ease),box-shadow 150ms;
}
.vm:hover{transform:scale(1.4)}
.vm-s{width:14px;height:14px;background:var(--blue);box-shadow:0 0 8px rgba(104,137,168,.3);border-color:rgba(104,137,168,.3)}
.vm-m{width:20px;height:20px;background:var(--ac);box-shadow:0 0 10px var(--ac-g)}
.vm-l{width:26px;height:26px;background:var(--ac);box-shadow:0 0 16px var(--ac-g)}
.vm-xl{width:32px;height:32px;background:var(--red);box-shadow:0 0 20px var(--red-d);border-color:rgba(196,92,60,.3)}

/* Sonar pulse — Find My style radiating ring.
   Uses box-shadow animation instead of pseudo-elements to avoid
   position:relative which breaks MapLibre marker placement at low zoom. */
.vm.pulse{
  animation:sonar 2s ease-out infinite;
}
@keyframes sonar{
  0%{box-shadow:0 0 0 0 var(--ac-g), 0 0 0 0 var(--ac-g)}
  40%{box-shadow:0 0 0 10px transparent, 0 0 0 4px var(--ac-g)}
  100%{box-shadow:0 0 0 20px transparent, 0 0 0 12px transparent}
}
.vm-s.pulse{animation-name:sonar-blue}
@keyframes sonar-blue{
  0%{box-shadow:0 0 0 0 rgba(104,137,168,.35), 0 0 0 0 rgba(104,137,168,.35)}
  40%{box-shadow:0 0 0 8px transparent, 0 0 0 3px rgba(104,137,168,.25)}
  100%{box-shadow:0 0 0 16px transparent, 0 0 0 10px transparent}
}
.vm-xl.pulse{animation-name:sonar-red}
@keyframes sonar-red{
  0%{box-shadow:0 0 0 0 rgba(196,92,60,.3), 0 0 0 0 rgba(196,92,60,.3)}
  40%{box-shadow:0 0 0 12px transparent, 0 0 0 5px rgba(196,92,60,.2)}
  100%{box-shadow:0 0 0 24px transparent, 0 0 0 14px transparent}
}

/* Popup */
.maplibregl-popup-content{
  background:var(--s1)!important;color:var(--tx)!important;
  border:1px solid var(--bdr2)!important;border-radius:var(--r-m)!important;
  padding:12px 14px!important;font-size:12px;font-family:var(--font-b);
  box-shadow:0 8px 30px rgba(0,0,0,.5)!important;max-width:280px!important;
}
.maplibregl-popup-tip{border-top-color:var(--s1)!important}
.maplibregl-popup-close-button{color:var(--tx3)!important;font-size:18px!important;padding:4px 8px!important}
.pu-name{font-family:var(--font-d);font-weight:400;font-size:18px;margin-bottom:2px;text-transform:uppercase;letter-spacing:.02em}
.pu-addr{font-size:11px;color:var(--tx3);margin-bottom:6px}
.pu-meta{font-size:11px;color:var(--tx2);margin-bottom:8px;font-family:var(--font-m)}
.pu-gm-link{color:var(--ac);text-decoration:none;font-family:var(--font-m)}
.pu-gm-link:hover{text-decoration:underline}
.pu-list{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--s3) transparent}
.pu-show{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:var(--r-s);cursor:pointer;transition:background 120ms;font-size:12px;gap:8px;color:var(--tx);text-decoration:none}
.pu-show:hover{background:var(--s3)}
.pu-show .ps-a{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pu-show .ps-d{color:var(--tx3);font-size:10px;font-family:var(--font-m);white-space:nowrap}

/* === CONTROLS === */
#controls{
  flex-shrink:0;padding:10px 14px 6px;
  background:var(--bg);border-top:1px solid var(--bdr);
}
.search-row{margin-bottom:8px}
.search-box{
  display:flex;align-items:center;gap:8px;
  padding:0 12px;height:40px;
  background:var(--s2);border:1px solid var(--bdr);border-radius:var(--r-m);
  transition:border-color 150ms;
}
.search-box:focus-within{border-color:var(--ac)}
.search-box i{color:var(--tx3);flex-shrink:0}
.search-box input{flex:1;background:none;border:none;outline:none;font-size:13px;min-width:0}
.search-box input::placeholder{color:var(--tx3)}
.search-clear{width:28px;height:28px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:var(--tx3);flex-shrink:0}
.search-clear:hover{background:var(--s3);color:var(--tx)}

.chips-row{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.chips-row::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;padding:4px 12px;border-radius:var(--r-s);font-size:11px;font-weight:500;
  color:var(--tx2);background:var(--s2);border:1px solid var(--bdr);
  white-space:nowrap;transition:all 140ms var(--ease);
  font-family:var(--font-m);text-transform:uppercase;letter-spacing:.02em;
}
.chip:hover{color:var(--tx);border-color:var(--bdr2)}
.chip.active{background:var(--red);color:#fff;border-color:var(--red)}

/* === TIMELINE (thumb zone) === */
#timeline{
  flex-shrink:0;padding:8px 14px 16px;
  background:var(--bg);border-top:1px solid var(--bdr);
  padding-bottom:max(16px, env(safe-area-inset-bottom, 16px));
}
.tl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tl-years{font-family:var(--font-d);font-size:20px;font-weight:400;color:var(--ac);letter-spacing:.02em}
.tl-presets{display:flex;gap:4px}
.tl-preset{
  padding:3px 9px;border-radius:var(--r-s);font-size:10px;font-weight:700;
  color:var(--tx3);border:1px solid var(--bdr);transition:all 140ms var(--ease);
  font-family:var(--font-m);letter-spacing:.02em;
}
.tl-preset:hover{color:var(--tx2);border-color:var(--bdr2)}
.tl-preset.active{background:var(--ac);color:var(--bg);border-color:var(--ac)}

.tl-scrubber{position:relative}
.tl-heatmap{height:24px;display:flex;align-items:flex-end;gap:1px;pointer-events:none;margin-bottom:2px}
.hm-bar{flex:1;background:var(--ac);opacity:.1;border-radius:1px 1px 0 0;transition:opacity 200ms,height 200ms;min-height:2px}
.hm-bar.in-range{opacity:.5}
.tl-track{position:relative;height:36px;display:flex;align-items:center;touch-action:none}
.tl-fill{position:absolute;height:3px;background:var(--ac);border-radius:2px;pointer-events:none;top:50%;transform:translateY(-50%)}
.tl-thumb{
  -webkit-appearance:none;appearance:none;position:absolute;
  width:100%;height:36px;background:transparent;pointer-events:none;outline:none;top:0;left:0;
}
.tl-thumb::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--ac);box-shadow:0 0 10px var(--ac-g),0 2px 6px rgba(0,0,0,.4);
  pointer-events:auto;cursor:grab;
}
.tl-thumb::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--ac);
  box-shadow:0 0 10px var(--ac-g);pointer-events:auto;cursor:grab;border:none;
}
.tl-thumb:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15)}
.tl-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--tx3);font-family:var(--font-m);margin-top:2px;letter-spacing:.02em}