/* =====================================================================
   BLACKBIRD VISUAL IDENTITY -- PACK UX-V1
   =====================================================================
   THE ELEVATION LAYER. Loads LAST, after tokens/layout/components/hq.

   WHY A FIFTH FILE. `hq.css` is 3,500 lines of per-surface composition
   accumulated over six campaigns, and each of its sections is annotated
   with the finding that produced it. This pack is not another section of
   that history -- it is a SYSTEM-WIDE re-lighting of primitives those
   sections already use. Keeping it in one file makes it reviewable as a
   design decision and, critically, REVERSIBLE as one: delete this file
   from the two shells and the app renders exactly as it did before.

   RULES THIS FILE OBEYS (inherited verbatim from `hq.css`):
   1. NOTHING HERE COMPUTES A NUMBER. Every value drawn was produced by
      a certified backend view-model. CSS decides emphasis, never meaning.
   2. NO COLOR-ONLY SIGNALS (Part 19). Every rule that tints something
      decorates markup that already carries a glyph, a word or a shape.
      Purple in particular is never a semantic carrier: good/bad/warning
      remain green/red/amber, and no reading changed its tone.
   3. NO NEW PALETTE. Every colour resolves through a `tokens.css`
      custom property. Zero literal hex outside the print block.
   4. ADDITIVE AND NON-STRUCTURAL. No rule here changes `display`,
      `grid-template-*`, `order`, `min-width` or a breakpoint that an
      existing responsive contract depends on -- specifically NOT
      `.bb-room` / `.bb-room__board` / `.bb-room__rec`,
      `.bb-col-secondary` / `.bb-col-mobile` / `.bb-col-tertiary`,
      `.bb-table-wrap--sticky`, `.bb-bottomnav`'s grid, or the shell's
      own `minmax(0, 1fr)` mobile tracks. Those are the DW-3.1 and Pack 2
      mobile fixes and this pack composes WITH them.

   THE DESIGN, IN ONE PARAGRAPH. Near-black violet-graphite base, lit
   from above. Every panel is a physical face: a top hairline of light,
   a wider gap to the surface below it, one drop shadow. Purple is the
   product's signature and appears in exactly five roles (primary
   action / current context / Blackbird's own opinion / active selection
   / brand moment), always as light rather than as a fill. The recurring
   brand gesture is the WING: an asymmetric rule, bright at its leading
   edge and dissolving to nothing, drawn at four scales -- 12px on a
   section title, 28px on a page head, the full width of an intelligence
   panel, and the emblem itself.
   ================================================================== */


/* =====================================================================
   1. AMBIENT DEPTH (Part T)
   =====================================================================
   The app background is a LIT ROOM, not a fill. Three very low-opacity
   radials on a single fixed, pointer-transparent layer behind the shell.

   PERFORMANCE: this is one composited layer that never repaints on
   scroll (`position: fixed`, no `background-attachment: fixed`, which
   is the expensive one). No image, no canvas, no JS.

   THE PAINT-ORDER DETAIL THAT MAKES IT WORK. `layout.css` sets the page
   ground on BOTH `html` and `body`. With `html` painted, its background
   propagates to the canvas and `body`'s own background then paints as a
   normal element box -- which would sit ON TOP of a `z-index: -1` child
   and hide this layer entirely. So the ground stays on the root and
   `body` is made transparent: the negative-z fixed layer then paints
   into the root stacking context, above the canvas and below every
   block in the document, which is exactly where ambience belongs. */
html {
  background-color: var(--bb-bg);
}
body {
  background-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bb-bg);
  background-image: var(--bb-ambient);
}

/* The shell's own chrome sits on solid surfaces so the ambience never
   reduces text contrast; only the main content well is lit through. */
.bb-main {
  background: transparent;
}


/* =====================================================================
   2. SHELL CHROME -- TOP BAR / NAV / CONTEXT BAR / BOTTOM NAV (Part F)
   ================================================================== */

/* --- top bar: a lit edge, not a border --- */
.bb-topbar {
  background-image: var(--bb-grad-topbar);
  border-bottom: 1px solid transparent;
  box-shadow:
      0 1px 0 var(--bb-purple-border),
      0 1px 0 rgb(var(--bb-paper-rgb) / 0.03) inset,
      0 8px 28px rgb(var(--bb-ink-rgb) / 0.45);
}
.bb-topbar__emblem {
  filter: drop-shadow(0 0 14px rgb(var(--bb-purple-rgb) / 0.65));
  opacity: 1;
}
.bb-wordmark {
  letter-spacing: 0.09em;
}

/* --- left nav --- */
.bb-nav {
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.045), transparent 260px);
  border-right-color: var(--bb-border);
}
.bb-navgroup__label {
  color: var(--bb-text-tertiary);
  letter-spacing: 0.16em;
}
/* The wing, at its smallest scale, opening every nav group. */
.bb-navgroup__label::before {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--bb-wing-short);
  opacity: 1;
}

/* Inactive nav stays quiet and low-noise -- it is the field the active
   item has to stand out from. */
.bb-navitem {
  position: relative;
  transition: background var(--bb-transition-fast), color var(--bb-transition-fast),
              border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
/* Hover is ALIVE: a surface, a hint of the rail, and a brighter icon --
   not merely a text colour change. */
.bb-navitem:hover {
  background: linear-gradient(90deg, var(--bb-purple-wash), transparent 70%), var(--bb-surface-hover);
  border-left-color: var(--bb-purple-border);
  color: var(--bb-text-primary);
}
.bb-navitem:hover .bb-navitem__icon {
  color: var(--bb-purple-bright);
}
/* CURRENT LOCATION -- role 4 (ACTIVE SELECTION) and role 2 (CURRENT
   CONTEXT) at once, and the single most-repeated purple moment in the
   product. Five simultaneous signals, only one of which is hue:
   a gradient fill, a 5px lit rail, an inner bloom, a brighter label
   weight, and `aria-current="page"` in the markup. */
.bb-navitem.is-active {
  background: linear-gradient(90deg,
      rgb(var(--bb-purple-rgb) / 0.26) 0%,
      rgb(var(--bb-purple-rgb) / 0.10) 48%,
      rgb(var(--bb-purple-rgb) / 0.03) 100%);
  border-left-color: var(--bb-purple-bright);
  color: var(--bb-purple-bright);
  /* PACK 1 (2026-09): the outer bloom is gone and the inner one halved.
     The rail, the fill, the weight and `aria-current` already say
     "here"; a glow on top made the rail's ONE lit row compete with the
     page's own intelligence panels. */
  box-shadow:
      inset 3px 0 0 var(--bb-purple-bright),
      inset 0 0 22px rgb(var(--bb-purple-rgb) / 0.09);
}
.bb-navitem.is-active .bb-navitem__icon {
  color: var(--bb-purple-bright);
  filter: drop-shadow(0 0 7px rgb(var(--bb-purple-rgb) / 0.75));
}
.bb-navitem.is-active .bb-navitem__label {
  font-weight: var(--bb-fw-bold);
}
.bb-nav__foot .bb-mark {
  color: var(--bb-purple);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgb(var(--bb-purple-rgb) / 0.55));
}

/* --- context bar: the strip that answers "where am I" --- */
.bb-contextbar {
  background-image:
      linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.07), transparent 70%),
      var(--bb-face-card);
  border-bottom-color: var(--bb-border);
  box-shadow: 0 1px 0 var(--bb-purple-border), 0 6px 20px rgb(var(--bb-ink-rgb) / 0.35);
}
.bb-fact__label {
  color: var(--bb-text-tertiary);
}
.bb-fact__value {
  color: var(--bb-text-primary);
}
/* The resolved format context is CURRENT CONTEXT -- purple by role. */
.bb-ctxbtn--accent {
  border-color: var(--bb-purple-border-strong);
  background: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.22), rgb(var(--bb-purple-rgb) / 0.08));
  color: var(--bb-purple-bright);
  box-shadow: var(--bb-glow-purple-sm);
}
.bb-ctxbtn--accent:hover {
  background: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.32), rgb(var(--bb-purple-rgb) / 0.14));
  box-shadow: var(--bb-glow-purple);
}
.bb-ctxbtn {
  background-image: var(--bb-face-card);
  transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast),
              box-shadow var(--bb-transition-fast);
}
.bb-ctxbtn:not(.bb-ctxbtn--accent):hover {
  border-color: var(--bb-purple-border);
}

/* --- global search trigger --- */
.bb-search__trigger {
  background-image: var(--bb-face-card);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
.bb-search__trigger:hover {
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-glow-purple-sm);
}
.bb-search__panel {
  background-image: var(--bb-face-raised);
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-elev-3), var(--bb-glow-purple-sm);
}
.bb-result:hover,
.bb-result:focus-visible {
  background: linear-gradient(90deg, var(--bb-purple-soft), transparent 80%), var(--bb-surface-hover);
  box-shadow: inset 2px 0 0 var(--bb-purple-bright);
}

/* The off-canvas scrim. Declared OUTSIDE a media query on purpose: the
   sheets exist at the tablet tier (<=1200px) as well as the phone tier,
   and `layout.css` declares the scrim in both. `display` is untouched --
   only what the scrim looks like once something else has shown it. */
.bb-scrim {
  background: var(--bb-scrim);
  backdrop-filter: blur(2px);
}

/* --- unread badge: Blackbird's own layer, so it is brand purple --- */
.bb-unread-badge {
  background: var(--bb-cta);
  color: var(--bb-cta-text);
  box-shadow: 0 0 12px rgb(var(--bb-purple-rgb) / 0.55);
}

/* --- dropdown menu panels (products / account / league / context) --- */
.bb-menu-list.bb-card {
  background-image: var(--bb-face-raised);
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-elev-3), var(--bb-glow-purple-sm);
}


/* =====================================================================
   3. PAGE HEADERS AND SECTION HEADERS (Parts H / I)
   =====================================================================
   One header language: a kicker, a title with real weight, a signature
   wing under it, and the page's own status rail to the right. It is an
   Intelligence HQ header -- deliberately NOT a marketing hero: no
   oversized type, no full-bleed image, no vertical padding contest. */

.bb-pagehead {
  position: relative;
  border-bottom: none;
  padding-bottom: var(--bb-space-4);
}
/* THE WING. A 2px rule that is bright at the leading edge and dissolves
   -- the same gesture as the emblem, at page scale. It replaces the
   full-width hairline border, which read as a divider rather than as
   identity. */
.bb-pagehead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bb-wing);
  opacity: 0.9;
  pointer-events: none;
}
/* A soft light behind the title block, so a page opens with atmosphere
   rather than on a flat field. Clipped to the header's own box. */
.bb-pagehead::before {
  content: "";
  position: absolute;
  left: -12%;
  right: 40%;
  top: -70%;
  bottom: -30%;
  z-index: 0;
  pointer-events: none;
  /* PACK 1 (2026-09): halved. The header opens with atmosphere, not a
     spotlight -- the title's weight and the wing carry the identity. */
  background: radial-gradient(60% 100% at 20% 60%, rgb(var(--bb-purple-rgb) / 0.07), transparent 72%);
}
.bb-pagehead__main,
.bb-pagehead__rail {
  position: relative;
  z-index: 1;
}
.bb-pagehead__eyebrow {
  /* PACK 1 (2026-09): the domain label is a terminal stamp -- mono,
     tracked, quiet -- so it reads as a locator, not as a second title. */
  font-family: var(--bb-font-mono);
  letter-spacing: 0.16em;
  font-weight: var(--bb-fw-semibold);
}
.bb-pagehead__title {
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
  color: var(--bb-text-primary);
  text-shadow: 0 2px 18px rgb(var(--bb-ink-rgb) / 0.55);
}
.bb-pagehead__subject {
  color: var(--bb-text-secondary);
  line-height: var(--bb-leading-body);
}

/* Section titles carry the wing at its small scale. */
.bb-sectionhead__title {
  font-weight: var(--bb-fw-bold);
  color: var(--bb-text-primary);
}
.bb-sectionhead__title::before {
  width: 14px;
  height: 3px;
  background: var(--bb-wing-short);
  opacity: 1;
}
.bb-sectionhead__note {
  color: var(--bb-text-tertiary);
}

/* The welcome/greeting band on My Blackbird. */
.bb-welcome {
  border-color: var(--bb-purple-border);
  background-image: var(--bb-grad-hero), var(--bb-texture-grid), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple);
}
.bb-welcome__title {
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
}


/* =====================================================================
   4. THE CARD SYSTEM (Part D)
   =====================================================================
   SIX DISTINGUISHABLE LEVELS, and the distinction is DEPTH rather than
   another border weight:

     0  page            ambient, lit from above-left
     1  .bb-card        flat face, hairline of light, one drop
     2  .bb-icard       section container: face + elevation 2
     3  .bb-icard--raised / .bb-tile--lead   raised working surface
     4  .is-selected / .bb-icard--active     active selection (purple)
     5  .bb-icard--primary                   BLACKBIRD INTELLIGENCE
     S  .bb-icard--caution / --danger        semantic

   Radii stay at the existing 8/12px tokens: Blackbird is technical, and
   a 20px SaaS bubble is the wrong instrument. */

/* `.bb-card` (the 020.0 shape) and `.bb-icard` (the Pack 1 shape) are
   BOTH live -- the audit found ~110 uses of the first and ~85 of the
   second, and four templates (Command Center 16/1, Front Office 8/1,
   Account 4/1, Admin Users 4/1) MIX THEM ON ONE SCREEN, where the two
   rendered visibly differently: one had a shadow and one did not.

   Rewriting 26 templates is not this pack's job. Making the two shapes
   render IDENTICALLY is, and it retires the inconsistency permanently
   rather than moving it. `.bb-icard` keeps its own larger default
   margin from `hq.css`; only the face is unified. */
.bb-card,
.bb-icard {
  background-color: var(--bb-surface-card);
  background-image: var(--bb-face-card);
  border-color: var(--bb-border);
  box-shadow: var(--bb-elev-2);
}
.bb-icard--quiet {
  background-image: none;
  box-shadow: none;
}

/* Level 3 -- a raised working surface (a panel you act inside). */
.bb-icard--raised,
.bb-tile--lead,
.bb-pcard--featured {
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-face-raised);
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-2);
}

/* Level 4 -- ACTIVE SELECTION. Purple role 4. Always paired with a word
   or a badge in the markup that says the same thing. */
.bb-icard--active,
.bb-card.is-selected,
.bb-icard.is-selected {
  border-color: var(--bb-purple-border-strong);
  background-image: var(--bb-face-intel), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}

/* Level S -- semantic containers. Distinct from purple by construction:
   these tint the BORDER and a top rule in the semantic hue, and never
   borrow the intelligence treatment. */
.bb-icard--caution {
  border-color: var(--bb-caution-border);
  box-shadow: var(--bb-elev-2), 0 0 22px rgb(var(--bb-caution-rgb) / 0.10);
}
.bb-icard--danger {
  border-color: var(--bb-negative-border);
  box-shadow: var(--bb-elev-2), 0 0 22px rgb(var(--bb-negative-rgb) / 0.10);
}

