/* EUROSTROKES — European map design v1.2 (EnduroSat direction)
   Loaded after es-site.css on europe-map.html and attica-example.html (body.es-map).
   Replaces the map page's former inline <style>; every class rendered by the unchanged map script is styled here.
   Visual language: dark instrument panel, large tabular numerals, uppercase mono pretitles, hairline graticule.
   Deliberately NOT used: live/pulsing indicators, "online" states, motion trails, routing lines — the data are a
   dated source inventory, not telemetry or emergency routing. Satellite models from the remake are not imported. */

:root,body.es-map{
  --bg:#06121f; --surface:#0b1d2e; --sunk:#10263b; --line:rgba(127,151,169,.28); --ink:#f4f8fa; --muted:#a9bccb; --faint:#8fa5b6;
  --navy:#9cbbe6; --teal:#3fc6d1; --evt:#ec8a68; --ivt:#9cbbe6; --grey:#8199ab; --warn:#e8c14a;
  --land:#0f2236; --land-line:#2a4864; --complete:#14555d; --partial:#173049; --sea:#06121f;
  --orange:#e07b55;
  --serif:var(--sans);
  /* shell tokens re-mapped so header, banner and footer sit on the dark canvas */
  --paper:#06121f; --paper-2:#0b1d2e; --ink-2:#d8e2ea; --guide:rgba(127,151,169,.16); --rule:rgba(244,248,250,.85);
  --teal-text:#5fd3dd; --focus:#9cc0ff;
  background:var(--bg);color:var(--ink);color-scheme:dark}
body.es-map::before{opacity:.55}
body.es-map a{color:var(--teal-text)}
body.es-map .refresh-nav{background:color-mix(in srgb,var(--bg) 88%,transparent)}
body.es-map .refresh-brand::before{background:
   linear-gradient(var(--teal),var(--teal)) 0 0/6px 6px no-repeat,
   linear-gradient(var(--teal),var(--teal)) 12px 0/6px 6px no-repeat,
   linear-gradient(var(--ink),var(--ink)) 6px 6px/6px 6px no-repeat,
   linear-gradient(var(--teal),var(--teal)) 0 12px/6px 6px no-repeat,
   linear-gradient(var(--ink),var(--ink)) 12px 12px/6px 6px no-repeat}
