/* ==========================================================
   Untethered Travel: "Night bus to Palermo"
   Deep ink, hot magenta, acid lime, cyan. Loud on purpose.
   ========================================================== */
:root{
  --ink:#0d0721;
  --ink-2:#1a0f3a;
  --ink-3:#2a1a5e;
  --hot:#ff2e88;
  --acid:#d4ff3a;
  --sky:#2ee6ff;
  --sun:#ffb020;
  --paper:#fff4e3;
  --muted:#b9a8ff;
  --accent:var(--hot);
  --stripe:linear-gradient(90deg,var(--hot),var(--sun),var(--acid),var(--sky),var(--hot));
  --display:'Unbounded', 'Space Grotesk', system-ui, sans-serif;
  --body:'Space Grotesk', Inter, system-ui, -apple-system, sans-serif;
  --radius:18px;
  --border:3px solid var(--ink);
  --transition:.25s cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}  /* the hidden attribute always wins over display: rules below */
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--paper);
  margin:0;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* Drifting colour blobs behind everything */
body::before{
  content:"";
  position:fixed; inset:-20vmax; z-index:-2;
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, rgba(255,46,136,.35), transparent 60%),
    radial-gradient(35vmax 35vmax at 85% 30%, rgba(46,230,255,.25), transparent 60%),
    radial-gradient(45vmax 45vmax at 50% 95%, rgba(212,255,58,.18), transparent 60%),
    radial-gradient(30vmax 30vmax at 90% 90%, rgba(255,176,32,.22), transparent 60%);
  filter:blur(10px);
  animation:drift 22s ease-in-out infinite alternate;
}
/* Film grain */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  50%{transform:translate(4vmax,-3vmax) rotate(8deg) scale(1.08)}
  100%{transform:translate(-3vmax,4vmax) rotate(-6deg) scale(1)}
}

::selection{background:var(--acid); color:var(--ink)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:2000;  /* above Leaflet controls (1000) */
  background:rgba(13,7,33,.78);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  padding:18px 30px 14px;
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px;
  background:var(--stripe); background-size:200% 100%;
  animation:stripe 6s linear infinite;
}
@keyframes stripe{to{background-position:200% 0}}

.header-inner{position:relative; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; gap:14px 20px; align-items:center}
.logo-link{grid-column:1; grid-row:1}
.brand{grid-column:2; grid-row:1}
.header-menu{grid-column:1 / span 3; grid-row:2; justify-self:start}
#search{grid-column:3; grid-row:1}

/* Stamp logo: acid ink on an ink disc, cropped tight to the roundel */
.logo-frame{
  display:block; width:72px; height:72px; border-radius:50%; overflow:hidden;
  background:var(--ink);
  border:3px solid var(--acid);
  box-shadow:0 0 0 4px var(--ink), 0 0 30px rgba(212,255,58,.5);
  transition:var(--transition);
}
.logo{
  display:block; width:100%; height:100%;
  object-fit:cover;                 /* the PNG is wide with empty sides; cover crops to the stamp */
  transform:scale(1.12);            /* trims the stamp's own worn outer ring so it fills the disc */
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.logo-link:hover .logo-frame{transform:rotate(-12deg); box-shadow:0 0 0 4px var(--ink), 0 0 44px rgba(212,255,58,.8)}
.logo-link:hover .logo{transform:scale(1.9) translate(4%, 6%)}   /* zoom in on the tethered plane */

.brand{
  font-family:var(--display); font-weight:900; font-size:30px; line-height:.95;
  margin:0; text-transform:uppercase; letter-spacing:-.02em;
  overflow:visible;
}
.brand span{display:inline-block; will-change:transform; padding:0 .5px; color:var(--paper)}
.brand span:nth-child(3n+2){color:var(--acid)}
.brand span:nth-child(3n){color:var(--sky)}
.brand:hover span{animation:wave .9s ease-in-out infinite !important}
.brand:hover span:nth-child(odd){animation-delay:.1s !important}
@keyframes wave{
  0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(-8px) rotate(-6deg)}
  60%{transform:translateY(4px) rotate(4deg)}
}

.header-menu ul{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0}
.header-menu a{
  display:inline-block; position:relative;
  color:var(--paper); text-decoration:none;
  font-family:var(--display); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  padding:8px 14px; border-radius:999px;
  border:2px solid transparent;
  transition:var(--transition);
}
.header-menu a:hover{
  color:var(--ink); background:var(--acid); border-color:var(--ink);
  transform:rotate(-3deg) translateY(-2px);
  box-shadow:4px 4px 0 var(--hot);
}
.header-menu li:nth-child(even) a:hover{background:var(--sky); transform:rotate(3deg) translateY(-2px)}

#search{
  width:320px; padding:12px 18px 12px 44px;
  font-family:var(--body); font-size:15px; font-weight:500;
  color:var(--ink); background:var(--paper);
  border:var(--border); border-radius:999px;
  box-shadow:5px 5px 0 var(--hot);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230d0721' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:16px center;
  transition:var(--transition);
}
#search::placeholder{color:#6b5b95}
#search:focus{outline:none; transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--acid)}

/* ---------- Tagline ---------- */
/* Words rise in one by one, then a soft light sweeps across every few seconds; only "less." gets colour */
.tagline{
  margin:16px 0 6px; text-align:center;
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(18px, 3vw, 32px); line-height:1;
}
/* Option F: sky to lime across the line. Each word paints its own slice of the gradient (a word
   with its own fade can't share one gradient painted on the line), topped by a white shine band. */
.tag-word{
  --from:0%; --to:100%;
  display:inline-block; margin:0 .08em;
  background:
    linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%) 200% 0/250% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--acid) var(--from), var(--sky)), color-mix(in srgb, var(--acid) var(--to), var(--sky)));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  color:var(--sky);  /* fallback if gradients on text aren't supported */
  animation:tag-fade .6s ease-in-out both, tag-shine 5s ease-in-out 1.6s infinite;
}
.tag-word:nth-child(1){--from:0%;  --to:12%}
.tag-word:nth-child(2){--from:14%; --to:50%}
.tag-word:nth-child(3){--from:54%; --to:76%; animation-delay:.6s, 1.6s}
.tag-word:nth-child(4){--from:80%; --to:100%; animation-delay:.6s, 1.6s}
@keyframes tag-fade{from{opacity:0} to{opacity:1}}
/* The page tagline waits behind the splash, then plays its own fade once the splash lifts */
body.is-loading .tagline--page .tag-word{animation-play-state:paused}
@keyframes tag-shine{0%,60%{background-position:200% 0} 100%{background-position:-50% 0}}
@keyframes tag-swipe{from{transform:scaleX(0)}}

