/* ═══════════════════════════════════════════════════════════
   GR THEATER MAP — shared color + rendering system
   Load this once per theater page; all theater maps read
   their colors from this single source of truth.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Base geography — luminance-separated */
  --map-ocean:        #0B1220;
  --map-land:         #1E2A38;
  --map-coastline:    #3A4A5E;
  --map-border:       rgba(120, 140, 160, 0.25);

  /* Overlays — high contrast against geography */
  --map-route-primary:    #00E0FF;  /* strategic corridors */
  --map-route-secondary:  #4DB8FF;  /* active infrastructure */
  --map-route-inactive:   rgba(150, 150, 160, 0.55);  /* retired/ruptured infra */

  /* Nodes — single-tier base, active state dominant */
  --map-node:         #FFD166;
  --map-node-active:  #FF6B6B;

  /* Labels */
  --map-label:        #E6EDF3;
}

/* ── Base geography ─────────────────────────────────────── */

.theater-map-svg { background: var(--map-ocean); }

.geo-ocean-rect  { fill: var(--map-ocean); }

.geo-land {
  fill:           var(--map-land);
  stroke:         var(--map-coastline);
  stroke-width:   0.5;
  stroke-linejoin: round;
}

.geo-border {
  fill:           none;
  stroke:         var(--map-border);
  stroke-width:   0.4;
  vector-effect:  non-scaling-stroke;
}

.geo-label {
  fill:            var(--map-label);
  font-family:     var(--font-body, 'Inter', system-ui, sans-serif);
  font-size:       8.5px;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  pointer-events:  none;
  opacity:         0.55;
}

/* ── Nodes (crosshair style, all tiers render amber) ──── */

.map-node { cursor: pointer; }

.map-node circle.node-ring-outer {
  fill:         none;
  stroke:       var(--map-node);
  stroke-width: 1;
  opacity:      0.35;
}

.map-node circle.node-ring,
.map-node circle:not(.node-ring-outer):not(.node-core) {
  stroke: var(--map-node);
}

.map-node line {
  stroke:       var(--map-node);
  stroke-width: 1;
  opacity:      0.85;
}

.map-node circle.node-core {
  fill: var(--map-node);
}

/* ── C1 (ME map): status-driven marker color + new shape variants ──
   Hero-map palette so the theater map reads in the same language as
   the live global map:  crit → red,  elev → amber,  watch → neutral
   steel.  Applies to all four shapes (ring+crosshair for chokepoint,
   rounded square for zone/corridor, filled square for port/terminal/
   field, generic point fallback).  Hover / active rules below
   continue to override with --map-node-active for interaction
   feedback. */
