/* ==========================================================================
   SurfCheck.nz — Spot page layout (v5)

   Page structure (top→bottom):
     1. Hero with title overlay (desktop adds subtitle + pills + best-rating badge)
     2. Mobile-only intro block (subtitle + pills + badge below image)
     3. Live conditions banner (right now) — darker neutral surface
     4. 7-day snapshot chip row
     5. Full 7-day detailed forecast grid (horizontal scroll)
     6. 30-day tides accordion
     7. Nearby spots strip
     8. Facts spec list (8 facts) + prose + sidebar (map + CTAs)

   Colour philosophy in this version: darker, more neutral. The blue/teal
   gradient surfaces from v4 made the page feel "lifted" everywhere. Now we
   reserve colour for meaningful signals (rating tiers, wave bars, tide H/L,
   "now" marker) and use a quiet ~4% white surface for cards.
   ========================================================================== */

/* Shared neutral surface used by conditions banner, forecast wrap, map card */
.surface-quiet {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.spot-hero {
  position: relative;
  width: 100%;
  height: clamp(240px, 50vh, 540px);
  overflow: hidden;
  background: var(--bg-2);
}
/* Gradient fallback for spots that don't have a hero JPG yet.
   Cyan/teal radial wash on a dark base — keeps the page feeling
   on-brand without pretending to show the actual break. */
.spot-hero.spot-hero-gradient {
  background:
    radial-gradient(1400px 600px at 80% -10%, rgba(77,222,255,0.20) 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 100%, rgba(34,197,173,0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
}
.spot-hero.spot-hero-gradient::after { display: none; }
.spot-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.spot-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6,18,31,0) 25%,
    rgba(6,18,31,0.45) 60%,
    rgba(6,18,31,0.88) 100%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .spot-hero { height: clamp(200px, 30vh, 280px); }
}

/* Save-star overlaid on the spot hero. Matches the drawer-hero treatment so
   the two contexts look identical. Bidirectionally synced with the map drawer
   via SurfCheck.favs (see personalization.js).

   Two stars in DOM: one at top-right of the hero (mobile), one inline with
   the <h1> title (desktop). They share data-save-id, so taps on either are
   reflected in both — and in the /map drawer if it's also open. */
.spot-hero .save-star.spot-hero-save {
  width: 44px; height: 44px;
  font-size: 20px;
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.25);
  z-index: 3;
}
.spot-hero .save-star.spot-hero-save.saved {
  background: rgba(232,184,75,0.28);
}
/* Mobile star — absolutely positioned at top-right of the full hero. */
.spot-hero .spot-hero-save-mobile {
  top: var(--gap-4);
  right: var(--gap-5);
}
/* Desktop star — sits inside .spot-title-row next to the <h1>.
   margin-right pulls it in from the overlay-inner's right edge to align
   with the right edge of the .conditions-card below (which has gap-5 of
   internal padding-right that the overlay-inner does not). */
.spot-hero .spot-hero-save-desktop {
  position: relative;     /* override the default absolute base */
  top: auto; right: auto;
  flex-shrink: 0;
  margin-right: var(--gap-5);
}
.spot-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  max-width: none;    /* full content width: the save-star sits at the right
                          edge, vertically aligned with the Period cell of the
                          RIGHT NOW band below (Che 2026-06-13) */
}
.spot-title-row .spot-title { margin: 0; }
/* Visibility per viewport. */
@media (max-width: 720px) {
  .spot-hero-save-desktop { display: none !important; }
}
@media (min-width: 721px) {
  .spot-hero-save-mobile  { display: none !important; }
}

.spot-hero-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--gap-5) var(--gap-5) var(--gap-6);
}
.spot-hero-overlay-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.spot-eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--gap-2);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.spot-eyebrow a {
  color: var(--accent);
  border-bottom: 1px dotted rgba(95,183,255,0.5);
  padding-bottom: 1px;
}
.spot-eyebrow .sep {
  color: rgba(255,255,255,0.7);
  font-weight: 400;
}
.spot-title {
  font-size: var(--f-display);
  line-height: 1.0;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}

