/* Team detail page (templates/teams/team_detail.html) - page-specific
   classes layered on top of static/css/base.css's shared .hl-* components
   and tokens, same pattern as league_home.css. Phase 1 of the site-wide
   Playbook conversion (see league_home.css's own Phase 0 for the
   reference implementation this follows) - this page previously had NO
   dedicated CSS at all, rendering off base.css's generic .hl-header-band/
   .hl-card/.hl-table only. `.hl-header-band` itself is untouched in
   base.css (nothing else in the app used it - grep confirmed this was
   its only caller) - it's just not used here anymore, replaced with this
   page's own masthead so a future generic page can still reach for the
   plain band without inheriting team-specific styling. */

/* ─── Masthead (team identity hero) ────────────────────────────────────
   Same shape as .lh-masthead (gradient + dot-grid texture, shine-sweep
   avatar, record folded in as a divided sub-panel instead of a floating
   .hl-card) - but the gradient tints toward the TEAM's own
   primary_color when set (--td-accent, passed inline from the template,
   same field team_detail.html already uses to tint the roster/opponent
   avatar elsewhere on this page), falling back to the site's --primary
   orange for teams that haven't set one. Every team's own page reading
   as "this team's page" rather than a copy-pasted shell was the whole
   point of exposing primary_color on Team in the first place - the old
   plain .hl-header-band never used it. */
.td-masthead {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--td-accent, var(--primary)) 55%, var(--bg-card)) 0%,
    var(--bg-card) 66%
  );
  border-radius: 16px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}

.td-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245, 241, 236, 0.18) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.25;
  mask-image: linear-gradient(135deg, #000 0%, transparent 58%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 58%);
  pointer-events: none;
}

.td-masthead-row {
  position: relative;
  display: flex;
  /* flex-start, not center: .td-masthead-col's own actions-row sits above
     its eyebrow/name (see that rule's comment) - centering this row would
     leave the avatar floating lower than the column's own content starts,
     the same reasoning static/css/league_home.css's .lh-masthead-row
     documents for its own identical layout. */
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.td-masthead-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px var(--bg-card),
    0 0 0 6px color-mix(in srgb, var(--td-accent, var(--primary)) 45%, transparent),
    0 18px 36px -18px rgba(0, 0, 0, 0.85);
}

.td-masthead-avatar-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}

html.lh-anim-ready [data-lh-reveal].lh-is-visible .td-masthead-avatar-wrap::after {
  animation: td-avatar-shine 6s ease-in-out 0.2s infinite;
}

@keyframes td-avatar-shine {
  0% { transform: translateX(-130%); }
  18% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.td-masthead-avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  font-size: 32px;
}

.td-masthead-col {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.td-masthead-eyebrow {
  margin: 0 0 6px;
  /* Reserves room for .td-masthead-actions-row (below), pulled out of
     flow and anchored to this same top-right corner - without this, a
     long "<season> · <division>" eyebrow could run under the share
     button at narrow widths. Comfortably covers the ~76px share pill
     plus a gap; harmless dead space on a page with share buttons off
     (no button there to reserve room for in the first place). */
  padding-right: 90px;
}

.td-masthead-name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 32px);
  color: var(--text);
}

/* User request: "the name of the season and team name... aligns on the
   team logo... like in the league header in league home page" - the
   eyebrow/name block was starting well below the top of the (smaller,
   104px) team logo, because this row used to sit in normal flow above
   them (like static/css/league_home.css's own .lh-masthead-actions-row
   does on desktop) - fine against league home's much taller 152px logo,
   but against this page's shorter one the same ~50px offset left the
   eyebrow/name block reading as vertically centered against the logo
   (bottom of "Demo Ballers" nearly touching/overflowing the logo's own
   bottom edge) instead of flush with its top. Pulled out of flow
   (`position: absolute`, anchored to `.td-masthead-col`'s own top-right
   corner - that column is `position: relative`) so `.td-masthead-eyebrow`
   becomes the column's first in-flow child and starts at the same y as
   the logo's own top, unconditionally rather than only past a mobile
   breakpoint - the same technique league_home.css's own
   `.lh-masthead-actions-row` mobile override already validates (see that
   rule's own comment), just applied here at every width since this row
   only ever holds the one Share button now that Analytics moved down
   into the record footer. */
