/* MADA · Baseera Platform — Acuterium Sovereign Dashboard Theme */
:root {
  --void: #0A0A0A; --deep: #050D1A; --navy: #0A1628;
  --cyan: #00E5D4; --gold: #C9A84C; --violet: #7B68EE;
  --alert: #FF3B30; --success: #2ECC71; --blue: #3498DB;
  --glass-bg: rgba(10,14,23,0.88); --glass-border: rgba(0,229,212,0.2);
  --glass-blur: blur(24px); --font-arabic: 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-mono); background: var(--void); color: #E8F4F8; overflow: hidden; }
#cesiumContainer { width:100vw; height:100vh; }
.cesium-viewer-bottom, .cesium-viewer-timelineContainer { display:none !important; }

/* HUD Bars */
.hud-bar { position:fixed; z-index:2000; display:flex; align-items:center; backdrop-filter:var(--glass-blur); background:var(--glass-bg); border:1px solid var(--glass-border); }
.hud-top { top:0; left:0; right:0; height:48px; padding:0 16px; justify-content:space-between; border-top:none; border-radius:0 0 0 0; border-bottom:1px solid var(--glass-border); }
.hud-bottom { bottom:0; left:0; right:0; height:64px; padding:0 12px; gap:8px; border-bottom:none; border-top:1px solid var(--glass-border); overflow-x:auto; }

.hud-left, .hud-center, .hud-right { display:flex; align-items:center; gap:10px; }
.hud-logo { width:24px; height:24px; }
.hud-title { font-size:13px; font-weight:700; letter-spacing:2px; color:var(--cyan); }
.hud-clock { font-size:11px; color:var(--gold); letter-spacing:1px; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:9px; letter-spacing:1px; font-weight:500; }
.badge-active { background:rgba(46,204,113,0.2); border:1px solid rgba(46,204,113,0.4); color:var(--success); }
.badge-qenc { background:rgba(123,104,238,0.15); border:1px solid rgba(123,104,238,0.3); color:var(--violet); }
.badge-cogni { background:rgba(0,229,212,0.15); border:1px solid rgba(0,229,212,0.3); color:var(--cyan); }
.badge-bilstm { background:rgba(201,168,76,0.15); border:1px solid rgba(201,168,76,0.3); color:var(--gold); }
.badge-shards { background:rgba(0,229,212,0.1); border:1px solid rgba(0,229,212,0.2); color:var(--cyan); }

