/* ============================================
   PAGE HEADER — Unified Scoreboard (Direction 1A)
   ============================================
   PR1: title-only rollout. PR2: TeamDetail.js converts to this component
   directly (public/styles/pages/team-detail.css no longer has its own
   sticky header — see that file's HEADER section). PR3: Players.js converts
   too, and the tab row gains an optional per-tab count badge
   (.page-header-tab-badge, used by Players' My Claims tab). Consumed by
   js/components/shared/PageHeader.js, js/components/pages/TeamDetail.js, and
   js/components/pages/Players.js. Sticky at the top of the scrolling
   content area. */

.page-header {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}

/* ----------------------------------------
   TITLE ROW
   ---------------------------------------- */

.page-header-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-base);
  /* Title row is the topmost element on routes using this header (the old
     .app-top-bar, which padded the notch, no longer renders here) — extend
     the top padding by the safe-area inset instead of doubling it. */
  padding-top: calc(var(--space-base) + env(safe-area-inset-top, 0));
  /* Matches the sidebar (--color-structure-deepest) so the top chrome reads
     as one cohesive dark frame — commissioner direction, overrides the 1A
     handoff's lighter structure-primary title row. */
  background: var(--color-structure-deepest);
  box-shadow: var(--shadow-border);
}

.page-header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-xs);
  background: none;
  border: none;
  color: var(--color-white);
  opacity: 0.9;
  cursor: pointer;
}

.page-header-menu-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .page-header-menu-btn {
    display: grid;
    place-items: center;
  }
}

/* Back chevron (PR4) — replaces the hamburger on sub-pages that navigate
   back to a specific parent. Visible at ALL widths, unlike the hamburger
   above (desktop sub-page users still need a way back since the drawer
   isn't the primary affordance here). */
.page-header-back-btn {
  display: grid;
  place-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-xs);
  background: none;
  border: none;
  color: var(--color-white);
  opacity: 0.9;
  cursor: pointer;
}

.page-header-back-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.page-header-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 0.95;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* titleBadge layout (TeamDetail's roster record) — wraps the title so the
   badge hugs the (possibly truncated) text instead of `record`'s own
   pinned-to-the-row-edge placement. Takes over the flex:1/min-width:0 role
   `.page-header-title` normally carries directly on the row. */
.page-header-title-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

/* subtitle column (Messages redesign) — only rendered when `subtitle` is
   passed, so this wrapper never appears in the existing title-only /
   titleBadge layouts. Column direction stretches its children (the title
   row content, then the subtitle line) to the same width the bare title
   used to occupy directly in the row. */
.page-header-title-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-2xs);
}

/* Context line under the title, e.g. "Direct · 8-4 · 3rd" or
   "Trade thread · opened 2d ago". Reuses `--color-structure-lightest`, the
   same muted-on-dark token already proven at ~9.3:1 against
   --color-structure-deepest by .page-header-tab's inactive label — this
   title row shares that same dark background. */
.page-header-subtitle {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--color-structure-lightest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Owner real-name line (#645) — "First Last" directly under the team name,
   same left boundary (inherits the title-col's flex-column stacking, no
   extra margin needed). Simple/non-bold/half-size per commissioner spec:
   .page-header-title is 34px desktop / 26px mobile, so this is 17px / 13px.
   --color-structure-lightest verified >=7.3:1 against
   --color-structure-deepest across all 8 themeConfig.js palettes (darkest
   pairing: Bengals 7.37:1) — same token the tab row already proves at
   ~9.3:1 on the default theme. */
.page-header-owner-name {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 17px;
  color: var(--color-structure-lightest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .page-header-owner-name {
    font-size: 13px;
  }
}

.page-header-settings-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-xs);
  background: none;
  border: none;
  color: var(--color-white);
  opacity: 0.9;
  cursor: pointer;
}

.page-header-settings-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.page-header-record {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-white);
  /* Back to the handoff's translucent white scrim: over the dark
     --color-structure-deepest title row, white text on this scrim measures
     ~6.2:1 at 13px mobile — clears AA's 4.5:1. (It only failed on the earlier
     lighter structure-primary header, which prompted a dark-scrim workaround.) */
  background: var(--scrim-white-strong);
  padding: 6px 14px;
  border-radius: var(--border-radius-full);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .page-header-title-row {
    padding: 13px 14px;
    padding-top: calc(13px + env(safe-area-inset-top, 0));
    gap: 10px;
  }

  .page-header-title {
    font-size: 26px;
  }

  .page-header-record {
    font-size: 13px;
    padding: var(--space-xs) 10px;
  }
}

/* ----------------------------------------
   TAB ROW — rendered only when tabs are passed
   ---------------------------------------- */

.page-header-tabs {
  display: flex;
  border-top: 3px solid var(--scrim-white-bold);
}

.page-header-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 13px var(--space-sm);
  border: none;
  border-right: 2px solid var(--scrim-white-medium);
  background: var(--color-structure-deepest);
  color: var(--color-structure-lightest);
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease;
}

/* Optional count badge (PR3) — opaque red pill with a solid white ring so it
   reads as a distinct chip against BOTH tab states (dark teal inactive bg,
   orange active bg) rather than relying on hue contrast against either.
   Text contrast (white on --color-danger-primary) is ~4.79:1, independent of
   which tab state it's sitting on since the fill is opaque.
   Ring: a translucent white ring (the original `--scrim-white-strong`, 20%
   white) flattens to ~1.22:1 against the active orange tab — far under the
   3:1 non-text guideline — so the ring is an OPAQUE `--color-white` instead.
   No single ring/fill color clears 3:1 against both tab states at once, so
   this is the best achievable compromise, verified per edge:
     - white ring vs active orange tab bg (#f07c0f):    ~2.76:1 (residual)
     - white ring vs inactive deepest tab bg (#183e4e): ~11.43:1
     - white ring vs the red fill itself (#cf3e30):     ~4.79:1
   The ~2.76:1 active-tab edge is an accepted, mitigated limitation: the
   count is also exposed via the tab's aria-label for screen readers, and
   the badge is most load-bearing on the inactive tab, where the ring
   clears cleanly. A DS-wide count-badge token is a tracked follow-up. */
.page-header-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  flex-shrink: 0;
  border-radius: var(--border-radius-full);
  background: var(--color-danger-primary);
  color: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-white);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.page-header-tab.last {
  border-right: none;
}

.page-header-tab:not(.active):hover {
  background-color: var(--scrim-white-soft);
}

.page-header-tab.active {
  background: var(--color-action-primary);
  /* WCAG AA deviation (flagged for future design review): the handoff spec'd
     white text on this orange background, which measures ~2.76:1 — fails
     AA. --color-structure-deepest (the project's usual "near-black" token)
     still only reaches ~4.13:1 against this orange, so --color-black is
     used instead; verified ~7.6:1. */
  color: var(--color-black);
}

.page-header-tab:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -2px;
}

@media (max-width: 640px) {
  .page-header-tab {
    font-size: 11px;
    padding: 12px var(--space-xs);
    gap: 4px;
  }

  .page-header-tab-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
  }
}

/* Spec-mandated: disable the tab-background transition for users who
   prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .page-header-tab {
    transition: none;
  }
}