/* Blackbird Web HQ -- shell layout (Campaign 020.0, Sections 3/11/12/18/22).
   Top bar + left nav + main + right intel drawer, collapsible on desktop,
   off-canvas on mobile (~900px breakpoint). */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bb-bg);
  color: var(--bb-text-primary);
  font-family: var(--bb-font-ui);
  font-size: var(--bb-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--bb-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.bb-shell {
  display: grid;
  grid-template-columns: var(--bb-nav-width) 1fr var(--bb-drawer-width);
  grid-template-rows: var(--bb-topbar-height) 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "nav main drawer";
  min-height: 100vh;
}

.bb-shell--drawer-collapsed {
  grid-template-columns: var(--bb-nav-width) 1fr 0;
}

.bb-shell--nav-collapsed {
  grid-template-columns: 0 1fr var(--bb-drawer-width);
}

/* --- top bar --- */
.bb-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  padding: 0 var(--bb-space-4);
  background: var(--bb-bg-elevated);
  border-bottom: 1px solid var(--bb-border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.bb-topbar__left,
.bb-topbar__center,
.bb-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
}

.bb-topbar__center {
  flex: 1;
  justify-content: center;
}

.bb-wordmark {
  font-family: var(--bb-font-mono);
  font-weight: 700;
  font-size: var(--bb-fs-md);
  letter-spacing: 0.06em;
  color: var(--bb-text-primary);
}
.bb-wordmark small {
  display: block;
  font-family: var(--bb-font-ui);
  font-weight: 500;
  font-size: var(--bb-fs-micro);
  letter-spacing: 0.14em;
  color: var(--bb-text-tertiary);
  text-transform: uppercase;
}

.bb-nav-toggle {
  display: none;
}

/* --- left nav --- */
.bb-nav {
  grid-area: nav;
  background: var(--bb-bg-elevated);
  border-right: 1px solid var(--bb-border);
  padding: var(--bb-space-4) var(--bb-space-2);
  overflow-y: auto;
}

.bb-shell--nav-collapsed .bb-nav {
  display: none;
}

.bb-nav__section {
  margin-bottom: var(--bb-space-4);
}

/* Mobile-only duplicate of the topbar's context/league selectors
   (`.bb-topbar__center` is hidden below the 900px breakpoint) --
   see the matching rule under the mobile media query below. */
.bb-nav__mobile-only {
  display: none;
}

.bb-nav__link {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  padding: var(--bb-space-2) var(--bb-space-3);
  border-radius: var(--bb-radius-md);
  color: var(--bb-text-secondary);
  font-size: var(--bb-fs-sm);
  font-weight: 500;
  transition: background var(--bb-transition-fast), color var(--bb-transition-fast);
}
.bb-nav__link:hover {
  background: var(--bb-surface-hover);
  color: var(--bb-text-primary);
  text-decoration: none;
}
.bb-nav__link.is-active {
  background: var(--bb-accent-bg);
  color: var(--bb-accent);
}
.bb-nav__link.is-disabled {
  color: var(--bb-text-tertiary);
  cursor: default;
  pointer-events: none;
}

.bb-nav__soon {
  margin-left: auto;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-micro);
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: var(--bb-radius-sm);
  background: var(--bb-neutral-bg);
  color: var(--bb-neutral);
}

/* --- main --- */
.bb-main {
  grid-area: main;
  padding: var(--bb-space-5);
  min-width: 0;
  overflow-x: hidden;
}

.bb-main--full {
  grid-column: nav / drawer;
}

/* --- intel drawer --- */
.bb-drawer {
  grid-area: drawer;
  background: var(--bb-bg-elevated);
  border-left: 1px solid var(--bb-border);
  padding: var(--bb-space-4);
  overflow-y: auto;
}

.bb-shell--drawer-collapsed .bb-drawer {
  display: none;
}

.bb-drawer__toggle {
  display: inline-flex;
}

/* --- mobile / field terminal (Section 22) --- */
@media (max-width: 900px) {
  .bb-shell,
  .bb-shell--drawer-collapsed,
  .bb-shell--nav-collapsed {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .bb-nav {
    position: fixed;
    inset: var(--bb-topbar-height) auto 0 0;
    width: 78vw;
    max-width: 300px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--bb-transition-base);
    box-shadow: var(--bb-shadow-lg);
  }
  .bb-nav.is-open {
    display: block;
    transform: translateX(0);
  }

  .bb-drawer {
    position: fixed;
    inset: var(--bb-topbar-height) 0 0 auto;
    width: 88vw;
    max-width: 360px;
    z-index: 50;
    transform: translateX(100%);
    transition: transform var(--bb-transition-base);
    box-shadow: var(--bb-shadow-lg);
    display: block;
  }
  .bb-drawer.is-open {
    transform: translateX(0);
  }

  .bb-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 45;
  }
  .bb-scrim.is-visible {
    display: block;
  }

  .bb-nav-toggle,
  .bb-drawer-toggle-mobile {
    display: inline-flex;
  }

  .bb-topbar__center {
    display: none;
  }

  .bb-nav__mobile-only {
    display: block;
  }

  .bb-main {
    padding: var(--bb-space-3);
  }

  .bb-wordmark {
    font-size: var(--bb-fs-sm);
  }

  /* Priority-column rankings collapse (Section 22). */
  .bb-table--rankings td.bb-col-secondary,
  .bb-table--rankings th.bb-col-secondary {
    display: none;
  }

  /* The desktop density floor (min-width: 720px on .bb-table) would force
     the surviving priority columns (Pos/BBV/EDGE) past the horizontal
     scroll edge on a phone -- the Field Terminal view must fit its
     priority columns in the viewport instead. */
  .bb-table.bb-table--rankings {
    min-width: 0;
  }
}

@media (min-width: 901px) {
  .bb-scrim {
    display: none;
  }
}

.bb-viewport-meta-marker {
  display: none;
}