/* weather_map.css — Blue Verdict map · bright misty-coastal premium theme */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  /* ink / text */
  --wm-ink:             #082229;
  --wm-heading:         #123040;
  --wm-text:            #123040;
  --wm-text-secondary:  #4f6770;
  --wm-text-muted:      #607983;

  /* surfaces (sea glass) */
  --wm-mist:            #ecf4f4;
  --wm-mist-2:          #dff0ee;
  --wm-white:           #ffffff;
  --wm-page-base:       #cfe7e6;

  /* accents */
  --wm-accent:          #0f7c82;
  --wm-accent-bright:   #14979f;
  --wm-accent-strong:   #0a5b60;
  --wm-accent-soft:     rgba(15, 124, 130, 0.12);
  --wm-sand:            #dfaa63;
  --wm-sand-soft:       rgba(223, 170, 99, 0.18);

  /* condition scale */
  --wm-cond-great:      #2f7f57;
  --wm-cond-good:       #0a5b60;
  --wm-cond-fair:       #9c6500;
  --wm-cond-poor:       #b44732;
  --wm-cond-none:       #64748b;

  /* glass */
  --wm-glass:           linear-gradient(180deg, rgba(252, 254, 254, 0.86), rgba(245, 250, 251, 0.74));
  --wm-glass-strong:    linear-gradient(180deg, rgba(252, 254, 254, 0.94), rgba(244, 250, 251, 0.86));
  --wm-glass-border:    1px solid rgba(255, 255, 255, 0.6);
  --wm-hairline:        rgba(15, 124, 130, 0.12);

  /* shadow */
  --wm-shadow:          0 4px 22px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(8, 34, 41, 0.06);
  --wm-shadow-lg:       0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(8, 34, 41, 0.08);
  --wm-backdrop:        blur(16px) saturate(1.5);

  /* radii */
  --wm-r-pill:          999px;
  --wm-r-xl:            20px;
  --wm-r-lg:            14px;
  --wm-r-md:            10px;

  /* legacy aliases (kept so any stray reference still resolves) */
  --wm-surface:         var(--wm-glass);
  --wm-border:          var(--wm-hairline);
  --wm-accent-light:    var(--wm-accent-soft);
  --wm-accent-border:   rgba(15, 124, 130, 0.3);
  --wm-radius:          var(--wm-r-lg);
  --wm-radius-sm:       var(--wm-r-md);
}

/* ── Page layout ─────────────────────────────────────────────────────────── */

.weather-map-page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--wm-page-base);
  overflow: hidden;
}

.weather-map-page .site-header,
.weather-map-page .site-footer { display: none; }

.weather-map-page .floating-back-button { display: none !important; }

.weather-map-page #wm-timeline {
  bottom: 14px;
  transition: bottom 0.2s;
}

body.cookie-banner-visible.weather-map-page #wm-timeline,
.weather-map-page #wm-timeline.above-cookie {
  bottom: 78px;
}

.weather-map-page .page-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0;
}

