/* globe-patch2.css — Part 06 patch 3-tonight
 *
 * Two responsibilities:
 *   1. Style #pv-globe the same way map.css styles #pv-map (globe-specific
 *      because deck.gl targets by ID and the IDs differ).
 *   2. Add GIS overlay toggle states using the project's .is-* modifier
 *      convention (matches map.css's .pv-map-picker__copy.is-copied pattern).
 *
 * All tokens come from theme.css / pv04.css / map.css. No new color values.
 */

/* ── canvas: mirror of map.css's #pv-map ── */
#pv-globe {
  position: absolute;
  inset: 0;
  background: var(--pv-map-bg, #000000);
  cursor: grab;
}
#pv-globe.is-grabbing { cursor: grabbing; }
#pv-globe.is-spinning { cursor: progress; }

/* deck.gl injects <canvas>; kill its default focus outline (reads as a
   stray line on the pure-black sphere). */
#pv-globe canvas:focus { outline: none; }

/* ── legend swatches (fallback — if map.css doesn't provide these, we do) ── */
.pv-map-legend__swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--pv-map-chrome-muted, #687a8c);
}
.pv-map-legend__swatch--rail   { background: var(--pv-map-rail,  #f59e0b); }
.pv-map-legend__swatch--cable  { background: var(--pv-map-cable, #2dd4bf); }
.pv-map-legend__swatch--gc     {
  background: transparent;
  border-top: 1px dashed var(--pv-map-gc, #687a8c);
  height: 0;
  margin-bottom: 2px;
}
.pv-map-legend__swatch--dim    { opacity: 0.45; }

.pv-map-legend__list--base {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--pv-map-chrome-line, #1e3042);
  list-style: none;
}

/* ── GIS toggle buttons: states layered onto .pv-map-picker__copy ──
 *
 * Base styling (padding, font, border) is inherited from
 * .pv-map-picker__copy in map.css. We only add state colors.
 *
 * Loading  → yellow pulse
 * Cables active → teal
 * Rail active   → amber
 */

.pv-gis-toggle {
  /* Defensive baseline if .pv-map-picker__copy didn't apply for any reason */
  font-family: var(--pv-mono, ui-monospace, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.3px;
}

.pv-gis-toggle.is-loading {
  background: rgba(250, 204, 21, 0.10);
  border-color: rgba(250, 204, 21, 0.50);
  color: #facc15;
  animation: pv-gis-load-pulse 1.1s ease-in-out infinite;
  cursor: progress;
}
@keyframes pv-gis-load-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22); }
}

#pv-toggle-cables.is-active {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(45, 212, 191, 0.55);
  color: var(--pv-map-cable, #2dd4bf);
}
#pv-toggle-rail-na.is-active,
#pv-toggle-rail-eu.is-active,
#pv-toggle-rail-as.is-active,
#pv-toggle-rail-af.is-active,
#pv-toggle-rail-sa.is-active,
#pv-toggle-rail-ru.is-active,
#pv-toggle-rail-oc.is-active,
#pv-toggle-rail-ca.is-active {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.55);
  color: var(--pv-map-rail, #f59e0b);
}

/* ── topo button active state ─────────────────────────────────────── */
#pv-toggle-topo.is-active {
  border-color: rgba(160, 130, 90, 0.65);
  background:   rgba(160, 130, 90, 0.10);
  color:        #b39172;
}

/* spin toggle active state — gentler teal pulse */
#pv-spin-btn.is-active {
  background: rgba(45, 212, 191, 0.10);
  border-color: rgba(45, 212, 191, 0.45);
  color: var(--pv-map-cable, #2dd4bf);
  animation: pv-spin-pulse 2.4s ease-in-out infinite;
}
@keyframes pv-spin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18); }
}

/* Separator between spin and GIS toggles — visual break inside .pv-map-picker__row */
.pv-map-picker__summary-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--pv-map-chrome-line, #1e3042);
  vertical-align: middle;
}

/* On narrow viewports, drop rail EU button (biggest payload, least impactful
   for mobile demos). Keep cables + rail NA. */
@media (max-width: 620px) {
  #pv-toggle-rail-eu { display: none; }
}

#pv-toggle-pops.is-active {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.55);
  color: #a855f7;
}

/* ───────────────────────────────────────────────────────────
   Mobile responsive — keep all toolbar/vantage buttons reachable
   without scrolling. Picker row wraps; input shrinks; buttons get
   tighter padding but stay tappable (≥32px hit height).
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  /* Picker row: wrap so cables/rail NA/POPs land on row 2 */
  .pv-map-picker__row {
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 8px;
    align-items: center;
  }
  /* The decorative "slug" label costs precious width on mobile */
  .pv-map-picker__label { display: none; }

  /* Input shrinks to whatever's left after buttons claim space */
  .pv-map-picker__slug {
    flex: 1 1 55%;
    min-width: 120px;
  }

  /* Action buttons: tight but still tappable */
  .pv-map-picker__copy,
  .pv-gis-toggle {
    padding: 6px 9px;
    font-size: 10.5px;
    line-height: 1.2;
    min-height: 32px;
  }

  /* The vertical separator span loses meaning when the row wraps */
  .pv-map-picker__summary-sep { display: none; }

  /* Vantage filter row (ALL/YEG/SEA/...): wrap to multiple lines */
  #pv-vantage-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    justify-content: center;
  }
  #pv-vantage-toggles button {
    padding: 5px 8px;
    font-size: 10.5px;
    min-height: 30px;
  }
}

/* Phone-portrait: full-width input on its own row */
@media (max-width: 420px) {
  .pv-map-picker__row { gap: 4px; }
  .pv-map-picker__slug {
    flex: 1 1 100%;
    margin-bottom: 2px;
  }
  .pv-map-picker__copy,
  .pv-gis-toggle {
    padding: 5px 7px;
    font-size: 10px;
  }
}