.pulse-dot { width:6px; height:6px; border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Side Panels */
.side-panel { position:fixed; top:56px; bottom:72px; width:220px; z-index:1500; backdrop-filter:var(--glass-blur); background:var(--glass-bg); border:1px solid var(--glass-border); overflow-y:auto; padding:12px; }
.left-panel { left:8px; border-radius:12px; }
.right-panel { right:8px; border-radius:12px; }
.panel-header { font-size:10px; letter-spacing:2px; color:var(--gold); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid rgba(201,168,76,0.2); }

/* Layer Toggles */
.layer-toggle { display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; font-size:11px; color:#C4DFE8; transition:color 0.2s; }
.layer-toggle:hover { color:#fff; }
.layer-toggle input { display:none; }
.toggle-indicator { width:10px; height:10px; border-radius:3px; border:1px solid rgba(255,255,255,0.3); transition:all 0.2s; }
.layer-toggle input:checked + .toggle-indicator { box-shadow:0 0 8px; }
.flight-color { background:var(--cyan); border-color:var(--cyan); }
.military-color { background:var(--alert); border-color:var(--alert); }
.maritime-color { background:var(--gold); border-color:var(--gold); }
.sat-color { background:var(--violet); border-color:var(--violet); }
.jam-color { background:var(--alert); border-color:var(--alert); }
.seismic-color { background:#FF6B35; border-color:#FF6B35; }
.weather-color { background:var(--blue); border-color:var(--blue); }
.sentinel-color { background:#2ECC71; border-color:#2ECC71; }
.port-color { background:#E8A050; border-color:#E8A050; }

/* Preset Buttons */
.preset-group { display:flex; flex-direction:column; gap:4px; }
.preset-btn { background:rgba(0,229,212,0.08); border:1px solid rgba(0,229,212,0.15); color:var(--cyan); padding:6px 10px; border-radius:6px; font-size:10px; font-family:var(--font-mono); cursor:pointer; text-align:left; transition:all 0.2s; }
.preset-btn:hover { background:rgba(0,229,212,0.2); border-color:var(--cyan); }

/* Bottom Stats */
.stat-card { flex:1; min-width:90px; background:rgba(0,229,212,0.05); border:1px solid rgba(0,229,212,0.1); border-radius:8px; padding:8px 12px; text-align:center; }
.stat-card.anomaly-card { border-color:rgba(255,59,48,0.3); background:rgba(255,59,48,0.05); }
.stat-label { font-size:8px; letter-spacing:1.5px; color:var(--cyan); margin-bottom:4px; }
.stat-value { font-size:18px; font-weight:700; color:#fff; }

/* Display Modes */
.mode-select { background:rgba(0,229,212,0.1); border:1px solid var(--glass-border); color:var(--cyan); padding:4px 8px; border-radius:6px; font-size:10px; font-family:var(--font-mono); cursor:pointer; }
.lang-btn { background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.3); color:var(--gold); padding:4px 12px; border-radius:6px; font-size:11px; cursor:pointer; font-family:var(--font-arabic); }

/* Mode Filters */
body.mode-nvg #cesiumContainer { filter:hue-rotate(90deg) saturate(2) brightness(1.2); }
body.mode-thermal #cesiumContainer { filter:hue-rotate(-30deg) saturate(3) contrast(1.3); }
body.mode-hud #cesiumContainer { filter:contrast(1.5) brightness(0.8); }

/* Entity Details */
.entity-content { font-size:11px; line-height:1.6; }
.entity-content .field { margin-bottom:6px; }
.entity-content .field-label { color:var(--gold); font-size:9px; letter-spacing:1px; }
.entity-content .field-value { color:#fff; }

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--cyan); border-radius:4px; }

/* ── PRISM Panel ───────────────────────────────────────────── */
.prism-panel{position:fixed;top:64px;right:16px;width:340px;max-height:calc(100vh - 140px);overflow-y:auto;background:rgba(10,10,10,.78);backdrop-filter:blur(14px);border:1px solid rgba(0,229,212,.22);border-radius:10px;padding:14px;color:#E8E8E8;font-family:'JetBrains Mono',monospace;z-index:50}
.prism-panel .panel-header{font-size:11px;letter-spacing:.18em;color:#00E5D4;border-bottom:1px solid rgba(0,229,212,.25);padding-bottom:8px;margin-bottom:12px}
.prism-panel .panel-subheader{font-size:9px;letter-spacing:.18em;color:#C9A84C;margin:14px 0 8px;border-bottom:1px dashed rgba(201,168,76,.25);padding-bottom:4px}
.prism-pillar{margin-bottom:10px}
.prism-pillar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.prism-pillar-label{font-size:10px;letter-spacing:.14em;font-weight:600}
.prism-pillar-score{font-size:13px;font-weight:700}
.prism-bar-track{height:5px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin:2px 0}
.prism-bar-fill{height:100%;background:linear-gradient(90deg,#00E5D4,#C9A84C,#FF3B30);transition:width .4s ease}
.prism-pillar-hint{font-size:9px;color:#888;margin-top:1px}
.prism-gcc-row{display:grid;grid-template-columns:36px 1fr 32px;gap:8px;align-items:center;margin-bottom:5px}
.prism-gcc-code{font-size:10px;color:#E8E8E8;font-weight:600;letter-spacing:.06em}
.prism-gcc-score{font-size:11px;text-align:right;font-weight:600}
.prism-hormuz-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.06);font-size:10px}
.prism-hormuz-row:last-child{border-bottom:none}
.prism-hormuz-row span:first-child{color:#888;letter-spacing:.06em}
.prism-hormuz-row span:last-child{font-weight:600}
.prism-footnote{margin-top:12px;font-size:8px;color:#555;letter-spacing:.1em;text-align:center}
#prismToggle.active{background:rgba(0,229,212,.25);border-color:rgba(0,229,212,.6);color:#00E5D4}

/* ── Basemap Switcher ───────────────────────────────────────── */
.basemap-switcher{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(10,10,10,.82);backdrop-filter:blur(12px);border:1px solid rgba(0,229,212,.22);border-radius:8px;padding:6px 10px;z-index:40;font-family:'JetBrains Mono',monospace}
.basemap-label{font-size:9px;letter-spacing:.18em;color:#888;padding-right:6px;border-right:1px solid rgba(255,255,255,.08)}
.basemap-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:#bbb;padding:5px 10px;font-size:9px;letter-spacing:.12em;border-radius:4px;cursor:pointer;font-family:inherit;transition:all .15s}
.basemap-btn:hover{border-color:rgba(0,229,212,.4);color:#00E5D4}
.basemap-btn.active{background:rgba(0,229,212,.18);border-color:rgba(0,229,212,.6);color:#00E5D4}

/* ── Street View Drill Panel ────────────────────────────────── */
.street-view-panel{position:fixed;top:64px;left:50%;transform:translateX(-50%);width:70vw;max-width:1100px;height:70vh;background:rgba(10,10,10,.92);backdrop-filter:blur(18px);border:1px solid rgba(201,168,76,.35);border-radius:10px;z-index:100;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.sv-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(201,168,76,.25);background:rgba(10,10,10,.7)}
.sv-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#C9A84C}
.sv-actions{display:flex;gap:6px}
.sv-btn{background:transparent;border:1px solid rgba(201,168,76,.4);color:#C9A84C;padding:5px 10px;font-size:9px;letter-spacing:.12em;border-radius:4px;cursor:pointer;font-family:'JetBrains Mono',monospace}
.sv-btn:hover{background:rgba(201,168,76,.15)}
.sv-close{border-color:rgba(255,59,48,.4);color:#FF3B30}
.sv-close:hover{background:rgba(255,59,48,.12)}
.sv-iframe{flex:1;width:100%;border:0;background:#000}
.sv-footnote{padding:6px 14px;font-size:9px;color:#666;text-align:center;letter-spacing:.1em;border-top:1px solid rgba(255,255,255,.06);font-family:'JetBrains Mono',monospace}

/* ── Fresh imagery basemap buttons + date badge ───────────────────── */
.basemap-btn.fresh{border-color:rgba(46,204,113,.35);color:#7FE0A0}
.basemap-btn.fresh:hover{border-color:rgba(46,204,113,.7);color:#2ECC71}
.basemap-btn.fresh.active{background:rgba(46,204,113,.18);border-color:rgba(46,204,113,.7);color:#2ECC71}
.imagery-date-badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:#888;padding-left:8px;border-left:1px solid rgba(255,255,255,.08);margin-left:4px}
.imagery-date-badge.live{color:#2ECC71}

/* ── Time scrubber (bottom-center, above ticker) ──────────────────── */
.time-scrubber{position:fixed;bottom:140px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(10,10,10,.85);backdrop-filter:blur(12px);border:1px solid rgba(201,168,76,.3);border-radius:8px;padding:6px 10px;z-index:41;font-family:'JetBrains Mono',monospace}
.ts-label{font-size:9px;letter-spacing:.18em;color:#C9A84C;padding-right:6px;border-right:1px solid rgba(201,168,76,.2)}
.time-scrubber input[type=date]{background:rgba(0,0,0,.6);border:1px solid rgba(201,168,76,.3);color:#fff;font-family:inherit;font-size:10px;padding:4px 6px;border-radius:4px;color-scheme:dark}
.ts-btn{background:transparent;border:1px solid rgba(201,168,76,.35);color:#C9A84C;padding:4px 8px;font-size:10px;border-radius:4px;cursor:pointer;font-family:inherit}
.ts-btn:hover{background:rgba(201,168,76,.15)}
.ts-today{font-size:8px;letter-spacing:.14em}

/* ── INTEL TICKER ─────────────────────────────────────────────────── */
.intel-ticker{position:fixed;bottom:64px;left:0;right:0;height:36px;background:linear-gradient(180deg,rgba(10,10,10,.92),rgba(0,0,0,.95));border-top:1px solid rgba(255,59,48,.25);border-bottom:1px solid rgba(0,229,212,.15);display:flex;align-items:center;overflow:hidden;z-index:35;font-family:'JetBrains Mono',monospace}
.intel-ticker-label{flex:0 0 auto;background:#FF3B30;color:#000;font-size:10px;font-weight:700;letter-spacing:.18em;padding:0 14px;height:100%;display:flex;align-items:center;border-right:2px solid #000}
.intel-ticker-track{display:flex;align-items:center;gap:14px;white-space:nowrap;animation:tickerScroll 180s linear infinite;padding-left:14px}
.intel-ticker:hover .intel-ticker-track{animation-play-state:paused}
.intel-item{font-size:11px;color:#E8E8E8;letter-spacing:.04em}
.intel-item a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.2)}
.intel-item a:hover{color:#00E5D4;border-bottom-color:#00E5D4}
.intel-tag{display:inline-block;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:3px;font-size:9px;letter-spacing:.14em;margin-right:6px;color:#C9A84C}
.intel-item.sev-hi{color:#FF6B5C}
.intel-item.sev-hi .intel-tag{background:rgba(255,59,48,.25);color:#FF453A}
.intel-item.sev-mid{color:#FFD089}
.intel-item.sev-mid .intel-tag{background:rgba(255,159,10,.18);color:#FF9F0A}
.intel-item.sev-lo{color:#9AD9B0}
.intel-item.dim{color:#666;font-style:italic}
.intel-sep{color:rgba(255,255,255,.18);margin:0 4px}
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Bottom HUD needs to lift to make room for ticker */
.hud-bottom{bottom:0 !important;z-index:36}

/* ────────────────────────────────────────────────────────────
   MADA v2.3 — Palantir-style polish layer
   ──────────────────────────────────────────────────────────── */

/* Classification banners */
.classification-strip {
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #000;
  background: #FFB000;
  padding: 2px 0;
  z-index: 9999;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.classification-top { top: 0; }
.classification-bottom { bottom: 0; }
/* Lift existing HUD bars away from classification strips */
.hud-top    { top: 22px !important; }
.hud-bottom { bottom: 22px !important; }
.intel-ticker { bottom: 70px !important; }

/* Palantir-style restyle: kill rounded, slate-900, 1px amber borders, mono labels */
.side-panel,
.hud-bar,
.audit-monitor,
.playback-panel,
.intent-box {
  border-radius: 0 !important;
  background: rgba(13, 17, 23, 0.92) !important;
  border: 1px solid rgba(255, 176, 0, 0.35) !important;
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
}
.stat-card { border-radius: 0 !important; }
.panel-header,
.audit-title,
.playback-title,
.intent-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFB000;
  border-bottom: 1px solid rgba(255, 176, 0, 0.25);
  padding-bottom: 4px;
}

/* Activity Monitor — right rail beneath right panel */
.audit-monitor {
  position: fixed;
  right: 12px;
  top: 90px;
  width: 320px;
  max-height: 38vh;
  display: flex;
  flex-direction: column;
  z-index: 800;
  font-size: 10px;
}
.audit-monitor.collapsed { max-height: 32px; overflow: hidden; }
.audit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 176, 0, 0.25);
}
.audit-operator { color: #00E5D4; font-size: 9px; }
.audit-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 176, 0, 0.4);
  color: #FFB000;
  cursor: pointer;
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.audit-btn + .audit-btn { margin-left: 4px; }
.audit-btn:hover { background: rgba(255, 176, 0, 0.15); }
.audit-track {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px;
}
.audit-row {
  display: grid;
  grid-template-columns: 60px 36px 1fr auto;
  gap: 6px;
  font-size: 10px;
  padding: 2px 0;
  border-bottom: 1px dotted rgba(255, 176, 0, 0.10);
  color: #C9D1D9;
}
.audit-row.warn { color: #FFB000; }
.audit-row.critical { color: #FF3B30; }
.audit-ts { color: #6C7886; }
.audit-op { color: #00E5D4; }
.audit-tgt { color: #C9A84C; text-align: right; }

/* Timeline playback */
.playback-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 130px;
  width: 520px;
  z-index: 750;
  font-size: 10px;
}
.playback-panel.collapsed .playback-body { display: none; }
.playback-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 176, 0, 0.25);
}
.playback-body { padding: 8px 12px; }
.playback-controls { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pb-btn, .pb-select {
  background: transparent;
  border: 1px solid rgba(255, 176, 0, 0.4);
  color: #FFB000;
  padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
}
.pb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pb-btn.active { background: #FFB000; color: #000; }
.pb-scrubber {
  width: 100%;
  margin: 4px 0;
  accent-color: #FFB000;
}
.playback-ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #00E5D4;
  text-align: center;
  letter-spacing: 0.1em;
}

/* Intent box (AIP-style ASK MADA) */
.intent-box {
  position: fixed;
  right: 12px;
  bottom: 130px;
  width: 380px;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  z-index: 800;
}
.intent-box.collapsed { max-height: 32px; overflow: hidden; }
.intent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 176, 0, 0.25);
}
.intent-routing {
  margin-left: auto;
  font-size: 8px;
  color: #00E5D4;
  letter-spacing: 0.1em;
}
.intent-body { display: flex; flex-direction: column; flex: 1; padding: 8px 10px; gap: 6px; min-height: 0; }
.intent-output {
  flex: 1;
  overflow-y: auto;
  font-size: 10px;
  color: #C9D1D9;
  line-height: 1.5;
}
.intent-placeholder { color: #6C7886; margin-bottom: 4px; }
.intent-starter {
  cursor: pointer;
  color: #00E5D4;
  padding: 2px 0;
}
.intent-starter:hover { color: #FFB000; }
.coa-block { padding: 4px 0; }
.coa-id { color: #FFB000; font-weight: 600; }
.coa-query { color: #fff; margin: 4px 0; }
.coa-routing { color: #00E5D4; font-size: 9px; margin-bottom: 6px; }
.coa-step { color: #C9D1D9; padding: 2px 0; }
.coa-warn { color: #FF3B30; margin-top: 6px; font-size: 9px; }
.intent-input-row { display: flex; gap: 4px; }
.intent-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 176, 0, 0.4);
  color: #fff;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.intent-input:focus { outline: none; border-color: #FFB000; }
.intent-submit {
  background: #FFB000;
  border: none;
  color: #000;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 700;
}
.intent-submit:hover { background: #FFC833; }

/* Slight squeeze on bottom HUD because of classification strip */
.hud-bar { border-radius: 0 !important; }

/* ════════════════════════════════════════════════════════════
   MADA v2.3.1 — LAYOUT FIX (overrides all previous positions)
   Vertical zones (1080px viewport):
     0   – 22   classification top
    22   – 70   top HUD
    70   – 760  map / floating panels
   760   – 810  playback panel
   810   – 858  basemap switcher
   858   – 894  intel ticker
   894   – 1058 bottom HUD (stat cards)
  1058   – 1080 classification bottom
   ════════════════════════════════════════════════════════════ */

/* Classification banners — keep top/bottom, no padding bleed */
.classification-strip { padding: 3px 0 !important; line-height: 16px !important; font-size: 10px !important; }

/* Top HUD: clamp height, no overlap with classification */
.hud-top    { top: 22px !important; height: 48px !important; }

/* Side panels — leave room for playback/basemap/ticker/bottom HUD */
.left-panel, .right-panel {
  top: 76px !important;
  bottom: 330px !important;
  width: 230px !important;
}

/* Intent box — large, top-right beneath top HUD */
.intent-box {
  position: fixed !important;
  top: 76px !important;
  right: 248px !important;
  bottom: 330px !important;
  width: 380px !important;
  max-height: none !important;
  z-index: 850 !important;
  display: flex !important;
  flex-direction: column !important;
}
.intent-box.collapsed { bottom: auto !important; height: 32px !important; }
.intent-body { flex: 1; overflow: hidden; min-height: 0; }
.intent-output { max-height: 100% !important; }

/* Activity Monitor — right rail, full height alongside intent box */
.audit-monitor {
  position: fixed !important;
  top: 76px !important;
  right: 12px !important;
  bottom: 330px !important;
  width: 230px !important;
  max-height: none !important;
  z-index: 850 !important;
  display: flex !important;
  flex-direction: column !important;
}
.audit-monitor.collapsed { bottom: auto !important; height: 32px !important; }
.audit-track { flex: 1; overflow-y: auto; min-height: 0; }

/* Playback panel — slim strip ABOVE basemap switcher */
.playback-panel {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 270px !important;
  top: auto !important;
  width: 640px !important;
  height: 50px !important;
  z-index: 950 !important;
}
.playback-panel .playback-header { padding: 4px 10px !important; height: 24px !important; }
.playback-panel .playback-body { padding: 4px 10px !important; }
.playback-panel .playback-controls { margin: 0 !important; }
.playback-panel.collapsed { height: 26px !important; }

/* Basemap switcher — clamp height + horizontal scroll if needed */
.basemap-switcher, #basemapSwitcher {
  bottom: 222px !important;
  top: auto !important;
  z-index: 940 !important;
  max-width: calc(100vw - 32px) !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

/* Intel ticker — sits above bottom HUD, no overlap */
.intel-ticker {
  bottom: 186px !important;
  height: 36px !important;
  z-index: 930 !important;
}

/* Bottom HUD — locked above classification footer */
.hud-bottom {
  bottom: 22px !important;
  height: 160px !important;
  padding: 12px !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 10px !important;
  z-index: 920 !important;
}
.hud-bottom .stat-card {
  min-width: 130px;
  flex: 0 0 auto;
  padding: 6px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,176,0,0.25);
}
.hud-bottom .stat-card .stat-label { font-size: 9px; letter-spacing: 0.1em; margin-bottom: 2px; }
.hud-bottom .stat-card .stat-value { font-size: 18px; font-weight: 700; }

/* Cesium native bottom bar — kill it entirely so it can't intrude */
.cesium-widget-credits, .cesium-viewer-bottom { display: none !important; }

/* Lift left/right panel scrollbars to dark for Palantir look */
.side-panel::-webkit-scrollbar, .audit-track::-webkit-scrollbar, .intent-output::-webkit-scrollbar { width: 4px; }
.side-panel::-webkit-scrollbar-thumb, .audit-track::-webkit-scrollbar-thumb, .intent-output::-webkit-scrollbar-thumb { background: rgba(255,176,0,0.3); }

/* PRISM button (top HUD) needs to not collide with classification */
#prismToggle, .prism-toggle { top: 32px !important; }
.prism-panel { top: 84px !important; }

/* Responsive: narrow viewports get stacked layout */
@media (max-width: 1400px) {
  .intent-box { right: 12px !important; bottom: 460px !important; }
  .audit-monitor { bottom: 460px !important; height: 200px; }
}

/* ════════════════════════════════════════════════════════════
   MADA v2.3.2 — Layout cleanup pass 2
   Goals: every panel has visible close/collapse, no overlap,
   intel ticker readable, basemap is a compact dropdown.
   ════════════════════════════════════════════════════════════ */

/* Basemap switcher: compact chip, top-left under top-HUD, beside left panel */
.basemap-switcher {
  position: fixed !important;
  top: 78px !important;
  left: 248px !important;
  bottom: auto !important;
  right: auto !important;
  width: auto !important;
  height: 32px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 1600 !important;
  background: rgba(13,17,23,0.92) !important;
  border: 1px solid rgba(255,176,0,0.35) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.basemap-label { color: #FFB000; letter-spacing: 0.15em; font-weight: 600; }
.basemap-select {
  background: rgba(0,0,0,0.6);
  color: #00E5D4;
  border: 1px solid rgba(255,176,0,0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 6px;
  outline: none;
}
.basemap-select:hover { border-color: #FFB000; }
.imagery-date-badge { color: #6C7886; font-size: 9px; }

/* Time scrubber: floating chip, top-left next to basemap */
#timeScrubber.time-scrubber {
  position: fixed !important;
  top: 78px !important;
  left: 580px !important;
  bottom: auto !important;
  right: auto !important;
  height: 32px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 1600 !important;
  background: rgba(13,17,23,0.92) !important;
  border: 1px solid rgba(255,176,0,0.35) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.ts-label { color: #FFB000; letter-spacing: 0.12em; }
#imageryDate {
  background: rgba(0,0,0,0.6); color: #00E5D4;
  border: 1px solid rgba(255,176,0,0.4);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 4px;
}
.ts-btn {
  background: transparent; border: 1px solid rgba(255,176,0,0.4);
  color: #FFB000; padding: 2px 6px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.ts-btn:hover { background: rgba(255,176,0,0.15); }

/* Right panel (Entity Details) — slots BELOW audit monitor, has close button via JS */
.right-panel {
  position: fixed !important;
  top: 76px !important;
  right: 248px !important;
  bottom: 270px !important;
  width: 320px !important;
  background: rgba(13,17,23,0.95) !important;
  border: 1px solid rgba(0,229,212,0.45) !important;  /* cyan border = active entity */
  z-index: 870 !important;
  overflow-y: auto;
  padding: 0 !important;
}
.right-panel .panel-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0,229,212,0.1);
  border-bottom: 1px solid rgba(0,229,212,0.3);
  color: #00E5D4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
}
.right-panel .field {
  padding: 6px 12px;
  border-bottom: 1px dotted rgba(255,176,0,0.15);
}
.right-panel .field-label { color: #6C7886; font-size: 9px; letter-spacing: 0.1em; }
.right-panel .field-value { color: #fff; font-size: 12px; margin-top: 2px; word-break: break-all; }

/* Intel ticker — make it READABLE by putting it ABOVE bottom HUD with full opacity */
.intel-ticker {
  position: fixed !important;
  left: 0 !important; right: 0 !important;
  bottom: 188px !important;
  height: 32px !important;
  background: rgba(0,0,0,0.92) !important;
  border-top: 1px solid rgba(255,176,0,0.35) !important;
  border-bottom: 1px solid rgba(255,176,0,0.35) !important;
  z-index: 935 !important;
  display: flex; align-items: center;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.intel-ticker-label {
  background: #FFB000; color: #000;
  padding: 0 12px; height: 100%;
  display: flex; align-items: center;
  font-weight: 700; letter-spacing: 0.15em; font-size: 10px;
  flex-shrink: 0;
}
.intel-ticker-track {
  white-space: nowrap;
  animation: tickerScroll 180s linear infinite;
  color: #C9D1D9;
  padding-left: 100%;
}
.intel-item {
  display: inline-block;
  margin-right: 32px;
  color: #C9D1D9;
}
.intel-item.critical { color: #FF3B30; font-weight: 600; }
.intel-item.warn { color: #FFB000; }
.intel-item.dim { color: #6C7886; }

/* Bottom HUD — only 1 row tall (not 160px), let intel ticker breathe */
.hud-bottom {
  bottom: 22px !important;
  height: 160px !important;
}

/* Audit monitor — top right corner */
.audit-monitor {
  top: 76px !important;
  right: 12px !important;
  width: 230px !important;
}

/* When entity panel is OPEN (body has .entity-active class), push intent box left */
body.entity-active .intent-box {
  right: 380px !important;
  width: 340px !important;
}

/* Default: intent box sits at right edge below audit monitor */
.intent-box {
  right: 12px !important;
}

/* Add a visible "MIN" hint to all collapsible headers */
.audit-monitor .audit-header::after,
.playback-panel .playback-header::after,
.intent-box .intent-header::after {
  content: '';
}

/* Ensure all close/collapse buttons are clearly clickable */
.audit-btn {
  cursor: pointer !important;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hide Cesium native InfoBox (we use our own right panel) */
.cesium-infoBox { display: none !important; }
.cesium-selection-wrapper { z-index: 700 !important; }

/* ════════════════════════════════════════════════════════════
   MADA v2.3.3 — FINAL LAYOUT (clean docked rails)
   Vertical zones (1920×1080):
     Top HUD (22-70)
     Top chips row: basemap + time-scrubber + display-mode (78-110)
     Left rail: Data Layers + Presets (76-880)
     Right rail TOP: Activity Monitor (76-440)
     Right rail MID: Ask MADA / Intent box (450-790)
     Right rail BTM hidden until entity selected: Entity Details (overlays MID)
     Bottom strip: Timeline Playback (810-850)
     Intel ticker (855-890)
     Bottom HUD stats (898-1058)
     Classification footer (1058-1080)
   ════════════════════════════════════════════════════════════ */

/* TOP CHIPS — basemap, time-scrubber */
.basemap-switcher  { top: 78px !important; left: 248px !important; }
#timeScrubber.time-scrubber { top: 78px !important; left: 600px !important; }

/* LEFT RAIL — data layers + presets */
.left-panel {
  top: 120px !important;
  bottom: 270px !important;
  left: 8px !important;
  width: 230px !important;
}

/* RIGHT RAIL — single column */
.audit-monitor {
  position: fixed !important;
  top: 120px !important;
  right: 12px !important;
  bottom: auto !important;
  width: 360px !important;
  height: 280px !important;
  z-index: 850 !important;
}
.audit-monitor.collapsed { height: 32px !important; }

.intent-box {
  position: fixed !important;
  top: 410px !important;     /* below audit monitor */
  right: 12px !important;
  bottom: 270px !important;
  width: 360px !important;
  height: auto !important;
  max-height: none !important;
  z-index: 850 !important;
}
.intent-box.collapsed { bottom: auto !important; height: 32px !important; }

/* Right entity-details panel — when active, COVERS the intent box */
.right-panel {
  top: 410px !important;
  bottom: 270px !important;
  right: 12px !important;
  width: 360px !important;
  z-index: 870 !important;   /* above intent box */
}

/* TIMELINE PLAYBACK — slim strip just above intel ticker */
.playback-panel {
  bottom: 230px !important;
  width: 700px !important;
  height: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.playback-panel.collapsed { height: 28px !important; }
.playback-panel .playback-body { padding: 4px 12px !important; display: flex; align-items: center; gap: 10px; }
.playback-panel .playback-controls { margin: 0 !important; flex-shrink: 0; }
.playback-panel .pb-scrubber { margin: 0 !important; flex: 1; }
.playback-panel .playback-ts { margin: 0 0 0 10px !important; flex-shrink: 0; min-width: 140px; text-align: right; }

/* INTEL TICKER — full-width, fully readable */
.intel-ticker {
  bottom: 188px !important;
  height: 32px !important;
}

/* BOTTOM HUD stat cards — single horizontal row */
.hud-bottom {
  bottom: 22px !important;
  height: 160px !important;
  padding: 12px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
}

/* Intent + Audit headers ALWAYS visible with clear collapse buttons */
.audit-header, .intent-header, .playback-header {
  flex-shrink: 0;
  background: rgba(255,176,0,0.12);
  cursor: default;
}
.audit-header > *, .intent-header > *, .playback-header > * {
  pointer-events: auto;
}

/* The collapse button [_] becomes [▼/▲] — clearer affordance */
.audit-btn[title="Collapse"]::before { content: ''; }

/* Make the bottom-row :has() selector that was breaking things harmless */
.intent-box, .right-panel { transition: right 0.2s; }

/* Display mode select on top-HUD: keep visible */
.mode-select {
  background: rgba(0,0,0,0.6); color: #FFB000;
  border: 1px solid rgba(255,176,0,0.4);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  padding: 3px 8px;
}

/* Final safety: kill any leftover floating elements with no specific class */
body > .basemap-btn { display: none !important; }

/* ════════════════════════════════════════════════════════════
   MADA v2.3.4 — FINAL LAYOUT OVERRIDE (highest specificity wins)
   Uses `body` prefix to outrank every earlier .intent-box rule.
   Viewport-aware: works at 1351×891 and 1920×1080.
   ════════════════════════════════════════════════════════════ */

/* SHARD NAVIGATOR — top HUD, between logo cluster and center badges */
.shard-nav {
  position: fixed;
  top: 32px;
  left: 380px;
  z-index: 950;
  font-family: 'JetBrains Mono', monospace;
}
.shard-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(0,229,212,0.1);
  border: 1px solid rgba(0,229,212,0.5);
  color: #00E5D4;
  font-family: inherit; font-size: 10px;
  letter-spacing: 0.15em;
  cursor: pointer;
  border-radius: 0;
  text-transform: uppercase;
}
.shard-trigger:hover { background: rgba(0,229,212,0.2); }
.shard-icon { font-size: 12px; }
.shard-chevron { font-size: 9px; opacity: 0.7; }
.shard-menu {
  position: absolute;
  top: 32px; left: 0;
  width: 320px;
  background: rgba(8, 12, 18, 0.97);
  border: 1px solid rgba(0,229,212,0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
}
.shard-menu-header,
.shard-menu-footer {
  padding: 8px 12px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #6C7886;
  background: rgba(255,176,0,0.06);
  border-bottom: 1px solid rgba(255,176,0,0.15);
}
.shard-menu-footer {
  border-bottom: none;
  border-top: 1px solid rgba(255,176,0,0.15);
  font-size: 8px;
  color: #4a5462;
}
.shard-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  color: #C9D1D9;
  text-decoration: none;
  font-size: 11px;
  border-bottom: 1px dotted rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.shard-item:hover { background: rgba(0,229,212,0.08); }
.shard-item.active { background: rgba(0,229,212,0.12); color: #00E5D4; }
.shard-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.shard-name { flex: 1; }
.shard-current {
  font-size: 8px; letter-spacing: 0.15em;
  color: #00E5D4; opacity: 0.7;
}
.shard-arrow { color: #6C7886; font-size: 10px; }

/* ──────────── LAYOUT (uses body prefix for win-rate) ──────────── */

/* Top HUD: ensure shard nav doesn't get covered */
body .hud-top { z-index: 940; }

/* Top chips row */
body .basemap-switcher { top: 78px !important; left: 248px !important; z-index: 700; }
body #timeScrubber.time-scrubber {
  top: 78px !important; bottom: auto !important;
  left: 500px !important; transform: none !important;
  z-index: 700;
}

/* LEFT RAIL */
body .left-panel {
  top: 120px !important; bottom: 270px !important;
  left: 8px !important; width: 222px !important;
  z-index: 800;
}

/* RIGHT RAIL — Activity Monitor on top, Intent below */
body .audit-monitor {
  position: fixed !important;
  top: 120px !important;
  right: 12px !important;
  bottom: auto !important;
  width: 340px !important;
  height: 260px !important;
  max-height: 260px !important;
  z-index: 850 !important;
}
body .audit-monitor.collapsed { height: 32px !important; max-height: 32px !important; }
body .audit-monitor .audit-body { max-height: 220px !important; overflow-y: auto !important; }

body .intent-box {
  position: fixed !important;
  top: 390px !important;
  right: 12px !important;
  bottom: 280px !important;
  left: auto !important;
  width: 340px !important;
  max-height: none !important;
  height: auto !important;
  z-index: 850 !important;
  transform: none !important;
}
body .intent-box.collapsed {
  top: 390px !important;
  bottom: auto !important;
  height: 32px !important;
}

/* Entity panel overlays the intent box */
body .right-panel {
  position: fixed !important;
  top: 390px !important;
  right: 12px !important;
  bottom: 280px !important;
  width: 340px !important;
  z-index: 870 !important;
  display: none;
}
body.entity-active .right-panel { display: block !important; }
body.entity-active .intent-box { right: 364px !important; width: 320px !important; }

/* TIMELINE — slim strip just above intel ticker, full width below rails */
body .playback-panel {
  position: fixed !important;
  bottom: 218px !important;
  top: auto !important;
  left: 252px !important;
  right: 12px !important;
  width: auto !important;
  height: 44px !important;
  transform: none !important;
  z-index: 820 !important;
}
body .playback-panel.collapsed { height: 28px !important; }

/* INTEL TICKER */
body .intel-ticker {
  position: fixed !important;
  bottom: 184px !important;
  left: 0 !important; right: 0 !important;
  height: 30px !important;
  z-index: 935 !important;
}

/* BOTTOM HUD */
body .hud-bottom {
  position: fixed !important;
  bottom: 22px !important;
  left: 0 !important; right: 0 !important;
  height: 158px !important;
  padding: 10px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
}

/* Responsive: narrower viewports — keep right rail items proportionate */
@media (max-width: 1500px) {
  body .audit-monitor { width: 300px !important; height: 240px !important; }
  body .intent-box { width: 300px !important; top: 370px !important; }
  body .right-panel { width: 300px !important; top: 370px !important; }
  body.entity-active .intent-box { right: 324px !important; width: 280px !important; }
  body .playback-panel { right: 324px !important; }
  body #timeScrubber.time-scrubber { left: 480px !important; }
}
@media (max-width: 1200px) {
  body .audit-monitor { width: 260px !important; }
  body .intent-box, body .right-panel { width: 260px !important; }
  body.entity-active .intent-box { right: 284px !important; width: 248px !important; }
  body .playback-panel { right: 284px !important; }
}

/* Kill any rule that drags intent box into the map center */
body .intent-box { margin: 0 !important; }

/* ════════════════════════════════════════════════════════════
   MADA-PRISM v3.0 — GLASSMORPHISM DOCTRINE
   Acuterium dictum: ALL panels = water/glass/transparent.
   Inspired by Erebus-CSE / Palantir.
   Source: style-13.css + style-20.css from latest Incident dashboard.
   ════════════════════════════════════════════════════════════ */

:root {
  --glass-cyan-bg: rgba(0, 229, 212, 0.04);
  --glass-cyan-border: rgba(0, 229, 212, 0.18);
  --glass-cyan-hover: rgba(0, 229, 212, 0.08);
  --glass-amber-border: rgba(255, 176, 0, 0.22);
  --glass-amber-bg: rgba(255, 176, 0, 0.04);
  --glass-blur: blur(18px) saturate(140%);
  --glass-blur-strong: blur(24px) saturate(160%);
  --text-cyan: rgba(0, 229, 212, 0.90);
  --text-cyan-dim: rgba(0, 229, 212, 0.55);
  --text-dim: rgba(201, 209, 217, 0.65);
}

/* Override panel backgrounds to glassmorphic — body prefix wins over earlier rules */
body .hud-bar,
body .audit-monitor,
body .playback-panel,
body .intent-box,
body .right-panel,
body .left-panel,
body .basemap-switcher,
body #timeScrubber.time-scrubber,
body .shard-menu {
  background: var(--glass-cyan-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-cyan-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 32px rgba(0,0,0,0.35) !important;
}

/* Top + bottom HUD: slightly darker base so badges remain legible */
body .hud-top, body .hud-bottom {
  background: linear-gradient(180deg, rgba(10,14,23,0.65) 0%, rgba(10,14,23,0.40) 100%) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  border-top: 1px solid var(--glass-cyan-border) !important;
  border-bottom: 1px solid var(--glass-cyan-border) !important;
}

/* Stat cards on bottom HUD: individual glass panels */
body .stat-card {
  background: rgba(0, 229, 212, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-cyan-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Panel headers — translucent amber bars */
body .panel-header,
body .audit-header,
body .intent-header,
body .playback-header,
body .panel-header-row {
  background: rgba(255, 176, 0, 0.06) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--glass-amber-border) !important;
  color: #FFB000 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

/* Intel ticker: glass strip */
body .intel-ticker {
  background: rgba(10, 14, 23, 0.55) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  border-top: 1px solid var(--glass-amber-border) !important;
  border-bottom: 1px solid var(--glass-amber-border) !important;
}

/* Layer toggle hover: glass shimmer */
body .layer-toggle:hover { background: var(--glass-cyan-hover) !important; }
body .preset-btn {
  background: rgba(255,176,0,0.05) !important;
  border: 1px solid var(--glass-amber-border) !important;
  backdrop-filter: blur(8px);
  color: #FFB000;
}
body .preset-btn:hover { background: rgba(255,176,0,0.12) !important; }

/* Shard menu: extra-glassy */
body .shard-menu {
  background: rgba(8, 12, 18, 0.55) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
  border: 1px solid rgba(0,229,212,0.30) !important;
}
body .shard-item { background: transparent !important; }
body .shard-item:hover { background: var(--glass-cyan-hover) !important; }

/* Classification bars: solid (these MUST be opaque per security UX) */
body .classification-bar { background: #FFB000 !important; color: #000 !important; }

/* Page router nav (added below) */
body .page-nav {
  background: rgba(0, 229, 212, 0.04) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-cyan-border) !important;
}


/* ════════════════════════════════════════════════════════════
   MADA-PRISM v3.1 — RESPONSIVE / ACCESSIBILITY / CONTRAST
   - Intel ticker docked inside bottom HUD ABOVE stat cards
   - All panels centered & adaptive (clamp + percentage widths)
   - Touch action: pinch-zoom enabled
   - Font size accessibility slider (sm / md / lg / xl)
   - Contrast fixes for all text/background combos
   ════════════════════════════════════════════════════════════ */

/* Font-size scale — applied via [data-fontscale] on <html> */
html { --fs-base: 1; touch-action: manipulation; }
html[data-fontscale="sm"] { --fs-base: 0.88; }
html[data-fontscale="md"] { --fs-base: 1; }
html[data-fontscale="lg"] { --fs-base: 1.18; }
html[data-fontscale="xl"] { --fs-base: 1.36; }

body, body * {
  font-size: calc(1em * var(--fs-base, 1));
}
/* Cesium widget internal — leave alone */
.cesium-widget, .cesium-widget * { font-size: revert !important; }

/* Enable pinch-zoom on touch devices for the globe */
body { touch-action: pan-x pan-y pinch-zoom; }
#cesiumContainer { touch-action: none; /* Cesium handles its own gestures */ }

/* Intel ticker INSIDE bottom HUD, just above stat cards */
body .intel-ticker {
  position: fixed !important;
  bottom: 180px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(320px, 92vw, 1800px) !important;
  height: 30px !important;
  background: rgba(10, 14, 23, 0.72) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  border: 1px solid rgba(255, 176, 0, 0.30) !important;
  border-radius: 0;
  z-index: 935 !important;
  display: flex; align-items: center;
}
body .intel-ticker .intel-ticker-label {
  background: var(--p-amber, #FFB000) !important;
  color: #0a0e17 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  font-size: 10px !important;
  padding: 0 14px !important;
  text-shadow: none !important;
}
body .intel-item, body .intel-ticker-track { color: #E8EFF7 !important; }
body .intel-item.warn { color: #FFB000 !important; }
body .intel-item.critical { color: #FF6B6B !important; }
body .intel-item.dim { color: #9BA8B5 !important; }

/* Bottom HUD: centered, responsive max-width, stat cards adaptive */
body .hud-bottom {
  position: fixed !important;
  bottom: 22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(320px, 96vw, 1800px) !important;
  right: auto !important;
  height: auto !important;
  min-height: 90px !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  border-radius: 0;
}
body .hud-bottom .stat-card {
  flex: 1 1 130px;
  max-width: 200px;
  min-width: 110px;
  padding: 10px 12px !important;
  background: rgba(0, 229, 212, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 229, 212, 0.22) !important;
  text-align: center;
}
body .hud-bottom .stat-card .stat-label {
  display: block !important;
  color: #E8EFF7 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 4px !important;
  opacity: 0.85;
}
body .hud-bottom .stat-card .stat-value {
  display: block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Top + bottom HUD centered (top stays full-width but content centered) */
body .hud-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 16px !important;
}

/* ─────────── CONTRAST FIXES ─────────── */

/* Basemap dropdown / time scrubber — dark text on dark bg fix */
body .basemap-switcher,
body #timeScrubber.time-scrubber {
  color: #E8EFF7 !important;
}
body .basemap-switcher select,
body #timeScrubber input,
body #timeScrubber select,
body .basemap-switcher .ts-label,
body #timeScrubber .ts-label {
  background: rgba(0, 0, 0, 0.55) !important;
  color: #FFD96B !important;
  border: 1px solid rgba(255, 176, 0, 0.45) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
}
body .basemap-switcher select option,
body #timeScrubber select option {
  background: #0a0e17 !important;
  color: #FFD96B !important;
}
body #timeScrubber .ts-btn, body .basemap-switcher .basemap-btn {
  background: rgba(0, 0, 0, 0.50) !important;
  color: #FFB000 !important;
  border: 1px solid rgba(255, 176, 0, 0.40) !important;
}

/* Timeline playback contrast (was unreadable in screenshot) */
body .playback-panel { color: #E8EFF7 !important; }
body .playback-panel .playback-title,
body .playback-panel .playback-ts { color: #FFD96B !important; }
body .playback-panel .pb-scrubber { accent-color: #FFB000; }
body .playback-panel .playback-controls button {
  background: rgba(255, 176, 0, 0.12);
  color: #FFB000;
  border: 1px solid rgba(255, 176, 0, 0.4);
}

/* DIARAN-MOE intent box contrast */
body .intent-box, body .intent-box * { color: #E8EFF7; }
body .intent-title { color: #FFB000 !important; }
body .intent-routing { color: #9BD3E0 !important; }
body .intent-starter { color: #9BD3E0 !important; }
body .intent-placeholder { color: #C9D1D9 !important; }
body .intent-input {
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  border: 1px solid rgba(0, 229, 212, 0.30) !important;
}

/* Activity monitor rows: readable contrast */
body .audit-monitor .audit-row,
body .audit-monitor .audit-row * { color: #E8EFF7 !important; }
body .audit-monitor .audit-action { color: #FFB000 !important; }
body .audit-monitor .audit-target { color: #00E5D4 !important; }
body .audit-monitor .audit-ts { color: #9BA8B5 !important; }
body .audit-monitor .audit-actor { color: #FFD96B !important; }

/* Left panel labels */
body .left-panel .panel-header { color: #FFB000 !important; }
body .left-panel .layer-toggle { color: #E8EFF7 !important; }
body .left-panel .preset-btn { color: #FFD96B !important; }

/* Imagery date / chips text */
body .imagery-date-badge { color: #9BD3E0 !important; }
body .imagery-date-badge.live { color: #4AE9A0 !important; }

/* ─────────── ACCESSIBILITY TOOLBAR ─────────── */
.a11y-toolbar {
  position: fixed;
  bottom: 130px;
  right: 14px;
  z-index: 940;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(10, 14, 23, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 229, 212, 0.25);
  padding: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.a11y-toolbar button {
  background: rgba(0, 229, 212, 0.06);
  color: #00E5D4;
  border: 1px solid rgba(0, 229, 212, 0.30);
  padding: 5px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  min-width: 38px;
  min-height: 32px;     /* touch-friendly */
  transition: all 0.15s;
}
.a11y-toolbar button:hover, .a11y-toolbar button.active {
  background: rgba(0, 229, 212, 0.18);
  color: #fff;
  border-color: #00E5D4;
}
.a11y-toolbar .a11y-label {
  color: #9BA8B5;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-align: center;
  margin-bottom: 2px;
}

/* ─────────── RESPONSIVE BREAKPOINTS ─────────── */

/* Desktop large (>1500px) — already handled in v3.0 */

/* Tablet landscape / smaller desktop (1200–1500px) */
@media (max-width: 1500px) {
  body .audit-monitor { width: clamp(260px, 22vw, 320px) !important; height: 240px !important; }
  body .intent-box { width: clamp(260px, 22vw, 320px) !important; top: 380px !important; }
  body .left-panel { width: clamp(180px, 16vw, 230px) !important; }
  body .playback-panel { width: clamp(400px, 56vw, 700px) !important; }
  body .hud-bottom .stat-card { flex-basis: 110px; min-width: 100px; }
  body .hud-bottom .stat-card .stat-value { font-size: 20px !important; }
}

/* Tablet portrait / large phone (768–1200px): stack rails as collapsible bottom sheets */
@media (max-width: 1200px) {
  body .left-panel,
  body .audit-monitor,
  body .intent-box {
    width: clamp(220px, 32vw, 280px) !important;
  }
  body .audit-monitor { height: 200px !important; }
  body .intent-box { top: auto !important; bottom: 260px !important; height: clamp(180px, 28vh, 280px) !important; }
  body .playback-panel { width: 92vw !important; left: 4vw !important; right: 4vw !important; transform: none !important; }
  body .hud-top .hud-center { display: none; }
  body .page-nav { left: 50% !important; transform: translateX(-50%); }
}

/* Mobile (≤768px) — single column, top HUD compact, rails become drawers */
@media (max-width: 768px) {
  html { --fs-base: 0.95; }
  body .hud-top { padding: 0 8px !important; }
  body .hud-top .hud-title { font-size: 11px !important; }
  body .hud-top .badge { font-size: 9px !important; padding: 2px 5px !important; }
  body .hud-top .hud-clock { font-size: 10px !important; }
  body .shard-nav { left: 4px !important; }
  body .shard-trigger { padding: 4px 7px !important; font-size: 9px !important; }

  /* Convert side rails to slide-in drawers */
  body .left-panel,
  body .audit-monitor,
  body .intent-box {
    position: fixed !important;
    width: 88vw !important;
    max-width: 360px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 920 !important;
  }
  body .left-panel    { top: 120px !important; bottom: auto !important; height: 50vh !important; display: none !important; }
  body .audit-monitor { top: 120px !important; bottom: auto !important; height: 50vh !important; display: none !important; }
  body .intent-box    { top: 120px !important; bottom: auto !important; height: 50vh !important; display: none !important; }
  body.show-layers   .left-panel    { display: block !important; }
  body.show-audit    .audit-monitor { display: block !important; }
  body.show-intent   .intent-box    { display: block !important; }

  /* Mobile drawer toggle bar */
  .mobile-drawer-bar { display: flex !important; }

  /* Compact bottom HUD: scrollable strip */
  body .hud-bottom {
    width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    padding: 8px 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  body .hud-bottom .stat-card {
    flex: 0 0 110px !important;
    min-width: 110px !important;
    padding: 8px 10px !important;
  }
  body .hud-bottom .stat-card .stat-value { font-size: 18px !important; }
  body .intel-ticker { bottom: 156px !important; width: 96vw !important; height: 26px !important; }
  body .playback-panel { bottom: 196px !important; height: 36px !important; }
  body .basemap-switcher { left: 8px !important; }
  body #timeScrubber.time-scrubber { left: auto !important; right: 8px !important; top: 78px !important; }

  /* Touch target safety: 44px min for all buttons */
  body button, body .preset-btn, body select {
    min-height: 36px !important;
  }

  /* A11y toolbar smaller */
  .a11y-toolbar { bottom: 100px; right: 6px; padding: 4px; }
  .a11y-toolbar button { min-width: 32px; padding: 4px 7px; font-size: 10px; }
}

/* Mobile drawer bar — visible only on mobile */
.mobile-drawer-bar {
  display: none;
  position: fixed;
  top: 70px;
  left: 0; right: 0;
  z-index: 935;
  background: rgba(10, 14, 23, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 229, 212, 0.20);
  padding: 6px 8px;
  gap: 6px;
  justify-content: space-around;
}
.mobile-drawer-bar button {
  flex: 1;
  background: rgba(0, 229, 212, 0.05);
  color: #00E5D4;
  border: 1px solid rgba(0, 229, 212, 0.25);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 7px 4px;
  min-height: 38px;
  cursor: pointer;
}
.mobile-drawer-bar button.active { background: rgba(0, 229, 212, 0.20); color: #fff; }


/* =================================================================
   MADA-PRISM v3.3 — AUTHORITATIVE LAYOUT RESET
   Single source of truth. Supersedes all prior !important rules.
   Zone math (vh-locked):
     0  – 22px         classification top
     22 – 70px         top HUD strip (logo + shard nav + page nav + clock + lang)
     78 – 130px        chips row (basemap LEFT 14px · time-scrubber RIGHT 14px)
     140 – calc(100vh - 290px)  left rail (Data Layers + Presets)
     140 – calc(100vh - 290px)  right rail (Activity + Intent OR PRISM)
     bottom 240px      timeline playback strip (centered)
     bottom 198px      intel ticker (full width inside bottom HUD)
     bottom 22 – 195px bottom HUD stat cards row
     bottom 0 – 22px   classification footer
   ================================================================= */

/* ── 1. PRISM PANEL: full-height right drawer; replaces right rail ── */
body .prism-panel{
  position:fixed!important;
  top:140px!important;
  right:14px!important;
  bottom:250px!important;
  max-height:none!important;
  width:360px!important;
  z-index:80!important;          /* above Activity Monitor + Intent box */
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.32)!important;
  box-shadow:0 8px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06)!important;
}
body .prism-panel.is-open ~ #rightRail,
body.prism-open #activityMonitor,
body.prism-open #intentBox{ display:none!important; }   /* hide right-rail panels while PRISM open */

/* ── 2. BASEMAP CHIP: top-left under top HUD, fixed width ── */
body .basemap-switcher,
body #basemapSwitcher{
  position:fixed!important;
  top:84px!important;
  left:14px!important;
  bottom:auto!important;
  right:auto!important;
  transform:none!important;
  width:236px!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 12px!important;
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:8px!important;
  z-index:60!important;
  font-family:'JetBrains Mono',monospace!important;
}
body .basemap-switcher select,
body #basemapSwitcher select{
  flex:1!important;
  background:rgba(0,0,0,0.55)!important;
  color:#FFD96B!important;
  border:1px solid rgba(255,217,107,0.32)!important;
  border-radius:5px!important;
  padding:4px 8px!important;
  font:600 11px 'JetBrains Mono',monospace!important;
  letter-spacing:.08em!important;
}

/* ── 3. TIME SCRUBBER: top-right under top HUD, mirrored layout ── */
body #timeScrubber,
body .time-scrubber{
  position:fixed!important;
  top:84px!important;
  right:14px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:auto!important;
  max-width:560px!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 12px!important;
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:8px!important;
  z-index:60!important;
}

/* ── 4. LEFT RAIL: Data Layers + Presets, below basemap chip ── */
body .left-panel,
body #leftPanel{
  position:fixed!important;
  top:140px!important;
  left:14px!important;
  bottom:250px!important;
  width:236px!important;
  max-height:none!important;
  overflow-y:auto!important;
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:10px!important;
  padding:12px 14px!important;
  z-index:50!important;
}

/* ── 5. RIGHT RAIL: Activity Monitor (top) + Intent Box (bottom) ── */
body #activityMonitor{
  position:fixed!important;
  top:140px!important;
  right:14px!important;
  width:340px!important;
  height:260px!important;
  z-index:50!important;
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:10px!important;
}
body #intentBox{
  position:fixed!important;
  top:412px!important;             /* 140 + 260 + 12 gap */
  right:14px!important;
  width:340px!important;
  bottom:250px!important;
  max-height:none!important;
  z-index:50!important;
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:10px!important;
}

/* ── 6. TIMELINE PLAYBACK: centered band, above ticker ── */
body #playbackStrip,
body .timeline-playback{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:240px!important;
  transform:translateX(-50%)!important;
  width:clamp(420px,70vw,1100px)!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 14px!important;
  background:rgba(8,14,20,0.46)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:9px!important;
  z-index:55!important;
}

/* ── 7. INTEL TICKER: full-width band sitting just above bottom HUD ── */
body .intel-ticker,
body #intelTicker{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:198px!important;
  top:auto!important;
  width:100vw!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  background:linear-gradient(180deg,rgba(8,14,20,0.65),rgba(0,0,0,0.78))!important;
  backdrop-filter:blur(14px)!important;
  border-top:1px solid rgba(255,59,48,0.30)!important;
  border-bottom:1px solid rgba(0,229,212,0.18)!important;
  z-index:45!important;
  overflow:hidden!important;
}
body .intel-ticker-label{
  flex:0 0 auto!important;
  background:#FF3B30!important;
  color:#000!important;
  font:700 10px 'JetBrains Mono',monospace!important;
  letter-spacing:.18em!important;
  padding:0 14px!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
}
body .intel-ticker-track{
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:24px!important;
  white-space:nowrap!important;
  padding-left:18px!important;
  color:#E8EFF7!important;
  font:500 11px 'JetBrains Mono',monospace!important;
  animation:tickerScroll 180s linear infinite!important;
}

/* ── 8. BOTTOM HUD: stat-cards row, centered, fills below ticker ── */
body #bottomHud,
body .hud-bottom{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:22px!important;
  transform:translateX(-50%)!important;
  width:clamp(320px,96vw,1800px)!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:10px!important;
  padding:10px 14px!important;
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:12px!important;
  z-index:50!important;
}
body .stat-card{
  flex:0 0 auto!important;
  min-width:108px!important;
  padding:8px 14px!important;
  background:rgba(0,0,0,0.32)!important;
  border:1px solid rgba(0,229,212,0.18)!important;
  border-radius:8px!important;
  text-align:center!important;
}

/* ── 9. ACCESSIBILITY TOOLBAR: stay clear of right rail ── */
body #a11yBar,
body .a11y-bar{
  position:fixed!important;
  right:14px!important;
  bottom:300px!important;            /* above bottom HUD + ticker */
  top:auto!important;
  left:auto!important;
  z-index:90!important;
}

/* ── 10. Hide Cesium's default timeline + animation widgets — we have our own ── */
body .cesium-viewer-timelineContainer,
body .cesium-viewer-animationContainer{ display:none!important; }

/* ── 11. Mobile collapse (≤900px): rails become bottom-anchored drawers ── */
@media (max-width:900px){
  body .left-panel, body #leftPanel,
  body #activityMonitor, body #intentBox, body .prism-panel{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    top:auto!important;
    bottom:280px!important;
    max-height:40vh!important;
    overflow-y:auto!important;
  }
  body #activityMonitor{ bottom:540px!important; height:auto!important; max-height:34vh!important; }
  body .basemap-switcher{ width:calc(50% - 18px)!important; }
  body #timeScrubber{ width:calc(50% - 18px)!important; max-width:none!important; }
  body #playbackStrip{ width:96vw!important; bottom:248px!important; }
  body .intel-ticker{ bottom:206px!important; }
  body #bottomHud{ width:96vw!important; gap:6px!important; }
  body .stat-card{ min-width:80px!important; padding:6px 8px!important; font-size:10px!important; }
}

/* =================================================================
   v3.3.1 — Specificity patch: defeat earlier #timeScrubber.time-scrubber
   ================================================================= */
body #timeScrubber.time-scrubber{
  position:fixed!important;
  top:84px!important;
  right:14px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:auto!important;
  max-width:560px!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 12px!important;
  background:rgba(8,14,20,0.42)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  border:1px solid rgba(0,229,212,0.22)!important;
  border-radius:8px!important;
  z-index:60!important;
}

/* Intel ticker — re-assert above timeline (was getting hidden behind it) */
body div.intel-ticker,
body div#intelTicker{
  position:fixed!important;
  bottom:198px!important;
  z-index:65!important;       /* > timeline (55) so it always renders */
}

/* Timeline Playback — push DOWN to bottom 150 so it sits BELOW the ticker.
   Order top-to-bottom: PRISM-row → ticker (198) → timeline (150) → bottomHUD (22) */
body #playbackStrip,
body .timeline-playback{
  bottom:150px!important;
  z-index:55!important;
}

/* Seismic ticker / any other stray bottom text — keep clear of the playback */
body #seismicTicker,
body .seismic-ticker{
  position:fixed!important;
  left:14px!important;
  bottom:540px!important;       /* well above the playback band */
  max-width:280px!important;
  font-size:10px!important;
  background:rgba(8,14,20,0.42)!important;
  border:1px solid rgba(255,159,10,0.3)!important;
  border-radius:6px!important;
  padding:6px 10px!important;
  z-index:55!important;
  display:none!important;       /* hide by default — too noisy */
}

/* =================================================================
   MADA-PRISM v3.4 — CHAMELEON ADAPTIVE CONSUMPTION LAYER
   Every text + glass surface now reads tokens that chameleon-adaptive.js
   recomputes 0.25 Hz against pixel luma + ambient light + solar position.
   ================================================================= */

/* Three regime overrides — each panel reads var(--txt-primary), etc. */
html[data-chameleon] body{
  color: var(--txt-primary)!important;
}

/* Glass panels — universal */
html[data-chameleon] body .panel,
html[data-chameleon] body .side-panel,
html[data-chameleon] body .prism-panel,
html[data-chameleon] body .hud-bar,
html[data-chameleon] body #activityMonitor,
html[data-chameleon] body #intentBox,
html[data-chameleon] body #bottomHud,
html[data-chameleon] body #leftPanel,
html[data-chameleon] body #rightPanel,
html[data-chameleon] body .basemap-switcher,
html[data-chameleon] body #timeScrubber,
html[data-chameleon] body #playbackStrip,
html[data-chameleon] body .timeline-playback,
html[data-chameleon] body .intel-ticker,
html[data-chameleon] body .stat-card{
  background: var(--glass-bg)!important;
  border-color: var(--glass-border)!important;
  color: var(--txt-primary)!important;
  box-shadow: var(--shadow)!important;
}

/* Headers, labels, accents */
html[data-chameleon] body .panel-header,
html[data-chameleon] body .hud-title,
html[data-chameleon] body .stat-label,
html[data-chameleon] body .ts-label,
html[data-chameleon] body .intel-ticker-label{
  color: var(--txt-accent)!important;
}

/* Secondary / muted text */
html[data-chameleon] body .panel-sub,
html[data-chameleon] body .activity-source,
html[data-chameleon] body .prism-pillar-hint,
html[data-chameleon] body .prism-footnote{
  color: var(--txt-muted)!important;
}

/* Input controls — dropdowns, date pickers, buttons inside chips */
html[data-chameleon] body .basemap-switcher select,
html[data-chameleon] body #basemapSwitcher select,
html[data-chameleon] body #timeScrubber input,
html[data-chameleon] body #timeScrubber select,
html[data-chameleon] body #playbackStrip select,
html[data-chameleon] body .mode-select,
html[data-chameleon] body .lang-btn{
  background: rgba(0,0,0, calc(0.55 - var(--luma, 0) * 0.45))!important;
  color: var(--txt-primary)!important;
  border-color: var(--glass-border)!important;
}
html[data-chameleon="light"] body .basemap-switcher select,
html[data-chameleon="light"] body #timeScrubber input,
html[data-chameleon="light"] body #timeScrubber select,
html[data-chameleon="light"] body .mode-select,
html[data-chameleon="light"] body .lang-btn{
  background: rgba(255,255,255,0.78)!important;
  color: var(--txt-primary)!important;
  border-color: var(--glass-border)!important;
  color-scheme: light!important;
}
html[data-chameleon="dark"] body input[type=date],
html[data-chameleon="dark"] body select{ color-scheme: dark!important; }

/* Stat values — primary text */
html[data-chameleon] body .stat-value{ color: var(--txt-primary)!important; }
html[data-chameleon] body .stat-card{ color: var(--txt-primary)!important; }

/* Page nav buttons (top HUD) */
html[data-chameleon] body .page-nav .page-btn{
  color: var(--txt-secondary)!important;
  border-color: var(--glass-border)!important;
}
html[data-chameleon] body .page-nav .page-btn.active{
  color: var(--txt-accent)!important;
  background: rgba(0,0,0, calc(0.30 - var(--luma, 0) * 0.20))!important;
}

/* Intel ticker items */
html[data-chameleon] body .intel-ticker-track,
html[data-chameleon] body .intel-item{ color: var(--txt-primary)!important; }
html[data-chameleon] body .intel-item.dim{ color: var(--txt-muted)!important; }

/* Cesium credits / info-box — high contrast against light basemaps */
html[data-chameleon="light"] body .cesium-credit-textContainer,
html[data-chameleon="light"] body .cesium-credit-textContainer *,
html[data-chameleon="light"] body .cesium-infoBox-title,
html[data-chameleon="light"] body .cesium-infoBox-description{
  color: var(--txt-primary)!important;
  text-shadow: 0 0 4px rgba(255,255,255,0.8)!important;
}

/* Activity Monitor rows */
html[data-chameleon] body .activity-row{ color: var(--txt-secondary)!important; }
html[data-chameleon] body .activity-row .a-ts{ color: var(--txt-muted)!important; }

/* PRISM bar fills stay color-cycled but tracks adapt */
html[data-chameleon] body .prism-bar-track{
  background: rgba(0,0,0, calc(0.20 - var(--luma, 0) * 0.15))!important;
}
html[data-chameleon="light"] body .prism-bar-track{
  background: rgba(10,22,40,0.12)!important;
}

/* Chameleon toolbar styling */
html[data-chameleon] body .a11y-bar{
  background: var(--glass-bg)!important;
  border: 1px solid var(--glass-border)!important;
  border-radius: 10px!important;
  padding: 8px 6px!important;
  display: flex!important;
  flex-direction: column!important;
  gap: 4px!important;
  backdrop-filter: blur(18px) saturate(140%)!important;
}
html[data-chameleon] body .cham-btn,
html[data-chameleon] body .a11y-btn{
  width: 32px!important;
  height: 28px!important;
  background: rgba(0,0,0, calc(0.35 - var(--luma, 0) * 0.25))!important;
  border: 1px solid var(--glass-border)!important;
  color: var(--txt-primary)!important;
  font: 700 11px 'JetBrains Mono',monospace!important;
  border-radius: 6px!important;
  cursor: pointer!important;
}
html[data-chameleon] body .cham-btn.active,
html[data-chameleon] body .a11y-btn.active{
  background: var(--txt-accent)!important;
  color: #000!important;
  border-color: var(--txt-accent)!important;
}

/* Live ambient bar — small subtle luminance indicator in top HUD (optional) */
html[data-chameleon] body::after{
  content: '';
  position: fixed;
  top: 22px; left: 0;
  height: 1px;
  width: calc(var(--luma, 0.5) * 100vw);
  background: linear-gradient(90deg, transparent, var(--txt-accent), transparent);
  opacity: 0.35;
  pointer-events: none;
  transition: width 1.2s ease;
  z-index: 9999;
}

/* =================================================================
   v3.4.1 — Chameleon refinements: HUD bar legibility + semantic colors
   ================================================================= */

/* Classification banners (top + bottom yellow strips) — keep gold bg
   but flip text to black in light mode for legibility. */
html[data-chameleon="light"] body .classification-banner,
html[data-chameleon="light"] body #classificationTop,
html[data-chameleon="light"] body #classificationBottom{
  color: #000!important;
  font-weight: 800!important;
}

/* Top HUD bar — invert text colour to dark in light mode */
html[data-chameleon="light"] body .hud-top,
html[data-chameleon="light"] body .hud-top *{
  color: var(--txt-primary)!important;
}
html[data-chameleon="light"] body .hud-top .hud-title{
  color: var(--txt-accent)!important;
}
html[data-chameleon="light"] body .hud-top .badge,
html[data-chameleon="light"] body .hud-top button{
  background: rgba(255,255,255,0.55)!important;
  border-color: var(--glass-border)!important;
  color: var(--txt-primary)!important;
}

/* Preserve semantic indicator colors regardless of theme */
html[data-chameleon] body .flight-color,
html[data-chameleon] body .stat-label.flight-color{ color: #00E5D4!important; }
html[data-chameleon] body .military-color,
html[data-chameleon] body .stat-label.military-color{ color: #FF3B30!important; }
html[data-chameleon] body .maritime-color,
html[data-chameleon] body .stat-label.maritime-color{ color: #C9A84C!important; }
html[data-chameleon] body .sat-color,
html[data-chameleon] body .stat-label.sat-color{ color: #7B68EE!important; }

/* Light-mode: stat-cards need darker bg or color-coded labels become illegible */
html[data-chameleon="light"] body .stat-card{
  background: rgba(255,255,255,0.78)!important;
  color: var(--txt-primary)!important;
}
html[data-chameleon="light"] body .stat-value{ color: #0A1628!important; font-weight: 800!important; }

/* THREAT LEVEL CRITICAL — must stay red in every theme */
html[data-chameleon] body .threat-critical,
html[data-chameleon] body .stat-value.critical{
  color: #D32F2F!important;
  font-weight: 800!important;
  text-shadow: 0 0 1px rgba(0,0,0,0.18)!important;
}

/* Twilight (amber) — soften pure white text to amber-cream for ergonomics */
html[data-chameleon="twilight"] body .hud-top *,
html[data-chameleon="twilight"] body .panel-header{
  color: #FFE9B8!important;
}
html[data-chameleon="twilight"] body .hud-title{
  color: #FFD96B!important;
}

/* PRESET buttons — fix the disappearing text seen in light mode screenshot */
html[data-chameleon] body .preset-btn{
  background: rgba(0,0,0, calc(0.30 - var(--luma, 0) * 0.25))!important;
  border-color: var(--glass-border)!important;
  color: var(--txt-primary)!important;
}
html[data-chameleon="light"] body .preset-btn{
  background: rgba(14,126,114,0.10)!important;
  color: #0A1628!important;
  border-color: rgba(14,126,114,0.45)!important;
}
html[data-chameleon] body .preset-btn:hover{
  background: var(--txt-accent)!important;
  color: #000!important;
}

/* Seismic ticker that bleeds into the timeline — already hidden in v3.3 reset */
html[data-chameleon] body #seismicTicker,
html[data-chameleon] body .seismic-ticker{ display: none!important; }

/* =================================================================
   v3.5 — FINAL AUTHORITATIVE LAYOUT RESET (June 4, 2026)
   Kills all legacy translateX/left collisions. Uses html body for max
   specificity. Every floating element gets an explicit pinned zone.

   ZONE MAP (top → bottom):
     0 – 22px   classification banner top
     22 – 70px  HUD top bar
     84px       chip row (BASEMAP left · CHAMELEON center · IMAGERY right)
     130–170px  optional secondary row (a11y A−/A/A+/A++)
     map area   (Cesium)
     bottom-260px  TIMELINE PLAYBACK (floating, centered above ticker)
     bottom-202px  INTEL TICKER (full width)
     bottom-110px  STAT CARDS (.hud-bottom)
     bottom-22px   classification banner bottom
   ================================================================= */

/* --- 1. Chameleon horizontal bar (new in v3.5) --- */
html body #chameleonBar.chameleon-bar{
  position: fixed!important;
  top: 84px!important;
  left: 50%!important;
  transform: translateX(-50%)!important;
  display: flex!important;
  align-items: center!important;
  gap: 6px!important;
  padding: 6px 12px!important;
  background: var(--glass-bg, rgba(10,10,10,.82))!important;
  backdrop-filter: blur(14px) saturate(140%)!important;
  -webkit-backdrop-filter: blur(14px) saturate(140%)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.28))!important;
  border-radius: 10px!important;
  z-index: 750!important;
  font-family: 'JetBrains Mono', monospace!important;
}
html body #chameleonBar .cham-bar-label{
  font: 700 9px 'JetBrains Mono',monospace!important;
  letter-spacing: .18em!important;
  color: var(--txt-accent, #00E5D4)!important;
  padding-right: 4px!important;
  border-right: 1px solid var(--glass-border, rgba(0,229,212,.25))!important;
  margin-right: 4px!important;
}
html body #chameleonBar .cham-btn{
  width: 28px!important;
  height: 26px!important;
  border-radius: 5px!important;
  background: rgba(0,0,0,.35)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.28))!important;
  color: var(--txt-primary, #F2F7FC)!important;
  font: 700 11px 'JetBrains Mono',monospace!important;
  cursor: pointer!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
}
html body #chameleonBar .cham-btn.active{
  background: var(--txt-accent, #00E5D4)!important;
  color: #000!important;
  border-color: var(--txt-accent, #00E5D4)!important;
}

/* --- 2. BASEMAP switcher — pinned top-left chip row --- */
html body #basemapSwitcher.basemap-switcher{
  position: fixed!important;
  top: 84px!important;
  left: 14px!important;
  right: auto!important;
  bottom: auto!important;
  transform: none!important;
  display: flex!important;
  align-items: center!important;
  gap: 8px!important;
  padding: 6px 12px!important;
  background: var(--glass-bg, rgba(10,10,10,.82))!important;
  backdrop-filter: blur(14px) saturate(140%)!important;
  -webkit-backdrop-filter: blur(14px) saturate(140%)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.28))!important;
  border-radius: 10px!important;
  z-index: 750!important;
  max-width: 360px!important;
  font-family: 'JetBrains Mono', monospace!important;
}
html body #basemapSwitcher .basemap-label{
  font: 700 9px 'JetBrains Mono',monospace!important;
  letter-spacing: .18em!important;
  color: var(--txt-accent, #00E5D4)!important;
  white-space: nowrap!important;
}
html body #basemapSwitcher .basemap-select{
  background: rgba(0,0,0,.45)!important;
  color: var(--txt-primary, #F2F7FC)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.25))!important;
  border-radius: 5px!important;
  padding: 4px 8px!important;
  font: 600 10px 'JetBrains Mono',monospace!important;
  max-width: 180px!important;
}
html body #basemapSwitcher .imagery-date-badge{
  font: 600 9px 'JetBrains Mono',monospace!important;
  color: var(--txt-muted, #8A9BAA)!important;
  letter-spacing: .1em!important;
}

/* --- 3. IMAGERY DATE / time scrubber — pinned top-right chip row --- */
html body #timeScrubber.time-scrubber{
  position: fixed!important;
  top: 84px!important;
  right: 14px!important;
  left: auto!important;
  bottom: auto!important;
  transform: none!important;
  display: flex!important;
  align-items: center!important;
  gap: 6px!important;
  padding: 6px 12px!important;
  background: var(--glass-bg, rgba(10,10,10,.82))!important;
  backdrop-filter: blur(14px) saturate(140%)!important;
  -webkit-backdrop-filter: blur(14px) saturate(140%)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.28))!important;
  border-radius: 10px!important;
  z-index: 750!important;
  max-width: 380px!important;
  font-family: 'JetBrains Mono', monospace!important;
}
html body #timeScrubber .ts-label,
html body #timeScrubber .scrubber-label{
  font: 700 9px 'JetBrains Mono',monospace!important;
  letter-spacing: .18em!important;
  color: var(--txt-accent, #00E5D4)!important;
  white-space: nowrap!important;
}

/* --- 4. INTEL TICKER — full width, kill the -50% translateX bug --- */
html body #intelTicker.intel-ticker{
  position: fixed!important;
  bottom: 202px!important;
  left: 0!important;
  right: 0!important;
  width: auto!important;
  max-width: none!important;
  transform: none!important;
  margin: 0!important;
  height: 30px!important;
  z-index: 65!important;
  display: flex!important;
  align-items: center!important;
  overflow: hidden!important;
  background: var(--glass-bg, linear-gradient(180deg,rgba(10,10,10,.92),rgba(0,0,0,.95)))!important;
  border-top: 1px solid rgba(255,59,48,.3)!important;
  border-bottom: 1px solid var(--glass-border, rgba(0,229,212,.18))!important;
}
html body #intelTicker .intel-ticker-label{
  flex: 0 0 auto!important;
  background: #FF3B30!important;
  color: #000!important;
  font: 700 10px 'JetBrains Mono',monospace!important;
  letter-spacing: .18em!important;
  padding: 0 14px!important;
  height: 100%!important;
  display: flex!important;
  align-items: center!important;
}
html body #intelTicker .intel-ticker-track{
  display: flex!important;
  align-items: center!important;
  gap: 14px!important;
  white-space: nowrap!important;
  padding-left: 14px!important;
  animation: tickerScroll 180s linear infinite!important;
  color: var(--txt-primary, #E8EFF7)!important;
}

/* --- 5. TIMELINE PLAYBACK — float ABOVE ticker, centered, NOT mid-map --- */
html body #playbackPanel.playback-panel{
  position: fixed!important;
  bottom: 240px!important;
  left: 50%!important;
  right: auto!important;
  top: auto!important;
  transform: translateX(-50%)!important;
  width: 560px!important;
  max-width: 92vw!important;
  height: auto!important;
  min-height: 36px!important;
  padding: 8px 14px!important;
  background: var(--glass-bg, rgba(10,10,10,.85))!important;
  backdrop-filter: blur(14px) saturate(140%)!important;
  -webkit-backdrop-filter: blur(14px) saturate(140%)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.28))!important;
  border-radius: 10px!important;
  z-index: 70!important;
  display: flex!important;
  flex-direction: column!important;
  gap: 4px!important;
  color: var(--txt-primary, #F2F7FC)!important;
  font-family: 'JetBrains Mono', monospace!important;
}
html body #playbackPanel .playback-header{
  font: 700 10px 'JetBrains Mono',monospace!important;
  letter-spacing: .18em!important;
  color: var(--txt-accent, #00E5D4)!important;
  display: flex!important;
  justify-content: space-between!important;
  align-items: center!important;
  padding: 0!important;
  height: auto!important;
}
html body #playbackPanel .playback-body{
  display: flex!important;
  align-items: center!important;
  gap: 8px!important;
  padding: 0!important;
}
html body #playbackPanel.collapsed{ height: 28px!important; }
html body #playbackPanel.collapsed .playback-body{ display: none!important; }

/* --- 6. PRISM panel — make it dock cleanly to right edge without
       overlapping #activityMonitor + #intentBox right rail.
       Strategy: when PRISM opens, it gets right:14px width:360px
       and we add data-prism-open=true on body which collapses the
       right rail. --- */
html body #prismPanel.prism-panel{
  position: fixed!important;
  top: 130px!important;
  right: 14px!important;
  left: auto!important;
  bottom: 248px!important;
  width: 380px!important;
  max-height: none!important;
  height: auto!important;
  overflow-y: auto!important;
  z-index: 800!important;
  background: var(--glass-bg, rgba(10,10,10,.85))!important;
  backdrop-filter: blur(16px) saturate(140%)!important;
  -webkit-backdrop-filter: blur(16px) saturate(140%)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.32))!important;
  border-radius: 12px!important;
  padding: 14px!important;
  color: var(--txt-primary, #F2F7FC)!important;
}
/* Hide right rail + a11y bar when PRISM is open to remove obstruction */
html body.prism-open #auditMonitor,
html body.prism-open .audit-monitor,
html body.prism-open #activityMonitor,
html body.prism-open #intentBox,
html body.prism-open #a11yBar,
html body.prism-open .right-rail{
  display: none!important;
}

/* --- 7. A11Y bar (A−/A/A+/A++) — vertical strip moved DOWN
       so it doesn't collide with chameleon bar --- */
html body #a11yBar.a11y-bar{
  position: fixed!important;
  top: 130px!important;
  right: 14px!important;
  display: flex!important;
  flex-direction: column!important;
  gap: 4px!important;
  padding: 6px!important;
  background: var(--glass-bg, rgba(10,10,10,.78))!important;
  backdrop-filter: blur(14px)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.22))!important;
  border-radius: 8px!important;
  z-index: 740!important;
}
html body #a11yBar .a11y-btn,
html body #a11yBar button{
  width: 36px!important;
  height: 28px!important;
  background: rgba(0,0,0,.35)!important;
  border: 1px solid var(--glass-border, rgba(0,229,212,.25))!important;
  color: var(--txt-primary, #F2F7FC)!important;
  font: 700 11px 'JetBrains Mono',monospace!important;
  border-radius: 5px!important;
  cursor: pointer!important;
}

/* --- 8. Hide deprecated seismic ticker (already hidden in v3.4.1) --- */
html body #seismicTicker,
html body .seismic-ticker{ display: none!important; }

/* --- 9. Right rail must start BELOW the a11y bar to avoid collision --- */
html body #auditMonitor.audit-monitor,
html body #activityMonitor{
  position: fixed!important;
  top: 130px!important;
  right: 62px!important;  /* leave 48px gutter for a11y bar */
  width: 340px!important;
  max-height: 260px!important;
  z-index: 50!important;
}
html body #intentBox{
  position: fixed!important;
  top: calc(130px + 280px)!important;
  right: 62px!important;
  width: 340px!important;
  height: auto!important;
  max-height: 200px!important;  /* shrunk so it ends ≥15px above #intelTicker (bottom 198 → ticker top ≈622) */
  bottom: auto!important;
  z-index: 50!important;
}

/* --- 10. Light mode chameleon-bar text fix (parent vars handle it but
       backstop here so the buttons never go invisible). --- */
html[data-chameleon="light"] body #chameleonBar .cham-btn{
  background: rgba(255,255,255,0.55)!important;
  color: #0A1628!important;
  border-color: rgba(14,126,114,.45)!important;
}
html[data-chameleon="light"] body #chameleonBar .cham-bar-label{
  color: #0E7E72!important;
  border-right-color: rgba(14,126,114,.3)!important;
}
html[data-chameleon="light"] body #basemapSwitcher .basemap-label,
html[data-chameleon="light"] body #timeScrubber .ts-label,
html[data-chameleon="light"] body #timeScrubber .scrubber-label{
  color: #0E7E72!important;
}
html[data-chameleon="light"] body #basemapSwitcher .basemap-select{
  background: rgba(255,255,255,.7)!important;
  color: #0A1628!important;
}

/* =====================================================================
   S9 — UNIFIED GLASS MATERIAL SYSTEM (MADA · Baseera Platform)
   ─────────────────────────────────────────────────────────────────────
   Single source of truth for all glass surfaces. Tokens cascade from
   chameleon-adaptive.js (--glass-bg / --glass-border) and are extended
   here with rest/hover/active states, dual-border (warm-gold + cyan),
   blur intensities, and light-mode inversion.

   Doctrine: ACAI V2 + AUI V2 — liquid water glass. NEVER opaque.
   Boxes never obscure the geospatial canvas.

   Usage: add class="panel-glass" to any surface. Existing v3.5 reset
   rules with !important still win where they exist; this provides the
   baseline material for all new and unstyled surfaces, and adds the
   hover/active interaction states required for S10.
   ===================================================================== */
:root{
  /* ── Glass fill states (cascade-aware: read chameleon var when set) ── */
  --glass-bg-rest:   var(--glass-bg, rgba(8,14,28,0.42));
  --glass-bg-hover:  rgba(8,14,28,0.58);
  --glass-bg-active: rgba(8,14,28,0.72);

  /* ── Dual-border doctrine (warm-gold outer, cyan-cool inner accent) ── */
  --glass-border-warm: rgba(201,168,76,0.30);   /* C9A84C @ 0.30 */
  --glass-border-cool: var(--glass-border, rgba(0,229,212,0.28));
  --glass-border-w:    1px;

  /* ── Blur intensities ── */
  --glass-blur-soft:    blur(14px) saturate(135%);
  --glass-blur-default: blur(22px) saturate(140%);
  --glass-blur-strong:  blur(28px) saturate(160%);

  /* ── Shadow halo (depth without weight) ── */
  --glass-shadow-rest:  0 4px 16px rgba(0,0,0,0.18);
  --glass-shadow-hover: 0 8px 28px rgba(0,229,212,0.12), 0 4px 16px rgba(0,0,0,0.22);
  --glass-shadow-active:0 10px 32px rgba(201,168,76,0.18), 0 6px 20px rgba(0,0,0,0.26);

  /* ── Radius family ── */
  --glass-r-sm: 6px;
  --glass-r-md: 10px;
  --glass-r-lg: 14px;
}

/* Light-mode inversion (white-tint glass over light basemaps) */
html[data-chameleon="light"]{
  --glass-bg-rest:   rgba(245,250,255,0.55);
  --glass-bg-hover:  rgba(255,255,255,0.72);
  --glass-bg-active: rgba(255,255,255,0.85);
  --glass-border-warm: rgba(180,140,40,0.38);
  --glass-border-cool: rgba(14,126,114,0.38);
  --glass-shadow-rest:  0 4px 16px rgba(10,22,40,0.10);
  --glass-shadow-hover: 0 8px 28px rgba(14,126,114,0.16), 0 4px 16px rgba(10,22,40,0.12);
}

/* High-contrast: stronger borders, less translucency */
html[data-chameleon="high-contrast"]{
  --glass-bg-rest:   rgba(0,0,0,0.88);
  --glass-bg-hover:  rgba(0,0,0,0.92);
  --glass-bg-active: rgba(0,0,0,0.96);
  --glass-border-warm: #FFD96B;
  --glass-border-cool: #FFFFFF;
  --glass-border-w:    2px;
  --glass-blur-default: blur(8px) saturate(110%);
}

/* ── The unified glass utility ── */
.panel-glass{
  background: var(--glass-bg-rest);
  -webkit-backdrop-filter: var(--glass-blur-default);
  backdrop-filter: var(--glass-blur-default);
  border: var(--glass-border-w) solid var(--glass-border-cool);
  border-top-color: var(--glass-border-warm);  /* warm top edge */
  border-radius: var(--glass-r-md);
  box-shadow: var(--glass-shadow-rest);
  transition: background 240ms ease, border-color 240ms ease,
              box-shadow 240ms ease, transform 240ms ease;
  color: var(--txt-primary, #F2F7FC);
}
.panel-glass:hover{
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-warm);
  border-top-color: var(--glass-border-cool);
  box-shadow: var(--glass-shadow-hover);
}
.panel-glass.is-active,
.panel-glass:focus-within{
  background: var(--glass-bg-active);
  border-color: var(--glass-border-warm);
  box-shadow: var(--glass-shadow-active);
}

/* Variant: stronger blur for floating panels (PRISM, modals) */
.panel-glass.panel-glass--strong{
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
/* Variant: lighter blur for tickers / strips */
.panel-glass.panel-glass--soft{
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}

/* ── Auto-apply to canonical surface IDs (additive, non-destructive) ──
   v3.5 reset rules with !important still take precedence on properties
   they set; this provides the material for properties they don't touch
   (shadow, border-radius, transitions). */
#leftPanel,
#rightPanel,
#auditMonitor,
#intentBox,
#prismPanel,
#basemapSwitcher,
#timeScrubber,
#intelTicker,
#playbackStrip,
#chameleonBar,
#textPopup,
#dockBar,
.preset-btn,
.timeline-playback{
  transition: background 240ms ease, border-color 240ms ease,
              box-shadow 240ms ease, transform 180ms ease;
  box-shadow: var(--glass-shadow-rest);
}
#leftPanel:hover,
#rightPanel:hover,
#auditMonitor:hover,
#intentBox:hover,
#prismPanel:hover,
#basemapSwitcher:hover,
#timeScrubber:hover,
#playbackStrip:hover,
#chameleonBar:hover{
  box-shadow: var(--glass-shadow-hover);
}

/* PRISM gets strong blur because it's a focused workspace */
#prismPanel{
  -webkit-backdrop-filter: var(--glass-blur-strong) !important;
  backdrop-filter: var(--glass-blur-strong) !important;
}
/* Tickers get soft blur because they're decorative strips */
#intelTicker{
  -webkit-backdrop-filter: var(--glass-blur-soft) !important;
  backdrop-filter: var(--glass-blur-soft) !important;
}

/* ── Stat cards inside bottom HUD: individual glass pills ── */
#bottomHud .stat-card{
  background: var(--glass-bg-rest);
  border: 1px solid var(--glass-border-cool);
  border-radius: var(--glass-r-sm);
  padding: 4px 10px;
  transition: background 220ms ease, border-color 220ms ease,
              transform 180ms ease;
}
#bottomHud .stat-card:hover{
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-warm);
  transform: translateY(-1px);
}

/* ── Reduced motion: kill the transitions ── */
@media (prefers-reduced-motion: reduce){
  .panel-glass,
  #leftPanel, #rightPanel, #auditMonitor, #intentBox,
  #prismPanel, #basemapSwitcher, #timeScrubber, #intelTicker,
  #playbackStrip, #chameleonBar, .preset-btn, .timeline-playback,
  #bottomHud .stat-card{
    transition: none;
  }
  #bottomHud .stat-card:hover{ transform: none; }
}
/* ============== END S9 UNIFIED GLASS ============== */

/* =====================================================================
   S11 — ADAPTIVE RESPONSIVE SYSTEM (MADA · Baseera Platform)
   ─────────────────────────────────────────────────────────────────────
   Three-tier responsive doctrine:
     DESKTOP  ≥ 1280px  — full multi-surface layout (no overrides)
     TABLET   768–1279px — compact rails, single-column right column
     MOBILE   ≤ 767px    — drawer system (already wired)
   Authoritative over all earlier media queries. Uses !important to
   defeat the v3.5 layout reset where necessary.
   ===================================================================== */

/* ─────────── TABLET BAND: 768 ≤ w ≤ 1279px ─────────── */
@media (min-width: 768px) and (max-width: 1279px){

  /* Top chip row: tighten spacing, allow wrap */
  html body .hud-top{
    padding: 0 10px !important;
    height: 44px !important;
  }
  html body .hud-top .hud-title{ font-size: 13px !important; }

  /* Left rail narrower */
  html body #leftPanel.side-panel,
  html body .left-panel{
    width: 200px !important;
    top: 120px !important;
    bottom: 240px !important;  /* clear ticker + playback + HUD */
    left: 10px !important;
    padding: 10px !important;
    font-size: 11px !important;
  }

  /* Basemap aligned with left rail */
  html body #basemapSwitcher.basemap-switcher{
    left: 10px !important;
    width: 200px !important;
    max-width: 200px !important;
    top: 76px !important;
    padding: 4px 8px !important;
  }
  html body #basemapSwitcher .basemap-select{ font-size: 10px !important; max-width: 130px !important; }

  /* Right rail compact */
  html body #auditMonitor.audit-monitor,
  html body #activityMonitor{
    width: 280px !important;
    top: 120px !important;
    right: 56px !important;
    max-height: 220px !important;
  }
  html body #intentBox{
    width: 280px !important;
    top: calc(120px + 220px) !important;
    right: 56px !important;
    max-height: 180px !important;
    bottom: auto !important;
  }
  html body #rightPanel.side-panel{
    width: 280px !important;
    top: 120px !important;
    right: 56px !important;
  }

  /* Imagery date — left of audit rail, tighter */
  html body #timeScrubber.time-scrubber{
    right: 56px !important;
    top: 76px !important;
    max-width: 300px !important;
    font-size: 10px !important;
  }
  html body #timeScrubber .scrubber-label,
  html body #timeScrubber .ts-label{ font-size: 9px !important; }

  /* Chameleon bar — center, smaller */
  html body #chameleonBar,
  html body #chameleonBar.chameleon-bar{
    top: 76px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 220px !important;
    padding: 2px 6px !important;
    height: 32px !important;
  }
  html body #chameleonBar .cham-btn{ width: 26px !important; height: 24px !important; font-size: 11px !important; }

  /* Intel ticker — full width but shorter */
  html body #intelTicker.intel-ticker{
    bottom: 190px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  /* Timeline playback — narrower, centered */
  html body #playbackStrip,
  html body .timeline-playback{
    bottom: 140px !important;
    max-width: 480px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
  }

  /* Bottom HUD — scrollable, compact */
  html body #bottomHud.hud-bottom{
    padding: 6px 12px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    min-height: 76px !important;
    gap: 6px !important;
  }
  html body #bottomHud .stat-card{
    flex: 0 0 100px !important;
    min-width: 100px !important;
    padding: 5px 8px !important;
  }
  html body #bottomHud .stat-card .stat-value{ font-size: 16px !important; }
  html body #bottomHud .stat-card .stat-label{ font-size: 9px !important; }

  /* PRISM panel — narrower so it doesn't crush right rail */
  html body #prismPanel.prism-panel{
    width: 320px !important;
    right: 56px !important;
  }
}

/* ─────────── MOBILE: ≤ 767px — augment existing drawer rules ─────────── */
@media (max-width: 767px){
  /* Show mobile drawer bar (existing rule confirmed) */
  html body .mobile-drawer-bar{
    display: flex !important;
    top: 56px !important;
    left: 0; right: 0;
    z-index: 880 !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    background: var(--glass-bg-rest);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    backdrop-filter: var(--glass-blur-soft);
    border-bottom: 1px solid var(--glass-border-warm);
  }
  html body .mobile-drawer-bar button{
    flex: 1;
    padding: 6px 4px !important;
    font: 700 10px 'JetBrains Mono', monospace !important;
    background: rgba(8,14,28,0.55) !important;
    border: 1px solid var(--glass-border-cool) !important;
    color: var(--txt-primary, #F2F7FC) !important;
    border-radius: 5px !important;
  }
  html body .mobile-drawer-bar button.active{
    background: rgba(0,229,212,0.16) !important;
    border-color: var(--glass-border-warm) !important;
  }

  /* Chameleon — fixed height, docked above intel ticker (ticker bottom:168 h:24 → top 704).
     Place chameleon at bottom 200 (top 660) for 8px gap. */
  html body #chameleonBar,
  html body #chameleonBar.chameleon-bar{
    top: auto !important;
    bottom: 200px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    max-width: none !important;
    width: calc(100vw - 16px) !important;
    height: 36px !important;
    max-height: 36px !important;
    justify-content: space-around !important;
    z-index: 70 !important;
  }

  /* Imagery date — below basemap row */
  html body #timeScrubber.time-scrubber{
    top: 144px !important;
    right: 8px !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    height: 32px !important;
    font-size: 10px !important;
  }

  /* Basemap full-width below top */
  html body #basemapSwitcher.basemap-switcher{
    top: 100px !important;
    left: 8px !important;
    right: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
  }

  /* Intel ticker — compact at bottom */
  html body #intelTicker.intel-ticker{
    bottom: 168px !important;
    height: 24px !important;
    font-size: 10px !important;
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Timeline playback compact */
  html body #playbackStrip,
  html body .timeline-playback{
    bottom: 196px !important;
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    transform: none !important;
    height: 32px !important;
  }

  /* Bottom HUD: horizontal scroll strip, compact (defeat translateX) */
  html body #bottomHud.hud-bottom,
  html body .hud-bottom{
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 4px 8px !important;
    height: 64px !important;
    min-height: 64px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  html body #bottomHud .stat-card{
    flex: 0 0 80px !important;
    min-width: 80px !important;
    padding: 4px 6px !important;
  }
  html body #bottomHud .stat-card .stat-value{ font-size: 14px !important; }

  /* PRISM panel — full screen modal */
  html body #prismPanel.prism-panel{
    top: 100px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 280px) !important;
    z-index: 900 !important;
  }
}

/* ─────────── Touch-target safety (tablet + mobile) ─────────── */
@media (hover: none) and (pointer: coarse){
  html body button,
  html body .preset-btn,
  html body select,
  html body .layer-toggle,
  html body .cham-btn,
  html body .mobile-drawer-bar button{
    min-height: 44px !important;  /* iOS/Android HIG */
  }
}
/* ============== END S11 ADAPTIVE ============== */

/* =====================================================================
   S6 — BASEMAP ALIGNMENT + POLISH (MADA · Baseera Platform)
   ─────────────────────────────────────────────────────────────────────
   Per A5: BASEMAP width = measured #leftPanel width = 236px desktop.
   Tablet 200px, mobile full-width (set in S11). This section:
     1. Switches BASEMAP label from cyan → warm-gold to visually pair
        with the DATA LAYERS panel header directly below.
     2. Adds a subtle warm-gold accent line connecting BASEMAP to the
        DATA LAYERS column (visual anchoring of the imagery column).
     3. Tightens internal padding so the dropdown fills cleanly.
     4. Confirms 4px gap between BASEMAP bottom (top:84+36=120) and
        #leftPanel top (140) — 20px breathing gap ✓.
   ===================================================================== */

/* Warm-gold label, matches DATA LAYERS .panel-header */
html body #basemapSwitcher .basemap-label{
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.15em !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  white-space: nowrap !important;
  padding-right: 8px !important;
  border-right: 1px solid var(--glass-border-warm, rgba(201,168,76,0.30)) !important;
  text-transform: uppercase !important;
}

/* Imagery-date badge: muted but visible */
html body #basemapSwitcher .imagery-date-badge{
  font: 600 9px 'JetBrains Mono', monospace !important;
  color: var(--txt-secondary, #8A9BAA) !important;
  letter-spacing: 0.08em !important;
  padding-left: 4px !important;
  border-left: 1px solid var(--glass-border-cool, rgba(0,229,212,0.20)) !important;
}

/* Tighten select padding so 236px container looks balanced */
html body #basemapSwitcher .basemap-select{
  padding: 3px 6px !important;
  max-width: calc(236px - 88px) !important; /* container - label - badge - gaps */
  font: 600 11px 'JetBrains Mono', monospace !important;
}

/* Light-mode chameleon: warm-gold becomes darker, readable on light bg */
html[data-chameleon="light"] body #basemapSwitcher .basemap-label{
  color: #8C6A1F !important;
  border-right-color: rgba(140,106,31,0.40) !important;
}
html[data-chameleon="light"] body #basemapSwitcher .imagery-date-badge{
  color: #4A5560 !important;
  border-left-color: rgba(14,126,114,0.30) !important;
}

/* Amber-mode: monochrome warm */
html[data-chameleon="amber"] body #basemapSwitcher .basemap-label{
  color: #FFD96B !important;
  border-right-color: rgba(255,217,107,0.40) !important;
}

/* High-contrast: solid gold border */
html[data-chameleon="high-contrast"] body #basemapSwitcher .basemap-label{
  color: #FFD96B !important;
  border-right: 2px solid #FFD96B !important;
}

/* Visual anchor: warm-gold accent on top + bottom borders of BASEMAP,
   pairs with DATA LAYERS panel-header bottom border underneath.
   Selector specificity matches canonical rule at line 2089. */
html body #basemapSwitcher.basemap-switcher{
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.22)) !important;
  border-top-color: var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
  border-bottom-color: var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
}

/* Tablet keeps the rule but with narrower select max-width — handled in S11.
   Mobile full-width — handled in S11. */
/* ============== END S6 BASEMAP ALIGNMENT ============== */

/* =====================================================================
   S1 — INTEL FEED BAR ALIGNMENT (MADA · Baseera Platform)
   ─────────────────────────────────────────────────────────────────────
   Per user complaint: "news feed isn't aligned... it's way up and not
   identified... whole thing is messy."
   Fix: inset the INTEL FEED ticker so it runs in the clear middle band
   between #leftPanel (ends ~250px) and #auditMonitor/#intentBox right
   column (starts ~954px). Red label remains anchored to the LEFT inset
   edge — fully visible, not hidden behind DATA LAYERS column.
   ===================================================================== */
html body #intelTicker.intel-ticker,
html body .intel-ticker{
  /* Inset for desktop: clear of left column + right column.
     viewport(1356) - auditMonitor.left(954) + 8 breathing = 410. */
  left: 254px !important;    /* leftPanel right (14+236=250) + 4 breathing */
  right: 410px !important;
  width: auto !important;
  bottom: 198px !important;  /* preserved from v3.5 reset */
  height: 32px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--glass-border-warm, rgba(201,168,76,0.30)) !important;
  border-left: 3px solid #FF3B30 !important;  /* alert-red leading edge */
  box-shadow: 0 4px 16px rgba(0,0,0,0.32), 0 0 24px rgba(255,59,48,0.08) !important;
}

/* INTEL FEED label: warm-red on darker background, sharp left edge */
html body #intelTicker .intel-ticker-label{
  flex: 0 0 auto !important;
  background: linear-gradient(90deg, #FF3B30, #C9241B) !important;
  color: #0A1628 !important;
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  padding: 0 14px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  border-right: 2px solid rgba(0,0,0,0.6) !important;
  white-space: nowrap !important;
}

/* Ticker track: clean spacing, monospace, scrolls smoothly */
html body #intelTicker .intel-ticker-track{
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  white-space: nowrap !important;
  padding-left: 14px !important;
  font: 600 11px 'JetBrains Mono', monospace !important;
  color: var(--txt-primary, #E8EFF7) !important;
  animation: tickerScroll 180s linear infinite !important;
}
html body #intelTicker:hover .intel-ticker-track{
  animation-play-state: paused !important;
}

/* Individual intel items: subtle category-color leading dot */
html body #intelTicker .intel-item{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html body #intelTicker .intel-item::before{
  content: '◆' !important;
  color: var(--txt-accent, #00E5D4) !important;
  opacity: 0.6 !important;
  font-size: 8px !important;
}

/* Tablet: tighter inset, smaller label */
@media (min-width: 768px) and (max-width: 1279px){
  html body #intelTicker.intel-ticker{
    left: 220px !important;    /* leftPanel right (10+200=210) + 10 */
    right: 350px !important;   /* viewport (1024) - auditMonitor left (688) + 14 = 350 */
    height: 28px !important;
  }
  html body #intelTicker .intel-ticker-label{ font-size: 9px !important; padding: 0 10px !important; }
  html body #intelTicker .intel-ticker-track{ font-size: 10px !important; gap: 18px !important; }
}

/* Mobile: full width, no insets (left/right panels are hidden under drawer) */
@media (max-width: 767px){
  html body #intelTicker.intel-ticker{
    left: 0 !important;
    right: 0 !important;
    border-left: 3px solid #FF3B30 !important;
    border-radius: 0 !important;
    bottom: 168px !important;
  }
  html body #intelTicker .intel-ticker-label{ font-size: 9px !important; padding: 0 8px !important; }
  html body #intelTicker .intel-ticker-track{ font-size: 10px !important; gap: 14px !important; }
}

/* Chameleon adaptations */
html[data-chameleon="light"] body #intelTicker .intel-ticker-track{
  color: #0A1628 !important;
}
html[data-chameleon="high-contrast"] body #intelTicker.intel-ticker{
  border: 2px solid #FFFFFF !important;
  border-left: 4px solid #FF3B30 !important;
}
/* ============== END S1 INTEL FEED ALIGNMENT ============== */

/* =====================================================================
   S5 — TIMELINE PLAYBACK REFINEMENT (MADA · Baseera Platform)
   ─────────────────────────────────────────────────────────────────────
   Per S9 unified glass + Palantir doctrine: TIMELINE PLAYBACK is the
   authoritative time axis. Visually align it directly above INTEL FEED
   so the stack reads top-down: TIMELINE → INTEL FEED → STATUS HUD.
   Width matches INTEL FEED inset (254-946 desktop = 692px).
   Deep functional rewire (master clock) lands in S18.
   ===================================================================== */

/* Desktop: align with INTEL FEED inset, sit just above it */
html body #playbackPanel.playback-panel,
html body .playback-panel,
html body #playbackStrip,
html body .timeline-playback{
  position: fixed !important;
  bottom: 238px !important;   /* INTEL FEED top = 854-624=230, gap 8 → 238 */
  left: 254px !important;
  right: 410px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 40px !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  -webkit-backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.22)) !important;
  border-top: 1px solid var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)) !important;
  z-index: 55 !important;
  padding: 6px 12px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Header row: TIMELINE PLAYBACK title + collapse button */
html body #playbackPanel .playback-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 4px 0 !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid rgba(201,168,76,0.18) !important;
  height: auto !important;
}
html body #playbackPanel .playback-title{
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  text-transform: uppercase !important;
}

/* Body row: controls + scrubber + timestamp on one line */
html body #playbackPanel .playback-body{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 2px 0 0 0 !important;
  height: 30px !important;
}
html body #playbackPanel .playback-controls{
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
html body #playbackPanel .pb-btn{
  background: rgba(0,229,212,0.08) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.25)) !important;
  color: var(--txt-primary, #E8EFF7) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  min-height: 24px !important;
  transition: background 180ms, border-color 180ms !important;
}
html body #playbackPanel .pb-btn:hover{
  background: rgba(0,229,212,0.18) !important;
  border-color: var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
}
html body #playbackPanel .pb-btn.active{
  background: rgba(0,229,212,0.22) !important;
  border-color: var(--txt-accent, #00E5D4) !important;
  color: var(--txt-accent, #00E5D4) !important;
}
html body #playbackPanel .pb-btn:disabled{
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
html body #playbackPanel .pb-select{
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.25)) !important;
  color: var(--txt-primary, #E8EFF7) !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  font: 600 10px 'JetBrains Mono', monospace !important;
}
html body #playbackPanel .pb-scrubber{
  flex: 1 1 auto !important;
  margin: 0 !important;
  height: 4px !important;
  accent-color: var(--txt-accent, #00E5D4) !important;
}
html body #playbackPanel .playback-ts{
  flex: 0 0 auto !important;
  min-width: 120px !important;
  text-align: right !important;
  font: 600 10px 'JetBrains Mono', monospace !important;
  color: var(--txt-secondary, #8A9BAA) !important;
  letter-spacing: 0.08em !important;
}

