/* ==========================================================================
   Barn Burner: the five rules the product needs and the styleguide cannot
   carry. Loads after tokens.css, components.css and app.css.

   Sprint 3 shipped 396 lines of .bb-scout-* here because Jony's scouting
   components did not exist yet. They do now (design/components.css sections
   22 to 32, shipped verbatim in web/components.css), so every one of those
   classes is gone and what is left is the seam between a static styleguide
   and a server-rendered app: a photo that has to fall back, a form that has
   to work with scripting blocked, an anchor where the styleguide drew a
   <span>, and a print rule that has to behave on the other nine pages.

   Same contract as the rest: no raw hex, no raw px, no raw duration.
   ========================================================================== */

/* ==========================================================================
   1. A LOADED FACE NEVER SHOWS LETTERS
   The monogram sits under the photo so a missing headshot falls back to
   initials. The league's mugs are transparent PNGs, though, so the initials
   read straight through the gap around the player's head. The slot is already
   an opaque surface; hiding the monogram the moment the image actually loads
   is what makes that surface the thing behind the cut-out.

   Keyed off the image's own onload, so it happens only when there IS an
   image: a 404 never fires it, and the initials stay. The image also carries
   onerror, which removes it, so nothing is left holding an empty frame.
   ========================================================================== */

.bb-face--photo .bb-tile__mono,
.bb-tile__face--photo .bb-tile__mono { visibility: hidden; }

/* ==========================================================================
   2. THE STAR IS A REAL FORM
   Jony draws the star as a bare <button> that is a direct child of the
   compare row's grid and of the hero's positioning context. It has to be a
   form POST so it works with scripting blocked, so the form gets out of the
   layout's way entirely rather than becoming a grid item nobody drew.
   ========================================================================== */

.bb-compare__row > form,
.bb-player__hero > form { display: contents; }

/* ==========================================================================
   3. ANCHORS WHERE THE STYLEGUIDE DREW SPANS
   A news item holds two links (the story, and the player it is about), and
   one anchor cannot contain another. So the item is a <div> and the headline
   carries the link, which needs the colour the styleguide got for free.
   ========================================================================== */

a.bb-news__head { color: inherit; text-decoration: none; }
a.bb-slot, a.bb-clip, a.bb-pchip { text-decoration: none; color: inherit; }

/* The styleguide's own .sg-wrap, which is scaffolding. A row of small buttons
   that wraps is a real thing the product does on four screens. */
.bb-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================================
   4. PRINT
   components.css prints the cheat sheet and hides everything else on the
   page, which is right on /scout/cheat-sheet and would print a blank sheet of
   paper on the other nine. A page with no .bb-sheet in it prints itself.
   ========================================================================== */

@media print {
  body:not(:has(.bb-sheet)) > * { display: revert !important; }
}