/* Draft events map. Tokens come from app.css; marker colours are the
   validated categorical slots (blue, orange, aqua) plus a neutral ink,
   and every group also has its own marker shape. */
:root{
  --g-mil:#eb6834; --g-hyb:#2a78d6; --g-civ:#1baf7a; --g-pol:#52514e;
  --ring:#5b6876;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --g-mil:#d95926; --g-hyb:#3987e5; --g-civ:#199e70; --g-pol:#c3c2b7; --ring:#93a1b0}}
:root[data-theme="dark"]{--g-mil:#d95926; --g-hyb:#3987e5; --g-civ:#199e70; --g-pol:#c3c2b7; --ring:#93a1b0}

body.mp{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.mp-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 16px 4px}
.mp-back{grid-column:1;font-size:.8rem;color:var(--muted);text-decoration:none}
.mp-back:hover{color:var(--accent)}
.mp-title{grid-column:1;font-family:var(--f-display);font-weight:500;font-size:1.2rem;line-height:1.25}
.mp-lang{grid-column:2;grid-row:1 / span 2;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-family:var(--f-mono);font-size:.8rem}
.mp-note{margin:4px 16px 0;padding:8px 12px;border-radius:10px;background:var(--sunk);color:var(--fg2);font-size:.8rem}

.mp-bar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 16px}
.mp-seg{display:inline-flex;gap:2px;padding:3px;background:var(--sunk);border-radius:10px}
.mp-seg button{min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--fg2);font-size:.8rem}
.mp-seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px var(--shadow)}
.mp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mp-chip{min-height:34px;padding:0 10px 0 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:.8rem;display:inline-flex;align-items:center;gap:6px}
.mp-chip[aria-pressed="false"]{color:var(--muted);background:transparent}
.mp-chip[aria-pressed="false"] .shp{opacity:.3}
.mp-chip .n{font-family:var(--f-mono);color:var(--muted)}

.mp-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:55vh auto;gap:0;min-height:0}
.mp-map{min-height:320px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mp-list{padding:12px 16px 40px;display:flex;flex-direction:column;gap:10px;min-width:0}
@media (min-width:900px){
  .mp-grid{grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:minmax(0,1fr);height:max(480px,calc(100dvh - 150px));overflow:hidden}
  .mp-map{border-bottom:0}
  .mp-list{overflow-y:auto;border-left:1px solid var(--line);border-top:1px solid var(--line)}
}

/* shapes: military diamond, hybrid circle, politics triangle, civil square */
.shp{display:inline-block;width:12px;height:12px;background:var(--c);flex:none}
.g-mil{--c:var(--g-mil)} .g-hyb{--c:var(--g-hyb)} .g-pol{--c:var(--g-pol)} .g-civ{--c:var(--g-civ)}
.shp.g-mil{transform:rotate(45deg) scale(.85);border-radius:2px}
.shp.g-hyb{border-radius:50%}
.shp.g-pol{clip-path:polygon(50% 0,100% 100%,0 100%)}
.shp.g-civ{border-radius:2px}

/* map markers */
.mk{width:30px;height:30px;display:grid;place-items:center;cursor:pointer;border:0;padding:0;background:none;transition:opacity .16s,filter .16s}
.mk .mk-s{position:absolute;inset:5px;background:var(--c);box-shadow:0 0 0 2px var(--surface),0 1px 4px var(--shadow);transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,filter .16s}
.mk.g-mil .mk-s{inset:7px;transform:rotate(45deg);border-radius:3px}
.mk.g-hyb .mk-s{border-radius:50%}
.mk.g-civ .mk-s{border-radius:4px}
.mk.g-pol .mk-s{inset:3px;clip-path:polygon(50% 4%,100% 96%,0 96%);box-shadow:none}
.mk .mk-n{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-family:var(--f-mono);font-size:.7rem;font-weight:600;color:#fff;line-height:1;transition:transform .16s cubic-bezier(.22,1,.36,1)}
.mk.g-pol .mk-n{color:var(--bg);padding-top:6px}
.mk.area::after{content:"";position:absolute;inset:-3px;border:1.5px dashed var(--c);border-radius:50%;transition:transform .16s,opacity .16s}
.mk.old{opacity:.55}
.mk.on{z-index:8;opacity:1}
.mk.on .mk-s{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--fg)}
.mk.on.g-pol .mk-s{filter:drop-shadow(0 0 2px var(--fg))}
.mk.focus{z-index:10;opacity:1;filter:none}
.mk.focus .mk-s{transform:scale(1.22);box-shadow:0 0 0 2px var(--surface),0 0 0 5px var(--fg),0 4px 12px var(--shadow)}
.mk.focus.g-mil .mk-s{transform:rotate(45deg) scale(1.22)}
.mk.focus.g-pol .mk-s{transform:scale(1.2);filter:drop-shadow(0 0 2px var(--surface)) drop-shadow(0 0 3px var(--fg))}
.mk.focus .mk-n{transform:scale(1.1)}
.mk.focus.area::after{transform:scale(1.16)}
.mk.dim{opacity:.28;filter:grayscale(.55)}
@keyframes mk-pulse{
  0%{transform:scale(.9);opacity:.85}
  75%,100%{transform:scale(2.35);opacity:0}
}
.mk.pulse::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c);pointer-events:none;animation:mk-pulse 1.3s cubic-bezier(0,0,.2,1) 2}

