/* ===================================================================
   STAGE 17C — GLOBAL INTELLIGENCE (Mapbox globe)

   Layered on top of map-flagship.css, which still owns the floating
   controls, popovers, filters, chips, the panel structure and the
   responsive rules. This file adds only what the satellite globe needs:
   the space around Earth, glass panels that read over imagery, the
   Contextual Intelligence Panel's finish, the loading veil and the
   provider's (legally required) attribution in ProcIntel's palette.
   =================================================================== */

/* The space around the globe: deep navy, never flat black. */
.gi-globe {
  background:
    radial-gradient(ellipse 85% 75% at 50% 46%, #0c1830 0%, #070d1a 48%, #03060c 100%);
}

/* Controls float over satellite imagery, so they need a little more body
   than over the old flat basemap -- but stay translucent so the Earth
   reads through them. */
.gi-globe .map-panel,
.gi-globe .map-control-btn,
.gi-globe .map-zoom button,
.gi-globe .map-popover {
  background: rgba(10, 15, 26, 0.78);
  border-color: rgba(201, 169, 97, 0.16);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
.gi-globe .map-control-btn[aria-expanded="true"],
.gi-globe .map-zoom button:hover { border-color: rgba(201, 169, 97, 0.45); }

/* ---------------------------------------------------------------
   CONTEXTUAL INTELLIGENCE PANEL
   --------------------------------------------------------------- */
.gi-globe .gi-panel {
  background: linear-gradient(180deg, rgba(14, 21, 36, 0.94) 0%, rgba(9, 14, 25, 0.96) 100%);
  border-left: 1px solid rgba(201, 169, 97, 0.18);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.55);
}
/* A thin gold hairline at the top edge: the one brand accent on the panel. */
.gi-globe .gi-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 169, 97, 0) 0%, rgba(201, 169, 97, 0.85) 50%, rgba(201, 169, 97, 0) 100%);
}
.gi-globe .map-drawer-kind.is-accent { color: var(--accent-primary); }
.gi-globe .map-drawer-kind.is-warning { color: var(--status-warning); }
.gi-globe .map-drawer-subtitle {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.gi-globe .map-drawer-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* An in-panel control that moves to another panel looks like its sibling links,
   at a specificity the design system's button primitive cannot override. */
#mapFlagship button.map-drawer-action {
  background: transparent;
  border: 1px solid var(--accent-muted);
  color: var(--accent-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#mapFlagship button.map-drawer-action:hover {
  background: var(--wash-accent);
  border-color: var(--accent-primary);
  color: var(--accent-hover);
}

/* ---------------------------------------------------------------
   MAPBOX CHROME -- restyled, never removed. The Mapbox wordmark and
   the attribution text are contractual obligations.
   --------------------------------------------------------------- */
/* background-COLOR only: the compact control's "i" icon is its background-image. */
.gi-globe .mapboxgl-ctrl-attrib {
  background-color: rgba(6, 10, 18, 0.72);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
}
.gi-globe .mapboxgl-ctrl-attrib a { color: var(--text-muted); }
.gi-globe .mapboxgl-ctrl-attrib.mapboxgl-compact { background-color: rgba(234, 217, 168, 0.85); }
.gi-globe .mapboxgl-ctrl-attrib.mapboxgl-compact-show { background-color: rgba(6, 10, 18, 0.88); }
.gi-globe .mapboxgl-ctrl-bottom-left,
.gi-globe .mapboxgl-ctrl-bottom-right { bottom: 6px; }
/* The design system's button primitive repaints every <button>, which
   erased the compact attribution's "i" icon (a background image). Restore
   Mapbox's own icon, at higher specificity, so the credit stays reachable. */
#mapFlagship .mapboxgl-ctrl-attrib-button {
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E");
  border: 0;
}
/* The globe controls sit above the attribution corner, never on it, and
   stay legible over bright imagery rather than fading to half strength. */
.gi-globe .map-zoom { top: auto; bottom: 56px; transform: none; opacity: 0.88; }
#mapFlagship.gi-globe .map-zoom button { color: var(--text-primary); }
.gi-globe .mapboxgl-canvas:focus { outline: none; }

