/* osir.co.uk: Global Situation Monitor dashboard styles. Uses osir's dark-aware tokens so dark mode just works. */

/* ---- compact header + clock ---- */
.gm-hero { padding-top: 14px; }
.gm-hero-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gm-hero-row h1 { margin: 4px 0 0; }
.gm-clock { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--muted); white-space: nowrap; }

/* ---- status bar + space weather ---- */
.gm-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); border-left: 6px solid #16a34a; }
.gm-status.lv-elevated { border-left-color: #d9a706; }
.gm-status.lv-high     { border-left-color: #ea580c; }
.gm-status.lv-critical { border-left-color: #dc2626; }
.gm-dot { width: 14px; height: 14px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(22,163,74,.18); }
.lv-elevated .gm-dot { background: #d9a706; box-shadow: 0 0 0 4px rgba(217,167,6,.18); }
.lv-high .gm-dot     { background: #ea580c; box-shadow: 0 0 0 4px rgba(234,88,12,.18); }
.lv-critical .gm-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.2); animation: gm-pulse 1.6s ease-in-out infinite; }
@keyframes gm-pulse { 50% { box-shadow: 0 0 0 9px rgba(220,38,38,0); } }
@media (prefers-reduced-motion: reduce) { .lv-critical .gm-dot { animation: none; } }
.gm-status-text { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.gm-status-text strong { font-size: 1.1rem; color: var(--text); }
.gm-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-count { font-size: .82rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); }
.gm-count.gm-t1 { color: #dc2626; border-color: rgba(220,38,38,.5); }
.gm-count.gm-t2 { color: #ea580c; border-color: rgba(234,88,12,.5); }
.gm-count.gm-t3 { color: #b4820a; border-color: rgba(217,167,6,.5); }
.gm-space { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); }
.gm-space-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #16a34a; }

.gm-sitrep { margin-top: 14px; padding: 13px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.gm-sitrep p { margin: 6px 0; color: var(--text); }
.gm-sitrep-tag { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--link); }

/* ---- events | map grid ---- */
.gm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; align-items: start; }
@media (max-width: 920px) { .gm-grid { grid-template-columns: 1fr; } }
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gm-head h2 { margin: 0; }
.gm-mapbtns { display: flex; gap: 6px; }

.gm-mapwrap { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.gm-map { height: 460px; }
.gm-col-events .gm-map { height: 460px; }

/* ---- trending panels (pairs: finance|social, search-uk|search-us) ---- */
.gm-trending { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .gm-trending { grid-template-columns: 1fr; } }
.gm-tr { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.gm-tr-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; font-weight: 700; }
.gm-tr-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.gm-tr-list li { font-size: .84rem; line-height: 1.35; }

/* ---- event cards ---- */
.gm-events { display: flex; flex-direction: column; gap: 12px; }
.gm-card { border: 1px solid var(--border); border-left: 5px solid #9ca3af; border-radius: 14px; padding: 13px 15px; background: var(--surface); }
.gm-card.gm-t1 { border-left-color: #dc2626; }
.gm-card.gm-t2 { border-left-color: #ea580c; }
.gm-card.gm-t3 { border-left-color: #d9a706; }
.gm-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.gm-ico { font-size: 1.05rem; line-height: 1; }
.gm-badge { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(99,102,241,.14); color: var(--text); }
.gm-card.gm-t1 .gm-badge { background: rgba(220,38,38,.16); color: #dc2626; }
.gm-card.gm-t2 .gm-badge { background: rgba(234,88,12,.16); color: #ea580c; }
.gm-card.gm-t3 .gm-badge { background: rgba(217,167,6,.18); color: #b4820a; }
.gm-unconf { background: rgba(120,120,135,.16) !important; color: var(--muted) !important; }
.gm-status-b { background: rgba(6,148,162,.14) !important; color: #0e7490 !important; text-transform: capitalize; }
.gm-title { font-size: 1rem; line-height: 1.35; margin: 2px 0 6px; color: var(--text); }
.gm-meta { margin-bottom: 8px; }
.gm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.gm-chip { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--link); text-transform: capitalize; }
.gm-prov { margin-top: 6px; }
.gm-prov summary { cursor: pointer; font-size: .82rem; color: var(--link); }
.gm-timeline { margin: 8px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.gm-timeline li { font-size: .82rem; line-height: 1.4; color: var(--text); }
.gm-tl-src { font-weight: 600; }

/* ---- feed status ---- */
.gm-sources { margin-top: 16px; }
.gm-src-h { font-size: .95rem; margin-bottom: 8px; }
.gm-src-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.gm-src-list li { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--text); }
.gm-src-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #16a34a; }
.gm-src-dot.warn { background: #d9a706; }
.gm-src-dot.bad { background: #dc2626; }
.gm-src-name { flex: 1; }

/* ---- full-screen map overlay (command centre) ---- */
.gm-overlay { display: none; position: absolute; inset: 0; pointer-events: none; color: #fff;
  font-size: .9rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#gm-mapwrap:fullscreen { background: #0b1220; }
#gm-mapwrap:fullscreen .gm-map { height: 100vh; }
#gm-mapwrap:fullscreen .gm-overlay, .gm-map-full .gm-overlay { display: block; }
.gm-map-full { position: fixed; inset: 0; z-index: 9999; }
.gm-map-full .gm-map { height: 100vh; }
.gm-ov-top { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 12px 18px; background: rgba(8,12,22,.6); }
.gm-ov-clock { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gm-ov-level { font-weight: 700; }
.gm-ov-level.lv-critical { color: #fca5a5; }
.gm-ov-level.lv-high { color: #fdba74; }
.gm-ov-level.lv-elevated { color: #fde047; }
.gm-ov-list { position: absolute; left: 14px; bottom: 14px; width: min(420px, 60vw); max-height: 55vh; overflow: auto;
  background: rgba(8,12,22,.6); border-radius: 12px; padding: 8px 12px; }
.gm-ov-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.gm-ov-badge { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.16); }
.gm-ov-row.gm-t1 .gm-ov-badge { background: rgba(220,38,38,.6); }
.gm-ov-row.gm-t2 .gm-ov-badge { background: rgba(234,88,12,.6); }
.gm-ov-ttl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-ov-ago { opacity: .8; font-size: .78rem; white-space: nowrap; }

.gm-ov-exit { pointer-events: auto; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px; padding: 4px 12px; font-weight: 600; font-size: .85rem; }
.gm-ov-exit:hover { background: rgba(255,255,255,.26); }

/* ---- AGI countdown ---- */
.gm-agi { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 14px 16px; }
.gm-agi-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.gm-agi-pct { font-size: 2.6rem; font-weight: 800; line-height: 1; color: #3b82f6; font-variant-numeric: tabular-nums; }
.gm-agi-txt strong { font-size: 1.05rem; }
.gm-agi-txt p { margin: 3px 0 0; }
.gm-agi-svg { width: 100%; height: auto; display: block; }
.gm-agi-svg .gm-g { stroke: var(--border); stroke-width: 1; }
.gm-agi-svg .gm-l { fill: var(--muted); font-size: 11px; font-family: inherit; }
.gm-agi-svg .gm-area { fill: rgba(59,130,246,.13); stroke: none; }
.gm-agi-svg .gm-line { fill: none; stroke: #3b82f6; stroke-width: 2.5; stroke-linejoin: round; }
.gm-agi-svg .gm-dot { fill: #3b82f6; }
.gm-agi-svg .gm-proj { stroke: #f59e0b; stroke-width: 2; stroke-dasharray: 6 5; }
.gm-agi-svg .gm-cross { fill: #dc2626; }
.gm-agi-svg .gm-cross-l { fill: #dc2626; font-weight: 700; }
.gm-agi-svg .gm-thr { stroke: #dc2626; stroke-width: 1.3; stroke-dasharray: 4 4; opacity: .8; }
.gm-agi-svg .gm-thr-l { fill: #dc2626; }
.gm-agi-svg .gm-now { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.gm-agi-svg .gm-now-dot { fill: #111827; stroke: #fff; stroke-width: 1.5; }
:root[data-theme="dark"] .gm-agi-svg .gm-now-dot { fill: #e5e7eb; stroke: #0b1220; }
@media (max-width: 560px) { .gm-agi-pct { font-size: 2rem; } }