/* ═══════════════════════════════════════════════════════════════
   AEGEAN LIVE · Global Operating Picture
   Design system — extends aegeanintel.com brand tokens (Brand Guide v1.2)
   Command-center layer: glass panels · provenance chrome · data palette
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand tokens (exact, from live site) ── */
  --near-black:  #0C1018;
  --shade-black: #060810;
  --deep-navy:   #0A2540;
  --navy-tint:   #0F2B47;
  --slate-blue:  #2C4A6E;
  --cool-gray:   #5C6370;
  --warm-mist:   #E8E6E1;
  --muted-mist:  #b8b4a9;
  --parchment:   #F5F4F1;
  --white:       #FFFFFF;
  --antique-gold:#8B7234;
  --gold-mid:    #BFA24E;
  --gold-bright: #D4B65E;
  --hairline:      rgba(191,162,78,0.28);
  --hairline-soft: rgba(232,230,225,0.10);
  --hairline-strong: rgba(191,162,78,0.5);

  /* ── Data palette (data + status ONLY, never chrome) ── */
  --signal-green:  #6FBF8B;
  --signal-amber:  #E0A93B;
  --signal-red:    #D86C5A;
  --signal-gray:   #5C6370;
  --cyan:          #58C8D4;   /* electric teal — primary data accent */
  --cyan-dim:      rgba(88,200,212,0.18);
  --fact:          #9BC4E2;   /* methodology-page anchors */
  --assessment:    #D4B65E;
  --recommendation:#B8C99D;

  /* ── Surfaces ── */
  --glass:       rgba(14,20,30,0.62);
  --glass-2:     rgba(10,14,22,0.78);
  --panel:       #0C1018;
  --panel-2:     #0A0E16;

  /* ── Rhythm ── */
  --hdr-h: 60px;
  --tab-h: 50px;
  --tick-h: 34px;
  --gap: 16px;
  --radius: 3px;

  --mono: 'IBM Plex Mono','Menlo',monospace;
  --sans: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --cond: 'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  background: var(--shade-black);
  color: var(--warm-mist);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(191,162,78,0.3); color: var(--white); }

/* ── Ambient field: dot-grid + radial glows + scanline ── */
.field-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 18% -8%, rgba(10,37,64,0.55), transparent 60%),
    radial-gradient(800px 700px at 105% 12%, rgba(43,74,110,0.30), transparent 55%),
    radial-gradient(700px 500px at 50% 120%, rgba(191,162,78,0.06), transparent 60%),
    var(--shade-black);
}
.field-bg::before {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(232,230,225,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000 40%, transparent 100%);
}
.field-bg::after {
  content:""; position:absolute; inset:0; opacity:0.4;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background: rgba(232,230,225,0.04); }
::-webkit-scrollbar-thumb { background: var(--antique-gold); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-mid); }

/* ═══════════ TYPOGRAPHY HELPERS ═══════════ */
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-mid); }
.u-muted { color: var(--muted-mist); }
.u-dim { color: var(--cool-gray); }
.u-tnum { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* ═══════════ HEADER ═══════════ */
.app-header {
  position: sticky; top: 0; z-index: 60; height: var(--hdr-h);
  display: flex; align-items: center; gap: 22px;
  padding: 0 22px;
  background: linear-gradient(180deg, rgba(6,8,16,0.96), rgba(6,8,16,0.86));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--antique-gold);
}
.brand-lock { display:flex; align-items:center; gap:11px; white-space:nowrap; }
.brand-lock img { width:26px; height:26px; opacity:.95; }
.brand-lock .bl-name { font-family:var(--cond); font-weight:700; font-size:16px; letter-spacing:.02em; color:var(--white); }
.brand-lock .bl-name .live { color:var(--gold-mid); }
.brand-lock .bl-sub { font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cool-gray); display:block; margin-top:1px; }
.brand-lock .bl-text { line-height:1; }

.hdr-spacer { flex: 1; }

/* live clock + readouts */
.hdr-readouts { display:flex; align-items:center; gap:20px; }
.readout { display:flex; flex-direction:column; gap:3px; line-height:1; }
.readout .r-lbl { font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cool-gray); }
.readout .r-val { font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--warm-mist); font-variant-numeric:tabular-nums; }
.readout .r-val.gold { color: var(--gold-bright); }

.clock .r-val { color: var(--cyan); font-weight:500; }

