/* ============================================================
   DRAFT BANNER
   ============================================================
   Thin, full-width ribbon docked above a team page's header that
   links to the draft board. Rendered as the FIRST child of the page
   and pinned (sticky) at the very top so it owns the safe-area notch
   inset exclusively — the sticky PageHeader below it drops its own
   inset (scoped rule at the bottom of this file) to avoid double-
   counting the inset on notched devices. Visible only pre-draft and
   during the draft; hidden once contract assignment begins. Consumed
   by DraftBanner.js.

   Color note: the CTA text is --text-inverse (same as the label), NOT
   --color-action-primary — action-primary as foreground on
   --bg-scoreboard fails WCAG contrast on the default (Dolphins),
   Eagles, and Giants themes. --color-action-primary is only used here
   as the bottom border accent, never as text. */

.draft-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-base);
  padding-top: max(var(--space-2xs), env(safe-area-inset-top, 0px));
  border: none;
  border-bottom: 2px solid var(--color-action-primary);
  background: var(--bg-scoreboard);
  color: var(--text-inverse);
  font-family: var(--font-display);
  letter-spacing: var(--letter-spacing-wide, 1px);
  cursor: pointer;
  text-align: center;

  /* Pin above the sticky PageHeader (z-index 5) so the ribbon owns the
     notch inset for both the at-rest and scrolled states. */
  position: sticky;
  top: 0;
  z-index: 6;
}

.draft-banner-label {
  font-size: var(--font-size-sm);
}

.draft-banner-cta {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: underline;
}

/* When the ribbon precedes the header, the header stacks just below the
   pinned ribbon and no longer clears the notch itself (the ribbon does).
   The `top` offset equals the ribbon's rendered height: notch inset (or
   the 2xs min) + 44px content + 2xs bottom padding + 2px border. Scoped
   to this adjacency so PageHeader is unchanged on every other route. */
.draft-banner + .page-header {
  top: calc(
    max(var(--space-2xs), env(safe-area-inset-top, 0px)) + 44px +
      var(--space-2xs) + 2px
  );
}

.draft-banner + .page-header .page-header-title-row {
  padding-top: var(--space-base);
}