/*
 * V7-HEADER
 * Title:    Viridians Evidence Activation World — Page Styles
 * Filename: viridians-evidence-activation-world.css
 * Path:     /assets/css/viridians/viridians-evidence-activation-world.css
 * Version:  v2.5.0
 * Issued:   2026-05-25
 * Author:   Buktika Webdesk (Binka)
 * Purpose:  Styles for Viridians Page Five — trigger-filtered offer map.
 *           Full-viewport-height section matching Page 2 layout pattern.
 *           Galaxy background image (viridian-map-galaxy.webp) with purple/teal
 *           gradient overlay. Flat 2D SA-locked map with Viridians palette.
 *           Context bar above map card. Markers colour-coded by entity type.
 *           Popup includes a temporary Kora preview worked-example pack block.
 *           All selectors prefixed .veaw-.
 * Changelog:
 *   v2.4.2 — 2026-05-26 — Add selected-position compatibility stop styles.
 *   v2.4.1 — 2026-05-26 — Add Page Five contact link styles.
 *   v2.4.0 — 2026-05-25 — Add Kora preview worked-example pack popup styles.
 *   v2.3.1 — 2026-05-25 — Tokenise Page 5 colour literals. Eco-human badge
 *                          gradient now uses stem-olive → mama-violet.
 *                          Draft note binds to mama-amber.
 *   v2.3.0 — 2026-05-25 — Align to Page 2 layout pattern. Section is now
 *                          full-dvh (calc(100dvh - header)) with galaxy
 *                          background image. Container uses flex:1 / min-height:0
 *                          instead of fixed 620px. max-width 960px → 1200px.
 *                          Context bar max-width updated to match. Fixed heights
 *                          removed from all responsive breakpoints.
 *   v2.0.0 — 2026-05-25 — Replace globe section with flat SA map section.
 *                          Container overflow:hidden clips map to border-radius.
 *   v1.5.0 — 2026-05-24 — Marker CSS updated for nested .veaw-pin structure.
 *   v1.4.0 — 2026-05-24 — Standard location-pin shape markers, channel colour.
 *   v1.1.0 — 2026-05-24 — Globe section + container match Page 2 pattern.
 *   v1.0.0 — 2026-05-23 — Initial build (Phase 1, BKT 56081:2026 §9.1)
 */

/* ─── Map section — dark Viridians background, title bar + map card ─────── */

.veaw-globe-section {
  width: 100%;
  height: calc(100dvh - var(--header-height, 77px));
  min-height: 37.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 1.5rem 1rem 1.5rem;

  background-color: var(--sdx-color-viridians-dark-base);
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--sdx-color-purple-deep) 30%, transparent) 0%,
      color-mix(in srgb, var(--sdx-color-teal-deep) 35%, transparent) 100%),
    url('/assets/images/viridians/viridian-map-galaxy.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;
  background-size: cover, cover;
  background-attachment: scroll, scroll;
}

/* ─── Map container — flat SA map, clips to border-radius ───────────────── */

.veaw-globe-container {
  width: 100%;
  max-width: 1200px;
  flex: 1;
  min-height: 0;
  margin: 0 auto;
  border-radius: 0 0 12px 12px;
  position: relative;
  overflow: hidden;
}

/* ─── Map canvas ─────────────────────────────────────────────────────────── */

#veaw-globe-map {
  width: 100%;
  height: 100%;
}

/* Keep MapLibre controls above map */
.veaw-globe-container .maplibregl-control-container {
  position: relative;
  z-index: 30;
}

/* HelpControl — matches Page 2 visual weight.
   Width/height absent: MapLibre .maplibregl-ctrl-icon owns the 29×29 dimensions. */
.page-viridians-evidence-activation-world .maplibregl-ctrl-help {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  font-size:       0.9375rem;
  font-weight:     700;
  color:           var(--fg);
  transition:      background 0.15s ease, color 0.15s ease;
  padding:         0;
  line-height:     1;
}