body.es-map .review-banner{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(127,151,169,.14) 6px 7px),#0b1d2e;color:var(--muted);border-bottom-color:var(--line)}
body.es-map .refresh-footer{background:#030b14;border-top:1px solid var(--line)}

/* ---------- Map page layout ---------- */
.es-map .wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter) 72px}
.es-map .wrap>a:first-child,.es-map .wrap>a[href="#cty"]{display:inline-block;margin:18px 18px 0 0;font:500 var(--t-label)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.es-map .wrap>.notice{margin:14px 0 0}
.es-map header.top{position:relative;display:grid;gap:18px;padding:clamp(36px,6vw,96px) 0 clamp(28px,4vw,48px);margin-bottom:24px;border-bottom:1px solid var(--line);isolation:isolate}
/* owned hairline graticule (replaces the remake's satellite renders) */
.es-map header.top::before{content:"";position:absolute;z-index:-1;inset:0 calc(-1*var(--gutter)) 0 auto;width:min(760px,90%);
  background:url("/assets/design/graticule.svg") right center/contain no-repeat;opacity:.55;pointer-events:none}
.es-map .brand{font:500 var(--t-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.es-map h1{font:650 clamp(2.3rem,6.6vw,6.2rem)/.92 var(--sans);letter-spacing:-.04em;text-transform:uppercase;max-width:13ch;margin:0;color:var(--ink)}
.es-map .lede{color:var(--muted);max-width:60ch;font-size:clamp(1rem,1.25vw,1.18rem);margin:0}
.es-map .figs{display:flex;flex-wrap:wrap;gap:12px 48px;margin-top:6px}
.es-map .fig{display:grid;gap:6px}
.es-map .fig b{font:600 clamp(3rem,9vw,8rem)/.9 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink)}
.es-map .fig span{font:500 var(--t-label)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.es-map .small{font-size:.86rem;color:var(--muted)}
.es-map .notice{font:450 .86rem/1.5 var(--sans);color:var(--ink-2);background:rgba(11,29,46,.85);border:1px solid var(--line);
  border-left:3px solid var(--orange);padding:12px 16px;max-width:100ch}

/* stage */
.es-map .stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
@media (max-width:900px){.es-map .stage{grid-template-columns:1fr}}
.es-map .mapbox{background:var(--surface);border:1px solid var(--line);display:grid;position:relative}
/* corner ticks: instrument-frame motif (static) */
.es-map .mapbox::before,.es-map .mapbox::after{content:"";position:absolute;width:14px;height:14px;z-index:500;pointer-events:none;border-color:var(--teal);border-style:solid}
.es-map .mapbox::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.es-map .mapbox::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
#map{height:min(72vh,720px);min-height:420px;background:var(--sea)}
.es-map .legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 14px;border-top:1px solid var(--line);font:500 .78rem/1.3 var(--sans);color:var(--muted)}
.es-map .legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.es-map .legend .sw{border-radius:0}
.es-map aside.panel{background:var(--surface);border:1px solid var(--line);padding:16px;display:grid;gap:14px;
  max-height:calc(min(72vh,720px) + 46px);overflow:auto;min-width:0;overflow-wrap:anywhere}
.es-map .ctl{display:grid;gap:7px;min-width:0}
.es-map label.lbl{font:500 var(--t-label)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.es-map select,.es-map input[type=search]{width:100%;min-width:0;max-width:100%;min-height:44px;font:15px var(--sans);padding:10px 12px;
  border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink)}
.es-map select:disabled,.es-map input:disabled{opacity:.6}
.es-map #share-country{justify-self:start;min-height:44px;padding:0 16px;border:1px solid var(--muted);background:transparent;color:var(--ink);
  font:600 .82rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.es-map #share-country:hover{border-color:var(--teal);color:var(--teal)}
.es-map .hits{display:grid;gap:2px;max-height:180px;overflow:auto}
.es-map .hits button{all:unset;cursor:pointer;padding:8px;font-size:.9rem}
.es-map .hits button:hover,.es-map .hits button:focus-visible{background:var(--sunk);outline:1px solid var(--teal)}
.es-map .hits small{color:var(--muted)}
.es-map h2{font:650 clamp(1.4rem,2.2vw,2rem)/1.1 var(--sans);letter-spacing:-.025em;margin:0;color:var(--ink)}
.es-map h3{font:500 var(--t-label)/1.3 var(--mono);margin:0;text-transform:uppercase;letter-spacing:.12em;color:var(--orange)}
.es-map .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88rem;margin:0}
.es-map .kv dt{color:var(--muted)}
.es-map .kv dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.es-map .chip{display:inline-block;font:500 .7rem/1.6 var(--mono);padding:0 7px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.es-map .chip.ok{border-color:var(--teal);color:var(--teal)}
.es-map .chip.na{border-style:dashed}
.es-map .plist{display:grid;gap:9px;font-size:.88rem}
.es-map .plist p{margin:0}
.es-map button.lnk:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Leaflet popups & controls */
.es-map .leaflet-container{font-family:var(--sans);background:var(--sea)}
.es-map .leaflet-popup-content-wrapper,.es-map .leaflet-popup-tip{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:0;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.es-map .leaflet-popup-content{margin:14px 16px;font:.86rem/1.45 var(--sans);width:min(360px,65vw)!important;max-height:280px;overflow:auto;overflow-wrap:anywhere}
.es-map .leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
.es-map .leaflet-control-zoom a{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:0}
.es-map .leaflet-bar{border-radius:0;border-color:var(--line)}
.es-map .leaflet-control-attribution{background:rgba(6,18,31,.85)!important;color:var(--muted)!important;font-size:11px}
.es-map .leaflet-control-attribution a{color:var(--teal-text)}
.es-map .pp h4{font:650 1.05rem/1.25 var(--sans);margin:0;letter-spacing:-.01em}
.es-map .pp .sub{color:var(--muted);font-size:.8rem;margin:2px 0 8px}
.es-map .cap{border-top:1px solid var(--line);padding:7px 0;display:grid;gap:3px}
.es-map .cap .row{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.es-map .cap .nm{font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);min-width:96px}
.es-map .cap .val{font-weight:650}
.es-map .ev{font-size:.8rem;color:var(--muted)}
.es-map .ev details{margin-top:2px;border:0}
.es-map .ev summary{cursor:pointer;min-height:0;padding:2px 0;font:500 .8rem/1.3 var(--sans);display:list-item;list-style:disclosure-closed}
.es-map .ev details[open] summary{list-style:disclosure-open}
.es-map .ev summary::after{content:none}
.es-map .ev blockquote{margin:4px 0 2px;padding-left:8px;border-left:2px solid var(--line);color:var(--ink);font-size:.82rem}
.es-map .ev blockquote::before,.es-map .ev blockquote::after{content:none}
.es-map .ev .tr{font-style:italic}

/* country table + method */
.es-map section.block{margin-top:clamp(40px,6vw,88px);display:grid;gap:14px}
.es-map section.block>p{max-width:76ch;margin:0}
.es-map .tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line)}
.es-map table{border-collapse:collapse;width:100%;font-size:.86rem}
.es-map th,.es-map td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.es-map th{font:500 .68rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orange);background:var(--sunk);position:sticky;top:0}
.es-map td.n{text-align:right;font-variant-numeric:tabular-nums}
.es-map tbody tr{cursor:pointer}
.es-map tbody tr:hover,.es-map tbody tr:focus-visible{background:var(--sunk)}
.es-map tbody tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.es-map .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;border-top:1px solid var(--line)}
.es-map .cols>div{display:grid;gap:8px;align-content:start;padding:20px 20px 20px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.es-map .cols>div+div{padding-left:20px;border-left:1px solid var(--line)}}
.es-map .cols p{margin:0;font-size:.92rem;color:var(--ink-2)}
.es-map .wrap>footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);display:grid;gap:6px}

