/* PROJECT MAGNETO — APP NEXT · OSINT world map (design work copy, never deployed from here)
   Palette = this app's tokens (index.html :root / html.light) + the map-local tokens below.
   Glow lives on DATA only (markers, the selected ring, the coastline the data sits on), never on chrome.
   Motion: transform/opacity only; --om-ease-* are emil-design-eng's three curves verbatim. */
:root {
  --map-land: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg-surface));
  --map-land-crit: color-mix(in srgb, var(--down) 26%, var(--map-land));
  --map-land-high: color-mix(in srgb, var(--warn) 32%, var(--map-land));
  --map-land-active: color-mix(in srgb, var(--map-land) 78%, var(--border-strong));
  --mk-crit-glow: color-mix(in srgb, var(--down) 55%, transparent);
  --mk-high-glow: color-mix(in srgb, var(--warn) 40%, transparent);
  --om-plate: color-mix(in srgb, var(--bg-deeper) 84%, transparent);
  --om-plate-line: color-mix(in srgb, var(--border-default) 38%, transparent);
  /* THREE red tiers on /next, weakest first: the faint standing tint on OSINT feed rows < this STRONG tint (a fresh High or Critical row
     in "Critical now", 30 min or until Acknowledge) < the solid EXTREME row (shell.css --mgx-fill). Both tokens are the dial. */
  --mg-fresh-bg: color-mix(in srgb, var(--mgx-fill, #8E0B1E) 46%, transparent);
  --mg-fresh-accent: var(--down);
  --om-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --om-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --om-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --map-h: clamp(420px, 52dvh, 560px);
}
html.light {
  --map-land-active: color-mix(in srgb, var(--map-land) 91%, var(--info));
  --map-land-crit: color-mix(in srgb, var(--down) 18%, var(--map-land));
  --map-land-high: color-mix(in srgb, var(--warn) 14%, var(--map-land));
  --om-plate: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  --om-plate-line: color-mix(in srgb, var(--border-default) 42%, transparent);
  --mg-fresh-bg: color-mix(in srgb, var(--mgx-fill, #A3122A) 26%, transparent);
}

/* ── the band ───────────────────────────────────────────────────────────── */
.omap { position: relative; padding: 12px var(--gutter) 0; }
.om-band {
  position: relative; height: var(--map-h); border-radius: 14px; overflow: hidden; isolation: isolate;
  background: var(--bg-deeper);
  box-shadow: 0 0 0 1px var(--om-plate-line) inset;
}
.omap.is-expanded .om-band { height: calc(100dvh - var(--header-h) - 24px); }
.om-stage {
  position: absolute; inset: 0; direction: ltr; touch-action: none; cursor: grab; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.om-stage:active { cursor: grabbing; }
.om-stage:focus-visible { box-shadow: 0 0 0 2px var(--accent) inset; border-radius: 14px; }
.om-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* vignette: the reference's dark edges, in the field colour (static, not animated) */
.om-vig {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: 14px;
  background:
    radial-gradient(120% 140% at 50% 40%, transparent 58%, color-mix(in srgb, var(--bg-deeper) 85%, transparent) 100%);
}
html.light .om-vig { background: radial-gradient(120% 140% at 50% 40%, transparent 62%, color-mix(in srgb, var(--bg-deeper) 70%, transparent) 100%); }
/* the curtain used by Expand / Collapse: a transform, never a height animation */
.om-curtain { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-base); z-index: 9; pointer-events: none; transform: translateY(100%); }

/* ── HUD (selected crosshair + hotspot labels) — aria-hidden, decorative-but-meaningful ── */
.om-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.om-xh, .om-xv { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 160ms var(--om-ease-out); }
.om-xh { width: 100%; height: 1px; background: color-mix(in srgb, var(--accent) 34%, transparent); }
.om-xv { height: 100%; width: 1px; background: color-mix(in srgb, var(--accent) 34%, transparent); }
.om-hud.has-sel .om-xh, .om-hud.has-sel .om-xv { opacity: 1; }
.om-xlab { position: absolute; left: 0; top: 0; font: 600 10px/1 var(--font-mono); letter-spacing: .02em; color: var(--text-secondary);
  padding: 3px 5px; border-radius: 5px; background: var(--om-plate); white-space: nowrap; opacity: 0; transition: opacity 160ms var(--om-ease-out);
  font-variant-numeric: tabular-nums; }
.om-hud.has-sel .om-xlab { opacity: 1; }
.om-hot { position: absolute; left: 0; top: 0; font: 600 11px/1.1 var(--font-sans); color: var(--text-secondary); white-space: nowrap;
  letter-spacing: .01em; text-shadow: 0 0 3px var(--bg-deeper), 0 0 6px var(--bg-deeper), 0 1px 2px var(--bg-deeper);
  transition: opacity 180ms var(--om-ease-out); unicode-bidi: isolate; }
html.light .om-hot { text-shadow: 0 0 3px var(--bg-surface), 0 0 6px var(--bg-surface); }
.om-hot b { font-family: var(--font-mono); font-weight: 700; color: var(--text-tertiary); margin-inline-start: 5px; font-variant-numeric: tabular-nums; }
.om-moving .om-hot { opacity: 0; }

/* ── markers (real <button>s, positioned with transform) ─────────────────── */
.om-mks { position: absolute; inset: 0; z-index: 4; contain: layout paint style; pointer-events: none; }
.om-mk, .om-cl {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent; will-change: transform;
}
.om-mk:focus-visible, .om-cl:focus-visible { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-bg); border-radius: 50%; outline: none; }
@media (pointer: coarse) { .om-mk::before, .om-cl::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } }
.om-g { position: relative; display: block; transition: transform 120ms var(--om-ease-out), opacity 150ms var(--om-ease-out); }
.om-in { opacity: 0; }
.om-in .om-g { transform: scale(.85); }
.om-out { opacity: 0 !important; transition: opacity 150ms var(--om-ease-out); pointer-events: none !important; }
.om-mk, .om-cl { transition: opacity 180ms var(--om-ease-out); }
.om-mk:active .om-g, .om-cl:active .om-g { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .om-mk:hover .om-g { transform: scale(1.15); }
  .om-cl:hover .om-g { transform: scale(1.06); }
}
/* tier glyphs — shape AND colour (never colour alone) */
.t3 .om-g { width: 17px; height: 15px; background: var(--down); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.t3 .om-g::after { content: ""; position: absolute; left: 50%; top: 62%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--text-primary); }
html.light .t3 .om-g::after { background: var(--bg-surface); }
.t3 .om-gw { filter: drop-shadow(0 0 5px var(--mk-crit-glow)) drop-shadow(0 0 1px var(--mk-crit-glow)); display: grid; place-items: center; }
.t2 .om-g { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--warn) inset; }
.t2 .om-g::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--warn); }
.t2 .om-gw { filter: drop-shadow(0 0 4px var(--mk-high-glow)); display: grid; place-items: center; }
.t1 .om-g { width: 8px; height: 8px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 1.5px var(--bg-deeper); }
.t0 .om-g { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--text-tertiary) inset; opacity: .8; }
.om-gw { display: grid; place-items: center; }
/* the idle breath: critical only, opacity only, compositor; paused when the tab hides */
.t3 .om-halo { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--mk-crit-glow) 0, transparent 68%); animation: om-breathe 2.4s ease-in-out infinite; }
@keyframes om-breathe { 0%, 100% { opacity: .9; } 50% { opacity: .3; } }
/* live (≤ 15 min): a ring that keeps propagating — the product's CRITICAL pin, on the map */
.om-live .om-ring { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--down) inset; animation: om-ring 2.4s var(--om-ease-out) infinite; }
@keyframes om-ring { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
/* selected: the gold ring (gold = selected + focus only) */
.om-mk.sel::after, .om-cl.sel::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); pointer-events: none; }
.om-mk.sel { z-index: 900 !important; }
.om-unc { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; transform: scale(.9); transition: opacity 200ms var(--om-ease-out), transform 200ms var(--om-ease-out); }
.om-mk.sel.pc-country .om-unc { opacity: 1; transform: scale(1); }
.om-dim { opacity: .35; }

