/* =====================================================================
   Unified Entity Skeleton — Phase 2 base stylesheet.

   Owns ONLY the outer shell (page padding, hero outer slot, tab navigator
   container, inter-section gaps, sticky behavior) for the three core
   entity detail pages (Match / Player / League).

   Variant interiors (.mc-hero, .player-hero, .es-hero-league) keep their
   existing rules in match_center.css / player_detail.css / (future)
   entity_skeleton.css §es-hero-league. The skeleton does NOT redefine
   .mc-tabs--iconic — that canonical rule lives in match_center.css and
   stays there.

   Rules of engagement:
     - Zero `!important`.
     - Zero descendant rules into .mc-hero / .player-hero / .es-hero-league.
     - Spacing comes from the five `--es-*` tokens declared in theme.css.
   ===================================================================== */

/* ---------- Outer shell ---------- */
.es-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-max-wide);
  margin: 0 auto;
  padding: 0 var(--layout-padding);
}

/* ---------- Breadcrumb row + optional staff/hero actions ---------- */
.es-shell__crumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--es-crumb-mt) 0 var(--es-crumb-mb);
}

.es-shell__crumbs-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.es-shell__crumbs-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Hide the actions slot entirely when no block content is rendered, so
   we don't reserve flex space for an empty container. */
.es-shell__crumbs-actions:empty {
  display: none;
}

/* ---------- Hero outer slot ----------
   Hard-pinned to --es-hero-h so the tab navigator always lands at exactly
   the same y-coordinate on every variant (Match / Player / League / Team).
   Variant interiors (.mc-hero, .player-hero, .es-hero-league, .es-hero-team)
   MUST fill this height. They must NOT add their own outer margin-bottom;
   the gap is owned here.
   overflow:hidden clips any interior that accidentally exceeds the height. */
.es-shell__hero {
  margin: 0 0 var(--es-hero-mb);
  height: var(--es-hero-h);
  width: 100%;
  overflow: hidden;
}
.es-shell__hero > * {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* On mobile (<640px) the height lock relaxes — variants switch to auto height
   so content isn't aggressively clipped on narrow viewports. The tab y-coord
   consistency goal still holds on desktop (≥640px). */
@media (max-width: 639px) {
  .es-shell__hero {
    height: auto;
    min-height: 160px;
    overflow: visible;
  }
  .es-shell__hero > * {
    height: auto;
  }
  .es-hero-frame {
    grid-template-rows: auto 1fr auto;
  }
}

/* =====================================================================
   Bonded hero contract — shared by ALL four entity heroes.

   Every entity hero outer wrapper (Match / Player / League / Team) MUST
   carry the .es-hero-card class so the box-model and clipping contract is
   declared in ONE place. The skeleton owns:
       - height (fills .es-shell__hero, which is pinned to --es-hero-h)
       - width / box-sizing
       - position: relative + overflow: hidden (decorative ::before / ::after
         layers stay clipped to the hero's rounded outline)
       - padding: 0 (the inner .es-hero-frame owns padding via tokens)

   Variant CSS files keep ONLY visual treatment (background, border-radius,
   shadow, decorative gradients). They MUST NOT redeclare height, width,
   box-sizing, or padding here — those are owned by the bond.

   Adding a new entity hero variant?  Add the .es-hero-card class to the
   template's outer wrapper. The contract attaches automatically.
   ===================================================================== */
.es-hero-card {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* ---------- Hero interior frame primitive ----------
   Each variant interior wraps its content in .es-hero-frame.
   Three rows: top band (league pill / status) | main content | KPI strip.
   The row heights are controlled by --es-hero-meta-h and --es-hero-strip-h;
   the middle row takes the remaining space automatically. */
.es-hero-frame {
  display: grid;
  grid-template-rows: var(--es-hero-meta-h) 1fr var(--es-hero-strip-h);
  height: 100%;
  padding: var(--es-hero-pad-y) var(--es-hero-pad-x);
  border-radius: 18px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Each direct child of the frame occupies exactly its allocated row. */
.es-hero-frame__meta,
.es-hero-frame__main,
.es-hero-frame__strip {
  min-width: 0;
  min-height: 0;
}

.es-hero-frame__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.es-hero-frame__main {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* Direct children of __main fill the full width (e.g. mc-hero-teams-row grid). */
.es-hero-frame__main > * {
  width: 100%;
  min-width: 0;
}

.es-hero-frame__strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
}

/* Direct children of __strip fill the full width (e.g. goals-split-wrap). */
.es-hero-frame__strip > * {
  width: 100%;
  min-width: 0;
}

/* ---------- Tab navigator outer slot (sticky on every variant) ---------- */
.es-shell__tabs {
  position: sticky;
  top: var(--es-sticky-top);
  z-index: 100;
  margin: 0 0 var(--es-tab-mb);
  /* The sticky tab strip needs a solid background underneath so content
     doesn't bleed through during scroll. Uses the page surface so the
     strip blends with the surrounding shell. */
  background: var(--surface);
  /* Subtle ambient drop into content below; intentionally no border. */
  box-shadow: 0 8px 16px -12px color-mix(in srgb, var(--on-surface) 8%, transparent);
}

/* ---------- Tab panel container ----------
   Single direct child of the shell that holds every variant's tab panels.
   min-width:0 lets flex/grid descendants shrink below their intrinsic
   content width (e.g. wide tables, charts) instead of forcing horizontal
   overflow on the whole shell. */
.es-shell__content {
  min-width: 0;
}

/* ---------- Unified tab panel ----------
   One panel class for every entity page (Match / Player / League / Team).
   Provides:
       - vertical rhythm via grid gap (no per-card mb-* needed)
       - hidden contract via [hidden]
       - fade-in on activation (relocated from team_detail.css)
   Variant interiors keep their existing component classes (.premium-card,
   .es-card, .player-stat-card, etc.); the panel only owns layout.

   `grid-template-columns: minmax(0, 1fr)` (not bare `1fr`, not implicit auto):
   bare `1fr` and implicit auto tracks default to `minmax(auto, 1fr)`, which
   lets the panel column expand to fit a tab's intrinsic content width
   (e.g. Career's transfer table, Stats' charts before Chart.js sizes them).
   That makes switching to a tab with narrower content visibly shrink the
   panel — the exact bug this skeleton is meant to prevent. The explicit `0`
   floor pins the panel to the available track regardless of which tab is
   active. Same pattern is used on .app-shell in premium.css. */
.es-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
  animation: esPanelFadeIn 0.2s ease;
}

.es-panel[hidden] {
  display: none;
}

@keyframes esPanelFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Shared 2-column grid helper ----------
   Replaces .player-layout-2col and Bootstrap .row.g-4 + .col-lg-6 on
   simple 2-up rows. Collapses to a single column at <992px (tablet).
   Tri-breakpoint Bootstrap rows (col-md-6 col-lg-3) keep their own grid.

   `minmax(0, …fr)` (not bare `1.35fr 1fr`): same reason as .es-panel above —
   bare fr units default to minmax(auto, fr) and let cells with wide
   intrinsic content (charts, tables) push the parent wider than the
   available track. */
.es-grid-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-5);
}