/* Metric tiles: a face and a floor, so a row of readings reads as a
   bank of instruments rather than six outlined rectangles. */
.bb-tile {
  background-image: var(--bb-face-card);
  box-shadow: var(--bb-elev-1);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
.bb-tile__label {
  color: var(--bb-text-tertiary);
  letter-spacing: 0.12em;
}
.bb-tile__value {
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.015em;
}
.bb-tile--lead .bb-tile__value {
  color: var(--bb-text-primary);
  text-shadow: 0 0 26px rgb(var(--bb-purple-rgb) / 0.28);
}

/* Hero stat panels (Command Center / Team). */
.bb-herostat__panel {
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-2);
}
.bb-herostat__panel::before {
  height: 3px;
  background: var(--bb-wing);
  opacity: 1;
}
.bb-herostat__value {
  text-shadow: 0 2px 20px rgb(var(--bb-ink-rgb) / 0.6);
}


/* =====================================================================
   5. BLACKBIRD INTELLIGENCE SURFACES (Part K)
   =====================================================================
   THE ONE TREATMENT FOR "BLACKBIRD IS GIVING YOU ITS OPINION".

   `.bb-icard--primary` is already the class every such surface carries
   -- the Command Brief, the Draft Room header, the certified draft
   recommendation, the team overview, the player dossier, the completion
   roster. This section makes it unmistakable and, more importantly,
   CONSISTENT: wherever a reader sees this face, the content is
   Blackbird's own conclusion rather than a restatement of data.

   Its parts: a left signature rail, the wing across the top, a violet
   wash, the blueprint grid, the emblem watermark (already drawn by
   `hq.css`'s own `::before`) and real elevation. */
.bb-icard--primary {
  border-color: var(--bb-purple-border-strong);
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-face-intel), var(--bb-texture-hatch), var(--bb-texture-grid), var(--bb-face-raised);
  background-size: auto, auto, var(--bb-texture-grid-size), auto;
  box-shadow:
      inset 3px 0 0 rgb(var(--bb-purple-rgb) / 0.85),
      var(--bb-elev-3),
      var(--bb-glow-purple);
}
/* The wing across the top of an intelligence panel, at full width. */
.bb-icard--primary::after {
  height: 2px;
  background: var(--bb-wing);
  opacity: 1;
}
/* The emblem watermark reads at 0.05 on the old, lighter base; on the
   deeper ramp it needed a stop of headroom to stay perceptible without
   ever competing with text. */
.bb-icard--primary::before {
  opacity: 0.07;
}
.bb-icard--primary .bb-sectionhead__title,
.bb-icard--primary .bb-pagehead__title {
  color: var(--bb-text-primary);
}

/* The BB// proprietary-insight badge keeps its own reserved ultraviolet
   -- it is a DIFFERENT token by contract -- but gains the same physical
   face as everything else so it stops reading as a flat sticker. */
.bb-proprietary {
  background-image: linear-gradient(180deg, rgb(var(--bb-proprietary-rgb) / 0.16), transparent);
  box-shadow: var(--bb-elev-1), 0 0 18px rgb(var(--bb-proprietary-rgb) / 0.18);
}

/* The canonical-vs-roster-fit pair on the Trade Desk: the canonical band
   is a Blackbird reading and takes the signature rail; the fit band
   stays deliberately demoted and dashed. Unchanged in meaning. */
.bb-canon {
  border-left-width: 3px;
  border-left-color: var(--bb-purple);
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), inset 3px 0 12px rgb(var(--bb-purple-rgb) / 0.10);
}

/* Priority cards (Command Center's Top Priorities) are Blackbird's own
   agenda for you -- role 3. */
.bb-priocard {
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-1);
}
.bb-priocard::before {
  width: 3px;
  background: var(--bb-purple-rail);
  opacity: 1;
}
.bb-priocard:hover,
.bb-priocard:focus-visible {
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple);
}
.bb-priocard__cta {
  color: var(--bb-purple-bright);
}

/* The recommendation CALL keeps its semantic go/wait hues -- a call is
   a judgement and its tone is meaning, not brand. What it gains is
   depth and a louder word. */
.bb-call {
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-2);
}
.bb-call__word {
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.05em;
}
.bb-call__eyebrow {
  color: var(--bb-purple-bright);
  letter-spacing: 0.18em;
}
.bb-call__name {
  letter-spacing: -0.02em;
}


/* =====================================================================
   6. THE BUTTON SYSTEM (Part G)
   =====================================================================
   PRIMARY / SECONDARY / GHOST / DANGER / COMPACT / TABLE ACTION.
   No motion that delays a click: every transition below is on paint
   properties only and completes in 120ms. */

.bb-btn {
  background-image: var(--bb-face-control);
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-1);
  transition: background var(--bb-transition-fast), border-color var(--bb-transition-fast),
              box-shadow var(--bb-transition-fast), transform var(--bb-transition-fast);
}
.bb-btn:hover {
  background-image: var(--bb-face-control-hover);
  border-color: var(--bb-purple-border);
  /* PACK 1 (2026-09): a SECONDARY button no longer blooms on hover --
     a row of six shortcut buttons was lighting up like six CTAs. The
     face brightens and the edge takes the purple; the bloom is reserved
     for `.bb-btn--primary`. */
  box-shadow: var(--bb-elev-1);
}
.bb-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgb(var(--bb-ink-rgb) / 0.45);
}
.bb-btn:disabled,
.bb-btn:disabled:hover {
  background-image: var(--bb-face-control);
  border-color: var(--bb-border-strong);
  box-shadow: none;
  transform: none;
}

/* PRIMARY -- purple role 1. A deep violet CTA with WHITE text (measured
   at or above 4.5:1 against the lighter gradient stop), a lit top edge,
   a seat shadow and a restrained bloom. This is the loudest thing on
   any surface it appears on, and there is normally one of it. */
.bb-btn--primary {
  background-image: var(--bb-cta);
  background-color: var(--bb-purple-deep);
  border-color: var(--bb-cta-border);
  color: var(--bb-cta-text);
  box-shadow: var(--bb-glow-cta);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.01em;
}
.bb-btn--primary:hover {
  background-image: var(--bb-cta-hover);
  border-color: var(--bb-purple-bright);
  color: var(--bb-cta-text);
  box-shadow: var(--bb-glow-cta-hover);
  filter: none;
}
.bb-btn--primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 8px rgb(var(--bb-ink-rgb) / 0.40), 0 0 18px rgb(var(--bb-purple-rgb) / 0.35);
}

/* GHOST -- clearly subordinate, but alive on hover. */
.bb-btn--ghost {
  background-image: none;
  box-shadow: none;
}
.bb-btn--ghost:hover {
  background-image: none;
  background-color: var(--bb-purple-soft);
  border-color: transparent;
  color: var(--bb-text-primary);
  box-shadow: none;
}

/* DANGER -- destructive verbs (disconnect a league, clear a queue,
   abandon a draft). Never purple: destruction is semantic. */
.bb-btn--danger {
  background-image: linear-gradient(180deg, rgb(var(--bb-negative-rgb) / 0.22), rgb(var(--bb-negative-rgb) / 0.08));
  border-color: var(--bb-negative-border);
  color: var(--bb-negative);
}
.bb-btn--danger:hover {
  background-image: linear-gradient(180deg, rgb(var(--bb-negative-rgb) / 0.34), rgb(var(--bb-negative-rgb) / 0.14));
  border-color: var(--bb-negative);
  box-shadow: 0 0 20px rgb(var(--bb-negative-rgb) / 0.28);
}

/* TABLE ACTION -- the compact verb that lives in a row's last cell.
   Quieter at rest so a hundred of them do not shout, and it lights up
   on the row's own hover as well as its own. */
.bb-table .bb-btn--sm {
  background-image: none;
  background-color: var(--bb-bg-elevated);
  box-shadow: none;
}
.bb-table tbody tr:hover .bb-btn--sm {
  border-color: var(--bb-purple-border);
}
.bb-table .bb-btn--sm:hover {
  background-color: var(--bb-purple-soft);
  border-color: var(--bb-purple-border-strong);
  color: var(--bb-text-primary);
}
.bb-table .bb-btn--sm.bb-btn--primary,
.bb-table .bb-btn--primary {
  background-image: var(--bb-cta);
  background-color: var(--bb-purple-deep);
  color: var(--bb-cta-text);
  box-shadow: var(--bb-glow-cta);
}

/* The skip link is a primary action by role. */
.bb-skip-link {
  background: var(--bb-cta);
  color: var(--bb-cta-text);
  box-shadow: var(--bb-glow-cta);
}


/* =====================================================================
   7. TABS / CHIPS / BADGES / PILLS
   ================================================================== */

.bb-tabs {
  border-bottom-color: var(--bb-border);
}
.bb-tab {
  border-radius: var(--bb-radius-sm) var(--bb-radius-sm) 0 0;
  transition: color var(--bb-transition-fast), background var(--bb-transition-fast),
              border-color var(--bb-transition-fast);
}
.bb-tab:hover {
  background: var(--bb-purple-wash);
}
/* Selected tab -- purple role 4, with a lit underline rather than a
   1px hue change. */
.bb-tab.is-active {
  color: var(--bb-purple-bright);
  border-bottom-color: var(--bb-purple-bright);
  background: linear-gradient(180deg, transparent, var(--bb-purple-soft));
  box-shadow: 0 1px 0 rgb(var(--bb-purple-rgb) / 0.55), 0 6px 18px -8px rgb(var(--bb-purple-rgb) / 0.75);
}

/* A SELECTED FILTER is purple role 4 -- but it is a STATE, not a verb,
   and it must not compete with the surface's actual primary action.

   Rankings, Available Players and the Cheat Sheet all mark their active
   format/sort pill with `.bb-btn--primary`, which is now the solid CTA.
   On the Rankings board that would put two solid CTAs (active format +
   active sort) in the board bar, louder than anything the page actually
   asks you to DO. Inside a filter/board strip the same class therefore
   renders as the SELECTED-STATE purple -- translucent fill, purple
   label, purple edge -- which keeps the hierarchy the design contract
   asks for: solid purple = act, translucent purple = selected.

   No template changed; both spellings (`.is-active` and
   `.bb-btn--primary`) resolve to the identical selected state. */
.bb-filterbar .bb-btn.is-active,
.bb-filterbar .bb-btn--primary,
.bb-boardbar .bb-btn.is-active,
.bb-boardbar .bb-btn--primary,
.bb-actions .bb-btn.is-active {
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.30), rgb(var(--bb-purple-rgb) / 0.10));
  background-color: transparent;
  border-color: var(--bb-purple-border-strong);
  color: var(--bb-purple-bright);
  box-shadow: var(--bb-glow-purple-sm);
  font-weight: var(--bb-fw-bold);
}
.bb-filterbar .bb-btn.is-active:hover,
.bb-filterbar .bb-btn--primary:hover,
.bb-boardbar .bb-btn.is-active:hover,
.bb-boardbar .bb-btn--primary:hover,
.bb-actions .bb-btn.is-active:hover {
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.42), rgb(var(--bb-purple-rgb) / 0.16));
  border-color: var(--bb-purple-bright);
  color: var(--bb-purple-bright);
  box-shadow: var(--bb-glow-purple);
}

/* The resolved-context stamp is CURRENT CONTEXT -- role 2. */
.bb-context-stamp {
  box-shadow: var(--bb-glow-purple-sm);
}

/* Badges/stamps keep their semantic hues; they only gain a face so a
   row of them stops looking printed on. */
.bb-badge,
.bb-stamp,
.bb-chip,
.bb-fresh,
.bb-tier,
.bb-pos,
.bb-edge {
  box-shadow: var(--bb-elev-1);
}
.bb-stamp {
  background-image: var(--bb-face-card);
}


/* =====================================================================
   8. TABLES (Part J)
   =====================================================================
   These boards are read at draft speed. Density and scan-ability win
   over decoration everywhere they conflict: no zebra, no row borders
   heavier than a hairline, no per-cell shadow, no layout shift on
   hover. What changes is HEADER CONTRAST, the strength of the hover and
   selected bands, and the rank column's weight. */

.bb-table-wrap {
  border-color: var(--bb-border);
  box-shadow: var(--bb-elev-1);
}

.bb-table thead th {
  background-image: linear-gradient(180deg, var(--bb-surface-raised), var(--bb-bg-elevated));
  color: var(--bb-text-secondary);
  font-weight: var(--bb-fw-bold);
  letter-spacing: 0.1em;
  box-shadow: inset 0 -2px 0 var(--bb-purple-border);
}

.bb-table tbody td {
  border-bottom-color: var(--bb-border-subtle);
}

/* Hover: a purple-tinted band plus the lit leading rail `hq.css`
   already draws on `.bb-table--scan`. Paint only -- no geometry. */
.bb-table tbody tr.is-clickable:hover,
.bb-table--scan tbody tr:hover > td,
.bb-table--scan tbody tr:focus-within > td {
  background: linear-gradient(90deg, var(--bb-purple-soft), rgb(var(--bb-purple-rgb) / 0.04) 60%, transparent);
}
.bb-table--scan tbody tr:hover > td:first-child,
.bb-table--scan tbody tr:focus-within > td:first-child {
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}

/* THE USER'S OWN ROW / THE CURRENT ROW -- purple roles 2 and 4.
   `.bb-row--highlight` was REFERENCED BY MOCK DRAFT'S PICK HISTORY
   (twice) AND DEFINED BY NOTHING: a user's own picks in a mock draft
   have been rendering identically to every CPU pick since the class was
   written. It is defined here, alongside the two rows that were already
   marked, so all three read the same way across the product. Every one
   of them also carries a "YOU"/"you" word in its own markup. */
.bb-table tbody tr.bb-row--highlight > td,
.bb-table tbody tr.bb-row--user > td,
.bb-table tbody tr.is-selected > td {
  background: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.22), rgb(var(--bb-purple-rgb) / 0.06) 70%, transparent);
}
.bb-table tbody tr.bb-row--highlight > td:first-child,
.bb-table tbody tr.bb-row--user > td:first-child,
.bb-table tbody tr.is-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
.bb-table tbody tr.bb-row--highlight .bb-cell-player,
.bb-table tbody tr.bb-row--user .bb-cell-player {
  color: var(--bb-text-primary);
  font-weight: var(--bb-fw-bold);
}

/* A queued row is the USER's note, not a Blackbird judgement -- it keeps
   the quietest possible mark (`hq.css` draws the rail) and only gains
   a whisper of the wash so it is visible while scrolling. */
.bb-table tbody tr.bb-row--queued > td {
  background: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.09), transparent 45%);
}

/* Rank is the scan anchor of every board. */
.bb-table--rankings tbody tr[data-bb-row-href] > td:first-child {
  color: var(--bb-text-primary);
  text-shadow: 0 0 16px rgb(var(--bb-purple-rgb) / 0.30);
}
.bb-table .bb-cell-player a:hover {
  color: var(--bb-purple-bright);
}