/* clusters: ring = the tier mix (a tiny chart), count = tabular mono */
.om-cl { width: var(--d, 32px); height: var(--d, 32px); margin: calc(var(--d, 32px) / -2) 0 0 calc(var(--d, 32px) / -2); }
.om-cl .om-g { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; }
.om-cl .om-ringc { position: absolute; inset: 0; border-radius: 50%; background: var(--mix);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }
.om-cl .om-disc { position: absolute; inset: 4px; border-radius: 50%; background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); }
.om-cl .om-n { position: relative; font: 700 11px/1 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.om-cl.mt3 .om-g { filter: drop-shadow(0 0 6px var(--mk-crit-glow)); }
.om-cl.mt2 .om-g { filter: drop-shadow(0 0 5px var(--mk-high-glow)); }
.om-cl.stack .om-disc { inset: 5px; box-shadow: 0 0 0 1px var(--om-plate-line); }
.om-rip { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px currentColor inset; opacity: 0; z-index: 5; }

/* the callout for a live CRITICAL (label cohort capped at 3) */
.om-call { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; transform-origin: 0 100%; }
.om-call span { display: inline-flex; align-items: center; gap: 6px; margin: -38px 0 0 12px; padding: 4px 8px; border-radius: 7px; white-space: nowrap;
  font: 700 10.5px/1.1 var(--font-sans); color: var(--text-primary); background: color-mix(in srgb, var(--down) 22%, var(--bg-deeper));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 60%, transparent) inset; unicode-bidi: isolate; }