.weather-map-page .page-shell .flash {
  position: absolute;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

/* ── Map container ───────────────────────────────────────────────────────── */

#weather-map-container {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#weather-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Embedded variant (spot page hero) ───────────────────────────────────── */
/* Used when the map is NOT fullscreen (no .weather-map-page body class).      */
/* Wraps #weather-map-container in a sized hero block with rounded corners.    */
.wm-embed {
  position: relative;
  height: clamp(440px, 62vh, 680px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  margin: 1rem 0 1.5rem;
  isolation: isolate;
}

.wm-embed #weather-map-container {
  position: relative;
  width: 100%;
  height: 100%;
  flex: none;
}

/* Hide the in-map "tela cheia" expand button on the embed — the dedicated     */
/* /mapa page is reachable from the global nav.                                */
.wm-embed #wm-fullscreen-btn { display: none; }

/* Slightly tighter chrome so the controls fit the smaller hero box. */
.wm-embed #wm-spot-panel { width: 300px; }

@media (max-width: 900px) {
  .wm-embed { height: 52vh; min-height: 380px; }
}

/* ── Embed: compact reflow (phones → small desktops, ≤1023px) ──────────────────
   The desktop floating layout only fits a tall, wide hero. In the embed the box
   height already drops to 52vh at ≤900px (and the page narrows on tablets), so
   the 8-item left rail is taller than the hero and collides with the topbar and
   timeline; the side drawer + right-side legend + wide timeline overlap each
   other and clip off the edges. Reflow into a compact layout that keeps every
   control on screen without overlap up to the 1023px tablet/desktop breakpoint;
   the full floating hero returns at ≥1024px where the box is reliably large. */
@media (max-width: 1023px) {
  /* Left rail → horizontal scrollable strip pinned to the bottom centre, so it
     stops spanning the full height and overlapping the topbar/timeline. */
  .wm-embed #wm-layer-nav {
    top: auto;
    bottom: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    border-radius: var(--wm-r-pill);
    padding: 5px 8px;
    gap: 2px;
    max-width: calc(100% - 20px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wm-embed #wm-layer-nav::-webkit-scrollbar { display: none; }
  .wm-embed .wm-layer-btn { padding: 6px 8px; min-width: auto; }
  .wm-embed .wm-layer-btn span { display: none; }
  .wm-embed .wm-layer-divider { width: 1px; height: auto; margin: 4px 3px; }

  /* The timeline crams 16 day labels into the narrow box and would collide with
     the bottom rail; the detail page shows the forecast as charts and /mapa keeps
     the interactive timeline, so drop it here. */
  .wm-embed #wm-timeline { display: none; }

  /* Spot card → compact left drawer (like desktop) instead of a full-width
     bottom sheet, so the map stays visible beside it rather than being fully
     covered. Slides in from the left; sits below the topbar and above the
     attribution "i"; its own content scrolls when the hero is short. */
  .wm-embed #wm-spot-panel {
    top: 64px;
    left: 10px;
    right: auto;
    bottom: 120px;
    width: min(300px, 46%);
    max-height: none;
    border-radius: var(--wm-r-xl);
    transform: translateX(calc(-100% - 20px));
  }
  .wm-embed #wm-spot-panel.open { transform: translateX(0); }

  /* The score colorbar + current-value pointer help read the map colours, so
     keep it visible on the embed. Park it on the right, above the lifted zoom.
     (Bar height stays 116px — the value-pointer JS is keyed to that.) */
  .wm-embed #wm-legend.visible {
    display: flex;
    top: auto;
    bottom: 140px;
    right: 10px;
    left: auto;
  }

  /* The multi-sport selector is redundant on a spot page (the sport is already
     the page context) and would fight the legend for the right column — hide it
     so the colorbar has room. */
  .wm-embed #wm-sport-selector { display: none; }

  /* MapLibre's zoom (+/−, bottom-right) and the attribution "i" (bottom-left)
     both render in the bottom corners; lift them above the centred layer pill so
     the buttons aren't covered/clipped and the credits don't collide on narrow
     embeds. */
  .wm-embed .maplibregl-ctrl-bottom-right { bottom: 64px; }
  .wm-embed .maplibregl-ctrl-bottom-left { bottom: 64px; }
}

/* On phones the spot info panel covered the whole ~306–375px embed, leaving only
   a tan placeholder — the map looked broken. The spot's data is already shown
   elsewhere on the detail page, so hide the panel here and let the map (with its
   marker) be visible. Also tighten the embed height a bit. */
@media (max-width: 640px) {
  .wm-embed #wm-spot-panel,
  .wm-embed #wm-spot-panel.open { display: none; }
  .wm-embed { height: clamp(300px, 44vh, 380px); min-height: 0; }

  /* Keep a clean, useful control set on the embed: layer filters + satellite +
     current location. Hide the search box, sport toggle and the multi-sport
     selector to declutter the tiny phone hero. */
  .wm-embed .wm-search-wrap,
  .wm-embed #wm-sport-toggle-btn,
  .wm-embed #wm-sport-selector { display: none; }
}

/* ── Weather canvas overlay (kept subtle on light bg) ────────────────────── */

#weather-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0.55;
  will-change: contents;
  transform: translateZ(0);
}

/* ── Top glass bar ───────────────────────────────────────────────────────── */

#wm-topbar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  /* No bar background — search box and action buttons float on their own so the
     map reads cleanly behind them. */
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;   /* let the map pan through the empty gaps */
}

#wm-topbar > * { pointer-events: auto; }

/* Logo removed from the floating bar — keep the rule so any stray markup hides. */
.wm-topbar-logo { display: none; }

.wm-topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.wm-topbar-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.wm-topbar-brand {
  font-family: 'Barlow Condensed', 'Trebuchet MS', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wm-heading);
  white-space: nowrap;
}

.wm-search-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.wm-search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--wm-text-muted);
  pointer-events: none;
}