.spot-hero-overlay .overlay-extras {
  margin-top: var(--gap-4);
  max-width: 760px;
}
.spot-hero-overlay .overlay-subtitle {
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.55;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
  margin: 0 0 var(--gap-4);
}
.spot-hero-overlay .spot-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.spot-hero-overlay .pill {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.18);
  color: #f3f7fc;
}
.spot-hero-overlay .pill-accent {
  background: rgba(95,183,255,0.30);
  border-color: rgba(95,183,255,0.55);
  color: #ffffff;
}
/* Hero spot-rating display (big number + pip bar) — sits between title and subtitle */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-3);
  padding: 6px 14px 6px 4px;
}
.hero-rating-num {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-2);
  text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.hero-rating-of {
  font-size: 0.45em;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  margin-left: 4px;
}
.hero-rating-bar {
  display: inline-flex;
  gap: 3px;
  flex-wrap: nowrap;
}
.hero-rating-bar .pip {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hero-rating-bar .pip.on   { background: var(--accent-2); box-shadow: 0 0 6px rgba(122,200,255,0.5); }
.hero-rating-bar .pip.half { background: rgba(122,200,255,0.55); }
.hero-rating-bar .pip.off  { background: rgba(255,255,255,0.18); }
.hero-rating-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
@media (max-width: 720px) {
  .hero-rating { margin-top: var(--gap-2); }
  .hero-rating-bar .pip { width: 14px; }
}

@media (max-width: 720px) {
  .spot-hero-overlay .overlay-extras { display: none; }
  .spot-hero-overlay { padding: var(--gap-4) var(--gap-5) var(--gap-5); }
}

/* ── Mobile-only intro block ───────────────────────────────────────────── */
.spot-introblock {
  display: none;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-5) var(--gap-5) 0;
}
@media (max-width: 720px) {
  .spot-introblock { display: block; }
}
.spot-subtitle {
  font-size: clamp(15px, 1.55vw, 17px);
  color: var(--text-2);
  margin: 0 0 var(--gap-4);
  max-width: 800px;
  line-height: 1.55;
}
.spot-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Live conditions banner ────────────────────────────────────────────── */
.conditions-band {
  max-width: var(--max-w);
  margin: var(--gap-5) auto 0;
  padding: 0 var(--gap-5);
}
.conditions-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--gap-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-4);
}
@media (min-width: 820px) {
  .conditions-card {
    grid-template-columns: minmax(220px, auto) 1fr;
    align-items: center;
    gap: var(--gap-5);
  }
}

.cond-now-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cond-now-label .freshness {
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-3);
  font-weight: 500;
  font-size: 11px;
}
.cond-rating-block { display: flex; flex-direction: column; }
.cond-rating-row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-3);
  flex-wrap: wrap;
}
/* Conditions banner ordering (HTML): LABEL → NUMBER → /10
   Sizes: LABEL = large, NUMBER = medium, /10 = small.
   The label is the immediate answer ("GOOD"); the number is the precise read. */
.cond-rating-label {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.cond-rating-num {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--text);
}
.cond-rating-num .of10 {
  font-size: 0.5em;
  color: var(--text-muted);
  margin-left: 2px;
  font-weight: 500;
}
.cond-rating-num.epic, .cond-rating-label.epic { color: var(--epic); }
.cond-rating-num.good, .cond-rating-label.good { color: var(--good); }
.cond-rating-num.mint, .cond-rating-label.mint { color: var(--mint); }
.cond-rating-num.grim, .cond-rating-label.grim { color: var(--grim); }
.cond-rating-num.fair, .cond-rating-label.fair { color: var(--fair); }
.cond-rating-num.poor, .cond-rating-label.poor { color: var(--poor); }
.cond-reason {
  font-size: 14px;
  color: var(--text-2);
  margin-top: var(--gap-2);
  line-height: 1.5;
}