/* ---------- Attica example (same map language, light DOM) ---------- */
.es-map main{max-width:1440px}
.es-map main h1{margin-bottom:.4em}
#attica-map{height:min(60vh,520px);min-height:340px;border:1px solid var(--line);margin:24px 0 32px;background:var(--sea)}
.es-map main table{background:var(--surface);border:1px solid var(--line)}
.es-map main td,.es-map main th{padding:10px 12px}
@media (max-width:640px){.es-map main td,.es-map main th{padding:8px 6px}}
.es-map main caption{color:var(--muted);padding:0 0 8px}
.es-map main .notice{margin-bottom:18px}
.es-map main p{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){.es-map *{transition:none!important;animation:none!important}}
/* the unchanged Attica script sets a dark stroke inline; CSS outranks SVG presentation attributes */
.es-map #attica-map path.leaflet-interactive{stroke:var(--teal);fill:var(--teal);fill-opacity:.35}
/* footer keeps light text on the dark canvas (shell --paper is remapped to dark on map pages) */
body.es-map .refresh-footer{--paper:#f4f8fa}
body.es-map .refresh-nav nav a,body.es-map .refresh-brand{color:var(--ink)}
/* globe (es-globe.js) replaces the static graticule when scripting is available */
.es-map header.top.has-globe::before{display:none}
.es-map .es-globe{position:absolute;z-index:-1;right:calc(-1*var(--gutter) + 8px);top:50%;transform:translateY(-50%);width:min(680px,58vw);aspect-ratio:1;pointer-events:none}
@media (max-width:900px){.es-map .es-globe{width:min(520px,110vw);right:-28vw;opacity:.45}}
.es-map header.top.has-globe{overflow-x:clip}@media (max-width:900px){.es-map .es-globe{right:-20%}}