#wm-search-input {
  width: 100%;
  padding: 11px 14px 11px 36px;
  /* Floats on its own (no surrounding bar) → solid glass surface + shadow. */
  background: var(--wm-glass-strong);
  border: var(--wm-glass-border);
  border-radius: var(--wm-r-pill);
  box-shadow: var(--wm-shadow);
  backdrop-filter: var(--wm-backdrop);
  -webkit-backdrop-filter: var(--wm-backdrop);
  font-size: 13.5px;
  color: var(--wm-text);
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

#wm-search-input::placeholder { color: var(--wm-text-muted); }

#wm-search-input:focus {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--wm-accent-soft);
  box-shadow: 0 0 0 3px rgba(15, 124, 130, 0.1);
}

/* ── Search suggestions dropdown (combobox, mirrors the home search) ───────── */
.wm-search-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--wm-accent-soft);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(8, 34, 41, 0.18);
  padding: 6px;
}
.wm-search-menu.open { display: flex; }

.wm-search-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--wm-text);
}
.wm-search-option:hover,
.wm-search-option.active {
  background: rgba(15, 124, 130, 0.1);
}
.wm-search-option-label {
  font-size: 13.5px;
  font-weight: 600;
}
.wm-search-option-meta {
  font-size: 11.5px;
  color: var(--wm-text-muted);
}

.wm-topbar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.wm-topbar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--wm-glass-border);
  /* Each button floats on its own glass surface (no bar behind it). */
  background: var(--wm-glass-strong);
  box-shadow: var(--wm-shadow);
  backdrop-filter: var(--wm-backdrop);
  -webkit-backdrop-filter: var(--wm-backdrop);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-text-secondary);
  transition: background 0.14s, color 0.14s, box-shadow 0.14s, transform 0.1s;
}

.wm-topbar-btn:hover {
  background: var(--wm-white);
  color: var(--wm-accent);
  box-shadow: 0 2px 10px rgba(8, 34, 41, 0.1);
}

.wm-topbar-btn:active { transform: scale(0.94); }

.wm-topbar-btn.active {
  background: linear-gradient(160deg, var(--wm-accent-bright), var(--wm-accent-strong));
  color: #fff;
  box-shadow: 0 3px 12px rgba(15, 124, 130, 0.4);
}

.wm-topbar-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Left layer rail ─────────────────────────────────────────────────────── */

#wm-layer-nav {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--wm-glass);
  border: var(--wm-glass-border);
  border-radius: var(--wm-r-xl);
  padding: 7px;
  box-shadow: var(--wm-shadow);
  backdrop-filter: var(--wm-backdrop);
  -webkit-backdrop-filter: var(--wm-backdrop);
}

.wm-layer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--wm-r-md);
  background: transparent;
  cursor: pointer;
  color: var(--wm-text-secondary);
  transition: background 0.14s, color 0.14s;
  min-width: 56px;
}

.wm-layer-btn:hover { background: rgba(255, 255, 255, 0.6); color: var(--wm-accent); }

.wm-layer-btn.active {
  background: var(--wm-accent-soft);
  color: var(--wm-accent-strong);
}

.wm-layer-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.wm-layer-btn span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.wm-layer-divider {
  height: 1px;
  background: var(--wm-hairline);
  margin: 3px 6px;
}

#wm-particles-toggle.active {
  background: var(--wm-sand-soft);
  color: #8a5a1f;
}

/* ── Sport selector ──────────────────────────────────────────────────────── */

#wm-sport-selector {
  position: absolute;
  top: 74px;
  right: 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--wm-glass);
  border: var(--wm-glass-border);
  border-radius: var(--wm-r-xl);
  padding: 7px;
  box-shadow: var(--wm-shadow);
  backdrop-filter: var(--wm-backdrop);
  -webkit-backdrop-filter: var(--wm-backdrop);
}

.wm-sport-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--wm-r-md);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-text-secondary);
  transition: background 0.14s, color 0.14s;
}

.wm-sport-btn:hover { background: rgba(255, 255, 255, 0.6); color: var(--wm-accent); }

.wm-sport-btn.active {
  background: linear-gradient(160deg, var(--wm-accent-bright), var(--wm-accent-strong));
  color: #fff;
  box-shadow: 0 3px 12px rgba(15, 124, 130, 0.35);
}

.wm-sport-btn svg { width: 19px; height: 19px; display: block; flex-shrink: 0; }

/* Custom sport icons (design-system artwork) rendered as recolorable masks so
   they turn white on the active teal button. */