/* Stage 17D legend shapes, matching the symbols on the globe: shape first, colour second. */
.gi-globe .map-layer-swatch.is-ring { background: transparent; border-width: 2px; }
.gi-globe .map-layer-swatch.is-triangle {
  width: 0;
  height: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid currentColor;
}

/* ---------------------------------------------------------------
   LOADING VEIL -- covers the moment before the globe's first frame.
   --------------------------------------------------------------- */
.gi-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  background: radial-gradient(ellipse 60% 55% at 50% 48%, #0d1a33 0%, #050912 70%);
  transition: opacity 900ms ease, visibility 0s linear 900ms;
  pointer-events: none;
}
.gi-loading.is-done { opacity: 0; visibility: hidden; }
.gi-loading-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 169, 97, 0.25);
  border-top-color: var(--accent-primary);
  animation: gi-spin 1.4s linear infinite;
}
.gi-loading-text {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(234, 217, 168, 0.75);
}
@keyframes gi-spin { to { transform: rotate(360deg); } }

/* A failed start must still read as ProcIntel, not as a broken page. */
.gi-globe.gi-failed .map-topbar,
.gi-globe.gi-failed .map-zoom,
.gi-globe.gi-failed .map-bottombar { opacity: 0.35; pointer-events: none; }

@media (max-width: 860px) {
  /* fallback before the page has measured the bottom bar */
  .gi-globe .mapboxgl-ctrl-bottom-left,
  .gi-globe .mapboxgl-ctrl-bottom-right { bottom: 58px; }
  .gi-globe .map-zoom { bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-loading { transition: none; }
  .gi-loading-mark { animation: none; }
}

/* ===================================================================
   STAGE 17E -- environment (weather + natural hazards)
   =================================================================== */
/* The wind particle canvas: above the globe, never in the way of a click. */
.gi-globe .gi-overlay-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
}

/* The Weather master switch in the Layers popover. */
#mapFlagship .map-layer-master {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
}
#mapFlagship .map-layer-master-track {
  position: relative;
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.28);
  flex: none;
}
#mapFlagship .map-layer-master-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 160ms ease;
}
#mapFlagship .map-layer-master[aria-pressed="true"] { color: var(--text-primary); }
#mapFlagship .map-layer-master[aria-pressed="true"] .map-layer-master-track { background: rgba(201, 169, 97, 0.55); }
#mapFlagship .map-layer-master[aria-pressed="true"] .map-layer-master-track::after {
  transform: translateX(12px);
  background: var(--accent-primary);
}
#mapFlagship .map-layer-master:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.gi-globe .map-layer-section.is-master-off .map-layer-list { opacity: 0.55; }

/* The environment timeline: past (muted) · NOW · forecast (dashed edge = model forecast). */
.gi-globe .gi-env-time {
  position: static;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.gi-globe .gi-env-time[hidden] { display: none; }
.gi-globe .gi-env-time-label {
  padding: 0 var(--sp-3) 0 var(--sp-2);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#mapFlagship .gi-env-time button {
  padding: var(--sp-2) var(--sp-4);
  min-height: 0;
  box-shadow: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  cursor: pointer;
}
/* A dashed edge marks a model forecast; NOW is the reference point. Selection is a quiet gold outline, so the
   intelligence time range keeps the page's one solid gold control. */
#mapFlagship .gi-env-time button.is-future { border-style: dashed; border-color: rgba(148, 163, 184, 0.22); }
#mapFlagship .gi-env-time button.is-now { color: var(--text-secondary); }
#mapFlagship .gi-env-time button:hover { color: var(--text-primary); background: var(--surface-raised); }
#mapFlagship .gi-env-time button[aria-pressed="true"] {
  color: var(--text-primary);
  background: rgba(201, 169, 97, 0.16);
  border-color: rgba(201, 169, 97, 0.6);
  border-style: solid;
}
#mapFlagship .gi-env-time button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* What the environment layers show, from what, and how old it is. */
.gi-globe .gi-env-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: min(640px, 100%);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  background: rgba(10, 15, 26, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.gi-globe .gi-env-status[hidden] { display: none; }
/* With the panel open (desktop), the environment line stays in the part of the map that is still visible. */
@media (min-width: 861px) {
  .gi-globe.drawer-open .gi-env-status {
    max-width: calc(100% - 2 * clamp(380px, 30vw, 460px));
    margin-right: clamp(380px, 30vw, 460px);
  }
}

/* Weather conditions and hazard panels. */
.gi-globe .gi-wx-table { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.gi-globe .gi-wx-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.gi-globe .gi-wx-row span { color: var(--text-secondary); }
.gi-globe .gi-wx-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 600; }
.gi-globe .gi-fc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.gi-globe .gi-fc-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}
#mapFlagship button.map-drawer-action { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

