/* Beach Map V1 — map-first front door (Session A). Deep Marine over Leaflet. */

.beach-map-page { display: flex; flex-direction: column; }

/* Verdict strip — the answer rides above the map, always. */
.map-verdict {
  padding: 9px 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.map-verdict a {
  color: #34D399;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.map-verdict.is-warn a { color: #F97316; }
.map-verdict.is-danger a { color: #EF4444; }

/* The map */
.map-shell { position: relative; }
#beach-map {
  height: min(62vh, 560px);
  background: #0B1620;
}
.leaflet-container { font: inherit; }

.near-me {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 800;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(15, 30, 44, 0.92);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* Pins — a bright dot + a small always-on label (readable over aerial). */
.beach-pin-wrap { background: none; border: none; }
.beach-pin {
  display: block;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: #34D399;
  border: 2.5px solid #F6FAFF;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.beach-pin.is-boat { background: #5ABEFF; }
#beach-map.labels-on .beach-pin-label { display: block; }
.beach-pin-label {
  display: none;   /* labels only past zoom 12 — they collide coast-wide */
  position: absolute;
  left: 14px;
  top: -3px;
  white-space: nowrap;
  color: #F6FAFF;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* The beach sheet — a FIXED slide-up overlay. (v1 placed it in-flow below
   the map, which on a phone meant it opened off-screen: "nothing happens".) */
.beach-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  max-height: 74vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.55);
  animation: sheet-up 0.22s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .beach-sheet { animation: none; }
}
.sheet-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.sheet-town {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.sheet-name { margin: 2px 0 6px; font-size: 1.35rem; }
.sheet-rip { margin: 0 0 8px; font-size: 0.86rem; font-weight: 700; }
.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sheet-tags span {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--inset);
  color: var(--muted);
  font-size: 0.74rem;
}
.sheet-line { margin: 5px 0; font-size: 0.9rem; line-height: 1.5; color: #DCE8F2; }
.sheet-insight { color: #F6FAFF; }
.sheet-verify { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted); }

.sheet-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sheet-btn {
  display: block;
  text-align: center;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
.sheet-btn-go {
  width: 100%;
  border: none;
  background: var(--emerald);
  color: #05241f;
}
.sheet-btn-ghost {
  border: 1px solid var(--border);
  background: var(--inset);
  color: #DCE8F2;
  font-size: 0.86rem;
}
.take-me-apps {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.take-me-apps a {
  flex: 1;
  text-align: center;
  padding: 9px 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--inset);
  color: #34D399;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

/* All Beaches list (also the no-map fallback) */
.map-list { margin: 8px 12px 0; }
.beach-list-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--inset);
  color: var(--text);
  cursor: pointer;
}
.beach-list-card strong { font-size: 0.98rem; }
.beach-list-card span { color: var(--muted); font-size: 0.78rem; }

.beach-map-page .beach-foot { margin: 14px 16px 20px; }

@media (min-width: 900px) {
  .beach-sheet { left: 50%; right: auto; transform: translateX(-50%); width: 520px; }
  .map-list { max-width: 900px; margin: 12px auto 0; width: calc(100% - 32px); }
}