/* feed status chip */
.feed-chip { display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--hairline-soft); background:rgba(255,255,255,0.015); }
.feed-chip .dot-live { width:7px; height:7px; border-radius:50%; background:var(--signal-green); box-shadow:0 0 0 0 rgba(111,191,139,0.6); animation: pulse 2.2s infinite; }
.feed-chip.degraded .dot-live { background: var(--signal-amber); }
.feed-chip.down .dot-live { background: var(--signal-red); animation:none; }
.feed-chip .fc-txt { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--warm-mist); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111,191,139,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(111,191,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,191,139,0); }
}

/* global risk pill */
.risk-pill { display:flex; align-items:center; gap:10px; padding:5px 14px 6px; border:1px solid var(--hairline); position:relative; overflow:hidden; }
.risk-pill .rp-lbl { font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cool-gray); }
.risk-pill .rp-val { font-family:var(--cond); font-weight:700; font-size:15px; letter-spacing:.04em; }
.risk-pill[data-level="ELEVATED"] .rp-val { color: var(--signal-amber); }
.risk-pill[data-level="HIGH"] .rp-val { color: var(--signal-red); }
.risk-pill[data-level="GUARDED"] .rp-val { color: var(--cyan); }
.risk-pill[data-level="LOW"] .rp-val { color: var(--signal-green); }

.site-link { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-mist); border:1px solid var(--hairline-soft); padding:8px 12px; transition:.15s; white-space:nowrap; }
.site-link:hover { color:var(--gold-mid); border-color:var(--hairline); }

/* ═══════════ SAMPLE BANNER ═══════════ */
.sample-banner {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:7px 16px; text-align:center;
  background: repeating-linear-gradient(45deg, rgba(224,169,59,0.10) 0 14px, rgba(224,169,59,0.04) 14px 28px);
  border-bottom: 1px solid rgba(224,169,59,0.35);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--gold-bright);
}
.sample-banner .badge { background:var(--signal-amber); color:var(--shade-black); font-weight:600; padding:2px 8px; letter-spacing:.14em; }
.sample-banner.hidden { display:none; }

/* ═══════════ TAB NAV ═══════════ */
.tabnav {
  position: sticky; top: var(--hdr-h); z-index: 55; height: var(--tab-h);
  display:flex; align-items:stretch; gap:0;
  padding: 0 14px;
  background: rgba(6,8,16,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline-soft);
  overflow-x: auto; scrollbar-width: none;
}
.tabnav::-webkit-scrollbar { display:none; }
.tab-btn {
  display:flex; align-items:center; gap:9px; padding: 0 18px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--mono); font-size: 11.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted-mist); white-space:nowrap; transition:.15s; position:relative;
}
.tab-btn .tb-idx { font-size:9px; color:var(--cool-gray); letter-spacing:.1em; }
.tab-btn:hover { color: var(--gold-mid); background: rgba(191,162,78,0.04); }
.tab-btn.active { color: var(--gold-bright); border-bottom-color: var(--gold-mid); }
.tab-btn.active .tb-idx { color: var(--gold-mid); }

/* ═══════════ TICKER TAPE ═══════════ */
.ticker {
  height: var(--tick-h); overflow:hidden; position:relative;
  background: var(--panel-2); border-bottom: 1px solid var(--hairline-soft);
  display:flex; align-items:center;
}
.ticker .tk-tag { flex:0 0 auto; z-index:2; height:100%; display:flex; align-items:center; padding:0 14px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--shade-black);
  background: var(--gold-mid); font-weight:600; }
.ticker .tk-track { display:flex; align-items:center; gap:34px; white-space:nowrap; padding-left:24px;
  animation: ticker-scroll 64s linear infinite; will-change: transform; }