/* Collapsed state */
html body #playbackPanel.playback-panel.collapsed{
  min-height: 26px !important;
  padding: 4px 12px !important;
}
html body #playbackPanel.playback-panel.collapsed .playback-body{ display: none !important; }
html body #playbackPanel.playback-panel.collapsed .playback-header{
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Tablet: align with INTEL FEED inset. INTEL FEED tablet bottom=198 h=28 → ends 226. Gap 8 → 234. */
@media (min-width: 768px) and (max-width: 1279px){
  html body #playbackPanel.playback-panel,
  html body .timeline-playback,
  html body #playbackStrip{
    left: 220px !important;
    right: 350px !important;
    bottom: 234px !important;
  }
  html body #playbackPanel .pb-btn{ padding: 3px 8px !important; font-size: 9px !important; }
  html body #playbackPanel .playback-ts{ min-width: 100px !important; }
}

/* Mobile: full width, ABOVE chameleon bar. chameleonBar bottom:200 h:36 → ends 236. Gap 8 → 244. */
@media (max-width: 767px){
  html body #playbackPanel.playback-panel,
  html body .timeline-playback,
  html body #playbackStrip{
    /* RECOVERY: #bottomDock now owns position (in-flow flex child).
       Legacy fixed offsets (left/right/bottom) removed — dock controls geometry.
       Keep TIMELINE slim per spec. */
    min-height: 42px !important;
    height: 42px !important;
  }
  html body #playbackPanel .playback-ts{ min-width: 80px !important; font-size: 9px !important; }
  html body #playbackPanel .pb-btn{ padding: 4px 8px !important; min-height: 28px !important; }
}