/* ---------- Layout ---------- */
.container{max-width:1200px; margin:28px auto; padding:0 20px}

.filters{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:18px 0 28px; padding:14px 18px;
  background:rgba(26,15,58,.7); backdrop-filter:blur(10px);
  border:2px solid var(--ink-3); border-radius:999px;
  color:var(--muted);
}
.filters label{font-family:var(--display); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em}
#maxPriceLabel{
  display:inline-block; min-width:64px; text-align:center; margin-left:6px;
  padding:4px 10px; border-radius:8px;
  background:var(--hot); color:var(--ink); font-weight:900;
  transform:rotate(-3deg);
}
#maxPrice{width:200px; margin-left:4px}

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  height:10px; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg,var(--sky),var(--acid),var(--hot));
  border:2px solid var(--ink);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--paper); border:4px solid var(--ink);
  box-shadow:0 0 0 3px var(--hot), 0 0 18px var(--hot);
  transition:transform .2s;
}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.25) rotate(45deg)}
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--paper); border:4px solid var(--ink);
  box-shadow:0 0 0 3px var(--hot), 0 0 18px var(--hot);
}

.map-toggle{
  margin-left:auto; cursor:pointer;
  padding:12px 22px;
  font-family:var(--display); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); background:var(--sky);
  border:var(--border); border-radius:999px;
  box-shadow:5px 5px 0 var(--acid);
  transition:var(--transition);
}
.map-toggle:hover{transform:translate(-3px,-3px) rotate(-2deg); box-shadow:8px 8px 0 var(--hot); background:var(--acid)}
.map-toggle:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--hot)}

.map{
  height:440px; margin-bottom:28px; overflow:hidden;
  border:4px solid var(--paper); border-radius:var(--radius);
  box-shadow:10px 10px 0 var(--hot), 20px 20px 0 var(--acid);
}
.leaflet-popup-content-wrapper{border-radius:14px; border:var(--border); font-family:var(--body)}
.leaflet-popup-content a{color:var(--hot); font-weight:700}

/* ---------- Cards: cream tickets with hard shadows ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:34px 28px; padding-bottom:12px}

.card{
  --shadow-c:var(--acid);
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  border:var(--border); border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--shadow-c);
  overflow:hidden;
  transition:var(--transition);
  animation:pop .6s var(--transition) both;
}
.card:nth-child(4n+2){--shadow-c:var(--sky)}
.card:nth-child(4n+3){--shadow-c:var(--sun)}
.card:nth-child(4n){--shadow-c:var(--acid)}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.1s}
.card:nth-child(3){animation-delay:.15s}
.card:nth-child(4){animation-delay:.2s}
.card:nth-child(5){animation-delay:.25s}
.card:nth-child(6){animation-delay:.3s}
.card:nth-child(n+7){animation-delay:.35s}
.card:hover{transform:translate(-5px,-5px) rotate(-1.2deg); box-shadow:14px 14px 0 var(--shadow-c)}
.card:nth-child(even):hover{transform:translate(-5px,-5px) rotate(1.2deg)}
@keyframes pop{
  from{opacity:0; transform:translateY(30px) scale(.94) rotate(2deg)}
  to{opacity:1; transform:none}
}

/* ticket perforation between body and photo */
.card-body{
  position:relative; padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:12px;
  border-bottom:3px dashed var(--ink);
}
.card-body::before,.card-body::after{
  content:""; position:absolute; bottom:-13px; width:22px; height:22px; border-radius:50%;
  background:var(--ink); z-index:2;
}
.card-body::before{left:-13px}
.card-body::after{right:-13px}

.title{font-family:var(--display); font-weight:700; font-size:16px; line-height:1.2; letter-spacing:-.01em}
.title a{
  color:var(--ink); text-decoration:none;
  background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 100% / 0 40%;
  transition:background-size .35s ease;
}
.title a:hover{background-size:100% 40%}

/* Barrio on the left, price beside it on the same row (rating tucked under the price) */
.meta{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:#4b3d7a}
.meta > .where{min-width:0}
.meta > div:last-child{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0}

.price{
  display:inline-block;
  font-family:var(--display); font-weight:900; font-size:18px;
  color:var(--ink); background:var(--acid);
  padding:4px 10px; border:2px solid var(--ink); border-radius:10px;
  transform:rotate(-4deg); box-shadow:3px 3px 0 var(--ink);
}
.rating{
  background:var(--ink); color:var(--paper);
  padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700;
}

.thumb{width:100%; height:180px; object-fit:cover; display:block; filter:saturate(1.2) contrast(1.05); transition:transform .5s ease, filter .5s ease}
.card:hover .thumb{transform:scale(1.08); filter:saturate(1.5) contrast(1.1) hue-rotate(-8deg)}

#listings > p{font-family:var(--display); font-size:22px; color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:60px; padding:40px 20px 50px; text-align:center;
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(20px,4vw,40px); letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1.5px var(--paper);
  border-top:4px solid; border-image:var(--stripe) 1;
}
.site-footer:hover{color:var(--hot); -webkit-text-stroke:0}

/* ---------- Small screens ---------- */
@media (max-width:720px){
  .site-header{padding:14px 16px 12px}
  .header-inner{grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; gap:10px 14px}
  .logo-frame{height:54px; width:54px}
  .brand{font-size:22px}
  #search{grid-column:1 / span 2; grid-row:2; width:100%}
  .header-menu{grid-column:1 / span 2; grid-row:3; justify-self:stretch; overflow-x:auto}
  .header-menu ul{flex-wrap:nowrap}
  .header-menu a{font-size:11px; padding:6px 10px; white-space:nowrap}
  .container{padding:0 16px}
  .filters{border-radius:var(--radius); flex-direction:column; align-items:stretch}
  #maxPrice{width:100%; margin:8px 0 0}
  .map-toggle{margin-left:0; width:100%}
}

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