.map-node[data-status="crit"]  circle.node-ring,
.map-node[data-status="crit"]  circle.node-ring-outer,
.map-node[data-status="crit"]  circle:not(.node-ring-outer):not(.node-core),
.map-node[data-status="crit"]  line,
.map-node[data-status="crit"]  .node-shape          { stroke: #ff5a4f; }
.map-node[data-status="crit"]  circle.node-core,
.map-node[data-status="crit"]  .node-shape-fill     { fill:   #ff5a4f; }

.map-node[data-status="elev"]  circle.node-ring,
.map-node[data-status="elev"]  circle.node-ring-outer,
.map-node[data-status="elev"]  circle:not(.node-ring-outer):not(.node-core),
.map-node[data-status="elev"]  line,
.map-node[data-status="elev"]  .node-shape          { stroke: #e8c84a; }
.map-node[data-status="elev"]  circle.node-core,
.map-node[data-status="elev"]  .node-shape-fill     { fill:   #e8c84a; }

.map-node[data-status="watch"] circle.node-ring,
.map-node[data-status="watch"] circle.node-ring-outer,
.map-node[data-status="watch"] circle:not(.node-ring-outer):not(.node-core),
.map-node[data-status="watch"] line,
.map-node[data-status="watch"] .node-shape          { stroke: #dce6f5; }
.map-node[data-status="watch"] circle.node-core,
.map-node[data-status="watch"] .node-shape-fill     { fill:   #dce6f5; }

/* Shape variant: rounded square outline for zone + corridor kinds. */
.map-node .node-shape {
  fill:         none;
  stroke-width: 1.5;
  opacity:      0.85;
}
/* Shape variant: filled square for port/terminal/field (reserved). */
.map-node .node-shape-fill {
  stroke:  none;
  opacity: 0.9;
}

.map-node .node-label {
  fill:            var(--map-label);
  font-family:     var(--font-head, 'Barlow Condensed', sans-serif);
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  pointer-events:  none;
}

/* Active + hover state — red dominant. Selectors specific enough to beat
   the `:not()` specificity in the default rules above. */
.map-node:hover circle.node-ring,
.map-node:hover circle.node-ring-outer,
.map-node:hover .node-shape,
.map-node.active-node circle.node-ring,
.map-node.active-node circle.node-ring-outer,
.map-node.active-node .node-shape,
.map-node:hover line,
.map-node.active-node line {
  stroke: var(--map-node-active);
}
.map-node:hover .node-core,
.map-node:hover .node-shape-fill,
.map-node.active-node .node-core,
.map-node.active-node .node-shape-fill {
  fill: var(--map-node-active);
}
.map-node.active-node circle.node-ring-outer {
  opacity:      0.6;
  stroke-width: 1.4;
}
.map-node:hover .node-label,
.map-node.active-node .node-label {
  fill: var(--map-node-active);
}

/* Political-node variant (Brussels) — disc + ring, no crosshair */
.map-node.node-political circle.node-ring-outer { stroke: var(--map-node); }
.map-node.node-political circle.node-ring       { fill: none; stroke: var(--map-node); stroke-width: 1.2; }
.map-node.node-political circle.node-core       { fill: var(--map-node); }
.map-node.node-political:hover circle,
.map-node.node-political.active-node circle { stroke: var(--map-node-active); }
.map-node.node-political:hover circle.node-core,
.map-node.node-political.active-node circle.node-core { fill: var(--map-node-active); }

/* ── Corridors + pipelines ──────────────────────────────── */

.map-corridor-primary {
  stroke:         var(--map-route-primary);
  stroke-width:   2.5;
  stroke-linecap: round;
  fill:           none;
  opacity:        0.82;
}

.map-corridor-secondary {
  stroke:         var(--map-route-secondary);
  stroke-width:   1.8;
  stroke-linecap: round;
  fill:           none;
  opacity:        0.55;
}

.map-pipeline { cursor: pointer; }
.map-pipeline .pipeline-visible {
  stroke:         var(--map-route-secondary);
  stroke-width:   1.8;
  stroke-linecap: round;
  fill:           none;
  opacity:        0.75;
  /* G: smooth hover light-up. Honors hover-intent without snapping —
     the response makes a true claim ("you are pointing at this") and
     should feel like a controlled instrument, not a flashbulb. */
  transition: stroke 0.18s ease, stroke-width 0.18s ease, opacity 0.18s ease;
}
.map-pipeline:hover .pipeline-visible,
.map-pipeline.active-pipeline .pipeline-visible {
  stroke:         var(--map-node-active);
  stroke-width:   2.4;
  opacity:        1;
}

.map-pipeline.pipeline-inactive .pipeline-visible {
  stroke:           var(--map-route-inactive);
  stroke-dasharray: 2 4;
}

.pipeline-rupture {
  stroke:       var(--map-node-active);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* C2: inset-map CSS rules (.inset-map-svg / .inset-extent-box /
   .inset-connector) removed with the Hormuz inset itself. */

/* ═══════════════════════════════════════════════════════════
   C2 (ME map only): hero-aligned palette + console typography.
   Scoped to .theater-env[data-theater="middle-east"] so the
   other 8 theater pages keep their current look until they're
   brought into the same standard.

   Hero values sourced verbatim from map-azimuthal-preview.html
   (the chassis HUD palette). When other theaters are aligned,
   either set their own data-theater scope or refactor these
   values into the shared --map-* variables.
   ═══════════════════════════════════════════════════════════ */

/* ── Field + graticule ── */
[data-theater="middle-east"] .geo-ocean-rect      { fill: #04060a; }
[data-theater="middle-east"] .theater-map-svg     { background: #04060a; }
[data-theater="middle-east"] .map-graticule {
  fill:         none;
  stroke:       #5a6f88;
  stroke-width: 0.5;
  opacity:      0.4;
}

/* ── Country geometry — CLARITY pass ──
   Theater maps have the OPPOSITE job from the hero: the geography
   IS the intelligence (which country is which, where nodes sit).
   So land gets clear-and-distinct treatment here, not the hero's
   recede-into-background treatment. Field, graticule, status
   palette, and console identity stay unchanged — only the land's
   readability is tuned. */
[data-theater="middle-east"] .geo-land {
  /* ROSTER: hero-grade resting treatment — crisp edge over a vertical
     relief gradient (defined as #land-relief in the theater SVG <defs>).
     Replaces the prior flat #2b3540 fill so the two tiers read as one
     instrument ("raised against the void"). Stops are dialed softer than
     the hero's so southern states stay legible at theater scale. */
  fill:           url(#land-relief);
  fill-opacity:   1;
  stroke:         #5a7088;
  stroke-width:   0.5;
}

/* ROSTER: authored countries get a pointer cursor to advertise the
   click-through. Dormant (unauthored) countries keep the default cursor;
   their // in-progress state surfaces via the native <title> tooltip. */
[data-theater="middle-east"] .geo-country[data-authored="true"] { cursor: pointer; }
[data-theater="middle-east"] .geo-border {
  stroke:       #6b8099;
  stroke-width: 0.6;
}

/* ── Caption bar: honest dated provenance, hero panel-framing register ── */
[data-theater="middle-east"] .map-caption-bar {
  font-family:    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                  Menlo, Consolas, monospace;
  font-size:      11px;
  letter-spacing: 0.02em;
  color:          rgba(205, 222, 245, 0.7);
  text-transform: none;
}

/* ── Focal-node console: hero diagnostic register ──
   Typographic / color match only — panel STRUCTURE (sections,
   image, related buttons) intact per spec. */
[data-theater="middle-east"] .intel-panel {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
               Menlo, Consolas, monospace;
  color:       #cdd8ef;
  text-shadow: 0 0 4px rgba(150, 190, 230, 0.18);
}
[data-theater="middle-east"] .intel-panel .panel-focal-label {
  font-family:    inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(150, 190, 230, 0.85);
}
[data-theater="middle-east"] .intel-panel .panel-node-name {
  font-family:    inherit;
  font-size:      18px;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          #e8edf6;
}
[data-theater="middle-east"] .intel-panel .panel-node-name::before {
  content: "> ";
  color:   rgba(150, 190, 230, 0.85);
}
[data-theater="middle-east"] .intel-panel .panel-node-type,
[data-theater="middle-east"] .intel-panel .panel-section-title {
  font-family:    inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(205, 222, 245, 0.75);
}
[data-theater="middle-east"] .intel-panel .panel-description,
[data-theater="middle-east"] .intel-panel .gr-interp,
[data-theater="middle-east"] .intel-panel .dev-item {
  font-family: inherit;
  color:       rgba(205, 222, 245, 0.85);
}
[data-theater="middle-east"] .intel-panel .pressure-key,
[data-theater="middle-east"] .intel-panel .pressure-val,
[data-theater="middle-east"] .intel-panel .signal-link-panel,
[data-theater="middle-east"] .intel-panel .related-node-btn {
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════
   C3 KINETIC (ME map only): motion layer, conflict outlines,
   critical-node pulse. Motion is permitted ONLY where it makes
   a true claim:
     1. critical-node pulse — Hormuz (the one status=crit node)
     2. kinetic-event pulse — time-bound events from kinetic-events.json
     3. hover response — implicit in pipeline/marker hover rules
   No scanning sweeps, no fake telemetry. Reduced-motion users
   get static markers (every animation has a prefers-reduced-motion
   guard at the bottom of this block).

   Visual ordering target:  kinetic pulse loudest > conflict
   outline middle > geography labels quietest.
   ═══════════════════════════════════════════════════════════ */

/* ── Conflict-country fill (Iran, Israel) ──
   ROSTER: shifted from outline-only to a SOLID status fill. The country
   reads as "filled in red" (70% fill-opacity) with a crisp full-opacity
   stroke on top — mirrors the hero map's diagnostic-on language. Color is
   driven by data-status (crit/elev/watch). pointer-events:none so clicks
   fall through to the .geo-country path beneath. */
[data-theater="middle-east"] .conflict-fill {
  fill-opacity:   0.7;
  stroke-width:   1.0;
  vector-effect:  non-scaling-stroke;
  pointer-events: none;
}
[data-theater="middle-east"] .conflict-fill[data-status="crit"]  { fill: #ff5a4f; stroke: #ff5a4f; }
[data-theater="middle-east"] .conflict-fill[data-status="elev"]  { fill: #e8c84a; stroke: #e8c84a; }
[data-theater="middle-east"] .conflict-fill[data-status="watch"] { fill: #dce6f5; stroke: #dce6f5; }

/* ── Critical-node pulse (status='crit' only) ──
   Sits behind the static rings; pulses outward + fades. The static
   rings + crosshair never move, so the marker location stays exact;
   the pulse adds an attention-claim around it. */
[data-theater="middle-east"] .map-node[data-status="crit"] .node-pulse {
  fill:           none;
  stroke:         #ff5a4f;
  stroke-width:   1.4;
  transform-origin: center;
  animation:      gr-critical-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes gr-critical-pulse {
  0%   { r: 12; opacity: 0.55; stroke-width: 1.6; }
  100% { r: 28; opacity: 0;    stroke-width: 0.6; }
}

/* ── Kinetic-event marker (violet, halo pulse) ──
   data-status="kinetic" drives palette; .map-event is the wrapper
   class. Three concentric circles per point event: halo (animated),
   ring (static), core (static dot). */
[data-theater="middle-east"] .map-event { cursor: pointer; }

[data-theater="middle-east"] .map-event .event-core {
  fill: #9d6bff;
  stroke: none;
}
[data-theater="middle-east"] .map-event .event-ring {
  fill:         none;
  stroke:       #9d6bff;
  stroke-width: 1.4;
  opacity:      0.85;
}
[data-theater="middle-east"] .map-event .event-halo {
  fill:           none;
  stroke:         #9d6bff;
  stroke-width:   1.4;
  animation:      gr-kinetic-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
[data-theater="middle-east"] .map-event .event-line {
  fill:           none;
  stroke:         #9d6bff;
  stroke-width:   1.8;
  stroke-linecap: round;
  opacity:        0.85;
}
[data-theater="middle-east"] .map-event .event-label {
  fill:            #c9b3ff;
  font-family:     var(--font-head, 'Barlow Condensed', sans-serif);
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  pointer-events:  none;
}
@keyframes gr-kinetic-pulse {
  0%   { r: 8;  opacity: 0.75; stroke-width: 1.6; }
  100% { r: 22; opacity: 0;    stroke-width: 0.6; }
}

/* Hover + active state for kinetic events: brighten ring, brighten
   label. Halo keeps pulsing (motion is the event's identity, not its
   hover state — so hover doesn't disrupt it). */
[data-theater="middle-east"] .map-event:hover .event-ring,
[data-theater="middle-east"] .map-event.active-event .event-ring {
  stroke:       #c9b3ff;
  stroke-width: 1.8;
  opacity:      1;
}
[data-theater="middle-east"] .map-event:hover .event-core,
[data-theater="middle-east"] .map-event.active-event .event-core {
  fill: #c9b3ff;
}
[data-theater="middle-east"] .map-event:hover .event-label,
[data-theater="middle-east"] .map-event.active-event .event-label {
  fill: #e8ddff;
}

/* ── Reduced-motion: every animation off, halos hidden ── */
@media (prefers-reduced-motion: reduce) {
  [data-theater="middle-east"] .map-node[data-status="crit"] .node-pulse,
  [data-theater="middle-east"] .map-event .event-halo {
    animation: none;
    opacity:   0;
  }
}