@media (max-width: 860px) {
  /* Stage 17K: the attribution and zoom offsets here were fixed guesses (104 / 172 / 214 px) that the status line and
     weather legend outgrew; they now follow the measured bottom bar (see "P1-8 (compact)" below) */
  /* phones: at most two status lines; the full detail is in each layer's panel */
  .gi-globe .gi-env-status span:nth-child(n + 3) { display: none; }
  .gi-globe .gi-env-time-label { display: none; }
  #mapFlagship .gi-env-time button { padding: var(--sp-2); }
  .gi-globe .gi-env-status { font-size: var(--fs-label); }
}

/* ===================================================================
   STAGE 17F -- major shipping routes, evidence-backed geography
   =================================================================== */
.gi-globe .map-layer-swatch.is-line {
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  border: 0;
}
#mapFlagship button.map-link-button {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 97, 0.45);
  text-underline-offset: 3px;
  cursor: pointer;
}
#mapFlagship button.map-link-button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.gi-globe .map-drawer-meta {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-label);
}

/* Stage 17G: Global Awareness list and legend shapes */
#mapFlagship .map-awareness-popover { width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; }
#mapFlagship .map-awareness-items { list-style: none; margin: 0 0 10px; padding: 0; }
#mapFlagship button.map-awareness-item { display: grid; gap: 1px; width: 100%; text-align: left; padding: 7px 8px;
  border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
#mapFlagship button.map-awareness-item:hover, #mapFlagship button.map-awareness-item:focus-visible {
  background: rgba(255, 255, 255, 0.06); outline: 1px solid rgba(201, 169, 97, 0.55); }
#mapFlagship .map-awareness-kind { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; }
#mapFlagship .map-awareness-title { font-size: 13px; line-height: 1.3; }
#mapFlagship .map-awareness-sub { font-size: 11.5px; opacity: 0.7; }
.map-layer-swatch.is-ring { background: transparent !important; border: 2px solid currentColor; border-radius: 50%; }
.map-guide-swatch.is-conflict { background: rgba(180, 110, 92, 0.45); border: 1px solid #D79B86; }

/* ===================================================================
   Stage 17H: My Exposure -- the mode switch, the reader's own locations, and the add / edit forms
   =================================================================== */
#mapFlagship .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#mapFlagship .map-mode-toggle { position: static; display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--radius-md); }
/* in My Exposure the mode switch must stay reachable while a panel is open, so the top bar steps left of the panel
   exactly as the zoom control already does */
@media (min-width: 861px) {
  .map-flagship.is-my-exposure.drawer-open .map-topbar { right: calc(clamp(380px, 30vw, 460px) + var(--sp-6)); }
}
#mapFlagship .map-mode-toggle[hidden] { display: none; }
#mapFlagship .map-mode-toggle button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-meta);
  font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; }
#mapFlagship .map-mode-toggle button:hover { color: var(--text-primary); }
#mapFlagship .map-mode-toggle button[aria-pressed="true"] { background: rgba(244, 241, 232, 0.12); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(244, 241, 232, 0.35); }
#mapFlagship .map-mode-toggle button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
/* My Exposure: a quiet ivory frame tells the reader they are looking at their own, private view */
#mapFlagship.is-my-exposure .map-canvas { box-shadow: inset 0 0 0 2px rgba(244, 241, 232, 0.18); }
#mapFlagship.is-placing-pin .map-canvas, #mapFlagship.is-placing-pin .map-canvas canvas { cursor: crosshair !important; }
#mapFlagship .my-note { border-left: 2px solid rgba(244, 241, 232, 0.45); padding-left: 8px; }
#mapFlagship .my-list-actions { margin: 10px 0; }
#mapFlagship .my-list-filters { display: flex; gap: 8px; margin: 0 0 10px; }
#mapFlagship .my-list-filters input, #mapFlagship .my-list-filters select { flex: 1 1 0; min-width: 0; }
#mapFlagship .my-list-filters input, #mapFlagship .my-list-filters select,
#mapFlagship .map-form-input { min-height: 36px; padding: 6px 9px; border: 1px solid var(--border-default);
  border-radius: 6px; background: rgba(8, 12, 19, 0.7); color: var(--text-primary); font: inherit;
  font-size: var(--fs-meta); box-sizing: border-box; }
