/* 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 {
  /* UX CORRECTION: `100vh` on iOS Safari is the LARGEST viewport (URL
     bar retracted), which overshoots while the bar is visible. `dvh`
     tracks the real dynamic viewport; the `vh` line stays as the
     fallback for engines without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* While an off-canvas sheet (nav/drawer) is open, the page behind it
   must not scroll -- on iOS the background otherwise scrolls under the
   sheet and the scrim. app.js toggles this class with the sheets. */
body.bb-sheet-open {
  overflow: hidden;
}

a {
  /* Standard interaction is the DATA blue; purple is reserved for the
     proprietary/branded layer (active nav, primary actions, signature
     visuals). See tokens.css -- UX correction campaign. */
  color: var(--bb-accent-data);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* iPhone safe areas (the shell opts into `viewport-fit=cover` in its
   meta tag): the top bar absorbs the top inset by growing the shared
   height token, so every sticky offset and sheet inset that already
   reads --bb-topbar-height stays correct without per-rule math. */
:root {
  --bb-topbar-height: calc(56px + var(--bb-safe-top));
}

/* On a genuinely wide desktop, let the intel rail breathe -- the mock's
   right rail is a working column, not a sliver. */
/* GRAND REIMAGINATION, PHASE 1B (2026-09): four desktop tiers, not one
   breakpoint. The chrome is part of the composition: at 1920 the rails
   are working columns; at 2560 the nav is a real command rail and the
   intel drawer a full intelligence column, and the content well between
   them fills EVERYTHING that is left (no centred cap -- `hq.css` §24). */
@media (min-width: 1440px) {
  :root {
    --bb-nav-width: 240px;
  }
}
@media (min-width: 1680px) {
  :root {
    --bb-drawer-width: var(--bb-drawer-width-wide);
    --bb-nav-width: var(--bb-nav-width-wide);
  }
}
@media (min-width: 2300px) {
  :root {
    --bb-drawer-width: var(--bb-drawer-width-hq);
    --bb-nav-width: var(--bb-nav-width-hq);
  }
}

.bb-shell {
  display: grid;
  grid-template-columns: var(--bb-nav-width) minmax(0, 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;
  min-height: 100dvh;
}

.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);
  /* Safe-area aware: top inset for the notch (portrait), left/right for
     landscape. The height token already includes the top inset. */
  padding: var(--bb-safe-top) calc(var(--bb-space-4) + var(--bb-safe-right)) 0 calc(var(--bb-space-4) + var(--bb-safe-left));
  background: var(--bb-bg-elevated);
  border-bottom: 1px solid var(--bb-border);
  position: sticky;
  top: 0;
  /* PACK 2, PART 16 -- FOUND IN A REAL BROWSER AT 390px AND 834px.
     This was `z-index: 40`, BELOW the off-canvas scrim's 45. So the
     moment the nav or drawer sheet opened, the scrim covered the top
     bar and swallowed every click on it -- including the very toggle
     that had just opened the sheet. Tapping the hamburger a second time
     did nothing (measured: a 30s Playwright click timeout, the pointer
     event landing on `.bb-scrim`), leaving Escape or a scrim tap as the
     only ways out of a sheet a user had opened by mistake.

     60 puts the bar above the scrim (45) and the sheets (50). There is
     no visual consequence: both sheets are already positioned
     `inset: var(--bb-topbar-height) ...`, so neither ever overlaps the
     bar's box -- the stack only decided who received the click. */
  z-index: 60;
}

.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;
}

/* Post-V1 Signature Visual Identity Pack, Part 2: the mark sits beside
   the wordmark, not above/inside it -- one brand unit, still a single
   link/tab-stop. */
.bb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bb-mark {
  color: var(--bb-text-primary);
  flex: none;
  transition: color var(--bb-transition-fast);
}
.bb-brand:hover .bb-mark,
.bb-brand:focus-visible .bb-mark {
  color: var(--bb-accent);
}
.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;
}

/* Phone-only bottom navigation -- shown inside the 900px media query. */
.bb-bottomnav {
  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 --
   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;
}
/* PHASE 1B: the outer gutter grows a little with the canvas -- as a
   frame for a bigger composition, never as leftover width. */
@media (min-width: 1680px) {
  .bb-main {
    padding: 28px 32px 40px;
  }
}
@media (min-width: 2300px) {
  .bb-main {
    padding: 32px 40px 48px;
  }
}

.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;
}