.ticker:hover .tk-track { animation-play-state: paused; }
.tk-item { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; }
.tk-item .tk-k { color: var(--muted-mist); letter-spacing:.06em; }
.tk-item .tk-v { color: var(--warm-mist); font-variant-numeric:tabular-nums; }
.tk-item .tk-d { font-size:11px; font-variant-numeric:tabular-nums; }
.tk-item .up { color: var(--signal-green); }
.tk-item .down { color: var(--signal-red); }
.tk-item .flat { color: var(--cool-gray); }
.tk-sep { color: var(--antique-gold); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════════ MAIN / TABPANELS ═══════════ */
.app-main { min-height: calc(100vh - var(--hdr-h) - var(--tab-h) - var(--tick-h)); }
.tabpanel { display:none; padding: 18px; animation: fade-in .35s ease; }
.tabpanel.active { display:block; }
.tabpanel.full { padding:0; }   /* GLOBAL tab manages its own layout */
@keyframes fade-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

/* ── viewport-filling tab layout ──
   A tab is a vertical stack that fills the screen; "grow" rows expand to
   absorb the remaining height so charts use the available space. */
.tab-fill { display:flex; flex-direction:column; gap:16px;
  min-height: calc(100vh - var(--hdr-h) - var(--tab-h) - var(--tick-h) - 36px); }
.frow { display:grid; gap:16px; grid-template-columns: repeat(12,1fr); }
.frow.grow { flex:1 1 0; min-height:300px; }
.frow > [class*="span-"] { display:flex; min-width:0; }   /* panels fill their cell */
.frow > [class*="span-"] > .panel { width:100%; }
@media (max-width:1100px){ .frow > [class*="span-"]{ grid-column:span 12 !important; } .frow.grow{ min-height:0; } }
@media (max-width:680px){ .frow{ grid-template-columns:1fr; } }

/* charts fill their panel body when asked */
.chart.fill { height:100%; min-height:260px; }

/* compact card strips */
.cards-5, .cards-4 { display:grid; gap:16px; }
.cards-5 { grid-template-columns: repeat(5,1fr); }
.cards-4 { grid-template-columns: repeat(4,1fr); }
.cards-5 > .panel, .cards-4 > .panel { min-width:0; }
@media (max-width:1100px){ .cards-5, .cards-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:680px){ .cards-5, .cards-4 { grid-template-columns: 1fr; } }

/* responsive grid */
.grid { display:grid; gap: var(--gap); }
.g-12 { grid-template-columns: repeat(12, 1fr); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; } .span-12 { grid-column: span 12; }
@media (max-width:1100px){ .span-3{grid-column:span 6;} .span-4{grid-column:span 6;} .span-5,.span-7,.span-8,.span-9{grid-column:span 12;} }
@media (max-width:680px){ .g-12 > [class*="span-"]{grid-column:span 12;} }

/* ═══════════ PANEL (glass card) ═══════════ */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(6px);
  display:flex; flex-direction:column; min-height: 120px;
}
.panel::before { content:""; position:absolute; top:0; left:0; width:34px; height:2px; background: var(--gold-mid); }
.panel:hover { border-color: var(--hairline); }
.panel-head {
  display:flex; align-items:center; gap:10px; padding: 13px 16px 11px;
  border-bottom: 1px solid var(--hairline-soft);
}
.panel-head h3 { font-family:var(--cond); font-weight:700; font-size:15px; letter-spacing:.01em; color:var(--white); }
.panel-head .ph-spacer { flex:1; }
.panel-body { padding: 16px; flex:1 1 auto; min-height:0; }
.panel-body.tight { padding: 10px; }
.panel-body.flexcol { display:flex; flex-direction:column; overflow:hidden; }
.panel-body.scroll { overflow:auto; }

/* provenance footer on every panel */
.prov {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding: 8px 16px; border-top: 1px solid var(--hairline-soft);
  font-family: var(--mono); font-size: 9.5px; letter-spacing:.06em; color: var(--cool-gray);
  margin-top:auto;
}
.prov .tier { color: var(--gold-mid); border:1px solid var(--hairline-soft); padding:1px 6px; letter-spacing:.12em; }
.prov .prov-src { color: var(--muted-mist); }
.prov .prov-ts { margin-left:auto; }
.prov .conf-h { color: var(--fact); } .prov .conf-m { color: var(--assessment); } .prov .conf-l { color: var(--signal-red); }

/* status dot chip (inline) */
.status-tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.status-tag .sd { width:8px; height:8px; border-radius:50%; }
.s-live .sd, .sd.live { background: var(--signal-green); }
.s-stale .sd, .sd.stale { background: var(--signal-amber); }
.s-down .sd, .sd.down { background: var(--signal-red); }
.s-sample .sd, .sd.sample { background: var(--cyan); }
.s-live { color: var(--signal-green); } .s-stale { color: var(--signal-amber); }
.s-down { color: var(--signal-red); } .s-sample { color: var(--cyan); }

/* SAMPLE badge corner */
.sample-tag { position:absolute; top:0; right:0; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  background: var(--signal-amber); color: var(--shade-black); padding: 2px 7px; font-weight:600; z-index:2; }
.sample-tag.hidden { display:none; }