/* Chameleon adaptations */
html[data-chameleon="light"] body #playbackPanel .playback-title{
  color: #8C6A1F !important;
}
html[data-chameleon="amber"] body #playbackPanel .playback-title{
  color: #FFD96B !important;
}
html[data-chameleon="high-contrast"] body #playbackPanel.playback-panel{
  border: 2px solid #FFFFFF !important;
  border-top: 2px solid #FFD96B !important;
}
/* ============== END S5 TIMELINE PLAYBACK ============== */

/* =====================================================================
   S4 — RIGHT COLUMN STACKING (MADA · Baseera Platform)
   ─────────────────────────────────────────────────────────────────────
   Unify ACTIVITY MONITOR + ASK MADA into a single right-rail visual
   stack using S9 panel-glass tokens. IMAGERY DATE stays at top chip
   row (per S6) but gets matching warm-gold header treatment so it
   reads as part of the same column visually.

   Desktop right rail:
     - top:130  ACTIVITY MONITOR   340 × 260   → ends 390
     - top:402  ASK MADA           340 × ≤220  → ends ≤622  (8px above INTEL FEED y=624)
     - gap 12px between them; aligned right:62 (a11y gutter)

   Palantir doctrine: object detail rail on the right; consistent
   chrome so the operator's eye scans the column as one unit.
   ===================================================================== */