.cond-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-3);
  padding: var(--gap-4) 0 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 820px) {
  .cond-stats {
    border-top: 0;
    border-left: 1px solid var(--border);
    padding: 0 0 0 var(--gap-5);
  }
}
.cstat { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.cstat-num {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.1;
}
.cstat-unit { font-size: 15px; color: var(--text-muted); margin-left: 3px; font-weight: 500; }
.cstat-label {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.conditions-error { color: var(--poor); font-size: 14px; }

/* ── 7-day snapshot (chip row between conditions and detailed forecast) ── */
.snapshot-band {
  max-width: var(--max-w);
  margin: var(--gap-4) auto 0;
  padding: 0 var(--gap-5);
}
.snapshot-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--gap-4);
}
.snapshot-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--gap-3);
}
.snapshot-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.snap-day {
  text-align: center;
  padding: 8px 4px 10px;
  border-radius: var(--r-2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.snap-day.epic { background: color-mix(in srgb, var(--epic) 10%, transparent); border-color: color-mix(in srgb, var(--epic) 32%, transparent); }
.snap-day.good { background: color-mix(in srgb, var(--good) 8%, transparent);  border-color: color-mix(in srgb, var(--good) 28%, transparent); }
.snap-day.mint { background: color-mix(in srgb, var(--mint) 8%, transparent);  border-color: color-mix(in srgb, var(--mint) 28%, transparent); }
.snap-day.grim { background: color-mix(in srgb, var(--grim) 8%, transparent);  border-color: color-mix(in srgb, var(--grim) 28%, transparent); }
.snap-day.fair { background: color-mix(in srgb, var(--fair) 6%, transparent);  border-color: color-mix(in srgb, var(--fair) 24%, transparent); }
.snap-day.poor { background: color-mix(in srgb, var(--poor) 6%, transparent); border-color: color-mix(in srgb, var(--poor) 22%, transparent); }
.snap-dow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.snap-num {
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.snap-day.epic .snap-num { color: var(--epic); }
.snap-day.good .snap-num { color: var(--good); }
.snap-day.mint .snap-num { color: var(--mint); }
.snap-day.grim .snap-num { color: var(--grim); }
.snap-day.fair .snap-num { color: var(--fair); }
.snap-day.poor .snap-num { color: var(--poor); }
.snap-lbl {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}

/* ── 7-DAY DETAILED FORECAST GRID (cleaner palette) ────────────────────── */
.forecast-section {
  max-width: var(--max-w);
  margin: var(--gap-5) auto 0;
  padding: 0 var(--gap-5);
}
.forecast-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--gap-3);
}
.forecast-section h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
}
.forecast-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.fc-wrap {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--gap-4) 0;
  overflow: hidden;
}
.fc-scroll {
  overflow-x: auto;
  padding: 0 0 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.fc-scroll::-webkit-scrollbar { height: 6px; }
.fc-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.fc-grid {
  display: flex;
  flex-direction: column;
  min-width: max-content;
  padding-left: var(--gap-4);
  padding-right: var(--gap-4);
}
.fc-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fc-row:last-child { border-bottom: none; }
.fc-row-lbl {
  width: 64px; flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text);
  display: flex; align-items: center;
  padding-right: var(--gap-2);
}
.fc-row-lbl-stack {
  flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 1px; line-height: 1.1;
}
.fc-row-lbl-stack span:last-child {
  color: var(--text-3); font-weight: 500;
}
.fc-col {
  width: 66px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(255,255,255,0.03);
  padding: 6px 2px;
  background: transparent;
}
.fc-col.first-of-day {
  border-left: 1px solid rgba(255,255,255,0.12);
}
.fc-col.now {
  background: rgba(95,183,255,0.12);
  border-left: 2px solid var(--accent) !important;
}

.fc-header-row { background: transparent; }
.fc-hdr-stack {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 6px 0;
}
.fc-day-hdr {
  font-size: 11px; font-weight: 700;
  color: var(--text); letter-spacing: 0.02em;
}
.fc-time-hdr {
  font-size: 10px; color: var(--text);
  letter-spacing: 0.04em;
}

/* Rating chips per slot — kept (these are the most important signal) */
.rating-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 6px; border-radius: 6px;
  min-width: 50px;
}
.rating-chip.epic { background: color-mix(in srgb, var(--epic) 13%, transparent); border: 1px solid color-mix(in srgb, var(--epic) 38%, transparent); }
.rating-chip.good { background: color-mix(in srgb, var(--good) 13%, transparent);  border: 1px solid color-mix(in srgb, var(--good) 34%, transparent); }
.rating-chip.mint { background: color-mix(in srgb, var(--mint) 13%, transparent);  border: 1px solid color-mix(in srgb, var(--mint) 34%, transparent); }
.rating-chip.grim { background: color-mix(in srgb, var(--grim) 13%, transparent);  border: 1px solid color-mix(in srgb, var(--grim) 34%, transparent); }
.rating-chip.fair { background: color-mix(in srgb, var(--fair) 11%, transparent);  border: 1px solid color-mix(in srgb, var(--fair) 32%, transparent); }
.rating-chip.poor { background: color-mix(in srgb, var(--poor) 12%, transparent); border: 1px solid color-mix(in srgb, var(--poor) 32%, transparent); }
.rating-chip.flat { background: rgba(140,148,159,0.08); border: 1px solid rgba(140,148,159,0.25); }
.rating-chip-score { font-size: 13px; font-weight: 700; }
.rating-chip-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.92;
}
.rating-chip.epic .rating-chip-score, .rating-chip.epic .rating-chip-label { color: var(--epic); }
.rating-chip.good .rating-chip-score, .rating-chip.good .rating-chip-label { color: var(--good); }
.rating-chip.mint .rating-chip-score, .rating-chip.mint .rating-chip-label { color: var(--mint); }
.rating-chip.grim .rating-chip-score, .rating-chip.grim .rating-chip-label { color: var(--grim); }
.rating-chip.fair .rating-chip-score, .rating-chip.fair .rating-chip-label { color: var(--fair); }
.rating-chip.poor .rating-chip-score, .rating-chip.poor .rating-chip-label { color: var(--poor); }
.rating-chip.flat .rating-chip-score, .rating-chip.flat .rating-chip-label { color: #9aa3ac; }

/* Wave bar — single muted blue, no gradient (less visual noise) */
.fc-wave-row .fc-col {
  align-items: flex-end; height: 90px; padding-bottom: 4px;
}
.wave-cell {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 3px;
}
.wave-bar {
  width: 14px;
  background: rgba(95,183,255,0.55);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
}
.wave-val { font-size: 11.5px; color: var(--text); font-weight: 600; }

/* Wind / swell — single muted text colour, no teal coloured arrows */
.wind-cell, .swell-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.wind-dir-line, .swell-dir-line {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--text-3);
  font-weight: 500; letter-spacing: 0.02em;
}
.dir-arrow {
  font-size: 12px; display: inline-block; line-height: 1;
  color: var(--text-3);
}
.fc-wind-row .wind-kt, .fc-swell-row .swell-period {
  font-size: 11px; color: var(--text); font-weight: 600;
}