@media (max-width: 992px) {
  .es-grid-2col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Vertical stack helper ----------
   Use inside a .es-grid-2col cell when the cell holds multiple stacked
   cards. Provides the same vertical rhythm as .es-panel without the
   panel's [hidden] semantics or fade animation. */
.es-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-content: start;
}

/* ---------- Card primitive (No-Line Rule) ----------
   Tonal surface — boundary is the surface-container-low tier shifting up
   from the .es-shell surface. No 1px border. Per CLAUDE.md / DESIGN.md:
   12px outer radius, 24px padding, ambient shadows only. */
.es-card {
  background: var(--surface-container-low);
  border-radius: 12px;
  padding: var(--space-5);
}

.es-card__inner {
  border-radius: 8px;
}

/* ---------- SVG sprite is rendered inline; keep it out of layout flow ---------- */
.es-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* =====================================================================
   League hero variant (Phase finalization)
   Visual wrapper only — inner .es-hero-frame handles padding and rows.
   Background, decorative pseudo-elements, and token surface preserved.
   ===================================================================== */
.es-hero-league {
  background: var(--lg-hero-bg);
  border-radius: 18px;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--lg-hero-shadow);
  color: var(--lg-hero-fg);
  height: 100%;
  box-sizing: border-box;
}

.es-hero-league::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 20% 10%, var(--lg-hero-wash-1), transparent 65%),
    radial-gradient(ellipse 55% 50% at 85% 95%, var(--lg-hero-wash-2), transparent 65%);
  pointer-events: none;
}

.es-hero-league .es-hero-frame,
.es-hero-league .es-hero-frame > * {
  position: relative;
  z-index: 1;
}

