/* ==========================================================================
   MODULE MAP
   Loads only on the Module Map page template.
   Requires 01-tokens.css and 02-base.css
   ========================================================================== */

body.gh-map-page{
  --map-gm:#9a8cd0;
  --map-player:#5aa9a0;
  --map-both:#a9709e;
  --map-plate:#141c24;
  --map-edge:#28353f;
  --map-edge-hi:#3d4d5a;
  background:#0a0e13;
}
/* The map reads as instrumentation, so it stays dark whatever the site mode. */
body.gh-map-page .gh-map-shell{
  --bg:#0e131a; --bg-2:#151c25; --line:#232e3b;
  --tx:#f0f5fa; --tx-2:#b9c3d0; --tx-3:#8b96a5;
  --accent:#4d9be6; --gold:#d8b26b;
  background:var(--bg); color:var(--tx-2);
}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */
.gh-map-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:22px 0 14px; }
.gh-map-grp{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.gh-map-grp__l{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.15em;
  text-transform:uppercase; color:#57616e; margin-right:2px;
}
.gh-map-btn{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border:1px solid var(--map-edge); color:var(--tx-3);
  background:transparent; cursor:pointer; transition:all .13s ease;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.gh-map-btn:hover{ color:var(--tx-2); border-color:var(--map-edge-hi); }
.gh-map-btn[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }
.gh-map-btn.is-gold[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold); }
.gh-map-sep{ width:1px; height:20px; background:var(--map-edge); margin:0 4px; }

/* --------------------------------------------------------------------------
   CANVAS
   -------------------------------------------------------------------------- */
.gh-map-canvas{
  position:relative; background:var(--map-plate); border:1px solid var(--map-edge);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  overflow:hidden;
}
#gh-map{ display:block; width:100%; height:640px; cursor:grab; }
#gh-map.is-dragging{ cursor:grabbing; }
@media(max-width:760px){ #gh-map{ height:480px; } }

.gh-zone-ring{ fill:none; stroke:var(--map-edge); stroke-width:1; stroke-dasharray:3 5; opacity:.55; }
.gh-zone-label{
  font-family:var(--font-condensed); font-weight:700; font-size:15px;
  text-transform:uppercase; letter-spacing:.14em; fill:#57616e;
}

.gh-link{ stroke:var(--map-edge-hi); stroke-width:1.4; fill:none; transition:stroke-opacity .18s ease; }
.gh-link.is-dep{ stroke:var(--accent); stroke-width:1.6; stroke-opacity:.75; }
.gh-link.is-eco{ stroke:#57616e; stroke-dasharray:4 4; stroke-width:1.2; stroke-opacity:.85; }
.gh-link.is-conflict{ stroke:var(--gold); stroke-width:1.6; stroke-dasharray:1 4; stroke-linecap:round; }
.gh-link.is-dim{ stroke-opacity:.08; }

.gh-node{ cursor:pointer; }
.gh-node .gh-body{ stroke:#0e131a; stroke-width:2; transition:r .18s ease; }
.gh-node .gh-ring{ fill:none; stroke-width:1.6; opacity:.9; }
.gh-node text{
  font-family:var(--font-condensed); font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; fill:var(--tx-2); pointer-events:none;
}
.gh-node.is-dim{ opacity:.16; }
.gh-node.is-focus .gh-body{ stroke:var(--tx); }
.gh-node.is-focus text{ fill:var(--tx); }
.gh-node, .gh-node.is-dim{ transition:opacity .2s ease; }

/* --------------------------------------------------------------------------
   PANEL
   -------------------------------------------------------------------------- */
.gh-map-panel{
  position:absolute; top:14px; right:14px; width:290px;
  background:rgba(20,28,36,.97); border:1px solid var(--map-edge);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  padding:16px 18px; display:none; backdrop-filter:blur(3px);
}
.gh-map-panel.is-open{ display:block; }
.gh-map-panel__t{
  font-family:var(--font-condensed); font-weight:700; font-size:21px;
  text-transform:uppercase; line-height:1; color:var(--tx); padding-right:20px;
}
.gh-map-panel__d{ font-size:13.5px; line-height:1.6; color:var(--tx-3); margin-top:9px; }
.gh-map-panel__meta{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; color:#57616e; margin-top:12px;
}
.gh-map-panel__meta span{ color:var(--tx-2); }
.gh-map-panel__tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.gh-map-tag{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border:1px solid var(--map-edge); color:var(--tx-3);
  clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,3px 100%,0 calc(100% - 3px));
}
.gh-map-close{
  position:absolute; top:12px; right:14px; background:none; border:none;
  color:#57616e; cursor:pointer; font-size:16px; line-height:1; padding:2px 5px;
}
.gh-map-close:hover{ color:var(--tx-2); }
.gh-map-panel__links{ margin-top:13px; padding-top:12px; border-top:1px solid rgba(216,224,232,.08); }
.gh-map-lh{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#57616e; margin:9px 0 6px;
}
.gh-map-lh:first-child{ margin-top:0; }
.gh-map-li{ font-size:13px; color:var(--tx-2); padding:3px 0; display:flex; align-items:center; gap:8px; }
.gh-map-li i{ width:14px; height:2px; flex:none; display:block; }
.gh-map-open{
  display:inline-block; margin-top:13px; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(77,155,230,.4); padding-bottom:2px;
}
@media(max-width:900px){
  .gh-map-panel{ position:static; width:auto; margin-top:12px; }
}

/* --------------------------------------------------------------------------
   LEGEND
   -------------------------------------------------------------------------- */
.gh-map-legend{ display:flex; gap:26px; flex-wrap:wrap; padding:18px 0 30px; }
.gh-map-legend__h{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.15em;
  text-transform:uppercase; color:#57616e; margin-bottom:9px;
}
.gh-map-legend__i{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx-3); margin-bottom:6px; }
.gh-map-dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.gh-map-ringi{ width:13px; height:13px; border-radius:50%; border:2px solid; flex:none; background:transparent; }
.gh-map-line{ width:22px; height:0; border-top:2px solid; flex:none; }
.gh-map-sz{ display:flex; align-items:center; gap:4px; }
.gh-map-sz i{ border-radius:50%; background:#57616e; display:block; }

.gh-map-note{ font-size:13.5px; line-height:1.7; color:var(--tx-3); max-width:76ch; padding-bottom:50px; }
.gh-map-note b{ color:var(--tx-2); }

.gh-map-empty{
  border:1px dashed var(--map-edge); padding:60px 20px; text-align:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#57616e;
}

@media(prefers-reduced-motion:reduce){
  .gh-node, .gh-link{ transition:none !important; }
}

/* --------------------------------------------------------------------------
   SETUP HINT
   Shown only when records are missing Context or audience, so the map can
   explain itself rather than silently rendering everything one colour.
   -------------------------------------------------------------------------- */
.gh-map-hint{
  margin:18px 0 0; padding:11px 15px;
  border:1px solid rgba(216,178,107,.4); background:rgba(216,178,107,.07);
  color:var(--gold); font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.06em; line-height:1.7;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}

/* Unfiled nodes — no Context assigned. Dashed ring marks them as pending
   rather than letting them look like a deliberate centre cluster. */
.gh-node.is-unfiled .gh-ring{ stroke-dasharray:3 3; opacity:.7; }