.weather-cell { font-size: 17px; line-height: 1; }

/* Tide — keep H/L colours since they're semantic */
.tide-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: var(--text-muted);
}
.tide-event {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: 10px; letter-spacing: 0.02em; font-weight: 600;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.tide-event.high { background: rgba(95,183,255,0.16); color: var(--accent-2); }
.tide-event.low  { background: rgba(232,184,75,0.16); color: var(--sand); }
.tide-arrow-only {
  font-size: 14px; color: var(--text-muted);
  opacity: 0.45; line-height: 1;
}
.tide-h { font-size: 10px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }

/* UV — toned down */
.uv-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  padding: 0 7px;
  opacity: 0.85;
}

.forecast-loading, .tides-loading {
  padding: var(--gap-5);
  text-align: center;
  color: var(--text-3);
  font-style: italic;
  font-size: 14px;
}
.forecast-error, .tides-error {
  padding: var(--gap-5);
  text-align: center;
  color: var(--poor);
  font-size: 14px;
}

/* ── 30-day tides accordion ────────────────────────────────────────────── */
.tides-section {
  max-width: var(--max-w);
  margin: var(--gap-5) auto 0;
  padding: 0 var(--gap-5);
}
.tides-accordion {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}
.tides-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--gap-4) var(--gap-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transition: background 0.15s;
}
.tides-toggle:hover { background: rgba(255,255,255,0.03); }
.tides-toggle-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tides-toggle-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.tides-toggle-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}
.tides-toggle-right {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  color: var(--text-muted);
  font-size: 12px;
}
.tides-toggle-chevron {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s;
  color: var(--accent);
}
.tides-accordion.open .tides-toggle-chevron { transform: rotate(180deg); }
.tides-body {
  display: none;
  border-top: 1px solid var(--border);
}
.tides-accordion.open .tides-body { display: block; }
.tide-day-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: var(--gap-3);
  padding: 10px var(--gap-4);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.tide-day-row:last-child { border-bottom: 0; }
.tide-day-row.today { background: rgba(95,183,255,0.06); }
.tide-day-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.tide-day-label .today-tag {
  display: block;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.tide-events {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tide-evt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 5px;
  line-height: 1.3;
}
.tide-evt.high {
  background: rgba(95,183,255,0.10);
  border: 1px solid rgba(95,183,255,0.28);
}
.tide-evt.low {
  background: rgba(232,184,75,0.08);
  border: 1px solid rgba(232,184,75,0.28);
}
.tide-evt-type {
  font-weight: 700;
  font-size: 10.5px;
}
.tide-evt.high .tide-evt-type { color: var(--accent-2); }
.tide-evt.low  .tide-evt-type { color: var(--sand); }
.tide-evt-time { color: var(--text); font-weight: 500; }
.tide-evt-height { color: var(--text-muted); font-size: 10.5px; }
.tides-divider {
  padding: 8px var(--gap-4);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

/* ── Nearby spots strip ────────────────────────────────────────────────── */
.nearby-strip {
  max-width: var(--max-w);
  margin: var(--gap-5) auto 0;
  padding: 0 var(--gap-5);
}
.nearby-strip-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--gap-3);
}
.nearby-strip-list {
  display: flex;
  gap: var(--gap-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.nearby-strip-list::-webkit-scrollbar { display: none; }
.nearby-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.nearby-chip:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-2);
  color: var(--text);
}
.nearby-chip .dist {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Mobile-only satellite card + CTA card ─────────────────────────────── */
/* These two sections sit above the prose on mobile, so users see the map and
   booking CTAs early (between map and facts table). On desktop they're hidden
   because the sidebar already shows the same content. */
.mobile-map-card,
.mobile-cta-card {
  display: none;
  max-width: var(--max-w);
  margin: var(--gap-5) auto 0;
  padding: 0 var(--gap-5);
}
@media (max-width: 919.98px) {
  .mobile-map-card,
  .mobile-cta-card { display: block; }
  .desktop-map-card,
  .desktop-cta-card { display: none; }
}

/* ── Page grid (prose + sidebar) ───────────────────────────────────────── */
.spot-layout {
  max-width: var(--max-w);
  margin: var(--gap-6) auto 0;
  padding: 0 var(--gap-5) var(--gap-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-6);
}
@media (min-width: 920px) {
  .spot-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gap-7);
  }
}
@media (min-width: 1280px) {
  .spot-layout {
    grid-template-columns: minmax(0, 1fr) 400px;
  }
}