.wm-ico-mask {
  display: inline-block;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--wm-ico) center / contain no-repeat;
  mask: var(--wm-ico) center / contain no-repeat;
}
.wm-topbar-btn .wm-ico-mask { width: 19px; height: 19px; }
.wm-ico-mask[data-ico="surf"]     { --wm-ico: url("/static/img/sports/surf.png"); }
.wm-ico-mask[data-ico="kitesurf"] { --wm-ico: url("/static/img/sports/kitesurf.png"); }
.wm-ico-mask[data-ico="windsurf"] { --wm-ico: url("/static/img/sports/windsurf.png"); }
.wm-ico-mask[data-ico="wingfoil"] { --wm-ico: url("/static/img/sports/wingfoil.png"); }
.wm-ico-mask[data-ico="vela"]     { --wm-ico: url("/static/img/sports/vela.png"); }

/* ── Legend (right vertical colorbar) ────────────────────────────────────── */

#wm-legend {
  position: absolute;
  bottom: 92px;
  right: 14px;
  z-index: 20;
  width: 74px;
  background: var(--wm-glass);
  border: var(--wm-glass-border);
  border-radius: var(--wm-r-lg);
  box-shadow: var(--wm-shadow);
  backdrop-filter: var(--wm-backdrop);
  -webkit-backdrop-filter: var(--wm-backdrop);
  padding: 11px 8px 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

#wm-legend.visible { display: flex; }

#wm-legend-title {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--wm-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
}

.wm-legend-body {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 116px;
}

/* Tick on the colorbar marking the value currently shown at the map centre. */
.wm-legend-pointer {
  position: absolute;
  left: 0;
  width: 14px;            /* matches #wm-legend-bar width */
  height: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.wm-legend-pointer[hidden] { display: none; }
.wm-legend-pointer::before {
  content: "";
  position: absolute;
  left: -3px;
  width: 20px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--wm-ink);
}
.wm-legend-pointer-val {
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 4px;
  border-radius: 5px;
  background: var(--wm-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

#wm-legend-bar {
  width: 14px;
  height: 116px;
  border-radius: var(--wm-r-pill);
  box-shadow: inset 0 0 0 1px rgba(8, 34, 41, 0.08);
}

.wm-legend-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--wm-text-muted);
  text-align: left;
}

/* ── Timeline (bottom floating pill) ─────────────────────────────────────── */

#wm-timeline {
  position: absolute;
  bottom: 14px;
  left: 92px;
  right: 100px;
  z-index: 20;
  background: var(--wm-glass);
  border: var(--wm-glass-border);
  border-radius: var(--wm-r-pill);
  box-shadow: var(--wm-shadow);
  backdrop-filter: var(--wm-backdrop);
  -webkit-backdrop-filter: var(--wm-backdrop);
  padding: 8px 16px 8px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

#wm-timeline-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--wm-accent-bright), var(--wm-accent-strong));
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 3px 12px rgba(15, 124, 130, 0.4);
}

#wm-timeline-play:hover { transform: scale(1.06); }
#wm-timeline-play:active { transform: scale(0.95); }
#wm-timeline-play.playing { background: linear-gradient(160deg, var(--wm-accent-strong), var(--wm-accent)); }

#wm-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
#wm-play-icon svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Timeline track (free 7d teal + premium 16d hatched + draggable handle) */
.wm-tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.wm-tl-now { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wm-tl-now b {
  font-family: 'Barlow Condensed', 'Trebuchet MS', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--wm-text);
  white-space: nowrap;
}
.wm-tl-now span {
  font-size: 12px; color: var(--wm-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wm-tl-track { position: relative; height: 30px; cursor: pointer; touch-action: none; }
.wm-tl-rail {
  position: absolute; left: 0; right: 0; top: 13px; height: 5px;
  border-radius: 999px; background: rgba(16, 38, 51, 0.10); overflow: hidden;
}
.wm-tl-free {
  position: absolute; left: 0; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, var(--wm-accent), var(--wm-accent-bright)); opacity: 0.9;
}
.wm-tl-prem {
  position: absolute; top: 0; bottom: 0; left: 40%; right: 0;
  background-image: repeating-linear-gradient(45deg,
    rgba(223, 170, 99, 0.55) 0 6px, rgba(223, 170, 99, 0.18) 6px 12px);
}
.wm-tl-days { position: absolute; left: 0; right: 0; top: 0; height: 20px; pointer-events: none; }
.wm-tl-day {
  position: absolute; top: 0; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  color: #5a767e; text-transform: uppercase; white-space: nowrap; transform: translateX(-1px);
}
.wm-tl-day::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 1px; height: 9px;
  background: rgba(16, 38, 51, 0.22);
}
.wm-tl-day.prem { color: #b07d3a; }
.wm-tl-day.prem::before { background: rgba(176, 125, 58, 0.45); }
.wm-tl-handle {
  position: absolute; top: 7px; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--wm-accent);
  box-shadow: 0 2px 8px rgba(8, 34, 41, 0.25);
  transform: translateX(-50%); pointer-events: none; transition: left 0.1s linear;
}