.es-hero-league__identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.es-hero-league__logo {
  width: 64px;
  height: 64px;
  padding: 8px;
  background: var(--lg-hero-tile-bg);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px var(--lg-hero-tile-ring),
    var(--lg-hero-tile-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.es-hero-league__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.es-hero-league__heading {
  min-width: 0;
}

.es-hero-league__title {
  /* Phase finalization: reduced to fit the 100px main row alongside the 64px logo. */
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--lg-hero-fg);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-hero-league__subtitle {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-hero-fg-dim);
  margin: 4px 0 0;
}

.es-hero-league__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.es-hero-league__bracket-btn {
  white-space: nowrap;
}

.es-hero-league__season-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.es-hero-league__season-label {
  margin: 0;
  color: var(--lg-hero-fg-dim);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.es-hero-league__season-select {
  background: var(--lg-hero-chip-bg);
  color: var(--lg-hero-fg);
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  min-width: 120px;
}

.es-hero-league__season-select:hover {
  background: var(--lg-hero-chip-hover);
}

.es-hero-league__season-select:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-container) 80%, transparent);
  outline: none;
}

.es-hero-league__season-select option {
  color: var(--on-surface);
  background: var(--surface-container);
}

/* ── League meta band elements ── */
.es-hero-league__type-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lg-hero-chip-bg) 70%, transparent);
  color: var(--lg-hero-fg-dim);
  font-size: var(--te-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.es-hero-league__country {
  font-size: var(--te-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--lg-hero-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── League KPI strip ── */
.es-hero-league__kpi-strip {
  gap: var(--space-5);
  flex-wrap: nowrap;
  /* Override __strip > * full-width rule so KPI items size naturally */
}

.es-hero-league__kpi-strip > * {
  width: auto;
}

.es-hero-kpi {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-shrink: 0;
}

.es-hero-kpi__value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--lg-hero-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.es-hero-kpi__label {
  font-size: var(--te-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--lg-hero-fg-dim);
}

@media (max-width: 640px) {
  .es-hero-league {
    /* No grid here — es-hero-frame handles layout */
  }
  .es-hero-league__actions {
    justify-content: flex-start;
  }
}

/* =====================================================================
   Unified iconic tab navigator
   Relocated from match_center.css so the Match / Player / League pages
   render an identical tab strip (icon above, uppercase label below,
   tinted-background active state with bottom underline). Previously
   these rules only loaded on Match and League because match_center.css
   wasn't loaded on Player. The skeleton owns this style now.
   ===================================================================== */
.mc-tabs--iconic {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px 16px;
  background: var(--mc-card-bg, var(--surface-container));
  border: 0;
  border-radius: 14px;
  margin-bottom: 0;
  box-shadow:
    0 8px 28px color-mix(in srgb, var(--primary-container) 6%, transparent),
    inset 0 0 0 1px var(--mc-card-ring, transparent);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mc-tabs--iconic::-webkit-scrollbar {
  display: none;
}

.mc-tabs--iconic .mc-tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 88px;
  padding: 4px 14px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--on-surface-variant);
  font-family: inherit;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  flex: 1 1 auto;
  white-space: nowrap;
}
.mc-tabs--iconic .mc-tab__icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  transition: transform 180ms ease;
}
.mc-tabs--iconic .mc-tab__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

.mc-tabs--iconic .mc-tab:hover {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--primary-container) 6%, transparent);
}
.mc-tabs--iconic .mc-tab:hover .mc-tab__icon {
  transform: translateY(-1px);
}

/* Active — tinted background + bottom underline accent */
.mc-tabs--iconic .mc-tab.active {
  color: var(--primary-container);
  background: color-mix(in srgb, var(--primary-container) 10%, transparent);
}
.mc-tabs--iconic .mc-tab.active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-container);
}
html.theme-dark .mc-tabs--iconic .mc-tab.active {
  color: var(--primary-fixed);
  background: color-mix(in srgb, var(--primary-fixed) 10%, transparent);
}
html.theme-dark .mc-tabs--iconic .mc-tab.active::after {
  background: var(--primary-fixed);
}

.mc-tabs--iconic .mc-tab:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: 2px;
}

/* Live tab variant — red dot + red label */
.mc-tabs--iconic .mc-tab--live {
  color: var(--error);
}
.mc-tabs--iconic .mc-tab--live:hover {
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error);
}
.mc-tabs--iconic .mc-tab--live.active {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}
.mc-tabs--iconic .mc-tab--live.active::after {
  background: var(--error);
}
.mc-tabs--iconic .mc-tab__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 0 0 10px color-mix(in srgb, var(--error) 60%, transparent);
  animation: live-pulse 1.6s ease-in-out infinite;
  margin-bottom: 2px;
}

@media (max-width: 768px) {
  .mc-tabs--iconic {
    padding: 5px 12px;
    gap: 2px;
  }
  .mc-tabs--iconic .mc-tab {
    min-width: 72px;
    padding: 4px 10px 7px;
  }
  .mc-tabs--iconic .mc-tab__icon {
    width: 14px;
    height: 14px;
  }
  .mc-tabs--iconic .mc-tab__label {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }
}