@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap'); /* Skip-to-content link — visually hidden until keyboard-focused (WCAG 2.4.1) */ .skip-link{position:absolute;left:-9999px;top:0;z-index:99999;background:#22d3ee;color:#04121b; padding:8px 16px;font-weight:700;border-radius:0 0 6px 0;text-decoration:none;} .skip-link:focus{left:0;outline:2px solid #fff;} #main:focus{outline:none;} /* ── Design tokens ─────────────────────────────────────────── */ :root{ --bg: #060a12; --bg2: #0b1120; --panel: #0f1829; --panel2: #131f30; --border: #1a2d45; --border2: #243650; --cyan: #00d4ff; --cyan-dim: rgba(0,212,255,.12); --red: #ff2d2d; --red-dim: rgba(255,45,45,.12); --orange: #ff7a00; --gold: #f5a623; --green: #00e676; --teal: #00bcd4; --purple: #b388ff; --magenta: #ff4081; --text: #cdd9e8; --text1: #cdd9e8; /* alias of --text — 17 filter inputs/selects referenced the previously-UNDEFINED --text1 (declaration was being dropped). */ --text2: #7a9ab8; --text3: #6b86a8; /* WCAG AA 4.83:1 vs --panel (#0f1829); was #566f8f (3.49:1, sub-AA) */ --accent: #22d3ee; /* canonical view-body accent. Was UNDEFINED, so all 42 var(--accent,#22d3ee) only worked by coincidence of the fallback; defining it here makes chrome + view bodies share one accent and matches the slate palette used by the explorer + article reader. */ --mono: 'JetBrains Mono','Fira Code','Courier New',monospace; --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow-md: 0 4px 20px rgba(0,0,0,.5); --shadow-cyan: 0 0 16px rgba(0,212,255,.1); --radius: 6px; --sev-crit: #ff2d2d; --sev-high: #ff7a00; --sev-med: #f5a623; --sev-low: #22d3ee; --sev-info: #94a3b8; /* ── 2026-05-18 tactical polish: glow tokens + section accents ── */ --violet: #a78bfa; --amber: #f59e0b; --sea: #22d3ee; --pattern: #f59e0b; --diff: #22c55e; --border-2: #243650; /* alias for --border2 to match polish spec */ --glow-cyan: 0 0 14px -2px rgba(34,211,238,.45); --glow-amber: 0 0 14px -2px rgba(245,158,11,.45); --glow-red: 0 0 14px -2px rgba(255,45,45,.45); --glow-violet:0 0 14px -2px rgba(167,139,250,.45); --glow-green: 0 0 14px -2px rgba(34,197,94,.40); --glow-soft: 0 0 8px -2px rgba(255,255,255,.18); } /* ── Reset & base ──────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:13px; min-height:100vh; overflow-x:hidden; } a{color:inherit;text-decoration:none} /* ── Animated background grid ──────────────────────────────── */ body::before{ content:''; position:fixed;inset:0; background-image: linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px); background-size:40px 40px; pointer-events:none;z-index:0; animation:gridDrift 60s linear infinite; } @keyframes gridDrift{0%{background-position:0 0}100%{background-position:40px 40px}} /* ── Scanline overlay ──────────────────────────────────────── */ body::after{ content:''; position:fixed;inset:0; background:repeating-linear-gradient( 0deg,transparent,transparent 2px, rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px ); pointer-events:none;z-index:0; } /* ── Keyframes ─────────────────────────────────────────────── */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} @keyframes glow{0%,100%{box-shadow:0 0 8px var(--cyan)}50%{box-shadow:0 0 20px var(--cyan),0 0 40px rgba(0,212,255,.3)}} @keyframes threatPulse{0%,100%{box-shadow:0 0 6px var(--red)}50%{box-shadow:0 0 18px var(--red),0 0 36px rgba(255,45,45,.4)}} @keyframes slideIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}} @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes blink{0%,100%{opacity:1}49%{opacity:1}50%{opacity:0}99%{opacity:0}} /* ── Classification banner ─────────────────────────────────── */ .cls-banner{ background:linear-gradient(90deg,#1a0000,#2d0000,#1a0000); border-bottom:1px solid var(--red); color:var(--red); text-align:center;padding:6px 20px; font-family:var(--mono);font-weight:700; letter-spacing:3px;font-size:10px; position:sticky;top:0;z-index:300; text-shadow:0 0 10px rgba(255,45,45,.5); } /* ── Header ────────────────────────────────────────────────── */ .header{ background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%); border-bottom:1px solid var(--border); padding:14px 24px 12px; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:12px; position:relative;z-index:10; } .header::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); } .header-brand{display:flex;align-items:center;gap:14px} .header-logo{ width:42px;height:42px; border:1px solid var(--cyan); border-radius:6px; background:var(--cyan-dim); display:flex;align-items:center;justify-content:center; color:var(--cyan); box-shadow:0 0 12px var(--cyan-dim),inset 0 0 12px var(--cyan-dim); } .header-logo .logo-blip{ animation:logo-blip-pulse 2.4s ease-in-out infinite; transform-origin:23px 10.4px; } @keyframes logo-blip-pulse{ 0%,100%{opacity:.35} 50%{opacity:1} } @media(prefers-reduced-motion:reduce){ .header-logo .logo-blip{ animation:none; opacity:.9 } } .header h1{ font-family:var(--mono); font-size:17px;font-weight:700; color:#fff;letter-spacing:1px; line-height:1.2; } .header h1 .acc{color:var(--cyan);text-shadow:0 0 12px rgba(0,212,255,.6)} .header h1 .acc-red{color:var(--red);text-shadow:0 0 12px rgba(255,45,45,.6)} .header-sub{ color:var(--text2);font-size:10px; font-family:var(--mono);letter-spacing:.5px; margin-top:3px;display:flex;align-items:center;gap:10px; } .header-meta{ display:flex;flex-direction:column;align-items:flex-end;gap:6px; } .header-time{ font-family:var(--mono);font-size:11px;color:var(--cyan); letter-spacing:1px; } .live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-family:var(--mono)} .live-dot{width:7px;height:7px;border-radius:50%;animation:pulse 1.5s infinite} .live.fresh {color:var(--green)} .live.fresh .live-dot {background:var(--green); box-shadow:0 0 6px var(--green)} .live.stale {color:var(--gold)} .live.stale .live-dot {background:var(--gold); box-shadow:0 0 6px var(--gold)} .live.outdated {color:var(--red)} .live.outdated .live-dot{background:var(--red); box-shadow:0 0 6px var(--red)} .lang-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:100%} /* Phones: the header clips horizontally (overflow-x:hidden), and on a 375 px screen the search + EN/ES + Live AIS + Operator row measured 381 px (2026-09-15 audit) — the Operator button lost its last letters. Wrapping keeps every control reachable. */ @media (max-width:480px){ .header-meta{max-width:100%;align-items:flex-end} .header-time{font-size:10px} } .lang-btn{ padding:5px 13px;border-radius:3px; border:1px solid var(--border2); background:transparent;color:var(--text2); cursor:pointer;font-size:11px;font-family:var(--mono); font-weight:600;letter-spacing:.5px; transition:all .2s; } .lang-btn:hover,.lang-btn.active{ border-color:var(--cyan);color:var(--cyan); background:var(--cyan-dim); box-shadow:0 0 8px var(--cyan-dim); } /* ── Alert bars ────────────────────────────────────────────── */ .alert-bar{ background:linear-gradient(90deg,rgba(255,45,45,.08),rgba(255,45,45,.04)); border-bottom:1px solid rgba(255,45,45,.4); color:#ff8080;padding:9px 24px; font-size:11px;font-weight:600; font-family:var(--mono);letter-spacing:.3px; line-height:1.5; animation:pulse 3s infinite; position:relative; } .alert-bar::before{ content:'▶ ';color:var(--red); } .op-bar{ background:var(--bg2); border-bottom:1px solid var(--border); color:var(--text2);padding:6px 24px; font-size:10px;font-family:var(--mono); display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:6px; } .op-bar a{color:var(--orange);transition:color .2s} .op-bar a:hover{color:var(--gold);text-shadow:0 0 8px rgba(245,166,35,.4)} /* Clickable op-summary stat segments (distinct from the orange Live-AIS link) */ .op-bar .op-link{color:#cdd9e8;text-decoration:none;border-bottom:1px dashed transparent;transition:color .15s,border-color .15s;cursor:pointer} .op-bar .op-link:hover{color:var(--cyan);border-bottom-color:rgba(34,211,238,.55);text-shadow:0 0 8px rgba(0,212,255,.35)} .op-sep{color:var(--border2);opacity:.55} /* ── Navigation (grouped: SEA / AIR / INTEL / UTIL) ─────────── */ .nav{ background:var(--panel); border-bottom:1px solid var(--border); display:flex;align-items:center; flex-wrap:wrap;row-gap:0; padding:0 10px; position:relative;z-index:10; } .nav a{ color:var(--text2); padding:9px 9px; display:inline-flex;align-items:center;gap:4px; font-size:10.5px;font-weight:600; font-family:var(--mono);letter-spacing:.2px; border-bottom:2px solid transparent; white-space:nowrap;text-decoration:none; transition:color .15s,border-color .15s,background .15s; } .nav a:hover{color:var(--text);background:rgba(255,255,255,.035)} .nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:2px} .nav a.active{ color:var(--cyan); border-bottom-color:var(--cyan); background:var(--cyan-dim); text-shadow:0 0 8px rgba(0,212,255,.4); } /* A group is a wrap-unit: SEP + LABEL + items stay together on the same row. The parent .nav has flex-wrap:wrap, so groups wrap as a whole when narrow. */ .nav-group{ display:inline-flex;align-items:center; flex-wrap:nowrap;flex-shrink:0; } /* Vertical divider between groups. When a group wraps to a new row this divider becomes the row's first element — fine, it just looks like a subtle left margin. */ .nav-sep{ width:1px;height:18px;background:var(--border2); margin:0 4px 0 2px;align-self:center;flex-shrink:0; } /* Uppercase group label — always legible at rest so wayfinding doesn't require hovering. Bumped from 9px/.55 to 10px/.85 on 2026-05-16. */ .nav-group-lbl{ font-family:var(--mono);font-size:10px;font-weight:700; letter-spacing:1.6px;text-transform:uppercase; color:var(--text3);opacity:.85; padding:0 6px 0 4px; display:inline-flex;align-items:center; flex-shrink:0; transition:opacity .15s,color .15s,text-shadow .15s,border-bottom-color .15s; border-bottom:1px solid transparent;line-height:1.4; } .nav-group:hover .nav-group-lbl{opacity:1} .nav-group-lbl.sea{color:#22d3ee} .nav-group-lbl.air{color:#fbbf24} .nav-group-lbl.intel{color:#f59e0b} .nav-group-lbl.people{color:#d8b4fe} /* Active-group accent: when the current view lives inside a group, the group label gets an underline + full opacity so the user instantly knows where they are in the nav. Drives the `is-active` class added in the PHP nav block based on $view. */ .nav-group-lbl.is-active{opacity:1;border-bottom-color:currentColor;text-shadow:0 0 8px currentColor} /* Color variants for grouped items */ .nav a.nav-sea{color:#22d3ee} .nav a.nav-sea:hover{background:rgba(34,211,238,.06)} .nav a.nav-sea.active{border-bottom-color:#22d3ee;background:rgba(34,211,238,.08);text-shadow:0 0 8px rgba(34,211,238,.4)} .nav a.nav-sea-strong{color:#22d3ee;font-weight:700} .nav a.nav-sea-strong:hover{background:rgba(34,211,238,.07)} .nav a.nav-sea-strong.active{border-bottom-color:#22d3ee;background:rgba(34,211,238,.1);text-shadow:0 0 8px rgba(34,211,238,.45)} .nav a.nav-air{color:#fcd34d} .nav a.nav-air:hover{background:rgba(251,191,36,.06)} .nav a.nav-air.active{border-bottom-color:#fbbf24;background:rgba(251,191,36,.08);text-shadow:0 0 8px rgba(251,191,36,.4);color:#fbbf24} .nav a.nav-air-strong{color:#fbbf24;font-weight:700} .nav a.nav-air-strong:hover{background:rgba(251,191,36,.07)} .nav a.nav-air-strong.active{border-bottom-color:#fbbf24;background:rgba(251,191,36,.1);text-shadow:0 0 8px rgba(251,191,36,.45)} .nav a.nav-intel{color:#f59e0b;font-weight:700} .nav a.nav-intel:hover{background:rgba(245,158,11,.06)} .nav a.nav-intel.active{border-bottom-color:#f59e0b;background:rgba(245,158,11,.1);text-shadow:0 0 8px rgba(245,158,11,.45)} .nav a.nav-intel-soft{color:var(--text2)} .nav a.nav-intel-soft.active{border-bottom-color:var(--text2);background:rgba(255,255,255,.04);text-shadow:none} .nav a.nav-entity{color:#d8b4fe;font-weight:700} .nav a.nav-entity:hover{background:rgba(216,180,254,.06)} .nav a.nav-entity.active{border-bottom-color:#d8b4fe;background:rgba(216,180,254,.08);text-shadow:0 0 8px rgba(216,180,254,.4)} .nav a.nav-people{color:#d8b4fe;font-weight:700} .nav a.nav-people:hover{background:rgba(216,180,254,.06)} .nav a.nav-people.active{border-bottom-color:#d8b4fe;background:rgba(216,180,254,.1);text-shadow:0 0 8px rgba(216,180,254,.45)} .nav .badge-people{ font-family:var(--mono);font-size:9px;font-weight:700; padding:1px 5px;border-radius:3px;line-height:1.4; background:rgba(91,33,182,.4);color:#d8b4fe;border:1px solid rgba(216,180,254,.3); } .nav a.nav-diff{color:#22c55e} .nav a.nav-diff:hover{background:rgba(34,197,94,.06)} .nav a.nav-diff.active{border-bottom-color:#22c55e;background:rgba(34,197,94,.08);text-shadow:0 0 8px rgba(34,197,94,.4)} /* (Legacy MORE ▾ dropdown CSS removed 2026-05-20 — replaced by nav.navx per-category dropdowns. Old .nav-group / .nav-sep / .nav-group-lbl rules above are now unused by the live markup but kept harmless.) */ /* Badges — base + per-group color */ .nav .badge,.nav .badge-blue,.nav .badge-sea,.nav .badge-air,.nav .badge-intel{ font-family:var(--mono);font-size:9px;font-weight:700; padding:1px 5px;border-radius:3px;line-height:1.4; } .nav .badge{background:rgba(255,45,45,.2);color:var(--red);border:1px solid rgba(255,45,45,.3)} .nav .badge-blue{background:rgba(0,212,255,.15);color:var(--cyan);border:1px solid rgba(0,212,255,.25)} .nav .badge-sea{background:rgba(14,116,144,.35);color:#22d3ee;border:1px solid rgba(34,211,238,.3)} .nav .badge-air{background:rgba(146,64,14,.4);color:#fbbf24;border:1px solid rgba(251,191,36,.3)} .nav .badge-intel{background:rgba(180,83,9,.4);color:#f59e0b;border:1px solid rgba(245,158,11,.3)} /* Hot variant — applied to Intel Events badge when CRITICAL events exist in the last 7 days. Pulses subtly to draw the eye. */ .nav .badge.badge-hot{ background:rgba(220,38,38,.5);color:#fff;border-color:rgba(248,113,113,.7); box-shadow:0 0 8px rgba(220,38,38,.45); animation:badgePulse 2.2s ease-in-out infinite; } @keyframes badgePulse{ 0%,100%{box-shadow:0 0 6px rgba(220,38,38,.35)} 50%{box-shadow:0 0 14px rgba(220,38,38,.75)} } /* ════════════════════════════════════════════════════════════════════ NAV v2 — per-category dropdown bar (replaces the flat groups + MORE). A top row of category buttons; each opens a submenu on hover (mouse) or click/keyboard. Each category carries its theme via the --nc custom prop, so active glow / underline / submenu rails all derive from one token. ════════════════════════════════════════════════════════════════════ */ nav.navx{ display:flex;align-items:stretch;flex-wrap:wrap; gap:1px;padding:0 8px; background:linear-gradient(180deg,var(--panel),var(--bg2)); border-bottom:1px solid var(--border); position:relative;z-index:30; } /* Standalone dashboard link */ .navx-link{ display:inline-flex;align-items:center;gap:6px; padding:10px 13px;color:var(--text2); font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.6px; text-transform:uppercase;text-decoration:none; border-bottom:2px solid transparent; transition:color .15s,background .15s,border-color .15s,text-shadow .15s; } .navx-link:hover{color:var(--text);background:rgba(255,255,255,.04)} .navx-link:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:2px} .navx-link.active{ color:var(--cyan);border-bottom-color:var(--cyan); background:var(--cyan-dim);text-shadow:0 0 9px rgba(0,212,255,.55); } /* Category wrapper holds button + absolutely-positioned submenu */ .navx-cat{position:relative;display:inline-flex;align-items:stretch;--nc:var(--text2);--ncg:rgba(255,255,255,.4)} .navx-cat.sea {--nc:#22d3ee;--ncg:rgba(34,211,238,.5)} .navx-cat.air {--nc:#fbbf24;--ncg:rgba(251,191,36,.5)} .navx-cat.intel {--nc:#f59e0b;--ncg:rgba(245,158,11,.5)} .navx-cat.mil {--nc:#f5a623;--ncg:rgba(245,166,35,.5)} .navx-cat.people {--nc:#d8b4fe;--ncg:rgba(216,180,254,.5)} .navx-cat.infra {--nc:#2dd4bf;--ncg:rgba(45,212,191,.5)} .navx-cat.reports{--nc:#94a3b8;--ncg:rgba(148,163,184,.5)} .navx-btn{ display:inline-flex;align-items:center;gap:7px; background:none;border:none;cursor:pointer; padding:10px 12px;color:var(--text2); font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.6px; text-transform:uppercase;line-height:1; border-bottom:2px solid transparent; transition:color .15s,background .15s,border-color .15s,text-shadow .15s; } .navx-btn-glyph{font-size:12px} .navx-btn:hover{color:var(--nc);background:rgba(255,255,255,.04)} .navx-btn:focus-visible{outline:2px solid var(--nc);outline-offset:-2px;border-radius:2px} .navx-caret{font-size:8px;opacity:.6;transition:transform .15s,opacity .15s} /* Open or active category button → themed text-glow + 1px accent underline */ .navx-cat.open > .navx-btn, .navx-btn.active{ color:var(--nc);border-bottom-color:var(--nc); text-shadow:0 0 9px var(--ncg); background:rgba(255,255,255,.03); } .navx-cat.open > .navx-btn .navx-caret{transform:rotate(180deg);opacity:1} /* Submenu — hidden until .open on the wrapper */ .navx-menu{ position:absolute;top:calc(100% - 1px);left:0; min-width:212px; display:none;flex-direction:column;gap:1px; padding:6px; background:#0a0e15; border:1px solid var(--border2); border-top:2px solid var(--nc); border-radius:0 0 6px 6px; box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px var(--ncg); z-index:60; } .navx-cat.open > .navx-menu{display:flex;animation:navxIn .12s ease} @keyframes navxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .navx-item{ display:flex;align-items:center;gap:9px; padding:8px 10px;border-radius:4px; color:var(--text2);text-decoration:none; font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2px; border-left:2px solid transparent;white-space:nowrap; transition:color .12s,background .12s,border-color .12s; } .navx-item-glyph{width:18px;text-align:center;flex-shrink:0;font-size:13px} .navx-item-lbl{flex:1} .navx-item:hover{color:var(--text);background:rgba(255,255,255,.05);border-left-color:var(--nc)} .navx-item:focus-visible{outline:2px solid var(--nc);outline-offset:-2px} .navx-item.active{ color:var(--nc);background:color-mix(in srgb,var(--nc) 12%,transparent); border-left-color:var(--nc);text-shadow:0 0 8px var(--ncg); } .navx-badge{ margin-left:auto;flex-shrink:0; font-family:var(--mono);font-size:9px;font-weight:700;line-height:1.4; padding:1px 6px;border-radius:3px; background:color-mix(in srgb,var(--nc) 18%,transparent); color:var(--nc);border:1px solid var(--ncg); } .navx-badge.badge-hot{ background:rgba(220,38,38,.5);color:#fff;border-color:rgba(248,113,113,.7); box-shadow:0 0 8px rgba(220,38,38,.45); animation:badgePulse 2.2s ease-in-out infinite; } /* Hide the desktop bar on phone/narrow tablet — drawer takes over */ @media(max-width:959px){ nav.navx{display:none} } @media (prefers-reduced-motion: reduce){ .navx-cat.open > .navx-menu{animation:none} .navx-badge.badge-hot{animation:none} } /* ── Content wrapper ───────────────────────────────────────── */ .content{ padding:20px 24px; max-width:1800px; position:relative;z-index:1; animation:fadeUp .3s ease; } /* Mobile safety net: a stray wide child can never force the whole page to scroll sideways. overflow-x:clip (not hidden) leaves vertical flow + sticky intact, and data tables keep their own .tbl-wrap horizontal scroll. */ @media(max-width:1023px){ .content{ overflow-x:clip } } /* ── Error box ─────────────────────────────────────────────── */ .error-box{ background:rgba(255,45,45,.06); border:1px solid var(--red); border-radius:6px;padding:20px;margin:20px; color:#ff8080;font-family:var(--mono); } .error-box code{ background:rgba(0,0,0,.4); padding:8px 12px;border-radius:4px; display:block;margin-top:8px;font-size:11px; border-left:2px solid var(--red); } /* ── Stats grid ────────────────────────────────────────────── */ .stats{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px;margin-bottom:22px; } .stat{ background:linear-gradient(145deg,var(--panel),var(--panel2)); border:1px solid var(--border); border-radius:var(--radius); padding:16px 10px 12px;text-align:center; position:relative;overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s; cursor:default; } .stat::before{ content:'';position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.4; } .stat::after{ content:'';position:absolute; bottom:0;left:0;right:0;height:30%; background:linear-gradient(0deg,rgba(0,212,255,.025),transparent); pointer-events:none; } a.stat{cursor:pointer;text-decoration:none} a.stat:hover{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 6px 24px rgba(0,212,255,.12),var(--shadow-sm); } .stat .n{ font-family:var(--mono); font-size:30px;font-weight:700; color:#fff;line-height:1; letter-spacing:-1px; } .stat .n.red{color:var(--red);text-shadow:0 0 14px rgba(255,45,45,.5)} .stat .n.orange{color:var(--orange);text-shadow:0 0 14px rgba(255,122,0,.4)} .stat .n.blue{color:var(--cyan);text-shadow:0 0 14px rgba(0,212,255,.5)} .stat .n.teal{color:var(--teal);text-shadow:0 0 14px rgba(0,188,212,.4)} .stat .n.purple{color:var(--purple);text-shadow:0 0 14px rgba(179,136,255,.4)} .stat .lbl{ color:var(--text3);font-size:9px; margin-top:6px;text-transform:uppercase; letter-spacing:1.2px;font-family:var(--mono); } /* ── Section titles ────────────────────────────────────────── */ .sec-title{ color:#fff;font-size:12px;font-weight:700; font-family:var(--mono);letter-spacing:.8px; text-transform:uppercase; margin:18px 0 12px;padding-bottom:8px; border-bottom:1px solid var(--border); display:flex;align-items:center;gap:8px;flex-wrap:wrap; position:relative; } .sec-title::after{ content:'';position:absolute;bottom:-1px;left:0;width:60px;height:1px; background:var(--cyan); } .badge{ background:rgba(255,45,45,.2);color:var(--red); border:1px solid rgba(255,45,45,.35); border-radius:3px;padding:1px 7px; font-size:9px;font-weight:700;font-family:var(--mono); } .badge-blue{ background:rgba(0,212,255,.12);color:var(--cyan); border:1px solid rgba(0,212,255,.25); border-radius:3px;padding:1px 7px; font-size:9px;font-weight:700;font-family:var(--mono); } .scan-ts{color:var(--text3);font-size:10px;margin-left:auto;font-family:var(--mono)} /* ── Filters ───────────────────────────────────────────────── */ .filters{ display:flex;gap:8px;margin-bottom:14px; flex-wrap:wrap;align-items:center; } .fi{ background:var(--panel); border:1px solid var(--border2); color:var(--text); padding:7px 11px;border-radius:4px; font-size:11px;font-family:var(--mono); transition:border-color .2s; } .fi:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-dim)} .fi option{background:var(--panel)} .btn{ padding:7px 14px;border-radius:6px; font-size:11px;cursor:pointer;border:none; font-weight:600;font-family:var(--mono); letter-spacing:.3px; display:inline-flex;align-items:center;gap:5px; transition:all .18s ease; } .btn:active{transform:translateY(1px)} .btn-r{ background:rgba(255,45,45,.15);color:var(--red); border:1px solid rgba(255,45,45,.4); } .btn-r:hover{background:rgba(255,45,45,.25);box-shadow:0 0 10px rgba(255,45,45,.2)} .btn-g{ background:var(--panel2);color:var(--text2); border:1px solid var(--border2); } .btn-g:hover{border-color:var(--border);color:var(--text)} .btn-b{ background:rgba(0,212,255,.1);color:var(--cyan); border:1px solid rgba(0,212,255,.3); } .btn-b:hover{background:rgba(0,212,255,.18);box-shadow:0 0 10px var(--cyan-dim)} .vp-btn{font-size:10px;padding:4px 10px} /* ── Tables ────────────────────────────────────────────────── */ .tbl-wrap{ overflow-x:auto;-webkit-overflow-scrolling:touch; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); } .tbl-wrap::-webkit-scrollbar{height:4px} .tbl-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px} table{width:100%;border-collapse:collapse;font-size:11.5px} th{ background:rgba(13,25,42,.98); color:var(--text2); padding:9px 11px;text-align:left; font-weight:600;font-family:var(--mono); text-transform:uppercase;font-size:9.5px; letter-spacing:.8px; border-bottom:1px solid var(--border2); white-space:nowrap; position:sticky;top:0;z-index:10; backdrop-filter:blur(8px); } td{ padding:8px 11px; border-bottom:1px solid rgba(26,45,69,.5); vertical-align:top;color:var(--text); } tbody tr{transition:background .1s} tbody tr:nth-child(even) td{background:rgba(0,0,0,.12)} tbody tr:hover td{background:rgba(0,212,255,.05)} .risk-crit td{border-left:2px solid var(--red)} .risk-high td{border-left:2px solid var(--orange)} .risk-med td{border-left:2px solid var(--gold)} .risk-low td{border-left:2px solid var(--green)} /* ── Pills ─────────────────────────────────────────────────── */ .pill{ display:inline-block;padding:2px 8px; border-radius:3px;font-size:9.5px; font-weight:700;white-space:nowrap; font-family:var(--mono);letter-spacing:.3px; } .pill-crit{background:rgba(255,45,45,.15);color:#ff8080;border:1px solid rgba(255,45,45,.4)} .pill-high{background:rgba(255,122,0,.12);color:#ffaa55;border:1px solid rgba(255,122,0,.35)} .pill-med {background:rgba(245,166,35,.1);color:#f5c842;border:1px solid rgba(245,166,35,.3)} .pill-low {background:rgba(0,230,118,.08);color:#4dff91;border:1px solid rgba(0,230,118,.25)} .pill-sanc{background:rgba(255,45,45,.12);color:#ff8080;border:1px solid rgba(255,45,45,.35)} .pill-ok {background:rgba(0,230,118,.08);color:#4dff91;border:1px solid rgba(0,230,118,.2)} /* ── Cards ─────────────────────────────────────────────────── */ .card{ background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--border); border-radius:10px;padding:16px;margin-bottom:10px; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .card:hover{box-shadow:0 6px 22px -10px rgba(0,0,0,.6),0 0 0 1px rgba(0,212,255,.05)} .report-card{ background:var(--panel);border:1px solid var(--border); border-radius:6px;padding:16px;margin-bottom:12px; transition:border-color .2s,box-shadow .2s; position:relative;overflow:hidden; } .report-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:0;transition:opacity .2s; } .report-card:hover{border-color:var(--border2);box-shadow:0 0 20px rgba(0,212,255,.06)} .report-card:hover::before{opacity:.6} .report-date{color:var(--cyan);font-weight:700;font-size:13px;font-family:var(--mono)} .report-meta{display:flex;gap:20px;margin:10px 0;flex-wrap:wrap} .rmn{font-size:22px;font-weight:700;font-family:var(--mono)} .rml{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)} .report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .report-summary{color:var(--text2);font-size:11px;margin-top:8px;line-height:1.65} /* ── Grid layouts ──────────────────────────────────────────── */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} /* ── Timeline ──────────────────────────────────────────────── */ .tl-item{ display:flex;gap:14px;margin-bottom:14px; position:relative;padding-left:20px; } .tl-item::before{ content:'';position:absolute;left:0;top:6px; width:8px;height:8px;border-radius:50%; background:var(--border2);border:1px solid var(--text3); } .tl-item::after{ content:'';position:absolute;left:3px;top:14px; width:1px;height:calc(100% + 6px); background:linear-gradient(180deg,var(--border2),transparent); } .tl-item:last-child::after{display:none} .tl-date{ color:var(--cyan);font-weight:700;font-size:10px; white-space:nowrap;min-width:90px;font-family:var(--mono); } .tl-vessel{color:#fff;font-weight:700;font-size:11px;font-family:var(--mono)} .tl-desc{color:var(--text2);font-size:10px;line-height:1.5;margin-top:2px} .tl-active::before{ background:var(--red);border-color:var(--red); box-shadow:0 0 8px var(--red),0 0 16px rgba(255,45,45,.3); animation:threatPulse 2s infinite; } .tl-active .tl-date,.tl-active .tl-vessel{color:var(--red)} /* ── Vessel images ─────────────────────────────────────────── */ .vimg{ width:72px;height:46px;object-fit:cover; border-radius:4px;border:1px solid var(--border2); filter:brightness(.9) contrast(1.1); } .vimg-ph{ width:72px;height:46px;background:var(--panel2); border-radius:4px;border:1px solid var(--border); display:flex;align-items:center;justify-content:center; font-size:22px;color:var(--text3); } /* ── Pager ─────────────────────────────────────────────────── */ .pager{display:flex;gap:5px;margin-top:16px;align-items:center;flex-wrap:wrap} .pager a,.pager span{ padding:5px 11px;background:var(--panel); border:1px solid var(--border);border-radius:4px; font-size:11px;color:var(--text2);font-family:var(--mono); transition:all .15s; } .pager a:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim)} .pager .cur{ background:rgba(255,45,45,.15);border-color:var(--red); color:var(--red);font-weight:700; } .pager .disabled{opacity:.3;pointer-events:none} .pager-info{background:none;border:none;color:var(--text3);font-size:10px;padding:0;margin-right:4px} /* ── Misc utilities ────────────────────────────────────────── */ .spoof-y{color:var(--red);font-weight:700;font-family:var(--mono)} .spoof-n{color:var(--green);font-family:var(--mono)} .note-cell{max-width:260px;color:var(--text2);font-size:11px;line-height:1.45} .mono{font-family:var(--mono);color:var(--cyan);font-size:11px} .dim{color:var(--text2)} /* ── 2026-05-18 tactical polish layer ────────────────────────── Additive only. Does NOT override existing .card/.pill/.chip/.stat. Adds .card-crit/-high/-med/-low severity rails, .kpi-tile unified tile, .badge-crit/-high/-med/-low/-mono/-live new badge tones, tactical active-state glow, monospace accent helpers. */ .card-crit{border-left:3px solid var(--sev-crit);box-shadow:inset 4px 0 16px -10px rgba(255,45,45,.55)} .card-high{border-left:3px solid var(--sev-high)} .card-med {border-left:3px solid var(--sev-med)} .card-low {border-left:3px solid var(--sev-low)} .card:hover{border-color:var(--border-2)} tr.risk-crit:hover td{background:rgba(255,45,45,.05)} tr.risk-crit td:first-child{box-shadow:inset 4px 0 14px -10px rgba(255,45,45,.55)} .live.fresh .live-dot{box-shadow:0 0 6px var(--green), 0 0 12px -2px rgba(0,230,118,.45)} .live.stale .live-dot{box-shadow:0 0 6px var(--gold), 0 0 12px -2px rgba(245,166,35,.45)} .live.outdated .live-dot{box-shadow:0 0 6px var(--red), var(--glow-red)} .kpi-tile{ background:linear-gradient(145deg,var(--panel),var(--panel2)); border:1px solid var(--border); border-radius:10px; padding:14px 12px; position:relative; overflow:hidden; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; } .kpi-tile:hover{border-color:var(--border-2);box-shadow:var(--glow-soft);transform:translateY(-2px)} .kpi-tile::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:var(--sea);opacity:.45; } .kpi-tile.kpi-sea::before {background:var(--sea); opacity:.55} .kpi-tile.kpi-air::before {background:var(--amber); opacity:.55} .kpi-tile.kpi-threat::before {background:var(--sev-crit);opacity:.7} .kpi-tile.kpi-intel::before {background:var(--violet); opacity:.55} .kpi-tile.kpi-pattern::before{background:var(--pattern); opacity:.55} .kpi-tile.kpi-diff::before {background:var(--diff); opacity:.55} .kpi-tile.kpi-people::before {background:#d8b4fe; opacity:.55} .kpi-tile.kpi-hr::before {background:#dc2626; opacity:.55} .kpi-tile .kpi-num{ font-size:26px;font-weight:700;color:var(--text); font-family:var(--mono);margin-top:4px; letter-spacing:.02em;line-height:1.05; } .kpi-tile .kpi-lbl{ font-size:10px;text-transform:uppercase; letter-spacing:.14em;color:var(--text2); font-family:var(--mono); } .kpi-tile .kpi-delta{font-size:11px;margin-top:6px;font-family:var(--mono)} .kpi-tile .kpi-delta.up {color:var(--sev-low)} .kpi-tile .kpi-delta.down{color:var(--sev-crit)} /* ── Clickable KPI drill-down tiles (.kpi-link) — all viewports ── Applied to KPI tiles/stat cards that become drill-down anchors. Keeps the tile's own bg/border (set by .kpi-tile/.stat) and just layers the anchor affordances: pointer, inherited colour, lift + cyan glow on hover, and a visible focus ring for keyboard nav. */ .kpi-link{ cursor:pointer;text-decoration:none;color:inherit;display:block; transition:border-color .15s,box-shadow .15s,transform .1s; } .kpi-link:hover{ border-color:var(--cyan); box-shadow:0 0 0 1px rgba(34,211,238,.3),0 4px 14px rgba(0,0,0,.4); transform:translateY(-2px); } .kpi-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .badge-crit,.badge-high,.badge-med,.badge-low,.badge-mono,.badge-live{ display:inline-flex;align-items:center;gap:4px; padding:2px 8px;border-radius:3px; font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.06em;line-height:1.5; border:1px solid currentColor; } .badge-crit{color:var(--sev-crit);background:rgba(255,45,45,.08)} .badge-high{color:var(--sev-high);background:rgba(255,122,0,.08)} .badge-med {color:var(--sev-med); background:rgba(245,166,35,.08)} .badge-low {color:var(--sev-low); background:rgba(34,211,238,.08)} .badge-mono{color:var(--text2); background:rgba(0,0,0,.25); border-color:var(--border-2)} .badge-live{color:var(--green); background:rgba(0,230,118,.08); border-color:rgba(0,230,118,.35)} .badge-live::before{ content:"\25CF";font-size:10px; animation:badgePulse 1.6s ease-in-out infinite; text-shadow:0 0 6px currentColor; } @keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion: reduce){ .badge-live::before{animation:none} } .nav a.active{box-shadow:inset 0 -2px 0 0 currentColor, 0 0 10px -4px currentColor} .nav a.nav-sea.active {box-shadow:inset 0 -2px 0 0 #22d3ee, var(--glow-cyan)} .nav a.nav-sea-strong.active {box-shadow:inset 0 -2px 0 0 #22d3ee, var(--glow-cyan)} .nav a.nav-air.active {box-shadow:inset 0 -2px 0 0 #fbbf24, var(--glow-amber)} .nav a.nav-air-strong.active {box-shadow:inset 0 -2px 0 0 #fbbf24, var(--glow-amber)} .nav a.nav-intel.active {box-shadow:inset 0 -2px 0 0 #f59e0b, var(--glow-amber)} .nav a.nav-people.active {box-shadow:inset 0 -2px 0 0 #d8b4fe, var(--glow-violet)} .nav a.nav-entity.active {box-shadow:inset 0 -2px 0 0 #d8b4fe, var(--glow-violet)} .nav a.nav-diff.active {box-shadow:inset 0 -2px 0 0 #22c55e, var(--glow-green)} .nav-link[aria-current="page"], .nav-link.active{position:relative;color:var(--text)} .nav-link[aria-current="page"]::after{ content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px; background:currentColor;box-shadow:0 0 8px currentColor; } .acc-imo,.acc-mmsi,.acc-hex,.acc-iata,.acc-callsign,.acc-coord,.acc-utc{ font-family:var(--mono);font-variant-numeric:tabular-nums; letter-spacing:.04em; } .acc-imo,.acc-mmsi{color:var(--cyan)} .acc-hex,.acc-callsign{color:var(--gold)} .acc-iata{color:var(--gold);text-transform:uppercase} .acc-utc{color:var(--text2)} .acc-coord{color:var(--text2);font-size:.95em} @media (prefers-reduced-motion: reduce){ .nav a.active{box-shadow:inset 0 -2px 0 0 currentColor} } /* Bridge: let existing .stat tiles opt into the kpi-tile section accent bar by adding .kpi-sea / .kpi-air / .kpi-threat / .kpi-intel / etc. */ .stat.kpi-sea::before {background:linear-gradient(90deg,transparent,var(--sea),transparent);opacity:.7} .stat.kpi-air::before {background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.7} .stat.kpi-threat::before {background:linear-gradient(90deg,transparent,var(--sev-crit),transparent);opacity:.8} .stat.kpi-intel::before {background:linear-gradient(90deg,transparent,var(--violet),transparent);opacity:.7} .stat.kpi-pattern::before{background:linear-gradient(90deg,transparent,var(--pattern),transparent);opacity:.7} .stat.kpi-diff::before {background:linear-gradient(90deg,transparent,var(--diff),transparent);opacity:.7} .stat.kpi-people::before {background:linear-gradient(90deg,transparent,#d8b4fe,transparent);opacity:.7} .stat.kpi-hr::before {background:linear-gradient(90deg,transparent,#dc2626,transparent);opacity:.7} .stat.kpi-sea:hover {box-shadow:var(--glow-cyan), var(--shadow-sm); border-color:var(--sea)} .stat.kpi-air:hover {box-shadow:var(--glow-amber), var(--shadow-sm); border-color:var(--amber)} .stat.kpi-threat:hover {box-shadow:var(--glow-red), var(--shadow-sm); border-color:var(--sev-crit)} .stat.kpi-intel:hover {box-shadow:var(--glow-violet),var(--shadow-sm); border-color:var(--violet)} .stat.kpi-pattern:hover {box-shadow:var(--glow-amber), var(--shadow-sm); border-color:var(--pattern)} .stat.kpi-people:hover {box-shadow:var(--glow-violet),var(--shadow-sm); border-color:#d8b4fe} .stat.kpi-hr:hover {box-shadow:var(--glow-red), var(--shadow-sm); border-color:#dc2626} /* ── end 2026-05-18 tactical polish ───────────────────────────── */ /* ════════════════════════════════════════════════════════════════════ 2026-05-20 tactical-OSINT terminal polish (PART B). Additive only — enhances header / section titles / KPI tiles / tables toward a denser, monospace, glowing-accent intel-terminal feel. WCAG-AA preserved. ════════════════════════════════════════════════════════════════════ */ /* Header: faint scanline + grid texture (header only, motionless, AA-safe) */ .header{overflow:hidden} .header::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: repeating-linear-gradient(0deg,rgba(0,212,255,.035) 0 1px,transparent 1px 3px), linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px), linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px); background-size:100% 3px,34px 34px,34px 34px; -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%); mask-image:linear-gradient(90deg,#000,transparent 70%); opacity:.5; } .header-brand,.header-meta{position:relative;z-index:1} .header h1{text-shadow:0 0 1px rgba(0,212,255,.25)} /* Numeric / identifier text → monospace tabular everywhere it matters */ .header-time,.scan-ts,.kpi-tile .kpi-num,.stat .n,.navx-badge,.navx-item-lbl{ font-variant-numeric:tabular-nums; } /* Section titles: terminal "▏" prefix + tighter hairline rule */ .sec-title::before{ content:"\258F";color:currentColor;opacity:.85; font-family:var(--mono);font-weight:700;margin-right:2px; text-shadow:0 0 8px currentColor; } .sec-title{letter-spacing:1px} .sec-sub::before{ content:":: ";color:var(--text3);font-family:var(--mono);opacity:.7; } /* Status LED — small pulsing dot for live elements / severity chips. Use as . prefers-reduced-motion safe. */ .led{ display:inline-block;width:7px;height:7px;border-radius:50%; background:currentColor;vertical-align:middle;flex-shrink:0; box-shadow:0 0 6px currentColor; animation:ledPulse 1.8s ease-in-out infinite; } .led-live{color:var(--green)} .led-crit{color:var(--sev-crit)} .led-high{color:var(--sev-high)} .led-info{color:var(--cyan)} @keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.3}} @media (prefers-reduced-motion: reduce){ .led{animation:none} } /* KPI tiles: denser, with a tiny uppercase mono label + delta line. .kpi-num already mono; tighten label + add a delta helper. */ .kpi-tile{padding:12px 12px 11px} .kpi-tile .kpi-lbl{font-size:9px;letter-spacing:.16em;opacity:.92} .kpi-tile .kpi-num{font-size:27px;line-height:1;letter-spacing:.01em} .kpi-tile .kpi-delta{font-size:10px;margin-top:5px;opacity:.95;display:flex;align-items:center;gap:5px} .kpi-tile .kpi-delta.flat{color:var(--text3)} .kpi-tile:hover::before{opacity:1} /* Tables: tabular numerics + subtler zebra; keep AA contrast */ table{font-variant-numeric:tabular-nums} td .acc-imo,td .acc-mmsi,td .acc-hex,td .acc-iata,td .acc-callsign, td .acc-coord,td .acc-utc{letter-spacing:.03em} /* Severity chips can host a leading LED via .pill.led-host */ .pill.led-host::before{ content:"\25CF";font-size:8px;margin-right:5px; text-shadow:0 0 6px currentColor; animation:ledPulse 1.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .pill.led-host::before{animation:none} } /* ── end 2026-05-20 tactical polish ───────────────────────────── */ .mt-link{color:var(--teal);font-size:11px;font-family:var(--mono)} .mt-link:hover{color:var(--cyan);text-decoration:underline} .sanc-reason{color:#ff8080;font-size:10px;margin-top:3px;max-width:240px;line-height:1.4} .notes-expand{ background:rgba(0,0,0,.3);border-left:2px solid var(--border2); padding:6px 10px;font-size:11px;color:var(--text2); border-radius:0 4px 4px 0;line-height:1.5;margin-top:4px; } /* ── Entity cards ──────────────────────────────────────────── */ .entity-card{ background:linear-gradient(145deg,var(--panel),rgba(15,24,41,.8)); border:1px solid var(--border); border-left:3px solid rgba(255,45,45,.4); border-radius:var(--radius);padding:14px;margin-bottom:10px; transition:border-color .2s,box-shadow .2s; min-width:0;overflow-wrap:anywhere; /* grid item: shrink to track instead of forcing h-scroll on mobile */ } .entity-card:hover{ border-color:var(--border2); border-left-color:var(--red); box-shadow:var(--shadow-sm); } .entity-name{color:#ff8080;font-size:13px;font-weight:700;margin-bottom:6px;font-family:var(--mono)} .entity-meta{color:var(--text3);font-size:10px;margin-bottom:7px;font-family:var(--mono)} .entity-desc{color:var(--text2);font-size:11px;line-height:1.6} /* ── Event cards ───────────────────────────────────────────── */ .event-card{ background:linear-gradient(145deg,var(--panel),var(--panel2)); border:1px solid var(--border); border-radius:var(--radius);padding:12px 14px;margin-bottom:8px; transition:border-color .2s,box-shadow .2s,transform .15s; } .event-card:hover{ border-color:var(--border2); box-shadow:var(--shadow-sm); transform:translateX(2px); } .event-date{color:var(--cyan);font-size:10px;font-weight:700;font-family:var(--mono)} .event-type{ display:inline-block;padding:2px 8px;border-radius:3px; font-size:9.5px;font-weight:700;margin-left:8px; font-family:var(--mono);letter-spacing:.3px; } .etype-SEIZURE{background:rgba(255,45,45,.15);color:#ff8080;border:1px solid rgba(255,45,45,.3)} .etype-DESIGNATION{background:rgba(179,136,255,.12);color:var(--purple);border:1px solid rgba(179,136,255,.25)} .etype-DELIVERY{background:rgba(0,230,118,.08);color:#4dff91;border:1px solid rgba(0,230,118,.2)} .etype-POLICY_CHANGE{background:rgba(0,212,255,.1);color:var(--cyan);border:1px solid rgba(0,212,255,.2)} .etype-INFRASTRUCTURE_FAILURE{background:rgba(100,100,100,.1);color:#888;border:1px solid rgba(100,100,100,.2)} .etype-MILITARY_ACTIVITY{background:rgba(0,188,212,.1);color:var(--teal);border:1px solid rgba(0,188,212,.25)} .etype-CRIME_EVENT{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3)} .etype-FOREIGN_MILITARY_VISIT{background:rgba(99,102,241,.12);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)} .etype-UNKNOWN_CONTACT{background:rgba(148,163,184,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.25)} /* ── Military cards ────────────────────────────────────────── */ .mil-card{ background:rgba(0,18,40,.6); border:1px solid var(--border); border-left:3px solid #1e3a5f; border-radius:6px;padding:16px;margin-bottom:14px; transition:border-color .2s,box-shadow .2s; } .mil-card.crit{border-left-color:var(--red);background:rgba(40,0,0,.4)} .mil-card.high{border-left-color:var(--orange);background:rgba(40,15,0,.3)} .mil-card:hover{border-color:var(--border2);box-shadow:0 0 16px rgba(0,188,212,.06)} .mil-header{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-bottom:12px} .mil-name{font-size:14px;font-weight:700;color:#fff;font-family:var(--mono)} .mil-meta{color:var(--text2);font-size:11px;margin-top:4px;line-height:1.6} .mil-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto} .mil-intel{ background:rgba(0,0,0,.3);border-left:2px solid #1e3a5f; border-radius:0 4px 4px 0;padding:8px 12px; font-size:11px;color:var(--text2);line-height:1.6;margin-bottom:10px; } .mil-stat{ background:rgba(0,0,0,.3);border:1px solid var(--border); border-radius:4px;padding:4px 10px; font-size:10px;color:var(--text3);white-space:nowrap;font-family:var(--mono); } /* ── Map container ─────────────────────────────────────────── */ #intel-map,#air-map{ height:460px;min-height:300px;max-height:88vh; resize:vertical;border-radius:var(--radius); border:1px solid var(--border); overflow:hidden;position:relative; background:#050e1a; box-shadow:var(--shadow-md); } /* Make the native resize affordance visible on the dark theme. */ #intel-map::after,#air-map::after{ content:"";position:absolute;right:2px;bottom:2px;width:14px;height:14px; z-index:600;pointer-events:none;border-radius:0 0 4px 0; background:linear-gradient(135deg,transparent 0 45%,var(--cyan) 45% 55%,transparent 55% 70%,var(--cyan) 70% 80%,transparent 80%); opacity:.55; } /* Soft edge vignette over the map — focuses the eye on the center, adds depth. Pure overlay (pointer-events:none); center stays transparent so data is crisp. (Corner brackets are drawn separately by .map-hud.) */ #intel-map::before,#air-map::before{ content:"";position:absolute;inset:0;z-index:550;pointer-events:none;border-radius:var(--radius); background:radial-gradient(ellipse at 50% 44%, transparent 56%, rgba(2,6,12,.52) 100%); } #intel-map.is-fullscreen::before,#air-map.is-fullscreen::before{border-radius:0} /* One-shot radar sweep when the map comes online — the "acquiring" moment. Added by JS, self-removed after ~2.8s so it never clutters the steady state. */ .map-radar-sweep{ position:absolute;left:50%;top:50%;width:200%;height:200%;z-index:545;pointer-events:none; border-radius:50%;mix-blend-mode:screen; background:conic-gradient(from 0deg, rgba(34,211,238,.24) 0deg, rgba(34,211,238,.05) 26deg, rgba(34,211,238,0) 60deg, rgba(34,211,238,0) 360deg); animation:radarSweep 1.35s linear 2, radarSweepFade .55s ease 2.15s forwards; } @keyframes radarSweep{ from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} } @keyframes radarSweepFade{ to{opacity:0} } @media (prefers-reduced-motion: reduce){ .map-radar-sweep{display:none} } /* ── Story mode: filter everything but the resistance choropleth, go cinematic ── Keeps overlay choropleth paths (.res-choro-path), province labels + ✊ figures (tooltip pane); hides markers, other overlay vectors, heat canvas, and chrome. */ #intel-map.story-mode .leaflet-marker-pane{opacity:0;transition:opacity .5s ease;pointer-events:none} #intel-map.story-mode .leaflet-overlay-pane path:not(.res-choro-path){opacity:0;transition:opacity .45s ease} #intel-map.story-mode .leaflet-overlay-pane canvas{opacity:0;transition:opacity .45s ease} #intel-map.story-mode .map-legend, #intel-map.story-mode #map-layer-panel, #intel-map.story-mode #res-choro-legend, #intel-map.story-mode .map-search-ctl{opacity:0;pointer-events:none;transition:opacity .3s ease} #intel-map.story-mode .leaflet-tile{filter:brightness(.34) saturate(.28) contrast(1.05)} #intel-map.story-mode::before{background:radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(2,5,11,.82) 100%)} #intel-map.story-mode .res-time-ctl{width:min(700px,94%);background:rgba(3,7,13,.94);border-color:#22d3ee;box-shadow:0 8px 30px rgba(0,0,0,.7),0 0 0 1px rgba(34,211,238,.18)} #intel-map.story-mode #res-year-big{font-size:30px} #intel-map.story-mode .res-cap{font-size:13px} #intel-map.story-mode .leaflet-tooltip.prov-stat{font-size:15px} /* Fullscreen mode — map covers entire viewport */ #intel-map.is-fullscreen,#air-map.is-fullscreen{ position:fixed !important;inset:0;width:100vw !important;height:100vh !important; max-height:none !important;min-height:0 !important;resize:none !important;margin:0 !important; z-index:9000;border-radius:0;border:none; } .map-fs-btn{ position:absolute;top:10px;left:62px;z-index:500; background:rgba(6,10,18,.92);border:1px solid var(--border2); color:var(--text2);width:36px;height:36px;border-radius:6px; cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center; transition:all .15s;backdrop-filter:blur(8px);font-family:var(--mono); } .map-fs-btn:hover{border-color:var(--cyan);color:var(--cyan)} .map-fs-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} #intel-map .leaflet-container,#air-map .leaflet-container{background:#050e1a} #intel-map .leaflet-tile,#air-map .leaflet-tile{filter:brightness(.58) saturate(.45) contrast(1.16)} /* dark default */ #intel-map[data-base="satellite"] .leaflet-tile{filter:brightness(.78) saturate(.85) contrast(1.08)} #intel-map[data-base="nautical"] .leaflet-tile {filter:brightness(.28) saturate(.12) contrast(1.0)} #intel-map .leaflet-control-zoom{ border:1px solid var(--border2) !important; border-radius:4px !important; overflow:hidden; } #intel-map .leaflet-control-zoom a{ background:rgba(11,17,32,.9) !important; color:var(--cyan) !important; border-bottom:1px solid var(--border) !important; font-weight:700 !important; } #intel-map .leaflet-control-zoom a:hover{ background:var(--panel2) !important; } .map-overlay-label{ background:rgba(6,10,18,.88); border:1px solid var(--border2); border-radius:4px;padding:3px 8px; font-family:var(--mono);font-size:10px; color:var(--cyan);white-space:nowrap; pointer-events:none; } /* Map legend */ .map-legend{ position:absolute;bottom:10px;left:10px; background:rgba(6,10,18,.92); border:1px solid var(--border2); border-radius:var(--radius); padding:6px 12px 8px; font-family:var(--mono);font-size:10px; color:var(--text2); z-index:500;pointer-events:auto; backdrop-filter:blur(4px); line-height:1.8; max-width:240px; transition:padding .15s; } .map-legend-title{ color:var(--cyan);font-weight:700;font-size:9px; text-transform:uppercase;letter-spacing:1px; margin-bottom:5px;border-bottom:1px solid var(--border); padding-bottom:4px;cursor:pointer; display:flex;align-items:center;justify-content:space-between; user-select:none; } .map-legend-title:hover{color:#7dd3fc} .map-legend-title:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .map-legend .ml-arrow{transition:transform .15s} .map-legend.collapsed .map-legend-body{display:none} .map-legend.collapsed{padding-bottom:6px} .map-legend.collapsed .map-legend-title{border-bottom:none;margin-bottom:0;padding-bottom:0} .map-legend.collapsed .ml-arrow{transform:rotate(-90deg)} .map-legend-row{display:flex;align-items:center;gap:8px} .ml-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .ml-tri{ width:0;height:0;flex-shrink:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid var(--teal); } /* Vessel marker CSS classes */ .vm-crit{ width:14px;height:14px;border-radius:50%;position:relative; background:var(--red);border:2px solid rgba(255,45,45,.6); box-shadow:0 0 10px var(--red),0 0 20px rgba(255,45,45,.4); animation:threatPulse 2s infinite; cursor:pointer; } /* Radar-contact ping radiating from each CRITICAL marker. */ .vm-crit::after{ content:"";position:absolute;left:50%;top:50%;width:10px;height:10px; border-radius:50%;border:1.5px solid rgba(255,45,45,.7); transform:translate(-50%,-50%);pointer-events:none; animation:radarPing 2.8s ease-out infinite; } @keyframes radarPing{ 0%{width:8px;height:8px;opacity:.7} 100%{width:40px;height:40px;opacity:0} } @media (prefers-reduced-motion:reduce){ .vm-crit::after{animation:none;opacity:0} } .vm-high{ width:11px;height:11px;border-radius:50%; background:var(--orange);border:2px solid rgba(255,122,0,.5); box-shadow:0 0 8px var(--orange); animation:highPulse 3s ease-in-out infinite; cursor:pointer; } @keyframes highPulse{ 0%,100%{box-shadow:0 0 8px var(--orange)} 50%{box-shadow:0 0 16px var(--orange),0 0 28px rgba(255,122,0,.4)} } .vm-med{ width:10px;height:10px;border-radius:50%; background:var(--gold);border:2px solid rgba(245,166,35,.4); cursor:pointer; } .vm-mil{ width:0;height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:13px solid var(--teal); filter:drop-shadow(0 0 5px var(--teal)); cursor:pointer; } .vm-port{ width:8px;height:8px;border-radius:50%; background:rgba(0,212,255,.25);border:1px solid rgba(0,212,255,.7); } .vm-airport{ width:9px;height:9px; background:rgba(180,140,255,.30);border:1px solid rgba(180,140,255,.8); transform:rotate(45deg); } .leaflet-popup-content-wrapper{ background:rgba(9,14,28,.97) !important; border:1px solid var(--border2) !important; border-radius:var(--radius) !important; box-shadow:0 0 24px rgba(0,212,255,.18) !important; color:var(--text) !important; font-family:var(--mono) !important; font-size:11px !important; } .leaflet-popup-tip{background:var(--border2) !important} .leaflet-popup-close-button{color:var(--text2) !important;font-size:16px !important} .leaflet-popup-close-button:hover{color:#fff !important} /* ── Low-risk vessel marker ────────────────────────── */ .vm-low{ width:9px;height:9px;border-radius:50%; background:#22d3ee;border:1px solid rgba(0,212,255,.4); cursor:pointer; } /* ── Custom cluster icon ───────────────────────────── */ .mcluster{ width:34px;height:34px;border-radius:50%; background:rgba(6,10,18,.9);border:2px solid currentColor; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:11px;font-weight:700; box-shadow:0 0 10px rgba(0,0,0,.7); } /* ── Hover tooltip ─────────────────────────────────── */ .map-hover-tip{ background:rgba(6,10,18,.96) !important; border:1px solid var(--border2) !important; border-radius:5px !important; color:var(--text) !important; font-family:var(--mono) !important; font-size:11px !important; padding:5px 10px !important; pointer-events:none; box-shadow:0 0 18px rgba(0,212,255,.14) !important; white-space:nowrap; } .map-hover-tip.leaflet-tooltip-top::before{border-top-color:var(--border2) !important} /* ── Live aircraft pulse (ADSB.lol layer) ──────────── */ @keyframes liveAcPulse{ 0% {transform:scale(.65);opacity:.55} 70% {transform:scale(1.4); opacity:0 } 100% {transform:scale(1.4); opacity:0 } } .live-ac-icon{pointer-events:auto !important} .live-ac-wrap{will-change:transform} @media (prefers-reduced-motion: reduce){ .live-ac-pulse{animation:none !important; opacity:.45 !important; transform:scale(1) !important} } /* ── Cursor coords display ─────────────────────────── */ #map-coords{ position:absolute;bottom:12px;left:12px; z-index:500;pointer-events:none; background:rgba(6,10,18,.82);border:1px solid var(--border); border-radius:4px;padding:3px 14px; font-family:var(--mono);font-size:10px;color:var(--text3); white-space:nowrap;backdrop-filter:blur(4px);letter-spacing:.5px; } /* ── Layer panel ───────────────────────────────────── */ #map-layer-panel{ position:absolute;top:10px;right:10px;z-index:500; background:linear-gradient(180deg,rgba(8,14,24,.97),rgba(6,10,18,.97)); border:1px solid var(--border2); border-radius:10px;font-family:var(--mono); backdrop-filter:blur(10px);min-width:188px;max-width:230px;overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.55),0 0 0 1px rgba(0,212,255,.06); } #mlp-header{ padding:9px 12px;font-size:10px;font-weight:700; color:var(--cyan);letter-spacing:1px;cursor:pointer; display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--border);user-select:none; background:linear-gradient(180deg,rgba(0,212,255,.08),transparent); } #mlp-header:hover{background:rgba(0,212,255,.12)} #mlp-arrow{font-size:9px;transition:transform .2s;display:inline-block} #map-layer-panel.collapsed #mlp-body{display:none} #map-layer-panel.collapsed #mlp-arrow{transform:rotate(-90deg)} #mlp-body{padding:6px 8px 8px;max-height:62vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ff2d2d rgba(255,45,45,.08)} #mlp-body::-webkit-scrollbar{width:8px} #mlp-body::-webkit-scrollbar-track{background:rgba(255,45,45,.06)} #mlp-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff4d4d,#dc2626);border-radius:4px;box-shadow:0 0 6px #ff2d2d,0 0 10px rgba(255,45,45,.6)} #mlp-body::-webkit-scrollbar-thumb:hover{background:#ff2d2d;box-shadow:0 0 9px #ff2d2d,0 0 16px rgba(255,45,45,.8)} /* Desktop: lay the layer toggles in a compact 2-up grid inside a wider panel so it reads as a tidy popover instead of a tall narrow column over the map. Section headers, the basemap row and collapsible groups stay full-width. */ @media (min-width:1024px){ #map-layer-panel:not(.in-sheet){min-width:312px;max-width:340px} /* :not(.collapsed) so this never overrides the collapse rule (#mlp-body display:none) — otherwise the panel could not be hidden on desktop. */ #map-layer-panel:not(.in-sheet):not(.collapsed) #mlp-body{display:flex;flex-wrap:wrap;gap:2px 8px;align-content:flex-start} #map-layer-panel:not(.in-sheet) #mlp-body > .mlp-sec, #map-layer-panel:not(.in-sheet) #mlp-body > .mlp-base-row, #map-layer-panel:not(.in-sheet) #mlp-body > details{flex:0 0 100%} #map-layer-panel:not(.in-sheet) #mlp-body > .mlp-toggle{flex:0 0 calc(50% - 4px);min-width:0;white-space:nowrap;overflow:hidden} } .mlp-sec{ font-size:9px;color:var(--text3);letter-spacing:1px; text-transform:uppercase;padding:5px 4px 3px;font-weight:700; } .mlp-base-row{display:flex;gap:3px;margin-bottom:2px} .mlp-base-btn{ flex:1;background:var(--panel);border:1px solid var(--border); color:var(--text3);border-radius:3px;padding:4px 0; font-size:9px;font-family:var(--mono);font-weight:600;cursor:pointer; transition:all .15s; } .mlp-base-btn:hover{border-color:var(--cyan);color:var(--text2)} .mlp-base-btn.active{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.4);color:var(--cyan)} .mlp-toggle{ display:flex;align-items:center;gap:6px;width:100%; background:none;border:none;color:var(--text3);text-align:left; padding:4px 4px;border-radius:3px;font-family:var(--mono); font-size:10px;font-weight:600;cursor:pointer;transition:all .15s; letter-spacing:.3px; } .mlp-toggle:hover{color:var(--text2);background:rgba(255,255,255,.04)} .mlp-toggle.active{color:var(--text2)} .mlp-toggle:not(.active){opacity:.4} .mlp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .mlp-tri{ width:0;height:0;flex-shrink:0; border-left:5px solid transparent;border-right:5px solid transparent; border-bottom:9px solid var(--teal); } /* ── Mobile "Layers" FAB + bottom-sheet host (≤1023px) ───────────── The desktop layer panel (#map-layer-panel) is unchanged at ≥1024px. At narrow viewports, a floating button slides the existing panel into a slide-up bottom sheet so analysts can see every chip without overflow. See navMapLayersOpen / Close in the inline script for the DOM move. */ .map-layers-fab{ /* shown only ≤1023px via the media query below */ display:none; align-items:center;justify-content:center;gap:6px; position:absolute;top:10px;right:10px; z-index:500; min-width:44px;min-height:44px;padding:0 12px; background:rgba(6,10,18,.92); border:1px solid var(--border2); border-radius:6px; color:var(--cyan); font-family:var(--mono);font-size:12px;font-weight:700; letter-spacing:1px;cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 4px 12px rgba(0,0,0,.45); transition:border-color .15s,color .15s,background .15s; } .map-layers-fab:hover{border-color:var(--cyan);background:rgba(0,212,255,.08)} .map-layers-fab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .map-layers-fab .mlf-count{ font-size:9px;color:var(--text3);font-weight:600;letter-spacing:.4px; } .map-layers-fab .mlf-icon{font-size:14px;line-height:1} /* Backdrop scrim under the sheet */ .map-layers-scrim{ display:none;position:fixed;inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); z-index:1100; animation:fadeIn .15s ease; } .map-layers-scrim.open{display:block} /* Bottom-sheet panel itself */ .map-layers-sheet{ position:fixed;left:0;right:0;bottom:0; z-index:1101; background:#0a0e15; border-top:1px solid var(--border2); border-radius:14px 14px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.7),0 0 0 1px rgba(34,211,238,.05); max-height:82dvh; display:flex;flex-direction:column; transform:translateY(100%);visibility:hidden; transition:transform .22s ease-out, visibility 0s linear .22s; font-family:var(--mono); padding-bottom:env(safe-area-inset-bottom); } .map-layers-sheet.open{ transform:translateY(0); visibility:visible; transition:transform .22s ease-out; } .map-layers-sheet-grip{ width:42px;height:4px;border-radius:2px; background:var(--border2); margin:8px auto 4px;flex-shrink:0; } .map-layers-sheet-hd{ display:flex;align-items:center;justify-content:space-between; padding:6px 16px 10px; border-bottom:1px solid var(--border); flex-shrink:0; } .map-layers-sheet-hd .ttl{ font-size:11px;font-weight:700;color:var(--cyan); letter-spacing:1.5px;text-transform:uppercase; text-shadow:0 0 6px rgba(0,212,255,.4); } .map-layers-sheet-close{ background:none;border:1px solid var(--border2); color:var(--text2);border-radius:4px; cursor:pointer;font-size:14px;line-height:1; min-width:40px;min-height:40px; } .map-layers-sheet-close:hover{color:var(--cyan);border-color:var(--cyan)} .map-layers-sheet-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .map-layers-sheet-body{ overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:6px 12px 18px; flex:1 1 auto; } /* When the existing #map-layer-panel is re-parented into the sheet body, strip its absolute-positioned chrome so it flows naturally inside the sheet and the chips get larger touch targets. */ .map-layers-sheet-body #map-layer-panel{ position:static !important; top:auto !important;right:auto !important; min-width:0;width:100%; background:transparent; border:none; backdrop-filter:none; box-shadow:none; } .map-layers-sheet-body #mlp-header{display:none} /* Kill the panel's own inner scroll inside the sheet — the sheet body scrolls, not #mlp-body. A nested overflow made touch-scroll fight itself on mobile. */ .map-layers-sheet-body #mlp-body{padding:0;max-height:none;overflow:visible} .map-layers-sheet-body .mlp-sec{ font-size:10px;letter-spacing:1.5px; padding:14px 4px 6px; color:var(--text2); border-top:1px solid var(--border); margin-top:4px; } .map-layers-sheet-body .mlp-sec:first-of-type, .map-layers-sheet-body details > summary.mlp-sec{ border-top:none;margin-top:0; } .map-layers-sheet-body .mlp-toggle{ padding:11px 8px; font-size:13px;letter-spacing:.4px; min-height:44px; border-radius:6px; } .map-layers-sheet-body .mlp-toggle.active{ background:rgba(0,212,255,.04); } .map-layers-sheet-body .mlp-base-row{ gap:6px;margin:2px 0 6px; } .map-layers-sheet-body .mlp-base-btn{ min-height:40px;font-size:12px;padding:8px 0; } .map-layers-sheet-body details > summary.mlp-sec{ padding:14px 4px 8px !important; } /* Visibility — desktop panel default, mobile FAB+sheet only narrow */ @media(max-width:1023px){ .map-layers-fab{display:inline-flex} /* When the panel is still in its native absolute position (sheet closed), hide it on mobile so the FAB is the only entry point. */ #map-layer-panel:not(.in-sheet){display:none} } /* ── Strategic-sites markers (military, naval, SIGINT, refineries, etc.) ── */ .strat-marker{ width:24px;height:24px;border-radius:4px; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:13px;line-height:1;font-weight:700; background:rgba(8,12,22,.88); border:2px solid var(--c,#22d3ee); color:var(--c,#22d3ee); box-shadow:0 0 4px var(--c,#22d3ee),0 0 10px rgba(0,0,0,.7); text-shadow:0 0 4px var(--c,#22d3ee); } .strat-marker.is-suspected{ border-style:dashed; opacity:.6; box-shadow:0 0 3px var(--c,#22d3ee),0 0 6px rgba(0,0,0,.5); } .strat-marker.is-mil{ border-radius:0; } /* square for MIL */ .strat-marker.is-spy{ transform:rotate(45deg); border-radius:0; } .strat-marker.is-spy > span{ display:inline-block;transform:rotate(-45deg); } .strat-marker.is-vip,.strat-marker.is-gaesa{ border-radius:50%; } .strat-tip{ font-family:var(--mono);font-size:10px; } /* ── Military-operations markers (worldwide Cuban regime ops) ── */ .milop-marker{ width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:13px;line-height:1;font-weight:700; background:rgba(8,12,22,.88); border:2px solid var(--c,#fb923c); color:var(--c,#fb923c); box-shadow:0 0 4px var(--c,#fb923c),0 0 10px rgba(0,0,0,.7); text-shadow:0 0 4px var(--c,#fb923c); } .milop-marker.is-historical{ opacity:.40; border-style:dashed; box-shadow:0 0 2px var(--c,#94a3b8),0 0 4px rgba(0,0,0,.5); } .milop-marker.is-kinetic{ border-radius:0; } /* square for KINETIC */ .milop-marker.is-espionage{ transform:rotate(45deg); border-radius:0; } .milop-marker.is-espionage > span{ display:inline-block;transform:rotate(-45deg); } /* THREAT_PLANNING: bright red glow + pulsing ring (active threats only) */ .milop-marker.is-threat-plan{ border-color:#ff2d2d;color:#ff2d2d; box-shadow:0 0 6px #ff2d2d,0 0 14px rgba(255,45,45,.7),0 0 20px rgba(255,45,45,.3); animation:milopPulse 1.6s ease-out infinite; } @keyframes milopPulse { 0% { box-shadow:0 0 6px #ff2d2d, 0 0 12px rgba(255,45,45,.5), 0 0 0 0 rgba(255,45,45,.55); } 70% { box-shadow:0 0 8px #ff2d2d, 0 0 16px rgba(255,45,45,.7), 0 0 0 16px rgba(255,45,45,0); } 100% { box-shadow:0 0 6px #ff2d2d, 0 0 12px rgba(255,45,45,.5), 0 0 0 0 rgba(255,45,45,0); } } .milop-tip{ font-family:var(--mono);font-size:10px; } /* ── Scale bar ─────────────────────────────────────── */ .leaflet-control-scale-line{ background:rgba(6,10,18,.8) !important;border:1px solid var(--border2) !important; border-top:none !important;color:var(--text3) !important; font-family:var(--mono) !important;font-size:9px !important;padding:1px 5px !important; } /* ── Estimated vessel marker ────────────────────────────────── */ .vm-est{opacity:.45} /* ── Risk distribution bar ──────────────────────────────────── */ .risk-dist-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;margin-bottom:10px} .rdw-labels{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--text2);margin-bottom:7px} .rdw-labels em{color:var(--text3);font-style:normal} .rdw-title{color:var(--text3);font-size:9px;letter-spacing:.7px;text-transform:uppercase;font-weight:700;margin-right:4px} .rdw-bar{height:6px;border-radius:3px;overflow:hidden;display:flex;background:var(--bg);border:1px solid var(--border)} /* ── Flag breakdown ─────────────────────────────────────────── */ .fb-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;margin-bottom:10px} .fb-title{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px} .fb-row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px} .fb-grid{display:flex;flex-direction:column;gap:3px} .fb-flag{color:var(--text2);min-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fb-bar-wrap{flex:1;height:4px;background:var(--bg);border-radius:2px;overflow:hidden} .fb-bar-fill{height:100%;background:linear-gradient(90deg,var(--cyan),rgba(0,212,255,.35));border-radius:2px} .fb-cnt{color:var(--text3);min-width:28px;text-align:right;display:flex;align-items:center;gap:2px} /* ── Sort links ─────────────────────────────────────────────── */ .sh{color:var(--text2);text-decoration:none;font-family:var(--mono);font-size:inherit;font-weight:inherit;display:inline-flex;align-items:center;gap:3px;white-space:nowrap} .sh:hover{color:var(--cyan)}.sh-a{color:var(--cyan)} .si{font-size:9px;color:var(--text3)}.si-off{opacity:.3}.sh-a .si{color:var(--cyan)} /* ── Copy cell ──────────────────────────────────────────────── */ .copy-cell{cursor:pointer;transition:color .15s} .copy-cell:hover{color:var(--cyan) !important} .copy-icon{font-size:9px;color:var(--text3);opacity:0;transition:opacity .15s;margin-left:3px} .copy-cell:hover .copy-icon{opacity:1} /* ── Copy toast ─────────────────────────────────────────────── */ .copy-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.4);color:var(--cyan);font-family:var(--mono);font-size:11px;padding:6px 20px;border-radius:20px;z-index:9999;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;backdrop-filter:blur(8px)} .copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ── Action buttons ─────────────────────────────────────────── */ .act-btn{background:none;border:1px solid var(--border);border-radius:3px;padding:2px 6px;font-size:12px;cursor:pointer;transition:border-color .15s,transform .1s;display:inline-flex;align-items:center} .act-btn:hover{transform:scale(1.12)} .act-ais:hover{border-color:var(--cyan)}.act-profile:hover{border-color:#60a5fa}.act-map:hover{border-color:var(--green)} /* ── Keyboard shortcuts panel ───────────────────────────────── */ .kbd-panel{position:fixed;bottom:70px;right:24px;z-index:1200;background:rgba(6,10,18,.97);border:1px solid var(--border2);border-radius:var(--radius);padding:12px 16px;font-family:var(--mono);font-size:11px;display:none;min-width:220px;box-shadow:0 4px 24px rgba(0,0,0,.6);backdrop-filter:blur(8px)} .kbd-panel.open{display:block} .kbd-title{font-size:9px;font-weight:700;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)} .kbd-row{display:flex;align-items:center;gap:10px;padding:3px 0;color:var(--text2)} kbd{background:var(--panel2);border:1px solid var(--border2);border-radius:3px;padding:1px 6px;font-family:var(--mono);font-size:10px;color:var(--cyan);min-width:20px;text-align:center;display:inline-block} /* ── Slide-in profile panel ────────────────────────────────── */ #vp-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:600;backdrop-filter:blur(3px)} #vp-panel{ display:none;position:fixed;top:0;right:0; width:min(700px,100vw);height:100vh; background:var(--panel); border-left:1px solid var(--border2); z-index:700;overflow-y:auto; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); } #vp-panel::-webkit-scrollbar{width:4px} #vp-panel::-webkit-scrollbar-track{background:var(--bg)} #vp-panel::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px} /* ── Scroll-to-top ─────────────────────────────────────────── */ #back-top{ position:fixed;bottom:24px;right:24px; background:rgba(255,45,45,.15);color:var(--red); border:1px solid rgba(255,45,45,.4); border-radius:4px;width:36px;height:36px; font-size:14px;cursor:pointer; display:none;align-items:center;justify-content:center; z-index:500;font-family:var(--mono);font-weight:700; transition:all .2s; } #back-top:hover{background:rgba(255,45,45,.25);box-shadow:0 0 10px rgba(255,45,45,.2)} #auto-refresh-ctrl{ position:fixed;bottom:16px;left:16px;z-index:500; background:rgba(6,10,18,.94);border:1px solid var(--border2); border-radius:6px;padding:7px 10px;font:10px var(--mono); color:var(--text2);backdrop-filter:blur(6px);display:flex;align-items:center; gap:8px;flex-wrap:wrap;max-width:min(440px,calc(100vw - 132px)); } #refresh-page{font:inherit;color:var(--cyan);background:transparent;border:0;padding:3px;cursor:pointer} #refresh-page:focus-visible,[data-live-update-toggle]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px} [data-live-update-toggle][aria-pressed="true"]{color:#fbbf24;border-color:#fbbf24} @media(max-width:600px){#auto-refresh-ctrl{left:8px;bottom:12px;max-width:calc(100vw - 124px)}} /* ── Progress bar ──────────────────────────────────────────── */ #nprogress{ position:fixed;top:0;left:0;width:0;height:1px; background:linear-gradient(90deg,var(--cyan),var(--magenta)); z-index:9999;transition:width .3s ease; box-shadow:0 0 6px var(--cyan); } /* ── Footer ────────────────────────────────────────────────── */ footer{ background:var(--bg2); border-top:1px solid var(--border); padding:14px 24px;color:var(--text3); font-size:10px;text-align:center; margin-top:32px;font-family:var(--mono); letter-spacing:.3px;line-height:1.8; } /* ── Responsive ────────────────────────────────────────────── */ @media(max-width:1200px){ .stats{grid-template-columns:repeat(4,1fr)} #intel-map,#air-map{height:640px} } @media(max-width:900px){ .stats{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:1fr} #intel-map,#air-map{height:560px} .g3{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .stats{grid-template-columns:repeat(3,1fr)} #intel-map,#air-map{height:480px} .map-legend{font-size:9px;padding:6px 10px} .content{padding:14px 12px} .header{padding:10px 14px;flex-wrap:wrap} /* Map mode tabs: shrink secondary subtitle, keep main label readable */ #map-mode-tabs .mm-tab{padding:9px 8px !important;font-size:11px !important;letter-spacing:.5px !important} #map-mode-tabs .mm-tab span{font-size:9px !important} /* Live pills + toggles drop to their own row under the map header on narrow screens */ #live-feed-controls{margin-left:0 !important;order:99;flex-basis:100%;justify-content:center;flex-wrap:wrap} #live-air-pill,#live-sea-pill{margin-left:0 !important} /* Profile / aircraft profile modals: snap to viewport */ #profile-modal,#ap-modal{width:96vw !important;max-height:92dvh !important} /* Tables: allow horizontal scroll */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Drawer: full width on mobile (it already does 60vw, lock to 100vw) */ #src-drawer{width:100vw !important} } @media(max-width:640px){ /* Convert the KPI stat strip into a horizontally-scrollable rail on phones. Keeps every card readable instead of squishing 7-9 cards into a 2-col grid. scroll-snap-stop is "always" so swipes land on a single card. */ .stats{ display:flex;flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; gap:8px; padding:2px 2px 8px; margin-left:-2px;margin-right:-2px; } .stats::-webkit-scrollbar{display:none} .stats > .stat{ flex:0 0 38%; min-width:120px;max-width:160px; scroll-snap-align:start;scroll-snap-stop:always; } /* Card numbers smaller — but tap area stays comfortable */ .stat .n{font-size:24px !important} .stat{padding:14px 8px 10px !important;min-height:78px} /* ── Mobile table-to-card stacking ────────────────────────────── Any degrades into a stacked card layout at ≤640px instead of forcing horizontal scroll. Requires each
to carry a data-label="…" attribute (mirrors its column header) — printed in front of the cell value as a small mono label so the row remains readable without the . Headers are hidden, rows become bordered cards, cells stack vertically with a label/value flex layout. */ .tbl-wrap:has(> .table-mobile-stack){ overflow-x:visible;border:0;box-shadow:none;background:transparent; } table.table-mobile-stack{ display:block; width:100%; border-collapse:separate; font-size:12px; } table.table-mobile-stack thead{ /* Visually hide but keep accessible to assistive tech */ position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap; } table.table-mobile-stack tbody{display:block} table.table-mobile-stack > tbody > tr{ display:block; border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:10px; background:var(--panel2,rgba(13,25,42,.55)); box-shadow:var(--shadow-sm); } /* risk-* class still drives a coloured left border in card form */ table.table-mobile-stack > tbody > tr.risk-crit{border-left:3px solid var(--red,#dc2626)} table.table-mobile-stack > tbody > tr.risk-high{border-left:3px solid var(--orange,#f97316)} table.table-mobile-stack > tbody > tr.risk-med {border-left:3px solid var(--gold,#f59e0b)} table.table-mobile-stack > tbody > tr.risk-low {border-left:3px solid var(--green,#22c55e)} table.table-mobile-stack > tbody > tr:nth-child(even) > td{background:transparent} table.table-mobile-stack > tbody > tr:hover > td{background:transparent} table.table-mobile-stack > tbody > tr > td{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:5px 0; border:none !important; border-bottom:1px solid rgba(255,255,255,.04) !important; white-space:normal; text-align:right; color:var(--text); background:transparent !important; } table.table-mobile-stack > tbody > tr > td:last-child{border-bottom:0 !important} table.table-mobile-stack > tbody > tr > td::before{ content:attr(data-label); font-family:var(--mono); color:var(--text3,#7a9ab8); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; flex:0 0 auto; text-align:left; margin-right:8px; align-self:flex-start; max-width:45%; word-break:break-word; } table.table-mobile-stack > tbody > tr > td:empty, table.table-mobile-stack > tbody > tr > td[data-label=""]{display:none} /* Cells spanning multiple cols (notes/sanc-reason): stack label above */ table.table-mobile-stack > tbody > tr > td[colspan]{ flex-direction:column; align-items:stretch; text-align:left; } table.table-mobile-stack > tbody > tr > td[colspan]::before{ max-width:100%; margin-bottom:4px; } /* Freshness pill — compact + readable */ .fresh-badge{ display:inline-flex;align-items:center;gap:4px; font-family:var(--mono);font-size:9.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase; padding:2px 7px;border-radius:10px;line-height:1.3; border:1px solid currentColor; background:rgba(0,0,0,.25); white-space:nowrap;vertical-align:middle; } .fresh-badge .fresh-dot{ width:6px;height:6px;border-radius:50%; background:currentColor;box-shadow:0 0 4px currentColor; } } /* Freshness badge is also used in desktop profile views — define the styling once at all viewports (mobile block above redeclares it inside the media query for a slightly tighter form factor). */ .fresh-badge{ display:inline-flex;align-items:center;gap:4px; font-family:var(--mono);font-size:10px;font-weight:700; letter-spacing:.06em;text-transform:uppercase; padding:2px 8px;border-radius:10px;line-height:1.4; border:1px solid currentColor; background:rgba(0,0,0,.20); white-space:nowrap;vertical-align:middle; } .fresh-badge .fresh-dot{ width:6px;height:6px;border-radius:50%; background:currentColor;box-shadow:0 0 4px currentColor; } .fresh-live {color:#22c55e} .fresh-today {color:#38bdf8} .fresh-fresh {color:#10b981} .fresh-stale {color:#f59e0b} .fresh-outdated{color:#dc2626} .fresh-unknown {color:#7e8fa8} @media(max-width:560px){ .g3{grid-template-columns:1fr} #intel-map,#air-map{height:440px} .header{font-size:11px;padding:8px 12px} /* Mode-tab subtitle hidden on very narrow screens — only main label visible */ #map-mode-tabs .mm-tab span{display:none} /* Op-bar wraps */ .op-bar{flex-wrap:wrap;gap:6px;line-height:1.6} /* Fullscreen button positioned for thumb reach — clear of the Layers FAB */ .map-fs-btn{left:10px;right:auto;top:10px} } /* Touch targets: enforce 44px minimum for the interactive primitives */ @media(hover:none){ .btn,.btn-b,.btn-r,.btn-g,.mm-tab,.nav a,.nav-mobile-menu a,.map-fs-btn, .mlp-toggle,.mlp-base-btn,.map-layers-fab,.map-layers-sheet-close, .nav-more-btn,.apt-tab{min-height:44px} /* Table action icon-buttons + sort links + pager: give them a real tap area. inline-flex keeps the icon centred while min-height/min-width grow the box. */ .act-btn{ min-height:44px;min-width:44px; padding:6px 10px;font-size:15px; justify-content:center; } .pager a,.pager span{ min-height:44px;display:inline-flex;align-items:center; padding:8px 14px; } .sh{min-height:44px} } /* ── Mobile (≤767px) readability + tap-target + spacing pass ──────── Phone-only (≤767px) tuning. Desktop (≥1024px) and tablet stay untouched. Bumps small body/table text to ≥12px, grows tiny interactive controls, reflows fixed-column KPI/cargo grids to 2-up, and tightens .content padding so content isn't squeezed at 360-414px. */ @media(max-width:767px){ /* Spacing: pull content gutters in to ~12px */ .content{padding:12px} /* Typography floors — raise sub-12px body/table text for legibility. Mono accents keep their family; only the size grows. */ body{font-size:14px} table{font-size:12.5px} th{font-size:11px;padding:8px 9px;letter-spacing:.4px} td{padding:8px 9px} .pill{font-size:11px;padding:3px 9px} .note-cell{font-size:12.5px} .mono{font-size:12px} .tl-desc{font-size:12px} .tl-vessel{font-size:12.5px} .tl-date{font-size:11px} .badge-crit,.badge-high,.badge-med,.badge-low,.badge-mono,.badge-live{font-size:12px} /* mobile-stack data labels + cell values readable */ table.table-mobile-stack{font-size:13px} table.table-mobile-stack > tbody > tr > td::before{font-size:11px} /* Tap targets: nav/btn/pager/chips grow to a comfortable touch size */ .btn{padding:10px 16px;font-size:12px;min-height:44px} .vp-btn{padding:8px 14px;font-size:12px;min-height:44px} .nav a{padding:12px 11px;font-size:12px;min-height:44px} .mlp-toggle{padding:10px 8px;font-size:12px;min-height:44px} .act-btn{min-height:44px;min-width:44px;padding:6px 10px;font-size:15px;justify-content:center} .pager a,.pager span{min-height:44px;display:inline-flex;align-items:center;padding:8px 14px;font-size:12px} .sh{min-height:44px;font-size:12px} a.stat,.stat{min-height:44px} /* KPI / stat grids: fixed-column desktop grids reflow to 2-up so tiles don't cramp on a phone. (.stats already becomes a scroll rail ≤640px.) */ .cargo-tracker{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px} } /* Very narrow phones (≤400px): 2-up cargo grid drops to single column */ @media(max-width:400px){ .cargo-tracker{grid-template-columns:1fr} } /* Universal :focus-visible safety net — every interactive primitive gets a visible ring. Pre-existing focus styles still win where defined. */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; } /* ── Scrollbar global ──────────────────────────────────────── */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--text3)} /* ── Global search ─────────────────────────────────────────── */ #global-search-wrap{ position:relative;display:flex;align-items:center; } #global-search{ background:var(--panel2);border:1px solid var(--border2); color:var(--text);padding:6px 12px 6px 32px; border-radius:4px;font-size:11px;font-family:var(--mono); width:200px;transition:all .2s; } #global-search:focus{ outline:none;border-color:var(--cyan);width:260px; box-shadow:0 0 0 2px var(--cyan-dim); } #global-search-icon{ position:absolute;left:9px;color:var(--text3); font-size:12px;pointer-events:none; } #global-results{ position:absolute;top:calc(100% + 6px);left:0;right:0; background:var(--panel);border:1px solid var(--border2); border-radius:6px;z-index:400;max-height:320px;overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.6);display:none;min-width:320px; } #global-results .gr-item{ padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:10px;transition:background .1s; } #global-results .gr-item:last-child{border-bottom:none} #global-results .gr-item:hover{background:var(--cyan-dim)} #global-results .gr-name{color:#fff;font-weight:600;font-size:12px;font-family:var(--mono)} #global-results .gr-meta{color:var(--text2);font-size:10px;font-family:var(--mono)} #global-results .gr-pill{ font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px; font-family:var(--mono);white-space:nowrap; } /* ── AIS dark alert ────────────────────────────────────────── */ .dark-alert{ background:rgba(147,51,234,.08);border:1px solid rgba(147,51,234,.3); border-radius:6px;padding:10px 14px;margin-bottom:10px; display:flex;align-items:center;gap:10px;font-size:11px; font-family:var(--mono);flex-wrap:wrap; } .dark-alert-icon{font-size:16px;flex-shrink:0} .dark-alert-text{color:#fde68a;min-width:0;flex:1;overflow-wrap:anywhere} .dark-alert-vessel{color:#fff;font-weight:700} .dark-alert-days{ background:rgba(147,51,234,.2);color:#fde68a; border:1px solid rgba(147,51,234,.4); border-radius:3px;padding:1px 7px;font-size:10px;font-weight:700; margin-left:auto;white-space:nowrap; } /* ── Cargo volume tracker ──────────────────────────────────── */ .cargo-tracker{ background:var(--panel);border:1px solid var(--border); border-radius:6px;padding:14px 18px;margin-bottom:18px; display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px; } .cargo-stat{text-align:center} .cargo-stat .cn{ font-family:var(--mono);font-size:22px;font-weight:700; letter-spacing:-1px; } .cargo-stat .cl{color:var(--text3);font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-top:3px;font-family:var(--mono)} .cargo-bar-wrap{ grid-column:1/-1; background:rgba(0,0,0,.3);border-radius:3px;height:6px;overflow:hidden; position:relative; } .cargo-bar-seized{ height:100%;background:linear-gradient(90deg,var(--green),var(--teal)); border-radius:3px;transition:width .6s ease; } /* ── Mobile nav (slide-in drawer) ──────────────────────────── */ .nav-hamburger{ display:none;background:none;border:1px solid var(--border2); color:var(--text2);padding:10px 14px;border-radius:4px; cursor:pointer;font-size:18px; min-width:44px;min-height:44px;line-height:1; transition:border-color .15s,color .15s,background .15s; } .nav-hamburger:hover{border-color:var(--cyan);color:var(--cyan)} .nav-hamburger:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} /* Backdrop dims the page behind the drawer */ .nav-drawer-backdrop{ display:none;position:fixed;inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); z-index:998; animation:fadeIn .15s ease; } .nav-drawer-backdrop.open{display:block} /* Drawer panel */ .nav-mobile-menu{ display:flex;flex-direction:column; position:fixed;top:0;left:0;bottom:0; width:min(86vw,360px); background:var(--panel); border-right:1px solid var(--border2); box-shadow:6px 0 40px rgba(0,0,0,.6); padding:14px 0 80px 0; overflow-y:auto;overscroll-behavior:contain; z-index:999; transform:translateX(-100%); visibility:hidden; transition:transform .22s ease-out, visibility 0s linear .22s; } .nav-mobile-menu.open{ transform:translateX(0); visibility:visible; transition:transform .22s ease-out; } .nav-mobile-header{ display:flex;align-items:center;justify-content:space-between; padding:2px 14px 12px 18px; border-bottom:1px solid var(--border); margin-bottom:4px; } .nav-mobile-title{ font-family:var(--mono);font-size:11px;font-weight:700; color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase; text-shadow:0 0 6px rgba(0,212,255,.4); } .nav-mobile-close{ background:none;border:1px solid var(--border2); color:var(--text2);border-radius:4px; cursor:pointer;font-size:14px;line-height:1; min-width:36px;min-height:36px; transition:border-color .15s,color .15s; } .nav-mobile-close:hover{color:var(--cyan);border-color:var(--cyan)} .nav-mobile-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .nav-mobile-section{ padding:14px 20px 5px 20px; font-family:var(--mono);font-size:9px;font-weight:700; letter-spacing:2px;text-transform:uppercase; color:var(--text3); display:flex;align-items:center;gap:7px; } .nav-mobile-section.sea{color:#22d3ee} .nav-mobile-section.air{color:#fbbf24} .nav-mobile-section.intel{color:#f59e0b} .nav-mobile-section.mil{color:#f5a623} .nav-mobile-section.people{color:#d8b4fe} .nav-mobile-section.infra{color:#2dd4bf} .nav-mobile-section.reports{color:#94a3b8} .nav-mobile-menu a{ display:flex;align-items:center;gap:11px; padding:11px 20px;color:var(--text2);font-size:13px; font-family:var(--mono);font-weight:500; border-left:3px solid transparent; min-height:44px; text-decoration:none; transition:color .12s,background .12s,border-color .12s; } .nav-mobile-menu a:hover{color:var(--text);background:rgba(255,255,255,.035)} .nav-mobile-menu a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px} .nav-mobile-menu a.active{ color:var(--cyan);border-left-color:var(--cyan); background:var(--cyan-dim); } .nav-mobile-menu a.sea.active{color:#22d3ee;border-left-color:#22d3ee;background:rgba(34,211,238,.08)} .nav-mobile-menu a.air.active{color:#fbbf24;border-left-color:#fbbf24;background:rgba(251,191,36,.08)} .nav-mobile-menu a.intel.active{color:#f59e0b;border-left-color:#f59e0b;background:rgba(245,158,11,.08)} .nav-mobile-menu a.mil.active{color:#f5a623;border-left-color:#f5a623;background:rgba(245,166,35,.08)} .nav-mobile-menu a.people.active{color:#d8b4fe;border-left-color:#d8b4fe;background:rgba(216,180,254,.08)} .nav-mobile-menu a.infra.active{color:#2dd4bf;border-left-color:#2dd4bf;background:rgba(45,212,191,.08)} .nav-mobile-menu a.reports.active{color:#94a3b8;border-left-color:#94a3b8;background:rgba(148,163,184,.08)} .nav-mobile-menu a.entity.active{color:#d8b4fe;border-left-color:#d8b4fe;background:rgba(216,180,254,.08)} .nav-mobile-menu a.diff.active{color:#22c55e;border-left-color:#22c55e;background:rgba(34,197,94,.08)} .nav-mobile-menu a .mb-icon{ font-size:17px;width:22px;text-align:center;flex-shrink:0; } .nav-mobile-menu a .mb-badge{ margin-left:auto;font-size:10px;font-weight:700; padding:2px 8px;border-radius:10px; background:rgba(255,255,255,.07);color:var(--text3); font-family:var(--mono); } .nav-mobile-menu a.sea .mb-badge{background:rgba(34,211,238,.12);color:#22d3ee} .nav-mobile-menu a.air .mb-badge{background:rgba(251,191,36,.14);color:#fbbf24} .nav-mobile-menu a.intel .mb-badge{background:rgba(245,158,11,.14);color:#f59e0b} .nav-mobile-menu a.mil .mb-badge{background:rgba(245,166,35,.14);color:#f5a623} .nav-mobile-menu a.people .mb-badge{background:rgba(216,180,254,.14);color:#d8b4fe} .nav-mobile-menu a.infra .mb-badge{background:rgba(45,212,191,.14);color:#2dd4bf} .nav-mobile-menu a.reports .mb-badge{background:rgba(148,163,184,.14);color:#94a3b8} /* Wrap handles intermediate widths (~960-1500px) on desktop — nav grows to 2 or 3 rows as needed. Hamburger only kicks in on phone / narrow tablet widths where even a wrapped grouped nav is too tall. */ @media(max-width:959px){ .nav{display:none} .nav-hamburger{display:inline-flex;align-items:center;justify-content:center} } /* ── Live feed controls (toggles + pills next to map header) ──── */ #live-feed-controls{ display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap; margin:0 0 8px;padding:7px 12px; background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:var(--radius); } .lfc-label{ font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1.2px; color:var(--text3);text-transform:uppercase;white-space:nowrap; } /* Each toggle + its status pill stay together as one wrapping unit so the bar never splits a toggle from its count or hides a layer on desktop. */ .layer-unit{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .layer-unit + .layer-unit{padding-left:14px;border-left:1px solid var(--border)} @media(max-width:760px){ .layer-unit + .layer-unit{padding-left:0;border-left:none} } .live-toggle{ display:inline-flex;align-items:center;gap:6px; cursor:pointer;user-select:none; font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.8px; padding:3px 8px;border-radius:14px; border:1px solid var(--border2); background:rgba(0,0,0,.25); transition:background .15s,border-color .15s; } .live-toggle:hover{background:rgba(255,255,255,.04)} .live-toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .live-slider{ width:24px;height:13px; background:rgba(255,255,255,.08); border:1px solid var(--border2); border-radius:7px;position:relative; transition:background .15s,border-color .15s; flex-shrink:0; } .live-slider::after{ content:'';position:absolute;top:1px;left:1px; width:9px;height:9px;border-radius:50%; background:var(--text3); transition:transform .15s,background .15s,box-shadow .15s; } .live-toggle input:checked + .live-slider::after{transform:translateX(11px)} .live-toggle input:focus-visible + .live-slider{outline:2px solid var(--cyan);outline-offset:2px} .live-toggle .live-lbl{color:var(--text3);transition:color .15s} .live-toggle-air input:checked + .live-slider{background:rgba(251,191,36,.25);border-color:#fbbf24} .live-toggle-air input:checked + .live-slider::after{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.6)} .live-toggle-air input:checked ~ .live-lbl{color:#fbbf24} .live-toggle-air{border-color:rgba(251,191,36,.25)} .live-toggle-sea input:checked + .live-slider{background:rgba(34,211,238,.25);border-color:#22d3ee} .live-toggle-sea input:checked + .live-slider::after{background:#22d3ee;box-shadow:0 0 6px rgba(34,211,238,.6)} .live-toggle-sea input:checked ~ .live-lbl{color:#22d3ee} .live-toggle-sea{border-color:rgba(34,211,238,.25)} .live-toggle-props input:checked + .live-slider{background:rgba(216,180,254,.25);border-color:#d8b4fe} .live-toggle-props input:checked + .live-slider::after{background:#d8b4fe;box-shadow:0 0 6px rgba(216,180,254,.6)} .live-toggle-props input:checked ~ .live-lbl{color:#d8b4fe} .live-toggle-props{border-color:rgba(216,180,254,.25)} #live-props-pill{ display:none;align-items:center;gap:5px; background:rgba(91,33,182,.18); border:1px solid #d8b4fe;color:#d8b4fe; border-radius:14px;padding:3px 10px; font-size:10px;font-family:var(--mono);font-weight:700;letter-spacing:.5px; } /* Regime-property marker confidence variants (used by divIcon styles) */ .regime-prop-confirmed{opacity:1} .regime-prop-probable{opacity:.75} .regime-prop-rumored{opacity:.5} #live-sea-pill,#live-air-pill{ display:none;align-items:center;gap:5px; border-radius:14px;padding:3px 10px; font-size:10px;font-family:var(--mono);font-weight:700;letter-spacing:.5px; } #live-sea-pill{background:rgba(14,116,144,.18);border:1px solid #22d3ee;color:#22d3ee} #live-air-pill{background:rgba(146,64,14,.18);border:1px solid #fbbf24;color:#fbbf24} /* ── Airport selector tabs (Airports view) ─────────────────── */ .apt-tab{ flex:1 0 auto;min-width:120px; background:rgba(146,64,14,.06); color:#fcd34d; border:1px solid var(--border2); border-bottom:3px solid transparent; border-left:none; border-radius:6px 6px 0 0; padding:9px 14px; font-size:12px;font-weight:700; font-family:var(--mono);letter-spacing:1px; white-space:nowrap;cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .apt-tab:first-of-type{border-left:1px solid var(--border2)} .apt-tab:hover{background:rgba(146,64,14,.12);color:#fbbf24} .apt-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px} .apt-tab.apt-active{ background:rgba(251,191,36,.1); color:#fbbf24; border-bottom-color:#fbbf24; } .apt-tab .apt-sub{ font-size:9px;color:#94a3b8;font-weight:400; display:block;margin-top:2px; } .apt-tab.apt-active .apt-sub{color:#fcd34d} @media(max-width:768px){ #global-search{width:140px} #global-search:focus{width:180px} /* Prevent iOS Safari zoom on input focus by ensuring all inputs are ≥16px */ input[type="text"],input[type="search"],input[type="email"],input[type="password"], input[type="number"],input[type="url"],textarea,select{font-size:16px !important} } /* Map-fullscreen mode: hide every chrome element so only the map is visible. */ body.map-fullscreen-active .cls-banner, body.map-fullscreen-active .header, body.map-fullscreen-active .alert-bar, body.map-fullscreen-active .op-bar, body.map-fullscreen-active .nav, body.map-fullscreen-active .nav-hamburger, body.map-fullscreen-active .nav-mobile-menu, body.map-fullscreen-active .content > :not(#intel-map):not(#air-map), body.map-fullscreen-active .sec-title, body.map-fullscreen-active #map-mode-tabs{ display:none !important; } body.map-fullscreen-active{overflow:hidden} body.map-fullscreen-active #intel-map, body.map-fullscreen-active #air-map{margin:0 !important} /* ── Keyboard shortcut hint ────────────────────────────────── */ .kbd{ display:inline-block;background:var(--panel2); border:1px solid var(--border2);border-radius:3px; padding:1px 5px;font-size:9px;font-family:var(--mono); color:var(--text3);vertical-align:middle; } /* ── Updated-ago indicator ─────────────────────────────────── */ .updated-ago{ font-size:9px;color:var(--text3);font-family:var(--mono); margin-left:6px; } .updated-ago.fresh{color:var(--green)} .updated-ago.recent{color:var(--gold)} /* ── AIS iframe modal ──────────────────────────────────────── */ #ais-modal{ display:none; position:fixed;inset:0; background:rgba(0,0,0,.75); z-index:800; backdrop-filter:blur(4px); align-items:center;justify-content:center; } #ais-modal.open{display:flex} #ais-panel{ width:96vw;height:92vh; background:var(--panel); border:1px solid var(--border2); border-radius:var(--radius); box-shadow:0 0 60px rgba(0,212,255,.12),0 20px 60px rgba(0,0,0,.7); display:flex;flex-direction:column; overflow:hidden; animation:fadeUp .2s ease; } #ais-topbar{ display:flex;align-items:center;gap:8px; padding:9px 14px; background:var(--bg2); border-bottom:1px solid var(--border2); flex-shrink:0; flex-wrap:wrap; } #ais-url-display{ flex:1;font-family:var(--mono);font-size:10px; color:var(--text3); background:var(--panel2); border:1px solid var(--border); border-radius:4px;padding:4px 10px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; min-width:0; } #ais-topbar-title{ font-family:var(--mono);font-size:12px;font-weight:700; color:var(--cyan);white-space:nowrap; display:flex;align-items:center;gap:7px; } /* Source switcher tabs */ #ais-source-tabs{ display:flex;gap:3px; background:var(--panel); border:1px solid var(--border2); border-radius:5px;padding:3px; flex-shrink:0; } .ais-src-btn{ background:none;border:none; color:var(--text3);padding:4px 12px; border-radius:4px;font-size:10px; font-family:var(--mono);font-weight:600; cursor:pointer;white-space:nowrap; transition:all .15s;letter-spacing:.3px; } .ais-src-btn:hover{color:var(--text2);background:var(--panel2)} .ais-src-btn.active{ background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(0,212,255,.3); } .ais-ctrl-btn{ background:var(--panel2);border:1px solid var(--border2); color:var(--text2);border-radius:4px;padding:5px 11px; font-size:11px;font-family:var(--mono);font-weight:600; cursor:pointer;white-space:nowrap;transition:all .15s; display:flex;align-items:center;gap:5px;flex-shrink:0; } .ais-ctrl-btn:hover{border-color:var(--cyan);color:var(--cyan)} .ais-ctrl-btn.danger:hover{border-color:var(--red);color:var(--red)} #ais-iframe-wrap{flex:1;position:relative;overflow:hidden} #ais-iframe{ width:100%;height:100%;border:none; background:#050e1a; } #ais-loading{ position:absolute;inset:0; display:flex;flex-direction:column; align-items:center;justify-content:center; background:#050e1a;color:var(--text2); font-family:var(--mono);font-size:13px;gap:14px; pointer-events:none; transition:opacity .4s; } #ais-loading .spinner{ width:36px;height:36px;border-radius:50%; border:3px solid var(--border2); border-top-color:var(--cyan); animation:spin .8s linear infinite; } @media(max-width:768px){ #ais-panel{width:100vw;height:100dvh;border-radius:0} #ais-topbar{gap:6px;padding:8px 10px} #ais-url-display{display:none} } /* ── Print styles ──────────────────────────────────────────── */ @media print{ body{background:#fff;color:#000;font-size:11pt} .cls-banner,.alert-bar,.op-bar,.nav,.nav-hamburger,.nav-mobile-menu, #back-top,#nprogress,#vp-overlay,#vp-panel,#ais-modal, .btn,.filters,.pager,#global-search-wrap{display:none!important} .header{background:#fff;border-bottom:2px solid #000;padding:10pt} .header h1{color:#000;font-size:16pt} .header h1 .acc,.header h1 .acc-red{color:#000} .content{padding:10pt;max-width:100%} .stat{border:1px solid #ccc;background:#f9f9f9} .stat .n{color:#000!important;text-shadow:none} .stat .lbl{color:#666} table{border-collapse:collapse;width:100%} th{background:#eee;color:#000;border:1px solid #ccc} td{border:1px solid #ddd;color:#000} .pill{border:1px solid #999;color:#000;background:#eee} .tbl-wrap{overflow:visible} #intel-map,#threats-map,#military-map{display:none} #threats-tbl-wrap,#military-tbl-wrap{display:block!important} .sec-title{color:#000;border-bottom:1px solid #000} .sec-title::after{display:none} .report-card,.card,.mil-card,.event-card{ border:1px solid #ccc;background:#fff;box-shadow:none;page-break-inside:avoid } .dark-alert{border:1px solid #ccc;background:#f9f9f9} .risk-dist-wrap,.cargo-tracker,.fb-wrap{display:none} footer{background:#fff;color:#666;border-top:1px solid #ccc} a[href]::after{content:" (" attr(href) ")";font-size:8pt;color:#666} a.btn::after,a.lang-btn::after,.nav a::after{content:none} .act-btn,.act-ais,.act-profile,.act-map{display:none} /* Page-break hygiene for analyst printouts */ table,.report-card,.card,.mil-card,.event-card,.entity-card{page-break-inside:avoid} tr,th,td{page-break-inside:avoid} thead{display:table-header-group} h1,h2,h3,.sec-title{page-break-after:avoid} } /* ── z-index reference scale (informational — pre-existing values kept) ──── Documented so future additions stay inside the system. Do not renumber live z-indexes without auditing the JS that toggles modal/drawer state. 0 decorative pseudo-elements (grid, scanlines) 1-10 in-flow stacking helpers, sticky table headers 50 in-section overlays 300 classification banner (sticky top) 400 global-search results dropdown 500 map overlays (legend, layer panel, coord HUD) 600-700 vessel-profile overlay / panel 800 AIS iframe modal 900-1101 person-card modal + map layers bottom-sheet 1200 keyboard help panel 1499-1500 ledger / OSINT drawers 9000+ progress bar, toasts, command palette ──────────────────────────────────────────────────────────────────────── */ /* ── Global reduced-motion safety net ───────────────────────────────── Pre-existing prefers-reduced-motion blocks are scoped to specific widgets (live-ac-pulse, critical-ticker, cmdk). This catch-all turns off body gridDrift, pulse, threatPulse, slideIn, blink, spin, marquee, etc. for users who request reduced motion. Placed last in the main stylesheet so the !important wins over earlier animation declarations. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ── Universal hover/focus affordance for outline:none inputs ───────── */ .fi:focus-visible, #global-search:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; } /* ── Reusable badge token (pill) — replaces the inline rgba(0,0,0,.3)+border pattern. Per-row color may still override via inline color/border style; structure-only here so widget rebrands hit one place. */ .badge-token{ display:inline-block; background:rgba(0,0,0,.3); border:1px solid var(--border2); color:var(--text2); padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700; font-family:var(--mono); letter-spacing:.4px; white-space:nowrap; } /* ── Horizontal-scroll fallback for wide tables on narrow viewports ─── */ @media (max-width:768px){ .tbl-wrap,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table.tbl,table.data-tbl{min-width:640px} } /* ── Predictive military intel — estimate-band, rationale, evidence ── */ .forecast-band { position: relative; height: 22px; background: rgba(255,255,255,.04); border-radius: 4px; overflow: hidden; } .forecast-band .band-low, .forecast-band .band-mid, .forecast-band .band-high { position: absolute; height: 100%; top: 0; } .forecast-band .band-low { background: linear-gradient(90deg, var(--sev-low) 20%, transparent); opacity: .25; } .forecast-band .band-mid { background: var(--sev-med); opacity: .55; } .forecast-band .band-high { background: linear-gradient(270deg, var(--sev-crit) 20%, transparent); opacity: .35; } .forecast-band .band-confirmed { position: absolute; top: 0; height: 100%; width: 2px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .forecast-band-wrap .band-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text2); margin-top: 4px; font-family: var(--mono); } .forecast-rationale { font-style: italic; color: var(--text2); margin-top: 6px; font-size: 12px; line-height: 1.5; } .forecast-evidence summary { cursor: pointer; color: var(--cyan); font-size: 11px; font-family: var(--mono); } .forecast-evidence ul { margin: 6px 0 0 16px; font-size: 11px; line-height: 1.6; padding: 0; } .forecast-evidence li { margin-bottom: 4px; } .forecast-spark { display: block; width: 100%; height: 36px; } .forecast-spark .spark-line { fill: none; stroke: var(--cyan); stroke-width: 1.4; opacity: .85; } .forecast-spark .spark-fill { fill: var(--cyan); opacity: .08; } .forecast-spark .spark-dot { fill: var(--cyan); } /* ── Secure-link boot sequence ─────────────────────────────── */ #boot-seq{ position:fixed;inset:0;z-index:99999; background:radial-gradient(ellipse at center,#0a1422 0%,#050a12 68%,#03070d 100%); display:flex;align-items:center;justify-content:center;opacity:1;cursor:pointer; /* Failsafe: if the boot JS never runs (CSP/parse error), this still fades the overlay out so it can't permanently blank the page. JS normally removes it well before 4.5s. */ animation:bootFailsafe .6s ease 4.5s forwards; } @keyframes bootFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}} /* Time-slider year readout pulses while the timeline is playing. */ #res-year-big.res-playing{animation:resYearPulse .6s ease infinite alternate} @keyframes resYearPulse{ from{text-shadow:0 0 8px rgba(0,212,255,.5);transform:scale(1)} to{text-shadow:0 0 18px rgba(0,212,255,.95),0 0 30px rgba(0,212,255,.55);transform:scale(1.06)} } @media (prefers-reduced-motion: reduce){ #res-year-big.res-playing{animation:none} } /* Bottom-CENTER map timeline */ /* Collapsed by default: only the ⏱ pill shows until the operator opens it. */ .res-time-ctl.is-collapsed{width:auto;padding:5px 6px;background:rgba(6,10,18,.72);box-shadow:none} .res-time-ctl.is-collapsed #res-time-body{display:none} .res-time-ctl #res-time-toggle{display:block;margin:0 auto 6px} .res-time-ctl.is-collapsed #res-time-toggle{margin:0} .res-time-ctl{ position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:650; width:min(520px,84%);background:rgba(6,10,18,.95);border:1px solid #1e3a4a;border-radius:10px; padding:9px 14px;font-family:var(--mono);font-size:10px;color:#cdd9e8; box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 1px rgba(0,212,255,.07);backdrop-filter:blur(6px); } /* Live permanent per-province count label (updates as the timeline plays) */ .leaflet-tooltip.prov-stat{ background:transparent;border:none;box-shadow:none;padding:0;color:#fff; font-family:var(--mono);font-weight:800;font-size:13px; text-shadow:0 0 3px #000,0 1px 3px #000,0 0 9px rgba(0,212,255,.5); } .leaflet-tooltip.prov-stat::before{display:none} /* Pseudo-3D lift on the choropleth provinces. Fill transition is enabled only after the first paint (body.res-choro-live) so the initial render doesn't animate from the default color. */ .res-choro-path{filter:drop-shadow(0 4px 5px rgba(0,0,0,.55))} body.res-choro-live .res-choro-path{transition:fill .45s ease} /* Narrative headline caption — the story line that narrates the timeline */ .res-cap{ margin-top:7px;padding-top:7px;border-top:1px solid rgba(34,211,238,.18); font-size:11px;line-height:1.5;color:#dbe6f2;text-align:center; font-family:var(--font,inherit);max-height:54px;overflow:hidden; } .res-cap .res-cap-yr{ color:#fbbf24;font-family:var(--mono);font-weight:800;font-size:12px; margin-right:6px;text-shadow:0 0 6px rgba(251,191,36,.45); } .res-cap-anim{animation:resCapIn .5s ease-out} @keyframes resCapIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} } @media (prefers-reduced-motion: reduce){ .res-cap-anim{animation:none} body.res-choro-live .res-choro-path{transition:none} } /* Rising resistance figure (✊) on provinces with events during playback */ .res-fig{display:inline-block;font-size:18px;line-height:1;filter:drop-shadow(0 0 4px rgba(0,212,255,.7));animation:resFig 1.7s ease-out forwards} @keyframes resFig{ 0%{opacity:0;transform:translateY(6px) scale(.6)} 18%{opacity:1;transform:translateY(-2px) scale(1.12)} 60%{opacity:1;transform:translateY(-15px) scale(1)} 100%{opacity:0;transform:translateY(-32px) scale(.9)} } @media (prefers-reduced-motion: reduce){ .res-fig{animation:none;opacity:0} } #boot-seq::after{ content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,212,255,.035) 0 1px,transparent 1px 3px); opacity:.55; } #boot-seq.boot-done{opacity:0;transition:opacity .6s ease;pointer-events:none} .boot-inner{text-align:center;position:relative;z-index:1;padding:20px} .boot-scope{margin-bottom:16px;display:flex;justify-content:center} .boot-sweep{transform-origin:50px 50px;animation:bootSweep 1.4s linear infinite} @keyframes bootSweep{to{transform:rotate(360deg)}} .boot-lines{font-size:12px;color:#7e8fa8;line-height:1.95;letter-spacing:.5px;min-height:72px} .boot-line{opacity:0;animation:bootIn .4s ease forwards} .boot-line.boot-ok{color:#22c55e} .boot-brand{font-family:var(--mono);font-weight:800;font-size:34px;letter-spacing:3px;margin-top:14px;opacity:0;animation:bootIn .5s ease forwards} .boot-sub{font-family:var(--mono);font-size:11px;color:#22d3ee;letter-spacing:4px;margin-top:5px;opacity:0;animation:bootIn .5s ease forwards} .boot-skip{font-family:var(--mono);font-size:9px;color:#475569;letter-spacing:1px;margin-top:22px;opacity:0;animation:bootIn .5s ease forwards} @keyframes bootIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ .boot-sweep,.boot-line,.boot-brand,.boot-sub,.boot-skip{animation:none;opacity:1} } /* ── Ops-console atmosphere: faint CRT scanlines + corner vignette ─── */ body::after{ content:"";position:fixed;inset:0;z-index:9990;pointer-events:none; background: radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(0,0,0,.30) 100%), repeating-linear-gradient(0deg, rgba(120,180,220,.016) 0 1px, transparent 1px 3px); } /* Cinematic page-in: the console "materializes" on load. */ @keyframes ciFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .content{animation:ciFadeIn .4s ease both} /* ── Map HUD: tactical corner brackets over the intel map ─────────── */ .map-hud{position:absolute;inset:0;z-index:450;pointer-events:none} .map-hud i{position:absolute;width:18px;height:18px;border:2px solid rgba(0,212,255,.55); filter:drop-shadow(0 0 3px rgba(0,212,255,.4))} .map-hud i.tl{top:8px;left:8px;border-right:none;border-bottom:none} .map-hud i.tr{top:8px;right:8px;border-left:none;border-bottom:none} .map-hud i.bl{bottom:8px;left:8px;border-right:none;border-top:none} .map-hud i.br{bottom:8px;right:8px;border-left:none;border-top:none} .map-hud b{position:absolute;top:10px;left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:8px;letter-spacing:2px;color:rgba(0,212,255,.6); font-weight:700;text-shadow:0 0 4px rgba(0,0,0,.8)} @media (prefers-reduced-motion: reduce){ .content{animation:none} } /* Deep-linked record (e.g. #pa- from What's Changed) flashes so you can see exactly which one you landed on. */ [id^="pa-"]:target{scroll-margin-top:90px;border-radius:8px;animation:targetFlash 2s ease 1} @keyframes targetFlash{ 0%{box-shadow:0 0 0 3px #ff2d2d,0 0 20px rgba(255,45,45,.6)} 60%{box-shadow:0 0 0 2px var(--cyan),0 0 16px rgba(0,212,255,.4)} 100%{box-shadow:0 0 0 0 transparent} }