/* ── Cascade Simulation Next-Gen HUD Styles ─────────────────────────────
   E2 (Phase E, plan magical-shimmying-cookie.md): migrated off the local
   --neon-* / --hud-* variables and 'Courier New' (declared in this file's
   old :root block, now removed) onto the design-token set in
   design-tokens.css. Color/typography map:
     --neon-red    -> var(--dc-critical)
     --neon-amber  -> var(--dc-warning)
     --neon-green  -> var(--dc-healthy)
     --neon-blue   -> var(--dc-cyan)
     --hud-bg      -> var(--dc-glass)        (slightly lighter navy, by design)
     'Courier New', monospace -> var(--dc-font-mono)
   Old chrome (#ai-copilot-console, #threat-gauge-card) is still rendered
   during the Task 17 retirement window; this file's selectors cover them
   so the visual stays consistent with the rest of the console. */

/* AI Co-Pilot Operator Dispatch Console */
#ai-copilot-console {
  position: absolute;
  top: 44px;
  /* Centered on the CANVAS area (between the two side panels), not the raw
     viewport - other elements still sharing this row shift via
     right:calc(var(--rp)+Npx) when a side panel opens; this used to be the
     one exception (raw left:50%), so its box could reach into their space
     regardless of panel state - confirmed live, it visibly overlapped the
     (since-relocated) audio toggle button. Shifting the center point by
     (--lp - --rp)/2 and subtracting both from the width cap keeps it inside
     the same shrinking canvas area as everything else. */
  left: calc(50% + (var(--lp) - var(--rp)) / 2);
  transform: translateX(-50%);
  transition: left 0.32s ease, opacity 0.3s ease, transform 0.3s ease;
  z-index: 27;
  width: min(520px, calc(100vw - 360px - var(--lp) - var(--rp)));
  background: var(--dc-glass);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 6px;
  backdrop-filter: blur(16px);
  padding: 6px 14px;
  font-family: var(--dc-font-mono);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
}
#ai-copilot-console.show {
  opacity: 1;
  pointer-events: auto;
}
.acc-tag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--dc-cyan);
  background: rgba(0, 180, 255, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}
.acc-text {
  font-size: 9.5px;
  color: var(--dc-text);
  letter-spacing: 0.5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Sandbox parameter sliders - reused inline in the AI/ML Console's
   Scenarios tab (src/ui/ai-badges.js) since the standalone button+modal
   that used to own these were removed. */
.sb-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-label-wrap {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(200, 220, 255, 0.8);
}
.sb-val {
  color: var(--dc-warning);
  font-weight: 700;
}
.sb-slider {
  width: 100%;
  accent-color: var(--dc-warning);
  cursor: pointer;
}
.sb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* Threat Level Gauge */
#threat-gauge-card {
  position: absolute;
  top: 50px;
  right: calc(var(--rp) + 16px);
  z-index: 28;
  background: var(--dc-glass);
  border: 1px solid var(--dc-control-border);
  border-radius: 8px;
  backdrop-filter: blur(16px);
  padding: 12px 16px;
  font-family: var(--dc-font-mono);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: right 0.32s ease, opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-4px);
  opacity: 0;
  pointer-events: none;
}
#threat-gauge-card.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tg-dial {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.tg-bg-circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
}
.tg-fill-circle {
  fill: none;
  stroke: var(--dc-critical);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
  filter: drop-shadow(0 0 6px var(--dc-critical));
}
.tg-value {
  position: absolute;
  font-size: 13px;
  font-weight: 800;
  color: var(--dc-text);
  letter-spacing: 0.5px;
}
.tg-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tg-title {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--dc-muted);
  text-transform: uppercase;
}
.tg-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--dc-critical);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tg-sub {
  font-size: 8.5px;
  color: var(--dc-critical);
  opacity: 0.85;
}