.om-call em { font-style: normal; color: var(--down); letter-spacing: .06em; }
html.light .om-call span { background: color-mix(in srgb, var(--down) 10%, var(--bg-surface)); }

/* ── plates (top + bottom chrome inside the band) ───────────────────────── */
.om-top, .om-bar { position: absolute; z-index: 7; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.om-top > *, .om-bar > * { pointer-events: auto; }
.om-top { top: 10px; inset-inline: 12px; justify-content: space-between; }
.om-bar { bottom: 10px; inset-inline: 12px; justify-content: space-between; gap: 10px; }
.om-plate { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px; border-radius: 10px; background: var(--om-plate);
  box-shadow: 0 0 0 1px var(--om-plate-line) inset; }
.om-title { padding-inline: 10px 8px; gap: 10px; }
.om-title h2 { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--text-primary); white-space: nowrap; }
.om-count { font: 600 11px/1 var(--font-sans); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.om-count b { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
.om-count .c3 { color: var(--down); }
.om-badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--warn); background: var(--warn-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent) inset; unicode-bidi: isolate; }
.om-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.om-replaying .om-badge i { animation: om-breathe 1.2s ease-in-out infinite; }
.om-ib { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
  color: var(--text-secondary); transition: color 150ms ease, background-color 150ms ease, transform 120ms var(--om-ease-out); white-space: nowrap; }
.om-ib:active { transform: scale(.97); }
.om-ib .ico { width: 15px; height: 15px; }
.om-ib[aria-pressed="true"] { color: var(--text-primary); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent-dim) inset; }
@media (hover: hover) and (pointer: fine) { .om-ib:hover { color: var(--text-primary); background: var(--bg-hover); } }
.om-ib:focus-visible, .om-seg button:focus-visible, .om-tog:focus-visible, .om-chip:focus-visible { border-radius: 8px; }
.om-sep { width: 1px; height: 16px; background: var(--om-plate-line); }

/* legend = filter (shape + colour + word + live count) */
.om-tog { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary); transition: opacity 120ms ease, background-color 150ms ease, transform 120ms var(--om-ease-out); white-space: nowrap; }
.om-tog:active { transform: scale(.97); }
.om-tog b { font: 700 11px/1 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.om-tog[aria-pressed="false"] { opacity: .45; }
.om-tog[aria-pressed="false"] .om-sw { filter: grayscale(1); }
@media (hover: hover) and (pointer: fine) { .om-tog:hover { background: var(--bg-hover); } }
.om-sw { position: relative; display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; }
.om-sw.t3::before { content: ""; width: 12px; height: 11px; background: var(--down); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.om-sw.t2::before { content: ""; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--warn) inset; }
.om-sw.t2::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--warn); }
.om-sw.t1::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.om-sw.t0::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--text-tertiary) inset; }
.om-lgt { font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); padding-inline: 4px 2px; white-space: nowrap; }

/* time: window segment · play · histogram slider · as-of */
.om-time { gap: 8px; padding-inline: 6px 10px; }
.om-seg { display: inline-flex; padding: 2px; border-radius: 8px; box-shadow: 0 0 0 1px var(--om-plate-line) inset; }
.om-seg button { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: color 120ms ease, background-color 120ms ease; }
.om-seg button[aria-pressed="true"] { color: var(--text-primary); background: var(--bg-hover); box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.om-hist { position: relative; width: 240px; height: 26px; flex: none; touch-action: none; cursor: ew-resize; border-radius: 4px; }
.om-hist svg { display: block; width: 100%; height: 100%; overflow: visible; }
.om-hist:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.om-asof { font: 600 10.5px/1.15 var(--font-mono); color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.om-play { color: var(--text-primary); }
.om-unp { gap: 7px; }
.om-unp b { font: 700 11px/1 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.om-unp .om-qm { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--text-tertiary) inset; display: inline-grid; place-items: center;
  font: 800 8px/1 var(--font-sans); color: var(--text-tertiary); }

/* search chip, toast, empty, credit */
.om-chipbar { position: absolute; z-index: 8; top: 52px; inset-inline-start: 12px; display: flex; gap: 8px; align-items: center; height: 30px; padding: 0 6px 0 10px;
  border-radius: 9px; background: var(--om-plate); box-shadow: 0 0 0 1px var(--accent-dim) inset; font-size: 11.5px; color: var(--text-secondary); }
.om-chipbar[hidden] { display: none; }
.om-chipbar q { color: var(--text-primary); font-weight: 700; quotes: "“" "”"; unicode-bidi: isolate; }
.om-toast { position: absolute; z-index: 8; top: 52px; inset-inline-end: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--down) 18%, var(--bg-deeper)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 55%, transparent) inset;
  font-size: 11.5px; font-weight: 600; color: var(--text-primary); transform: translateY(-140%); opacity: 0;
  transition: transform 400ms ease, opacity 400ms ease; pointer-events: none; max-width: min(360px, 70%); }