/* The value/market/edge bracket: Blackbird's own reading sits on a
   distinctly lit backdrop, which is what makes BBV feel Blackbird-owned
   and Market feel like an external reference beside it. */
.bb-table th.bb-col-reading,
.bb-table td.bb-col-reading {
  background-image: linear-gradient(180deg, var(--bb-purple-wash), transparent);
}
.bb-table th.bb-col-reading:first-of-type,
.bb-table td.bb-col-reading:first-of-type {
  border-left-color: var(--bb-purple-border);
}
.bb-table th.bb-col-reading:last-of-type,
.bb-table td.bb-col-reading:last-of-type {
  border-right-color: var(--bb-purple-border);
}

/* Tier bands. */
.bb-table tbody tr.bb-tier-divider td {
  background-image: linear-gradient(90deg, var(--bb-purple-soft), transparent 55%);
  border-top-color: var(--bb-purple-border);
  border-bottom-color: var(--bb-border-strong);
}
.bb-tier-divider__label {
  color: var(--bb-purple-bright);
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-glow-purple-sm);
}
.bb-tierband__label {
  color: var(--bb-purple-bright);
}

/* Board control strips read as one instrument panel. */
.bb-boardbar {
  border-color: var(--bb-purple-border);
  background-color: var(--bb-surface-card);
  background-image: var(--bb-grad-panel-accent), var(--bb-face-card);
  box-shadow: var(--bb-elev-2);
}
.bb-boardbar::before {
  height: 2px;
  background: var(--bb-wing);
  opacity: 1;
}

/* The scannable link row (Front Office rosters, Messages, final roster,
   Members). */
a.bb-listrow {
  border-radius: var(--bb-radius-sm);
  transition: background var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
a.bb-listrow:hover {
  background: linear-gradient(90deg, var(--bb-purple-soft), transparent 75%);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
.bb-landscape__row.is-you {
  background: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.22), rgb(var(--bb-purple-rgb) / 0.05) 75%, transparent);
  border-color: var(--bb-purple-border-strong);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
.bb-landscape__row:hover {
  background: var(--bb-purple-wash);
}


/* =====================================================================
   9. FORMS (Part Q)
   ================================================================== */

.bb-input,
select.bb-input,
textarea.bb-input {
  background-color: var(--bb-bg);
  background-image: linear-gradient(180deg, rgb(var(--bb-ink-rgb) / 0.25), transparent 60%);
  border-color: var(--bb-border-strong);
  color: var(--bb-text-primary);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast),
              background-color var(--bb-transition-fast);
}
.bb-input::placeholder,
textarea.bb-input::placeholder {
  color: var(--bb-text-tertiary);
}
.bb-input:hover {
  border-color: var(--bb-purple-border);
}
/* Focus is signature purple, as a RING plus a border -- never a hue
   swap alone, and never at the cost of the ring's visibility. */
.bb-input:focus,
.bb-input:focus-visible,
select.bb-input:focus,
textarea.bb-input:focus {
  outline: none;
  border-color: var(--bb-purple-bright);
  background-color: var(--bb-bg-elevated);
  box-shadow: 0 0 0 3px rgb(var(--bb-purple-rgb) / 0.28), 0 0 22px rgb(var(--bb-purple-rgb) / 0.22);
}
/* PHASE 1B CORRECTION: a BARE native control inside a form field wears
   the same skin as `.bb-input`. The Mock Draft hub's setup selects and
   number inputs carried no class at all and rendered as white platform
   widgets against the purple environment -- the one place in the
   Phase 1B surfaces where the old chrome still showed. `color-scheme:
   dark` keeps the select's popup and the number spinners dark too. */
.bb-form-field > select:not(.bb-input),
.bb-form-field > input:not(.bb-input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
  color-scheme: dark;
  width: 100%;
  min-height: 40px;
  background-color: var(--bb-bg);
  background-image: linear-gradient(180deg, rgb(var(--bb-ink-rgb) / 0.25), transparent 60%);
  border: 1px solid var(--bb-border-strong);
  border-radius: var(--bb-radius-md);
  padding: var(--bb-space-2) var(--bb-space-3);
  color: var(--bb-text-primary);
  font-family: var(--bb-font-ui);
  font-size: var(--bb-fs-base);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast),
              background-color var(--bb-transition-fast);
}
.bb-form-field > select:not(.bb-input) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--bb-space-3) + 22px);
  /* The chevron is two token-coloured gradient squares forming a "V",
     so no literal colour enters this file (tokens.css stays the single
     source of colour). */
  background-image: linear-gradient(180deg, rgb(var(--bb-ink-rgb) / 0.25), transparent 60%),
      linear-gradient(45deg, transparent 50%, var(--bb-purple-bright) 50%),
      linear-gradient(135deg, var(--bb-purple-bright) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: 0 0, calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 100% 100%, 6px 6px, 6px 6px;
}
.bb-form-field > select:not(.bb-input) option {
  background: var(--bb-bg-elevated);
  color: var(--bb-text-primary);
}
.bb-form-field > select:not(.bb-input)::placeholder,
.bb-form-field > input:not(.bb-input)::placeholder {
  color: var(--bb-text-tertiary);
}
.bb-form-field > select:not(.bb-input):hover,
.bb-form-field > input:not(.bb-input):hover {
  border-color: var(--bb-purple-border);
}
.bb-form-field > select:not(.bb-input):focus,
.bb-form-field > select:not(.bb-input):focus-visible,
.bb-form-field > input:not(.bb-input):focus,
.bb-form-field > input:not(.bb-input):focus-visible {
  outline: none;
  border-color: var(--bb-purple-bright);
  background-color: var(--bb-bg-elevated);
  box-shadow: 0 0 0 3px rgb(var(--bb-purple-rgb) / 0.28), 0 0 22px rgb(var(--bb-purple-rgb) / 0.22);
}
.bb-form-field label {
  color: var(--bb-text-tertiary);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: 0.11em;
}
/* Native controls take the brand accent where the platform allows it. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--bb-purple);
}
/* The people picker's option rows (Messages composer). */
.bb-people-results {
  border-color: var(--bb-border);
  box-shadow: var(--bb-elev-1);
}
.bb-people-option:hover,
.bb-people-option:focus-visible {
  background: linear-gradient(90deg, var(--bb-purple-soft), transparent 80%);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
/* A file/upload control (bug report screenshots). */
input[type="file"] {
  color: var(--bb-text-secondary);
}
input[type="file"]::file-selector-button {
  margin-right: var(--bb-space-3);
  padding: var(--bb-space-2) var(--bb-space-4);
  border-radius: var(--bb-radius-md);
  border: 1px solid var(--bb-border-strong);
  background-image: var(--bb-face-control);
  color: var(--bb-text-primary);
  font-family: var(--bb-font-ui);
  font-size: var(--bb-fs-sm);
  font-weight: var(--bb-fw-semibold);
  cursor: pointer;
  transition: border-color var(--bb-transition-fast), background var(--bb-transition-fast);
}
input[type="file"]::file-selector-button:hover {
  background-image: var(--bb-face-control-hover);
  border-color: var(--bb-purple-border);
}


/* =====================================================================
   10. EMPTY / LOADING / DEGRADED STATES (Part R)
   =====================================================================
   An honest absence should look INTENTIONAL. These already share one
   vocabulary (`.bb-state` / `.bb-empty-state`); what they lacked was
   any physical presence at all, which is what made them read as
   forgotten rather than as answered. */

.bb-state,
.bb-empty-state {
  background-color: var(--bb-surface-card);
  background-image: var(--bb-face-card);
  box-shadow: var(--bb-elev-1);
}
.bb-state__mark {
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-1);
}
.bb-state__kind {
  letter-spacing: 0.16em;
}
/* A GATED state is a deliberate product decision, not a failure -- it is
   the one state that takes the intelligence face. */
.bb-state--gated {
  border-color: var(--bb-purple-border-strong);
  background-image: var(--bb-face-intel), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}
.bb-state--gated .bb-state__mark {
  color: var(--bb-purple-bright);
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-glow-purple-sm);
}
.bb-state--neutral {
  background-image: none;
  box-shadow: none;
}
.bb-loading::before {
  border-top-color: var(--bb-purple-bright);
}
.bb-skeleton {
  background-image: linear-gradient(90deg,
      var(--bb-surface) 25%,
      rgb(var(--bb-purple-rgb) / 0.10) 37%,
      var(--bb-surface) 63%);
}
/* Banners keep their semantic hue and gain the same face as cards. */
.bb-banner {
  background-image: var(--bb-face-card);
  box-shadow: var(--bb-elev-1);
}
/* Alias so a caution/error/info/success banner can also be written with
   the alert vocabulary several surfaces reach for. */
.bb-banner--danger,
.bb-banner--error {
  background-color: var(--bb-negative-bg);
  border: 1px solid var(--bb-negative-border);
  color: var(--bb-negative);
}
.bb-banner--success {
  background-color: var(--bb-positive-bg);
  border: 1px solid var(--bb-positive-border);
  color: var(--bb-positive);
}

/* Disclosures. */
.bb-disclosure {
  background-image: var(--bb-face-card);
}
.bb-disclosure > summary:hover {
  color: var(--bb-text-primary);
}
.bb-about > summary {
  color: var(--bb-purple-bright);
}


/* =====================================================================
   11. TRADE / TEAM / FRONT OFFICE SURFACES (Part O)
   ================================================================== */

/* The Trade Balance Bar is one of the two signature Blackbird visuals.
   Its TRACK stays the certified give/neutral/receive semantic gradient
   -- that is meaning and purple has no business in it -- but the panel
   around it takes the intelligence face, and the marker gains a real
   glow so the read is instant. */
.bb-tradebar {
  border-color: var(--bb-purple-border);
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-grad-panel-accent), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}
.bb-tradebar__side-value {
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgb(var(--bb-ink-rgb) / 0.6);
}
.bb-tradebar__marker {
  filter: drop-shadow(0 0 10px currentColor);
}
.bb-balance {
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-1);
}
.bb-balance__seg {
  background-image: var(--bb-face-card);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
.bb-balance__seg.is-active {
  box-shadow: var(--bb-elev-1), 0 0 20px rgb(var(--bb-ink-rgb) / 0.35);
}
/* The verdict word: the single largest piece of type on the Trade Desk. */
.bb-verdict__label {
  font-weight: 800;
  text-shadow: 0 0 34px currentColor, 0 2px 22px rgb(var(--bb-ink-rgb) / 0.7);
}
/* The two exchange sides are the page's working surface. */
.bb-trade-side {
  border-radius: var(--bb-radius-md);
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-1);
}
.bb-trade-side::before {
  height: 2px;
  background: var(--bb-wing);
  opacity: 1;
}
.bb-trade-chip {
  background-image: var(--bb-face-control);
  box-shadow: var(--bb-elev-1);
  transition: border-color var(--bb-transition-fast);
}
.bb-trade-chip:hover {
  border-color: var(--bb-purple-border);
}
.bb-trade-search-row:hover {
  background: linear-gradient(90deg, var(--bb-purple-soft), transparent 80%);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
/* Team surfaces: the radar, the matrix, the direction band. */
.bb-radar__shape {
  fill: rgb(var(--bb-purple-rgb) / 0.18);
  stroke: var(--bb-purple-bright);
}
.bb-radar__dot {
  fill: var(--bb-purple-bright);
}
.bb-matrix__cell {
  background-image: var(--bb-face-card);
  box-shadow: var(--bb-elev-1);
}
.bb-dirband__stop.is-current .bb-dirband__dot {
  background: var(--bb-purple-bright);
  box-shadow: 0 0 0 4px var(--bb-purple-fill), 0 0 16px rgb(var(--bb-purple-rgb) / 0.7);
}
.bb-ring__fill {
  filter: drop-shadow(0 0 6px rgb(var(--bb-purple-rgb) / 0.55));
}
/* The featured league card on My Blackbird is CURRENT CONTEXT. */
.bb-leaguecard--featured {
  border-left-width: 3px;
  border-left-color: var(--bb-purple-bright);
  background-image: var(--bb-face-intel), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}
.bb-leaguecard__name {
  font-weight: var(--bb-fw-bold);
}


/* =====================================================================
   12. DRAFT SURFACES -- DRAFT OPS / LIVE DRAFT / MOCK DRAFT (Part M)
   =====================================================================
   THE FLAGSHIP. Purple is strongest here around exactly five things:
   CURRENT PICK, BLACKBIRD RECOMMENDATION, USER PICK, SELECTED PLAYER,
   DRAFT ACTION -- and nowhere else, so a drafter's eye is never pulled
   by decoration during a 30-second clock.

   NOT TOUCHED, DELIBERATELY: `.bb-room`'s grid and source order,
   `.bb-room__board` / `.bb-room__rec` min-widths, the 1081px collapse,
   `.bb-col-secondary` / `.bb-col-mobile` column tiers, and the
   `.bb-table-wrap--sticky` scroller. Those are the DW-3.1 mobile fixes;
   every rule below is paint on top of them. */

/* CURRENT PICK / ON THE CLOCK. The `--current` row keeps its amber
   semantic (it is a timing warning, not a brand moment); the USER's own
   pick row is purple, and both keep their words. */
.bb-draft-pick-row--user {
  background: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.24), rgb(var(--bb-purple-rgb) / 0.06) 70%, transparent);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
.bb-draft-pick-row--current {
  box-shadow: inset 3px 0 0 var(--bb-caution);
}

/* The four draft header facts: the two LEAD tiles (on the clock, your
   next pick) are the ones a drafter reads at a glance. */
.bb-draft-header .bb-tile--lead {
  border-color: var(--bb-purple-border);
  background-image: var(--bb-face-intel), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}
.bb-draft-header .bb-tile--lead .bb-tile__label {
  color: var(--bb-purple-bright);
}

/* A candidate/alternative panel in the recommendation column. */
.bb-draft-candidate {
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-1);
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
.bb-draft-candidate:hover {
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-elev-1), var(--bb-glow-purple-sm);
}

/* The queue's open-slot rail keeps its caution/positive semantics. */
.bb-fitrail__slot {
  box-shadow: var(--bb-elev-1);
}

/* The legacy SHADOW diagnostic stays the quietest container in the app:
   it gets no face, no glow and no purple, on purpose. */
.bb-legacy {
  background: transparent;
  box-shadow: none;
}


/* =====================================================================
   13. AUTH SURFACES (Parts H / P)
   =====================================================================
   The first thing anyone ever sees. It was also the flattest surface in
   the product: `auth_shell.html` loads tokens/layout/components and
   stops, so login/register/reset inherited none of the atmosphere, none
   of the focus rings and none of the reduced-motion contract. Both
   sheets are now linked there; these rules give the card the same
   intelligence face every flagship panel has. */