/* ─── ACTIVITY MONITOR ─── */
html body #auditMonitor.audit-monitor,
html body #activityMonitor{
  position: fixed !important;
  top: 130px !important;
  right: 62px !important;
  width: 340px !important;
  height: 260px !important;
  max-height: 260px !important;
  z-index: 50 !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  -webkit-backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.22)) !important;
  border-top: 1px solid var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
  border-radius: 10px !important;
  box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html body #auditMonitor .audit-header,
html body #auditMonitor .panel-header,
html body #activityMonitor .audit-header{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: linear-gradient(180deg, rgba(201,168,76,0.10) 0%, rgba(201,168,76,0.02) 100%) !important;
  border-bottom: 1px solid rgba(201,168,76,0.18) !important;
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  text-transform: uppercase !important;
  min-height: 28px !important;
}
html body #auditMonitor .audit-header .audit-title,
html body #auditMonitor .panel-title,
html body #activityMonitor .audit-title{
  color: var(--txt-accent-warm, #C9A84C) !important;
  letter-spacing: 0.18em !important;
}
html body #auditMonitor .audit-body,
html body #auditMonitor .panel-body,
html body #activityMonitor .audit-body{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 8px 12px !important;
  font: 500 10px 'JetBrains Mono', monospace !important;
  color: var(--txt-secondary, #C8D2DC) !important;
}
html body #auditMonitor.collapsed,
html body #activityMonitor.collapsed{
  height: 32px !important;
  max-height: 32px !important;
}

/* ─── ASK MADA (intent box) ─── */
html body #intentBox{
  position: fixed !important;
  top: 402px !important;          /* AM ends 390, gap 12 */
  right: 62px !important;
  width: 340px !important;
  height: auto !important;
  max-height: 220px !important;
  bottom: auto !important;
  z-index: 50 !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  -webkit-backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.22)) !important;
  border-top: 1px solid var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
  border-radius: 10px !important;
  box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html body #intentBox .intent-header,
html body #intentBox .panel-header{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: linear-gradient(180deg, rgba(201,168,76,0.10) 0%, rgba(201,168,76,0.02) 100%) !important;
  border-bottom: 1px solid rgba(201,168,76,0.18) !important;
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  text-transform: uppercase !important;
  min-height: 28px !important;
}
html body #intentBox .intent-header .intent-title,
html body #intentBox .panel-title{
  color: var(--txt-accent-warm, #C9A84C) !important;
  letter-spacing: 0.18em !important;
}
html body #intentBox .intent-body,
html body #intentBox .panel-body{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 8px 12px !important;
  font: 500 10px 'JetBrains Mono', monospace !important;
  color: var(--txt-secondary, #C8D2DC) !important;
}
html body #intentBox .intent-suggestions{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}
html body #intentBox .intent-suggestion{
  font: 500 10px 'JetBrains Mono', monospace !important;
  color: var(--txt-secondary, #B8C6D4) !important;
  padding: 2px 4px !important;
  border-left: 2px solid rgba(0,229,212,0.25) !important;
  cursor: pointer !important;
  transition: all 180ms !important;
}
html body #intentBox .intent-suggestion:hover{
  color: var(--txt-accent, #00E5D4) !important;
  border-left-color: var(--txt-accent, #00E5D4) !important;
  background: rgba(0,229,212,0.05) !important;
}
html body #intentBox .intent-input-row{
  display: flex !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(0,229,212,0.10) !important;
}
html body #intentBox .intent-input{
  flex: 1 !important;
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.25)) !important;
  color: var(--txt-primary, #E8EFF7) !important;
  font: 500 11px 'JetBrains Mono', monospace !important;
  padding: 5px 8px !important;
  border-radius: 4px !important;
}
html body #intentBox .intent-send-btn{
  background: rgba(201,168,76,0.18) !important;
  border: 1px solid var(--glass-border-warm, rgba(201,168,76,0.40)) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  font: 700 11px 'JetBrains Mono', monospace !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 180ms !important;
}
html body #intentBox .intent-send-btn:hover{
  background: rgba(201,168,76,0.30) !important;
  color: #F5DC8E !important;
}
html body #intentBox.collapsed{
  height: 32px !important;
  max-height: 32px !important;
}

/* ─── IMAGERY DATE (top chip) — match warm-gold header treatment ─── */
html body #timeScrubber.time-scrubber{
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  -webkit-backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  border: 1px solid var(--glass-border-warm, rgba(201,168,76,0.30)) !important;
  border-top: 1px solid var(--glass-border-warm, rgba(201,168,76,0.45)) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)) !important;
}
html body #timeScrubber .ts-label{
  color: var(--txt-accent-warm, #C9A84C) !important;
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
}

/* ─── TABLET: maintain proportional stack ─── */
@media (min-width: 768px) and (max-width: 1279px){
  html body #auditMonitor.audit-monitor,
  html body #activityMonitor{
    width: 280px !important;
    top: 120px !important;
    right: 56px !important;
    height: 220px !important;
    max-height: 220px !important;
  }
  html body #intentBox{
    width: 280px !important;
    top: calc(120px + 220px + 12px) !important;   /* 352 */
    right: 56px !important;
    max-height: 180px !important;
  }
}

/* ─── MOBILE: full-width single column under drawer ─── */
@media (max-width: 767px){
  html body #auditMonitor.audit-monitor,
  html body #activityMonitor,
  html body #intentBox{
    position: fixed !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
  /* Mobile: panels are hidden by default; mobile drawer reveals them
     via body.show-audit / body.show-intent classes set by accessibility.js. */
  html body:not(.show-audit) #auditMonitor.audit-monitor,
  html body:not(.show-audit) #activityMonitor{
    display: none !important;
  }
  html body:not(.show-intent) #intentBox{
    display: none !important;
  }
  /* When drawer reveals them, dock as full-width sheet just below drawer */
  html body.show-audit #auditMonitor.audit-monitor,
  html body.show-intent #intentBox{
    top: 100px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 50vh !important;
    z-index: 870 !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* ─── CHAMELEON adaptations ─── */
html[data-chameleon="light"] body #auditMonitor .audit-header,
html[data-chameleon="light"] body #auditMonitor .panel-header,
html[data-chameleon="light"] body #intentBox .intent-header,
html[data-chameleon="light"] body #intentBox .panel-header{
  color: #8C6A1F !important;
  background: linear-gradient(180deg, rgba(140,106,31,0.10) 0%, rgba(140,106,31,0.02) 100%) !important;
}
html[data-chameleon="light"] body #auditMonitor .audit-title,
html[data-chameleon="light"] body #intentBox .intent-title{
  color: #8C6A1F !important;
}
html[data-chameleon="amber"] body #auditMonitor .audit-header,
html[data-chameleon="amber"] body #auditMonitor .panel-header,
html[data-chameleon="amber"] body #intentBox .intent-header,
html[data-chameleon="amber"] body #intentBox .panel-header{
  color: #FFD96B !important;
  background: linear-gradient(180deg, rgba(255,217,107,0.12) 0%, rgba(255,217,107,0.02) 100%) !important;
}
html[data-chameleon="high-contrast"] body #auditMonitor.audit-monitor,
html[data-chameleon="high-contrast"] body #intentBox{
  border: 2px solid #FFFFFF !important;
  border-top: 2px solid #FFD96B !important;
}
/* ============== END S4 RIGHT COLUMN STACKING ============== */

/* =====================================================================
   S3 — CHAMELEON VERTICAL POP-UP (MADA · Baseera Platform)
   ─────────────────────────────────────────────────────────────────────
   Per A3 + A10: replace top horizontal chameleon strip with a single
   ◐ trigger docked LEFT inside #bottomHud. Clicking the trigger opens
   a vertical pop-up panel ABOVE it listing 5 modes with full labels.
   ===================================================================== */

/* ─── Override prior chameleon-bar positioning: trigger now lives inside #bottomHud ─── */
html body #chameleonBar.chameleon-bar.chameleon-dock,
html body #chameleonBar.chameleon-dock{
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  z-index: auto !important;
}

/* ─── Trigger button: ◐ glyph + CHAMELEON label + current mode ─── */
html body #chameleonBar .cham-trigger{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  -webkit-backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.25)) !important;
  border-top: 1px solid var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
  border-radius: 8px !important;
  box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)) !important;
  cursor: pointer !important;
  font-family: 'JetBrains Mono', monospace !important;
  transition: background 180ms, border-color 180ms !important;
  min-height: 36px !important;
}
html body #chameleonBar .cham-trigger:hover,
html body #chameleonBar .cham-trigger[aria-expanded="true"]{
  background: var(--glass-bg-hover, rgba(8,14,28,0.58)) !important;
  border-color: var(--glass-border-warm, rgba(201,168,76,0.45)) !important;
}
html body #chameleonBar .cham-glyph{
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  text-shadow: 0 0 4px rgba(201,168,76,0.45) !important;
}
html body #chameleonBar .cham-bar-label{
  font: 700 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.18em !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  text-transform: uppercase !important;
}
html body #chameleonBar .cham-current{
  font: 600 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.12em !important;
  color: var(--txt-accent, #00E5D4) !important;
  padding: 2px 6px !important;
  background: rgba(0,229,212,0.08) !important;
  border: 1px solid rgba(0,229,212,0.20) !important;
  border-radius: 4px !important;
}

/* ─── Vertical pop-up panel: opens ABOVE the trigger.
     Uses position:fixed to escape #bottomHud's overflow:auto clip.
     z-index 9500 — outranks DATA LAYERS (800), Activity Monitor (850), etc. ─── */
html body #chamPopup{
  position: fixed !important;
  left: 32px !important;
  bottom: 100px !important;        /* above bottomHud (HUD bottom ~94px) */
  min-width: 200px !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.58)) !important;
  -webkit-backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.32)) !important;
  border-top: 1px solid var(--glass-border-warm, rgba(201,168,76,0.40)) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.25) !important;
  padding: 6px !important;
  z-index: 9500 !important;
  display: none !important;
  flex-direction: column !important;
  gap: 2px !important;
  opacity: 0 !important;
  transform: translateY(6px) scale(0.98) !important;
  transition: opacity 180ms, transform 180ms !important;
  font-family: 'JetBrains Mono', monospace !important;
}
html body #chamPopup.open{
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
html body #chamPopup .cham-popup-title{
  font: 700 9px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.20em !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  padding: 6px 10px 4px 10px !important;
  border-bottom: 1px solid rgba(201,168,76,0.18) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}