/* ═══════════ STAT / METRIC ═══════════ */
.metric { display:flex; flex-direction:column; gap:6px; }
.metric .m-val { font-family:var(--cond); font-weight:700; font-size:34px; line-height:1; color:var(--white); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.metric .m-val.cyan { color: var(--cyan); }
.metric .m-val.gold { color: var(--gold-bright); }
.metric .m-lbl { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cool-gray); }
.metric .m-delta { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
.metric .m-delta.up { color:var(--signal-green); } .metric .m-delta.down { color:var(--signal-red); } .metric .m-delta.flat { color:var(--cool-gray); }

/* ═══════════ STATE BLOCKS: skeleton / empty / no-data / stale / error ═══════════ */
.skeleton { position:relative; overflow:hidden; background: rgba(232,230,225,0.04); border:1px solid var(--hairline-soft); }
.skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(232,230,225,0.07), transparent);
  animation: shimmer 1.5s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height:12px; margin:10px 16px; }
.sk-block { height: 160px; margin: 16px; }

.state-block { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding: 40px 24px; text-align:center; min-height:140px; }
.state-block .sb-icon { font-size:22px; opacity:.7; }
.state-block .sb-title { font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.state-block .sb-msg { font-size:12.5px; color:var(--muted-mist); max-width:42ch; line-height:1.5; }
.state-block.no-data .sb-title { color: var(--signal-amber); }
.state-block.stale .sb-title { color: var(--signal-amber); }
.state-block.error .sb-title { color: var(--signal-red); }
.state-block.empty .sb-title { color: var(--cool-gray); }
.state-block .last-good { font-family:var(--mono); font-size:10px; color:var(--cool-gray); margin-top:4px; }

/* ═══════════ LIVE EVENT FEED ═══════════ */
.evt-feed { display:flex; flex-direction:column; }
.evt { display:grid; grid-template-columns: auto 1fr; gap:12px; padding:11px 14px; border-bottom:1px solid var(--hairline-soft); transition:.15s; }
.evt:hover { background: rgba(255,255,255,0.02); }
.evt .evt-rail { display:flex; flex-direction:column; align-items:center; gap:5px; padding-top:3px; }
.evt .evt-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.evt[data-sev="red"] .evt-dot { background: var(--signal-red); box-shadow:0 0 8px rgba(216,108,90,0.6); }
.evt[data-sev="amber"] .evt-dot { background: var(--signal-amber); }
.evt[data-sev="info"] .evt-dot { background: var(--cyan); }
.evt .evt-time { font-family:var(--mono); font-size:9px; color:var(--cool-gray); white-space:nowrap; }
.evt .evt-body .evt-title { font-size:13px; color:var(--warm-mist); line-height:1.4; }
.evt .evt-body .evt-meta { font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--cool-gray); margin-top:4px; }
.evt .evt-body .evt-meta .tier { color: var(--gold-mid); }

/* ═══════════ CHART HOST ═══════════ */
.chart { width:100%; min-height: 220px; }
.chart.h-280 { height: 280px; } .chart.h-220 { height: 220px; } .chart.h-180 { height:180px; } .chart.h-340 { height:340px; }

/* ═══════════ FOOTER ═══════════ */
.app-footer { border-top:1px solid var(--antique-gold); background: var(--shade-black); margin-top: 24px; }
.footer-inner { padding: 26px 22px; display:grid; grid-template-columns: 1.4fr 1fr; gap:36px; }
@media (max-width:880px){ .footer-inner { grid-template-columns:1fr; gap:24px; } }
.registry h4, .footer-meta h4 { font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-mid); margin-bottom:14px; }
.registry-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:7px 22px; }
@media (max-width:560px){ .registry-grid { grid-template-columns:1fr; } }
.reg-row { display:flex; align-items:baseline; gap:9px; font-family:var(--mono); font-size:10.5px; line-height:1.5; }
.reg-row .tier { color:var(--gold-mid); border:1px solid var(--hairline-soft); padding:0 5px; font-size:9px; letter-spacing:.1em; }
.reg-row .reg-name { color:var(--warm-mist); }
.reg-row .reg-feed { color:var(--cool-gray); margin-left:auto; }
.footer-meta p { font-size:12px; color:var(--muted-mist); line-height:1.6; margin-bottom:10px; }
.footer-meta a { color: var(--gold-mid); }
.footer-meta a:hover { color: var(--gold-bright); }
.standing-note { border-left:2px solid var(--antique-gold); padding-left:14px; font-family:var(--mono); font-size:10.5px; color:var(--cool-gray); line-height:1.7; }

/* ═══════════ LAYER LEGEND (GLOBAL tab) ═══════════ */
.legend { display:flex; flex-direction:column; gap:2px; }
.legend-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border:1px solid transparent; cursor:pointer; transition:.15s; user-select:none; }
.legend-item:hover { background: rgba(255,255,255,0.025); border-color: var(--hairline-soft); }
.legend-item .lg-swatch { width:11px; height:11px; flex:0 0 auto; border-radius:2px; }
.legend-item .lg-name { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--warm-mist); flex:1; }
.legend-item .lg-count { font-family:var(--mono); font-size:10px; color:var(--cool-gray); font-variant-numeric:tabular-nums; }
.legend-item.off { opacity:.4; }
.legend-item.off .lg-name { color: var(--cool-gray); }

