/* FREE SAILING — the spatial engine's surface.
   Map and list are two presentations of one result set, so they share a shell
   and neither is a special case. Nothing here restyles site.css. */

.sp{ --sp-gap:16px; }

/* ── the control rail ─────────────────────────────────────────────────── */
.sp-rail{ display:flex; flex-direction:column; gap:11px; margin-bottom:14px; }
.sp-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sp-row.pull{ justify-content:space-between; }

.sp-lane{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:#fff; color:var(--ink-60); border-radius:999px; padding:8px 14px;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.sp-lane:hover{ border-color:var(--cyan); color:var(--navy); }
.sp-lane .n{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-25); font-size:12.5px; }
.sp-lane .sw{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.sp-lane[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.sp-lane[aria-pressed="true"] .n{ color:rgba(255,255,255,.72); }

.sp-field{
  border:1px solid var(--line); border-radius:999px; padding:8px 15px; font:inherit;
  font-size:14px; background:#fff; color:var(--ink); min-width:150px;
}
.sp-field:focus-visible{ outline:2px solid var(--cyan); outline-offset:1px; }

.sp-sw{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:#fff; border-radius:999px; padding:7px 14px 7px 11px;
  font-size:13.5px; font-weight:700; color:var(--ink-60); cursor:pointer;
}
.sp-sw i{
  width:30px; height:17px; border-radius:999px; background:var(--line);
  position:relative; transition:background .2s ease; flex:0 0 auto;
}
.sp-sw i::after{
  content:""; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:#fff; transition:transform .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.sp-sw[aria-pressed="true"]{ color:var(--navy); border-color:var(--teal); }
.sp-sw[aria-pressed="true"] i{ background:var(--teal); }
.sp-sw[aria-pressed="true"] i::after{ transform:translateX(13px); }

/* ── carried filters: visible, and always dismissible ─────────────────── */
.sp-chips{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.sp-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--line-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 6px 5px 13px;
  font-size:13px; font-weight:700; color:var(--navy);
}
.sp-chip.carried{ background:#FFF6E8; border-color:#E7D3B4; }
.sp-chip button{
  width:19px; height:19px; border:0; border-radius:50%; cursor:pointer; font:inherit;
  line-height:1; background:rgba(2,43,131,.1); color:var(--navy); font-size:13px;
}
.sp-chip button:hover{ background:var(--navy); color:#fff; }

/* ── map + list, one shell ────────────────────────────────────────────── */
.sp-body{ display:grid; min-width:0; gap:var(--sp-gap); align-items:start; }
.sp-body[data-view="map"]{ grid-template-columns:1fr; }
.sp-body[data-view="list"]{ grid-template-columns:1fr; }
.sp-body[data-view="split"]{ grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); }
.sp-body[data-view="map"] .sp-list,
.sp-body[data-view="list"] .sp-map{ display:none; }

.sp-map{ position:relative; max-width:100%; min-width:0; border-radius:16px; overflow:hidden; background:#030C14;
  height:clamp(420px, calc(100vh - var(--hd) - 250px), 760px); }
.sp-body[data-view="list"] .sp-map{ height:0; }
.sp-map .fsmap{ position:absolute; inset:0; }
.sp-cred{
  position:absolute; left:11px; bottom:9px; z-index:420; pointer-events:none;
  font-size:10.5px; color:rgba(255,255,255,.5); letter-spacing:.02em;
}
.sp-key{
  position:absolute; right:11px; bottom:9px; z-index:420; display:flex; gap:10px;
  flex-wrap:wrap; justify-content:flex-end; max-width:62%;
}
.sp-key span{ display:inline-flex; align-items:center; gap:5px; font-size:11px;
  font-weight:700; color:rgba(255,255,255,.82); letter-spacing:.02em; }
.sp-key i{ width:8px; height:8px; border-radius:50%; }
.sp-hint{
  position:absolute; left:11px; top:11px; z-index:420; pointer-events:none;
  background:rgba(5,19,31,.72); color:rgba(255,255,255,.86); font-size:12px;
  font-weight:700; padding:6px 11px; border-radius:999px; opacity:0;
  transition:opacity .3s ease;
}
.sp-hint.on{ opacity:1; }

/* ── the list ─────────────────────────────────────────────────────────── */
.sp-list{ display:flex; flex-direction:column; gap:9px;
  max-height:clamp(420px, calc(100vh - var(--hd) - 250px), 760px); overflow:auto;
  scrollbar-width:thin; }
.sp-body[data-view="list"] .sp-list{ max-height:none; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.sp-card{
  display:block; width:100%; text-align:left; border:1px solid var(--line);
  background:#fff; border-radius:13px; padding:12px 14px; cursor:pointer; font:inherit;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sp-card:hover{ border-color:var(--cyan); box-shadow:0 5px 18px rgba(2,43,131,.09);
  transform:translateY(-1px); }
.sp-card .t{ font-weight:700; color:var(--navy); font-size:14.5px; letter-spacing:-.01em; }
.sp-card .s{ color:var(--ink-40); font-size:12.5px; margin-top:3px; }
.sp-card .m{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.sp-card .m span{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--ink-60);
  background:var(--line-2); border-radius:999px; padding:3px 8px; }
.sp-card .bar{ width:4px; height:4px; border-radius:50%; display:inline-block;
  margin-right:6px; vertical-align:middle; }

/* A place card carries a real link to its own page (org.html) as a second
   row, appended as a sibling of .sp-card rather than nested inside it (see
   spatial-ui.js). The wrap takes over the border/hover the button used to
   own by itself, and wins the tie on specificity (same .0,2,0. as
   .sp-card:hover, later in the file) so hovering the card never shows two
   competing edges. */
.sp-card-wrap{ border:1px solid var(--line); border-radius:13px; background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease; }
.sp-card-wrap:hover{ border-color:var(--cyan); box-shadow:0 5px 18px rgba(2,43,131,.09); }
.sp-card-wrap .sp-card{ border:0; box-shadow:none; transform:none; border-radius:13px 13px 0 0; }
.sp-card-go{ display:block; padding:8px 14px 11px; margin-top:-1px;
  border-top:1px solid var(--line-2); font-size:12.5px; font-weight:700; color:var(--navy); }
.sp-card-go:hover{ text-decoration:underline; }

.sp-count{ font-size:13px; color:var(--ink-40); font-weight:600;
  font-variant-numeric:tabular-nums; }
.sp-none{ border:1px dashed var(--line); border-radius:13px; padding:22px;
  text-align:center; color:var(--ink-40); font-size:14px; }
.sp-none b{ display:block; color:var(--navy); font-size:16px; margin-bottom:5px; }

@media (max-width:1099px){
  .sp-body[data-view="split"]{ grid-template-columns:1fr; }
  .sp-body[data-view="split"] .sp-list{ max-height:none; display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}
@media (max-width:640px){
  /* Eight stacked controls pushed the map off the fold entirely. Each row
     becomes one swipeable line instead — the same treatment site.css already
     gives .lenses — so the rail costs three lines, not nine. */
  .sp-rail{ gap:8px; }
  .sp-row{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    scroll-snap-type:x proximity; padding-bottom:2px;
    margin-inline:calc(var(--pad,18px) * -1); padding-inline:var(--pad,18px); }
  .sp-row::-webkit-scrollbar{ display:none; }
  .sp-row > *{ flex:0 0 auto; scroll-snap-align:start; }
  .sp-row.pull{ overflow:visible; flex-wrap:wrap; }
  .sp-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .sp-chips::-webkit-scrollbar{ display:none; }
  .sp-lane, .sp-sw{ padding-top:7px; padding-bottom:7px; font-size:13px; }
  .sp-map{ height:clamp(340px, 62vh, 520px); border-radius:13px; }
  .sp-key{ display:none; }
  .sp-field{ min-width:0; width:150px; }
  .sp-field:first-child{ width:132px; }
}
@media (prefers-reduced-motion:reduce){
  .sp-card, .sp-lane, .sp-sw i, .sp-sw i::after, .sp-hint{ transition:none; }
}

/* the Map/List pair is a toggle, not a lane — keep it visually apart */
.sp-view{ gap:6px; }
.sp-view .sp-lane{ padding-inline:18px; }
@media (max-width:640px){ .sp-view{ overflow:visible; } }

/* MapLibre chrome, pulled onto our own ground */
.sp-map .maplibregl-ctrl-attrib{ background:rgba(4,16,28,.72); color:rgba(255,255,255,.62);
  font-size:10.5px; }
.sp-map .maplibregl-ctrl-attrib a{ color:rgba(255,255,255,.78); }
.sp-map .maplibregl-popup-content{ border-radius:12px; padding:13px 15px;
  box-shadow:0 10px 34px rgba(2,20,40,.4); }
.sp-here{ width:15px; height:15px; border-radius:50%; background:#22DDF9;
  border:2px solid #fff; box-shadow:0 0 0 4px rgba(34,221,249,.26); }

/* the density legend — drawn only when a real aggregation is under it */
.sp-legend{ position:absolute; left:11px; bottom:34px; z-index:430; width:186px;
  background:rgba(4,16,28,.82); border:1px solid rgba(255,255,255,.13);
  border-radius:11px; padding:9px 11px 10px; pointer-events:none; }
/* Matches spatial-maplibre.js RAMP exactly — the swatch has to read as the map. */
.sp-legend .ramp{ height:8px; border-radius:5px;
  background:linear-gradient(90deg,#1C5CB0,#1696CA,#1EC8A8,#8CD450,#F2CD37,#E23728); }
.sp-legend .ends{ display:flex; justify-content:space-between; margin-top:5px;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.68); }
.sp-legend .says{ margin-top:6px; font-size:11px; color:rgba(255,255,255,.86);
  font-variant-numeric:tabular-nums; line-height:1.35; }
@media (max-width:640px){ .sp-legend{ width:158px; bottom:30px; } }