/* map hovercard & held popup */
.maplibregl-popup.mp-pop{z-index:20;pointer-events:none}
.maplibregl-popup.mp-pop.is-held,.maplibregl-popup.mp-pop.is-held .maplibregl-popup-content{pointer-events:auto}
.maplibregl-popup.mp-pop .maplibregl-popup-content{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.maplibregl-popup.mp-pop .maplibregl-popup-tip{display:none}
@keyframes mp-pop-in{
  0%{opacity:0;transform:translateY(4px) scale(.98)}
  100%{opacity:1;transform:none}
}
.mp-pop-card{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 8px 24px var(--shadow);display:flex;flex-direction:column;gap:5px;font-family:var(--f-body);animation:mp-pop-in .1s ease-out}
.mp-pop-card.is-held{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg),0 10px 28px var(--shadow)}
.mp-pop-bar{display:block;width:32px;height:4px;border-radius:999px;background:var(--c);margin-bottom:1px}
.mp-pop-h{display:flex;align-items:center;gap:6px;min-width:0}
.mp-pop-nm{font-weight:600;font-size:.86rem;line-height:1.25;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-pop-k{font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex:none}
.mp-pop-x{flex:none;width:22px;height:22px;margin:-4px -4px -4px 2px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.mp-pop-x:hover{background:var(--sunk);color:var(--fg)}
.mp-pop-t{font-size:.8rem;line-height:1.42;color:var(--fg);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mp-pop-card.is-held .mp-pop-t{-webkit-line-clamp:7}
.mp-pop-src{font-size:.74rem;margin-top:2px;align-self:flex-start}
.mp-pop-more{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);border-top:1px solid var(--line2);padding-top:5px;margin-top:2px}

/* cards */
.mp-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mp-h h2{font-family:var(--f-display);font-weight:500;font-size:1rem}
.mp-all{border:0;background:none;color:var(--accent);font-size:.8rem;padding:6px 0}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s}
.pc.on{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.pc-h{display:flex;align-items:center;gap:8px;border:0;border-radius:8px;background:none;padding:4px 6px;margin:-4px -6px;text-align:left;width:calc(100% + 12px);transition:background-color .15s}
.pc-h:hover{background:var(--sunk)}
.pc-h .nm{font-weight:600;flex:1;min-width:0}
.pc-h .k{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ev{display:flex;flex-direction:column;gap:3px;padding-top:8px;border-top:1px solid var(--line2)}
.ev.ev-i{cursor:pointer;border-radius:8px;padding:8px 8px 6px;margin:0 -8px;transition:background-color .15s,box-shadow .15s}
.ev.ev-i:hover{background:var(--sunk)}
.ev.ev-i.on{background:var(--sunk);box-shadow:inset 3px 0 0 var(--accent)}
.ev-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.75rem;color:var(--muted)}
.ev-m .ind{display:inline-flex;align-items:center;gap:5px;color:var(--fg2)}
.ev-m .ind .shp{width:9px;height:9px}
.gr{font-family:var(--f-mono);font-weight:600;font-size:.7rem;padding:1px 6px;border-radius:6px;border:1px solid var(--line);color:var(--fg2)}
.gr.A{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ev p{font-size:.88rem;color:var(--fg)}
.ev a{font-size:.75rem;align-self:flex-start}
.more{align-self:flex-start;border:0;background:none;color:var(--accent);font-size:.8rem;padding:4px 0}
.mp-empty{color:var(--muted);font-size:.9rem;padding:8px 0}
details.unp{margin-top:8px}
details.unp summary{cursor:pointer;font-family:var(--f-display);font-weight:500;font-size:1rem;padding:6px 0}
details.unp .pc{margin-top:8px}

.maplibregl-ctrl-attrib{font-size:.65rem}

/* Card export mode for social share images */
.mp-card-brand{display:none}
body.is-card{min-height:auto;background:var(--bg);overflow:hidden;margin:0;padding:0}
body.is-card .mp-top,body.is-card .mp-note,body.is-card .mp-bar,body.is-card .maplibregl-ctrl-top-right{display:none!important}
body.is-card .mp-card-brand{display:inline-flex;align-items:center;position:absolute;top:12px;left:14px;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-family:var(--f-display);font-weight:700;font-size:.78rem;color:var(--fg);box-shadow:0 2px 8px var(--shadow)}
body.is-card .mp-grid{display:flex;flex-direction:column;height:100vh;height:100dvh}
body.is-card .mp-map{flex:none;height:44vh;min-height:240px;border-top:0;border-bottom:1px solid var(--line)}
body.is-card .mp-list{flex:1;overflow:hidden;padding:10px 14px 14px;gap:8px}
body.is-card .mp-h{margin-bottom:2px}
body.is-card .mp-h h2{font-size:.95rem}
body.is-card .pc{padding:10px 12px;gap:6px;border-radius:12px}
body.is-card .pc-h{font-size:.85rem}
body.is-card .ev{font-size:.8rem;line-height:1.38}
body.is-card .ev p{margin:2px 0 3px}
body.is-card .ev-m{font-size:.72rem}
body.is-card .ev a{font-size:.72rem}
body.is-card .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib-inner{display:none}