.page-viridians-evidence-activation-world .maplibregl-ctrl-help:hover {
  background: rgba(0, 0, 0, 0.05);
  color:      var(--sdx-color-purple-deep);
}

.page-viridians-evidence-activation-world .maplibregl-ctrl-help:focus-visible {
  outline:        2px solid var(--sdx-color-purple-deep);
  outline-offset: 1px;
}

/* ─── Trigger title bar — above the map card, full-width match ───────────── */

.veaw-context-bar {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: rgba(11, 11, 39, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

.veaw-context-bar__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  flex-shrink: 0;
}

.veaw-context-bar__divider {
  width: 1px;
  height: 1rem;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.veaw-context-bar__trigger {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.veaw-context-bar__mode {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.65rem;
  border-radius: 2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Context bar mode badge uses token-owned channel colours per viridians-triggers.css. */
.veaw-context-bar__mode--eco {
  background: color-mix(in srgb, var(--sdx-color-eco-mint) 18%, transparent);
  color: var(--sdx-color-eco-sage);
  border: 1px solid color-mix(in srgb, var(--sdx-color-eco-border) 30%, transparent);
}
.veaw-context-bar__mode--human {
  background: color-mix(in srgb, var(--sdx-color-mama-violet) 18%, transparent);
  color: var(--sdx-color-mama-violet-light);
  border: 1px solid color-mix(in srgb, var(--sdx-color-mama-violet) 30%, transparent);
}
.veaw-context-bar__mode--eco-human {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--sdx-color-stem-olive) 28%, transparent) 0%,
    color-mix(in srgb, var(--sdx-color-mama-violet) 28%, transparent) 100%);
  color: var(--sdx-color-mama-violet-light);
  border: 1px solid color-mix(in srgb, var(--sdx-color-mama-violet) 25%, transparent);
}

.veaw-context-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.56);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.veaw-context-bar__back:hover {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.30);
}

/* ─── Entity markers — SVG circles, colour-coded by trigger coverage ────── */
/* Three kinds, determined by the Kora preview route authority:
 *   eco   → solid stem-olive (eco-only offers)
 *   human → solid mama-violet (human-only offers)
 *   split → diagonal half-green / half-violet (confirmed combined route)
 * Outer .veaw-marker is the MapLibre anchor div — no CSS transform so
 * MapLibre's inline position transform is never in conflict.
 * The <svg class="veaw-marker-svg"> inside handles all visual styling and
 * the hover scale transform (isolated from the parent anchor).            */

.veaw-marker {
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.veaw-marker-svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
  transition: transform 0.12s ease, filter 0.12s ease;
}

.veaw-marker:hover .veaw-marker-svg,
.veaw-marker.is-active .veaw-marker-svg {
  transform: scale(1.25);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.32));
}

/* .veaw-marker--draft intentionally removed — draft state shown in popup only */

/* ─── Offer popup panel — absolute within .veaw-globe-container ──────────── */

.veaw-popup {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(480px, calc(100% - 2rem));
  background: rgba(11, 11, 39, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.75rem;
  backdrop-filter: blur(16px);
  padding: 1.25rem 1.5rem 1.5rem;
  display: none;
}

.veaw-popup.is-open {
  display: block;
  animation: veaw-popup-in 0.18s ease;
}

@keyframes veaw-popup-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.veaw-popup__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.40);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.12s;
}

.veaw-popup__close:hover { color: rgba(255, 255, 255, 0.80); }

.veaw-popup__type {
  font-size: 0.6875rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.35rem;
}

.veaw-popup__name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.veaw-popup__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.52);
}