/* ─── Pop-up items: vertical row, dot + label ─── */
html body #chamPopup .cham-popup-item{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: left !important;
  font: 600 11px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.10em !important;
  color: var(--txt-primary, #E8EFF7) !important;
  text-transform: uppercase !important;
  transition: background 150ms, border-color 150ms, color 150ms !important;
}
html body #chamPopup .cham-popup-item:hover{
  background: rgba(0,229,212,0.10) !important;
  border-color: var(--glass-border-cool, rgba(0,229,212,0.30)) !important;
  color: var(--txt-accent, #00E5D4) !important;
}
html body #chamPopup .cham-popup-item.active{
  background: rgba(201,168,76,0.14) !important;
  border-color: var(--glass-border-warm, rgba(201,168,76,0.40)) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
}
html body #chamPopup .cham-popup-item .cham-dot{
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  transition: background 150ms, border-color 150ms !important;
}
html body #chamPopup .cham-popup-item:hover .cham-dot{
  background: var(--txt-accent, #00E5D4) !important;
  border-color: var(--txt-accent, #00E5D4) !important;
  box-shadow: 0 0 6px rgba(0,229,212,0.50) !important;
}
html body #chamPopup .cham-popup-item.active .cham-dot{
  background: var(--txt-accent-warm, #C9A84C) !important;
  border-color: var(--txt-accent-warm, #C9A84C) !important;
  box-shadow: 0 0 6px rgba(201,168,76,0.50) !important;
}
html body #chamPopup .cham-popup-label{
  flex: 1 !important;
  letter-spacing: 0.14em !important;
}

/* ─── Suppress legacy horizontal chameleon bar styling on the new dock ─── */
html body #chameleonBar.chameleon-bar.chameleon-dock .cham-btn{
  /* the legacy single-letter buttons no longer apply inside dock */
}

/* ─── Bottom HUD: ensure chameleon dock sits at leftmost position ─── */
html body #bottomHud.hud-bottom{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body #bottomHud > #chameleonBar.chameleon-dock{
  order: -10 !important;          /* always leftmost */
  margin-right: 12px !important;
}

/* ─── TABLET adaptations ─── */
@media (min-width: 768px) and (max-width: 1279px){
  html body #chameleonBar.chameleon-bar.chameleon-dock{
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: linear-gradient(90deg, rgba(8,14,28,0.85) 70%, rgba(8,14,28,0)) !important;
    padding-right: 8px !important;
    flex: 0 0 auto !important;
  }
  html body #chameleonBar .cham-trigger{ padding: 6px 10px !important; min-height: 32px !important; }
  html body #chameleonBar .cham-glyph{ font-size: 16px !important; }
  html body #chameleonBar .cham-bar-label,
  html body #chameleonBar .cham-current{ font-size: 9px !important; }
  html body #chamPopup{ min-width: 180px !important; }
}

/* ─── MOBILE: docked at left of bottom HUD; popup full-width within HUD ─── */
@media (max-width: 767px){
  html body #chameleonBar.chameleon-bar.chameleon-dock{
    position: sticky !important;
    left: 0 !important;
    bottom: auto !important;
    margin: 0 8px 0 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    z-index: 5 !important;
    background: linear-gradient(90deg, rgba(8,14,28,0.85) 70%, rgba(8,14,28,0)) !important;
    padding-right: 8px !important;
  }
  html body #chameleonBar .cham-trigger{
    padding: 6px 8px !important;
    min-height: 32px !important;
  }
  html body #chameleonBar .cham-current{ display: none !important; }
  html body #chamPopup{
    min-width: 220px !important;
    left: 16px !important;
    bottom: 100px !important;
  }
  html body #chamPopup .cham-popup-item{
    padding: 10px 12px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }
}

/* ─── CHAMELEON adaptations (light/amber/HC) ─── */
html[data-chameleon="light"] body #chameleonBar .cham-trigger{
  background: rgba(255,255,255,0.42) !important;
}
html[data-chameleon="light"] body #chameleonBar .cham-bar-label,
html[data-chameleon="light"] body #chameleonBar .cham-glyph{
  color: #8C6A1F !important;
}
html[data-chameleon="light"] body #chameleonBar .cham-current{
  color: #1A4F6A !important;
  background: rgba(26,79,106,0.10) !important;
  border-color: rgba(26,79,106,0.25) !important;
}
html[data-chameleon="amber"] body #chameleonBar .cham-glyph{
  color: #FFD96B !important;
  text-shadow: 0 0 6px rgba(255,217,107,0.6) !important;
}
html[data-chameleon="high-contrast"] body #chameleonBar .cham-trigger,
html[data-chameleon="high-contrast"] body #chamPopup{
  border: 2px solid #FFFFFF !important;
}
/* ============== END S3 CHAMELEON POP-UP ============== */

/* ============== S2 TEXT POP-UP (dock + body-mounted popup) ============== */
/* Neutralize old free-floating .a11y-toolbar; dock inside #bottomHud right side */
html body #a11yBar.a11y-toolbar.a11y-dock{
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  flex-direction: row !important;
  align-items: center !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  -webkit-backdrop-filter: var(--glass-blur-default, blur(22px) saturate(140%)) !important;
  border: 1px solid var(--glass-border-warm, rgba(201,168,76,0.30)) !important;
  box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  height: 37px !important;
  flex: 0 0 auto !important;
  z-index: 5 !important;
}
/* Anchor at right of bottomHud via order */
html body #bottomHud > #a11yBar.a11y-dock{
  order: 10000 !important;          /* always rightmost */
  margin-left: 12px !important;
}

html body #a11yBar .a11y-trigger{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--txt-primary, #E8EFF7) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  min-height: 37px !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
html body #a11yBar .a11y-trigger:hover,
html body #a11yBar .a11y-trigger[aria-expanded="true"]{
  background: var(--glass-bg-hover, rgba(8,14,28,0.58)) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
}
html body #a11yBar .a11y-glyph{
  font-size: 18px !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  font-style: italic !important;
  font-family: 'Cinzel', serif !important;
  line-height: 1 !important;
}
html body #a11yBar .a11y-bar-label{
  color: var(--txt-secondary, #9BA8B5) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
}
html body #a11yBar .a11y-current{
  color: var(--txt-accent, #00E5D4) !important;
  background: rgba(0,229,212,0.08) !important;
  border: 1px solid rgba(0,229,212,0.30) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  min-width: 28px !important;
  text-align: center !important;
}

/* Popup (body-mounted) */
html body #a11yPopup{
  display: none;
  position: fixed !important;
  right: 32px !important;
  bottom: 100px !important;
  min-width: 210px !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 8px !important;
  background: var(--glass-bg-hover, rgba(8,14,28,0.58)) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  border: 1px solid var(--glass-border-warm, rgba(201,168,76,0.30)) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45) !important;
  border-radius: 10px !important;
  z-index: 9500 !important;
  font-family: 'JetBrains Mono', monospace !important;
}
html body #a11yPopup.open{
  display: flex !important;
  animation: a11yPopupIn 0.16s ease-out both;
}
@keyframes a11yPopupIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

html body #a11yPopup .a11y-popup-title{
  color: var(--txt-accent-warm, #C9A84C) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(201,168,76,0.18) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
html body #a11yPopup .a11y-popup-item{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--txt-primary, #E8EFF7) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  min-height: 32px !important;
  text-transform: uppercase !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s !important;
  min-width: auto !important;
}
html body #a11yPopup .a11y-popup-item:hover{
  background: rgba(0,229,212,0.10) !important;
  color: var(--txt-accent, #00E5D4) !important;
  border-color: rgba(0,229,212,0.25) !important;
}
html body #a11yPopup .a11y-popup-item.active{
  background: rgba(201,168,76,0.16) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  border-color: rgba(201,168,76,0.42) !important;
}
html body #a11yPopup .a11y-popup-glyph{
  font-family: 'Cinzel', serif !important;
  font-size: 14px !important;
  font-style: italic !important;
  color: inherit !important;
  min-width: 36px !important;
  text-align: left !important;
}
html body #a11yPopup .a11y-popup-label{
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  color: inherit !important;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1279px){
  html body #a11yBar.a11y-toolbar.a11y-dock{
    position: sticky !important;
    right: 0 !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    background: linear-gradient(270deg, rgba(8,14,28,0.85) 70%, rgba(8,14,28,0)) !important;
    padding-left: 8px !important;
  }
  html body #a11yBar .a11y-trigger{ padding: 6px 10px !important; min-height: 32px !important; }
  html body #a11yBar .a11y-bar-label,
  html body #a11yBar .a11y-current{ font-size: 9px !important; }
  html body #a11yPopup{ min-width: 190px !important; }
}

/* MOBILE */
@media (max-width: 767px){
  html body #a11yBar.a11y-toolbar.a11y-dock{
    position: sticky !important;
    right: 0 !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    background: linear-gradient(270deg, rgba(8,14,28,0.85) 70%, rgba(8,14,28,0)) !important;
    padding-left: 8px !important;
    margin-left: 8px !important;
  }
  html body #a11yBar .a11y-trigger{ padding: 6px 8px !important; min-height: 32px !important; }
  html body #a11yBar .a11y-bar-label{ display: none !important; }
  html body #a11yPopup{
    min-width: 220px !important;
    right: 16px !important;
    bottom: 100px !important;
  }
  html body #a11yPopup .a11y-popup-item{
    padding: 10px 12px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }
}

/* Chameleon mode adaptations */
html[data-chameleon="light"] body #a11yBar .a11y-glyph,
html[data-chameleon="light"] body #a11yBar .a11y-bar-label{ color: #8C6A1F !important; }
html[data-chameleon="light"] body #a11yBar .a11y-current{
  color: #1A4F6A !important;
  background: rgba(26,79,106,0.10) !important;
  border-color: rgba(26,79,106,0.25) !important;
}
html[data-chameleon="amber"] body #a11yBar .a11y-glyph{
  color: #FFD96B !important;
  text-shadow: 0 0 6px rgba(255,217,107,0.6) !important;
}
html[data-chameleon="high-contrast"] body #a11yBar .a11y-trigger,
html[data-chameleon="high-contrast"] body #a11yPopup{
  border: 2px solid #FFFFFF !important;
}
/* ============== END S2 TEXT POP-UP ============== */

/* ============== S8 STAT-CARD POLISH ============== */
/* Apply glass tokens, top accent bar (color-coded), polished hover */
html body #bottomHud .stat-card{
  position: relative !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)) !important;
  border-radius: 8px !important;
  padding: 12px 12px 10px 12px !important;
  min-width: 98px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 6px !important;
  text-align: left !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  overflow: hidden !important;
}

/* Top color-coded accent strip */
html body #bottomHud .stat-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.10);
  opacity: 0.85;
}
/* Data-type accents (matches stat-label color) */
html body #bottomHud .stat-card:nth-of-type(1)::before{ background: #00E5D4; }                       /* FLIGHTS */
html body #bottomHud .stat-card:nth-of-type(2)::before{ background: #FF3B30; }                       /* MILITARY (now red ↗ icon) */
html body #bottomHud .stat-card:nth-of-type(3)::before{ background: #C9A84C; }                       /* MARITIME */
html body #bottomHud .stat-card:nth-of-type(4)::before{ background: #AF52DE; }                       /* SATELLITES */
html body #bottomHud .stat-card:nth-of-type(5)::before{ background: #FFB000; }                       /* GNSS */
html body #bottomHud .stat-card:nth-of-type(6)::before{ background: #FF3B30; }                       /* EVENTS */
html body #bottomHud .stat-card:nth-of-type(7)::before{ background: #AF52DE; }                       /* CVE */
html body #bottomHud .stat-card.anomaly-card::before{ background: linear-gradient(90deg, #FF3B30, #FF7A1F); }
html body #bottomHud .stat-card:nth-last-of-type(2)::before{ background: #2ECC71; }                  /* THREAT LEVEL */
html body #bottomHud .stat-card:last-child::before{ background: #9BA8B5; }                         /* LAST UPDATE */

/* Hover: lift + warm gold border */
html body #bottomHud .stat-card:hover{
  transform: translateY(-2px) !important;
  border-color: var(--glass-border-warm, rgba(201,168,76,0.45)) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32), 0 0 0 1px rgba(201,168,76,0.18) !important;
}

/* Typography */
html body #bottomHud .stat-card .stat-label{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--txt-secondary, #9BA8B5) !important;
  margin: 0 !important;
  opacity: 0.92;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
html body #bottomHud .stat-card .stat-value{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--txt-primary, #E8EFF7) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Anomaly card subtle pulse — gentler than full alarm */
html body #bottomHud .stat-card.anomaly-card{
  border-color: rgba(255,59,48,0.18) !important;
  background: linear-gradient(180deg, rgba(255,59,48,0.06), var(--glass-bg-rest, rgba(8,14,28,0.42))) !important;
  animation: anomalyPulseSubtle 3.2s ease-in-out infinite;
}
@keyframes anomalyPulseSubtle {
  0%, 100% { box-shadow: var(--glass-shadow-rest, 0 4px 16px rgba(0,0,0,0.18)), 0 0 0 0 rgba(255,59,48,0); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,59,48,0.30); }
}

/* THREAT LEVEL — bigger label badge feel, wider card */
html body #bottomHud .stat-card:nth-last-of-type(2){
  min-width: 124px !important;
}
html body #bottomHud .stat-card:nth-last-of-type(2) .stat-value{
  letter-spacing: 0.06em !important;
  font-size: 16px !important;
}
/* LAST UPDATE — timestamp slightly wider */
html body #bottomHud .stat-card:last-of-type{
  min-width: 116px !important;
}
html body #bottomHud .stat-card:last-of-type .stat-value{
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1279px){
  html body #bottomHud .stat-card{ min-width: 100px !important; padding: 12px 10px 10px !important; }
  html body #bottomHud .stat-card .stat-value{ font-size: 20px !important; }
  html body #bottomHud .stat-card .stat-label{ font-size: 8px !important; letter-spacing: 0.12em !important; }
}
/* Mobile */
@media (max-width: 767px){
  html body #bottomHud .stat-card{ min-width: 92px !important; padding: 10px 8px 8px !important; }
  html body #bottomHud .stat-card .stat-value{ font-size: 18px !important; }
  html body #bottomHud .stat-card .stat-label{ font-size: 8px !important; letter-spacing: 0.10em !important; }
}

/* Chameleon LIGHT mode */
html[data-chameleon="light"] body #bottomHud .stat-card{
  background: rgba(255,255,255,0.42) !important;
  border-color: rgba(26,79,106,0.18) !important;
}
html[data-chameleon="light"] body #bottomHud .stat-card .stat-label{ color: #4A5666 !important; }
html[data-chameleon="light"] body #bottomHud .stat-card .stat-value{ color: #0F1F2E !important; }
/* HIGH CONTRAST */
html[data-chameleon="high-contrast"] body #bottomHud .stat-card{
  background: #000 !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: none !important;
}
html[data-chameleon="high-contrast"] body #bottomHud .stat-card .stat-label,
html[data-chameleon="high-contrast"] body #bottomHud .stat-card .stat-value{ color: #FFFFFF !important; }
/* ============== END S8 STAT-CARD POLISH ============== */

/* S8 fix: stat-label uses color classes — kill inherited background */
html body #bottomHud .stat-card .stat-label.flight-color,
html body #bottomHud .stat-card .stat-label.military-color,
html body #bottomHud .stat-card .stat-label.maritime-color,
html body #bottomHud .stat-card .stat-label.sat-color,
html body #bottomHud .stat-card .stat-label.jam-color{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
html body #bottomHud .stat-card .stat-label.flight-color   { color: #00E5D4 !important; }
html body #bottomHud .stat-card .stat-label.military-color { color: #FF3B30 !important; }
html body #bottomHud .stat-card .stat-label.maritime-color { color: #C9A84C !important; }
html body #bottomHud .stat-card .stat-label.sat-color      { color: #AF52DE !important; }
html body #bottomHud .stat-card .stat-label.jam-color      { color: #FFB000 !important; }

/* ============================================================
   S10 — UNIFIED HOVER / ACTIVE / FOCUS INTERACTION STATES
   Three-tier vocabulary applied to every interactive control:
     rest    →  glass-rest + cool border
     hover   →  glass-hover + warm-gold border + 1px lift
     active  →  warm-gold border + warm-gold text + inset shadow
     focus   →  2px warm-gold ring (keyboard only — :focus-visible)
   ============================================================ */

/* Tokens for interaction-state surfaces */
:root{
  --ix-rest-bg:       rgba(255,255,255,0.04);
  --ix-rest-border:   rgba(255,255,255,0.10);
  --ix-rest-text:     #C8D2DC;
  --ix-hover-bg:      rgba(201,168,76,0.10);
  --ix-hover-border:  rgba(201,168,76,0.45);
  --ix-hover-text:    #E8EFF7;
  --ix-active-bg:     rgba(201,168,76,0.18);
  --ix-active-border: rgba(201,168,76,0.85);
  --ix-active-text:   #C9A84C;
  --ix-focus-ring:    0 0 0 2px rgba(201,168,76,0.70), 0 0 0 4px rgba(8,14,28,0.85);
  --ix-press-shadow:  inset 0 1px 4px rgba(0,0,0,0.40);
  --ix-lift-shadow:   0 4px 12px rgba(0,0,0,0.32);
  --ix-transition:    background 0.16s ease, border-color 0.16s ease,
                      color 0.16s ease, box-shadow 0.16s ease,
                      transform 0.16s ease;
}

/* === Keyboard focus ring on every focusable interactive control === */
html body button:focus-visible,
html body select:focus-visible,
html body input[type="text"]:focus-visible,
html body input[type="checkbox"]:focus-visible,
html body input[type="search"]:focus-visible,
html body [role="button"]:focus-visible,
html body [role="menuitem"]:focus-visible,
html body [role="menuitemradio"]:focus-visible,
html body [tabindex="0"]:focus-visible{
  outline: none !important;
  box-shadow: var(--ix-focus-ring) !important;
}

/* === PRESET buttons === */
html body .left-panel .preset-btn,
html body #leftPanel .preset-btn{
  transition: var(--ix-transition) !important;
}
html body .left-panel .preset-btn:hover,
html body #leftPanel .preset-btn:hover{
  background: var(--ix-hover-bg) !important;
  border-color: var(--ix-hover-border) !important;
  color: var(--txt-primary, #E8EFF7) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ix-lift-shadow) !important;
}
html body .left-panel .preset-btn:active,
html body #leftPanel .preset-btn:active{
  transform: translateY(0) !important;
  background: var(--ix-active-bg) !important;
  border-color: var(--ix-active-border) !important;
  color: var(--ix-active-text) !important;
  box-shadow: var(--ix-press-shadow) !important;
}

/* === LAYER TOGGLE rows === */
html body #leftPanel .layer-toggle{
  border-radius: 6px !important;
  padding: 6px 8px !important;
  margin: 1px 0 !important;
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
}
html body #leftPanel .layer-toggle:hover{
  background: var(--ix-hover-bg) !important;
}
html body #leftPanel .layer-toggle input[type="checkbox"]:checked + .toggle-indicator{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.30), 0 0 6px currentColor !important;
}

/* === BASEMAP dropdown (higher specificity to win cascade) === */
html body #basemapSwitcher select.basemap-select,
html body .basemap-switcher select.basemap-select{
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
}
html body #basemapSwitcher select.basemap-select:hover,
html body .basemap-switcher select.basemap-select:hover{
  background: var(--ix-hover-bg) !important;
  border-color: var(--ix-hover-border) !important;
  color: var(--ix-active-text) !important;
}
html body #basemapSwitcher select.basemap-select:active,
html body .basemap-switcher select.basemap-select:active{
  box-shadow: var(--ix-press-shadow) !important;
}

/* === IMAGERY DATE arrow buttons === */
html body .imagery-date-prev,
html body .imagery-date-next,
html body .imagery-date-live{
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
}
html body .imagery-date-prev:hover,
html body .imagery-date-next:hover,
html body .imagery-date-live:hover{
  background: var(--ix-hover-bg) !important;
  border-color: var(--ix-hover-border) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
}
html body .imagery-date-prev:active,
html body .imagery-date-next:active,
html body .imagery-date-live:active{
  transform: scale(0.96) !important;
  box-shadow: var(--ix-press-shadow) !important;
}

/* === TIMELINE PLAYBACK transport buttons === */
html body #timeScrubber .ts-btn,
html body .playback-panel .ts-btn,
html body .playback-controls button{
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
}
html body #timeScrubber .ts-btn:hover,
html body .playback-panel .ts-btn:hover,
html body .playback-controls button:hover{
  background: var(--ix-hover-bg) !important;
  border-color: var(--ix-hover-border) !important;
  color: var(--ix-active-text) !important;
  transform: translateY(-1px) !important;
}
html body #timeScrubber .ts-btn:active,
html body .playback-panel .ts-btn:active,
html body .playback-controls button:active{
  transform: translateY(0) scale(0.97) !important;
  box-shadow: var(--ix-press-shadow) !important;
}
html body #timeScrubber .ts-btn.active,
html body .playback-panel .ts-btn.active,
html body .playback-controls button.active{
  background: var(--ix-active-bg) !important;
  border-color: var(--ix-active-border) !important;
  color: var(--ix-active-text) !important;
}

/* Scrubber thumb */
html body input[type="range"]::-webkit-slider-thumb{
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
html body input[type="range"]:hover::-webkit-slider-thumb{
  transform: scale(1.18) !important;
  box-shadow: 0 0 0 4px rgba(0,229,212,0.18) !important;
}
html body input[type="range"]:active::-webkit-slider-thumb{
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 6px rgba(201,168,76,0.30) !important;
}

/* === ASK MADA send button & textarea === */
html body #intentBox .intent-send,
html body #intentBox button[type="submit"],
html body .intent-send-btn{
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
}
html body #intentBox .intent-send:hover,
html body #intentBox button[type="submit"]:hover,
html body .intent-send-btn:hover{
  background: var(--ix-active-bg) !important;
  border-color: var(--ix-active-border) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ix-lift-shadow) !important;
}
html body #intentBox .intent-send:active,
html body #intentBox button[type="submit"]:active,
html body .intent-send-btn:active{
  transform: translateY(0) scale(0.96) !important;
  box-shadow: var(--ix-press-shadow) !important;
}
html body #intentBox input[type="text"],
html body #intentBox textarea{
  transition: border-color 0.16s ease, background 0.16s ease !important;
}
html body #intentBox input[type="text"]:focus,
html body #intentBox textarea:focus{
  border-color: var(--ix-active-border) !important;
  background: rgba(8,14,28,0.62) !important;
  outline: none !important;
}

/* === ACTIVITY MONITOR header controls (minimize / close / down) === */
html body #auditMonitor .am-controls button,
html body #auditMonitor .panel-controls button,
html body #auditMonitor [class*="ctrl-"]{
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}
html body #auditMonitor .am-controls button:hover,
html body #auditMonitor .panel-controls button:hover,
html body #auditMonitor [class*="ctrl-"]:hover{
  background: var(--ix-hover-bg) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
}
html body #auditMonitor .am-controls button:active,
html body #auditMonitor .panel-controls button:active,
html body #auditMonitor [class*="ctrl-"]:active{
  transform: scale(0.92) !important;
  box-shadow: var(--ix-press-shadow) !important;
}

/* === LANG TOGGLE (عربي / EN) === */
html body #langToggle.lang-btn{
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
}
html body #langToggle.lang-btn:hover{
  background: var(--ix-hover-bg) !important;
  border-color: var(--ix-hover-border) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
  transform: translateY(-1px) !important;
}
html body #langToggle.lang-btn:active{
  transform: translateY(0) scale(0.96) !important;
  box-shadow: var(--ix-press-shadow) !important;
}

/* === DISPLAY MODE select === */
html body #displayMode.mode-select{
  transition: var(--ix-transition) !important;
  cursor: pointer !important;
}
html body #displayMode.mode-select:hover{
  border-color: var(--ix-hover-border) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
}