/* ---------- Run bar: fresh search ---------- */
.run-bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:28px; padding:20px 22px;
  background:var(--paper); color:var(--ink);
  border:var(--border); border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--sky);
}
.run-title{margin:0; font-family:var(--display); font-weight:900; font-size:22px; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1}
.run-status{margin:4px 0 0; font-size:14px; font-weight:600; color:#4b3d7a}
.run-button{
  cursor:pointer; padding:14px 24px;
  font-family:var(--display); font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); background:var(--hot);
  border:var(--border); border-radius:999px;
  box-shadow:5px 5px 0 var(--ink);
  transition:var(--transition);
}
.run-button:hover:not(:disabled){transform:translate(-3px,-3px) rotate(-2deg); box-shadow:8px 8px 0 var(--ink); background:var(--acid)}
.run-button:active:not(:disabled){transform:translate(3px,3px); box-shadow:0 0 0 var(--ink)}
.toggle:disabled, .toggle[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
.run-button:disabled{cursor:progress; background:var(--sun); animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:rotate(-2deg) scale(1.03)}}

/* ---------- Type chips ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  cursor:pointer; padding:8px 14px;
  font-family:var(--display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--paper); background:transparent;
  border:2px solid var(--ink-3); border-radius:999px;
  transition:var(--transition);
}
.chip:hover{border-color:var(--acid); color:var(--acid)}
.chip.is-active{color:var(--ink); background:var(--acid); border-color:var(--ink); box-shadow:3px 3px 0 var(--hot); transform:rotate(-2deg)}

button:focus-visible, a:focus-visible, input:focus-visible{outline:3px solid var(--acid); outline-offset:3px}

/* ---------- Card extras ---------- */
.card-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card-top{flex-wrap:nowrap; align-items:flex-start; justify-content:space-between}
.card-badges{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.card-price{display:flex; align-items:center; gap:6px; flex-shrink:0}  /* discount then price, pinned top right */
.kind-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px 4px 6px; border:2px solid var(--ink); border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink);
}
.kind-badge svg{width:18px; height:18px; flex:none}
.kind-badge--hostel{background:var(--sky)}
.kind-badge--airbnb{background:var(--sun)}
.rank{
  margin-left:auto;
  font-family:var(--display); font-weight:900; font-size:20px; line-height:1;
  color:var(--hot); -webkit-text-stroke:1px var(--ink);
}
.stayed{padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; border:2px solid var(--ink)}
.stayed--liked{background:var(--acid); color:var(--ink)}
.stayed--disliked{background:var(--ink); color:var(--paper)}
.card-foot{font-size:12px; font-weight:600; color:#4b3d7a; border-top:2px solid rgba(13,7,33,.12); padding-top:10px; display:flex; flex-direction:column; gap:10px}
.title-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.card-rate{display:flex; gap:6px; font-size:16px; flex-shrink:0}
.card-rate-btn{
  cursor:pointer; user-select:none; line-height:1;
  transition:opacity .2s ease, filter .2s ease, transform .15s ease;
}
/* Not set: faint (the like heart stays red). Set: full strength. */
.card-rate-btn:not(.is-active){opacity:.4}
.card-rate-btn:not(.is-active):hover{opacity:.9; transform:scale(1.15)}
.card-rate-dislike.is-active, .card-rate-btn.card-rate-dislike:not(.is-active):hover{filter:drop-shadow(0 0 1px rgba(255,255,255,.9))}  /* black heart on a dark card */

@media (max-width:720px){
  .run-bar{flex-direction:column; align-items:stretch}
  .run-button{width:100%}
}



/* ---------- Deals, Genius, currency ---------- */
.deal{padding:3px 8px; border-radius:8px; border:2px solid var(--ink); background:var(--hot); color:var(--ink); font-family:var(--display); font-weight:900; font-size:12px; transform:rotate(-4deg)}
.genius{padding:3px 8px; border-radius:999px; border:2px solid var(--ink); background:var(--ink); color:var(--sky); font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.04em}
.was{margin-right:6px; opacity:.7}


/* ---------- Where: barrio + distance ---------- */
.where{display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:center; line-height:1.25}
.where svg{width:18px; height:18px; grid-row:span 2; color:var(--hot)}
.where strong{font-family:var(--display); font-weight:700; font-size:13px; color:var(--ink); text-transform:uppercase; letter-spacing:.02em}
.where span{font-size:12px; color:#4b3d7a}

/* ---------- Pill selects and toggles (sort, filters, currency) ---------- */
.pill-select{
  cursor:pointer; padding:6px 30px 6px 12px; max-width:100%;
  font-family:var(--display); font-weight:900; font-size:12px;
  color:var(--ink); background-color:var(--sky);
  border:2px solid var(--ink); border-radius:999px;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230d0721' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.pill-select--acid{background-color:var(--acid)}
.filters--more{margin-top:-14px; gap:10px 12px}
.toggle{
  cursor:pointer; padding:7px 14px;
  font-family:var(--display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--paper); background:transparent;
  border:2px dashed var(--ink-3); border-radius:999px;
  transition:var(--transition);
}
.toggle:hover{border-color:var(--hot); color:var(--hot)}
.toggle[aria-pressed="true"]{color:var(--ink); background:var(--hot); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--acid); transform:rotate(2deg)}

/* ---------- Pin ---------- */
.toggle--pin[aria-pressed="true"]{background:var(--sky); box-shadow:3px 3px 0 var(--hot)}
.pin-hint{margin:0 0 10px; font-family:var(--display); font-weight:700; font-size:13px; color:var(--acid); text-transform:uppercase; letter-spacing:.04em}
.map.is-pinning{cursor:crosshair; box-shadow:10px 10px 0 var(--acid), 20px 20px 0 var(--hot)}
.map.is-pinning .leaflet-container, .map.is-pinning .leaflet-grab{cursor:crosshair}
.pin-marker span{
  display:block; width:30px; height:30px;
  background:var(--hot); border:3px solid var(--ink);
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:3px 3px 0 var(--acid);
}
.from-pin{color:var(--hot) !important; font-weight:700}
.pin-label{padding:5px 12px; border-radius:999px; border:2px solid var(--ink); background:var(--sky); color:var(--ink); font-family:var(--display); font-weight:900; font-size:11px; text-transform:uppercase; letter-spacing:.05em}
.pin-label--preset{background:var(--acid); box-shadow:3px 3px 0 var(--hot); transform:rotate(-2deg)}

/* ---------- Map price pins + card highlight ---------- */
.price-pin{background:none; border:0}
.price-pin .pin-price{
  display:inline-block;
  padding:3px 8px; white-space:nowrap;
  font-family:var(--display); font-weight:900; font-size:12px;
  color:var(--ink); background:var(--paper);
  border:2px solid var(--ink); border-radius:999px;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s ease, background .15s ease;
}
.price-pin--approx .pin-price{background:var(--ink); color:var(--paper); border-style:dashed; border-color:var(--paper)}
.price-pin.is-highlighted .pin-price, .price-pin:hover .pin-price{
  background:var(--acid); color:var(--ink); border-style:solid; border-color:var(--ink);
  transform:scale(1.25); box-shadow:3px 3px 0 var(--hot);
}
.pin-stack{position:absolute; left:0; top:0; transform:translate(-50%, -100%); display:flex; flex-direction:column; align-items:center; gap:2px}
.pin-badges{display:flex; align-items:center; gap:2px; font-size:26px; line-height:1; white-space:nowrap; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.marker-icon{display:inline-grid; line-height:1}  /* same size as the other map icons (set on .pin-badges) */
.price-pin:hover .marker-icon:not(.marker-icon--disliked), .price-pin.is-highlighted .marker-icon:not(.marker-icon--disliked){
  animation:marker-icon-beat .4s cubic-bezier(.34,1.56,.64,1) 1;
}
/* Disliked: a black heart; on hover it turns red, then fades into a black broken heart (and stays broken) */
.marker-icon--disliked > span{grid-area:1/1}
.marker-icon__whole, .marker-icon__broken{opacity:0}
.marker-icon__broken{filter:grayscale(1) brightness(.2)}
.price-pin:hover .marker-icon__black, .price-pin.is-highlighted .marker-icon__black{animation:marker-icon-step1 1s ease forwards}
.price-pin:hover .marker-icon__whole, .price-pin.is-highlighted .marker-icon__whole{animation:marker-icon-step2 1s ease forwards}
.price-pin:hover .marker-icon__broken, .price-pin.is-highlighted .marker-icon__broken{animation:marker-icon-step3 1s ease forwards}
@keyframes marker-icon-step1{0%{opacity:1} 20%,100%{opacity:0}}
@keyframes marker-icon-step2{0%{opacity:0; transform:scale(1)} 20%{opacity:1; transform:scale(1.15)} 55%{opacity:1; transform:scale(1.15)} 75%,100%{opacity:0; transform:scale(1)}}
@keyframes marker-icon-step3{0%,55%{opacity:0; transform:scale(.8)} 80%,100%{opacity:1; transform:scale(1)}}
@keyframes marker-icon-beat{0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)}}
.card.is-highlighted{transform:translate(-5px,-5px) rotate(-1.2deg); box-shadow:14px 14px 0 var(--shadow-c); outline:4px solid var(--acid); outline-offset:3px}
/* Filter summary: its own full-width line along the bottom of the search bar */
.filter-summary{flex-basis:100%; margin:0; padding-top:8px; border-top:1px solid var(--line, rgba(255,255,255,.1)); font-size:13px; font-weight:600; color:var(--text-dim, var(--muted))}
.map-count{margin:-12px 0 20px; font-family:var(--display); font-weight:700; font-size:13px; color:var(--acid); text-transform:uppercase; letter-spacing:.04em}

/* ---------- Access: credentials missing ---------- */
.auth-bar{
  position:relative; z-index:1500; padding:12px 20px; text-align:center;
  font-weight:600; color:var(--ink); background:var(--hot);
  border-bottom:var(--border);
}
.auth-bar strong{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em}
.auth-bar code{background:var(--ink); color:var(--acid); padding:1px 6px; border-radius:6px}
.auth-empty{font-family:var(--display); font-size:20px; color:var(--hot) !important}
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:3000;
  transform:translateX(-50%) rotate(-1deg); max-width:calc(100% - 32px);
  padding:12px 18px; border:var(--border); border-radius:14px;
  background:var(--acid); color:var(--ink); font-weight:700; box-shadow:6px 6px 0 var(--hot);
}