.spot-section { margin-bottom: var(--gap-6); }
.spot-section h2 {
  font-size: var(--f-h2);
  font-weight: 700;
  margin: 0 0 var(--gap-3);
  letter-spacing: -0.01em;
}
.spot-section h3 {
  font-size: var(--f-h3);
  font-weight: 700;
  margin: var(--gap-5) 0 var(--gap-2);
}
.spot-section p {
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0 0 var(--gap-3);
}
.spot-section ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--gap-2);
}
.spot-section ul li {
  position: relative;
  padding-left: 22px;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.65;
}
.spot-section ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

/* ── Facts spec list (8 facts) ─────────────────────────────────────────── */
.spot-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: rgba(255,255,255,0.025);
  overflow: hidden;
  margin-bottom: var(--gap-6);
}
@media (min-width: 920px) {
  .spot-facts {
    grid-template-columns: repeat(4, 1fr);
  }
}
.fact {
  padding: var(--gap-4) var(--gap-4) calc(var(--gap-4) - 2px);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 920px) {
  .fact:nth-child(4n) { border-right: 0; }
  .fact:nth-last-child(-n+4) { border-bottom: 0; }
}
@media (max-width: 919.98px) {
  .fact:nth-child(2n) { border-right: 0; }
  .fact:nth-last-child(-n+2) { border-bottom: 0; }
}
.fact-label {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.fact-value {
  font-size: 14.5px; font-weight: 600;
  color: var(--text); line-height: 1.4;
}

/* Inline gallery image */
.spot-figure { margin: 0 0 var(--gap-6); }
.gallery-item {
  aspect-ratio: 21 / 9;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
@media (max-width: 600px) {
  .gallery-item { aspect-ratio: 4 / 3; }
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.02); }
.gallery-caption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Sidebar */
.spot-sidebar {
  display: grid;
  gap: var(--gap-4);
  align-content: start;
}
@media (min-width: 920px) {
  .spot-sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--gap-4));
    align-self: start;
  }
}
.sidebar-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--gap-4);
}
.sidebar-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--gap-3);
}

.sidebar-map-card { padding: 0; overflow: hidden; }
.sidebar-map-card .sidebar-card-title {
  padding: var(--gap-4) var(--gap-4) 0;
  margin-bottom: var(--gap-3);
}
.spot-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 919.98px) {
  .spot-map-frame { aspect-ratio: 16 / 10; }
}
.spot-map-frame .maplibregl-canvas { width: 100% !important; height: 100% !important; }
.sidebar-map-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 13px;
}
.sidebar-map-meta {
  padding: var(--gap-3) var(--gap-4);
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--text-muted);
}
.sidebar-map-meta a { color: var(--accent); font-weight: 600; }

/* MapLibre compact attribution control — tiny, unobtrusive (Esri credit lives here) */
.spot-map-frame .maplibregl-ctrl-attrib {
  font-size: 9px;
  background: rgba(0,0,0,0.4) !important;
  color: rgba(255,255,255,0.6);
}
.spot-map-frame .maplibregl-ctrl-attrib a {
  color: rgba(255,255,255,0.7);
}