/* === MOBILE DRAWER chips === */
html body .mobile-drawer-bar button{
  transition: var(--ix-transition) !important;
}
html body .mobile-drawer-bar button:hover{
  background: var(--ix-hover-bg) !important;
  border-color: var(--ix-hover-border) !important;
  color: var(--txt-accent-warm, #C9A84C) !important;
}
html body .mobile-drawer-bar button:active{
  transform: scale(0.96) !important;
  box-shadow: var(--ix-press-shadow) !important;
}
html body .mobile-drawer-bar button.active{
  background: var(--ix-active-bg) !important;
  border-color: var(--ix-active-border) !important;
  color: var(--ix-active-text) !important;
}

/* === STAT-CARD focus-visible (cards are buttons-as-divs but may receive focus) === */
html body #bottomHud .stat-card:focus-visible{
  box-shadow: var(--ix-focus-ring) !important;
}

/* === CHAMELEON / TEXT triggers — refine active/pressed === */
html body #chamTrigger:active,
html body #a11yTrigger:active{
  transform: scale(0.97) !important;
  box-shadow: var(--ix-press-shadow) !important;
}
html body #chamPopup .cham-popup-item:active,
html body #a11yPopup .a11y-popup-item:active{
  background: var(--ix-active-bg) !important;
  transform: scale(0.98) !important;
}

/* === Disabled state vocabulary === */
html body button[disabled],
html body [aria-disabled="true"]{
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* === Respect prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce){
  :root{ --ix-transition: background 0.05s, border-color 0.05s, color 0.05s !important; }
  html body *,
  html body *::before,
  html body *::after{
    transition-duration: 0.05s !important;
    animation-duration: 0.05s !important;
  }
}

/* === Chameleon LIGHT mode token overrides === */
html[data-chameleon="light"]{
  --ix-rest-text:    #1A4F6A;
  --ix-hover-bg:     rgba(140,106,31,0.10);
  --ix-hover-border: rgba(140,106,31,0.45);
  --ix-active-bg:    rgba(140,106,31,0.20);
  --ix-active-text:  #8C6A1F;
}
html[data-chameleon="high-contrast"]{
  --ix-rest-border:  #FFFFFF;
  --ix-hover-border: #FFFF00;
  --ix-active-border:#FFFF00;
  --ix-active-text:  #FFFF00;
  --ix-focus-ring:   0 0 0 3px #FFFF00, 0 0 0 6px #000000;
}
/* ============== END S10 INTERACTION STATES ============== */

/* ============================================================
   S12 — SHARDS NAV CLEANUP (8-allowlist) + cluster grouping
   S13 — Audit-log integration severity styling
   ============================================================ */

/* Wider menu for cluster grouping + role text */
html body #shardNav.shard-nav .shard-menu{
  width: 360px !important;
  max-height: 78vh;
  overflow-y: auto;
  padding: 0;
  border-radius: 4px;
}

/* Trigger: count chip */
html body #shardNav.shard-nav .shard-trigger{
  gap: 8px;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  border: 1px solid var(--ix-rest-border, rgba(0,229,212,0.50)) !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html body #shardNav.shard-nav .shard-trigger:hover{
  background: var(--ix-hover-bg, rgba(201,168,76,0.10)) !important;
  border-color: var(--ix-hover-border, rgba(201,168,76,0.45)) !important;
  color: var(--txt-accent-warm, #C9A84C);
}
html body #shardNav.shard-nav.open .shard-trigger,
html body #shardNav.shard-nav .shard-trigger[aria-expanded="true"]{
  background: var(--ix-active-bg, rgba(201,168,76,0.18)) !important;
  border-color: var(--ix-active-border, rgba(201,168,76,0.60)) !important;
  color: var(--ix-active-text, #C9A84C);
}
html body #shardNav.shard-nav .shard-trigger:focus-visible{
  box-shadow: var(--ix-focus-ring, 0 0 0 2px rgba(201,168,76,0.70), 0 0 0 4px rgba(8,14,28,0.85)) !important;
  outline: none;
}

.shard-count{
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(201,168,76,0.16);
  border: 1px solid rgba(201,168,76,0.40);
  color: var(--txt-accent-warm, #C9A84C);
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

/* Header with meta strip */
html body #shardNav.shard-nav .shard-menu-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  background: rgba(201,168,76,0.10) !important;
  border-bottom: 1px solid rgba(201,168,76,0.28) !important;
  color: var(--txt-accent-warm, #C9A84C);
}
.shard-menu-meta{
  font-size: 8px;
  opacity: 0.7;
  letter-spacing: 0.15em;
}

/* Cluster grouping */
.shard-cluster{
  padding: 4px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.shard-cluster:last-of-type{ border-bottom: none; }
.shard-cluster-header{
  padding: 8px 14px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,229,212,0.62);
  background: linear-gradient(180deg, rgba(0,229,212,0.06) 0%, transparent 100%);
  border-left: 2px solid rgba(0,229,212,0.45);
  margin: 4px 0 2px;
}
.shard-cluster[data-cluster="EREBUS-CSE"] .shard-cluster-header{
  color: rgba(255,59,48,0.78);
  border-left-color: rgba(255,59,48,0.55);
  background: linear-gradient(180deg, rgba(255,59,48,0.06) 0%, transparent 100%);
}
.shard-cluster[data-cluster="WAGHA"] .shard-cluster-header{
  color: rgba(123,104,238,0.82);
  border-left-color: rgba(123,104,238,0.55);
  background: linear-gradient(180deg, rgba(123,104,238,0.06) 0%, transparent 100%);
}

/* Shard items: 2-line layout (code + role) */
html body #shardNav.shard-nav .shard-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: #C9D1D9;
  text-decoration: none;
  font-size: 11px;
  border-bottom: 1px dotted rgba(255,255,255,0.04);
  transition: background 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}
html body #shardNav.shard-nav .shard-item:last-child{ border-bottom: none; }
html body #shardNav.shard-nav .shard-item:hover{
  background: var(--ix-hover-bg, rgba(201,168,76,0.10)) !important;
  padding-left: 17px;
}
html body #shardNav.shard-nav .shard-item:focus-visible{
  box-shadow: var(--ix-focus-ring, 0 0 0 2px rgba(201,168,76,0.70), 0 0 0 4px rgba(8,14,28,0.85)) inset !important;
  outline: none;
}
html body #shardNav.shard-nav .shard-item.active{
  background: rgba(0,229,212,0.10) !important;
  color: var(--txt-accent, #00E5D4);
  cursor: default;
}
html body #shardNav.shard-nav .shard-item.active:hover{
  padding-left: 14px;
}

.shard-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.shard-code{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: inherit;
}
.shard-role{
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(180,200,220,0.55);
  text-transform: uppercase;
}
.shard-item.active .shard-role{
  color: rgba(0,229,212,0.65);
}

.shard-current{
  font-size: 8px;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0,229,212,0.14);
  border: 1px solid rgba(0,229,212,0.35);
  color: var(--txt-accent, #00E5D4);
  white-space: nowrap;
}
.shard-arrow{
  color: rgba(180,200,220,0.40);
  font-size: 12px;
  transition: transform 0.18s ease, color 0.18s ease;
}
html body #shardNav.shard-nav .shard-item:hover .shard-arrow{
  color: var(--txt-accent-warm, #C9A84C);
  transform: translate(2px, -2px);
}

/* ── S13: Activity Monitor severity styling for shard events ── */
html body .audit-monitor .audit-row.warn{
  background: rgba(255,107,53,0.06);
  border-left: 2px solid rgba(255,107,53,0.60);
  padding-left: 8px;
}
html body .audit-monitor .audit-row.warn .audit-act{
  color: #FF6B35;
  font-weight: 600;
}
html body .audit-monitor .audit-row.crit{
  background: rgba(255,59,48,0.10);
  border-left: 2px solid rgba(255,59,48,0.70);
  padding-left: 8px;
}
html body .audit-monitor .audit-row.crit .audit-act{
  color: #FF3B30;
  font-weight: 700;
}

/* Highlight shard-related audit acts for quick scanning */
html body .audit-monitor .audit-row .audit-act{
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
html body .audit-monitor .audit-row .audit-act:where([data-shard]){
  color: var(--txt-accent-warm, #C9A84C);
}

/* Responsive tweaks */
@media (max-width: 1024px){
  html body #shardNav.shard-nav .shard-menu{ width: 320px !important; }
}
@media (max-width: 768px){
  html body #shardNav.shard-nav .shard-menu{
    width: calc(100vw - 24px) !important;
    max-width: 360px;
    left: 0 !important;
  }
  .shard-count{ display: none; }
}

/* ====== END S12/S13 ====== */

/* ════════════════════════════════════════════════════════════════════
   CORRECTION PASS (June 4, 2026) — Layout discipline
   User-locked spec answers:
     A. ACTIVITY MONITOR + ASK MADA right-align to IMAGERY DATE (right:14px)
     B. TIMELINE → INTEL FEED → stat-row inside bottom zone, no map obstruction
     C. Single-row bottom band: [CHAMELEON | stats | LAST UPDATE | TEXT]
     D. SHARDS menu narrowed (trim right gutter)
   Spec: top-right column right-edge = 14px (matches #timeScrubber.time-scrubber)
   ════════════════════════════════════════════════════════════════════ */

/* ── CORRECTION A ─ Right column right-aligns to IMAGERY DATE (right:14px) ── */
html body #auditMonitor.audit-monitor,
html body #activityMonitor{
  right: 14px !important;
}
html body #intentBox,
html body .intent-box{
  right: 14px !important;
}
html body .right-panel{
  right: 14px !important;
}
/* The entity panel overlay shift adjusts to the new right edge */
html body.entity-active .intent-box{ right: 366px !important; }

/* ═══════════════════════════════════════════════════════════════
   CORRECTION B → SUPERSEDED BY A1 STRUCTURAL DOCK (June 2026)
   The old offset-stacking (each element position:fixed at a hand-tuned
   bottom:Npx) is gone. #bottomDock is now ONE fixed flex-COLUMN container
   (left:14 right:14 bottom:14, gap:6) and these three elements are in-flow
   flex children. The rules below now only set in-flow geometry (height,
   borders, flex behaviour) — NOT position. They keep their high specificity
   so they neutralise every earlier `position:fixed; bottom:Npx` block for
   these three elements without needing to hunt each one down.
   ═══════════════════════════════════════════════════════════════ */

/* The ONE real lower-HUD container: fixed flex-COLUMN bottom band. */
html body #bottomDock{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1800;            /* above map (z:0) & rails, below modals/topHud(z:2000) */
  pointer-events: none;     /* dock chrome is transparent; children re-enable */
}
html body #bottomDock > *{ pointer-events: auto; }

/* INTEL FEED — in-flow flex ROW child of the dock. Label is first flex child,
   track takes the remaining width. No position:fixed, no bottom offset. */
html body #intelTicker.intel-ticker{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  height: 28px !important;
  flex: 0 0 auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;            /* spec: label↔track gap */
  overflow: hidden !important;
  border-radius: 6px !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.22)) !important;
}
/* Label: FIRST flex child, never absolute, never covers ticker text. */
html body #intelTicker .intel-ticker-label{
  position: static !important;
  left: auto !important;
  order: 0 !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  padding: 0 12px !important;
  font-size: 9px !important;
  display: flex !important;
  align-items: center !important;
}
/* Track: SECOND flex child, takes remaining width, clips its own overflow. */
html body #intelTicker .intel-ticker-track{
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* TIMELINE PLAYBACK — in-flow flex child, TOP of the dock column. Kept slim ~42px. */
html body #playbackPanel.playback-panel,
html body .playback-panel{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: 100% !important;
  height: 42px !important;          /* slim per spec */
  flex: 0 0 auto !important;
  transform: none !important;
  z-index: auto !important;
  padding: 4px 12px !important;
  display: flex !important;
  flex-direction: row !important;   /* single row, header + controls inline */
  align-items: center !important;
  gap: 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.22)) !important;
}
html body .playback-panel.collapsed{ height: 26px !important; }
html body #playbackPanel .playback-header{
  flex: 0 0 auto !important;
  height: auto !important;
  font-size: 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body #playbackPanel .playback-title{
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap !important;
}
html body #playbackPanel .playback-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
html body #playbackPanel .playback-controls{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html body #playbackPanel .pb-scrubber{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body #playbackPanel .playback-ts{
  flex: 0 0 auto !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}
html body #playbackPanel .pb-btn,
html body #playbackPanel .pb-select{
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 9px !important;
}

/* ── CORRECTION C → A1: stat-card band is now the BOTTOM in-flow child of the
   dock. Internal stat-card layout is SACRED and untouched — only the position
   model changes (fixed/offset → in-flow flex child). */
html body #bottomHud.hud-bottom,
html body .hud-bottom{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  flex: 0 0 auto !important;
  height: 78px !important;
  padding: 6px 14px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow: visible !important;
  z-index: auto !important;
  border-radius: 6px !important;
}

/* Stat cards: compact, do not grow, fixed width so CHAMELEON+TEXT fit */
html body .hud-bottom .stat-card,
html body #bottomHud .stat-card{
  flex: 0 0 auto !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 60px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
html body .hud-bottom .stat-card .stat-label,
html body #bottomHud .stat-card .stat-label{
  font: 700 8px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.10em !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
html body .hud-bottom .stat-card .stat-value,
html body #bottomHud .stat-card .stat-value{
  font: 700 15px 'JetBrains Mono', monospace !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
/* LAST UPDATE card: a touch wider for the timestamp */
html body .hud-bottom .stat-card:has(#lastUpdate),
html body #bottomHud .stat-card:has(#lastUpdate){
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  order: 998 !important;
}
html body .hud-bottom .stat-card #lastUpdate,
html body #bottomHud .stat-card #lastUpdate{
  font-size: 11px !important;
}

/* CHAMELEON dock — anchor at left of band */
html body #chameleonBar.chameleon-dock,
html body #bottomHud #chameleonBar{
  order: 1 !important;
  flex: 0 0 auto !important;
  margin: 0 8px 0 0 !important;
}
html body #chameleonBar .cham-trigger{
  min-height: 60px !important;
  height: 60px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
}

/* TEXT dock — anchor at right of band */
html body #a11yBar.a11y-dock,
html body #bottomHud #a11yBar,
html body #a11yBar{
  order: 999 !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 8px !important;
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}
html body #a11yBar .a11y-trigger,
html body #a11yTrigger{
  min-height: 60px !important;
  height: 60px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--glass-bg-rest, rgba(8,14,28,0.42)) !important;
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.25)) !important;
  border-top: 1px solid var(--glass-border-warm, rgba(201,168,76,0.36)) !important;
}

/* Defensive: kill any prior absolute/fixed positioning trying to drag
   intel ticker or playback panel back to map center */
html body #intelTicker.intel-ticker[style],
html body #playbackPanel.playback-panel[style]{
  /* Inline styles from JS get overridden by !important rules above */
}

/* ── CORRECTION D ─ SHARDS pill compact, no obstruction of BASEERA/INCIDENT ── */
/* FIX-B: Pill must NOT overlap page-nav. page-nav is at top:32 left:50% (centered).
   At 1356px viewport, page-nav spans roughly 365→990. Place SHARDS trigger to the
   LEFT of page-nav at left:200, compact size, so logo(←295) + SHARDS(200→295) + gap +
   page-nav(365→990) all fit without overlap. */
html body #shardNav.shard-nav{
  left: 200px !important;
  top: 32px !important;
  z-index: 946 !important;        /* below page-nav z=945? actually page-nav is 945; SHARDS slightly above so menu opens on top */
}
html body #shardNav.shard-nav .shard-trigger{
  padding: 4px 8px !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  gap: 5px !important;
}
html body #shardNav.shard-nav .shard-trigger .shard-icon{ font-size: 11px !important; }
html body #shardNav.shard-nav .shard-trigger .shard-label{ font-size: 9px !important; }
html body #shardNav.shard-nav .shard-trigger .shard-count{ font-size: 8px !important; padding: 1px 5px !important; }
html body #shardNav.shard-nav .shard-trigger .shard-chevron{ font-size: 8px !important; }

html body #shardNav.shard-nav .shard-menu{
  width: 290px !important;
}
html body #shardNav.shard-nav .shard-item{
  padding: 8px 12px !important;
}
html body #shardNav.shard-nav .shard-cluster-header{
  padding: 6px 12px 3px !important;
}
html body #shardNav.shard-nav .shard-menu-header{
  padding: 7px 12px !important;
}
/* FIX-B: keep page-overlay's left:200 (already matches), drop stale 380 fallback */
body.page-overlay #shardNav.shard-nav{ left: 200px !important; }

/* TABLET ≤ 1024px: page-nav center shifts narrower, SHARDS must not collide */
@media (max-width: 1024px){
  html body #shardNav.shard-nav{ left: 170px !important; }
  html body #shardNav.shard-nav .shard-menu{ width: 270px !important; }
  html body #shardNav.shard-nav .shard-trigger .shard-label{ display: none !important; }
}
@media (max-width: 768px){
  html body #shardNav.shard-nav{
    left: 8px !important;
    top: 60px !important;          /* drop below topHud row 1 on mobile */
  }
  html body #shardNav.shard-nav .shard-menu{
    width: calc(100vw - 16px) !important;
    max-width: 320px !important;
  }
}

/* ── Responsive: tablet/mobile preserve right-edge alignment ── */
@media (max-width: 1024px){
  html body #auditMonitor.audit-monitor,
  html body #activityMonitor{ right: 14px !important; width: 300px !important; }
  html body #intentBox{ right: 14px !important; width: 300px !important; }
  html body.entity-active .intent-box{ right: 326px !important; }
  html body .hud-bottom .stat-card{ width: 70px !important; min-width: 70px !important; max-width: 70px !important; }
  html body .hud-bottom .stat-card .stat-value{ font-size: 13px !important; }
}
@media (max-width: 768px){
  html body #auditMonitor.audit-monitor,
  html body #activityMonitor{ right: 8px !important; left: 8px !important; width: auto !important; }
  html body #intentBox{ right: 8px !important; left: 8px !important; width: auto !important; }
  html body #intelTicker.intel-ticker{ left: 8px !important; right: 8px !important; }
  html body #playbackPanel.playback-panel{ left: 8px !important; right: 8px !important; }
  html body #bottomHud.hud-bottom{ padding: 4px 8px !important; gap: 4px !important; overflow-x: auto !important; }
}

/* ── Kill stale `right: 62px` rules from older a11y-gutter doctrine ── */
html body #auditMonitor[style*="right: 62"],
html body #intentBox[style*="right: 62"]{
  right: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   FIX-C/D — Tablet & Mobile top nav cleanup (user-locked)
   ════════════════════════════════════════════════════════════════════ */