#mapFlagship .map-form-input { display: block; width: 100%; }
#mapFlagship textarea.map-form-input { resize: vertical; min-height: 64px; }
#mapFlagship .map-form-input:focus-visible, #mapFlagship .my-list-filters input:focus-visible,
#mapFlagship .my-list-filters select:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
#mapFlagship .map-form-label { display: block; margin: 10px 0 4px; color: var(--text-secondary);
  font-size: var(--fs-label); font-weight: var(--fw-medium); }
#mapFlagship .map-form-error { margin: 10px 0 0; color: var(--status-critical, #E06C60); font-size: var(--fs-meta); }
#mapFlagship .map-form-error[hidden] { display: none; }
#mapFlagship .my-ports { margin: 12px 0 0; padding: 0; border: 0; }
#mapFlagship .my-port { display: grid; gap: 4px; margin: 6px 0 10px; }
#mapFlagship .my-port label { font-size: var(--fs-meta); }
#mapFlagship .my-coords, #mapFlagship .my-public { margin: 12px 0 0; }
#mapFlagship .my-coords summary, #mapFlagship .my-public summary { cursor: pointer; color: var(--text-secondary);
  font-size: var(--fs-meta); }
#mapFlagship .my-public > label { display: block; margin: 8px 0 0; font-size: var(--fs-meta); }
#mapFlagship button.my-list-name { font-weight: var(--fw-medium); }
#mapFlagship button.map-drawer-action { cursor: pointer; font: inherit; font-size: var(--fs-meta); background: transparent;
  min-height: 36px; border: 1px solid var(--accent-muted); border-radius: var(--radius-sm); color: var(--accent-primary);
  padding: var(--sp-4) var(--sp-6); }
#mapFlagship .my-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; }
#mapFlagship .my-facts dt { color: var(--text-muted); font-size: var(--fs-label); }
#mapFlagship .my-facts dd { margin: 0; color: var(--text-primary); font-size: var(--fs-meta); }
#mapFlagship button.map-drawer-action:hover { background: var(--wash-accent); }
@media (max-width: 860px) {
  /* a phone keeps both mode words: the mode is the one control a reader must always be able to read */
  #mapFlagship .map-mode-toggle button { padding: 0 9px; font-size: var(--fs-label); }
}

/* Stage 17I: My tracked assets -- tabs, freshness (shape + words, never colour alone), detail rows */
#mapFlagship .my-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--border-subtle); }
#mapFlagship .my-tabs button { padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-secondary); font: inherit; font-size: var(--fs-meta); cursor: pointer; min-height: 36px; }
#mapFlagship .my-tabs button[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent-primary); }
#mapFlagship .my-tabs button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
#mapFlagship .my-fresh { font-size: var(--fs-meta); color: var(--text-secondary); }
#mapFlagship .my-fresh.is-recent { color: var(--text-primary); }
#mapFlagship .my-fresh.is-stale, #mapFlagship .my-fresh.is-none { color: var(--text-muted); }
#mapFlagship .my-rows { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; }
#mapFlagship .my-rows dt { color: var(--text-muted); font-size: var(--fs-label); }
#mapFlagship .my-rows dd { margin: 0; color: var(--text-primary); font-size: var(--fs-meta); overflow-wrap: anywhere; }
#mapFlagship .my-provider { border-left: 2px solid rgba(159, 198, 228, 0.6); padding-left: 8px; }
#mapFlagship button.map-drawer-action[disabled] { opacity: 0.5; cursor: default; }