/* Floating 3D Tactical World Labels */
.cascade-world-label {
  position: absolute;
  z-index: 21;
  pointer-events: none;
  transform: translate(-50%, -100%);
  font-family: var(--dc-font-mono);
  font-size: 9.5px;
  background: rgba(3, 7, 18, 0.92);
  border: 1px solid var(--dc-cyan);
  border-radius: 4px;
  padding: 5px 9px;
  color: var(--dc-text);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.3), inset 0 0 8px rgba(0, 212, 255, 0.1);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cascade-world-label.show {
  opacity: 1;
}
.cascade-world-label::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--dc-cyan);
}
.cwl-header {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dc-cyan);
  margin-bottom: 2px;
}
.cwl-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  font-size: 8.5px;
  color: var(--dc-body);
}
.cwl-badge {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  margin-top: 3px;
}
/* E2: badge fills/borders use rgba() over the design-token color so the
   semi-transparent tint is still legible. The non-tinted text + border
   use the dc token directly. */
.cwl-badge.red { background: rgba(255, 122, 122, 0.20); color: var(--dc-critical); border: 1px solid var(--dc-critical); }
.cwl-badge.amber { background: rgba(246, 200, 95, 0.20); color: var(--dc-warning); border: 1px solid var(--dc-warning); }
.cwl-badge.green { background: rgba(87, 227, 159, 0.20); color: var(--dc-healthy); border: 1px solid var(--dc-healthy); }

/* Timeline scrubber/speed bar (#cascade-control-bar, .cc-btn, .cc-speed-group,
   .cc-speed-btn) lives entirely in index.html's inline <style> now — it
   moved there across the Step 0/0b/0c/0d iteration (see index.html's own
   comments at #cascade-control-bar). This file used to carry a parallel
   copy that partially conflicted with the inline one (same #id/.class
   selectors, different property values, silently merged property-by-
   property by CSS cascade order) — a dual-CSS trap where editing this
   file had no visible effect on properties the inline block also set, but
   DID affect the few properties only declared here. Removed rather than
   left to rot; index.html is the single source of truth for this
   component now. */

html[data-cascade-ready='false'] #cp-run,
html[data-cascade-ready='false'] [data-preset='bunch'] {
  opacity: 0.45;
  cursor: not-allowed !important;
  filter: grayscale(0.45);
}

@media (max-width: 1180px) {
  #cascade-kpis {
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    overflow-x: auto;
  }
}
/* AI Directives Recommendations Floating Panel */
#ai-directives-panel {
  position: absolute;
  top: 120px;
  left: calc(var(--lp) + 16px);
  z-index: 25;
  width: 290px;
  background: var(--dc-glass);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 8px;
  backdrop-filter: blur(18px);
  padding: 12px 14px;
  font-family: var(--dc-font-mono);
  display: none;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 0 32px rgba(0, 100, 200, 0.2);
  animation: panel-in 0.25s ease;
}
#ai-directives-panel.show {
  display: flex;
}
.aid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 180, 255, 0.2);
  padding-bottom: 6px;
}
.aid-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--dc-cyan);
  text-transform: uppercase;
}
.aid-chip {
  font-size: 7.5px;
  font-weight: 700;
  background: rgba(0, 212, 255, 0.2);
  color: var(--dc-cyan);
  border: 1px solid var(--dc-cyan);
  border-radius: 3px;
  padding: 1px 6px;
}
.aid-card {
  background: rgba(0, 40, 90, 0.35);
  border: 1px solid rgba(0, 140, 255, 0.25);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}
.aid-card:hover {
  border-color: var(--dc-cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}
.aid-card-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--dc-text);
}
.aid-card-desc {
  font-size: 8px;
  color: var(--dc-body);
  line-height: 1.3;
}
.aid-action-btn {
  align-self: flex-end;
  background: rgba(0, 255, 136, 0.18);
  border: 1px solid var(--dc-healthy);
  color: var(--dc-healthy);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.aid-action-btn:hover {
  background: rgba(0, 255, 136, 0.4);
  color: var(--dc-text);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}