.wm-tl-lock {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 12px; border-radius: var(--wm-r-pill);
  background: var(--wm-sand-soft); border: 1px solid rgba(223, 170, 99, 0.4);
  color: #8a5a16; cursor: pointer; transition: background 0.12s;
}
.wm-tl-lock:hover { background: rgba(223, 170, 99, 0.28); }
.wm-tl-lock svg { width: 14px; height: 14px; flex-shrink: 0; }
.wm-tl-lock b { font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ── Spot panel (left drawer) ────────────────────────────────────────────── */

#wm-spot-panel {
  position: absolute;
  top: 74px;
  left: 92px;
  bottom: 84px;
  width: 320px;
  z-index: 25;
  background: var(--wm-glass-strong);
  border: var(--wm-glass-border);
  border-radius: var(--wm-r-xl);
  box-shadow: var(--wm-shadow-lg);
  backdrop-filter: var(--wm-backdrop);
  -webkit-backdrop-filter: var(--wm-backdrop);
  transform: translateX(calc(-100% - 110px));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#wm-spot-panel.open { transform: translateX(0); }

.wm-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

#wm-spot-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
  color: var(--wm-text-secondary);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, transform 0.1s;
  box-shadow: 0 1px 4px rgba(8, 34, 41, 0.18);
}

#wm-spot-panel-close:hover { background: #fff; color: var(--wm-accent); }
#wm-spot-panel-close:active { transform: scale(0.92); }

/* Colored header (gradient by condition) */
.wm-panel-header {
  padding: 22px 18px 16px;
  color: #fff;
  position: relative;
  background: #64748b;
  background: linear-gradient(150deg, var(--wm-cond-none), color-mix(in srgb, var(--wm-cond-none) 70%, #000));
}

.wm-panel-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
}

.wm-panel-spot-name {
  font-family: 'Barlow Condensed', 'Trebuchet MS', sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.wm-panel-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.wm-panel-score-number {
  font-family: 'Barlow Condensed', 'Trebuchet MS', sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.wm-panel-score-denom {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 1px;
}

.wm-panel-grade-badge {
  flex-shrink: 0;
  display: block;
  height: 2.2rem;   /* width auto → SVG intrinsic ratio preserves grade scaling */
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.wm-verdict-pill {
  margin-left: auto;
  align-self: center;
  padding: 6px 12px;
  border-radius: var(--wm-r-pill);
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Panel body */
.wm-panel-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wm-panel-window {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--wm-r-md);
  background: var(--wm-accent-soft);
  color: var(--wm-accent-strong);
}

.wm-panel-window svg { width: 18px; height: 18px; flex-shrink: 0; }

.wm-panel-window-text { display: flex; flex-direction: column; gap: 1px; }

.wm-panel-window-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.wm-panel-window-value { font-size: 13.5px; font-weight: 700; }

/* Selected day/time the card is showing (set when the timeline is moved). */
.wm-panel-period {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wm-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wm-panel-period::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wm-accent-strong);
  flex: 0 0 auto;
}
.wm-panel-period[hidden] { display: none; }

.wm-panel-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.wm-tile {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--wm-r-md);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 4px rgba(8, 34, 41, 0.05);
}

.wm-tile-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wm-text-muted);
}

.wm-tile-label svg { width: 13px; height: 13px; flex-shrink: 0; }

.wm-tile-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--wm-heading);
  line-height: 1.05;
}

.wm-tile-sub {
  font-size: 11px;
  color: var(--wm-text-secondary);
  line-height: 1.2;
}

.wm-panel-spark {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wm-panel-spark-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wm-text-muted);
}

.wm-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 38px;
}

.wm-spark-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  opacity: 0.85;
}

/* Panel footer */
.wm-panel-footer {
  margin-top: auto;
  padding: 12px 14px 14px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--wm-hairline);
}

.wm-panel-action-btn {
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--wm-r-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.wm-panel-action-btn.primary {
  background: linear-gradient(160deg, var(--wm-accent-bright), var(--wm-accent-strong));
  color: #fff;
  box-shadow: 0 3px 12px rgba(15, 124, 130, 0.3);
}

.wm-panel-action-btn.primary:hover { filter: brightness(1.06); }

.wm-panel-action-btn.ghost {
  flex: 0 0 auto;
  width: 46px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--wm-hairline);
  color: var(--wm-text-secondary);
  font-size: 16px;
}