/* segmented toggle (Globe/Map) */
.seg { display:inline-flex; border:1px solid var(--hairline); }
.seg button { background:transparent; border:0; padding:7px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-mist); transition:.15s; }
.seg button.active { background: var(--gold-mid); color: var(--shade-black); font-weight:600; }

/* ═══════════ RADIAL GAUGE host ═══════════ */
.gauge-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0; }

/* ═══════════ EWI ═══════════ */
.ewi-rollup { display:flex; gap:12px; flex-wrap:wrap; }
.rollup-cell { flex:1; min-width:120px; border:1px solid var(--hairline-soft); padding:20px 16px; text-align:center; background:rgba(255,255,255,0.012); }
.rollup-cell .rc-n { font-family:var(--cond); font-weight:700; font-size:42px; line-height:1; font-variant-numeric:tabular-nums; }
.rollup-cell .rc-l { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--cool-gray); margin-top:8px; }
.rollup-cell.green .rc-n { color: var(--signal-green); } .rollup-cell.green { border-top:2px solid var(--signal-green); }
.rollup-cell.amber .rc-n { color: var(--signal-amber); } .rollup-cell.amber { border-top:2px solid var(--signal-amber); }
.rollup-cell.red .rc-n { color: var(--signal-red); } .rollup-cell.red { border-top:2px solid var(--signal-red); }
.rollup-cell.gray .rc-n { color: var(--cool-gray); } .rollup-cell.gray { border-top:2px solid var(--cool-gray); }

.ewi-bucket { border:1px solid var(--hairline-soft); margin-bottom:14px; }
.ewi-bucket-head { display:flex; align-items:center; gap:12px; padding:12px 16px; background: rgba(255,255,255,0.015); border-bottom:1px solid var(--hairline-soft); }
.ewi-bucket-head .eb-name { font-family:var(--cond); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--white); }
.ewi-bucket-head .eb-desc { font-size:11.5px; color:var(--muted-mist); flex:1; }
.ewi-bucket-head .eb-status { font-family:var(--mono); font-size:10px; letter-spacing:.14em; padding:3px 9px; border:1px solid var(--hairline-soft); }
.eb-status.RED { color:var(--signal-red); border-color:rgba(216,108,90,0.5); }
.eb-status.AMBER { color:var(--signal-amber); border-color:rgba(224,169,59,0.5); }
.eb-status.GREEN { color:var(--signal-green); border-color:rgba(111,191,139,0.5); }
.eb-status.GRAY { color:var(--cool-gray); }

.ind-row { display:grid; grid-template-columns: 22px 1fr 130px 96px auto; gap:14px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--hairline-soft); }
.ind-row:last-child { border-bottom:0; }
.ind-row:hover { background: rgba(255,255,255,0.02); }
.ind-row .ir-light { width:11px; height:11px; border-radius:50%; }
.ir-light.RED { background:var(--signal-red); box-shadow:0 0 8px rgba(216,108,90,0.6); }
.ir-light.AMBER { background:var(--signal-amber); }
.ir-light.GREEN { background:var(--signal-green); }
.ir-light.GRAY { background:var(--cool-gray); }
.ind-row .ir-name { font-size:13px; color:var(--warm-mist); }
.ind-row .ir-name .ir-id { font-family:var(--mono); font-size:9.5px; color:var(--gold-mid); margin-right:8px; }
.ind-row .ir-name .ir-path { font-family:var(--mono); font-size:9px; color:var(--cool-gray); display:block; margin-top:3px; }
.ind-row .ir-read { font-family:var(--mono); font-size:12px; color:var(--white); font-variant-numeric:tabular-nums; }
.ind-row .ir-thr { font-family:var(--mono); font-size:10px; color:var(--cool-gray); }
.ind-row .ir-meta { font-family:var(--mono); font-size:9px; color:var(--cool-gray); text-align:right; white-space:nowrap; }
@media (max-width:860px){ .ind-row { grid-template-columns: 16px 1fr auto; } .ind-row .ir-thr, .ind-row .ir-meta { display:none; } }