.bb-auth-shell {
  background-color: var(--bb-bg);
  background-image: var(--bb-ambient);
  min-height: 100dvh;
}
.bb-auth-card {
  border-color: var(--bb-purple-border);
  background-color: var(--bb-surface-card);
  background-image: var(--bb-grad-hero), var(--bb-texture-grid), var(--bb-face-raised);
  background-size: auto, var(--bb-texture-grid-size), auto;
  box-shadow: var(--bb-elev-3), var(--bb-glow-purple);
  position: relative;
  overflow: hidden;
}
.bb-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--bb-wing);
  pointer-events: none;
}
.bb-auth-card__wordmark .bb-wordmark {
  letter-spacing: 0.14em;
  font-weight: var(--bb-fw-bold);
}


/* =====================================================================
   13A. REMAINING SHARED SURFACES
   =====================================================================
   The evidence drawer, the account control strip, the learn layer, the
   value stack and the modal. Nothing bespoke -- each one simply joins
   the same face/wing/rail language as everything above, so no surface
   is left reading as a legacy island (Part Y). */

/* --- the evidence drawer: a working column, given an edge --- */
.bb-drawer {
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.05), transparent 240px);
  border-left-color: var(--bb-border);
}
.bb-drawer__section-title {
  color: var(--bb-text-secondary);
}

/* --- THE SIGNATURE READING STACK (Part N) ---
   BBV / Market / Edge, three separate cells that are never blended. The
   FIRST cell is Blackbird's own valuation and now says so: a purple
   wash and the wing across its top. The market cell stays plain -- it is
   an external reference and should read as one. This is presentation
   only; the three readings are as separate in the markup as they ever
   were, and none of them changed. */
.bb-valstack {
  border-color: var(--bb-border);
  box-shadow: var(--bb-elev-1);
}
.bb-valstack__cell {
  position: relative;
  background-image: var(--bb-face-card);
}
.bb-valstack__cell:first-child {
  background-image: var(--bb-face-intel), var(--bb-face-card);
}
.bb-valstack__cell:first-child::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--bb-wing);
  pointer-events: none;
}
.bb-valstack__cell:first-child .bb-valstack__value {
  color: var(--bb-text-primary);
  text-shadow: 0 0 20px rgb(var(--bb-purple-rgb) / 0.35);
}

/* --- Account's connection control strip --- */
.bb-connectstrip__label {
  color: var(--bb-text-tertiary);
  letter-spacing: 0.16em;
}
.bb-connectstrip__divider {
  background: linear-gradient(180deg, transparent, var(--bb-purple-border), transparent);
}

/* --- the learn layer (Getting Started / Help) --- */
.bb-learn__step,
.bb-learn__choice {
  background-image: var(--bb-face-card);
  box-shadow: var(--bb-elev-1);
}
.bb-learn__choice:hover,
.bb-learn__choice:focus-visible {
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}
.bb-learn__choice--lead {
  border-color: var(--bb-purple-border-strong);
  background-image: var(--bb-face-intel), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}
.bb-learn__steplink,
.bb-learn__gloss {
  color: var(--bb-purple-bright);
}
.bb-learn__cta {
  border-color: var(--bb-purple-border);
  background-image: var(--bb-grad-hero), var(--bb-face-raised);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}
.bb-jumpnav {
  border-color: var(--bb-purple-border);
  background-image: var(--bb-grad-panel-accent), var(--bb-face-card);
  box-shadow: var(--bb-elev-1);
}
.bb-jumpnav__link:hover,
.bb-jumpnav__link:focus-visible {
  border-color: var(--bb-purple-border-strong);
  background: var(--bb-purple-soft);
  color: var(--bb-purple-bright);
}

/* --- modal --- */
.bb-modal {
  border-color: var(--bb-purple-border);
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-3), var(--bb-glow-purple);
}
.bb-modal-scrim {
  background: var(--bb-scrim);
}

/* --- player identity --- */
.bb-avatar {
  background-image: var(--bb-face-raised);
  box-shadow: var(--bb-elev-2);
}
.bb-player-header__name {
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.025em;
  text-shadow: 0 2px 20px rgb(var(--bb-ink-rgb) / 0.55);
}

/* --- Command Center's display title --- */
.bb-cchero__title {
  text-shadow: 0 2px 30px rgb(var(--bb-ink-rgb) / 0.7);
}


/* =====================================================================
   13B. CLASSES THAT WERE USED BUT NEVER DEFINED (Part Y)
   =====================================================================
   A site-wide audit of every `bb-*` class in the template tree against
   every `bb-*` selector in the four stylesheets turned up nine names
   that templates reach for and NO stylesheet answers. Each one has been
   silently rendering as an unstyled `<div>` or an inert class since it
   was written. They are defined here -- at the smallest treatment that
   makes the author's evident intent true -- rather than stripped from
   the markup, because in every case the markup is right and the
   stylesheet is what is missing.

   (`.bb-row--highlight`, the tenth, is defined in section 8 above with
   the other row-emphasis rules, where it belongs.) */

/* Command Center's asymmetric main/rail band. `.bb-ccgrid` sets the two
   tracks; neither CHILD existed, so both columns' cards were flowing
   with the grid's own gap and no internal rhythm of their own. */
.bb-ccgrid__main,
.bb-ccgrid__rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-4);
}

/* The position-strength radar's root element (its six part selectors all
   existed). Keeps the SVG from stretching past its column. */
.bb-radar {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 18px rgb(var(--bb-purple-rgb) / 0.22));
}

/* The base league card on My Blackbird (only its `--featured` modifier
   and its child parts were defined). */
.bb-leaguecard {
  transition: border-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast);
}
.bb-leaguecard:hover {
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm);
}

/* Archives' dossier row body. */
.bb-dossier__body {
  min-width: 0;
}

/* The two halves of the Draft Position Gap's "both numbers, no
   subtraction" honest branch. They are two readings side by side and
   must read as such -- so the value is legible and the pair does not
   wrap mid-number in a narrow draft-board cell. */
.bb-gapcell__side {
  color: var(--bb-text-secondary);
  white-space: nowrap;
}

/* The utility scale stopped at `-2`; six call sites across Account and
   Admin Users ask for `-1`. */
.bb-mt-1 { margin-top: var(--bb-space-1); }
.bb-mb-1 { margin-bottom: var(--bb-space-1); }


/* =====================================================================
   13C. UTILITIES THAT RETIRE A REPEATED INLINE STYLE (Part Y)
   =====================================================================
   Two inline patterns repeat across the template tree with no class to
   carry them: nine `.bb-tile-row` column-count overrides and five
   full-bleed `grid-column: 1 / -1` escape hatches. Named here so the
   next page does not invent a tenth spelling. */
.bb-tile-row--2 { grid-template-columns: repeat(2, 1fr); }
.bb-tile-row--3 { grid-template-columns: repeat(3, 1fr); }
.bb-tile-row--4 { grid-template-columns: repeat(4, 1fr); }
.bb-tile-row--auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 1100px) {
  .bb-tile-row--4 { grid-template-columns: repeat(2, 1fr); }
  .bb-tile-row--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .bb-tile-row--2,
  .bb-tile-row--3,
  .bb-tile-row--4 { grid-template-columns: repeat(2, 1fr); }
}
/* A grid child that spans its whole row. Unlike `.bb-card--wide`'s
   `span 2`, `1 / -1` cannot create an implicit extra track when the
   grid has already collapsed to one column, so this needs no mobile
   counterpart rule. */
.bb-span-all { grid-column: 1 / -1; }

/* The four remaining pre-`bb-pagehead` page titles (the two rehearsal
   menus and the two Trade Value QA pages) render a bare
   `<h1 class="bb-heading">`. They are internal/QA surfaces and are not
   worth a markup migration in a presentation pack -- but they should
   not look like a different product either. */
h1.bb-heading {
  font-size: var(--bb-fs-page-title);
  font-weight: var(--bb-fw-bold);
  letter-spacing: -0.02em;
  padding-bottom: var(--bb-space-3);
  margin-bottom: var(--bb-space-4);
  border-bottom: 2px solid transparent;
  border-image: var(--bb-wing) 1;
}


/* =====================================================================
   14. RESPONSIVE (Parts U / M)
   =====================================================================
   Mobile is DESIGNED, not merely collapsed -- and nothing here reduces
   a tap target, hides a control, or re-collapses a column tier. */

@media (max-width: 900px) {
  /* MOBILE BOTTOM NAVIGATION. The active item was colour-only; it now
     also carries a lit indicator bar above the icon and a bloom behind
     it, so "where am I" survives a sunlit phone screen. The bar's own
     grid, height, safe-area padding and 6-column layout are untouched
     -- these are paint rules on the item, which is why they cannot
     reintroduce the DW-2/DW-3.1 overflow class of defect. */
  .bb-bottomnav {
    background-image: linear-gradient(180deg, var(--bb-surface-raised), var(--bb-bg-elevated));
    border-top-color: transparent;
    box-shadow: 0 -1px 0 var(--bb-purple-border), 0 -8px 26px rgb(var(--bb-ink-rgb) / 0.5);
  }
  .bb-bottomnav__item {
    position: relative;
    transition: color var(--bb-transition-fast);
  }
  .bb-bottomnav__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--bb-purple-bright);
    opacity: 0;
    transition: opacity var(--bb-transition-fast);
    pointer-events: none;
  }
  .bb-bottomnav__item.is-active {
    color: var(--bb-purple-bright);
    background: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.20), transparent 78%);
  }
  .bb-bottomnav__item.is-active::before {
    opacity: 1;
    box-shadow: 0 0 12px rgb(var(--bb-purple-rgb) / 0.9);
  }
  .bb-bottomnav__item.is-active .bb-bottomnav__icon {
    filter: drop-shadow(0 0 8px rgb(var(--bb-purple-rgb) / 0.8));
  }

  /* The nav and drawer sheets are floating panels on a phone: they need
     their own edge light to separate from the page behind the scrim. */
  .bb-nav.is-open,
  .bb-drawer.is-open {
    box-shadow: var(--bb-elev-3), var(--bb-glow-purple);
  }

  /* Page heads tighten rather than shrink into illegibility. */
  .bb-pagehead {
    padding-bottom: var(--bb-space-3);
  }
  .bb-pagehead::before {
    display: none;
  }
  /* A card's inner light is wasted at phone width and costs paint on a
     long board; the face stays, the ambience does not. */
  .bb-icard--primary {
    background-image: var(--bb-face-intel), var(--bb-face-raised);
  }
}

@media (max-width: 620px) {
  /* PHONE PORTRAIT. Blackbird's own readings still have to look like
     Blackbird's at 390px, so the intelligence rail and the wing survive
     -- what goes is the decorative texture and the heavier shadows. */
  .bb-welcome,
  .bb-auth-card {
    background-image: var(--bb-grad-hero), var(--bb-face-raised);
  }
  .bb-icard,
  .bb-card,
  .bb-tile {
    box-shadow: var(--bb-elev-1);
  }
  .bb-pagehead__title {
    font-weight: var(--bb-fw-bold);
    letter-spacing: -0.015em;
  }
  /* Table action buttons keep the 40px tap floor `hq.css` sets; this
     only makes the primary one legible against a dense row. */
  .bb-table .bb-btn--primary {
    box-shadow: var(--bb-glow-cta);
  }
}

/* PHONE LANDSCAPE (and any short viewport). A draft is played in
   landscape: vertical room is the scarce resource, so the ambient
   header light and the page-head bottom padding give way, and nothing
   else changes. The board's own sticky scroller already has its own
   `min-height: 620px` guard in `components.css` and is untouched. */
@media (max-height: 520px) and (orientation: landscape) {
  .bb-pagehead::before {
    display: none;
  }
  .bb-pagehead {
    margin-bottom: var(--bb-space-3);
    padding-bottom: var(--bb-space-2);
  }
  .bb-welcome {
    padding: var(--bb-space-4);
  }
}


/* =====================================================================
   17. GRAND REIMAGINATION, PHASE 1B (2026-09) -- PURPLE AS ENVIRONMENT
   =====================================================================
   THE PAINT HALF of Phase 1B (`hq.css` section 24 is the structure).
   The owner's diagnosis of the Phase 1 build: "purple like an accent,
   not like part of the environment" -- four purple moments on a whole
   Command Center (the ring, a dot, one wash, two buttons), everything
   else graphite rectangles with thin borders. This section makes purple
   the LIGHT IN THE ROOM: the shell is lit from its left edge, the hero
   is a purple-graphite band, instruments carry a purple face, the
   tactical zone is a framed purple slab, modules have seams instead of
   equal borders, the intel rail is a lit column, and the active nav row
   is a filled band. Graphite stays the ground so the purple hits.

   Same rules as every section above: tokens only (every colour is a
   `tokens.css` channel), no `display: none`, no structural property on
   a protected selector, transitions on paint only. Purple is still
   NEVER a semantic carrier -- green/amber/red keep their meanings and
   every tinted thing keeps its word.
   ================================================================== */

/* --- 17.1 THE ROOM: a stronger ambient, with a directional texture --- */
body::before {
  background-image: var(--bb-ambient-strong), var(--bb-texture-diagonal);
}

/* --- 17.2 THE TOP BAR: lit from the brand edge ---------------------- */
.bb-topbar {
  background-color: var(--bb-bg-elevated);
  background-image: var(--bb-env-topbar), var(--bb-texture-hatch), var(--bb-grad-topbar);
  box-shadow:
      0 1px 0 var(--bb-purple-border-strong),
      0 2px 0 rgb(var(--bb-purple-rgb) / 0.10),
      0 1px 0 rgb(var(--bb-paper-rgb) / 0.04) inset,
      0 12px 40px rgb(var(--bb-ink-rgb) / 0.55);
}
.bb-brand .bb-mark--lockup {
  filter: drop-shadow(0 0 12px rgb(var(--bb-purple-rgb) / 0.75));
}
.bb-wordmark {
  text-shadow: 0 0 22px rgb(var(--bb-purple-rgb) / 0.35);
}
.bb-wordmark small {
  color: var(--bb-purple-bright);
}
.bb-search__trigger {
  border-color: var(--bb-purple-border);
  background-color: rgb(var(--bb-ink-rgb) / 0.35);
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.08), transparent);
  box-shadow: var(--bb-edge-light);
}
.bb-topbar__right .bb-btn--ghost {
  border-color: var(--bb-purple-border);
  background-color: rgb(var(--bb-ink-rgb) / 0.25);
}
.bb-topbar__right .bb-btn--ghost:hover {
  border-color: var(--bb-purple-border-strong);
  background-color: var(--bb-purple-soft);
}

/* --- 17.3 THE NAV: a command rail --------------------------------------
   Lit along its left edge, ruled into sections by purple seams, flagship
   rows with a lit icon tile, and an active row that is a FILLED band. */
/* A TONAL STEP above the canvas -- the rails sit on the elevated
   charcoal, the page on the deepest graphite -- so the layering reads
   before any border does. */