.td-masthead-actions-row {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  z-index: 1;
}

.td-masthead-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Ghost/gradient-safe share button treatment - this masthead is the same
   "bright gradient hero" situation as League Home's own masthead
   (.lh-masthead-actions, static/css/league_home.css - same 135deg
   gradient shape, just var(--td-accent) instead of the fixed brand
   orange), which is why it gets that exact same override rather than
   static/css/share.css's plain-card default (transparent pill, no
   drop-shadow) - that default assumes a flat --bg-card/--bg-raised
   surface behind it, which isn't true here, and a solid card-colored
   button would fight the gradient instead of sitting quietly in its
   corner. Values copied 1:1 from .lh-masthead-actions rather than
   re-derived, so both gradient masthead pages stay visually identical. */
.td-masthead-actions .hl-share-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 1px solid rgba(245, 241, 236, 0.4);
  border-radius: 999px;
  padding: 3px;
}

.td-masthead-actions .hl-share:first-child .hl-share-btn {
  border-radius: 999px 0 0 999px;
}

.td-masthead-actions .hl-share:last-child .hl-share-btn {
  border-radius: 0 999px 999px 0;
}

.td-masthead-actions .hl-share:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(245, 241, 236, 0.25);
}

.td-masthead-actions .hl-share-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text);
  padding: 7px 9px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transition: background 0.15s ease, color 0.15s ease;
}

.td-masthead-actions .hl-share-btn:hover {
  background: rgba(245, 241, 236, 0.14);
  color: var(--primary);
}

.td-masthead-actions .hl-share-btn:active {
  transform: scale(0.92);
}