/* chokepoint status cards */
.choke-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
@media (max-width:980px){ .choke-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .choke-grid { grid-template-columns: 1fr; } }
.choke { border:1px solid var(--hairline-soft); padding:14px; position:relative; }
.choke .ck-name { font-family:var(--cond); font-weight:700; font-size:15px; color:var(--white); }
.choke .ck-sub { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--cool-gray); margin-top:2px; }
.choke .ck-val { font-family:var(--mono); font-size:22px; color:var(--cyan); margin-top:12px; font-variant-numeric:tabular-nums; }
.choke .ck-status { position:absolute; top:14px; right:14px; }

/* country risk gauge rows */
.risk-row { display:grid; grid-template-columns: 130px 1fr 44px; gap:12px; align-items:center; padding:9px 0; }
.risk-row .rr-name { font-size:12.5px; color:var(--warm-mist); }
.risk-row .rr-bar { height:6px; background: rgba(232,230,225,0.07); position:relative; overflow:hidden; }
.risk-row .rr-fill { position:absolute; left:0; top:0; bottom:0; }
.risk-row .rr-num { font-family:var(--mono); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }

/* ═══════════ tooltip (globe/map) ═══════════ */
.map-tip { position:absolute; z-index:30; pointer-events:none; max-width:280px;
  background: var(--glass-2); border:1px solid var(--hairline); padding:10px 12px; backdrop-filter:blur(8px);
  font-size:12px; opacity:0; transition:opacity .12s; }
.map-tip.show { opacity:1; }
.map-tip .mt-title { font-family:var(--cond); font-weight:700; font-size:13px; color:var(--white); margin-bottom:5px; }
.map-tip .mt-row { font-family:var(--mono); font-size:10.5px; color:var(--muted-mist); line-height:1.6; }
.map-tip .mt-row .tier { color: var(--gold-mid); }

/* ═══════════ utility ═══════════ */
.row { display:flex; align-items:center; gap:12px; }
.wrap-flex { display:flex; flex-wrap:wrap; gap:12px; }
.mb-12 { margin-bottom:12px; } .mb-16 { margin-bottom:16px; } .mt-auto { margin-top:auto; }
.divider { height:1px; background: var(--hairline-soft); margin:12px 0; }
.btn-mini { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-mist); border:1px solid var(--hairline-soft); padding:6px 11px; background:transparent; transition:.15s; }
.btn-mini:hover { color:var(--gold-mid); border-color:var(--hairline); }
.btn-mini.active { color:var(--shade-black); background:var(--gold-mid); border-color:var(--gold-mid); }

/* ═══════════ MapLibre overrides (dark) ═══════════ */
.maplibregl-popup.al-pop .maplibregl-popup-content { background:transparent; padding:0; box-shadow:none; }
.maplibregl-popup.al-pop .maplibregl-popup-tip { display:none; }
.maplibregl-ctrl-attrib { background: rgba(6,8,16,0.7) !important; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib a { color: var(--cool-gray) !important; font-family: var(--mono); font-size: 9px !important; }
.maplibregl-ctrl-group { background: rgba(10,14,22,0.85) !important; border:1px solid var(--hairline-soft) !important; }
.maplibregl-ctrl-group button { filter: invert(1) hue-rotate(180deg) brightness(0.9); }
.maplibregl-canvas { outline: none; }

/* globe.gl default tooltip reset (we supply our own styled inner div) */
.scene-tooltip { color: var(--warm-mist) !important; font-family: var(--mono) !important; }

/* ═══════════ ACCESS GATE ═══════════ */
.gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(10,37,64,0.6), transparent 60%),
    var(--shade-black);
  opacity: 1; transition: opacity .3s ease;
}
.gate.unlocked { opacity: 0; pointer-events: none; }
.gate-card {
  width: min(380px, 88vw);
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  border: 1px solid var(--hairline); backdrop-filter: blur(8px);
  padding: 38px 34px 30px; text-align: center; position: relative;
}
.gate-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--gold-mid); }
.gate-mark { width: 46px; height: 46px; opacity: .95; margin-bottom: 18px; }
.gate-title { font-family: var(--cond); font-weight: 700; font-size: 26px; letter-spacing: .02em; color: var(--white); }
.gate-title .live { color: var(--gold-mid); }
.gate-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cool-gray); margin-top: 8px; margin-bottom: 26px; }
.gate-form { display: flex; gap: 10px; }
.gate-input {
  flex: 1; min-width: 0; background: rgba(6,8,16,0.7); border: 1px solid var(--hairline-soft);
  color: var(--warm-mist); font-family: var(--mono); font-size: 18px; letter-spacing: .4em;
  text-align: center; padding: 12px 14px; outline: none; transition: border-color .15s;
}
.gate-input:focus { border-color: var(--gold-mid); }
.gate-btn {
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
  background: var(--gold-mid); color: var(--near-black); border: 1px solid var(--gold-mid);
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; padding: 0 18px; cursor: pointer; transition: .15s;
}
.gate-btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.gate-err { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--signal-red); margin-top: 14px; }
.gate-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--cool-gray); margin-top: 22px; line-height: 1.5; }
.gate-card.shake { animation: gate-shake .4s; }
@keyframes gate-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}