/* =====================================================================
   THE TABLET TIER (INTELLIGENCE HQ UI/UX OVERHAUL, PACK 2, PART 10)
   =====================================================================
   MEASURED, IN REAL CHROMIUM, BEFORE THIS RULE EXISTED.

   The shell had exactly two states: the full three-column desktop
   (nav 224 + main + drawer 320) down to 901px, and the single-column
   phone layout below it. At 1024x768 -- an iPad in landscape, the single
   most common tablet size -- that meant 544px of permanent chrome and a
   ~450px main column, into which the Rankings board rendered its full
   13-column table. Measured: the table wanted 1138px inside a 450px
   column, and Available Players 1131px. Both scrolled horizontally
   inside `.bb-table-wrap` on a screen that had plenty of room, because
   the EVIDENCE DRAWER -- a secondary, on-demand reading -- was holding
   320px hostage from the primary board.

   The fix is to give the drawer its own, EARLIER breakpoint. Between
   901px and 1200px the nav stays docked (navigation is primary; a
   tablet user should not have to open a sheet to change page) while the
   drawer becomes the same off-canvas panel it already is on a phone,
   reachable from the same existing toggle. Main gains 320px.

   NOTHING IS REMOVED AT ANY WIDTH. The drawer keeps every reading, the
   toggle keeps its markup and its `aria-expanded` contract, and app.js
   is untouched -- it already drives `.is-open`/`.bb-scrim` for exactly
   this pattern below 900px. */
@media (max-width: 1200px) {
  .bb-shell,
  .bb-shell--drawer-collapsed,
  .bb-shell--nav-collapsed {
    grid-template-columns: var(--bb-nav-width) minmax(0, 1fr);
    grid-template-areas:
      "topbar topbar"
      "nav main";
  }
  .bb-shell--nav-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .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), visibility var(--bb-transition-base);
    box-shadow: var(--bb-shadow-lg);
    display: block;
    /* Closed = out of the accessibility tree and tab order, not merely
       translated off-screen. `visibility` transitions with the slide, so
       nothing pops. */
    visibility: hidden;
    padding-bottom: calc(var(--bb-space-4) + var(--bb-safe-bottom));
  }
  .bb-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  /* `--drawer-collapsed` is the DESKTOP collapse class app.js toggles.
     Off-canvas, "collapsed" is the resting state, so the class must not
     also `display: none` the panel -- that would make the toggle open a
     drawer that is not in the box tree. */
  .bb-shell--drawer-collapsed .bb-drawer {
    display: block;
  }

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

  /* The drawer's own toggle is in the top bar's right cluster and was
     phone-only; it is the ONLY way to reach the drawer at this tier. */
  .bb-drawer-toggle-mobile {
    display: inline-flex;
  }
  /* The desktop-rail toggle would now be a second control for the same
     panel, in a layout where it no longer has a rail to sit on. */
  .bb-drawer__toggle {
    display: none;
  }
}