.veaw-popup__meta-item strong {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

.veaw-popup__families {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.veaw-popup__family-tag {
  padding: 0.2rem 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.56);
  letter-spacing: 0.0275rem;
}

.veaw-popup__route {
  padding: 0.875rem;
  margin-bottom: 0.875rem;
  border: 1px solid rgba(245, 176, 20, 0.18);
  border-radius: 0.5rem;
  background: rgba(245, 176, 20, 0.07);
}

.veaw-popup__route[hidden] {
  display: none;
}

.veaw-popup__route-label {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.veaw-popup__route-title {
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}

.veaw-popup__route-summary {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
}

.veaw-popup__route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.veaw-popup__route-subhead {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
  letter-spacing: 0.0275rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.veaw-popup__route ul {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.71875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.64);
}

.veaw-popup__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.veaw-popup__reason {
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.58);
}

.veaw-popup__draft-note {
  font-size: 0.75rem;
  color: var(--sdx-color-mama-amber);
  margin-bottom: 0.75rem;
}

.veaw-popup__cta {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.veaw-popup__cta:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

.veaw-popup__cta:disabled,
.veaw-popup__cta[aria-disabled="true"] {
  opacity: 0.40;
  cursor: not-allowed;
}

.veaw-popup__contact {
  display: block;
  margin-top: 0.65rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8125rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
  transition: color 0.15s;
}

.veaw-popup__contact:hover,
.veaw-popup__contact:focus-visible {
  color: rgba(255, 255, 255, 0.92);
}

/* ─── Empty state — absolute within .veaw-globe-container ────────────────── */

.veaw-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.9375rem;
  text-align: center;
  padding: 2rem;
  gap: 0.5rem;
  pointer-events: none;
}

.veaw-empty[hidden] { display: none; }

.veaw-empty__label {
  font-size: 0.75rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

/* ─── Below-globe section ────────────────────────────────────────────────── */

.veaw-below {
  background: var(--sdx-color-viridians-dark-base);
  color: rgba(255, 255, 255, 0.72);
  padding: 3rem 0 4rem;
}

.veaw-below .container {
  max-width: 840px;
}

.veaw-below__heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0.5rem;
}

.veaw-below__lede {
  font-size: var(--body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.52);
  max-width: 56ch;
}

.veaw-below__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.1rem;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--sdx-color-mama-violet) 34%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--sdx-color-mama-violet) 16%, transparent);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.veaw-below__contact:hover,
.veaw-below__contact:focus-visible {
  border-color: color-mix(in srgb, var(--sdx-color-mama-violet) 55%, transparent);
  background: color-mix(in srgb, var(--sdx-color-mama-violet) 24%, transparent);
  color: rgba(255, 255, 255, 0.96);
}

/* ─── Compatibility stop for stale selected-position links ───────────────── */

.veaw-compat {
  min-height: calc(100dvh - var(--header-height, 77px));
  display: flex;
  align-items: center;
  background-color: var(--sdx-color-viridians-dark-base);
  color: rgba(255, 255, 255, 0.72);
  padding: 5rem 0;
}

.veaw-compat .container {
  max-width: 760px;
}

.veaw-compat__eyebrow {
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.75rem;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.veaw-compat__heading {
  margin-bottom: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.05;
}

.veaw-compat__lede {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
  line-height: 1.65;
}

.veaw-compat__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.35rem;
}

.veaw-compat__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

.veaw-compat__back:hover,
.veaw-compat__back:focus-visible {
  color: rgba(255, 255, 255, 0.96);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .veaw-globe-section {
    padding: 0.75rem 0.5rem 0.75rem;
    min-height: 28rem;
  }

  .veaw-globe-container {
    border-radius: 0 0 8px 8px;
  }

  .veaw-context-bar {
    border-radius: 8px 8px 0 0;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
  }

  .veaw-context-bar__trigger {
    display: none;
  }

  .veaw-popup {
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    border-radius: 0.75rem 0.75rem 0 0;
  }

  .veaw-popup__route-grid {
    grid-template-columns: 1fr;
  }

  .veaw-compat__heading {
    font-size: 2.25rem;
  }

  @keyframes veaw-popup-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .veaw-globe-section {
    padding: 1rem 0.5rem;
    min-height: 32rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .veaw-globe-section {
    padding: 1rem 0.75rem;
  }

  .veaw-globe-container {
    border-radius: 0 0 8px 8px;
  }

  .veaw-context-bar {
    border-radius: 8px 8px 0 0;
  }
}