/* Cluster burger: hidden on desktop, visible ≤768px */
html body #clusterBurger.cluster-burger{
  display: none;
  position: fixed;
  top: 8px;
  right: 90px;                 /* before lang toggle */
  z-index: 952;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: var(--glass-bg-rest, rgba(8,14,28,0.55));
  border: 1px solid var(--glass-border-cool, rgba(0,229,212,0.42));
  color: #00E5D4;
  font: 700 9px 'JetBrains Mono', monospace;
  letter-spacing: 0.14em;
  border-radius: 6px;
  cursor: pointer;
}
html body #clusterBurger .cb-icon{ font-size: 13px; line-height: 1; }
html body #clusterBurger.open{
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.60);
  color: #C9A84C;
}
html body #clusterDropdown.cluster-dropdown{
  position: fixed;
  top: 50px;
  right: 8px;
  z-index: 951;
  display: none;
  flex-direction: column;
  min-width: 220px;
  background: rgba(8,12,18,0.97);
  border: 1px solid rgba(0,229,212,0.45);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  border-radius: 6px;
  overflow: hidden;
}
html body #clusterDropdown .cluster-dropdown-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,229,212,0.08);
  color: rgba(201,209,217,0.85);
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
html body #clusterDropdown .cluster-dropdown-item:last-child{ border-bottom: none; }
html body #clusterDropdown .cluster-dropdown-item:hover{
  background: color-mix(in srgb, var(--accent, #00E5D4) 12%, transparent);
  color: var(--accent, #00E5D4);
}
html body #clusterDropdown .cluster-dropdown-item.active{
  background: color-mix(in srgb, var(--accent, #00E5D4) 18%, transparent);
  color: var(--accent, #00E5D4);
  border-left: 3px solid var(--accent, #00E5D4);
}

/* ── TABLET 769–1024px: keep page-nav inline, just compact ── */
@media (min-width: 769px) and (max-width: 1024px){
  html body .hud-title{
    font-size: 11px !important;
    max-width: 180px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .hud-center{ gap: 4px !important; }
  html body .hud-center .badge{ font-size: 8px !important; padding: 2px 5px !important; }
  html body .page-nav{ gap: 0 !important; padding: 2px !important; }
  html body .page-nav .page-nav-btn{
    padding: 3px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.10em !important;
    gap: 3px !important;
  }
  html body .page-nav .page-nav-icon{ font-size: 11px !important; }
  html body #timeScrubber.time-scrubber{ font-size: 9px !important; padding: 3px 6px !important; gap: 4px !important; }
  html body #activityMonitor .panel-header,
  html body #intentBox .intent-header{ font-size: 9px !important; }
}

/* ── MOBILE ≤768px: burger replaces page-nav, top nav becomes one row ── */
@media (max-width: 768px){
  html body #clusterBurger.cluster-burger{ display: flex !important; }
  html body .page-nav{ display: none !important; }     /* page-nav hidden, burger replaces it */
  html body .hud-center{ display: none !important; }    /* drop center badges row */
  html body .hud-title{
    font-size: 10px !important;
    max-width: calc(100vw - 220px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .hud-left{ gap: 6px !important; }
  html body .hud-logo{ width: 18px !important; height: 18px !important; }
  html body .badge-active{ font-size: 7px !important; padding: 1px 4px !important; }
  html body #clock.hud-clock{ font-size: 9px !important; }
  html body .mode-select{ font-size: 9px !important; padding: 2px 4px !important; }
  html body .lang-btn{ font-size: 9px !important; padding: 3px 7px !important; }

  /* IMAGERY DATE compact — just calendar + date, no label */
  html body #timeScrubber.time-scrubber .ts-label{ display: none !important; }
  html body #timeScrubber.time-scrubber{
    font-size: 9px !important;
    padding: 4px 6px !important;
    gap: 3px !important;
    right: 8px !important;
    top: 56px !important;        /* drop below burger row */
  }
  html body #timeScrubber .ts-latest-btn,
  html body #timeScrubber button{ font-size: 8px !important; padding: 2px 5px !important; }

  /* Hide the duplicate LAYERS / AUDIT / ASK MADA pseudo-ribbon on mobile.
     These controls already exist in the consciousness bar + side panels. */
  html body #mobileRibbon,
  html body .mobile-shortcut-ribbon,
  html body .mobile-drawer-bar{ display: none !important; }
}

/* ====== END CORRECTION PASS ====== */

/* ════════════════════════════════════════════════════════════════════════
   A2 CORRECTION PASS — TOP NAV + RAILS STRUCTURAL REWRITE (responsive)
   ────────────────────────────────────────────────────────────────────────
   Supersedes every earlier free-floating `position:fixed; top:Npx` rule for
   #shardNav, #pageNav, #clusterBurger, #timeScrubber, #auditMonitor,
   #intentBox and #basemapSwitcher. Those elements are now REPARENTED into
   real flex containers (#topHud row, #rightRail column) by the index.html
   bootstrap. We give them in-flow (`position:static`) values at the highest
   live specificity so no legacy offset block can drag them back.
   ACAI V2 tokens only. No new offset-hack siblings.
   Breakpoints: desktop ≥1025px · tablet 769–1024px · mobile ≤768px.
   ════════════════════════════════════════════════════════════════════════ */

/* ── #topHud : the ONE flex bar that owns the top nav ─────────────────── */
html body #topHud.hud-top{
  position: fixed !important;
  top: 24px !important;         /* clears the 24px RESTRICTED classification strip */
  left: 0 !important; right: 0 !important;
  height: 46px !important;      /* fits the 26px-tall SHARDS pill / page-nav with breathing room */
  min-height: 46px !important;
  padding: 0 14px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;   /* vertically centre every child */
  justify-content: flex-start !important;
  gap: 10px !important;
  line-height: 1.1 !important;
  z-index: 2000 !important;     /* above rails & dock; below the z:9999 strip */
  overflow: visible !important; /* no vertical clipping of labels */
  border-bottom: 1px solid var(--glass-border, rgba(0,229,212,0.22)) !important;
}

/* Order the reparented children left→right via flex order (insertion-safe). */
html body #topHud > .hud-left   { order: 0 !important; flex: 0 0 auto !important; }
html body #topHud > #shardNav   { order: 1 !important; flex: 0 0 auto !important; }
html body #topHud > #pageNav    { order: 2 !important; flex: 0 1 auto !important; }
html body #topHud > #clusterBurger { order: 3 !important; flex: 0 0 auto !important; }
html body #topHud > .hud-center { order: 4 !important; flex: 1 1 auto !important; justify-content: center !important; min-width: 0 !important; }
html body #topHud > .hud-right  { order: 5 !important; flex: 0 0 auto !important; margin-left: auto !important; }

html body #topHud > .hud-left,
html body #topHud > .hud-center,
html body #topHud > .hud-right{ display: flex !important; align-items: center !important; gap: 8px !important; }

/* ── #shardNav : in-flow SHARDS pill inside #topHud ──────────────────── */
html body #shardNav.shard-nav{
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important;
  z-index: auto !important;            /* menu uses its own stacking below */
  display: flex !important; align-items: center !important;
}
html body #shardNav.shard-nav .shard-trigger{
  padding: 4px 9px !important;
  font: 700 9px var(--font-mono, 'JetBrains Mono', monospace) !important;
  letter-spacing: 0.14em !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important;
  background: rgba(0,229,212,0.10) !important;
  border: 1px solid var(--glass-border, rgba(0,229,212,0.22)) !important;
  color: var(--cyan, #00E5D4) !important;
  border-radius: 6px !important; cursor: pointer !important;
}
html body #shardNav.shard-nav .shard-trigger:hover{ background: rgba(0,229,212,0.20) !important; }
html body #shardNav.shard-nav.open .shard-trigger,
html body #shardNav.shard-nav .shard-trigger[aria-expanded="true"]{
  background: rgba(201,168,76,0.18) !important;
  border-color: rgba(201,168,76,0.55) !important;
  color: var(--gold, #C9A84C) !important;
}

/* SHARDS menu: anchored under the pill, CONTAINED with internal scroll so it
   never obstructs the BASEERA wordmark / INCIDENT page-nav. */
html body #shardNav.shard-nav{ position: relative !important; }
html body #shardNav.shard-nav .shard-menu{
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important; right: auto !important; bottom: auto !important;
  width: 300px !important;
  max-width: min(340px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 70px) !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  z-index: 2400 !important;            /* above bar; opens over the map */
  background: rgba(8,12,18,0.97) !important;
  border: 1px solid var(--glass-border, rgba(0,229,212,0.32)) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
}

/* ── #pageNav : 5 cluster buttons, in-flow flex row ─────────────────── */
html body #pageNav.page-nav{
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important; z-index: auto !important;
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; gap: 4px !important;
  background: transparent !important; padding: 0 !important;
}
html body #pageNav.page-nav .page-nav-btn{
  display: flex !important; align-items: center !important; gap: 5px !important;
  padding: 5px 11px !important;
  font: 700 10px var(--font-mono, 'JetBrains Mono', monospace) !important;
  letter-spacing: 0.10em !important;
  white-space: nowrap !important;
  background: rgba(10,14,40,0.50) !important;
  border: 1px solid var(--glass-border, rgba(0,229,212,0.22)) !important;
  color: #C4DFE8 !important;
  border-radius: 6px !important; cursor: pointer !important;
  transition: all 160ms !important;
}
html body #pageNav.page-nav .page-nav-btn:hover{
  border-color: var(--accent, #00E5D4) !important;
  color: var(--accent, #00E5D4) !important;
}
html body #pageNav.page-nav .page-nav-btn.active{
  background: color-mix(in srgb, var(--accent, #00E5D4) 16%, transparent) !important;
  border-color: var(--accent, #00E5D4) !important;
  color: var(--accent, #00E5D4) !important;
}
html body #pageNav.page-nav .page-nav-icon{ font-size: 12px !important; line-height: 1 !important; }
html body #pageNav.page-nav .page-nav-label{ line-height: 1 !important; }

/* ── #clusterBurger : in-flow, mobile-only (hidden ≥769px) ───────────── */
html body #clusterBurger.cluster-burger{
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  margin: 0 !important; z-index: auto !important;
  display: none !important;            /* shown only at ≤768px below */
  align-items: center !important; gap: 5px !important;
  padding: 5px 10px !important;
  background: rgba(0,229,212,0.10) !important;
  border: 1px solid var(--glass-border, rgba(0,229,212,0.42)) !important;
  color: var(--cyan, #00E5D4) !important;
  font: 700 9px var(--font-mono, 'JetBrains Mono', monospace) !important;
  letter-spacing: 0.14em !important; border-radius: 6px !important; cursor: pointer !important;
  white-space: nowrap !important;
}
html body #clusterBurger.cluster-burger .cb-icon{ font-size: 13px !important; line-height: 1 !important; }
html body #clusterBurger.cluster-burger.open{
  background: rgba(201,168,76,0.18) !important;
  border-color: rgba(201,168,76,0.60) !important;
  color: var(--gold, #C9A84C) !important;
}
/* Cluster dropdown anchored under the bar on mobile (strip 24 + bar 46 = 70). */
html body #clusterDropdown.cluster-dropdown{
  position: fixed !important; top: 72px !important; right: 8px !important; left: auto !important;
  z-index: 2350 !important; min-width: 220px !important;
  max-height: calc(100vh - 84px) !important; overflow-y: auto !important;
}

/* ── #topHud bar typography (in-flow children) ──────────────────────── */
html body #topHud .hud-title{
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.5px !important;
  color: var(--cyan, #00E5D4) !important; white-space: nowrap !important;
}
html body #topHud .hud-center .badge{ white-space: nowrap !important; }

/* ════════════════════════════════════════════════════════════════════
   RIGHT RAIL — #rightRail flex COLUMN (top→bottom)
   #timeScrubber (IMAGERY DATE) → #auditMonitor (ACTIVITY MONITOR) →
   #intentBox (ASK MADA). Replaces hand-tuned fixed coordinates.
   ════════════════════════════════════════════════════════════════════ */
html body #rightRail{
  position: fixed !important;
  top: 78px !important;                 /* just under the top bar (strip 24 + bar 46 + gap) */
  right: 14px !important;
  bottom: 190px !important;             /* clears the lower dock band */
  width: 340px !important;
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; gap: 12px !important;
  z-index: 1500 !important;             /* above map, below topHud/dock chrome */
  pointer-events: none !important;      /* transparent rail; children re-enable */
  overflow: visible !important;
}
html body #rightRail > *{ pointer-events: auto !important; }
/* Guarantee top→bottom order regardless of JS insertion timing. */
html body #rightRail > #timeScrubber{ order: 0 !important; }
html body #rightRail > #auditMonitor,
html body #rightRail > #activityMonitor{ order: 1 !important; }
html body #rightRail > #intentBox{ order: 2 !important; }

/* IMAGERY DATE chip — in-flow first child */
html body #rightRail #timeScrubber.time-scrubber{
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important; z-index: auto !important;
  width: 100% !important; max-width: none !important; flex: 0 0 auto !important;
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
  gap: 6px !important; padding: 6px 10px !important;
  border-radius: 8px !important;
}
html body #rightRail #timeScrubber .ts-label,
html body #rightRail #timeScrubber .scrubber-label{ white-space: nowrap !important; }

/* ACTIVITY MONITOR — in-flow second child */
html body #rightRail #auditMonitor.audit-monitor,
html body #rightRail #activityMonitor{
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important; z-index: auto !important;
  width: 100% !important; max-width: none !important;
  flex: 0 1 auto !important;            /* compact at top of column */
  height: auto !important; max-height: 280px !important; min-height: 120px !important;
}

/* ASK MADA — in-flow third child */
html body #rightRail #intentBox{
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important; z-index: auto !important;
  width: 100% !important; max-width: none !important;
  flex: 0 0 auto !important; max-height: 240px !important;
}

/* ── TABLET PANEL-HEADER WRAP FIX (verified defect @1024px) ──────────────
   The real rendered headers are .audit-header (title .audit-title +
   .audit-operator) and .intent-header (title .intent-title + .intent-routing).
   Force single-line: nowrap + smaller font + let the meta shrink/hide. */
html body #rightRail #auditMonitor .audit-header,
html body #rightRail #intentBox .intent-header{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  gap: 6px !important;
}
html body #rightRail #auditMonitor .audit-title,
html body #rightRail #auditMonitor .audit-operator,
html body #rightRail #intentBox .intent-title,
html body #rightRail #intentBox .intent-routing{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #rightRail #auditMonitor .audit-title,
html body #rightRail #intentBox .intent-title{ flex: 0 1 auto !important; }
html body #rightRail #auditMonitor .audit-operator,
html body #rightRail #intentBox .intent-routing{ flex: 0 1 auto !important; min-width: 0 !important; }

/* ════════════════════════════════════════════════════════════════════
   STAT BAND — horizontal scroll on narrow viewports (cards SACRED)
   We change ONLY the band container's overflow; never the cards.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  html body #bottomDock #bottomHud.hud-bottom{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    scrollbar-width: thin !important;                 /* subtle scroll hint */
    scrollbar-color: rgba(0,229,212,0.45) transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body #bottomDock #bottomHud.hud-bottom::-webkit-scrollbar{ height: 5px !important; }
  html body #bottomDock #bottomHud.hud-bottom::-webkit-scrollbar-thumb{
    background: rgba(0,229,212,0.45) !important; border-radius: 3px !important;
  }
  html body #bottomDock #bottomHud.hud-bottom::-webkit-scrollbar-track{ background: transparent !important; }
}

/* ════════════════════════════════════════════════════════════════════
   BREAKPOINT — DESKTOP ≥1025px  (clean operational bar)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px){
  html body #topHud > #clusterBurger.cluster-burger{ display: none !important; }
  html body #topHud > #pageNav.page-nav{ display: flex !important; }
  /* page-nav + SHARDS pill take priority over decorative status badges:
     hide .hud-center on desktop so the operational bar stays uncluttered. */
  html body #topHud > .hud-center{ display: none !important; }
  html body #topHud > .hud-right{ margin-left: auto !important; }
  html body #topHud .hud-title{ font-size: 12px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   BREAKPOINT — TABLET 769–1024px  (readable compact bar, no clipping)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px){
  html body #topHud.hud-top{ gap: 7px !important; padding: 0 10px !important; }
  html body #topHud .hud-title{
    font-size: 10px !important; max-width: 150px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  /* Decorative status badges hidden on tablet too — page-nav + SHARDS pill
     take priority; the right cluster (PRISM/clock/mode/lang) needs the room. */
  html body #topHud > .hud-center{ display: none !important; }
  html body #topHud > #clusterBurger.cluster-burger{ display: none !important; }

  /* page-nav compact but NOT clipped */
  html body #pageNav.page-nav{ gap: 3px !important; }
  html body #pageNav.page-nav .page-nav-btn{
    padding: 4px 7px !important; font-size: 9px !important; letter-spacing: 0.06em !important; gap: 3px !important;
  }
  html body #pageNav.page-nav .page-nav-icon{ font-size: 11px !important; }

  /* SHARDS pill compact */
  html body #shardNav.shard-nav .shard-trigger{ padding: 4px 7px !important; font-size: 8px !important; }
  html body #shardNav.shard-nav .shard-trigger .shard-count{ font-size: 7px !important; padding: 1px 4px !important; }
  html body #shardNav.shard-nav .shard-menu{ width: 280px !important; }

  html body #topHud .hud-clock{ font-size: 9px !important; }
  html body #topHud .mode-select{ font-size: 9px !important; padding: 2px 4px !important; }
  html body #topHud .lang-btn{ font-size: 9px !important; padding: 3px 7px !important; }

  /* Right rail narrower on tablet so it does not collide */
  html body #rightRail{ width: 290px !important; gap: 10px !important; }
  /* Header titles compact one-line (defeats ACTIVITY/MONITOR wrap) */
  html body #rightRail #auditMonitor .audit-header,
  html body #rightRail #intentBox .intent-header{ font-size: 9px !important; padding: 7px 10px !important; }
  html body #rightRail #auditMonitor .audit-title,
  html body #rightRail #intentBox .intent-title{ font-size: 9px !important; letter-spacing: 0.12em !important; }
  html body #rightRail #auditMonitor .audit-operator,
  html body #rightRail #intentBox .intent-routing{ font-size: 8px !important; letter-spacing: 0.08em !important; }
}

/* ════════════════════════════════════════════════════════════════════
   BREAKPOINT — MOBILE ≤768px  (single-row top HUD)
   logo/wordmark + ☰ CLUSTERS burger + lang toggle. Everything else
   collapses into the burger drawer or hides.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  html body #topHud.hud-top{
    height: 46px !important; padding: 0 8px !important; gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  html body #topHud .hud-logo{ width: 16px !important; height: 16px !important; }
  html body #topHud .hud-left{ gap: 5px !important; min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; }
  html body #topHud .hud-title{
    font-size: 9px !important; max-width: calc(100vw - 175px) !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  /* LIVE badge stays small but visible in hud-left */
  html body #topHud .hud-left .badge-active{ font-size: 7px !important; padding: 1px 4px !important; }

  /* COLLAPSE / HIDE non-essential top items */
  html body #topHud > #shardNav.shard-nav{ display: none !important; }   /* SHARDS into nothing on mobile */
  html body #topHud > #pageNav.page-nav{ display: none !important; }     /* page-nav → burger drawer */
  html body #topHud > .hud-center{ display: none !important; }           /* badges row hidden */
  html body #topHud > .hud-right #clock.hud-clock{ display: none !important; }    /* clock → hidden */
  html body #topHud > .hud-right #displayMode.mode-select{ display: none !important; } /* mode → hidden */

  /* SHOW burger inside the single row, before lang toggle */
  html body #topHud > #clusterBurger.cluster-burger{
    display: flex !important; order: 3 !important; margin-left: auto !important;
    flex: 0 0 auto !important; padding: 4px 6px !important; font-size: 7px !important; gap: 4px !important;
  }
  html body #topHud > #clusterBurger.cluster-burger .cb-icon{ font-size: 12px !important; }
  html body #topHud > .hud-right{ order: 4 !important; margin-left: 5px !important; gap: 4px !important; flex: 0 0 auto !important; }
  html body #topHud .lang-btn{ font-size: 8px !important; padding: 3px 6px !important; }

  /* Right rail → full-width single column under the bar (strip 24 + bar 46) */
  html body #rightRail{
    top: 74px !important; left: 8px !important; right: 8px !important;
    width: auto !important; bottom: 200px !important; gap: 8px !important;
  }
  html body #rightRail #timeScrubber .ts-label{ display: none !important; }   /* compact: calendar only */
  html body #rightRail #auditMonitor.audit-monitor,
  html body #rightRail #activityMonitor{ min-height: 90px !important; }
  html body #rightRail #intentBox{ max-height: 200px !important; }

  /* REMOVE the stray BASEMAP / empty-dash chip (3rd-row clutter) on mobile.
     It is body-floating chrome that duplicates side-panel controls. */
  html body #basemapSwitcher.basemap-switcher{ display: none !important; }
  /* PRISM floating toggle is a top-bar collision on mobile per spec
     ("LIVE/PRISM badges collapse/hide"). PRISM remains reachable on wider
     viewports; on mobile the cluster drawer + side panels cover navigation. */
  html body #prismToggle, html body .prism-toggle{ display: none !important; }
  /* Remove any duplicate consciousness ribbon / mobile shortcut ribbon. */
  html body #mobileRibbon,
  html body .mobile-shortcut-ribbon,
  html body .mobile-drawer-bar,
  html body .consciousness-ribbon.duplicate,
  html body #consciousnessRibbonMobile{ display: none !important; }
}
/* ====== END A2 CORRECTION PASS ====== */

/* ═══════════════════════════════════════════════════════════════════════════
   V3 SUPPLEMENT — W1 banner restyle · W2 provenance chips · W4 boot overlay
   SCOPE BOUNDARY: all rules below are SCOPED to these components only. NO
   global :root token change, NO global accent flip (cyan stays cyan), NO
   global background change, NO site-wide radius strip. Phase B tokens intact.
   Highest-specificity `html body` selectors so v3 restyle wins the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── W1 · Classification banner v3 (amber #FF8C00 · black text · gold border) ── */
html body .classification-strip{
  background: #FF8C00 !important;          /* v3 amber */
  color: #000 !important;
  border-top: 1px solid #C9A84C !important;    /* Acuterium gold */
  border-bottom: 1px solid #C9A84C !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  border-radius: 0 !important;             /* scoped: banner only */
}
/* Bottom strip becomes a flex row: centered label + right-aligned build footer */
html body .classification-strip.classification-bottom{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 12px !important;
  gap: 12px !important;
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
}
html body .classification-strip.classification-bottom .classification-label{
  flex: 1 1 auto !important;
  text-align: center !important;
}
html body .classification-strip.classification-bottom .classification-build{
  flex: 0 0 auto !important;
  position: absolute !important;
  right: 12px !important; left: auto !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  opacity: 0.92 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
/* RTL: build footer flips to the LEFT edge, label still centers */
html[dir="rtl"] body .classification-strip.classification-bottom .classification-build{
  right: auto !important; left: 12px !important;
}
/* W6-D1 fix: the 458px build footer overflows narrow viewports and collides with
   the centered classification label. Below 600px, hide the build footer so the
   mandatory classification label stays legible. The label/banner remain immutable;
   build-version provenance is still present at >=600px and in the footer DOM. */
@media (max-width: 600px){
  html body .classification-strip.classification-bottom .classification-build{
    display: none !important;
  }
}

/* ── W2 · Provenance tier chips + consolidated legend strip ─────────────────── */
/* The legend rides INSIDE #bottomDock as its own in-flow row (above stat band).
   Cards are SACRED — never resized. */
html body #bottomDock #provLegend.prov-legend{
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 24px !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  background: rgba(10,14,23,0.82) !important;
  border: 1px solid rgba(201,168,76,0.30) !important;  /* gold hairline (scoped) */
  border-radius: 0 !important;                          /* zero-radius (scoped) */
  font-family: 'JetBrains Mono', monospace !important;
  pointer-events: auto !important;
}
html body #provLegend .prov-legend-title{
  flex: 0 0 auto !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #C9A84C !important;
  text-transform: uppercase !important;
}
html body #provLegend .prov-legend-track{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(201,168,76,0.45) transparent !important;
}
html body #provLegend .prov-legend-track::-webkit-scrollbar{ height: 4px !important; }
html body #provLegend .prov-legend-track::-webkit-scrollbar-thumb{ background: rgba(201,168,76,0.45) !important; }
html body #provLegend .prov-cell{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
html body #provLegend .prov-stat-name{
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: #9FB3BD !important;
  text-transform: uppercase !important;
}

/* The chip itself — reusable anywhere via window.MADA.provenance.chip() */
html body .prov-row{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
html body .prov-chip{
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 3px 6px !important;
  border-radius: 0 !important;                                   /* zero-radius pill */
  color: var(--prov-accent, #00C853) !important;                 /* tier accent text */
  background: color-mix(in srgb, var(--prov-accent, #00C853) 14%, transparent) !important;
  border: 1px solid var(--prov-accent, #00C853) !important;      /* tier accent border */
  border-left-width: 3px !important;                             /* colored left accent */
}
html body .prov-meta{
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: #C4DFE8 !important;
}
html body .prov-row[data-inferred="1"] .prov-meta{ font-style: italic !important; opacity: 0.85 !important; }

/* ── W4 · Boot overlay (Phase 1 dark + banner · Phase 2 bilingual consent) ──── */
/* Locked under the classification banner (z 9999); overlay z 9000 so the
   immutable banner stays visible during boot per §6.2 / §1.3. */
html.boot-locked, html.boot-locked body{ overflow: hidden !important; }
html body #bootOverlay.boot-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;                 /* below classification strip (9999) */
  background: #050505 !important;           /* scoped dark — NOT a global bg change */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: #E8F4F8 !important;
  opacity: 1 !important;
  transition: opacity 0.4s ease !important;
}
html body #bootOverlay.boot-reduced-motion{ transition: none !important; }
html body #bootOverlay.boot-dismissing{ opacity: 0 !important; pointer-events: none !important; }

/* Phase 1: only the boot status line; consent panel hidden */
html body #bootOverlay.boot-phase-1 .boot-consent{ display: none !important; }
html body #bootOverlay.boot-phase-2 .boot-phase1-status{ display: none !important; }

html body #bootOverlay .boot-phase1-status{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}
html body #bootOverlay .boot-spinner{
  width: 34px !important; height: 34px !important;
  border: 2px solid rgba(255,140,0,0.25) !important;
  border-top-color: #FF8C00 !important;     /* amber accent (scoped) */
  border-radius: 50% !important;
  animation: bootSpin 0.9s linear infinite !important;
}
html body #bootOverlay.boot-reduced-motion .boot-spinner{ animation: none !important; border-top-color: #C9A84C !important; }
@keyframes bootSpin{ to{ transform: rotate(360deg); } }
html body #bootOverlay .boot-phase1-text{
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  color: #C9A84C !important;                 /* gold accent */
  text-transform: uppercase !important;
}

/* Phase 2 consent panel */
html body #bootOverlay .boot-consent{
  max-width: 620px !important;
  width: calc(100% - 48px) !important;
  padding: 32px 34px !important;
  background: rgba(10,10,10,0.96) !important;
  border: 1px solid #C9A84C !important;      /* gold border (scoped) */
  border-top: 3px solid #FF8C00 !important;  /* amber top accent */
  border-radius: 0 !important;               /* zero-radius (scoped) */
  text-align: start !important;
  box-shadow: 0 0 60px rgba(255,140,0,0.10) !important;
}
html body #bootOverlay .boot-seal{
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.30em !important;
  color: #FF8C00 !important;
  margin-bottom: 18px !important;
}
html body #bootOverlay .boot-title{
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: #FFD600 !important;                 /* warning yellow (scoped) */
  text-transform: uppercase !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.3 !important;
}
html body #bootOverlay .boot-body{
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: #D8E6EC !important;
  margin: 0 0 24px 0 !important;
}
html[dir="rtl"] body #bootOverlay .boot-body,
html body #bootOverlay[dir="rtl"] .boot-body{ font-family: 'IBM Plex Sans Arabic', sans-serif !important; }
html body #bootOverlay .boot-accept{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 160px !important;
  padding: 12px 28px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: #FF8C00 !important;            /* amber CTA */
  border: 1px solid #C9A84C !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
}
html body #bootOverlay.boot-reduced-motion .boot-accept{ transition: none !important; }
html body #bootOverlay .boot-accept:hover{ background: #FFD600 !important; }
html body #bootOverlay .boot-accept:active{ transform: translateY(1px) !important; }
html body #bootOverlay .boot-accept:focus-visible{ outline: 2px solid #FFD600 !important; outline-offset: 2px !important; }
/* ═══════════════ END V3 SUPPLEMENT (W1 · W2 · W4) ═══════════════ */