.om-toast.on { transform: none; opacity: 1; pointer-events: auto; }
.om-toast .om-sw { flex: none; }
.om-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
html.light .om-toast { background: color-mix(in srgb, var(--down) 8%, var(--bg-surface)); }
.om-empty { position: absolute; z-index: 6; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-size: 13px; color: var(--text-secondary); padding: 10px 14px; border-radius: 10px; background: var(--om-plate); }
.om-empty[hidden] { display: none; }
.om-empty small { display: block; margin-top: 3px; font-size: 11px; color: var(--text-tertiary); }
.om-credit { position: absolute; z-index: 7; bottom: 52px; inset-inline-end: 16px; font-size: 9.5px; color: var(--text-tertiary); opacity: .8; pointer-events: none; }

/* tooltip: origin-aware, 125 ms, instant for neighbours */
.om-tip { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; width: max-content; max-width: 280px; padding: 8px 10px 9px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg-elevated) 96%, transparent); box-shadow: 0 0 0 1px var(--border-subtle) inset, 0 10px 28px rgba(0, 0, 0, .35);
  color: var(--text-primary); font-size: 11.5px; line-height: 1.35; opacity: 0; transform: scale(.97); transform-origin: var(--tx, 50%) 100%;
  transition: opacity 125ms var(--om-ease-out), transform 125ms var(--om-ease-out); direction: var(--udir, ltr); }
html.light .om-tip { box-shadow: 0 0 0 1px var(--border-subtle) inset, 0 10px 28px rgba(2, 29, 67, .14); }
.om-tip.on { opacity: 1; transform: none; }
.om-tip[data-instant] { transition-duration: 0ms; }
.om-tip .r1 { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; }
.om-tip .r2, .om-tip .r3 { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--text-secondary); flex-wrap: wrap; }
.om-tip .pc { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); margin-top: 3px; }
.om-tip .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-tertiary); }
.om-tip .ico { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.om-tip .mix { display: flex; gap: 10px; margin-top: 5px; }
.om-tip .mix span { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.om-tip .hint { margin-top: 5px; font-size: 10.5px; color: var(--text-tertiary); }

/* interest + direction chips (the app's anatomy) */
.om-int { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.om-int.a1 { color: var(--text-tertiary); box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.om-int.a2 { color: var(--info); background: var(--info-bg); }
.om-int.a3 { color: var(--warn); background: var(--warn-bg); }
.om-int.a4 { color: var(--down); background: var(--down-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 50%, transparent) inset; letter-spacing: .04em; }
.om-int.a0 { color: var(--text-tertiary); font-weight: 600; }
.om-dir { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary);
  box-shadow: 0 0 0 1px var(--border-subtle) inset; }

/* ── the drawer / tray / stack panel ─────────────────────────────────────── */
.om-panel {
  position: fixed; z-index: 45; top: calc(var(--header-h) + 12px); bottom: 12px; inset-inline-end: 12px; width: min(408px, calc(100vw - 24px));
  display: flex; flex-direction: column; border-radius: 14px; background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
  box-shadow: 0 0 0 1px var(--border-subtle) inset, 0 24px 60px rgba(0, 0, 0, .45); color: var(--text-primary);
  transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform 250ms var(--om-ease-out), visibility 0s linear 250ms;
}
html.light .om-panel { box-shadow: 0 0 0 1px var(--border-subtle) inset, 0 24px 60px rgba(2, 29, 67, .16); }
[dir="rtl"] .om-panel { transform: translateX(calc(-100% - 24px)); }
.om-panel.open { transform: none; visibility: visible; transition: transform 500ms var(--om-ease-drawer), visibility 0s; }
.om-ph { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--om-plate-line); flex: none; }
[dir="rtl"] .om-ph { padding: 12px 16px 10px 12px; }
.om-ph .sp { flex: 1; }
.om-handle { display: none; }
.om-pb { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 14px 16px 18px; }
.om-pf { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--om-plate-line); }
.om-fam { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--info); background: var(--info-bg); }
.om-kind { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.om-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); padding: 2px 6px; border-radius: 5px; background: var(--warn-bg); }
.om-h { font-size: 17px; line-height: 1.38; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); outline: none; }
.om-h:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }
.om-sev { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.om-sev .b3 { color: var(--down); } .om-sev .b2 { color: var(--warn); } .om-sev .b1 { color: var(--info); } .om-sev .b0 { color: var(--text-tertiary); }
.om-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 9px 14px; margin: 16px 0 4px; align-items: center; }
.om-kv dt { font-size: 11px; font-weight: 600; color: var(--text-tertiary); }
.om-kv dd { font-size: 12.5px; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.om-kv dd small { color: var(--text-tertiary); font-size: 11px; }
.om-kv .ico { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text-secondary); }
.om-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.om-why { margin-top: 16px; }
.om-why h4 { font-size: 11px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 6px; }
.om-why p { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); }
.om-why p + p { margin-top: 8px; }
.om-more { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--info); }
.om-note { margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary); padding: 8px 10px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.om-np { margin-top: 4px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--bg-elevated) 50%, transparent); box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.om-np strong { display: block; font-size: 14px; }
.om-np span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.om-risk { font-size: 10.5px; line-height: 1.5; color: var(--text-tertiary); }
.om-risk b { display: inline-flex; align-items: center; gap: 5px; color: var(--down); font-size: 10px; font-weight: 800; letter-spacing: .1em; margin-inline-end: 6px; }
.om-x { width: 32px; height: 32px; }
.om-back { height: 30px; padding: 0 10px 0 6px; gap: 4px; display: inline-flex; align-items: center; }
[dir="rtl"] .om-back .ico { transform: scaleX(-1); }
/* tray / stack rows */
.om-lead { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 12px; }
.om-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.om-row { display: grid; grid-template-columns: 16px 1fr; gap: 3px 10px; width: 100%; text-align: start; padding: 9px 8px; border-radius: 8px;
  transition: background-color 120ms ease, transform 120ms var(--om-ease-out); }
