/* ============================================================
   Operational Strip — slim cross-page chrome for authenticated
   users. Tokens deliberately match command_palette.css and
   mission_control_hero.css so all three surfaces share an
   identical Guardian dark / teal / gold visual language.
   ============================================================ */

:root {
  --ops-bg-1: #0e1432;
  --ops-bg-2: #0a0e27;
  --ops-border: rgba(255, 255, 255, 0.08);
  --ops-text: #e6ecff;
  --ops-mute: #9aa6c2;
  --ops-dim: rgba(255, 255, 255, 0.45);
  --ops-teal: #00ffc8;
  --ops-gold: #d4a843;
  --ops-defend: #ff5c8a;
  --ops-comply: #00bfff;
  --ops-build: #b48cff;
}

.gp-ops-strip {
  position: sticky;
  top: 0;
  z-index: 950;          /* below command-palette backdrop (1000+) and modals */
  background: linear-gradient(180deg, var(--ops-bg-1) 0%, var(--ops-bg-2) 100%);
  border-bottom: 1px solid var(--ops-border);
  padding: 6px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: var(--ops-mute);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.gp-ops-strip__inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Breadcrumb / current-page label ---------- */

.gp-ops-strip__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.gp-ops-strip__home,
.gp-ops-strip__here {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--ops-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ops-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 11.5px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gp-ops-strip__home:hover {
  background: rgba(0, 255, 200, 0.08);
  border-color: rgba(0, 255, 200, 0.35);
  color: var(--ops-teal);
}

.gp-ops-strip__here {
  color: var(--ops-teal);
  border-color: rgba(0, 255, 200, 0.25);
  background: rgba(0, 255, 200, 0.06);
}

.gp-ops-strip__home i,
.gp-ops-strip__here i {
  font-size: 10px;
  opacity: 0.85;
}

/* ---------- Posture pulse chips (center) ---------- */

.gp-ops-strip__pulse {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.gp-ops-strip__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--ops-border);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ops-mute);
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.gp-ops-strip__chip i {
  font-size: 10px;
  opacity: 0.8;
}

.gp-ops-strip__chip-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ops-text);
  letter-spacing: 0.02em;
}

.gp-ops-strip__chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ops-text);
  transform: translateY(-1px);
}

/* Section accent colors — match command palette + posture snapshot tokens */
.gp-pulse--alerts:hover    { border-color: var(--ops-defend); color: var(--ops-defend); }
.gp-pulse--alerts:hover i  { opacity: 1; }
.gp-pulse--incidents:hover { border-color: var(--ops-defend); color: var(--ops-defend); }
.gp-pulse--evidence:hover  { border-color: var(--ops-gold); color: var(--ops-gold); }
.gp-pulse--agents:hover    { border-color: var(--ops-build); color: var(--ops-build); }

/* Critical / warn states (always-on, not just hover) */
.gp-ops-strip__chip.is-warn {
  border-color: rgba(212, 168, 67, 0.5);
  background: rgba(212, 168, 67, 0.08);
  color: var(--ops-gold);
}
.gp-ops-strip__chip.is-warn i,
.gp-ops-strip__chip.is-warn .gp-ops-strip__chip-num {
  color: var(--ops-gold);
}

.gp-ops-strip__chip.is-critical {
  border-color: rgba(255, 92, 138, 0.6);
  background: rgba(255, 92, 138, 0.1);
  color: var(--ops-defend);
  animation: gpOpsPulse 2.4s ease-in-out infinite;
}
.gp-ops-strip__chip.is-critical i,
.gp-ops-strip__chip.is-critical .gp-ops-strip__chip-num {
  color: var(--ops-defend);
}

@keyframes gpOpsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 138, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 92, 138, 0.18); }
}

/* Respect users who prefer reduced motion: keep the critical visual
   distinction (red border + tinted background) but drop the pulsing
   shadow animation. */
@media (prefers-reduced-motion: reduce) {
  .gp-ops-strip__chip.is-critical { animation: none; }
}

/* ---------- ⌘K hint button (right) ---------- */

.gp-ops-strip__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--ops-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ops-mute);
  font-size: 11px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gp-ops-strip__hint:hover {
  background: rgba(0, 255, 200, 0.08);
  border-color: rgba(0, 255, 200, 0.35);
  color: var(--ops-teal);
}

.gp-ops-strip__hint kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--ops-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ops-text);
  line-height: 1;
}

/* ---------- Responsive: collapse hint label & breadcrumb on narrow screens ---------- */

@media (max-width: 720px) {
  .gp-ops-strip__hint-label { display: none; }
  .gp-ops-strip__home span,
  .gp-ops-strip__here span { display: none; }
  .gp-ops-strip__inner { gap: 10px; }
}

@media (max-width: 480px) {
  /* On phones, drop the pulse altogether — keep just crumb + ⌘K */
  .gp-ops-strip__pulse { display: none; }
}