/* ---------- Clickable cards ---------- */
.card.is-clickable, .ad-card.is-clickable{cursor:pointer}
.card.is-clickable:focus-visible{outline:4px solid var(--acid); outline-offset:3px}

/* ---------- Map tooltips ---------- */
.pin-tooltip{
  padding:8px 10px; border:2px solid var(--ink); border-radius:12px;
  background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--hot);
  font-family:var(--body); font-size:12px; line-height:1.35; white-space:nowrap;
}
.pin-tooltip strong{display:block; font-family:var(--display); font-size:13px}
.pin-tooltip span{display:block}
.pin-tooltip-source{color:#4b3d7a}
.pin-tooltip em{display:block; color:var(--hot); font-style:normal; font-weight:700}
.leaflet-tooltip-top.pin-tooltip::before{border-top-color:var(--ink)}

/* ---------- Ads: clearly sponsored, same footprint as a card ---------- */
.ad-card{
  --ad:var(--hot);
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:18px; border-radius:var(--radius);
  background:var(--ink-2); color:var(--paper);
  border:3px dashed var(--ad);
  box-shadow:8px 8px 0 var(--ad);
}
.ad-card--sky{--ad:var(--sky)}
.ad-card--sun{--ad:var(--sun)}
.ad-card--hot{--ad:var(--hot)}
.ad-card.is-clickable:hover{transform:translate(-4px,-4px) rotate(1deg); box-shadow:12px 12px 0 var(--ad); transition:var(--transition)}
.ad-top{display:flex; align-items:center; gap:8px}
.ad-badge{padding:2px 8px; border-radius:6px; background:var(--ad); color:var(--ink); font-family:var(--display); font-weight:900; font-size:11px; text-transform:uppercase; letter-spacing:.08em}
.ad-kicker{font-size:12px; font-weight:600; color:var(--muted)}
.ad-advertiser{margin:0; font-family:var(--display); font-weight:900; font-size:24px; line-height:1; color:var(--ad); text-transform:uppercase; letter-spacing:-.01em}
.ad-headline{margin:0; font-family:var(--display); font-weight:700; font-size:16px; line-height:1.2}
.ad-body{margin:0; font-size:14px; color:var(--muted)}
.ad-cta{
  margin-top:auto; align-self:flex-start; padding:8px 14px; border-radius:999px;
  border:2px solid var(--ink); background:var(--ad); color:var(--ink); text-decoration:none;
  font-family:var(--display); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
}
span.ad-cta{opacity:.6}

/* ---------- Tippy theme: paper ticket with a hard shadow ---------- */
.tippy-box[data-theme~='nomad']{
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:12px;
  box-shadow:4px 4px 0 var(--hot);
  font-family:var(--body); font-size:13px; font-weight:500; line-height:1.4;
}
.tippy-box[data-theme~='nomad'] .tippy-content{padding:8px 11px}
.tippy-box[data-theme~='nomad'] > .tippy-arrow{color:var(--ink)}

/* ---------- Palette: saturation x0.64 (muted 20% twice) and 20% darker. Delete this block to revert. ---------- */
:root{
  --ink:#0c0917;  /* was #0d0721 */
  --ink-2:#181228;  /* was #1a0f3a */
  --ink-3:#271f41;  /* was #2a1a5e */
  --paper:#e9c999;  /* was #fff4e3 */
  --hot:#c52b6e;  /* was #ff2e88 */
  --acid:#aacd2d;  /* was #d4ff3a */
  --sky:#2bb3c5;  /* was #2ee6ff */
  --sun:#bc8829;  /* was #ffb020 */
  --muted:#8872e0;  /* was #b9a8ff */
}

/* Disliked: still shown, but faded and marked */
.card--disliked{opacity:.72; filter:grayscale(.6); --shadow-c:var(--ink-3)}
.card--disliked:hover, .card--disliked.is-highlighted{opacity:1; filter:none}
.stayed--disliked{background:var(--hot); color:var(--ink)}


/* ---------- Search progress overlay ---------- */
body.is-searching{overflow:hidden}
.search-overlay{
  position:fixed; inset:0; z-index:2500; display:grid; place-items:center; padding:16px;
  background:rgba(13,7,33,.82); backdrop-filter:blur(6px);
}
.search-panel{
  width:min(520px, 100%); max-height:calc(100vh - 32px); overflow:auto;
  display:flex; flex-direction:column; gap:16px; padding:22px;
  background:var(--paper); color:var(--ink);
  border:var(--border); border-radius:var(--radius); box-shadow:10px 10px 0 var(--hot), 20px 20px 0 var(--acid);
}
.search-head{display:flex; align-items:center; gap:14px}
.search-head h2{margin:0; font-family:var(--display); font-weight:900; font-size:22px; text-transform:uppercase; line-height:1.05}
.search-dates{margin:4px 0 0; font-size:13px; font-weight:600; color:#4b3d7a}
.search-elapsed{margin-left:auto; font-family:var(--display); font-weight:900; font-size:22px; font-variant-numeric:tabular-nums; color:var(--hot)}
.search-spinner{
  flex:none; width:40px; height:40px; border-radius:50%;
  border:5px solid var(--ink); border-top-color:var(--hot); border-right-color:var(--acid);
  animation:spin .9s linear infinite;
}
.search-spinner--small{width:16px; height:16px; border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.search-bar{height:12px; border:2px solid var(--ink); border-radius:999px; overflow:hidden; background:var(--ink)}
.search-bar span{display:block; height:100%; width:40%; border-radius:999px; background:linear-gradient(90deg,var(--sky),var(--acid),var(--hot)); animation:slide 1.6s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.search-steps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600}
.search-steps li{display:flex; gap:8px; align-items:baseline}
.search-steps li::before{content:"✓"; font-weight:900; color:#2a8a4a}
.search-steps li.is-current::before{content:"●"; color:var(--hot); animation:pulse 1s ease-in-out infinite}
.search-ad .ad-card{box-shadow:6px 6px 0 var(--ad); animation:pop .5s var(--transition) both}
#searchMinimise{align-self:center; color:var(--ink); border-color:var(--ink)}
.search-pill{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:2500;
  display:flex; align-items:center; gap:8px; padding:10px 16px; cursor:pointer;
  font-family:var(--display); font-weight:900; font-size:13px; text-transform:uppercase;
  color:var(--ink); background:var(--acid); border:var(--border); border-radius:999px; box-shadow:5px 5px 0 var(--hot);
}

/* Ad photos: full-bleed across the top of the ad card, with the licence credit on the image */
.ad-figure{position:relative; margin:-18px -18px 4px; border-bottom:3px dashed var(--ad); border-radius:calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0; overflow:hidden}
.ad-image{display:block; width:100%; height:150px; object-fit:cover}
.ad-credit{position:absolute; right:6px; bottom:6px; padding:2px 6px; border-radius:6px; font-size:10px; color:var(--paper); background:rgba(13,7,33,.75); text-decoration:none}
.search-ad .ad-image{height:120px}

.apify-credit{margin:2px 0 0; font-size:12px; font-weight:700; color:#4b3d7a}
.apify-credit.is-low{color:var(--hot)}
.apify-credit.is-out{color:var(--paper); background:var(--hot); display:inline-block; padding:2px 8px; border-radius:6px}


/* ---------- Compact header: one row, as tall as the logo ---------- */
.site-header{padding:8px 24px 8px}
.header-inner{grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:14px; row-gap:3px}
.logo-link{grid-column:1; grid-row:1 / span 2; align-self:center}
.logo-frame{width:56px; height:56px}
.brand{grid-column:2; grid-row:1; align-self:end; font-size:22px; line-height:1; white-space:nowrap}
.brand .brand-gap{display:inline-block; width:.35em}
.header-menu{grid-column:2; grid-row:2; align-self:start; justify-self:start}
.header-menu ul{gap:2px}
.header-menu a{font-size:10px; padding:3px 8px; letter-spacing:.07em; border-width:1.5px}
.header-menu a:hover{box-shadow:2px 2px 0 var(--hot); transform:rotate(-2deg)}
#search{grid-column:3; grid-row:1 / span 2; align-self:center; padding-block:9px}

@media (max-width:720px){
  .site-header{padding:8px 16px}
  .header-inner{grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; row-gap:6px}
  .logo-frame{width:44px; height:44px}
  .logo-link{grid-row:1 / span 2}
  .brand{font-size:17px}
  .header-menu{grid-column:2; grid-row:2; justify-self:stretch}
  #search{grid-column:1 / span 2; grid-row:3; width:100%}
}


/* ---------- Map-first layout: compact controls above a tall map ---------- */
.tagline{margin:14px auto 4px}
.container{margin-top:14px}
.run-bar{margin-top:14px; padding:8px 8px 8px 16px; gap:12px; box-shadow:5px 5px 0 var(--sky)}
.run-copy{display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap; min-width:0}
.run-title{font-size:15px}
.run-status, .apify-credit{margin:0; font-size:12px}
.run-button{padding:8px 16px; font-size:12px; box-shadow:3px 3px 0 var(--ink)}
.filters{margin:12px 0 10px; padding:7px 12px; gap:6px 10px}
.filters--more{margin-top:0}
.filters label{font-size:11px}
.chip, .toggle{padding:5px 10px; font-size:11px}
.pill-select{padding:4px 26px 4px 10px; font-size:11px; background-position:right 9px center}
#maxPrice{width:150px}
.map-toggle{padding:7px 14px; font-size:11px; box-shadow:3px 3px 0 var(--acid)}
.map{height:max(460px, 64vh); margin-bottom:22px}
.map-count{margin:-8px 0 14px}
@media (max-width:720px){
  .map{height:max(360px, 55vh)}
  .run-bar{padding:10px 12px}
}

/* The list keeps a min-height in map view (so the page doesn't jump while panning);
   pack rows at the top so that spare height doesn't stretch the cards */
.grid{align-content:start}


/* ---------- Filters overlaid on the map ---------- */
.map-wrap{position:relative; margin-bottom:22px}
.map-wrap .map{margin-bottom:0}
.filters-toggle{
  position:absolute; top:12px; left:12px; z-index:1100; cursor:pointer;
  display:flex; align-items:center; gap:6px; padding:7px 14px;
  font-family:var(--display); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink); background:var(--acid); border:var(--border); border-radius:999px; box-shadow:3px 3px 0 var(--ink);
}
.filters-toggle[aria-expanded="true"]{background:var(--sky)}
.filters-count{min-width:18px; padding:0 5px; border-radius:999px; background:var(--ink); color:var(--acid); font-size:11px; text-align:center}
.filters-panel{
  position:absolute; top:52px; left:12px; z-index:1100;
  width:min(680px, calc(100% - 24px)); max-height:calc(100% - 64px); overflow:auto;
  padding:8px; border-radius:var(--radius);
  background:rgba(12,9,23,.9); backdrop-filter:blur(8px); border:2px solid var(--ink-3);
  box-shadow:6px 6px 0 var(--ink);
}
.filters-panel .filters{margin:0 0 6px; border:0; background:transparent; backdrop-filter:none; padding:4px 6px}
.filters-panel .filters:last-child{margin-bottom:0}
/* Map hidden: filters sit inline above the list */
.map-wrap.is-map-hidden .filters-toggle{display:none}
.map-wrap.is-map-hidden .filters-panel{position:static; width:auto; max-height:none; background:transparent; border:0; box-shadow:none; padding:0; backdrop-filter:none}
.map-wrap.is-map-hidden .filters-panel .filters{background:rgba(26,15,58,.7); border:2px solid var(--ink-3); margin-bottom:10px}
.run-bar .map-toggle{margin-left:auto}

/* =====================================================================
   Snagging pass (2026-09-25): dark surfaces, hairline borders, small shadows,
   no wobble. Everything above still defines the structure; this block sets the
   finish. Delete it to go back to the loud version.
   ===================================================================== */
:root{
  --ink:#06050a;          /* page */
  --ink-2:#0f0c16;        /* panels */
  --ink-3:#231e30;        /* hairlines on panels */
  --surface:#13101b;      /* cards, bars, inputs, tooltips */
  --surface-2:#1c1827;    /* chips and pills on surfaces */
  --line:#2c2639;         /* 1px borders */
  --text:#ece6db;         /* primary text on dark */
  --text-dim:#9e97ae;     /* secondary text on dark (6.8:1 on --surface) */
  --border:1px solid var(--line);
  --radius:10px;
}
body{background:var(--ink)}
body::before{opacity:.35}

/* Surfaces: dark, hairline border, light text */
.card, .run-bar, .search-panel, #search, .pin-tooltip, .tippy-box[data-theme~='nomad'], .price-pin .pin-price{
  background-color:var(--surface); color:var(--text); border:var(--border);
}
.filters, .filters-panel{background:var(--ink-2); border:var(--border)}
.filters-panel{box-shadow:0 8px 24px rgba(0,0,0,.5)}
.map-wrap.is-map-hidden .filters-panel .filters{background:var(--ink-2); border:var(--border)}

/* Cards */
.card{box-shadow:3px 3px 0 var(--shadow-c)}
.card:hover, .card:nth-child(even):hover, .card.is-highlighted{transform:translateY(-2px); box-shadow:4px 5px 0 var(--shadow-c)}
.card.is-highlighted{outline:1px solid var(--acid); outline-offset:2px}
.card-body{padding:14px 14px 16px; gap:10px; border-bottom:1px dashed var(--line)}
.card-body::before, .card-body::after{width:14px; height:14px; bottom:-8px; background:var(--ink)}
.card-body::before{left:-8px}
.card-body::after{right:-8px}
.title a{color:var(--text); background:none}
.title a:hover{color:var(--acid)}
.meta, .where span, .card-foot, .run-status, .search-dates, .apify-credit, .pin-tooltip-source{color:var(--text-dim)}
.where strong{color:var(--text)}
.card-foot{border-top:1px solid var(--line)}
.rating{background:var(--surface-2); color:var(--text); border:var(--border)}
.price{border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); transform:none; font-size:16px}
.kind-badge, .stayed, .genius{border-width:1px}
.genius{background:var(--surface-2); border-color:var(--line)}
.deal{border-width:1px; transform:none}
.rank{-webkit-text-stroke:0; font-size:17px}

/* Bars, buttons, inputs */
.run-bar{box-shadow:none}
.run-title, .search-head h2, .search-steps{color:var(--text)}
.run-button, .map-toggle, .filters-toggle{border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink)}
.run-button:hover:not(:disabled), .map-toggle:hover{transform:translateY(-1px); box-shadow:3px 3px 0 var(--ink)}
.run-button:active:not(:disabled), .map-toggle:active{transform:translateY(1px); box-shadow:none}
#search{
  box-shadow:none; color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%239e97ae' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E");
}
#search::placeholder{color:var(--text-dim)}
#search:focus{transform:none; box-shadow:0 0 0 2px var(--acid); border-color:var(--ink)}
.chip, .toggle, .pill-select{border-width:1px}
.chip.is-active, .toggle[aria-pressed="true"], .toggle--pin[aria-pressed="true"]{transform:none; box-shadow:none; border:1px solid var(--ink)}
#maxPriceLabel{transform:none}
.pin-label, .pin-label--preset{border-width:1px; transform:none; box-shadow:none}
.header-menu a{border-width:1px}
.header-menu a:hover, .header-menu li:nth-child(even) a:hover{transform:none; box-shadow:none}