/* ===================================================================
   Stage 17J: one timeline (past · now · forecast), the time note, layer temporal captions, Views
   =================================================================== */
#mapFlagship .gi-timeline { align-items: center; }
#mapFlagship .gi-timeline .gi-tl-seg { padding: 0 6px; color: var(--text-muted); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; }
/* forecast stops are marked by their "+" and a dashed underline as well as by the Forecast label: never colour alone */
#mapFlagship .gi-timeline button.is-future { box-shadow: inset 0 -1px 0 0 rgba(148, 163, 184, 0.45); }
#mapFlagship .gi-timeline button.is-now { color: var(--text-secondary); }
#mapFlagship .gi-timeline button.is-future[aria-pressed="true"],
#mapFlagship .gi-timeline button.is-past[aria-pressed="true"] { box-shadow: none; }
#mapFlagship .gi-timeline .gi-tl-step { padding: var(--sp-3) var(--sp-4); font-family: var(--font-ui); font-size: 15px; }
#mapFlagship .gi-timeline .gi-tl-step:disabled { opacity: 0.3; cursor: default; }
.gi-globe .gi-timeline-note { margin: 0 0 6px; padding: 6px 10px; max-width: min(760px, calc(100vw - 32px));
  border-radius: var(--radius-sm); background: rgba(10, 14, 22, 0.82); color: var(--text-secondary);
  font-size: var(--fs-label); line-height: 1.45; text-align: center; pointer-events: auto; }
.gi-globe .gi-timeline-note[hidden] { display: none; }
#mapFlagship .map-layer-name .map-layer-temporal { display: block; margin-top: 1px; color: var(--text-muted);
  font-size: 10.5px; font-weight: var(--fw-regular, 400); letter-spacing: 0.02em; }
#mapFlagship .gi-view-list { list-style: none; margin: 0 0 8px; padding: 0; }
#mapFlagship .gi-view-row { padding: 4px 0 8px; border-bottom: 1px solid var(--border-subtle); }
#mapFlagship button.gi-view-item { display: grid; gap: 2px; width: 100%; padding: 8px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#mapFlagship button.gi-view-item:hover, #mapFlagship button.gi-view-item:focus-visible {
  background: rgba(255, 255, 255, 0.06); outline: 1px solid rgba(201, 169, 97, 0.55); }
#mapFlagship .gi-view-name { color: var(--text-primary); font-size: var(--fs-meta); font-weight: var(--fw-medium); }
#mapFlagship .gi-view-sub { color: var(--text-muted); font-size: var(--fs-label); }
#mapFlagship .gi-view-tools { display: flex; gap: 6px; padding: 0 8px; }
#mapFlagship button.gi-view-tool { min-height: 30px; padding: 0 8px; border: 1px solid var(--border-default);
  border-radius: 6px; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-label);
  cursor: pointer; }
#mapFlagship button.gi-view-tool:hover { color: var(--text-primary); border-color: var(--border-strong); }
#mapFlagship button.gi-view-tool:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
#mapFlagship .gi-view-inline { padding: 6px 8px 0; }
#mapFlagship .gi-view-inline[hidden] { display: none; }
#mapFlagship .gi-share-list { margin: 4px 0 10px; padding-left: 18px; color: var(--text-primary); font-size: var(--fs-meta); }
#mapFlagship .gi-share-list.is-not { color: var(--text-secondary); }
@media (max-width: 860px) {
  #mapFlagship .gi-timeline .gi-tl-seg { display: none; }
  #mapFlagship .gi-timeline button { padding: var(--sp-3) 6px; }
  .gi-globe .gi-timeline-note { font-size: 10.5px; }
}
@media (max-width: 520px) {
  #mapFlagship .gi-timeline .gi-tl-step { display: none; }
  #mapFlagship .gi-timeline button { padding: var(--sp-3) 4px; letter-spacing: 0; }
}
@media (max-width: 520px) {
  /* Stage 17J: with Views added, the phone top bar wraps -- the controls on one row, search full width beneath */
  .gi-globe .map-topbar { flex-wrap: wrap; row-gap: var(--sp-3); }
  .gi-globe .map-top-actions { order: 1; width: 100%; justify-content: flex-end; }
  .gi-globe .map-search { order: 2; flex: 1 1 100%; max-width: none; }
}