/* ═══════════ GLOBAL TAB · command-center layout (Phase A) ═══════════ */
.global-wrap { display:flex; flex-direction:column; gap:16px; padding:18px; }
.global-top { align-items:stretch; }
/* lock the rail's height to the globe's so their bottoms align (wide screens) */
@media (min-width:1101px){ .global-top { height: clamp(480px, 72vh, 780px); } }
.global-top > [class*="span-"] { height:100%; min-height:0; }
.global-globe > .panel { height:100%; }   /* globe cell fills; rail panels size by flex */
.global-rail { display:flex; flex-direction:column; gap:16px; min-height:0; overflow:hidden; }
.global-rail > .panel { flex:0 0 auto; }
.global-rail > .rail-gauge { flex:0 1 auto; min-height:0; }
.global-rail > .feed-panel { flex:1 1 120px; min-height:120px; }
.global-rail > .feed-panel .panel-body { display:flex; flex-direction:column; }
@media (max-width:1100px){ .global-top { height:auto; } .global-top #globe-host { min-height:440px; } }

/* focus presets (globe panel head) */
.focus-presets { display:flex; gap:6px; flex-wrap:wrap; }
.focus-presets .btn-mini { padding:5px 9px; font-size:9px; letter-spacing:.08em; }

/* time scrubber (map panel head) */
.scrubber { display:flex; align-items:center; gap:10px; min-width:280px; }
.scrubber.disabled { opacity:.45; }
.scrubber .scrub-play { padding:4px 9px; min-width:34px; }
.scrubber .scrub-label { font-size:10px; color:var(--muted-mist); white-space:nowrap; min-width:118px; text-align:right; }
.scrub-range { -webkit-appearance:none; appearance:none; height:3px; flex:1; min-width:120px; background:var(--hairline); outline:none; }
.scrub-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%; background:var(--gold-bright); border:1px solid var(--shade-black); cursor:pointer; }
.scrub-range::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:var(--gold-bright); border:1px solid var(--shade-black); cursor:pointer; }
.scrubber.playing .scrub-play { color:var(--shade-black); background:var(--gold-mid); border-color:var(--gold-mid); }

/* legend: clickable + solo state */
.legend-item { cursor:pointer; }
.legend-item .lg-count { cursor:pointer; padding:1px 5px; border:1px solid transparent; }
.legend-item .lg-count:hover { border-color:var(--hairline-soft); color:var(--warm-mist); }
.legend-item.solo { border-color:var(--hairline); background:rgba(191,162,78,0.06); }
.legend-item.solo .lg-count { color:var(--gold-bright); border-color:var(--hairline); }

/* live feed rows are selectable */
.evt { cursor:pointer; }
.evt:focus-visible { outline:1px solid var(--gold-mid); outline-offset:-1px; }
.evt.active { background:rgba(191,162,78,0.10); box-shadow:inset 2px 0 0 var(--gold-mid); }

/* ═══════════ DETAIL DRAWER (shared selection detail) ═══════════ */
.detail-drawer {
  position:fixed; top:var(--hdr-h); right:0; z-index:80;
  width:min(380px, 92vw); max-height:calc(100vh - var(--hdr-h));
  display:flex; flex-direction:column; overflow:auto;
  background:linear-gradient(180deg, var(--glass-2), var(--panel-2));
  border-left:1px solid var(--hairline); backdrop-filter:blur(10px);
  transform:translateX(105%); transition:transform .28s ease; box-shadow:-14px 0 40px rgba(0,0,0,0.45);
}
.detail-drawer.open { transform:none; }
.detail-drawer .dr-head { display:flex; align-items:center; padding:13px 16px 11px; border-bottom:1px solid var(--hairline-soft); }
.detail-drawer .dr-kind { font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-mid); }
.detail-drawer .dr-close { background:transparent; border:1px solid var(--hairline-soft); color:var(--muted-mist); width:26px; height:26px; line-height:1; transition:.15s; }
.detail-drawer .dr-close:hover { color:var(--gold-bright); border-color:var(--hairline); }
.detail-drawer .dr-title { font-family:var(--cond); font-weight:700; font-size:17px; line-height:1.3; color:var(--white); padding:14px 16px 10px; }
.detail-drawer .dr-body { padding:0 16px 8px; }
.detail-drawer .dr-row { display:flex; gap:12px; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--hairline-soft); }
.detail-drawer .dr-row .dr-k { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cool-gray); flex:0 0 auto; }
.detail-drawer .dr-row .dr-v { font-size:12.5px; color:var(--warm-mist); text-align:right; word-break:break-word; }
.detail-drawer .dr-actions { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; }
.detail-drawer .dr-foot { margin-top:auto; }
.detail-drawer .dr-foot .prov { border-top:1px solid var(--hairline-soft); }