/* Map */
.map{border:var(--border); box-shadow:none}
.price-pin .pin-price{border:1px solid var(--line); box-shadow:1px 1px 0 var(--ink)}
.price-pin--approx .pin-price{border:1px dashed var(--text-dim); background:var(--ink-2)}
.price-pin.is-highlighted .pin-price, .price-pin:hover .pin-price{border:1px solid var(--ink); box-shadow:2px 2px 0 var(--hot)}
.pin-marker span{border-width:2px; box-shadow:2px 2px 0 var(--acid)}
.pin-tooltip{box-shadow:0 6px 18px rgba(0,0,0,.5)}
.leaflet-tooltip-top.pin-tooltip::before{border-top-color:var(--line)}
.tippy-box[data-theme~='nomad']{box-shadow:0 6px 18px rgba(0,0,0,.5)}
.tippy-box[data-theme~='nomad'] > .tippy-arrow{color:var(--surface)}
/* Map pins and pin tooltips: light gray, so black hearts stay visible */
.price-pin .pin-price, .pin-tooltip{background-color:#bdb9c4; color:var(--ink)}
.price-pin--approx .pin-price{background-color:#a09ba8; border-color:var(--ink)}
.pin-tooltip .pin-tooltip-source{color:#3d3548}
.leaflet-tooltip-top.pin-tooltip::before{border-top-color:#bdb9c4}

/* Ticker, header, logo */
.site-header::after{height:2px; bottom:-2px}
.logo-frame{border-width:2px; box-shadow:0 0 0 2px var(--ink), 0 0 14px rgba(170,205,45,.35)}

/* Ads, overlay, toast, auth bar */
.ad-card{border:1px dashed var(--ad); box-shadow:3px 3px 0 var(--ad)}
.ad-card.is-clickable:hover{transform:translateY(-2px); box-shadow:4px 5px 0 var(--ad)}
.ad-figure{border-bottom:1px dashed var(--ad)}
.search-panel{box-shadow:5px 5px 0 var(--hot)}
.search-bar{border:1px solid var(--line); background:var(--ink)}
.search-spinner{border-width:3px; border-color:var(--line); border-top-color:var(--hot); border-right-color:var(--acid)}
#searchMinimise{color:var(--text); border-color:var(--line)}
.search-pill{border:1px solid var(--ink); box-shadow:3px 3px 0 var(--hot)}
.toast{border:1px solid var(--ink); box-shadow:3px 3px 0 var(--hot); transform:translateX(-50%)}
.auth-bar{border-bottom:1px solid var(--ink)}
.site-footer{-webkit-text-stroke:1px var(--text-dim); border-top-width:2px}

/* Filters: a sidebar docked to the map's left edge (not a panel across the top) */
.filters-panel{
  top:0; left:0; bottom:0; width:min(300px, 85%); max-height:none;
  padding:52px 12px 12px; border-radius:var(--radius) 0 0 var(--radius);
  border-width:0 1px 0 0;
}
.filters-panel .filters{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 10px;
  margin:0 0 12px; padding:0 0 12px; border:0; border-bottom:1px solid var(--line); border-radius:0;
}
.filters-panel .filters:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.filters-panel .filters > .chips,
.filters-panel .filters > button,
.filters-panel .filters > .pin-label{grid-column:1 / -1; justify-self:start}
.filters-panel .filters > label{justify-self:start}
.filters-panel .pill-select, .filters-panel #maxPrice{width:100%; margin:0}
/* Icons in place of text labels (each has a tooltip and an aria-label) */
.filter-icon{font-size:18px; line-height:1; cursor:help; justify-self:center; align-self:center}
.filters-panel .filters > .filter-icon[data-tip^="Barrios"]{align-self:start; padding-top:5px}
.filter-glyph{font-family:var(--display); font-weight:900; font-size:15px; letter-spacing:-.02em; color:var(--acid); white-space:nowrap}
.chip--icon, .toggle--icon{font-size:18px; line-height:1; padding:6px 10px}
.filters-panel .filters > .filter-toggles{grid-column:1 / -1; display:flex; gap:8px}
.filter-range{display:flex; align-items:center; gap:8px; min-width:0}
.filter-range #maxPrice{flex:1; min-width:0}
#maxPriceLabel{white-space:nowrap}
/* Barrios: pick any number */
.barrio-chips{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.barrio-chip{
  padding:4px 10px; border-radius:999px; border:1px solid var(--line); cursor:pointer;
  background:var(--surface-2); color:var(--text-dim); font:600 12px var(--body);
}
.barrio-chip:hover{color:var(--text)}
.barrio-chip[aria-pressed="true"]{background:var(--acid); color:var(--ink); border-color:var(--ink)}
/* The toggle stays top-left, above the open sidebar */
.filters-toggle{z-index:1200}

/* Brighten the dark pass a touch; highlighted cards get their own colour */
:root{
  --ink:#0b0912;
  --ink-2:#15111e;
  --surface:#1e1929;
  --surface-2:#29223a;
  --surface-hi:#342a4d;   /* hovered / pin-linked card */
  --line:#3a3249;
  --text-dim:#aba4bb;     /* 6.4:1 on --surface */
}
body::before{opacity:.5}
.card:hover, .card:nth-child(even):hover, .card.is-highlighted{background-color:var(--surface-hi)}
.card.is-highlighted{outline:2px solid var(--acid); outline-offset:2px}
.card-foot{border-top-color:var(--line)}

/* =====================================================================
   Journeys (ADR 5): Explore / My journeys tabs, journey context, list, form
   ===================================================================== */
.mode-tabs{display:inline-flex; gap:2px; margin-top:14px; padding:3px; border:var(--border); border-radius:999px; background:var(--ink-2)}
.mode-tab{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim);
}
.mode-tab:hover{color:var(--text)}
.mode-tab.is-active{background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line)}
.journey-count{min-width:18px; padding:0 5px; border-radius:999px; background:var(--acid); color:var(--ink); font-size:11px; text-align:center}

/* Inside a journey the search bar becomes the context bar */
.journey-flag{display:none}
.run-bar.is-journey{border-color:var(--acid); box-shadow:inset 4px 0 0 var(--acid)}
.run-bar.is-journey .journey-flag{
  display:inline-block; padding:2px 8px; border-radius:6px; background:var(--acid); color:var(--ink);
  font-family:var(--display); font-weight:900; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
}
.journey-actions{display:inline-flex; gap:6px}
.journey-actions a.toggle{text-decoration:none}

/* My journeys */
.journeys-view{margin-top:14px}
.journeys-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.journey-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; align-content:start}
.journey-card{
  display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:var(--radius);
  background:var(--surface); border:var(--border); box-shadow:3px 3px 0 var(--acid); color:var(--text);
}
.journey-card--cancelled, .journey-card--past{opacity:.6; box-shadow:3px 3px 0 var(--line)}
.journey-card--booked{box-shadow:3px 3px 0 var(--sky)}
.journey-top{display:flex; gap:6px}
.journey-status, .journey-weekly{
  padding:2px 8px; border-radius:999px; border:1px solid var(--line);
  font-family:var(--display); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);
}
.journey-status--active{color:var(--ink); background:var(--acid); border-color:var(--ink)}
.journey-status--booked{color:var(--ink); background:var(--sky); border-color:var(--ink)}
.journey-name{margin:0; font-family:var(--display); font-weight:700; font-size:16px; line-height:1.2}
.journey-dates, .journey-stats{margin:0; font-size:13px; color:var(--text-dim)}
.journey-stats{color:var(--text)}
.journey-card-actions{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px}
.journey-card-actions a.run-button{text-decoration:none}

/* Journey form */
.journey-form{gap:12px}
.journey-form h2{margin:0; font-family:var(--display); font-weight:900; font-size:18px; text-transform:uppercase}
.journey-form label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; flex:1}
.journey-form label.check{flex-direction:row; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--text)}
.journey-form input[type="text"], .journey-form input[type="date"], .journey-form input[type="number"], .journey-form select{
  padding:8px 10px; border:var(--border); border-radius:8px; background:var(--ink-2); color:var(--text);
  font:500 14px var(--body); color-scheme:dark;
}
.journey-form input:focus, .journey-form select:focus{outline:2px solid var(--acid); outline-offset:1px}
.form-row{display:flex; gap:10px; flex-wrap:wrap}
.form-note{margin:0; font-size:12px; color:var(--text-dim)}
.form-error{margin:0; padding:8px 10px; border-radius:8px; background:rgba(197,43,110,.15); color:var(--text); border:1px solid var(--hot); font-size:13px}
.form-actions{display:flex; justify-content:flex-end; gap:8px}