/* CTAs */
.cta-stack { display: grid; gap: var(--gap-2); }
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
  width: 100%;
  font-weight: 700;
}
.cta-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-2);
  color: var(--text);
}
.cta-btn:active { transform: translateY(1px); }
.cta-btn.primary {
  background: var(--accent);
  color: #04101c;
  border-color: var(--accent);
}
.cta-btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #04101c;
}
.cta-btn .label-main { display: block; font-size: 14.5px; font-weight: 700; }
.cta-btn .label-sub  { display: block; font-size: 12px; font-weight: 500; opacity: 0.75; margin-top: 2px; }
.cta-btn .label-arrow { font-size: 18px; font-weight: 400; flex-shrink: 0; margin-left: 12px; }

/* Aotearoa Surf in-content promo — bright cyan (matches --epic) to feel
   on-brand with the rating system without competing with it on the actual
   EPIC tier indicator. */
.aotearoa-promo {
  margin: var(--gap-6) 0;
  padding: var(--gap-5);
  background: linear-gradient(135deg, rgba(77,222,255,0.10) 0%, rgba(77,222,255,0.04) 100%);
  border: 1px solid rgba(77,222,255,0.30);
  border-radius: var(--r-3);
}
.aotearoa-promo h3 {
  margin: 0 0 var(--gap-2);
  font-size: var(--f-h3); font-weight: 700; color: var(--epic);
}
.aotearoa-promo p {
  margin: 0 0 var(--gap-3);
  color: var(--text-2);
  font-size: 15.5px; line-height: 1.6;
}
.aotearoa-promo .promo-actions { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.aotearoa-promo .cta-btn { flex: 1 1 auto; min-width: 220px; width: auto; }

/* ==========================================================================
   SPOT MEDIA GALLERY — "More of [spot]"

   Three independent rows so the layout never has awkward grid holes:
     1. Videos row    — fixed-width tiles in a flex row, wraps if many
     2. Lifestyle row — single full-width 16:9 banner
     3. Gallery row   — uniform 3:2 tiles in an auto-fill grid

   Each row only renders if its content exists.
   Click → lightbox (image modal) or video modal.
   ========================================================================== */
.spot-media-section { margin: var(--gap-7) 0; }
.spot-media-heading {
  margin: 0 0 var(--gap-4);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* Shared tile look — used by all three rows */
.spot-media-tile {
  position: relative;
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-3);
  cursor: pointer;
  transition: transform 0.05s, box-shadow 0.15s;
}
.spot-media-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.spot-media-tile:active { transform: translateY(0); }
.spot-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spot-media-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 12px 10px;
  font-size: 12.5px;
  color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 100%);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  pointer-events: none;
  line-height: 1.4;
}
/* Photographer / videographer credit — subtle grey suffix on the caption */
.spot-media-credit {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}

/* Row 1: videos — flex of fixed-width tiles. Each grows to share row
   width, capped so 1 video doesn't dominate. Wraps to a new line when
   the container can't hold them side by side. */
.spot-media-videos-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  margin-bottom: var(--gap-3);
}
.spot-media-videos-row .spot-media-video {
  flex: 1 1 280px;
  max-width: 520px;
  aspect-ratio: 16 / 9;
}

/* Row 2: lifestyle — always full width, wide aspect for the banner feel */
.spot-media-lifestyle-row { margin-bottom: var(--gap-3); }
.spot-media-lifestyle-row .spot-media-lifestyle {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Row 3: gallery — uniform 3:2 tiles. 220px min means ~4 tiles per row
   in the spot-page main column at desktop widths. */
.spot-media-gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--gap-3);
}
.spot-media-gallery-row .spot-media-gallery {
  aspect-ratio: 3 / 2;
}

/* Video tile overlay (subtle dim + play glyph) */
.spot-media-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
  transition: background 0.15s;
  pointer-events: none;
}
.spot-media-video:hover::after { background: rgba(0,0,0,0.36); }
.spot-media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,0.6);
  z-index: 1;
  pointer-events: none;
}

/* ── Image lightbox (separate from video modal) ─────────────────────────── */
.image-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gap-5);
}
.image-modal.open { display: flex; }
.image-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 24, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.image-modal-frame {
  position: relative;
  max-width: min(1300px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.image-modal-frame img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-3);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.image-modal-caption {
  font-size: 13.5px;
  color: var(--text-2);
  text-align: center;
  max-width: 880px;
  padding: 0 var(--gap-3);
  min-height: 1.2em;
}
.image-modal-close {
  position: absolute;
  top: -44px; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  font-family: inherit;
}
.image-modal-close:hover { background: rgba(255,255,255,0.22); }
.image-modal-prev, .image-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;   /* visual centring of the ‹ › glyph */
}
.image-modal-prev { left: -52px; }
.image-modal-next { right: -52px; }
.image-modal-prev:hover, .image-modal-next:hover { background: rgba(255,255,255,0.22); }
/* On narrow viewports the nav buttons can't sit outside — move them inside */
@media (max-width: 900px) {
  .image-modal-prev { left: 8px; }
  .image-modal-next { right: 8px; }
}

