/* ---------------------------------------------------------
   Ayla Marina — design tokens
   Brand: deep sea teal + warm gold on warm off-white
   --------------------------------------------------------- */
:root{
  /* Ayla brand — pulled from ayla.com.jo live CSS */
  --ayla-aqua:        #3AB0C8;     /* their primary, used 60× in their CSS */
  --ayla-aqua-deep:   #2A8FA3;     /* darker for hover/active */
  --ayla-aqua-soft:   #CCE8ED;     /* light tint */
  --ayla-cream:       #FAF7F3;     /* their warm background */
  --ayla-cream-deep:  #F1ECE3;
  /* Legacy aliases (kept so existing rules don't break) */
  --ayla-teal:        #3AB0C8;
  --ayla-teal-deep:   #2A8FA3;
  --ayla-teal-soft:   #CCE8ED;
  --ayla-gold:        #3AB0C8;     /* repointed — Ayla doesn't use gold */
  --ayla-gold-soft:   #CCE8ED;
  --ayla-sand:        #FAF7F3;

  /* Neutrals — Ayla's actual charcoal/grey scale */
  --bg:               #FAF7F3;
  --surface:          #FFFFFF;
  --ink:              #3E3E3E;
  --ink-2:            #8C8C8C;
  --ink-3:            #B5B5B5;
  --muted:            #F1ECE3;
  --border:           #E2E2E2;
  --border-strong:    #D2D2D2;
  --shadow-1:         0 1px 2px rgba(62,62,62,.06), 0 1px 3px rgba(62,62,62,.08);
  --shadow-2:         0 6px 18px rgba(62,62,62,.10), 0 2px 6px rgba(62,62,62,.06);
  --shadow-3:         0 16px 48px rgba(62,62,62,.18), 0 4px 12px rgba(62,62,62,.08);
  --shadow-sheet:     0 -16px 48px rgba(62,62,62,.18), 0 -2px 6px rgba(62,62,62,.06);
  --destructive:      #F05B5B;

  /* Type */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Safe area */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  overscroll-behavior: none;
  height: 100dvh;
  width: 100vw;
}
button{ font: inherit; color: inherit; }
img{ display: block; }

.safe-top{ padding-top: calc(var(--safe-top) + 12px); }

/* ---------------------------------------------------------
   Splash
   --------------------------------------------------------- */