.bb-nav {
  background-color: var(--bb-bg-elevated);
  background-image: var(--bb-env-shell), var(--bb-texture-diagonal);
  border-right-color: var(--bb-purple-border);
  box-shadow:
      inset -1px 0 0 rgb(var(--bb-purple-rgb) / 0.22),
      inset 3px 0 0 rgb(var(--bb-purple-rgb) / 0.35),
      12px 0 48px rgb(var(--bb-ink-rgb) / 0.40);
}
.bb-navgroup {
  border-bottom-color: rgb(var(--bb-purple-rgb) / 0.14);
}
.bb-navgroup__label {
  color: var(--bb-purple-bright);
}
.bb-navgroup__label::before {
  background: var(--bb-purple-bright);
  box-shadow: 0 0 8px rgb(var(--bb-purple-rgb) / 0.8);
  opacity: 1;
}
.bb-navgroup__label::after {
  background: var(--bb-seam-soft);
}
.bb-navitem--flagship {
  background-image: var(--bb-face-nav-flagship);
  border-left-color: rgb(var(--bb-purple-rgb) / 0.28);
}
.bb-navitem--flagship .bb-navitem__icon {
  background-color: var(--bb-purple-soft);
  border-color: var(--bb-purple-border);
  color: var(--bb-purple-bright);
  box-shadow: inset 0 1px 0 rgb(var(--bb-paper-rgb) / 0.07), 0 0 12px rgb(var(--bb-purple-rgb) / 0.14);
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast),
              box-shadow var(--bb-transition-fast), color var(--bb-transition-fast);
}
.bb-navitem--flagship::after {
  color: rgb(var(--bb-purple-bright-rgb) / 0.55);
}
.bb-navitem:hover {
  background: linear-gradient(90deg, var(--bb-purple-soft), transparent 75%), var(--bb-surface-hover);
  border-left-color: var(--bb-purple-border-strong);
}
.bb-navitem--flagship:hover .bb-navitem__icon {
  background-color: var(--bb-purple-fill);
  border-color: var(--bb-purple-border-strong);
}
.bb-navitem.is-active {
  background: var(--bb-face-nav-active), var(--bb-surface-raised);
  border-left-color: var(--bb-purple-bright);
  color: rgb(var(--bb-paper-rgb));
  box-shadow: var(--bb-glow-nav-active), inset 3px 0 0 var(--bb-purple-bright);
}
.bb-navitem.is-active .bb-navitem__label {
  color: rgb(var(--bb-paper-rgb));
  text-shadow: 0 0 16px rgb(var(--bb-purple-rgb) / 0.6);
}
.bb-navitem.is-active .bb-navitem__hint {
  color: rgb(var(--bb-paper-rgb) / 0.78);
}
.bb-navitem.is-active .bb-navitem__icon {
  background-image: var(--bb-cta);
  border-color: var(--bb-cta-border);
  color: var(--bb-cta-text);
  box-shadow: var(--bb-glow-cta);
  filter: none;
}
.bb-navitem--flagship.is-active::after {
  color: rgb(var(--bb-paper-rgb) / 0.7);
}
.bb-nav__foot {
  background-color: var(--bb-purple-wash);
  background-image: linear-gradient(90deg, var(--bb-purple-soft), transparent 80%), var(--bb-texture-hatch);
  border-color: var(--bb-purple-border);
  border-top-color: var(--bb-purple-border);
  color: var(--bb-purple-bright);
  box-shadow: var(--bb-edge-light);
}
.bb-nav__foot .bb-mark {
  color: var(--bb-purple-bright);
}

/* --- 17.4 THE CONTEXT BAR: an instrument band ------------------------- */
.bb-contextbar {
  background-color: var(--bb-bg-elevated);
  background-image: var(--bb-env-contextbar), var(--bb-texture-scan), var(--bb-face-card);
  border-bottom-color: var(--bb-purple-border);
  box-shadow:
      0 1px 0 var(--bb-purple-border-strong),
      inset 0 1px 0 rgb(var(--bb-purple-rgb) / 0.18),
      0 10px 30px rgb(var(--bb-ink-rgb) / 0.45);
}
.bb-contextbar__group .bb-ctxbtn {
  border-color: var(--bb-purple-border-strong);
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-face-instrument);
  box-shadow: var(--bb-edge-light-strong), var(--bb-glow-purple-sm);
}
.bb-contextbar__group .bb-ctxbtn:hover {
  background-image: var(--bb-face-intel), var(--bb-face-instrument);
  box-shadow: var(--bb-edge-light-strong), var(--bb-glow-purple);
}
.bb-ctxbtn .bb-fact__label,
.bb-fact--secondary .bb-fact__label {
  color: var(--bb-purple-bright);
}
.bb-ctxbtn__caret {
  color: var(--bb-purple-bright);
}
.bb-fact--secondary {
  border-left-color: var(--bb-purple-border-strong);
}
.bb-contextbar__divider {
  background: var(--bb-seam-vertical);
}
/* The resolved format context is CURRENT CONTEXT -- a FILLED control. */
.bb-ctxbtn--accent {
  border-color: var(--bb-cta-border);
  background: var(--bb-cta);
  color: var(--bb-cta-text);
  box-shadow: var(--bb-glow-cta);
}
.bb-ctxbtn--accent:hover {
  background: var(--bb-cta-hover);
  box-shadow: var(--bb-glow-cta-hover);
}
.bb-ctxsync {
  border-color: var(--bb-purple-border);
  background-image: linear-gradient(180deg, var(--bb-purple-wash), transparent);
}
.bb-ctxsync:hover {
  border-color: var(--bb-purple-border-strong);
  background-image: linear-gradient(180deg, var(--bb-purple-soft), transparent);
}

/* --- 17.5 THE INTEL DRAWER: a lit intelligence column ----------------- */
.bb-drawer {
  background-color: var(--bb-bg-elevated);
  background-image: var(--bb-env-drawer), var(--bb-texture-diagonal);
  border-left-color: var(--bb-purple-border);
  box-shadow: inset 1px 0 0 rgb(var(--bb-purple-rgb) / 0.22), -12px 0 48px rgb(var(--bb-ink-rgb) / 0.35);
}
.bb-drawer__head {
  border-bottom-color: var(--bb-purple-border);
}
.bb-drawer__title {
  color: var(--bb-purple-bright);
}
.bb-drawer__title .bb-mark {
  color: var(--bb-purple-bright);
  filter: drop-shadow(0 0 8px rgb(var(--bb-purple-rgb) / 0.7));
}
.bb-drawer__section-title {
  color: var(--bb-purple-bright);
}
.bb-drawer__section-title::after {
  background: var(--bb-seam-soft);
}
.bb-drawer .bb-railact {
  border-color: var(--bb-purple-border);
  background-color: rgb(var(--bb-ink-rgb) / 0.28);
  background-image: linear-gradient(90deg, var(--bb-purple-wash), transparent 60%);
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}
.bb-drawer .bb-railact:hover {
  background-color: var(--bb-purple-soft);
  border-color: var(--bb-purple-border-strong);
}
.bb-drawer .bb-railact::after {
  color: var(--bb-purple-bright);
}
.bb-drawer .bb-evidence__row {
  border-bottom-color: rgb(var(--bb-purple-rgb) / 0.12);
}
.bb-rail-callout {
  box-shadow: var(--bb-elev-2), 0 0 32px rgb(var(--prio-rgb) / 0.14), inset 3px 0 0 var(--prio);
}

/* --- 17.6 THE HERO: a purple-graphite band ------------------------------ */
.bb-hero {
  background-color: var(--bb-surface);
  background-image: var(--bb-env-hero), var(--bb-env-beam), var(--bb-texture-hatch), var(--bb-texture-grid), var(--bb-face-raised);
  background-size: auto, auto, auto, auto, auto, var(--bb-texture-grid-size), auto;
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-glow-env), var(--bb-elev-3);
}
.bb-hero.bb-watermark::before {
  opacity: 0.16;
}
.bb-hero__eyebrow {
  color: var(--bb-purple-bright);
  text-shadow: 0 0 12px rgb(var(--bb-purple-rgb) / 0.5);
}
.bb-hero__title {
  text-shadow: 0 0 48px rgb(var(--bb-purple-rgb) / 0.35), 0 2px 0 rgb(var(--bb-ink-rgb) / 0.5);
}
.bb-hero__tagline {
  color: rgb(var(--bb-purple-bright-rgb) / 0.92);
}
.bb-hero__status .bb-chip {
  border-color: var(--bb-purple-border);
  background: var(--bb-purple-soft);
  color: var(--bb-text-primary);
}
.bb-hero__stat {
  border-right-color: var(--bb-purple-border);
}
.bb-hero__stat-label {
  color: var(--bb-purple-bright);
}
.bb-hero__stat-value {
  text-shadow: 0 0 24px rgb(var(--bb-purple-rgb) / 0.3);
}
/* The ring is an ILLUMINATED instrument: a halo behind it, a bloom on
   the arc itself (`--bb-glow-ring`), and a lit numeral. */
.bb-hero__ring {
  background: radial-gradient(circle at 50% 44%, rgb(var(--bb-purple-rgb) / 0.30), rgb(var(--bb-purple-rgb) / 0.08) 46%, transparent 70%);
}
.bb-hero__ring:hover {
  background: radial-gradient(circle at 50% 44%, rgb(var(--bb-purple-rgb) / 0.40), rgb(var(--bb-purple-rgb) / 0.12) 46%, transparent 70%);
}
.bb-hero__ring .bb-ring {
  filter: drop-shadow(0 0 22px rgb(var(--bb-purple-rgb) / 0.35));
}
.bb-hero__ring .bb-ring__track {
  stroke: rgb(var(--bb-purple-rgb) / 0.22);
}
.bb-hero__ring .bb-ring__fill {
  filter: var(--bb-glow-ring);
}
.bb-hero__ring .bb-ring__rank {
  text-shadow: 0 0 22px rgb(var(--bb-purple-rgb) / 0.6);
}

/* --- 17.7 THE INSTRUMENT: strip + direction rail ------------------------ */
.bb-strip {
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-face-instrument), var(--bb-texture-hatch);
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm), inset 0 2px 0 rgb(var(--bb-purple-bright-rgb) / 0.55);
}
.bb-strip__cell {
  border-right-color: rgb(var(--bb-purple-rgb) / 0.20);
  background-image: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.07), transparent 46%);
}
a.bb-strip__cell:hover {
  background-image: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.18), rgb(var(--bb-purple-rgb) / 0.04));
}
.bb-strip__label::before {
  box-shadow: 0 0 8px currentColor;
}
.bb-strip__value {
  text-shadow: 0 0 26px rgb(var(--bb-purple-rgb) / 0.28);
}
.bb-dirrail {
  background-color: var(--bb-bg-elevated);
  background-image: var(--bb-face-inset), var(--bb-texture-scan);
  border-color: var(--bb-purple-border-strong);
  box-shadow: inset 0 1px 0 rgb(var(--bb-purple-rgb) / 0.25), var(--bb-elev-1);
}
.bb-dirrail__label {
  color: var(--bb-purple-bright);
}
.bb-dirrail .bb-dirband::before {
  background: linear-gradient(90deg, rgb(var(--bb-purple-bright-rgb) / 0.9), rgb(var(--bb-purple-rgb) / 0.5) 50%, rgb(var(--bb-purple-deep-rgb) / 0.6));
  opacity: 0.85;
}
.bb-dirrail .bb-dirband__dot {
  background: rgb(var(--bb-purple-rgb) / 0.45);
  border-color: var(--bb-bg-elevated);
}
.bb-dirrail .bb-dirband__label {
  color: var(--bb-text-secondary);
}

/* --- 17.8 THE TACTICAL ZONE: priorities as a framed purple slab -------- */
.bb-tactical {
  background-color: var(--bb-surface);
  background-image: var(--bb-env-tactical), var(--bb-texture-hatch);
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-2), var(--bb-glow-purple-sm), inset 0 2px 0 rgb(var(--bb-purple-bright-rgb) / 0.6);
}
.bb-cc__sectiontitle {
  color: var(--bb-text-primary);
}
.bb-cc__sectiontitle::before {
  background: var(--bb-purple-bright);
  box-shadow: 0 0 10px rgb(var(--bb-purple-rgb) / 0.8);
}
.bb-cc__headline {
  color: var(--bb-text-primary);
}
.bb-prio {
  background-color: var(--bb-surface-raised);
  background-image: linear-gradient(180deg, rgb(var(--prio-rgb) / 0.20), transparent 62%), var(--bb-face-raised);
  border-color: rgb(var(--prio-rgb) / 0.42);
  box-shadow: var(--bb-elev-2), inset 3px 0 0 var(--prio);
}
.bb-prio:hover,
.bb-prio:focus-visible {
  border-color: rgb(var(--prio-rgb) / 0.8);
  box-shadow: var(--bb-elev-3), 0 0 32px rgb(var(--prio-rgb) / 0.22), inset 3px 0 0 var(--prio);
}
.bb-prio__cat {
  background: rgb(var(--prio-rgb) / 0.16);
  border: 1px solid rgb(var(--prio-rgb) / 0.35);
}
/* The action carries its CATEGORY colour (trade purple, market blue,
   opportunity green, injury red, waiver amber) -- the mock's row scans
   by colour, which is what stops six cards reading as card soup. */
.bb-prio__cta {
  background: rgb(var(--prio-rgb) / 0.16);
  border-color: rgb(var(--prio-rgb) / 0.65);
  color: var(--prio);
  text-shadow: 0 0 12px rgb(var(--prio-rgb) / 0.35);
}
.bb-prio:hover .bb-prio__cta {
  background: rgb(var(--prio-rgb) / 0.30);
  color: var(--bb-text-primary);
}
.bb-prio__headline {
  color: var(--bb-text-primary);
}
.bb-priogrid--wide > .bb-prio:first-child:nth-last-child(n+3) {
  background-image: linear-gradient(90deg, rgb(var(--prio-rgb) / 0.32), rgb(var(--prio-rgb) / 0.10) 48%, transparent), var(--bb-texture-hatch), var(--bb-face-raised);
  box-shadow: var(--bb-elev-3), 0 0 44px rgb(var(--prio-rgb) / 0.18), inset 4px 0 0 var(--prio);
}

