/**
 * src/shell/shell.css — workspace shell chrome (build-foundation strangler
 * slice).
 *
 * Scoped under the `.inq-shell` root class shell.js creates on mount, plus
 * two `body.inq-shell-*` classes it toggles — every selector below is
 * inert on a page where shell.js never mounts (flags.newShell === false),
 * because none of those classes/elements exist in that case. Uses ONLY
 * --inq- tokens from src/shell/tokens.css (loaded first in app.html), never
 * the legacy --spacesense- / --bg / --panel tokens, keeping this file
 * independent of style.css cascade.
 */

.inq-shell {
  position: relative;
  font-family: inherit;
}

.inq-shell-switcher {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: var(--inq-space-2);
  height: 44px;
  padding: 0 var(--inq-space-4);
  background: var(--inq-color-navy-900);
  border-bottom: 1px solid var(--inq-color-navy-700);
  box-shadow: var(--inq-shadow-sm);
  box-sizing: border-box;
}

.inq-shell-switcher-item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--inq-color-neutral-200);
  font-size: var(--inq-fs-body);
  font-weight: var(--inq-fw-medium);
  line-height: var(--inq-lh-tight);
  padding: var(--inq-space-1) var(--inq-space-3);
  border-radius: var(--inq-radius-sm);
  cursor: pointer;
}

.inq-shell-switcher-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.inq-shell-switcher-item.active {
  background: var(--inq-color-yellow-500);
  color: var(--inq-color-navy-900);
  font-weight: var(--inq-fw-semibold);
}

/* Body-level state, set by shell.js mount()/unmount(). Pushes the legacy
   topbar (and everything after it) down by the switcher's height so the
   fixed bar never overlaps legacy chrome. */
body.inq-shell-mounted {
  padding-top: 44px;
}

.inq-shell-placeholder {
  max-width: 640px;
  margin: var(--inq-space-8) auto 0;
  padding: 0 var(--inq-space-6);
}

.inq-shell-placeholder-title {
  margin: 0 0 var(--inq-space-3);
  font-size: var(--inq-fs-heading);
  font-weight: var(--inq-fw-semibold);
  color: var(--inq-color-neutral-100);
}

.inq-shell-placeholder-blurb {
  margin: 0 0 var(--inq-space-5);
  font-size: var(--inq-fs-body-l);
  line-height: var(--inq-lh-normal);
  color: var(--inq-color-neutral-400);
}

.inq-shell-placeholder-back {
  display: inline-block;
  font-size: var(--inq-fs-body);
  font-weight: var(--inq-fw-medium);
  color: var(--inq-color-yellow-500);
  text-decoration: none;
}

.inq-shell-placeholder-back:hover {
  text-decoration: underline;
}

/* Legacy-hidden: set only once the shell has mounted AND navigated away
   from the 'plan' workspace. Selectors match app.html's top-level legacy
   containers (topbar chrome + state strip + element filter bar + KPI bar +
   the #layout three-panel canvas). Modals/backdrops are untouched — they
   are already gated by their own [hidden] attribute and don't render
   unless explicitly opened. */
body.inq-legacy-hidden .topbar,
body.inq-legacy-hidden #stateStrip,
body.inq-legacy-hidden #elementFilterBar,
body.inq-legacy-hidden #kpiBar,
body.inq-legacy-hidden #layout {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .inq-shell-switcher-item {
    transition: none;
  }
}