/* --- 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), visibility var(--bb-transition-base);
    box-shadow: var(--bb-shadow-lg);
    visibility: hidden;
    padding-bottom: calc(var(--bb-space-4) + var(--bb-safe-bottom));
  }
  .bb-nav.is-open {
    display: block;
    transform: translateX(0);
    visibility: visible;
  }

  .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), visibility var(--bb-transition-base);
    box-shadow: var(--bb-shadow-lg);
    display: block;
    visibility: hidden;
    padding-bottom: calc(var(--bb-space-4) + var(--bb-safe-bottom));
  }
  .bb-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .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;
  }

  /* GAME EXPERIENCE CAMPAIGN (2026-09): the centre cluster used to be
     hidden here (it held only a decorative emblem). It now carries the
     global Live Wire rail, which must survive on a phone -- so the
     cluster stays, shrinks to the room the two outer clusters leave,
     and the rail itself compresses (`hq.css` section 33). */
  .bb-topbar__center {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
  }

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

  .bb-main {
    /* Bottom padding clears the fixed bottom nav + the home indicator. */
    padding: var(--bb-space-3) calc(var(--bb-space-3) + var(--bb-safe-right)) calc(var(--bb-space-3) + var(--bb-bottomnav-height) + var(--bb-safe-bottom)) calc(var(--bb-space-3) + var(--bb-safe-left));
  }

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

  /* ---------------------------------------------------------------
     MOBILE BOTTOM NAVIGATION (UX correction campaign, P0; Draft
     Weekend DW-2 Part L added the sixth "Draft" column)
     Phones get a deliberate primary nav instead of relying solely on
     the hamburger sheet: the five highest-traffic destinations plus a
     Menu button that opens the full nav sheet. Fixed, safe-area
     aware, and UNDER the scrim (z 40 < 45) so an open sheet dims it.
     Hidden above 900px (this whole block is inside the phone query).
     `1fr` columns always sum to exactly 100% of the container's own
     width regardless of count -- going from 5 to 6 columns narrows
     each item, it cannot create horizontal overflow at any width.

     DW-3.2 Phase 1F: this comment closed with a JINJA terminator (`#}`)
     rather than a CSS one. A CSS comment does not nest and does not end
     there, so it ran on to the next real terminator -- forty lines down,
     at the end of the DW-2 label-ellipsis note -- swallowing
     `.bb-bottomnav` and `.bb-bottomnav__item` whole, and consuming that
     note's own opener on the way. With the override commented out,
     the unconditional `.bb-bottomnav { display: none }` further up this
     file stood, and the phone's six primary destinations have not
     rendered at all since DW-2. Six tap targets at 0x0 is the largest
     hit-area defect in the audit's own list; it is fixed by ending the
     comment. */
  .bb-bottomnav {
    display: grid;
    /* GRAND REIMAGINATION, PHASE 1 (2026-09): HQ / Team / Draft /
       Players / More -- five columns. Still `1fr` tracks, so the bar
       cannot overflow at any width; each tap target only widens. */
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: calc(var(--bb-bottomnav-height) + var(--bb-safe-bottom));
    padding: 0 var(--bb-safe-right) var(--bb-safe-bottom) var(--bb-safe-left);
    background: var(--bb-bg-elevated);
    border-top: 1px solid var(--bb-border);
  }
  .bb-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--bb-tap-min);
    color: var(--bb-text-tertiary);
    font-size: var(--bb-fs-micro);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 0;
    background: none;
    font-family: var(--bb-font-ui);
    cursor: pointer;
    padding: 0 2px;
  }
  /* Draft Weekend DW-2, Part L: six columns leaves noticeably less width
     per label than the previous five ("Rankings" is the tightest fit).
     A label that cannot fit truncates with an ellipsis instead of
     wrapping to a second line -- the bar keeps its fixed `height` above
     at every one of the five validated widths (375/390/393/414/430px)
     rather than growing taller than its own safe-area calculation. */
  .bb-bottomnav__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bb-bottomnav__item:hover {
    text-decoration: none;
    color: var(--bb-text-secondary);
  }
  .bb-bottomnav__item.is-active {
    color: var(--bb-accent);
  }
  .bb-bottomnav__item.is-active .bb-bottomnav__icon {
    filter: drop-shadow(0 0 6px rgba(140, 102, 242, 0.55));
  }
  .bb-bottomnav__icon {
    width: 20px;
    height: 20px;
  }

  /* PACK 2, PART 10 -- THE PRIORITY-COLUMN COLLAPSE MOVED DOWN A TIER.
     It used to fire here, at 900px, together with the per-row
     `bb-row-detail` disclosure. Measured in real Chromium, that pair
     turned the Rankings board from 1182px tall at 1024px into 7083px at
     834px -- a 6x jump on an iPad, because every row gained a second
     `<tr>` AND the board lost its own bounded scroller on the same
     breakpoint.

     A tablet has room for a table. The collapse now happens at 620px
     (the phone tier, where `hq.css` already hides `.bb-col-secondary`
     for every other board). `bb-col-tertiary` -- the supporting
     evidence columns, never a decision field -- ALSO drops at 620px now
     (Fable Preproduction, §2.4 #1 correction): it used to drop at
     1024px, a wider range than the 621px+ range where `bb-row-detail`'s
     own recovery disclosure is hidden, so every tablet width in between
     lost that evidence with no way to get it back. See `components.css`
     for the matching rule. */
  .bb-table.bb-table--rankings {
    /* 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. */
    min-width: 0;
  }

  /* Campaign 027.4 mobile QA: plain inline text links (e.g. "How to link
     -->"/"View all -->" -- flowing prose links with no button/badge class of
     their own) hit-test only their tight text line-box, ~16px tall on a
     375px viewport -- comfortably under the ~24px tap-target guideline.
     Padding-only (no border/background exists on a bare `a` per the base
     `a`/`a:hover` rule above, and the shell's global `line-height: 1.5`
     already gives each line breathing room), so this only enlarges the
     invisible hit area, never the visual size or the surrounding layout.
     A single class selector (`.bb-btn` etc.) always outranks this bare tag
     selector, so every already-sized button/nav/badge link is unaffected. */
  a {
    padding-block: 4px;
  }
}

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

/* DW-3.2 Phase 1F. The bare-`a` hit-area rule above is correct and is
   left exactly where it is; what it lacked was a way to fire for a
   FINGER on a wide screen. A tablet in landscape is 1024px, matches no
   phone breakpoint in this file, and was hit-testing every prose link
   ("How to link -->", "View all -->") on its tight 16-22px text line
   box. Padding only, and on an INLINE box, so it grows the hit area
   without moving a single glyph or reflowing a paragraph -- the same
   instrument, under the condition that actually describes the input
   device. A class-carrying link outranks this tag selector and is sized
   by `hq.css`'s own touch-floor section instead. */
@media (pointer: coarse) {
  a {
    padding-block: 4px;
  }
}

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