/**
 * Operator shell — unified top bar for admin, console, exchange, map,
 * and opportunity-map surfaces. Auto-injected by operator-shell.js so
 * each page keeps its existing per-page chrome untouched.
 *
 * Visual goal: a thin, calm sticky bar that gives operators consistent
 * wayfinding + a persistent corridor selector across every surface.
 */

.op-shell-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--cd-space-base);
  padding: 10px var(--cd-grid-padding);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cd-alum-hi);
  font-family: Inter, "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--cd-text);
  min-height: 52px;
  box-shadow: var(--cd-shadow-l0);
}

.op-shell-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-sm);
  color: var(--cd-text);
  font-family: Satoshi, Inter, system-ui, sans-serif;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--cd-radius-sm);
  flex-shrink: 0;
  transition: background var(--cd-duration-atom) var(--cd-ease-fast);
}

.op-shell-brand:hover,
.op-shell-brand:focus-visible {
  background: rgba(255, 255, 255, 0.55);
  outline: none;
}

.op-shell-mark {
  font-size: 1.1rem;
  color: var(--cd-orange);
  line-height: 1;
}

.op-shell-brand-name {
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.op-shell-mode {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--cd-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-left: 8px;
  border-left: 1px solid var(--cd-alum-hi);
  margin-left: 4px;
}

.op-shell-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: thin;
}

.op-shell-nav::-webkit-scrollbar {
  height: 4px;
}

.op-shell-nav::-webkit-scrollbar-thumb {
  background: var(--cd-alum-hi);
  border-radius: 2px;
}

.op-shell-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--cd-radius-sm);
  color: var(--cd-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    color var(--cd-duration-atom) var(--cd-ease-fast),
    background var(--cd-duration-atom) var(--cd-ease-fast);
}

.op-shell-link:hover,
.op-shell-link:focus-visible {
  color: var(--cd-text);
  background: rgba(255, 255, 255, 0.55);
  outline: none;
}

.op-shell-link[aria-current="page"] {
  color: var(--cd-text);
  background: rgba(227, 139, 66, 0.12);
  font-weight: 600;
}

.op-shell-corridor {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-xs);
  flex-shrink: 0;
}

.op-shell-corridor-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--cd-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.op-shell-select {
  font: inherit;
  font-size: 0.85rem;
  color: var(--cd-text);
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--cd-alum-hi);
  border-radius: var(--cd-radius-sm);
  background: rgba(255, 255, 255, 0.65)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236a6a60' d='M0 0l5 6 5-6z'/></svg>")
    no-repeat right 8px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-height: 30px;
}

.op-shell-select:focus-visible {
  outline: none;
  border-color: var(--cd-orange);
  box-shadow: 0 0 0 2px rgba(227, 139, 66, 0.18);
}

.op-shell-help {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--cd-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--cd-radius-sm);
}

.op-shell-help:hover,
.op-shell-help:focus-visible {
  color: var(--cd-text);
  background: rgba(255, 255, 255, 0.55);
  outline: none;
}

/* Tighten the existing page header when the shell is mounted so the
 * doubled-up "operations console" heading doesn't dominate the viewport. */
body.op-shell-active .cd-shell {
  padding-top: var(--cd-space-base);
}

@media (max-width: 640px) {
  .op-shell-bar {
    padding: 8px var(--cd-space-base);
    gap: var(--cd-space-sm);
  }
  .op-shell-mode,
  .op-shell-corridor-label,
  .op-shell-brand-name {
    display: none;
  }
  .op-shell-link {
    padding: 6px 8px;
    font-size: 0.8rem;
  }
}