.wm-panel-action-btn.ghost:hover { color: var(--wm-sand); border-color: var(--wm-sand-soft); }

/* Active favorite: filled gold star on a soft sand chip. */
.wm-panel-action-btn.ghost.is-favorite {
  color: var(--wm-sand);
  background: var(--wm-sand-soft);
  border-color: rgba(223, 170, 99, 0.45);
}
.wm-panel-action-btn.ghost:disabled { opacity: 0.6; cursor: default; }

/* ── DOM pill badge markers ──────────────────────────────────────────────── */

.wm-marker {
  cursor: pointer;
  will-change: transform;
}

.wm-marker-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(8, 34, 41, 0.3);
  transition: transform 0.12s;
}

.wm-marker-dot:hover { transform: scale(1.25); }

.wm-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 3px;
  border-radius: var(--wm-r-pill);
  border: 1.5px solid #fff;
  box-shadow: 0 2px 8px rgba(8, 34, 41, 0.22);
  color: #fff;
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s;
}

.wm-pill::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--wm-pill-tip, currentColor);
}

.wm-pill:hover { transform: scale(1.06); z-index: 5; }

.wm-pill-score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.wm-pill-name {
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wm-marker.selected .wm-pill {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 4px 16px rgba(8, 34, 41, 0.32);
  z-index: 6;
}

/* ── Picker popup ────────────────────────────────────────────────────────── */

.wm-picker-popup .maplibregl-popup-content {
  background: var(--wm-glass-strong) !important;
  border: var(--wm-glass-border) !important;
  backdrop-filter: var(--wm-backdrop);
  border-radius: var(--wm-r-lg) !important;
  padding: 12px 14px !important;
  box-shadow: var(--wm-shadow) !important;
}

.wm-picker-popup .maplibregl-popup-tip {
  border-top-color: rgba(250, 253, 253, 0.92) !important;
  border-bottom-color: rgba(250, 253, 253, 0.92) !important;
}

.wm-picker-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 7px;
  color: var(--wm-accent-strong);
  display: flex;
  align-items: center;
  gap: 5px;
}

.wm-picker-title svg { width: 14px; height: 14px; }

.wm-picker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--wm-text-secondary);
}

.wm-picker-row:last-child { margin-bottom: 0; }
.wm-picker-row strong { color: var(--wm-heading); font-weight: 700; }

.wm-picker-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wm-picker-row-label svg { width: 14px; height: 14px; color: var(--wm-text-muted); }

/* ── Loading ─────────────────────────────────────────────────────────────── */

#wm-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(207, 231, 230, 0.5);
  z-index: 50;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s;
}

#wm-loading.hidden { opacity: 0; }

.wm-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(15, 124, 130, 0.16);
  border-top-color: var(--wm-accent);
  border-radius: 50%;
  animation: wm-spin 0.8s linear infinite;
}

@keyframes wm-spin { to { transform: rotate(360deg); } }

/* ── Spot hover tooltip ──────────────────────────────────────────────────── */

.wm-spot-tooltip-popup .maplibregl-popup-content {
  background: var(--wm-glass-strong);
  border: var(--wm-glass-border);
  border-radius: var(--wm-r-md);
  padding: 9px 12px;
  box-shadow: var(--wm-shadow);
  backdrop-filter: var(--wm-backdrop);
}

.wm-spot-tooltip-popup .maplibregl-popup-tip { display: none; }
.wm-spot-tooltip { font-family: system-ui, sans-serif; color: var(--wm-text-secondary); }
.wm-spot-tooltip-name { font-weight: 700; font-size: 13px; color: var(--wm-heading); }
.wm-spot-tooltip-loc { font-size: 11px; color: var(--wm-text-muted); margin-top: 1px; }
.wm-spot-tooltip-score {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 13px;
  color: var(--wm-text);
}
.wm-spot-tooltip-score strong { font-size: 16px; color: var(--wm-heading); }
.wm-spot-tooltip-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.wm-spot-tooltip-sport {
  font-size: 11px;
  color: var(--wm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wm-spot-tooltip-flat { margin-top: 5px; font-size: 12px; color: var(--wm-accent); }

#wm-spot-legend { display: none; }

/* ── MapLibre controls (light theme) ─────────────────────────────────────── */

.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.8) !important;
  color: var(--wm-text-secondary) !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

/* The credits "i" sits bottom-left, where the timeline (z-index 20) overlaps it.
   Lift the whole bottom-left control above the timeline so that, when expanded,
   the CARTO/OSM credits render on top instead of hidden beneath it. */
.maplibregl-ctrl-bottom-left { z-index: 40; }

.maplibregl-ctrl-attrib a { color: var(--wm-accent) !important; }

.maplibregl-ctrl-group {
  border-radius: var(--wm-r-md) !important;
  box-shadow: var(--wm-shadow) !important;
  border: var(--wm-glass-border) !important;
  background: var(--wm-glass) !important;
  overflow: hidden;
}

.maplibregl-ctrl-group button {
  background: transparent !important;
  color: var(--wm-text-secondary) !important;
}

.maplibregl-ctrl-group button:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  color: var(--wm-accent) !important;
}