/* --- 17.9 SURFACE GRAMMAR: zones, lead, inset, flat -------------------- */
.bb-mod {
  background-color: var(--bb-surface-card);
  background-image: var(--bb-env-zone), var(--bb-face-card);
  border-color: rgb(var(--bb-purple-rgb) / 0.18);
  box-shadow: inset 0 1px 0 rgb(var(--bb-purple-rgb) / 0.30), var(--bb-elev-1);
}
.bb-mod--lead {
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-env-lead), var(--bb-texture-hatch), var(--bb-face-raised);
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-3), var(--bb-glow-purple);
}
.bb-mod--lead::before {
  height: 3px;
}
.bb-mod--inset {
  background-color: var(--bb-bg);
  background-image: var(--bb-face-inset), var(--bb-texture-scan);
  border-color: var(--bb-purple-border);
  box-shadow: inset 0 2px 14px rgb(var(--bb-ink-rgb) / 0.55), inset 0 0 0 1px rgb(var(--bb-purple-rgb) / 0.06);
}
.bb-mod--flat {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.06), transparent 30%);
  border-top-color: var(--bb-purple-border-strong);
  box-shadow: none;
}
.bb-mod__title {
  color: var(--bb-text-primary);
}
.bb-mod__title::before {
  background: var(--bb-purple-bright);
  box-shadow: 0 0 8px rgb(var(--bb-purple-rgb) / 0.7);
}
.bb-mod__sub {
  color: rgb(var(--bb-purple-bright-rgb) / 0.85);
}
.bb-mod .bb-evidence__row {
  border-bottom-color: rgb(var(--bb-purple-rgb) / 0.10);
}
.bb-mod .bb-evidence__row:nth-child(odd) {
  background-color: rgb(var(--bb-purple-rgb) / 0.045);
}
.bb-mod .bb-listrow {
  border-bottom-color: rgb(var(--bb-purple-rgb) / 0.10);
  transition: background-color var(--bb-transition-fast);
}
.bb-mod .bb-listrow:hover {
  background-color: var(--bb-purple-soft);
  text-decoration: none;
}
.bb-mod__count {
  background-color: var(--bb-purple-wash);
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-edge-light);
}
.bb-mod__count b {
  color: var(--bb-purple-bright);
  text-shadow: 0 0 14px rgb(var(--bb-purple-rgb) / 0.5);
}
.bb-posture {
  background: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.30), rgb(var(--bb-purple-rgb) / 0.08) 58%, transparent), var(--bb-bg-elevated);
  border-color: var(--bb-purple-border-strong);
  box-shadow: inset 4px 0 0 var(--bb-purple-bright), var(--bb-glow-purple-sm);
}
.bb-posture__word {
  text-shadow: 0 0 30px rgb(var(--bb-purple-rgb) / 0.45);
}
.bb-posture__lines li::before {
  background: var(--bb-purple-bright);
  box-shadow: 0 0 6px rgb(var(--bb-purple-rgb) / 0.8);
}
/* The narrow stack's first module (Championship Path) reads as a
   tactical callout, the second (Draft & Trade) as the inset it is. */
.bb-field > .bb-modstack > .bb-mod:first-child {
  background-image: linear-gradient(135deg, rgb(var(--bb-purple-rgb) / 0.22), rgb(var(--bb-purple-rgb) / 0.04) 55%, transparent), var(--bb-texture-hatch), var(--bb-face-card);
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-2), inset 0 2px 0 rgb(var(--bb-purple-bright-rgb) / 0.5);
}
.bb-brief__grid .bb-listrow {
  border-bottom-color: rgb(var(--bb-purple-rgb) / 0.10);
}
.bb-mod__link,
.bb-cc__sectionlink {
  color: var(--bb-purple-bright);
}
.bb-closing {
  background-color: var(--bb-surface);
  background-image: var(--bb-env-tactical), var(--bb-texture-hatch);
  border-color: var(--bb-purple-border-strong);
  color: var(--bb-text-secondary);
  box-shadow: var(--bb-elev-2), inset 0 1px 0 rgb(var(--bb-purple-bright-rgb) / 0.4);
}
.bb-closing .bb-mark {
  color: var(--bb-purple-bright);
  filter: drop-shadow(0 0 10px rgb(var(--bb-purple-rgb) / 0.8));
}
.bb-closing__word {
  color: var(--bb-purple-bright);
}

/* --- 17.10 CONTROLS, CHIPS AND TABLES ----------------------------------- */
.bb-btn:not(.bb-btn--primary):not(.bb-btn--ghost):not(.bb-btn--danger):not(.bb-btn--icon) {
  border-color: var(--bb-purple-border);
}
.bb-btn:not(.bb-btn--primary):not(.bb-btn--ghost):not(.bb-btn--danger):not(.bb-btn--icon):hover {
  border-color: var(--bb-purple-border-strong);
  background-image: linear-gradient(180deg, var(--bb-purple-soft), transparent);
}
.bb-chip {
  border-color: var(--bb-purple-border);
}
.bb-table thead th {
  border-bottom-color: var(--bb-purple-border-strong);
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.10), transparent);
}
.bb-table tbody tr:hover > td {
  background-color: var(--bb-purple-wash);
}
.bb-disclosure > summary {
  border-color: var(--bb-purple-border);
  background-image: linear-gradient(90deg, var(--bb-purple-wash), transparent 60%);
}

/* --- 17.11 THE DRAFT PICKER ROWS: tactical bands ------------------------ */
.bb-dr-pickfield .bb-dr-draftrow {
  background-color: var(--bb-surface-raised);
  background-image: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.18), rgb(var(--bb-purple-rgb) / 0.04) 50%, transparent), var(--bb-face-raised);
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-elev-2), inset 3px 0 0 var(--bb-purple);
}
.bb-dr-pickfield .bb-dr-draftrow:hover {
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-3), var(--bb-glow-purple);
}
.bb-dr-pickfield .bb-dr-draftrow--live {
  border-color: var(--bb-positive-border);
  box-shadow: var(--bb-elev-2), inset 3px 0 0 var(--bb-positive), 0 0 28px rgb(var(--bb-positive-rgb) / 0.14);
}
.bb-dr-pickfield .bb-dr-draftrow__cta {
  color: var(--bb-purple-bright);
}
.bb-dr-support__row {
  border-color: var(--bb-purple-border);
  background-color: rgb(var(--bb-ink-rgb) / 0.25);
  background-image: linear-gradient(90deg, var(--bb-purple-wash), transparent 60%);
  transition: background-color var(--bb-transition-fast), border-color var(--bb-transition-fast);
}
.bb-dr-support__row:hover {
  background-color: var(--bb-purple-soft);
  border-color: var(--bb-purple-border-strong);
}
.bb-dr-support__row::after {
  color: var(--bb-purple-bright);
}

/* --- 17.12 THE CLOSING FOOTER BAR --------------------------------------
   The second, calmer signature closing element: a slim full-width bar
   at the very end of a flagship page -- the mark, a tagline, and a row
   of diamond-bulleted micro-labels. Atmosphere once per page, never a
   card. */
.bb-foot {
  background-color: var(--bb-bg-elevated);
  background-image: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.14), transparent 40%, rgb(var(--bb-purple-deep-rgb) / 0.10)), var(--bb-texture-scan);
  border-color: var(--bb-purple-border);
  box-shadow: inset 0 1px 0 rgb(var(--bb-purple-bright-rgb) / 0.35), var(--bb-elev-1);
  color: var(--bb-text-tertiary);
}
.bb-foot__brand {
  color: var(--bb-text-primary);
}
.bb-foot__brand .bb-mark {
  color: var(--bb-purple-bright);
  filter: drop-shadow(0 0 8px rgb(var(--bb-purple-rgb) / 0.7));
}
.bb-foot__tagline {
  color: var(--bb-purple-bright);
  text-shadow: 0 0 14px rgb(var(--bb-purple-rgb) / 0.35);
}
.bb-foot__marks li::before {
  color: var(--bb-purple);
}

/* --- 17.13 SITE-WIDE INHERITANCE: PAGE HEAD, CARDS, AUTH -----------------
   The non-flagship pages compose from `.bb-pagehead` and `.bb-icard`,
   not from the hero and the module. These two primitives take the same
   environment so nothing on the site reads as "old Blackbird" beside
   the recomposed pages: the page head is a lit purple-graphite band
   with the beam; a card is a ZONE (seam on top, purple-tinted frame,
   environmental wash) unless it is quiet, raised or Blackbird's own
   intelligence surface, which keep their own faces. */
.bb-pagehead {
  background-color: var(--bb-surface);
  background-image: var(--bb-env-hero), var(--bb-env-beam), var(--bb-texture-hatch), var(--bb-texture-grid), var(--bb-face-raised);
  background-size: auto, auto, auto, auto, auto, var(--bb-texture-grid-size), auto;
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-glow-env), var(--bb-elev-2);
}
.bb-pagehead::before {
  background: radial-gradient(60% 100% at 20% 60%, rgb(var(--bb-purple-rgb) / 0.18), transparent 72%);
}
.bb-pagehead__eyebrow {
  color: var(--bb-purple-bright);
  text-shadow: 0 0 12px rgb(var(--bb-purple-rgb) / 0.5);
}
.bb-pagehead__title {
  text-shadow: 0 0 40px rgb(var(--bb-purple-rgb) / 0.30), 0 2px 0 rgb(var(--bb-ink-rgb) / 0.5);
}
.bb-pagehead__context {
  color: var(--bb-text-secondary);
}
.bb-icard:not(.bb-icard--quiet, .bb-icard--primary, .bb-icard--raised),
.bb-card:not(.is-selected, .bb-menu-list) {
  background-image: var(--bb-env-zone), var(--bb-face-card);
  border-color: rgb(var(--bb-purple-rgb) / 0.18);
  box-shadow: inset 0 1px 0 rgb(var(--bb-purple-rgb) / 0.30), var(--bb-elev-2);
}
/* The semantic containers keep their own hue -- restated here at the
   same specificity as the zone rule above so they never borrow purple. */
.bb-icard.bb-icard--caution {
  border-color: var(--bb-caution-border);
  box-shadow: var(--bb-elev-2), 0 0 22px rgb(var(--bb-caution-rgb) / 0.10);
}
.bb-icard.bb-icard--danger {
  border-color: var(--bb-negative-border);
  box-shadow: var(--bb-elev-2), 0 0 22px rgb(var(--bb-negative-rgb) / 0.10);
}
.bb-icard--raised {
  border-color: var(--bb-purple-border);
  box-shadow: var(--bb-elev-2), inset 0 1px 0 rgb(var(--bb-purple-rgb) / 0.35);
}
.bb-sectionhead__title::before {
  background: var(--bb-purple-bright);
  box-shadow: 0 0 8px rgb(var(--bb-purple-rgb) / 0.7);
}
.bb-filterbar__label,
.bb-label {
  color: rgb(var(--bb-purple-bright-rgb) / 0.85);
}
.bb-auth-shell {
  background-image: var(--bb-ambient-strong), var(--bb-texture-diagonal);
}
.bb-auth-card {
  background-image: var(--bb-env-hero), var(--bb-env-beam), var(--bb-texture-grid), var(--bb-face-raised);
  background-size: auto, auto, auto, auto, var(--bb-texture-grid-size), auto;
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-glow-env), var(--bb-elev-3);
}

/* --- 17.14 THE PHONE SHELL: the same environment, condensed ------------- */
.bb-bottomnav {
  background-color: var(--bb-bg-elevated);
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.16), rgb(var(--bb-purple-deep-rgb) / 0.06));
  border-top-color: var(--bb-purple-border-strong);
  box-shadow: 0 -1px 0 rgb(var(--bb-purple-rgb) / 0.25), 0 -12px 40px rgb(var(--bb-ink-rgb) / 0.5);
}
.bb-bottomnav__item.is-active {
  color: var(--bb-purple-bright);
  text-shadow: 0 0 14px rgb(var(--bb-purple-rgb) / 0.7);
}


/* =====================================================================
   18. GRAND REIMAGINATION, PHASE 2A (2026-09) -- LEAGUE INTELLIGENCE
   =====================================================================
   THE PAINT HALF of the League Intelligence recomposition (`hq.css`
   section 25 is the structure). The board's own row for the caller is
   the one loud purple moment on the surface; every other tint is a
   semantic tone the product already uses (green contending, blue
   playoff, amber retooling, red rebuilding) or graphite. Tokens only.
   ================================================================== */

/* --- 18.1 THE DIRECTION TONES: one custom property, read everywhere --- */
[data-dir="TITLE_FAVORITE"],
[data-dir="STRONG_CONTENDER"]   { --bb-li-dir: var(--bb-positive);     --bb-li-dir-rgb: var(--bb-positive-rgb); }
[data-dir="PLAYOFF_CONTENDER"]  { --bb-li-dir: var(--bb-accent-data);  --bb-li-dir-rgb: var(--bb-data-rgb); }
[data-dir="FRINGE_CONTENDER"]   { --bb-li-dir: var(--bb-purple-bright); --bb-li-dir-rgb: var(--bb-purple-rgb); }
[data-dir="MIDDLE_UNDECIDED"]   { --bb-li-dir: var(--bb-text-secondary); --bb-li-dir-rgb: var(--bb-paper-rgb); }
[data-dir="RETOOLING"]          { --bb-li-dir: var(--bb-caution);      --bb-li-dir-rgb: var(--bb-caution-rgb); }
[data-dir="EARLY_REBUILD"],
[data-dir="DEEP_REBUILD"]       { --bb-li-dir: var(--bb-negative);     --bb-li-dir-rgb: var(--bb-negative-rgb); }
[data-dir="INSUFFICIENT_EVIDENCE"] { --bb-li-dir: var(--bb-text-tertiary); --bb-li-dir-rgb: var(--bb-paper-rgb); }

/* --- 18.2 THE HERO CREST ----------------------------------------------- */
.bb-li-crest {
  border-right-color: var(--bb-purple-border);
}
.bb-li-crest__mark {
  color: var(--bb-purple-bright);
  filter: drop-shadow(0 0 14px rgb(var(--bb-purple-rgb) / 0.7));
}
.bb-li-crest__name {
  text-shadow: 0 0 24px rgb(var(--bb-purple-rgb) / 0.3);
}
.bb-li-crest__chip {
  border-color: var(--bb-purple-border);
  background: var(--bb-purple-wash);
  color: var(--bb-purple-bright);
}

/* --- 18.3 THE LEAGUE SHAPE RAIL ---------------------------------------- */
.bb-li-shape__fill {
  background: var(--bb-li-dir, var(--bb-purple));
  opacity: 0.55;
  box-shadow: 0 0 10px rgb(var(--bb-li-dir-rgb, var(--bb-purple-rgb)) / 0.25);
}
.bb-li-shape__stop.has-teams .bb-li-shape__fill {
  opacity: 0.85;
}
.bb-li-shape__stop.is-you {
  border-color: var(--bb-purple-border-strong);
  background: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.22), rgb(var(--bb-purple-rgb) / 0.06));
  box-shadow: var(--bb-glow-purple-sm);
}
.bb-li-shape__stop.is-you .bb-li-shape__name {
  color: var(--bb-text-primary);
}
.bb-li-shape__you {
  background: var(--bb-cta);
  color: var(--bb-cta-text);
  border: 1px solid var(--bb-cta-border);
  box-shadow: var(--bb-glow-cta);
}
.bb-li-shape__meta strong {
  color: var(--bb-purple-bright);
}

/* --- 18.4 THE EARLY-SEASON NOTE ---------------------------------------- */
.bb-li-note {
  background-color: var(--bb-bg-elevated);
  background-image: linear-gradient(90deg, rgb(var(--bb-data-rgb) / 0.10), transparent 50%);
  border-color: rgb(var(--bb-data-rgb) / 0.30);
}
.bb-li-note__mark {
  background: var(--bb-accent-data);
  box-shadow: 0 0 8px rgb(var(--bb-data-rgb) / 0.7);
}