/* ───────────────────────────────────────────────────────────
   Mobile fixes round 2: button text wrap, scrolling vantage
   filter strip, compact HUD restored at bottom.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  /* Single-line button labels — fixes "rail NA" stacking */
  .pv-map-picker__copy,
  .pv-gis-toggle {
    white-space: nowrap;
  }

  /* Vantage filter row: horizontal scroll instead of multi-line wrap.
     Keeps it as a thin strip; user swipes to reach hidden buttons. */
  #pv-vantage-toggles {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px;
    justify-content: flex-start !important;
  }
  #pv-vantage-toggles::-webkit-scrollbar { display: none; }
  #pv-vantage-toggles > * {
    flex: 0 0 auto !important;
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    min-height: 28px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  /* Restore scan HUD on mobile — compact bottom strip overriding the
     520px @media rule in map.css that nukes it. */
  .pv-map-meta {
    display: block !important;
    width: calc(100% - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 60px !important;
    padding: 6px 10px !important;
    max-height: 26vh !important;
    overflow-y: auto !important;
    font-size: 10.5px !important;
  }
  .pv-map-meta__title {
    font-size: 9px !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.05em !important;
  }
  .pv-map-meta__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px 12px !important;
  }
  .pv-map-meta__list li {
    font-size: 10.5px !important;
    margin: 0 !important;
    display: inline-block !important;
  }
  .pv-map-meta__sep {
    margin-right: 4px;
    opacity: 0.55;
  }
  /* Drop the breakdown label on mobile — bar still shows */
  .pv-map-meta__breakdown-label { display: none !important; }
  .pv-map-meta__bar { margin-top: 3px !important; height: 4px !important; }
}

/* ───────────────────────────────────────────────────────────
   Mobile fixes round 3 — fix squished button row & bleed-through.
   The picker had a height cap that was clipping the wrapped row;
   the vantage strip was transparent between buttons so the squished
   action labels were showing through the gaps.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  /* Picker must let the wrapped row breathe — no max-height, no clip */
  .pv-map-picker,
  .pv-map-picker__row,
  .pv-overlay-picker {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Action / overlay toggle buttons MUST be at least 32px tall.
     The squishing came from a flex parent compressing them; lock the size. */
  .pv-map-picker__copy,
  .pv-gis-toggle {
    min-height: 32px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Vantage strip: opaque dark background so action-row text below
     CAN'T bleed through the gaps between vantage buttons. Plus give it
     visual separation from the picker. */
  #pv-vantage-toggles {
    background: rgba(8, 12, 18, 0.95) !important;
    border: 1px solid rgba(36, 48, 64, 0.7) !important;
    border-radius: 8px !important;
    margin-top: 8px !important;
    padding: 6px 8px !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

/* ───────────────────────────────────────────────────────────
   Mobile fix round 4: Grid layout for the picker row.
   Flex-wrap kept failing to wrap on iOS Safari for reasons I can't
   inspect from the server. Grid is deterministic: slug input spans
   full width, action+overlay buttons land in a clean 4-column grid.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .pv-map-picker__row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .pv-map-picker__label { display: none !important; }
  .pv-map-picker__summary-sep { display: none !important; }
  .pv-map-picker__status { display: none !important; }

  /* Slug input spans the entire row */
  .pv-map-picker__slug {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  /* Every button: own grid cell, no shrink, no overflow */
  .pv-map-picker__copy,
  .pv-gis-toggle {
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex: none !important;
    width: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────
   Mobile fix round 5 — pin the vantage filter strip to the bottom
   of the viewport so the picker (top) can't occlude it. Sits in the
   ~20px gap between HUD (bottom: 60px, ~50px tall) and the rest.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  #pv-vantage-toggles {
    position: fixed !important;
    top: auto !important;
    bottom: 130px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    z-index: 9 !important;
  }
}

/* ───────────────────────────────────────────────────────────
   Mobile fix round 6 — vantage strip needs to span the full
   viewport width with content anchored to the LEFT, scrolling
   right. The strip was rendering centered/auto-width which
   chopped off ALL/YEG/SEA/YYZ and left dead space on the right.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  #pv-vantage-toggles {
    position: fixed !important;
    top: auto !important;
    bottom: 130px !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
    z-index: 9 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;

    background: rgba(8, 12, 18, 0.95) !important;
    border: 1px solid rgba(36, 48, 64, 0.7) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  #pv-vantage-toggles > * {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }
}

/* ───────────────────────────────────────────────────────────
   Mobile fix round 7 — the strip is built in JS with inline
   `transform: translateX(-50%)` (for desktop centering with
   left:50%). On mobile we anchor with left:8/right:8 so the
   transform is no longer wanted; it shifts the strip ~half
   its width off-screen to the left.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  #pv-vantage-toggles {
    transform: none !important;
  }
}

/* === Compact rail buttons (added 2026-06-02) ===
   Shorten footprint so 8 rail toggles + cables + POPs fit on one row.
   Color is the rail indicator; country code is the identifier; tooltip carries full context. */
.pv-gis-toggle--rail {
  padding-left: 7px;
  padding-right: 7px;
  white-space: nowrap;
  min-width: 0;
}

/* === Toolbar fit (2026-06-02): widen panel + tighten gap to hold
   slug + 4 action buttons + cables + 8 rail toggles + POPs in one row.
   Original panel was 720px hard-cap; content needs ~880px. We widen to
   960px, allow shrink via calc() on narrow viewports, and reduce gap. === */
.pv-map-picker {
  width: min(960px, calc(100% - 40px));
}
.pv-map-picker__row {
  gap: 8px;
}