.splash{
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(160deg, var(--ayla-aqua) 0%, var(--ayla-aqua-deep) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: opacity 380ms var(--ease-out), visibility 380ms var(--ease-out);
}
.splash.hide{ opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner{ text-align: center; padding: 40px; max-width: 360px; }
.splash-logo{
  width: 200px; height: auto;
  margin: 0 auto 18px;
  display: block;
  filter: brightness(0) invert(1);   /* force official SVG to pure white */
  animation: float 3.8s ease-in-out infinite;
  -webkit-animation: float 3.8s ease-in-out infinite;
}
.splash-marina{
  display: none; /* logo carries the brand mark — redundant text removed */
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: 0.02em;
  margin: 0 0 14px;
  color: rgba(255,255,255,0.94);
  font-style: italic;
}
.splash-tag{
  margin: 0; font-size: 13px; opacity: 0.7;
  font-weight: 400; letter-spacing: 0.02em;
  max-width: 280px; margin: 0 auto;
  line-height: 1.5;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ---------------------------------------------------------
   Map stage + canvas
   --------------------------------------------------------- */
.stage{
  position: fixed; inset: 0;
  /* Match the marina PNG's own water hue so the seam vanishes */
  background:
    /* Vignette: darker at edges, brightest at center — frames the marina */
    radial-gradient(ellipse 65% 50% at 50% 50%, transparent 40%, rgba(14,79,88,.22) 100%),
    /* Sea base color tuned to the PNG's water tile */
    linear-gradient(180deg, #6BC0CB 0%, #4FB6C2 60%, #3FA3B0 100%);
  touch-action: none;
  overflow: hidden;
}
/* Wave texture — soft SVG pattern mimicking gentle ripples */
.stage::before{
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'><path d='M0 30 Q15 18 30 30 T60 30 T90 30 T120 30' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.10'/><path d='M0 50 Q15 38 30 50 T60 50 T90 50 T120 50' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.08'/></svg>");
  background-repeat: repeat;
  background-size: 120px 60px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
/* Highlight overlay — soft glints */
.stage::after{
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.22) 0, transparent 24%),
    radial-gradient(circle at 78% 68%, rgba(255,255,255,.16) 0, transparent 30%);
  pointer-events: none;
  z-index: 0;
}
.canvas{
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.map-img{
  width: 100%; height: auto;
  pointer-events: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.pins{ position: absolute; inset: 0; pointer-events: none; }

/* ---------- 3-concept map switcher ---------- */
.concept-switch{
  position: fixed;
  z-index: 34;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--safe-top) + 12px + 132px);  /* below the floating top bar */
  display: flex;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 4px;
  gap: 2px;
}
.concept-btn{
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent;
  padding: 8px 13px; border-radius: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-2); cursor: pointer;
  white-space: nowrap;
  transition: all 180ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.concept-btn svg{ width: 15px; height: 15px; }
.concept-btn:hover{ color: var(--ink); }
.concept-btn.on{
  background: var(--ayla-aqua);
  color: #fff;
  box-shadow: 0 1px 3px rgba(58,176,200,.35);
}
.concept-btn .badge{
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ayla-gold); color: #fff;
  padding: 1px 5px; border-radius: 999px; margin-left: 2px;
}

/* Satellite container (Leaflet) */
.satmap{
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 300ms;
}
body.concept-satellite .satmap{ opacity: 1; visibility: visible; }
body.concept-satellite .canvas,
body.concept-satellite .water-shimmer,
body.concept-satellite .boats,
body.concept-satellite .routes,
body.concept-satellite .pins,
body.concept-satellite .map-tools,
body.concept-satellite .scale-bar,
body.concept-satellite .reset-btn{ display: none !important; }

/* Branded Leaflet markers — teardrop with logo (matches illustrated map) */
.sat-pin{
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; pointer-events: auto;
  transition: transform 220ms var(--ease-spring);
}
.sat-pin:hover{ transform: translateY(-2px) scale(1.05); z-index: 5; }
.sat-pin .sat-teardrop{
  width: 38px; height: 38px;
  background: var(--c);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.40);
  flex-shrink: 0;
}
.sat-pin .sat-inner{
  width: 28px; height: 28px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(45deg); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.sat-pin .sat-inner img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sat-pin .sat-initials{
  font-family: var(--serif); font-weight: 700;
  color: var(--c); font-size: 11px;
}
.sat-pin .sat-name{
  margin-top: 4px;
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.sat-pin.active .sat-teardrop{
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ayla-aqua), 0 8px 20px rgba(0,0,0,.5);
  animation: satPop 320ms var(--ease-spring);
}
.sat-pin.active .sat-name{
  background: var(--ink); color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  font-weight: 700;
}
@keyframes satPop{
  0%{ transform: rotate(-45deg) scale(.6); }
  60%{ transform: rotate(-45deg) scale(1.1); }
  100%{ transform: rotate(-45deg) scale(1); }
}
.leaflet-container{ background: #1a2530; font-family: var(--sans); }
.leaflet-control-attribution{ font-size: 9px !important; }

@media (max-width: 600px){
  .concept-switch{ top: auto; bottom: calc(var(--safe-bottom) + 86px); }
  .concept-btn{ padding: 7px 10px; font-size: 11px; }
  .concept-btn span{ display: none; }
  .concept-btn svg{ width: 17px; height: 17px; }
  /* Compact Leaflet zoom controls + reset button on phone */
  .leaflet-control-zoom a{
    width: 28px !important; height: 28px !important;
    line-height: 26px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  .leaflet-bar{ box-shadow: 0 2px 8px rgba(0,0,0,.22) !important; border: 0 !important; }
  .reset-btn{
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important;
  }
  .reset-btn svg{ width: 16px !important; height: 16px !important; }
}
@media (min-width: 960px){
  .concept-switch{ left: calc(400px + (100vw - 400px)/2); top: 24px; }
}
@media (min-width: 1280px){
  .concept-switch{ left: calc(440px + (100vw - 440px)/2); }
}

/* ---------- Atmosphere: water shimmer + drifting boats ---------- */
.water-shimmer{
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 320px 80px at 12% 18%, rgba(255,255,255,.22) 0, transparent 60%),
    radial-gradient(ellipse 280px 70px at 92% 35%, rgba(255,255,255,.18) 0, transparent 60%),
    radial-gradient(ellipse 360px 90px at 50% 92%, rgba(255,255,255,.16) 0, transparent 60%),
    radial-gradient(ellipse 240px 60px at 8% 65%, rgba(255,255,255,.14) 0, transparent 60%);
  mix-blend-mode: screen;
  animation: shimmer 8s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes shimmer{
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50%  { transform: translate(8px, -4px) scale(1.04); opacity: 1; }
  100% { transform: translate(-6px, 6px) scale(1); opacity: 0.7; }
}

.boats{ display: none !important; }   /* boats disabled per Ayla feedback */
.boat{
  position: absolute;
  width: 26px; height: 26px;
  color: rgba(62,62,62,0.75);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
  animation: drift var(--dur, 32s) linear infinite;
}
.boat svg{ width: 100%; height: 100%; }
@keyframes drift{
  0%   { transform: translate(var(--from-x, -40px), 0) rotate(var(--ang, 0deg)); }
  50%  { transform: translate(calc(var(--to-x, 60px) * 0.5), -2px) rotate(var(--ang, 0deg)); }
  100% { transform: translate(var(--to-x, 60px), 0) rotate(var(--ang, 0deg)); }
}
@media (prefers-reduced-motion: reduce){
  .water-shimmer, .boat{ animation: none !important; }
}

.pin{
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  transition: transform 220ms var(--ease-spring), filter 220ms var(--ease-out);
  animation: pinDropIn 480ms var(--ease-spring) backwards;
  animation-delay: calc(var(--pin-i, 0) * 22ms);
}
@keyframes pinDropIn{
  0%   { transform: translate(-50%, calc(-100% - 18px)) scale(0.4); opacity: 0; }
  60%  { transform: translate(-50%, -100%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .pin{ animation: none; }
}
.pin .pin-dot{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c);
  border: 2.5px solid #fff;
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,.2),
    0 1px 2px rgba(0,0,0,.18),
    0 3px 8px rgba(0,0,0,.22);
  margin: 0 auto 0;
  transform: translateY(50%);
  position: relative;
  z-index: 2;
}
.pin .pin-dot::after{
  /* Inner highlight gradient for a polished look */
  content: '';
  position: absolute;
  top: 1px; left: 2px;
  width: 5px; height: 4px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  filter: blur(0.5px);
}
.pin:hover .pin-dot{
  transform: translateY(50%) scale(1.22);
  transition: transform 200ms var(--ease-spring);
}
.pin .pin-teardrop{
  display: none;
  width: 48px; height: 48px;
  background: var(--c);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.30);
  margin-bottom: 4px;
  position: relative;
}
.pin .pin-teardrop .pin-inner{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  overflow: hidden;
}
.pin .pin-teardrop .pin-inner img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pin .pin-teardrop .pin-inner svg{
  width: 18px; height: 18px; color: var(--c);
}
.pin .pin-teardrop .pin-inner .initials{
  font-family: var(--serif); font-weight: 700;
  color: var(--c); font-size: 12px;
}
.pin-label{
  position: absolute;
  top: calc(50% + 22px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,.1),
    0 1px 2px rgba(0,0,0,.12),
    0 4px 12px rgba(0,0,0,.10);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  letter-spacing: -0.01em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tiny stem dot connecting label to pin */
.pin-label::before{
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.97);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 0.5px rgba(8,58,66,.1);
}
.pins.show-labels .pin .pin-label{ opacity: 1; }
.pin .pin-label.collide{ opacity: 0 !important; }
.pin:hover .pin-label,
.pin:focus-visible .pin-label{ opacity: 1 !important; z-index: 4; }
.pin.active .pin-label{
  opacity: 1 !important;
  top: calc(50% + 42px);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(8,58,66,.35);
  font-size: 12px;
  padding: 5px 10px;
  z-index: 6;
  max-width: 180px;
}
.pin.active .pin-label::before{
  background: var(--ink);
  box-shadow: none;
}
.pin.active{ z-index: 5; }
.pin.active .pin-dot{ display: none; }
.pin.active .pin-teardrop{ display: flex; animation: pop 280ms var(--ease-spring); }
.pin.dim{ filter: grayscale(.7) opacity(.32); transform: translate(-50%, -100%) scale(.85); }
.pin.dim .pin-label{ display: none; }
@keyframes pop{
  0%{ transform: rotate(-45deg) scale(.4); opacity: 0; }
  60%{ transform: rotate(-45deg) scale(1.12); opacity: 1; }
  100%{ transform: rotate(-45deg) scale(1); opacity: 1; }
}

/* ---------------------------------------------------------
   Top bar (frosted)
   --------------------------------------------------------- */
.topbar{
  position: fixed; top: 0; left: 12px; right: 12px; z-index: 30;
  margin-top: calc(var(--safe-top) + 12px);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  box-shadow: var(--shadow-2);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 14px;
}
.safe-top{
  padding-top: 0;
}

.brand{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-id{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo{ height: 32px; width: auto; max-width: 56px; object-fit: contain; display: block; flex-shrink: 0; }
.brand-name{
  font-family: var(--serif); font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em; margin: 0; color: var(--ink);
  line-height: 1.1;
}
.brand-accent{ color: var(--ayla-aqua); font-style: italic; font-weight: 500; }

.level-switch{
  display: flex; gap: 2px;
  background: rgba(14,79,88,.08);
  border-radius: 12px;
  padding: 3px;
  font-size: 12px; font-weight: 600;
}
.level-switch button{
  border: 0; background: transparent;
  padding: 7px 14px; min-height: 32px;
  border-radius: 9px;
  color: var(--ink-2); cursor: pointer;
  transition: all 180ms var(--ease-out);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.level-switch button[aria-selected="true"]{
  background: var(--ayla-teal);
  color: #fff;
  box-shadow: 0 1px 3px rgba(14,79,88,.3);
}

.search-trigger{
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px; min-height: 48px;
  color: var(--ink-3); font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms;
}
.search-trigger:active{ border-color: var(--ayla-teal); }
.search-trigger svg{ width: 18px; height: 18px; color: var(--ink-2); flex-shrink: 0; }
.search-trigger span{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

/* ---------------------------------------------------------
   Filter chips
   --------------------------------------------------------- */
.chips{
  position: fixed; left: 0; right: 0; z-index: 25;
  top: calc(var(--safe-top) + 12px + 124px);
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding: 6px 16px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar{ display: none; }
.chip{
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px; min-height: 36px;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
  cursor: pointer;
  transition: all 160ms var(--ease-out);
  user-select: none;
}
.chip:active{ transform: scale(.96); }
.chip .swatch{ width: 8px; height: 8px; border-radius: 50%; background: var(--c, #999); }
.chip[aria-pressed="true"]{
  background: var(--ayla-teal);
  color: #fff;
  border-color: var(--ayla-teal);
}
.chip[aria-pressed="true"] .swatch{ box-shadow: 0 0 0 1.5px #fff; }
.chip.chip-all{ font-weight: 700; }

/* ---------------------------------------------------------
   Routes layer (wayfinding)
   --------------------------------------------------------- */
.routes{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.route-path{
  fill: none;
  stroke: var(--ayla-aqua);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1 10;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
  animation: routeFlow 1.6s linear infinite;
}
@keyframes routeFlow{
  to { stroke-dashoffset: -22; }
}
.route-endpoint{
  fill: var(--ayla-aqua);
  stroke: #fff;
  stroke-width: 2;
}

/* ---------------------------------------------------------
   Hand-traced SVG marina map
   --------------------------------------------------------- */
.marina-map{
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(180deg, #6BC0CB 0%, #4FB6C2 60%, #3FA3B0 100%);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.marina-map:active{ cursor: grabbing; }
#marina-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
  will-change: transform;
}
.marina-pins{
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
.marina-pin{
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 220ms var(--ease-spring);
}
.marina-pin:hover{ z-index: 5; }
.marina-pin .marina-pin-dot{
  width: 16px; height: 16px;
  background: var(--c);
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.marina-pin .marina-pin-label{
  margin-top: 4px;
  background: rgba(255,255,255,0.98);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.22), 0 0 0 0.5px rgba(0,0,0,.08);
  letter-spacing: -0.01em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marina-pin.active .marina-pin-dot{
  width: 22px; height: 22px;
  border-width: 3px;
  box-shadow: 0 0 0 3px var(--ayla-aqua), 0 6px 18px rgba(0,0,0,.35);
}
.marina-pin.active .marina-pin-label{
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  z-index: 6;
}
.marina-pin.collide .marina-pin-label{ opacity: 0; }
/* Satellite-only mode: hide every piece of the illustrated map UI */
.map-satellite .canvas,
.map-satellite .water-shimmer,
.map-satellite .boats,
.map-satellite .scale-bar,
.map-satellite .map-tools,
.map-satellite .reset-btn,
.map-satellite .map-style-picker{ display: none !important; }
.map-satellite .stage{ background: #1a2530; }
.map-satellite .stage::before,
.map-satellite .stage::after{ display: none; }
/* Leaflet handles all touch — pass pointer events through stage to satmap */
.map-satellite .stage{ touch-action: auto; }
/* (Legacy .sat-pin overrides removed — see new teardrop+logo styles above) */
/* Pin label readability on satellite imagery: stronger shadow + white outline */
.sat-pin .sat-name{
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.1), 0 0 12px rgba(255,255,255,0.4);
  text-shadow: none;
}

/* Cluster badge — appears when several POIs sit on top of each other */
.sat-cluster{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 0 4px rgba(255,255,255,0.35);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--ease-spring);
  position: relative;
}
.sat-cluster:hover{ transform: scale(1.1); z-index: 6; }
.sat-cluster:active{ transform: scale(0.95); }
.sat-cluster::after{
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  animation: clusterPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes clusterPulse{
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 0; }
}
.maplibregl-ctrl-attrib{ font-size: 10px !important; opacity: 0.7; }
.maplibregl-ctrl-attrib-button{ background-color: rgba(255,255,255,0.9) !important; }
.maplibregl-ctrl button{ background-color: rgba(255,255,255,0.94) !important; }
.maplibregl-canvas{ outline: none; }

/* ---------------------------------------------------------
   Map Style picker (top-left)
   --------------------------------------------------------- */
.map-style-picker{
  position: fixed;
  z-index: 32;
  display: flex;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  padding: 4px;
  gap: 2px;
}
.msp-btn{
  border: 0; background: transparent;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.msp-btn svg{ width: 15px; height: 15px; }
.msp-btn:hover{ color: var(--ink); }
.msp-btn.msp-active{
  background: var(--ayla-aqua);
  color: #fff;
  box-shadow: 0 1px 3px rgba(14,79,88,.3);
}
@media (max-width: 959px){
  .map-style-picker{
    top: calc(var(--safe-top) + 14px);
    left: 12px;
  }
  /* When mobile, push the topbar a bit down so the picker sits clear */
  /* No change — the picker overlays at z 32, topbar at z 30, so picker is above */
}
@media (min-width: 960px){
  .map-style-picker{
    top: 24px;
    left: calc(400px + 24px);
  }
}
@media (min-width: 1280px){
  .map-style-picker{ left: calc(440px + 24px); }
}

/* ---------------------------------------------------------
   Map tools: compass, +/- zoom, scale bar
   --------------------------------------------------------- */
.map-tools{
  position: fixed; right: 16px; z-index: 28;
  top: calc(var(--safe-top) + 14px);
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
}
.map-tool{
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: transform 160ms var(--ease-spring), background 160ms;
}
.map-tool:active{ transform: scale(.92); }
.map-tool:hover{ background: #fff; }
.map-tool svg{ width: 22px; height: 22px; }
.map-tool-group{
  display: flex; flex-direction: column;
  border-radius: 12px;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.map-tool-group .map-tool{
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  width: 42px; height: 38px;
}
.map-tool-divider{ height: 1px; background: var(--border); }

.scale-bar{
  position: fixed; left: 16px; z-index: 27;
  bottom: calc(var(--safe-bottom) + 24px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  pointer-events: none;
}
.scale-line{
  width: 60px; height: 2px;
  background: var(--ink);
  position: relative;
}
.scale-line::before, .scale-line::after{
  content: ''; position: absolute; top: -3px;
  width: 2px; height: 8px; background: var(--ink);
}
.scale-line::before{ left: 0; }
.scale-line::after{ right: 0; }

@media (min-width: 960px){
  .map-tools{ right: 24px; top: 24px; }
  .scale-bar{ left: calc(400px + 24px); }
}
@media (min-width: 1280px){
  .scale-bar{ left: calc(440px + 24px); }
}

/* ---------------------------------------------------------
   Reset zoom button (FAB)
   --------------------------------------------------------- */
.reset-btn{
  position: fixed; right: 16px; z-index: 28;
  bottom: calc(var(--safe-bottom) + 24px);
  width: 48px; height: 48px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ayla-teal);
  transition: transform 160ms var(--ease-spring), opacity 220ms var(--ease-out);
}
.reset-btn[hidden]{ display: none; }
.reset-btn:active{ transform: scale(.92); }
.reset-btn svg{ width: 22px; height: 22px; }

/* ---------------------------------------------------------
   Bottom sheet
   --------------------------------------------------------- */
.sheet{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(255,255,255,0.97);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: var(--shadow-sheet);
  padding-bottom: calc(var(--safe-bottom) + 24px);
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.34, 1.30, 0.45, 1);
  visibility: hidden;
  max-height: 80dvh;
  display: flex; flex-direction: column;
}
.sheet[aria-hidden="false"]{
  visibility: visible;
  transform: translateY(0);
}
.sheet.dragging{ transition: none; }

.sheet-handle{
  padding: 10px 0 6px;
  display: flex; justify-content: center;
  cursor: grab; flex-shrink: 0;
  touch-action: none;
}
.sheet-handle .grab{
  width: 42px; height: 5px; border-radius: 3px;
  background: rgba(14,79,88,.2);
}
.sheet-body{
  padding: 0 22px 8px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.sheet-head{ display: flex; align-items: flex-start; gap: 14px; }
.sheet-logo{
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--ayla-gold-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.sheet-logo img{ width: 100%; height: 100%; object-fit: cover; }
.sheet-logo .initials{
  font-family: var(--serif); font-weight: 700;
  font-size: 26px; color: var(--ayla-aqua);
}

.sheet-titles{ flex: 1; min-width: 0; padding-top: 2px; }
.sheet-name{
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sheet-meta{
  margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.sheet-meta .swatch{ width: 8px; height: 8px; border-radius: 50%; background: var(--c, #999); }

.sheet-close{
  border: 0; background: var(--muted);
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  color: var(--ink-2);
  transition: background 160ms;
}
.sheet-close:active{ background: var(--border-strong); }
.sheet-close svg{ width: 18px; height: 18px; }

.sheet-desc{
  margin: 16px 0 0; font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
}

.sheet-actions{
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.act{
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--muted);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 4px;
  font-size: 10px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  min-height: 60px;
  transition: transform 160ms var(--ease-out), background 160ms;
  -webkit-tap-highlight-color: transparent;
}
.act svg{ width: 20px; height: 20px; }
.act:active{ transform: scale(.96); }
.act svg{ width: 22px; height: 22px; }
.act-primary{
  background: var(--ayla-teal);
  color: #fff;
  border-color: var(--ayla-teal);
}
.act-primary:active{ background: var(--ayla-teal-deep); }

/* ---------------------------------------------------------
   Search overlay
   --------------------------------------------------------- */
.search-overlay{
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 240ms var(--ease-out), opacity 240ms, visibility 240ms;
}
.search-overlay[aria-hidden="false"]{
  transform: translateY(0); opacity: 1; visibility: visible;
}
.search-head{
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px 12px;
  padding-top: calc(var(--safe-top) + 12px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.search-back{
  width: 44px; height: 44px; border-radius: 12px;
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.search-back svg{ width: 22px; height: 22px; }
.search-input-wrap{
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  background: var(--muted);
  border-radius: 14px;
  padding: 0 14px;
  min-height: 44px;
}
.search-input-wrap svg{ width: 18px; height: 18px; color: var(--ink-2); }
#search-input{
  flex: 1; border: 0; outline: 0;
  background: transparent;
  font: inherit; font-size: 16px;
  color: var(--ink); min-width: 0;
  padding: 12px 0;
}
#search-input::placeholder{ color: var(--ink-3); }
.search-results{
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bottom) + 32px);
}
.result-item{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background 140ms;
}
.result-item:active{ background: var(--muted); }
.result-logo{
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--ayla-gold-soft);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border);
}
.result-logo img{ width: 100%; height: 100%; object-fit: cover; }
.result-logo .initials{ font-family: var(--serif); font-weight: 700; color: var(--ayla-aqua); }
.result-body{ flex: 1; min-width: 0; }
.result-name{
  font-family: var(--serif); font-weight: 600; font-size: 16px;
  color: var(--ink); margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-meta{
  font-size: 12px; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.result-meta .sw{ width: 6px; height: 6px; border-radius: 50%; }
.result-chev{ color: var(--ink-3); flex-shrink: 0; }
.result-chev svg{ width: 18px; height: 18px; }
.search-empty{
  text-align: center; padding: 60px 24px;
  color: var(--ink-3);
}
.search-empty p{ margin: 0; font-size: 14px; }

/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */
.toast{
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 24px);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-3);
  transform: translate(-50%, 24px);
  opacity: 0;
  transition: transform 240ms var(--ease-out), opacity 240ms;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show{ transform: translate(-50%, 0); opacity: 1; }

/* ---------------------------------------------------------
   Motion preferences
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------
   Rail (mobile = transparent passthrough, desktop = sidebar)
   --------------------------------------------------------- */
.rail{ display: contents; }
.rail-list-wrap{ display: none; }

/* ---------------------------------------------------------
   Mobile: hide the floating chip strip + use bottom tab bar
   --------------------------------------------------------- */
@media (max-width: 959px){
  .chips{ display: none !important; }
  .topbar{
    /* Compact: only brand + level switch on mobile, search moves to tab bar */
    padding: 12px 14px;
  }
  .topbar .search-trigger{ display: none; }
  /* Make sure the floating reset/compass move up so they don't hide behind the tab bar */
  .reset-btn{ bottom: calc(var(--safe-bottom) + 88px); }
  .scale-bar{ bottom: calc(var(--safe-bottom) + 84px); }
  .map-tools{ top: calc(var(--safe-top) + 130px); }
  /* When a POI sheet is open, slide the tab bar down to give the sheet full reach */
  body.poi-open .tabbar{
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms var(--ease-out), opacity 240ms;
  }
  /* Sheet content keeps some bottom space so action buttons clear the device safe area */
  .sheet{ padding-bottom: calc(var(--safe-bottom) + 18px); }
}

/* ---------------------------------------------------------
   Mobile bottom tab bar
   --------------------------------------------------------- */
.tabbar{ display: none; }
@media (max-width: 959px){
  .tabbar{
    display: flex;
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(var(--safe-bottom) + 10px);
    z-index: 45;
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(8,58,66,.14), 0 1px 3px rgba(8,58,66,.06);
    padding: 4px;
    gap: 0;
  }
}
.tab{
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0; background: transparent;
  color: var(--ink-2);
  font-size: 12px; font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: background 200ms ease, color 200ms ease, transform 160ms var(--ease-spring);
  min-height: 36px;
}
.tab svg{ width: 16px; height: 16px; }
.tab span{ display: none; }
.tab.tab-active{
  color: var(--ink);
  background: rgba(8,58,66,0.06);
}
.tab.tab-active span{ display: inline; font-weight: 600; }
.tab.tab-active svg{ stroke-width: 2.2; color: var(--ayla-aqua); }
.tab:active{ transform: scale(.94); }
.tab-badge{
  position: absolute; top: 1px; right: 28%;
  background: var(--ayla-aqua); color: #fff;
  border-radius: 999px; padding: 0 5px;
  font-size: 9px; font-weight: 700; line-height: 14px;
  min-width: 14px; text-align: center;
  border: 1.5px solid #fff;
}

/* ---------------------------------------------------------
   Mobile sheets (filters, list)
   --------------------------------------------------------- */
.sheet-backdrop{
  position: fixed; inset: 0;
  background: rgba(8,58,66,0.36);
  z-index: 38;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease-out), visibility 240ms;
}
.sheet-backdrop.show{ opacity: 1; visibility: visible; }

.mobile-sheet{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 42;
  background: var(--surface);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  box-shadow: var(--shadow-sheet);
  max-height: 75dvh;
  display: flex; flex-direction: column;
  transform: translateY(105%);
  transition: transform 380ms cubic-bezier(0.34, 1.30, 0.45, 1);
  visibility: hidden;
  padding-bottom: calc(var(--safe-bottom) + 12px);
}
@media (min-width: 960px){ .mobile-sheet{ display: none !important; } }
.mobile-sheet[aria-hidden="false"]{
  transform: translateY(0);
  visibility: visible;
}
.mobile-sheet.dragging{ transition: none; }
.mobile-sheet-handle{
  display: flex; justify-content: center; padding: 9px 0 4px;
  cursor: grab; flex-shrink: 0;
  touch-action: none;
}
.mobile-sheet-handle .grab{
  width: 42px; height: 5px; border-radius: 3px;
  background: rgba(14,79,88,.2);
}
.mobile-sheet-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.mobile-sheet-head h2{
  font-family: var(--serif); font-weight: 600;
  font-size: 18px; margin: 0;
  color: var(--ink); letter-spacing: -0.01em;
}
.mobile-sheet-close{
  border: 0; background: var(--muted);
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-2);
}
.mobile-sheet-close svg{ width: 16px; height: 16px; }
.mobile-sheet-foot{
  display: flex; gap: 10px; padding: 14px 22px 6px;
  border-top: 1px solid var(--border);
}
.btn-primary, .btn-ghost{
  flex: 1; border: 0; padding: 14px 18px;
  border-radius: 14px; font: inherit;
  font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 48px;
}
.btn-primary{ background: var(--ayla-aqua); color: #fff; }
.btn-primary:active{ background: var(--ayla-aqua-deep); }
.btn-ghost{ background: var(--muted); color: var(--ink); }
.filters-grid{
  flex: 1; overflow-y: auto;
  padding: 16px 18px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.filter-cell{
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  cursor: pointer; min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  transition: all 160ms;
}
.filter-cell .dot{ width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.filter-cell .count{ margin-left: auto; font-size: 11px; color: var(--ink-2); font-weight: 500; }
.filter-cell.on{
  background: var(--ayla-aqua-soft);
  border-color: var(--ayla-aqua);
  color: var(--ayla-aqua-deep);
}
.filter-cell.on .count{ color: var(--ayla-aqua-deep); }
.list-sheet-content{
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
   Desktop split-view (≥ 960px)
   --------------------------------------------------------- */
@media (min-width: 960px){
  .rail{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 400px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    z-index: 30;
    box-shadow: 4px 0 24px rgba(8,58,66,.06);
  }
  .topbar{
    position: relative;
    margin: 0;
    left: 0; right: 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 28px 24px 20px;
  }
  .topbar .brand-name{ font-size: 26px; }
  .topbar .brand{ margin-bottom: 0; }
  /* Inline search input (no overlay) on desktop */
  .search-trigger{
    margin-top: 14px;
    padding: 0 14px;
    cursor: text;
    background: var(--surface);
    border: 1.5px solid var(--border);
    transition: border-color 160ms, box-shadow 160ms;
  }
  .search-trigger:hover{ border-color: var(--border-strong); }
  .search-trigger:focus-within{
    border-color: var(--ayla-aqua);
    box-shadow: 0 0 0 3px var(--ayla-aqua-soft);
  }
  .search-trigger:focus-within svg{ color: var(--ayla-aqua); }
  .search-trigger.is-input{
    padding: 0 14px;
  }
  .search-trigger.is-input input{
    flex: 1; min-width: 0;
    border: 0; outline: 0;
    background: transparent;
    font: inherit; font-size: 15px;
    color: var(--ink);
    padding: 12px 0;
    caret-color: var(--ayla-aqua);
  }
  .search-trigger.is-input input::placeholder{ color: var(--ink-3); }
  .search-trigger.is-input span{ display: none; }

  .chips{
    position: relative;
    top: auto;
    flex-wrap: wrap;            /* wrap into rows — no horizontal scroll on desktop */
    overflow: visible;
    padding: 12px 20px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    gap: 6px;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .chip{
    padding: 5px 10px;
    font-size: 11.5px;
    min-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .chip .swatch{ width: 6px; height: 6px; }

  .rail-list-wrap{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .rail-list-head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 24px 8px;
    background: var(--bg);
    position: sticky; top: 0; z-index: 2;
  }
  .rail-list-title{
    font-family: var(--serif);
    font-weight: 600;
    font-size: 16px;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .rail-list-count{
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .rail-list{
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }
  .rail-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 24px;
    cursor: pointer;
    border-top: 1px solid var(--border);
    transition: background 140ms;
    position: relative;
  }
  .rail-item:first-child{ border-top: 0; }
  .rail-item:hover{ background: var(--muted); }
  .rail-item.is-active{ background: var(--ayla-aqua-soft); }
  .rail-item.is-active::before{
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--ayla-aqua);
  }
  .rail-item .result-logo{ width: 40px; height: 40px; border-radius: 10px; }
  .rail-item .result-logo .initials{ font-size: 13px; }
  .rail-item .result-name{ font-size: 14px; margin-bottom: 1px; }
  .rail-item .result-meta{ font-size: 11px; }

  /* Map area shifted right */
  .stage{ left: 400px; }
  .reset-btn{ right: 24px; bottom: 24px; }

  /* Bottom sheet → slides up inside the rail, covering the list */
  .sheet{
    left: 0;
    right: auto;
    width: 400px;
    bottom: 0;
    top: auto;
    max-height: calc(100dvh - 220px);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--shadow-3);
  }

  /* Search overlay also confined to rail */
  .search-overlay{
    left: 0;
    width: 400px;
    box-shadow: 4px 0 24px rgba(8,58,66,.1);
  }

  /* Show labels by default on desktop */
  .pins .pin-label{ opacity: 1; }
  .pins .pin:not(.active) .pin-label{ opacity: 0.92; }

  /* Bigger pins on desktop — more dominant, easier to scan */
  .pin .pin-dot{ width: 22px; height: 22px; border-width: 3px; }
  .pin .pin-teardrop{ width: 58px; height: 58px; }
  .pin .pin-teardrop .pin-inner{ width: 46px; height: 46px; }
  .pin .pin-teardrop svg{ width: 24px; height: 24px; }
  .pin-label{ font-size: 12px; padding: 5px 9px; max-width: 160px; top: calc(50% + 26px); }
  .pin.active .pin-label{ font-size: 13px; top: calc(50% + 46px); }
}

@media (min-width: 1280px){
  .rail{ width: 440px; }
  .stage{ left: 440px; }
  .sheet{ width: 440px; }
  .search-overlay{ width: 440px; }
}