/* --- 18.5 THE BOARD: graphite rows, one purple row ---------------------- */
.bb-li-board {
  background-color: var(--bb-bg-elevated);
  border-color: rgb(var(--bb-purple-rgb) / 0.16);
  box-shadow: inset 0 1px 0 rgb(var(--bb-purple-rgb) / 0.18), inset 0 2px 14px rgb(var(--bb-ink-rgb) / 0.35);
}
.bb-li-board__head {
  background-color: rgb(var(--bb-ink-rgb) / 0.28);
  background-image: linear-gradient(180deg, rgb(var(--bb-purple-rgb) / 0.10), transparent);
  border-bottom: 1px solid var(--bb-purple-border);
}
.bb-li-board .bb-landscape__row,
.bb-li-board .bb-li-board__row {
  border-top-color: rgb(var(--bb-purple-rgb) / 0.09);
  background: transparent;
  transition: background-color var(--bb-transition-fast);
}
.bb-li-board .bb-landscape__row:hover,
.bb-li-board .bb-li-board__row:hover {
  background: var(--bb-purple-wash);
}
/* THIS IS YOU. The one lit row on the board: a purple slab with a
   bright left rail, the name in paper white, the YOU tag filled. Never
   moved: the order stays the standings order. */
.bb-li-board .bb-landscape__row.is-you,
.bb-li-board .bb-li-board__row.is-you,
.bb-li-board .bb-landscape__row.is-you:hover,
.bb-li-board .bb-li-board__row.is-you:hover {
  background-color: var(--bb-surface-raised);
  background-image: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.40) 0%, rgb(var(--bb-purple-rgb) / 0.16) 48%, rgb(var(--bb-purple-rgb) / 0.06) 100%), var(--bb-texture-hatch);
  border-top-color: rgb(var(--bb-purple-bright-rgb) / 0.45);
  box-shadow: inset 4px 0 0 var(--bb-purple-bright), inset 0 0 0 1px rgb(var(--bb-purple-bright-rgb) / 0.30), 0 0 28px rgb(var(--bb-purple-rgb) / 0.22);
}
.bb-li-board .is-you + .bb-li-board__row {
  border-top-color: rgb(var(--bb-purple-bright-rgb) / 0.45);
}
.bb-li-board .is-you .bb-li-board__name {
  color: rgb(var(--bb-paper-rgb));
  text-shadow: 0 0 14px rgb(var(--bb-purple-rgb) / 0.6);
}
.bb-li-board .is-you .bb-li-board__c-rank {
  color: var(--bb-purple-bright);
}
.bb-li-board__you {
  background: var(--bb-cta);
  color: var(--bb-cta-text);
  border: 1px solid var(--bb-cta-border);
  box-shadow: var(--bb-glow-cta);
}
.bb-li-board__detail:hover {
  color: var(--bb-purple-bright);
  text-decoration: underline;
}
.bb-badge.bb-li-dir[data-dir] {
  border-color: rgb(var(--bb-li-dir-rgb) / 0.45);
  background: rgb(var(--bb-li-dir-rgb) / 0.10);
  color: var(--bb-li-dir);
}
.bb-badge.bb-li-dir[data-dir="MIDDLE_UNDECIDED"],
.bb-badge.bb-li-dir[data-dir="INSUFFICIENT_EVIDENCE"] {
  background: rgb(var(--bb-paper-rgb) / 0.04);
  border-color: rgb(var(--bb-paper-rgb) / 0.14);
}

/* --- 18.6 THE POWER BOARD ---------------------------------------------- */
.bb-li-power__row {
  border-top-color: rgb(var(--bb-purple-rgb) / 0.09);
  transition: background-color var(--bb-transition-fast);
}
.bb-li-power__row:hover {
  background: var(--bb-purple-soft);
}
.bb-li-power__dot {
  background: var(--bb-li-dir, var(--bb-border-strong));
  box-shadow: 0 0 8px rgb(var(--bb-li-dir-rgb, var(--bb-purple-rgb)) / 0.45);
}
.bb-li-power__row.is-you {
  background: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.30), rgb(var(--bb-purple-rgb) / 0.08) 70%);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
.bb-li-power__row.is-you .bb-li-power__name {
  color: rgb(var(--bb-paper-rgb));
}
.bb-li-power__row:first-child .bb-li-power__rank {
  color: var(--bb-purple-bright);
  text-shadow: 0 0 12px rgb(var(--bb-purple-rgb) / 0.6);
}

/* --- 18.7 THE SUPPORTING INSTRUMENTS ------------------------------------ */
.bb-li-pos__row,
.bb-li-matchup,
.bb-li-partner {
  border-top-color: rgb(var(--bb-purple-rgb) / 0.09);
}
.bb-li-pos__meter {
  background: rgb(var(--bb-paper-rgb) / 0.06);
  box-shadow: inset 0 1px 2px rgb(var(--bb-ink-rgb) / 0.5);
}
.bb-li-pos__seg--short {
  background: var(--bb-negative);
  box-shadow: 0 0 8px rgb(var(--bb-negative-rgb) / 0.45);
}
.bb-li-pos__seg--deep {
  background: var(--bb-positive);
  margin-left: auto;
}
.bb-li-matchup.is-you {
  background: linear-gradient(90deg, rgb(var(--bb-purple-rgb) / 0.22), rgb(var(--bb-purple-rgb) / 0.05) 70%);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
.bb-li-matchup.is-you .bb-li-matchup__team,
.bb-li-matchup.is-you .bb-li-matchup__opp {
  color: var(--bb-text-primary);
}
.bb-li-partner__name:hover {
  color: var(--bb-purple-bright);
}


/* =====================================================================
   19. GRAND REIMAGINATION, PHASE 2A (2026-09) -- THE PHONE SHELL, TUNED
   =====================================================================
   PAINT for `hq.css` section 26. The phone sheet keeps every high-value
   purple moment (the active row's rail, lit icon and label, the group
   seams, the brand) and calms the passive ones: the active row's fill
   steps back about fifteen percent, the sheet's ambient wash about ten,
   and every secondary destination reads as clearly available. The
   scrollbar becomes a thin, low-contrast purple thumb.
   ================================================================== */
@media (max-width: 900px) {
  .bb-nav {
    background-image: linear-gradient(180deg,
        rgb(var(--bb-purple-rgb) / 0.15) 0%,
        rgb(var(--bb-purple-rgb) / 0.06) 24%,
        rgb(var(--bb-purple-deep-rgb) / 0.03) 60%,
        rgb(var(--bb-purple-deep-rgb) / 0.08) 100%),
        var(--bb-texture-diagonal);
    box-shadow:
        inset -1px 0 0 rgb(var(--bb-purple-rgb) / 0.26),
        inset 3px 0 0 rgb(var(--bb-purple-rgb) / 0.30),
        14px 0 44px rgb(var(--bb-ink-rgb) / 0.62);
    scrollbar-color: rgb(var(--bb-purple-rgb) / 0.32) transparent;
  }
  .bb-nav::-webkit-scrollbar-thumb {
    background: rgb(var(--bb-purple-rgb) / 0.32);
  }
  .bb-navgroup {
    border-bottom-color: rgb(var(--bb-purple-rgb) / 0.11);
  }
  .bb-navgroup__label::before {
    box-shadow: 0 0 6px rgb(var(--bb-purple-rgb) / 0.6);
  }
  /* The active row: unmistakable, not luminous. */
  .bb-navitem.is-active {
    background: linear-gradient(90deg,
        rgb(var(--bb-purple-rgb) / 0.46) 0%,
        rgb(var(--bb-purple-rgb) / 0.24) 45%,
        rgb(var(--bb-purple-rgb) / 0.09) 100%),
        var(--bb-surface-raised);
    box-shadow: 0 0 18px rgb(var(--bb-purple-rgb) / 0.26), inset 0 0 0 1px rgb(var(--bb-purple-bright-rgb) / 0.28), inset 3px 0 0 var(--bb-purple-bright);
  }
  .bb-navitem.is-active .bb-navitem__label {
    text-shadow: 0 0 12px rgb(var(--bb-purple-rgb) / 0.5);
  }
  /* Secondary destinations: clearly available, never disabled-looking. */
  .bb-navitem:not(.bb-navitem--flagship) {
    color: var(--bb-text-secondary);
  }
  .bb-navitem:not(.bb-navitem--flagship) .bb-navitem__icon {
    opacity: 0.9;
    color: var(--bb-text-secondary);
  }
  .bb-navitem:not(.bb-navitem--flagship):hover,
  .bb-navitem:not(.bb-navitem--flagship).is-active {
    color: var(--bb-text-primary);
  }
  .bb-navitem--flagship .bb-navitem__icon {
    box-shadow: inset 0 1px 0 rgb(var(--bb-paper-rgb) / 0.06), 0 0 10px rgb(var(--bb-purple-rgb) / 0.12);
  }
  .bb-navctx {
    border-bottom-color: rgb(var(--bb-purple-rgb) / 0.16);
  }
  .bb-navpicker {
    border-bottom-color: rgb(var(--bb-purple-rgb) / 0.16);
  }
  .bb-nav__foot {
    background-color: rgb(var(--bb-purple-rgb) / 0.04);
  }
  /* The top shell: quieter control frames, the same lit brand. */
  .bb-topbar__right .bb-btn--ghost,
  .bb-nav-toggle,
  .bb-search__trigger {
    border-color: rgb(var(--bb-purple-rgb) / 0.22);
    box-shadow: none;
  }
  .bb-scrim {
    background: rgb(var(--bb-ink-rgb) / 0.62);
  }
}


/* =====================================================================
   19. FABLE PACK 01 (2026-09) -- GRAPHITE FIRST
   =====================================================================
   THE PAINT HALF of the shared visual system (`hq.css` section 36 is
   the structure; `tokens.css`'s FABLE block is the vocabulary).

   Section 17 above made purple the light in the room. This section
   turns the room back to graphite and hands purple three jobs only:
   identity (the mark, the wing), selection (active nav, tab, row,
   filter, focus) and the signature moment (a Blackbird recommendation
   surface, a NEW-intelligence mark). Every chrome surface -- top bar,
   rail, context strip, drawer, bottom navigation -- is now a solid
   step of the graphite ramp with a hairline border. Semantic hue is
   reserved for meaning: green favourable, amber attention, red
   critical, cyan live. Same rules as every section above: tokens only,
   no `display: none`, nothing structural on a protected selector,
   transitions on paint only.
   ================================================================== */

/* --- 19.1 THE ROOM ----------------------------------------------------- */
body::before {
  background-image: var(--bb-ambient);
}

/* --- 19.2 THE TOP BAR ------------------------------------------------- */
.bb-topbar {
  background-color: var(--bb-bg-elevated);
  background-image: none;
  border-bottom: 1px solid var(--bb-border);
  box-shadow: none;
}
.bb-brand .bb-mark--lockup {
  filter: none;
}
.bb-wordmark {
  text-shadow: none;
  color: var(--bb-text-primary);
}
.bb-wordmark small {
  color: var(--bb-text-tertiary);
}
.bb-search__trigger {
  border-color: var(--bb-border);
  background-color: var(--bb-bg);
  background-image: none;
  box-shadow: none;
}
.bb-search__trigger:hover {
  border-color: var(--bb-border-strong);
  box-shadow: none;
}
.bb-search__panel {
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-3);
}
.bb-topbar__right .bb-btn--ghost {
  border-color: var(--bb-border);
  background-color: transparent;
  color: var(--bb-text-secondary);
}
.bb-topbar__right .bb-btn--ghost:hover {
  border-color: var(--bb-border-strong);
  background-color: var(--bb-surface-hover);
  color: var(--bb-text-primary);
}
.bb-usermenu__avatar {
  background: var(--bb-purple-soft);
  color: var(--bb-purple-bright);
  border: 1px solid var(--bb-purple-border);
}
.bb-unread-badge {
  box-shadow: none;
}
.bb-menu-list.bb-card {
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-3);
}
.bb-result:hover,
.bb-result:focus-visible {
  background: var(--bb-surface-hover);
  box-shadow: inset 2px 0 0 var(--bb-purple-bright);
}

/* --- 19.3 THE RAIL ------------------------------------------------------ */
.bb-nav {
  background-color: var(--bb-bg-elevated);
  background-image: none;
  border-right-color: var(--bb-border);
  box-shadow: none;
}
.bb-navgroup {
  border-bottom-color: var(--bb-border-subtle);
}
.bb-navgroup__label {
  color: var(--bb-text-tertiary);
}
.bb-navgroup__label::before {
  background: var(--bb-border-strong);
  box-shadow: none;
}
.bb-navitem {
  color: var(--bb-text-secondary);
  border-left-color: transparent;
}
.bb-navitem--flagship {
  background-image: none;
  border-left-color: transparent;
}
.bb-navitem--flagship .bb-navitem__icon,
.bb-navitem .bb-navitem__icon {
  background: none;
  border-color: transparent;
  color: var(--bb-text-tertiary);
  box-shadow: none;
  filter: none;
}
.bb-navitem--flagship .bb-navitem__label {
  color: var(--bb-text-primary);
}
.bb-navitem:hover {
  background: var(--bb-surface-hover);
  border-left-color: var(--bb-border-strong);
  color: var(--bb-text-primary);
}
.bb-navitem:hover .bb-navitem__icon,
.bb-navitem--flagship:hover .bb-navitem__icon {
  background: none;
  border-color: transparent;
  color: var(--bb-text-primary);
}
/* SELECTED: purple role 4. Four signals: the 3px bar, the soft fill,
   the bold white label, `aria-current` -- hue is one of four. */
.bb-navitem.is-active {
  background: var(--bb-purple-soft);
  border-left-color: var(--bb-purple-bright);
  color: var(--bb-text-primary);
  box-shadow: inset 3px 0 0 var(--bb-purple-bright);
}
.bb-navitem.is-active .bb-navitem__label {
  color: var(--bb-text-primary);
  text-shadow: none;
}
.bb-navitem.is-active .bb-navitem__hint {
  color: var(--bb-text-secondary);
}
.bb-navitem.is-active .bb-navitem__icon,
.bb-navitem--flagship.is-active .bb-navitem__icon {
  background: none;
  border-color: transparent;
  color: var(--bb-purple-bright);
  box-shadow: none;
  filter: none;
}
.bb-nav__foot {
  background: none;
  border-color: var(--bb-border-subtle);
  color: var(--bb-text-tertiary);
  box-shadow: none;
}
.bb-nav__foot .bb-mark {
  color: var(--bb-text-tertiary);
  filter: none;
}
.bb-navctx {
  background: var(--bb-surface);
  border-color: var(--bb-border);
}