.om-row:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .om-row:hover { background: var(--bg-hover); } }
.om-row .om-sw { margin-top: 2px; }
.om-row .m { font-size: 10.5px; color: var(--text-tertiary); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.om-row .h { grid-column: 2; font-size: 12.5px; line-height: 1.4; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.om-row .h.np { color: var(--text-tertiary); font-style: italic; }
.om-row .mn { grid-column: 2; font-size: 10.5px; color: var(--warn); }

/* filters popover */
.om-pop { position: absolute; z-index: 30; bottom: 52px; inset-inline-start: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 64px); overflow: auto;
  padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg-surface) 98%, transparent);
  box-shadow: 0 0 0 1px var(--border-subtle) inset, 0 18px 44px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(4px) scale(.98); transform-origin: 0 100%; transition: opacity 150ms var(--om-ease-out), transform 150ms var(--om-ease-out); visibility: hidden; }
[dir="rtl"] .om-pop { transform-origin: 100% 100%; }
.om-pop.on { opacity: 1; transform: none; visibility: visible; }
.om-pop h5 { font-size: 11px; font-weight: 700; color: var(--text-tertiary); margin: 4px 0 8px; }
.om-pop h5 + .om-chips { margin-bottom: 12px; }
.om-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.om-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary); box-shadow: 0 0 0 1px var(--border-subtle) inset; transition: background-color 120ms ease, color 120ms ease, transform 120ms var(--om-ease-out); }
.om-chip:active { transform: scale(.97); }
.om-chip .ico { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.om-chip b { font: 700 10.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.om-chip[aria-pressed="true"] { color: var(--text-primary); background: var(--bg-hover); box-shadow: 0 0 0 1px var(--border-default) inset; }
.om-chip[aria-pressed="false"] { opacity: .5; }
.om-pop .om-reset { margin-top: 2px; }

/* the header LIVE pill reflects the replay state */
.pill.live.om-sample { color: var(--text-tertiary); box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.pill.live.om-sample .dot { animation: none; box-shadow: none; }
.pill.live.om-replay { color: var(--info); box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 45%, transparent) inset; }

/* ── phone: map on top, controls under it, the card as a bottom sheet ─────── */
@media (max-width: 900px) {
  .om-hist { width: 160px; }
  .om-lgt { display: none; }
}
@media (max-width: 720px) {
  :root { --map-h: 44dvh; }
  .omap { padding: 8px 0 0; }
  .om-band { border-radius: 0; box-shadow: none; border-block: 1px solid var(--om-plate-line); }
  .om-vig { border-radius: 0; }
  .omap.is-expanded .om-band { height: calc(100dvh - var(--header-h) - 8px); }
  .om-top { top: 8px; inset-inline: 8px; }
  .om-title { padding-inline: 8px 6px; gap: 8px; }
  .om-title h2 { display: none; }
  .om-tools .om-world, .om-tools .om-zin, .om-tools .om-zout, .om-tools .om-sep { display: none; }
  .om-bar { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px 14px; pointer-events: auto; }
  .om-bar .om-plate { background: transparent; box-shadow: none; padding: 0; height: auto; }
  .om-legend { overflow-x: auto; scrollbar-width: none; gap: 4px; margin-inline: -4px; }
  .om-legend::-webkit-scrollbar { display: none; }
  .om-tog, .om-ib { height: 36px; }
  .om-time { flex-wrap: wrap; gap: 8px; }
  .om-hist { flex: 1 1 100%; width: auto; height: 34px; order: 3; }
  .om-asof { margin-inline-start: auto; }
  .om-unp { align-self: flex-start; height: 36px; padding-inline: 10px; box-shadow: 0 0 0 1px var(--om-plate-line) inset !important; border-radius: 10px; }
  .om-credit { bottom: 6px; inset-inline-end: 10px; }
  .om-chipbar { top: 48px; inset-inline-start: 8px; }
  .om-toast { top: 48px; inset-inline-end: 8px; }
  .om-pop { position: fixed; bottom: 12px; inset-inline: 12px; width: auto; max-height: 70dvh; }
  .om-panel { top: auto; bottom: 0; inset-inline: 0; width: auto; height: calc(100dvh - var(--header-h) - 10px); border-radius: 16px 16px 0 0;
    transform: translateY(105%); padding-bottom: env(safe-area-inset-bottom); }
  [dir="rtl"] .om-panel { transform: translateY(105%); }
  .om-panel.open { transform: translateY(var(--sheet-y, 42%)); }
  .om-panel.dragging { transition: none !important; }
  .om-handle { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-default); }
  .om-ph { padding-top: 16px; cursor: grab; touch-action: none; }
}

/* reduced motion: gentler, not zero — keep opacity, drop travel and loops */
@media (prefers-reduced-motion: reduce) {
  .t3 .om-halo { animation: none; opacity: .7; }
  .om-live .om-ring { animation: none; transform: scale(1.5); opacity: .5; }
  .om-replaying .om-badge i { animation: none; }
  .om-panel, .om-panel.open { transition: opacity 180ms ease, visibility 0s; }
  .om-panel { transform: none; opacity: 0; }
  [dir="rtl"] .om-panel { transform: none; }
  .om-panel.open { opacity: 1; }
  @media (max-width: 720px) { .om-panel, [dir="rtl"] .om-panel { transform: translateY(var(--sheet-y, 42%)); } }
  .om-toast { transform: none; transition: opacity 200ms ease; }
  .om-g, .om-pop, .om-tip { transition-property: opacity; }
  .om-in .om-g { transform: none; }
  .om-mk:hover .om-g, .om-cl:hover .om-g { transform: none; }
}
.om-paused * { animation-play-state: paused !important; }
.om-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* ── build round 2 (after the first look) ── */
.om-unp, .om-filtb { display: inline-flex; align-items: center; gap: 6px; }
.om-filtb .l { font-size: 11.5px; }
/* a cluster that holds a CRITICAL carries the critical glyph at its shoulder (and the breath) */
.om-cpin { display: none; position: absolute; right: -3px; top: -4px; width: 14px; height: 13px; pointer-events: none; }
.om-cl.mt3 .om-cpin { display: block; }
.om-cpin i { position: absolute; inset: 0; background: var(--down); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.om-cpin .om-halo { position: absolute; left: 50%; top: 55%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle, var(--mk-crit-glow) 0, transparent 68%); animation: om-breathe 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .om-cpin .om-halo { animation: none; opacity: .7; } }
.om-hot { font-size: 11px; }
/* tighter desktop widths, and the open drawer: the band's chrome makes room instead of hiding under it */
@media (max-width: 1180px) and (min-width: 721px) {
  .om-tog .l, .om-lgt { display: none; }
  .om-hist { width: 180px; }
}
@media (min-width: 721px) {
  .has-panel .om-top, .has-panel .om-bar, .has-panel .om-credit { inset-inline-end: calc(min(408px, 100vw - 24px) + 12px - var(--gutter) + 12px); }
  .has-panel .om-toast { inset-inline-end: calc(min(408px, 100vw - 24px) + 24px - var(--gutter) + 12px); }
  .has-panel .om-tog .l, .has-panel .om-lgt, .has-panel .om-asof, .has-panel .om-filtb .l, .has-panel .om-unp .l { display: none; }
  .has-panel .om-hist { width: 150px; }
}
@media (max-width: 720px) {
  .om-tog .l { display: none; }
  .om-lgt { display: inline; padding-inline: 0 4px; }
  .om-legend { overflow: visible; flex-wrap: nowrap; }
  .om-tog { padding: 0 7px; }
  .om-unp { display: inline-flex; }
}
.om-leader { position: absolute; left: 0; top: 0; width: 1.5px; height: 1px; margin-left: -.75px; transform-origin: 0 0; pointer-events: none;
  background: var(--accent); opacity: .85; }
.om-pb, .om-pop { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
/* the drawer/sheet is opaque: nothing behind it reads through the card */
.om-panel { background: var(--bg-surface); }
/* the drawer heading takes focus programmatically (tabindex -1) so screen readers land on it; it is not a control,
   so it shows no ring — the open drawer itself is the visible state */
.om-h:focus-visible, .om-np strong:focus-visible { box-shadow: none; outline: none; }
/* fix pass 01 */
.om-hudtop { z-index: 6; }
.om-ptitle { font-size: 15px; font-weight: 700; letter-spacing: -.005em; color: var(--text-primary); outline: none; unicode-bidi: isolate; }
.om-ptitle:focus-visible { box-shadow: none; }
.om-lead { margin-top: 0; }

/* ── HUD frame: corner brackets + slow scan line (decorative; transform/opacity only) ── */
.om-band::after {
  content: ""; position: absolute; inset: 10px; z-index: 4; pointer-events: none;
  --om-br: color-mix(in srgb, var(--info) 70%, transparent);
  background:
    linear-gradient(var(--om-br), var(--om-br)) top left / 16px 1.5px no-repeat,
    linear-gradient(var(--om-br), var(--om-br)) top left / 1.5px 16px no-repeat,
    linear-gradient(var(--om-br), var(--om-br)) top right / 16px 1.5px no-repeat,
    linear-gradient(var(--om-br), var(--om-br)) top right / 1.5px 16px no-repeat,
    linear-gradient(var(--om-br), var(--om-br)) bottom left / 16px 1.5px no-repeat,
    linear-gradient(var(--om-br), var(--om-br)) bottom left / 1.5px 16px no-repeat,
    linear-gradient(var(--om-br), var(--om-br)) bottom right / 16px 1.5px no-repeat,
    linear-gradient(var(--om-br), var(--om-br)) bottom right / 1.5px 16px no-repeat;
}
.om-fx::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--info) 7%, transparent) 70%, color-mix(in srgb, var(--info) 16%, transparent));
  transform: translateY(-100%); animation: om-scan 8000ms linear infinite;
  transition: opacity 160ms var(--om-ease-out);
}
@keyframes om-scan { to { transform: translateY(900%); } }
.om-moving .om-fx::after { opacity: 0; }
html.light .om-fx::after { display: none; }
@media (prefers-reduced-motion: reduce) { .om-fx::after { display: none; } }