/* ===================================================================
   Stage 17K: UX polish
   =================================================================== */
/* P1-1: the selected position always reads -- the "now" tint must never outrank the pressed state */
#mapFlagship .gi-timeline button[aria-pressed="true"],
#mapFlagship .gi-timeline button.is-now[aria-pressed="true"] { color: var(--text-inverse); }
/* P1-2: with a panel open on desktop, every map control steps left of it, in every mode, so nothing is unreachable */
@media (min-width: 861px) {
  .gi-globe.drawer-open .map-topbar,
  .gi-globe.drawer-open .map-bottombar { right: calc(clamp(380px, 30vw, 460px) + var(--sp-6)); }
}
/* P2-4: the Layers list uses the height the window actually has */
#mapFlagship #mapLayersPopover { max-height: min(calc(100vh - 230px), 720px); width: 300px; }
/* P2-3: search kind labels ("My location") never spill into the name column */
#mapFlagship .map-search-result-kind { min-width: 96px; white-space: nowrap; }
/* P1-6: a metric whose value is words, not a number, uses the reading style and wraps instead of clipping */
#mapFlagship .map-metric-value.is-text { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.3;
  font-weight: var(--fw-medium); white-space: normal; overflow-wrap: anywhere; }
/* P2-6: phone timeline -- full width, every position at least 30 px wide */
@media (max-width: 520px) {
  #mapFlagship .gi-timeline { width: 100%; justify-content: space-between; }
  #mapFlagship .gi-timeline button { min-width: 30px; flex: 1 1 0; }
}
/* P1-5: weather colour scales -- quiet, compact, above the status line */
.gi-globe .gi-wx-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 6px 12px;
  max-width: min(760px, 100%); border-radius: var(--radius-sm); background: rgba(10, 15, 26, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-secondary);
  font-size: var(--fs-label); }