.td-masthead-actions .hl-share-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 560px) {
  .td-masthead-actions .hl-btn,
  .td-masthead-analytics-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  .td-masthead-actions .hl-share-btn {
    padding: 6px 8px;
  }

  .td-masthead-actions .hl-share-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* Record - was a separate floating .hl-card below the header band;
   folded into the masthead as a divided sub-panel instead (same move
   league_home.css's Phase 22 made for its own season section: "one card,
   one border... reads as a single continuous thought rather than two
   stacked panels"). */
.td-masthead-record {
  position: relative;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(245, 241, 236, 0.14);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Analytics button lives in this same footer row now (user request: keep
   it aligned to the W-L record rather than up in the top actions row) -
   `margin-left: auto` pins it to the row's far end while the record
   figures stay baseline-aligned with each other; `align-self: center`
   overrides that baseline alignment for just the button itself, since a
   button's own padding makes baseline alignment read as "sitting low"
   next to plain text/badges. */
.td-masthead-analytics-btn {
  margin-left: auto;
  align-self: center;
}

.td-masthead-record-figure {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
}

.td-masthead-record-detail {
  font-size: 12.5px;
  color: rgba(245, 241, 236, 0.65);
}

.td-masthead-record-streak {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}

.td-masthead-record-streak[data-cold="true"] {
  color: var(--alert);
}

.td-masthead-record-streak:not([data-cold="true"]) {
  color: var(--lime);
}

@media (max-width: 560px) {
  .td-masthead {
    padding: var(--space-4);
  }

  .td-masthead-avatar-wrap {
    width: 84px;
    height: 84px;
  }

  .td-masthead-avatar {
    font-size: 26px;
  }
}

/* Roster/Recent/Upcoming table row reveal - promoted to base.css's shared
   [data-lh-reveal] row/card stagger utility (see that file's own comment)
   since Awards/Seasons/Head-to-Head want the exact same thing. Nothing
   page-specific left to declare here.

   None of the three tables below opt into base.css's `.hl-table--stack`
   card fallback - same call standings.css/game_detail.css's box score
   table make (see standings.css's own comment for the full reasoning):
   these only run 3-5 columns, so a real table (falling back to
   `.hl-table-wrap`'s horizontal scroll on the rare name/venue that's too
   long for a phone) reads better than the same data broken into
   label:value lines. Each table's own "phone-width tightening" media
   query further down this file is what makes staying tabular actually
   work at that width - denser padding/type and a couple of
   mobile-specific compressions (Head-to-head -> H2H) rather than a
   different layout. */

/* ─── Roster table ───────────────────────────────────────────────────
   `.hl-table--center` (base.css) handles the plain header/value
   centering; everything below is this page's own enhancement on top -
   a jersey "chip" instead of a bare number, and the player cell promoted
   to the same avatar+name `.hl-player-link` shape the league players
   directory uses (static/css/players.css), so a roster row reads as a
   person rather than a line of text. */
.td-roster-th-num {
  width: 56px;
}

/* Player opts back out of `.hl-table--center`'s table-wide centering
   (user request) - the avatar+name link reads as a name to scan down the
   column, which left alignment suits better than the #/Position columns'
   short, single-glance values either side of it. */
.td-roster-table .td-roster-player-col {
  text-align: left;
}

.td-jersey-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.td-captain-badge {
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── Recent Games table ─────────────────────────────────────────────
   Win/loss needs to be legible at a glance, not just readable from the
   score - a leading W/L chip (base.css's `.hl-badge[data-status="win"/
   "loss"]`, otherwise unused before this) plus a faint full-row tint and
   a colored accent bar on the row's first cell (`box-shadow` rather than
   `border` - a plain border on a `<tr>`/`<td>` inside a
   `border-collapse: collapse` table doesn't reliably render its left
   edge across browsers, `box-shadow` always paints on the cell box
   regardless). Keyed off `data-result` on the `<tr>` itself (same
   attribute-driven pattern as `data-status`/`data-position` elsewhere)
   rather than a BEM modifier class, so it reads as "this row's data" the
   same way the rest of the table's `data-*` attributes already do. */
.td-games-table tbody tr[data-result="win"] {
  background: rgba(182, 226, 74, 0.06);
}

.td-games-table tbody tr[data-result="loss"] {
  background: rgba(255, 90, 77, 0.05);
}

.td-games-table tbody tr[data-result="win"] td:first-child {
  box-shadow: inset 3px 0 0 var(--lime);
}

.td-games-table tbody tr[data-result="loss"] td:first-child {
  box-shadow: inset 3px 0 0 var(--alert);
}

.td-result-cell {
  width: 40px;
}

.td-vs-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.td-score-link {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ─── Upcoming Games table ───────────────────────────────────────────
   Date/time split onto two lines (was one long "D, M j at g:i A"
   string) so both stay readable centered instead of one run-on line;
   `.hl-schedule-row--next`/`.hl-schedule-next-badge` are reused as-is
   from base.css (the public schedule's own "tips off in X" treatment on
   the soonest game) rather than re-derived, so this table's next-game
   highlight matches the rest of the site instead of inventing a second
   visual language for the same idea. */
.td-upcoming-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
}

.td-upcoming-day {
  font-weight: 700;
  color: var(--text);
}

.td-upcoming-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* "Head-to-head" (Recent Games' trailing column) is the one label on
   this page long enough to force horizontal scroll on a phone by itself
   - swapped for its initialism below 480px instead of shortened
   everywhere, so the desktop/tablet table keeps the fuller, clearer
   label. Both spans always render (see the template) - only display
   toggles, so there's no JS and nothing for a screen reader to announce
   twice (the hidden one is `display: none`, out of the accessibility
   tree entirely). */
.td-h2h-short {
  display: none;
}

/* ─── Phone-width tightening ──────────────────────────────────────────
   Denser padding/type for the three tables above - they stay real
   tables at this width (see this file's top comment) rather than
   switching layout, so the main lever is just fitting the same
   rows/columns into less horizontal space before `.hl-table-wrap`'s
   scroll has to kick in. */
@media (max-width: 640px) {
  .td-roster-table th,
  .td-roster-table td,
  .td-games-table th,
  .td-games-table td,
  .td-upcoming-table th,
  .td-upcoming-table td {
    padding: 8px 6px;
    font-size: 12px;
  }

  .td-roster-table .hl-avatar,
  .td-roster-table .hl-avatar-placeholder {
    width: 28px;
    height: 28px;
    font-size: 11px;
    border-radius: 7px;
  }

  .td-roster-table .hl-player-link {
    gap: var(--space-1);
  }

  .td-jersey-chip {
    min-width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .td-vs-label {
    display: block;
    font-size: 9.5px;
  }

  .td-upcoming-day {
    font-size: 12px;
  }

  .td-upcoming-time {
    font-size: 10.5px;
  }
}

@media (max-width: 480px) {
  .td-h2h-full {
    display: none;
  }

  .td-h2h-short {
    display: inline;
  }
}