/* ── Video modal (reused from /learn/ + /favourites/) ─────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: rgba(4, 12, 24, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: var(--gap-5);
}
.video-modal.open { display: flex; }
.video-modal-frame {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.video-modal-frame iframe { width: 100%; height: 100%; border: 0; }
.video-modal-close {
  position: absolute;
  top: -50px; right: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.video-modal-close:hover { background: rgba(255,255,255,0.2); }

/* ── Live webcam launcher band ─────────────────────────────────────────── */
.livecam-band {
  max-width: var(--max-w);
  margin: var(--gap-4) auto 0;
  padding: 0 var(--gap-5);
}
.livecam-launch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  background: linear-gradient(135deg, rgba(255,77,77,0.10), rgba(255,255,255,0.035));
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 13px 16px;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.livecam-launch:hover { border-color: var(--border-2, rgba(255,255,255,0.2)); }
.livecam-launch:active { transform: translateY(1px); }
.livecam-dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255,77,77,0.6);
  animation: livecam-pulse 1.8s infinite;
}
@keyframes livecam-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,77,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,77,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}
.livecam-launch-text { display: flex; flex-direction: column; gap: 1px; }
.livecam-launch-main { font-weight: 700; font-size: 15px; }
.livecam-launch-sub { font-size: 12px; color: var(--text-3); }
.livecam-launch-arrow { margin-left: auto; color: var(--text-3); font-size: 16px; }