.gi-globe .gi-wx-legend[hidden] { display: none; }
.gi-globe .gi-wx-legend-row { display: flex; align-items: center; gap: 8px; }
.gi-globe .gi-wx-legend-name { white-space: nowrap; }
.gi-globe .gi-wx-legend-name em { font-style: normal; color: var(--text-muted); }
.gi-globe .gi-wx-legend-scale { display: flex; flex-direction: column; gap: 2px; width: 150px; }
.gi-globe .gi-wx-legend-bar { display: block; height: 6px; border-radius: 3px; background-color: rgba(6, 9, 15, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.gi-globe .gi-wx-legend-ticks { display: flex; justify-content: space-between; color: var(--text-muted);
  font-size: 10px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .gi-globe .gi-wx-legend-scale { width: 120px; }
}
/* P1-2 follow-up: the bottom bar itself now steps left of the panel, so the status line no longer narrows twice */
@media (min-width: 861px) {
  .gi-globe.drawer-open .gi-env-status { max-width: min(640px, 100%); margin-right: 0; }
}
/* An open popover is always above the other control bar (the bottom bar comes later in the page and the two share a
   layer, so the Layers list used to slide beneath the status line and weather legend). */
.gi-globe .map-topbar:has(.map-popover:not([hidden])),
.gi-globe .map-bottombar:has(.map-popover:not([hidden])) { z-index: 7; }
/* P1-8 (compact): attribution and zoom ride above the MEASURED bottom bar (--gi-bottombar-h, set by the page) */
@media (max-width: 860px) {
  #mapFlagship.gi-globe .mapboxgl-ctrl-bottom-left,
  #mapFlagship.gi-globe .mapboxgl-ctrl-bottom-right { bottom: calc(var(--gi-bottombar-h, 52px) + var(--sp-5) + 6px); }
  #mapFlagship.gi-globe .map-zoom { bottom: calc(var(--gi-bottombar-h, 52px) + var(--sp-5) + 10px); }
}
@media (max-width: 520px) {
  /* phones: one status line; each layer's own panel carries the full detail */
  .gi-globe .gi-env-status span:nth-child(n + 2) { display: none; }
}

/* ===================================================================
   Stage 17L RC5: Safari acceptance polish
   =================================================================== */
/* (2) Control surfaces: Safari composites backdrop blur over the WebGL canvas more weakly than Chromium, so the
   0.78 glass read as see-through over bright imagery. Near-opaque navy glass with a firmer gold hairline keeps the
   ProcIntel look and stays readable over desert, ice, cloud and ocean alike. */
.gi-globe .map-panel,
.gi-globe .map-control-btn,
.gi-globe .map-zoom button,
.gi-globe .map-popover,
.gi-globe .gi-env-status,
.gi-globe .gi-wx-legend,
.gi-globe .gi-timeline-note {
  background: rgba(8, 13, 23, 0.92);
  border: 1px solid rgba(201, 169, 97, 0.26);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#mapFlagship.gi-globe .map-control-btn { color: var(--text-primary); }
#mapFlagship .gi-timeline button,
#mapFlagship .gi-timeline .gi-tl-seg { color: var(--text-secondary); }
.gi-globe .gi-env-status, .gi-globe .gi-wx-legend { color: var(--text-primary); }
/* states: hover, selected / open, keyboard focus, disabled -- each distinct, none colour-only */
#mapFlagship.gi-globe .map-control-btn:hover,
#mapFlagship .gi-timeline button:not([aria-pressed="true"]):not(:disabled):hover {
  background: rgba(22, 31, 49, 0.97);
  border-color: rgba(201, 169, 97, 0.55);
  color: var(--text-primary);
}
#mapFlagship.gi-globe .map-control-btn[aria-expanded="true"],
#mapFlagship.gi-globe .map-control-btn[aria-pressed="true"] {
  border-color: var(--accent-primary);
  background: rgba(30, 27, 18, 0.95);
  box-shadow: inset 0 -2px 0 var(--accent-primary), 0 8px 28px rgba(0, 0, 0, 0.55);
}
#mapFlagship.gi-globe .map-control-btn:focus-visible,
#mapFlagship .gi-timeline button:focus-visible,
#mapFlagship .map-zoom button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
#mapFlagship .gi-timeline button:disabled,
#mapFlagship.gi-globe .map-control-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* search: a readable placeholder and icon, and a visible focus ring on the whole field */
#mapFlagship .map-search input::placeholder { color: var(--text-muted); opacity: 1; }
#mapFlagship .map-search-field svg { color: var(--text-secondary); }
#mapFlagship .map-search:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary),
  0 8px 28px rgba(0, 0, 0, 0.55); }

/* (1) Mapbox attribution, at the minimum prominence Mapbox permits. The Mapbox logo is NEVER styled (Mapbox: "You may
   not style the Mapbox logo"); only the text attribution's own control is quietened: a dark compact "i" button
   instead of the beige disc, and -- when opened -- the full text stays legible (Mapbox: "attribution must be
   legible"). Nothing is hidden, shrunk below legibility, or made transparent. */
.gi-globe .mapboxgl-ctrl-attrib.mapboxgl-compact {
  background-color: rgba(8, 13, 23, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#mapFlagship .mapboxgl-ctrl-attrib-button {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20fill%3D%22%23C9D3E0%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E");
}
.gi-globe .mapboxgl-ctrl-attrib.mapboxgl-compact-show { background-color: rgba(8, 13, 23, 0.94); color: var(--text-secondary); }
.gi-globe .mapboxgl-ctrl-attrib.mapboxgl-compact-show a { color: var(--text-secondary); }
.gi-globe .mapboxgl-ctrl-attrib a:hover { color: var(--text-primary); text-decoration: underline; }

/* (4) The selected object's primary navigation: one clear action at the top of the panel */
.gi-globe .map-drawer-actions.is-primary { margin: 0 0 var(--sp-5); }
#mapFlagship a.map-drawer-action.is-primary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  background: var(--wash-accent);
  color: var(--accent-primary);
  font-family: var(--font-ui); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  text-decoration: none;
}
#mapFlagship a.map-drawer-action.is-primary:hover { background: rgba(201, 169, 97, 0.22); color: var(--accent-hover); }
#mapFlagship a.map-drawer-action.is-primary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
#mapFlagship .map-drawer-item-text { color: var(--text-primary); }