/* ── Responsive: tablet ──────────────────────────────────────────────────── */

@media (max-width: 980px) {
  #wm-layer-nav { top: 74px; transform: none; }
  #wm-spot-panel { width: 290px; }
}

/* ── Responsive: mobile (fullscreen /mapa page) ──────────────────────────── */

@media (max-width: 640px) {
  #wm-topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 6px 8px 6px 12px;
  }

  .wm-topbar-brand { display: none; }

  .wm-topbar-btn { width: 36px; height: 36px; }

  #wm-layer-nav {
    top: auto;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    border-radius: var(--wm-r-pill);
    padding: 5px 8px;
    gap: 2px;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  #wm-layer-nav::-webkit-scrollbar { display: none; }

  .wm-layer-btn { padding: 6px 8px; min-width: auto; }
  .wm-layer-btn span { display: none; }
  .wm-layer-divider { width: 1px; height: auto; margin: 4px 3px; }

  #wm-sport-selector { display: none; }
  #wm-sport-selector.open {
    display: flex;
    flex-direction: row;
    top: 60px;
    right: 8px;
  }

  #wm-spot-panel {
    width: 100%;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62vh;
    border-radius: var(--wm-r-xl) var(--wm-r-xl) 0 0;
    transform: translateY(110%);
  }

  #wm-spot-panel.open { transform: translateY(0); }

  #wm-timeline {
    bottom: 8px;
    left: 8px;
    right: 8px;
    gap: 8px;
    padding: 7px 10px;
  }
  .wm-tl-now span { display: none; }
  .wm-tl-lock b { display: none; }
  .wm-tl-lock { padding: 7px; }

  #wm-legend {
    bottom: 144px;
    right: 8px;
    width: 62px;
  }
}

/* ═══════════════════════════════════════════════
   WEATHER BACKGROUNDS — spot panel animated scenes
   ═══════════════════════════════════════════════ */
.wm-weather-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  transition: background 0.6s ease;
}
/* Garantir que todo conteúdo do painel fique acima do bg */
#wm-spot-panel > * { position: relative; z-index: 1; }

/* ── Clear sky ── */
.wm-bg-clear {
  background: linear-gradient(170deg, #c8eaf7 0%, #9dcfe8 55%, #87bdd8 100%);
}
.wm-bg-clear::before, .wm-bg-partial::before {
  content: '';
  position: absolute;
  bottom: 12px; left: -80px;
  width: 220px; height: 60px;
  background: rgba(255,255,255,0.65);
  border-radius: 50px;
  filter: blur(10px);
  animation: wm-cloud-drift 20s linear infinite;
}
.wm-bg-clear::after, .wm-bg-partial::after {
  content: '';
  position: absolute;
  bottom: 35px; right: -50px;
  width: 160px; height: 44px;
  background: rgba(255,255,255,0.5);
  border-radius: 50px;
  filter: blur(7px);
  animation: wm-cloud-drift 28s linear infinite reverse;
}
@keyframes wm-cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(480px); }
}

/* Sun */
.wm-bg-sun {
  position: absolute;
  right: -18px; top: -18px;
  width: 110px; height: 110px;
}
.wm-bg-sun-core {
  position: absolute; inset: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffde7 30%, #ffd54f 70%, #ffb300 100%);
  box-shadow: 0 0 36px 16px rgba(255,213,79,0.35);
}
.wm-bg-sun-rays {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255,245,120,0.3) 0deg 6deg,
    transparent 6deg 18deg
  );
  animation: wm-spin-sun 22s linear infinite;
}
@keyframes wm-spin-sun { to { transform: rotate(360deg); } }