/* ── design pass 2: critical-now plate, HUD read-outs, boxed hotspot call-outs, stronger marker glow ── */
.om-crit { position: absolute; z-index: 7; top: 54px; bottom: 56px; inset-inline-end: 12px; width: 300px; height: auto;
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.om-crit-h { margin: 0; padding: 12px 14px 8px; font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.om-crit-l { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.om-crit-i { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 14px; text-align: start; font: inherit; color: inherit;
  background: none; border: 0; border-top: 1px solid var(--om-plate-line); cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--om-ease-out);
  animation: om-crit-in 320ms var(--om-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.om-crit-i:active { transform: scale(.98); }
.om-crit-i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .om-crit-i:hover { background: var(--bg-hover); } }
.om-crit-m { font: 600 10.5px/1.3 var(--font-mono); color: var(--text-tertiary); }
.om-crit-m i { font-style: normal; color: var(--down); }
.om-crit-t { font-size: 12.5px; line-height: 1.4; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.om-crit-none { padding: 10px 14px; font-size: 12px; color: var(--text-tertiary); }
@keyframes om-crit-in { from { opacity: 0; transform: translateY(6px); } }
/* a FRESH row (operator 11-03 05:22 ET): reddish ground + a bar at the reading edge + its own Acknowledge; ordinary rows are untouched */
.om-crit-f { background: var(--mg-fresh-bg); border-inline-start: 3px solid var(--mg-fresh-accent);
  animation: om-crit-in 320ms var(--om-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.om-crit-f .om-crit-i { padding-inline-start: 11px; animation: none; }
.om-crit-f .om-crit-m i { color: var(--mg-fresh-accent); }
@media (hover: hover) and (pointer: fine) { .om-crit-f .om-crit-i:hover { background: color-mix(in srgb, var(--mg-fresh-accent) 14%, transparent); } }
/* an EXTREME row (any card the relay stamped osint_extreme) is the SOLID tier here as in every list: shell.css .mgx gives the fill, ink and ring;
   the rail's own button only needs its hover and focus kept readable on that ground */
@media (hover: hover) and (pointer: fine) { .mgx .om-crit-i:hover { background: color-mix(in srgb, var(--mgx-ink) 10%, transparent); } }
.mgx .om-crit-i:focus-visible { outline-color: var(--mgx-ink); }
.om-crit-a { display: flex; justify-content: flex-end; padding: 0 14px 9px 11px; }
.om-crit-ack { appearance: none; padding: 6px 10px; border-radius: 4px; border: 1px solid var(--mg-fresh-accent); background: transparent; cursor: pointer;
  font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary);
  transition: background-color 150ms ease, transform 160ms var(--om-ease-out); }
.om-crit-ack:active { transform: scale(.97); }
.om-crit-ack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .om-crit-ack:hover { background: color-mix(in srgb, var(--mg-fresh-accent) 24%, transparent); } }
html[lang="he"] .om-crit-ack { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0; text-transform: none; }
/* a FRESH EXTREME update (stamped, not a broadcast): the SOLID tier with its Acknowledge. The Acknowledge ends the fresh ranking, never the paint.
   Its button is drawn from the .mgx ink so it reads on the solid fill; it animates in as one piece like every fresh row. */
.mgx[data-fresh] { animation: om-crit-in 320ms var(--om-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.mgx[data-fresh] .om-crit-i { animation: none; }
.mgx .om-crit-ack { border-color: var(--mgx-ink); color: var(--mgx-ink); }
@media (hover: hover) and (pointer: fine) { .mgx .om-crit-ack:hover { background: color-mix(in srgb, var(--mgx-ink) 18%, transparent); } }
.mgx .om-crit-ack:focus-visible { outline-color: var(--mgx-ink); }
.om-read { position: absolute; z-index: 7; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  font: 600 10px/1.45 var(--font-mono); letter-spacing: .08em; color: var(--text-tertiary); padding: 6px 9px; border-radius: 6px;
  background: color-mix(in srgb, var(--bg-deeper) 72%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.om-read b { color: var(--text-primary); font-weight: 700; }
.om-read-lane { color: color-mix(in srgb, var(--info) 85%, transparent); }
.om-read-t { top: 54px; inset-inline-start: 12px; }
.om-read-b { bottom: 56px; inset-inline-end: 324px; color: var(--accent); direction: ltr; }
.om-credit { display: none; }
.has-panel .om-crit, .has-panel .om-read-b { display: none; }
.om-hot { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; border-radius: 4px; text-shadow: none;
  font: 600 10px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-deeper) 88%, transparent); box-shadow: 0 0 0 1px var(--om-hot-c, var(--border-default)) inset; }
.om-hot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: var(--om-hot-c, var(--border-default)); }
.om-hot .om-hot-n { margin: 0; font: 700 10.5px/1.3 var(--font-mono); color: var(--text-primary); text-transform: uppercase; }
.om-hot .om-hot-s { color: var(--om-hot-c, var(--text-secondary)); }
.om-hot.h3 { --om-hot-c: var(--down); }
.om-hot.h2 { --om-hot-c: var(--warn); }
.om-hot.h1, .om-hot.h0 { --om-hot-c: color-mix(in srgb, var(--info) 70%, transparent); }
html.light .om-hot { background: color-mix(in srgb, var(--bg-surface) 94%, transparent); }
.t3 .om-halo { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.t3 .om-g { filter: drop-shadow(0 0 6px var(--mk-crit-glow)); }
.om-cl.mt3 .om-g { filter: drop-shadow(0 0 12px var(--mk-crit-glow)) drop-shadow(0 0 3px var(--mk-crit-glow)); }
.om-cl.mt2 .om-g { filter: drop-shadow(0 0 9px var(--mk-high-glow)); }
@media (max-width: 720px) { .om-crit, .om-read { display: none; } .om-credit { display: block; } }
@media (prefers-reduced-motion: reduce) { .om-crit-i, .om-crit-f, .mgx[data-fresh] { animation: none; } .om-crit-i:active, .om-crit-ack:active { transform: none; } }