/* First load: a quiet placeholder, and cards only pop in the first time */
.loading-note{color:var(--text-dim); font-family:var(--display); font-size:14px}
.card.no-pop{animation:none}

/* ---------- Splash: full screen on first load, above everything ---------- */
body.is-loading{overflow:hidden}
.splash{
  position:fixed; inset:0; z-index:5000; display:grid; place-items:center;
  background:
    radial-gradient(40vmax 40vmax at 20% 20%, rgba(197,43,110,.18), transparent 60%),
    radial-gradient(40vmax 40vmax at 80% 85%, rgba(170,205,45,.10), transparent 60%),
    var(--ink);
  transition:opacity .4s ease, visibility .4s ease;
}
.splash.is-done{opacity:0; visibility:hidden; pointer-events:none}
.splash-inner{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.splash .splash-logo{width:112px; height:112px; border-width:2px}
.splash .splash-logo .logo{transform:scale(1.12)}
.splash-word{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(22px, 5vw, 34px); text-transform:uppercase; letter-spacing:-.01em; color:var(--text)}
.splash .search-spinner{width:28px; height:28px}
.splash .tagline{margin:0 auto; font-size:clamp(15px, 2.6vw, 22px)}
.splash-note{margin:0; font-size:13px; font-weight:600; color:var(--text-dim)}

/* Explore: where + dates in the search bar */
.explore-dates{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
.explore-dates label{display:flex; flex-direction:column; gap:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim)}
.explore-dates select, .explore-dates input{
  padding:5px 8px; border:var(--border); border-radius:8px; background:var(--ink-2); color:var(--text);
  font:600 13px var(--body); color-scheme:dark;
}
.explore-dates input:focus, .explore-dates select:focus{outline:2px solid var(--acid); outline-offset:1px}
.run-bar .map-toggle{margin-left:0}
@media (max-width:720px){ .explore-dates{margin-left:0; width:100%} .explore-dates label{flex:1} }