/* ═══════════ FINANCIAL · asset detail + analytics (Phase B) ═══════════ */
.panel.clickable { cursor:pointer; }
.panel.clickable:hover { border-color:var(--hairline); background:linear-gradient(180deg, rgba(88,200,212,0.06), var(--glass-2)); }

.asset-picker, .range-sel { display:flex; gap:5px; flex-wrap:wrap; }
.asset-picker .btn-mini { padding:4px 8px; font-size:9px; letter-spacing:.06em; }
.range-sel .btn-mini { padding:4px 10px; font-size:9.5px; }

.detail-controls { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--hairline-soft); }
.detail-stats { display:flex; gap:18px; flex-wrap:wrap; margin-left:auto; }
.detail-stats .ds-cell { display:flex; flex-direction:column; gap:2px; line-height:1; }
.detail-stats .ds-k { font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cool-gray); }
.detail-stats .ds-v { font-family:var(--mono); font-size:13px; color:var(--warm-mist); font-variant-numeric:tabular-nums; }
.detail-stats .ds-v.up { color:var(--signal-green); } .detail-stats .ds-v.down { color:var(--signal-red); } .detail-stats .ds-v.flat { color:var(--cool-gray); }

/* movers board */
.movers { display:flex; flex-direction:column; gap:2px; }
.mover-row { display:grid; grid-template-columns: 92px 1fr 56px; gap:10px; align-items:center; padding:7px 4px; border-bottom:1px solid var(--hairline-soft); }
.mover-row .mv-name { font-size:12px; color:var(--warm-mist); }
.mover-row .mv-bar { height:6px; background:rgba(232,230,225,0.06); position:relative; }
.mover-row .mv-fill { position:absolute; top:0; bottom:0; }
.mover-row .mv-fill.up { left:0; background:var(--signal-green); }
.mover-row .mv-fill.down { left:0; background:var(--signal-red); }
.mover-row .mv-num { font-family:var(--mono); font-size:11px; text-align:right; font-variant-numeric:tabular-nums; }

/* ═══════════ GEOPOLITICAL · engagement map filters (Phase C) ═══════════ */
.geo-filters { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.type-toggles { display:flex; gap:5px; flex-wrap:wrap; }
.type-chip { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--hairline-soft);
  padding:4px 8px; font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--cool-gray); transition:.15s; }
.type-chip .tc-swatch { width:9px; height:9px; border-radius:2px; opacity:.4; transition:.15s; }
.type-chip.active { color:var(--warm-mist); border-color:var(--hairline); }
.type-chip.active .tc-swatch { opacity:1; }
.geo-country { background:rgba(6,8,16,0.7); border:1px solid var(--hairline-soft); color:var(--warm-mist);
  font-family:var(--mono); font-size:10px; padding:5px 8px; outline:none; }
.geo-country:focus { border-color:var(--gold-mid); }

/* ═══════════ EWI · live wiring (Phase E) ═══════════ */
.ind-row.drill { cursor:pointer; }
.ind-row.drill:hover { background:rgba(191,162,78,0.06); box-shadow:inset 2px 0 0 var(--gold-mid); }
.ind-row.unwired { opacity:.62; }
.ir-wired { font-family:var(--mono); font-size:8px; letter-spacing:.12em; padding:1px 5px; border:1px solid var(--hairline-soft); }
.ir-wired.on { color:var(--signal-green); border-color:rgba(111,191,139,0.4); }
.ir-wired.off { color:var(--cool-gray); }

/* chokepoint card pulse (deep-link target) */
.choke.pulse { animation: choke-pulse 1.6s ease; }
@keyframes choke-pulse {
  0% { box-shadow:0 0 0 0 rgba(212,182,94,0.5); border-color:var(--gold-mid); }
  100% { box-shadow:0 0 0 14px rgba(212,182,94,0); border-color:var(--hairline-soft); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ticker .tk-track { animation: none; }
  .field-bg::after { display:none; }
}