/* ── Partial ── */
.wm-bg-partial {
  background: linear-gradient(170deg, #b8dded 0%, #9ac5dc 55%, #8cb8cc 100%);
}

/* ── Overcast ── */
.wm-bg-overcast {
  background: linear-gradient(170deg, #b0bec5 0%, #90a4ae 55%, #78909c 100%);
}
.wm-bg-overcast::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 65%;
  background:
    radial-gradient(ellipse 200px 55px at 20% 30%, rgba(176,190,197,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 180px 48px at 72% 50%, rgba(158,174,182,0.9)  0%, transparent 70%),
    radial-gradient(ellipse 220px 55px at 50% 18%, rgba(144,164,174,0.8)  0%, transparent 70%);
  animation: wm-oc-l1 32s linear infinite alternate;
}
.wm-bg-overcast::after {
  content: '';
  position: absolute; top: 20%; left: 0; right: 0; height: 55%;
  background:
    radial-gradient(ellipse 160px 44px at 62% 45%, rgba(120,144,156,0.75) 0%, transparent 70%),
    radial-gradient(ellipse 200px 52px at 28% 60%, rgba(100,121,135,0.65) 0%, transparent 70%);
  animation: wm-oc-l2 24s linear infinite alternate-reverse;
}
@keyframes wm-oc-l1 { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
@keyframes wm-oc-l2 { from { transform: translateX(12px);  } to { transform: translateX(-12px); } }

/* ── Rain ── */
.wm-bg-rain {
  background: linear-gradient(170deg, #546e7a 0%, #455a64 55%, #37474f 100%);
}
.wm-bg-rain::before {
  content: '';
  position: absolute; top: 0; left: -10%; right: -10%; height: 48%;
  background:
    radial-gradient(ellipse 230px 64px at 28% 32%, rgba(55,71,79,0.95) 0%, transparent 70%),
    radial-gradient(ellipse 185px 52px at 78% 52%, rgba(69,90,100,0.9)  0%, transparent 70%),
    radial-gradient(ellipse 205px 58px at 55% 15%, rgba(84,110,122,0.85) 0%, transparent 70%);
  animation: wm-oc-l1 22s linear infinite alternate;
}
.wm-bg-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── Storm ── */
.wm-bg-storm {
  background: linear-gradient(170deg, #1a2634 0%, #0d1b2a 60%, #121840 100%);
}
.wm-bg-storm::before {
  content: '';
  position: absolute; top: 0; left: -10%; right: -10%; height: 52%;
  background:
    radial-gradient(ellipse 250px 70px at 35% 30%, rgba(10,16,22,0.98) 0%, transparent 70%),
    radial-gradient(ellipse 200px 55px at 75% 48%, rgba(20,30,40,0.95)  0%, transparent 70%);
  animation: wm-oc-l1 16s linear infinite alternate;
}
.wm-bg-lightning {
  position: absolute; inset: 0;
  background: rgba(200, 220, 255, 0);
  animation: wm-lightning 8s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes wm-lightning {
  0%, 86%, 90%, 93%, 100% { background: rgba(200,220,255,0); }
  87%                      { background: rgba(200,220,255,0.22); }
  88%                      { background: rgba(200,220,255,0); }
  91%                      { background: rgba(200,220,255,0.14); }
}

/* ── Night Clear ── */
.wm-bg-night_clear {
  background: linear-gradient(170deg, #0d1b2a 0%, #082229 65%, #091e2c 100%);
}
.wm-bg-night_clear::before {
  content: '';
  position: absolute; right: 22px; top: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #f5f0d0;
  box-shadow: 0 0 18px 8px rgba(245,240,208,0.18);
}
.wm-bg-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: wm-twinkle 3s ease-in-out infinite;
}
@keyframes wm-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.4); }
}

/* ── Night Overcast ── */
.wm-bg-night_overcast {
  background: linear-gradient(170deg, #1c2833 0%, #17202a 65%, #243342 100%);
}
.wm-bg-night_overcast::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 60%;
  background:
    radial-gradient(ellipse 200px 55px at 30% 30%, rgba(28,40,51,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 180px 48px at 70% 50%, rgba(36,51,66,0.85) 0%, transparent 70%);
  animation: wm-oc-l1 28s linear infinite alternate;
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .wm-bg-sun-rays,
  .wm-bg-clear::before, .wm-bg-clear::after,
  .wm-bg-partial::before, .wm-bg-partial::after,
  .wm-bg-overcast::before, .wm-bg-overcast::after,
  .wm-bg-rain::before,
  .wm-bg-storm::before,
  .wm-bg-lightning,
  .wm-bg-star {
    animation: none !important;
  }
}