/* --- 19.4 THE CONTEXT STRIP ------------------------------------------- */
.bb-contextbar {
  background-color: var(--bb-bg-elevated);
  background-image: none;
  border-bottom-color: var(--bb-border);
  box-shadow: none;
}
.bb-contextbar__group .bb-ctxbtn {
  border-color: var(--bb-border-strong);
  background-color: var(--bb-surface-raised);
  background-image: none;
  box-shadow: none;
}
.bb-contextbar__group .bb-ctxbtn:hover {
  border-color: var(--bb-purple-border-strong);
  background-image: none;
  background-color: var(--bb-surface-hover);
  box-shadow: none;
}
.bb-ctxbtn .bb-fact__label,
.bb-fact--secondary .bb-fact__label {
  color: var(--bb-text-tertiary);
}
.bb-ctxbtn__caret {
  color: var(--bb-text-tertiary);
}
.bb-fact--secondary {
  border-left-color: var(--bb-border);
}
.bb-contextbar__divider {
  background: var(--bb-border);
}
/* CURRENT CONTEXT (the resolved format) is purple role 2 -- but as an
   OUTLINED stamp, not a filled CTA, so it never competes with the one
   primary action a page may carry. */
.bb-ctxbtn--accent {
  border-color: var(--bb-purple-border-strong);
  background: var(--bb-purple-wash);
  color: var(--bb-purple-bright);
  box-shadow: none;
}
.bb-ctxbtn--accent:hover {
  background: var(--bb-purple-soft);
  box-shadow: none;
}
.bb-ctxsync {
  border-color: var(--bb-border-strong);
  background-image: none;
}
.bb-ctxsync:hover {
  border-color: var(--bb-purple-border-strong);
  background-image: none;
  background-color: var(--bb-surface-hover);
}

/* --- 19.5 THE INTEL DRAWER ---------------------------------------------- */
.bb-drawer {
  background-color: var(--bb-bg-elevated);
  background-image: none;
  border-left-color: var(--bb-border);
  box-shadow: none;
}
.bb-drawer__head {
  border-bottom-color: var(--bb-border-subtle);
}
.bb-drawer__title {
  color: var(--bb-text-tertiary);
}
.bb-drawer__title .bb-mark {
  color: var(--bb-text-tertiary);
  filter: none;
}
.bb-drawer__section-title {
  color: var(--bb-text-secondary);
}
.bb-drawer__section-title::after {
  background: var(--bb-border-subtle);
}
.bb-drawer .bb-railact {
  border-color: var(--bb-border);
  background-color: var(--bb-surface);
  background-image: none;
}
.bb-drawer .bb-railact:hover {
  background-color: var(--bb-surface-hover);
  border-color: var(--bb-border-strong);
}
.bb-drawer .bb-railact::after {
  color: var(--bb-text-tertiary);
}
.bb-drawer .bb-evidence__row {
  border-bottom-color: var(--bb-border-subtle);
}
.bb-closing,
.bb-closing--rail {
  background: none;
  border-color: var(--bb-border-subtle);
  color: var(--bb-text-tertiary);
  box-shadow: none;
}
.bb-closing .bb-mark {
  color: var(--bb-text-tertiary);
  filter: none;
}
.bb-closing__word {
  color: var(--bb-text-tertiary);
  text-shadow: none;
}

/* --- 19.6 PAGE HEADER, SECTION HEADER, HERO ----------------------------- */
.bb-pagehead {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.bb-pagehead::before {
  background: none;
}
/* The wing: the one brand gesture, kept, at page scale. */
.bb-pagehead::after {
  background: var(--bb-wing);
  opacity: 0.85;
}
.bb-pagehead__eyebrow {
  color: var(--bb-text-tertiary);
  text-shadow: none;
}
.bb-pagehead__eyebrow::before {
  background: var(--bb-purple);
  box-shadow: none;
}
.bb-pagehead__title {
  text-shadow: none;
}
.bb-sectionhead__title::before {
  background: var(--bb-purple);
  box-shadow: none;
}
.bb-filterbar__label,
.bb-label {
  color: var(--bb-text-tertiary);
}
.bb-hero {
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-face-intel);
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-2);
}
.bb-hero.bb-watermark::before {
  opacity: 0.05;
}
.bb-hero__eyebrow {
  color: var(--bb-text-tertiary);
  text-shadow: none;
}
.bb-hero__eyebrow::before {
  background: var(--bb-purple);
  box-shadow: none;
}
.bb-hero__title {
  text-shadow: none;
}
.bb-hero__tagline {
  color: var(--bb-text-secondary);
}
.bb-hero__status .bb-chip {
  border-color: var(--bb-border-strong);
  background: var(--bb-surface);
  color: var(--bb-text-secondary);
}

/* --- 19.7 SURFACES: neutral faces, one intelligence face ---------------- */
.bb-icard:not(.bb-icard--quiet, .bb-icard--primary, .bb-icard--raised),
.bb-card:not(.is-selected, .bb-menu-list) {
  background-image: var(--bb-face-card);
  border-color: var(--bb-border);
  box-shadow: var(--bb-elev-1);
}
.bb-icard--raised {
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-2);
}
.bb-icard--quiet {
  background-image: none;
  box-shadow: none;
}
/* A. PRIMARY INTELLIGENCE -- purple role 3, as a 3px rail and a faint
   face. No glow, no grid, no hatch. */
.bb-icard--primary {
  border-color: var(--bb-border-strong);
  background-color: var(--bb-surface-raised);
  background-image: var(--bb-face-intel);
  background-size: auto;
  box-shadow: inset 3px 0 0 var(--bb-purple), var(--bb-elev-2);
}
.bb-icard--primary::after {
  opacity: 0.7;
}
.bb-icard--decision {
  box-shadow: inset 3px 0 0 var(--bb-purple), var(--bb-elev-2);
}
.bb-canon {
  box-shadow: var(--bb-elev-2);
}
.bb-priocard {
  box-shadow: var(--bb-elev-1);
}
.bb-priocard:hover,
.bb-priocard:focus-visible {
  border-color: var(--bb-purple-border-strong);
  box-shadow: var(--bb-elev-2);
}
.bb-strip {
  background-image: none;
  box-shadow: var(--bb-elev-1);
}
a.bb-strip__cell:hover {
  background: var(--bb-surface-hover);
}
/* C. RECOMMENDATION -- the same 3px purple rail as A: this is also
   Blackbird's own opinion. The VERDICT word carries the semantic hue. */
.bb-reco {
  background-image: var(--bb-face-raised);
  box-shadow: inset 3px 0 0 var(--bb-purple), var(--bb-elev-2);
}
/* D. LIVE -- cyan owns the live seam; purple never means live. */
.bb-live-surface {
  background-image: var(--bb-face-raised);
}
.bb-live-surface[data-state="live"],
.bb-live-surface[data-state="halftime"] {
  background-image: var(--bb-env-tactical), var(--bb-face-raised);
}
/* Board control strips (Rankings / Available Players / Cheat Sheet):
   a neutral instrument panel; the wing belongs to the page head. */
.bb-boardbar {
  border-color: var(--bb-border-strong);
  background-image: var(--bb-face-card);
  box-shadow: var(--bb-elev-1);
}
.bb-boardbar::before {
  opacity: 0;
}
.bb-tierband__label {
  color: var(--bb-text-secondary);
}
a.bb-listrow:hover {
  background: var(--bb-surface-hover);
}
/* H. UTILITY -- no face, no elevation: visibly lower priority. */
.bb-utility {
  background-image: none;
  box-shadow: none;
}
/* States: quiet. The gated state keeps its purple mark (a product
   decision, not a failure) but loses the glow. */
.bb-state,
.bb-empty-state {
  background-image: none;
  box-shadow: none;
}
.bb-state__mark {
  background-image: none;
  box-shadow: none;
}
.bb-state--gated {
  border-color: var(--bb-purple-border);
  background-image: none;
  box-shadow: none;
}
.bb-state--gated .bb-state__mark {
  box-shadow: none;
}
.bb-disclosure {
  background-image: none;
}
.bb-about > summary {
  color: var(--bb-text-secondary);
}
.bb-banner {
  background-image: none;
  box-shadow: none;
}
.bb-skeleton {
  background-image: linear-gradient(90deg,
      var(--bb-surface) 25%,
      var(--bb-surface-raised) 37%,
      var(--bb-surface) 63%);
}

/* --- 19.8 CONTROLS: the one filled purple is the primary action --------- */
.bb-btn {
  box-shadow: none;
}
.bb-btn--primary {
  box-shadow: var(--bb-glow-cta);
}
.bb-btn--primary:hover {
  box-shadow: var(--bb-glow-cta-hover);
}
.bb-tab:hover {
  background: var(--bb-surface-hover);
}
.bb-tab.is-active {
  color: var(--bb-text-primary);
  border-bottom-color: var(--bb-purple-bright);
  background: none;
  box-shadow: none;
}
.bb-skip-link {
  box-shadow: var(--bb-elev-2);
}

/* --- 19.9 LIVE WIRE RAIL: live is cyan, change is Blackbird's purple --- */
.bb-lw {
  background: var(--bb-bg);
  border-color: var(--bb-border);
}
.bb-lw[data-state="live"],
.bb-lw[data-state="change"] {
  border-color: var(--bb-live-border);
}
.bb-lw[data-state="live"] .bb-lw__dot,
.bb-lw[data-state="change"] .bb-lw__dot {
  background: var(--bb-live);
  box-shadow: var(--bb-glow-live);
}
.bb-lw[data-state="live"] .bb-lw__brand,
.bb-lw[data-state="change"] .bb-lw__brand {
  color: var(--bb-live);
}
.bb-lw[data-state="change"] {
  background: linear-gradient(90deg, var(--bb-purple-soft), rgb(var(--bb-live-rgb) / 0.06));
}
@media (max-width: 900px) {
  .bb-lw {
    background: var(--bb-bg-elevated);
  }
  .bb-lw[data-state="live"],
  .bb-lw[data-state="change"] {
    box-shadow: inset 0 1px 0 var(--bb-live-border);
  }
  .bb-lw[data-state="change"] {
    background: linear-gradient(90deg, var(--bb-purple-soft), rgb(var(--bb-live-rgb) / 0.06));
  }
}
/* DATA FRESHNESS: "live" reads cyan everywhere, matching the rail. */
.bb-fresh--live {
  border-color: var(--bb-live-border);
  background: var(--bb-live-bg);
  color: var(--bb-live);
}

/* --- 19.10 THE PHONE SHELL ----------------------------------------------- */
.bb-bottomnav {
  background-color: var(--bb-bg-elevated);
  background-image: none;
  border-top-color: var(--bb-border);
  box-shadow: none;
}
.bb-bottomnav__item.is-active {
  color: var(--bb-purple-bright);
  text-shadow: none;
}
.bb-bottomnav__item.is-active .bb-bottomnav__icon {
  filter: none;
}
.bb-auth-shell {
  background-image: var(--bb-ambient);
}
.bb-auth-card {
  background-image: var(--bb-face-raised);
  background-size: auto;
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-3);
}


/* =====================================================================
   15. MOTION (Part S)
   =====================================================================
   Every transition in this file is on a PAINT property (background,
   colour, border-colour, box-shadow, opacity, filter) plus one 1px
   `transform` on a button press. Nothing loops, nothing bounces,
   nothing delays a click, and nothing animates layout.

   `hq.css` already zeroes every duration under `prefers-reduced-motion`;
   this block additionally removes the two TRANSFORMS in this pack, which
   a duration of 0.01ms would otherwise still apply instantly. */
@media (prefers-reduced-motion: reduce) {
  .bb-btn:active,
  .bb-btn--primary:active {
    transform: none;
  }
}


/* =====================================================================
   16. PRINT
   =====================================================================
   The ambient layer, the glow and every lit face must never reach paper.
   `hq.css`'s own print block already strips the shell; this strips the
   identity layer it does not know about. */
@media print {
  body::before {
    display: none !important;
  }
  .bb-card,
  .bb-icard,
  .bb-icard--primary,
  .bb-state,
  .bb-tile,
  .bb-btn,
  .bb-auth-card,
  .bb-welcome,
  .bb-boardbar,
  .bb-tradebar {
    background-image: none !important;
    box-shadow: none !important;
  }
  .bb-pagehead::before,
  .bb-pagehead::after,
  .bb-icard--primary::before,
  .bb-icard--primary::after {
    display: none !important;
  }
}

/* =====================================================================
   20. SEMANTIC HIERARCHY V2 CORRECTIONS (2026-09)
   =====================================================================
   `hq.css` section 39 kills `.bb-prio`/`.bb-rail-callout`'s whole-card
   category tint and demotes the hero tagline/headline to metadata (see
   `docs/FABLE_SEMANTIC_HIERARCHY_V2.md`). This file's OWN section 17.8
   ("the tactical zone: priorities as a framed purple slab", the Phase
   1B cinematic paint) and section 19 both also paint `.bb-prio`/
   `.bb-hero__tagline`/`.bb-cc__headline` at the SAME specificity as
   hq.css's rules -- and because `identity.css` is always the LAST of
   the five shared sheets (the whole Fable layer's own mechanism, see
   this file's own header and `docs/FABLE_VISUAL_SYSTEM.md`), those
   earlier declarations in THIS file kept winning over hq.css's
   reversal, even though hq.css loaded a correction later in ITS OWN
   file. Restated here, additively, LAST in this file -- §17.8/§19
   above are untouched, nothing is renamed -- so hq.css §39's intent
   actually reaches the rendered page.

   CORRECTION PASS (screenshot review): the OUTER BORDER was still
   missed -- `.bb-prio { border-color: rgb(var(--prio-rgb) / 0.42); }`
   (§17.8, ~line 1993) and its `:hover`/`:focus-visible` variant
   (~line 1998, which also ADDS a category-tinted glow to the box-
   shadow) are the same specificity as hq.css §39's `border-color` rule
   and load after it, so they kept winning too -- the category colour
   must survive ONLY as the 3px inset rail, `.bb-prio__cat`'s text/dot
   and the CTA text link, never the card's own border or a glow. */
.bb-prio,
.bb-prio--muted,
.bb-prio--negative,
.bb-prio--positive,
.bb-prio--caution,
.bb-prio--info {
  background-image: none;
  border-color: var(--bb-border);
}
.bb-prio:hover,
.bb-prio:focus-visible {
  border-color: var(--bb-border-strong);
  box-shadow: var(--bb-elev-3), inset 3px 0 0 var(--prio);
}
.bb-prio__cta {
  background: transparent;
  border-color: transparent;
  text-shadow: none;
}
.bb-prio:hover .bb-prio__cta {
  background: transparent;
  color: var(--prio);
}
.bb-rail-callout {
  border-color: var(--bb-border);
  box-shadow: var(--bb-elev-2), inset 3px 0 0 var(--prio);
}
.bb-priogrid--wide > .bb-prio:first-child:nth-last-child(n+3) {
  background-image: none;
  border-color: var(--bb-border);
  box-shadow: var(--bb-elev-2), inset 4px 0 0 var(--prio);
}
.bb-hero__tagline {
  color: var(--bb-text-tertiary);
}
.bb-cc__headline.bb-type-helper {
  color: var(--bb-text-secondary);
}