/* ── Live webcam modal (frames the provider's cam page, credited) ──────── */
.cam-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.cam-modal.open { display: block; }
.cam-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(4,12,24,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cam-modal-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(1040px, 94vw);   /* landscape on desktop, near-full-width on mobile */
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--surface, #0e1f30);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.cam-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.cam-modal-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cam-modal-title { font-weight: 700; font-size: 14px; }
.cam-tab {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cam-tab.active {
  background: rgba(122,200,255,0.18);
  border-color: rgba(122,200,255,0.5);
  color: #fff;
}
.cam-modal-close {
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.cam-modal-close:hover { background: rgba(255,255,255,0.16); }
.cam-modal-scroll {
  overflow-y: auto;     /* vertical only — width always fits, so never any horizontal scroll */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #000;
  flex: 1 1 auto;
}
.cam-stage { width: 100%; }
/* Responsive video-player iframe (rtsp.me / ipcamlive / aketech / YouTube) */
.cam-player { width: 100%; background: #000; }
.cam-player iframe {
  display: block;
  width: 100%;
  height: min(64vh, 600px);
  border: 0;
  background: #000;
}
/* Auto-refreshing JPG cam (Windy / SURFCO) — fills width, scrolls if tall */
.cam-img { display: block; width: 100%; height: auto; background: #000; }
/* Link-out (provider blocks framing) */
.cam-linkout { padding: 40px 22px; text-align: center; color: var(--text-2); }
.cam-linkout p { margin: 0 0 16px; font-size: 14px; }
.cam-linkout-btn {
  display: inline-block;
  background: var(--accent, #2f9be0);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 999px;
}
.cam-linkout-btn:hover { filter: brightness(1.08); }
/* The provider cam page is fixed-width. We render the iframe at its natural
   width then CSS-scale it to fit the popup (set by spot.js). The wrapper
   reserves the SCALED footprint so vertical scrolling stays correct. */
.cam-frame-wrap {
  margin: 0 auto;       /* centre any leftover gap */
  /* width + height are set inline by spot.js (sizeCamFrame) */
}
.cam-modal-frame {
  display: block;
  width: 1000px;        /* natural width of the provider page (CAM_NAT_W in spot.js) */
  height: 1500px;       /* generous so the whole page fits without an inner scrollbar */
  border: 0;
  transform-origin: top left;   /* transform: scale() applied by spot.js */
}
.cam-modal-credit {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
}
.cam-modal-credit a { color: var(--accent-2, #7ac8ff); text-decoration: none; }
.cam-modal-credit a:hover { text-decoration: underline; }

/* ── Community cam CTAs (Che 2026-06-13) ─────────────────────────────────
   livecam-none = the no-cam invitation band; livecam-add = the small
   'know another cam' link under an existing cam launcher. Both open the
   feedback widget preset to webcam mode. */
.livecam-band.livecam-none .livecam-launch { opacity: 0.88; }
.livecam-dot.off {
  background: var(--text-muted);
  box-shadow: none;
  animation: none;
}
.livecam-add {
  display: block;
  margin: 6px auto 0;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.livecam-add:hover { color: var(--accent); }

/* ── Collaborative / wiki-style "suggest an edit" affordances ─────────── */
.spot-wiki-note {
  font-size: 13px;
  color: var(--text-3, #7f93a7);
  line-height: 1.5;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px dashed var(--border, rgba(255,255,255,0.14));
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.spot-wiki-note .spot-edit-ico { color: var(--accent, #5fb7ff); }
.spot-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.spot-sec-head h2 { margin-bottom: 0; }
.spot-edit {
  background: none;
  border: none;
  color: var(--text-3, #7f93a7);
  font: 600 12.5px system-ui, sans-serif;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color .15s, background .15s;
}
.spot-edit:hover { color: var(--accent, #5fb7ff); background: rgba(95,183,255,0.08); }
.spot-edit-ico { font-style: normal; }
.spot-facts-foot { margin: -16px 0 22px; text-align: right; }
.spot-contribute { margin: 22px 0; }
.spot-contribute-btn {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(95,183,255,0.06);
  border: 1px dashed rgba(95,183,255,0.4);
  color: var(--text-2, #9fb2c4);
  border-radius: 12px;
  padding: 14px 18px;
  font: 600 14px system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.spot-contribute-btn:hover { border-color: var(--accent, #5fb7ff); color: var(--text, #eaf2fb); background: rgba(95,183,255,0.1); }
.spot-contribute-ico { color: var(--accent, #5fb7ff); font-size: 17px; line-height: 1; }

/* ── Embed-this-forecast CTA + modal ─────────────────────────────────── */
.embed-cta { max-width: 960px; margin: 18px auto 0; padding: 0 16px; text-align: center; }
.embed-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface, #101f30); color: var(--text-2, #c3d2e0);
  border: 1px solid var(--border, #20344a); border-radius: 12px;
  padding: 11px 18px; font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.embed-cta-btn:hover { border-color: var(--accent, #5fb7ff); color: var(--text, #eaf2fb); background: rgba(95,183,255,0.1); }
.embed-cta-ico { color: var(--accent, #5fb7ff); font-size: 16px; }

.embed-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.embed-modal[hidden] { display: none; }
.embed-modal-bg { position: absolute; inset: 0; background: rgba(3,10,18,0.72); }
.embed-modal-panel {
  position: relative; width: 100%; max-width: 820px; max-height: 92vh; overflow-y: auto;
  background: var(--bg-2, #0b1623); border: 1px solid var(--border, #20344a);
  border-radius: 16px; padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.embed-modal-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  background: transparent; border: none; color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; border-radius: 8px;
}
.embed-modal-x:hover { background: rgba(255,255,255,0.1); }
.embed-modal-title { font-size: 20px; font-weight: 800; color: var(--text, #eaf2fb); margin: 0 0 4px; }
.embed-modal-sub { font-size: 13.5px; color: var(--text-muted, #8aa0b4); line-height: 1.5; margin: 0 0 16px; }
.embed-opt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.embed-opt-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #8aa0b4); margin-right: 4px; min-width: 42px; }
.embed-style-btn, .embed-theme-btn {
  background: var(--surface, #101f30); color: var(--text-2, #c3d2e0);
  border: 1px solid var(--border, #20344a); border-radius: 9px; padding: 7px 14px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.embed-style-btn.active, .embed-theme-btn.active { background: var(--accent, #5fb7ff); color: #04101c; border-color: var(--accent, #5fb7ff); }
.embed-preview { background: #1a2735; border-radius: 14px; padding: 16px; display: flex; justify-content: center; margin-bottom: 16px; overflow-x: auto; }
.embed-preview iframe { width: 100%; height: 410px; border: 0; border-radius: 14px; background: transparent; display: block; margin: 0 auto; }
.embed-code-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted, #8aa0b4); margin-bottom: 6px; }
.embed-code {
  width: 100%; background: #060f1a; color: #aee0ff; border: 1px solid var(--border, #20344a);
  border-radius: 10px; padding: 11px 12px; font-size: 12px; line-height: 1.5; resize: vertical; margin-bottom: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.embed-copy-btn {
  width: 100%; background: var(--accent, #5fb7ff); color: #04101c; border: none; border-radius: 11px;
  padding: 13px; font-size: 14.5px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.embed-copy-btn:hover { filter: brightness(1.06); }
@media (max-width: 520px) { .embed-modal-panel { padding: 18px 16px 16px; } }