/* /embed/{cid}: one conflict in someone else's page. Dark by default, light with ?theme=light or the reader's setting. */
:root {
  --page: #121214; --surface-2: #232322; --border: rgba(255,255,255,0.10);
  --ink: #ffffff; --ink-2: #c3c2b7; --muted: #918e88; --link: #8fbaf0; --ocean: #070b14;
  --side-a: #3987e5; --side-b: #d95926; --side-other: #9085e9; --attack: #e5484d; --incident: #f2a33a;
  --st-escalating: #d03b3b; --st-active: #ec835a; --st-de-escalating: #fab219; --st-ceasefire: #0ca30c; --st-frozen: #898781;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --page: #ffffff; --surface-2: #f0efea; --border: rgba(0,0,0,0.12); --ink: #141414; --ink-2: #3d3c38;
    --muted: #6b6963; --link: #1f5fb8; --ocean: #c9d6e3; color-scheme: light; }
}
:root[data-theme="light"] { --page: #ffffff; --surface-2: #f0efea; --border: rgba(0,0,0,0.12); --ink: #141414; --ink-2: #3d3c38;
  --muted: #6b6963; --link: #1f5fb8; --ocean: #c9d6e3; color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--page); color: var(--ink); font: 13px/1.45 var(--font); overflow: hidden; }
a { color: var(--link); }
#map { flex: 1 1 55%; min-height: 160px; background: var(--ocean); }
#info { flex: 0 1 auto; max-height: 45%; overflow-y: auto; padding: 10px 12px 8px; border-top: 1px solid var(--border); }
@media (min-width: 640px) and (min-height: 300px) {
  body { flex-direction: row; }
  #map { flex: 1 1 auto; min-height: 0; }
  #info { flex: 0 0 300px; max-height: none; border-top: 0; border-left: 1px solid var(--border); }
}
.e-head { display: flex; align-items: flex-start; gap: 8px; }
.e-head h1 { flex: 1; margin: 0; font-size: 15px; line-height: 1.3; }
.e-head h1 a { color: inherit; text-decoration: none; }
.e-head h1 a:hover { text-decoration: underline; }
.badge { flex: none; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #111; text-transform: capitalize; background: var(--st-frozen); }
.badge.st-escalating { background: var(--st-escalating); color: #fff; }
.badge.st-active { background: var(--st-active); }
.badge.st-de-escalating { background: var(--st-de-escalating); }
.badge.st-ceasefire { background: var(--st-ceasefire); color: #fff; }
.e-meta { margin: 2px 0 8px; color: var(--muted); font-size: 12px; }
.e-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; color: var(--ink-2); font-size: 12px; }
.e-key i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.e-key .k-a { background: var(--side-a); border-radius: 2px; }
.e-key .k-b { background: var(--side-b); border-radius: 2px; }
.e-key .k-attack { background: var(--attack); }
.e-key .k-incident { background: var(--incident); }
.e-devs { list-style: none; margin: 0; padding: 0; }
.e-devs li { padding: 6px 0; border-top: 1px solid var(--border); }
.e-devs time { display: block; color: var(--muted); font-size: 11.5px; }
.e-devs .src { font-size: 11.5px; }
.e-more { margin: 8px 0 0; }
.e-foot { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.e-foot .brand { display: inline-block; margin-bottom: 2px; color: var(--ink); font-weight: 600; font-size: 12px; text-decoration: none; }
.e-foot .brand::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--st-escalating); }
.e-foot .brand:hover { text-decoration: underline; }
.maplibregl-popup-content { background: var(--page); color: var(--ink); font: 12px/1.4 var(--font); padding: 7px 10px; }
.maplibregl-popup-tip { display: none; }
.missing { margin: auto; padding: 16px; text-align: center; color: var(--ink-2); }