/*
 * nfl-teamball — design-system primitives (F1a + F1b + F1c).
 *
 * Ported from nfl-lines 0.39.7.1 assets/css/nfl-lines-ds.css (READ-ONLY ref).
 * Scope: :root token closure + primitive component styles + inline SVG sparkline
 *   + chart-card canvas wrapper.
 *   F1a (token closure + primitive component styles):
 *     KPI tile/strip, rank pill, delta bar, trend/badge, sticky header w/ team
 *     stripe, section card, chart/table toggle buttons, sortable table, empty.
 *   F1b (added at v1.9.7):
 *     .nfl-tb-ds-kpi__spark, .nfl-tb-ds-spark-svg{,--good,--bad,--mid} —
 *     CSS for the inline SVG sparkline emitted by NFL_Teamball_Charts.
 *   F1c (added at v1.9.8):
 *     .nfl-tb-ds-card--chart .nfl-tb-ds-chart — canvas wrapper for Chart.js
 *     cards emitted by NFL_Teamball_Charts::render_card_with_canvas. The
 *     .nfl-tb-ds-table--mirror modifier emitted by render_table_mirror_html
 *     inherits all base .nfl-tb-ds-table styling (Lines has no specific rule
 *     for the modifier either; mirrors verbatim).
 * EXCLUDED (no Tier-1 surface needs them; ship when a surface does):
 *   canvas sparkline (.nfl-tb-ds-sparkline*). Team-page (.nfl-tp*) and
 *   team-color-chip (S2.3) layout NOT carried.
 * Reprefix: nfl-ds- -> nfl-tb-ds- ; --nfl-* -> --nfl-tb-* ; data-nfl-* ->
 *   data-nfl-tb-* . The 6 host surface tokens alias --nfl-tb-color-* with
 *   hardcoded fallbacks (teamball defines none today -> resolves to fallback;
 *   theme-align is a known rebuild follow-up). Spacing/font/radius use the
 *   same inline fallbacks as Lines (never defined at :root in either).
 * Enqueued only on teamball views (see Front::enqueue_assets). front.css
 *   is byte-identical (untouched).
 */

/* ================================================================
 * 1. Root tokens (additive — do not remove/override anything in front.css)
 * ================================================================ */
:root {
  /* Semantic meaning */
  --nfl-tb-good:        #15803d;
  --nfl-tb-bad:         #b91c1c;
  --nfl-tb-mid:         #6b7280;
  --nfl-tb-accent:      #2563eb;

  --nfl-tb-good-bg:     #dcfce7;
  --nfl-tb-bad-bg:      #fee2e2;
  --nfl-tb-mid-bg:      #f3f4f6;
  --nfl-tb-accent-bg:   #dbeafe;

  /* Surface tokens — alias to existing front.css names where applicable */
  --nfl-tb-card-bg:       var(--nfl-tb-color-bg,          #ffffff);
  --nfl-tb-card-border:   var(--nfl-tb-color-border-soft, #e6e8ec);
  --nfl-tb-page-bg:       var(--nfl-tb-color-bg-subtle,   #fafafa);
  --nfl-tb-text:          var(--nfl-tb-color-text,        #111827);
  --nfl-tb-text-muted:    var(--nfl-tb-color-text-muted,  #6b7280);
  --nfl-tb-text-faint:    #9ca3af;

  /* Chart categorical palette */
  --nfl-tb-chart-1:  #2563eb;
  --nfl-tb-chart-2:  #15803d;
  --nfl-tb-chart-3:  #b45309;
  --nfl-tb-chart-4:  #b91c1c;
  --nfl-tb-chart-5:  #6b21a8;
  --nfl-tb-chart-6:  #0e7490;
  --nfl-tb-chart-7:  #c2410c;
  --nfl-tb-chart-8:  #4338ca;
  --nfl-tb-chart-9:  #be123c;
  --nfl-tb-chart-10: #4d7c0f;

  /* Per-team accent colors. Used sparingly (left stripe only). */
  --nfl-tb-team-ARI: #97233F;
  --nfl-tb-team-ATL: #A71930;
  --nfl-tb-team-BAL: #241773;
  --nfl-tb-team-BUF: #00338D;
  --nfl-tb-team-CAR: #0085CA;
  --nfl-tb-team-CHI: #0B162A;
  --nfl-tb-team-CIN: #FB4F14;
  --nfl-tb-team-CLE: #311D00;
  --nfl-tb-team-DAL: #003594;
  --nfl-tb-team-DEN: #FB4F14;
  --nfl-tb-team-DET: #0076B6;
  --nfl-tb-team-GB:  #203731;
  --nfl-tb-team-HOU: #03202F;
  --nfl-tb-team-IND: #002C5F;
  --nfl-tb-team-JAX: #006778;
  --nfl-tb-team-KC:  #E31837;
  --nfl-tb-team-LV:  #000000;
  --nfl-tb-team-LAC: #0080C6;
  --nfl-tb-team-LAR: #003594;
  --nfl-tb-team-MIA: #008E97;
  --nfl-tb-team-MIN: #4F2683;
  --nfl-tb-team-NE:  #002244;
  --nfl-tb-team-NO:  #D3BC8D;
  --nfl-tb-team-NYG: #0B2265;
  --nfl-tb-team-NYJ: #125740;
  --nfl-tb-team-PHI: #004C54;
  --nfl-tb-team-PIT: #FFB612;
  --nfl-tb-team-SF:  #AA0000;
  --nfl-tb-team-SEA: #002244;
  --nfl-tb-team-TB:  #D50A0A;
  --nfl-tb-team-TEN: #0C2340;
  --nfl-tb-team-WAS: #5A1414;

  /* §1.2-uplift (v1.10.3) — subtle column tints for the away/home boxscore
     team blocks. Consumed by .nfl-tb-boxscore* via var(); colors live in
     this token closure per discipline. */
  --nfl-tb-surface-away: #f7f8fa;
  --nfl-tb-surface-home: #fbf9f4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nfl-tb-good:      #22c55e;
    --nfl-tb-bad:       #ef4444;
    --nfl-tb-mid:       #9ca3af;
    --nfl-tb-accent:    #60a5fa;
    --nfl-tb-good-bg:   rgba(34, 197, 94, 0.15);
    --nfl-tb-bad-bg:    rgba(239, 68, 68, 0.15);
    --nfl-tb-mid-bg:    rgba(156, 163, 175, 0.1);
    --nfl-tb-accent-bg: rgba(96, 165, 250, 0.15);
    --nfl-tb-text-faint:#6b7078;
  }
}

/* ================================================================
 * 2. KPI tiles + strip — whitespace tuned to match the DistroKid density
 *    (see 2023 distrokid-earnings-analytics for reference).
 * ================================================================ */
.nfl-tb-ds-kpi-strip {
  display: grid;
  /* v0.36.5.11.4.1 — 6 cols × 2 rows for the 12-tile strip. Clean
   * factorizations at every breakpoint (6×2 / 4×3 / 3×4) — zero
   * whitespace, no awkward fallback to single-column stack. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
}

.nfl-tb-ds-kpi {
  background: var(--nfl-tb-card-bg);
  border: 1px solid var(--nfl-tb-card-border);
  border-radius: 8px;
  /* v0.36.5.11.4.1 — densified. Strip used to be 9 tiles wrapping to
   * 3 rows of oversized tiles; now 12 tiles at compact size in 2 rows. */
  padding: 0.35rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  min-height: 3.2rem;
  box-sizing: border-box;
}

.nfl-tb-ds-kpi--good  { background: var(--nfl-tb-good-bg);  }
.nfl-tb-ds-kpi--bad   { background: var(--nfl-tb-bad-bg);   }
.nfl-tb-ds-kpi--mid   { background: var(--nfl-tb-mid-bg);   }

.nfl-tb-ds-kpi--stale {
  background: var(--nfl-tb-mid-bg);
  opacity: 0.75;
}
.nfl-tb-ds-kpi--stale .nfl-tb-ds-kpi__value {
  color: var(--nfl-tb-text-muted);
}

.nfl-tb-ds-kpi__label {
  /* v0.36.5.11.4.1 — smaller label to match densified tile */
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nfl-tb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.nfl-tb-ds-kpi__value {
  /* v0.36.5.11.4.1 — smaller value (1.0-1.3rem clamped) to fit 6
   * tiles per row at desktop widths without truncating. */
  font-size: clamp(1.0rem, 1.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--nfl-tb-text);
  font-variant-numeric: tabular-nums;
}

.nfl-tb-ds-kpi__meta {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

/* v0.36.5.1 — KPI tile sparkline.
 *
 * Sits between the value and the meta row. Uses currentColor on the
 * polyline so the modifier classes below can color it via a single
 * `color:` rule. Kept tight (16px tall) so it adds context without
 * pushing the value text down.
 */
.nfl-tb-ds-kpi__spark {
  display: block;
  margin-top: 0.15rem;
  line-height: 0;
}

.nfl-tb-ds-spark-svg {
  display: inline-block;
  vertical-align: middle;
  color: var(--nfl-tb-text-muted);
}
.nfl-tb-ds-spark-svg--good { color: var(--nfl-tb-good); }
.nfl-tb-ds-spark-svg--bad  { color: var(--nfl-tb-bad);  }
.nfl-tb-ds-spark-svg--mid  { color: var(--nfl-tb-text-muted); }

/* ================================================================
 * F1c — Chart-card layout (canvas wrapper).
 * ================================================================ */
.nfl-tb-ds-card--chart .nfl-tb-ds-chart {
  width: 100%;
}

.nfl-tb-ds-trend {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
}
.nfl-tb-ds-trend--up   { color: var(--nfl-tb-good); }
.nfl-tb-ds-trend--down { color: var(--nfl-tb-bad);  }
.nfl-tb-ds-trend--flat { color: var(--nfl-tb-mid);  }

/* Tier badges */
.nfl-tb-ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--nfl-tb-font-xs, 0.8125rem);
  font-weight: 600;
  line-height: 1.4;
}
.nfl-tb-ds-badge--bronze   { background: #fce7d3; color: #7c3a00; border: 1px solid #e5a779; }
.nfl-tb-ds-badge--silver   { background: #e5e7eb; color: #374151; border: 1px solid #9ca3af; }
.nfl-tb-ds-badge--gold     { background: #fef3c7; color: #78350f; border: 1px solid #d97706; }
.nfl-tb-ds-badge--platinum { background: #cffafe; color: #155e75; border: 1px solid #06b6d4; }

/* ================================================================
 * 3. Rank pills
 * ================================================================ */
.nfl-tb-ds-rank {
  display: inline-flex;
  align-items: center;
  /* v0.36.5.11.4.1 — halved padding + smaller font for the densified strip */
  padding: 0.05rem 0.4rem;
  border-radius: 9999px;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  min-width: 32px;
  justify-content: center;
}
.nfl-tb-ds-rank--good {
  background: var(--nfl-tb-good-bg);
  color: var(--nfl-tb-good);
}
.nfl-tb-ds-rank--bad {
  background: var(--nfl-tb-bad-bg);
  color: var(--nfl-tb-bad);
}
.nfl-tb-ds-rank--mid {
  background: var(--nfl-tb-mid-bg);
  color: var(--nfl-tb-mid);
}

/* ================================================================
 * 4. Delta bars
 * ================================================================ */
.nfl-tb-ds-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--nfl-tb-space-2, 0.5rem);
  min-width: 100px;
}

.nfl-tb-ds-delta__track {
  position: relative;
  flex: 1;
  min-width: 40px;
  height: 8px;
  background: var(--nfl-tb-mid-bg);
  border-radius: 4px;
  overflow: hidden;
}

.nfl-tb-ds-delta__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: 4px;
  transition: width 0.18s ease-out;
}
.nfl-tb-ds-delta__fill--good { background: var(--nfl-tb-good); }
.nfl-tb-ds-delta__fill--bad  { background: var(--nfl-tb-bad);  }
.nfl-tb-ds-delta__fill--mid  { background: var(--nfl-tb-mid);  }

.nfl-tb-ds-delta__zero {
  /* v0.36.5.5.3 — bumped from 1px / pale to 2px / readable so the
     league-avg pivot is actually visible. Track height is 8px; marker
     extends 2px past top and bottom for a clear tick. Centered at the
     50% pivot point of the track, which (by render_delta_bar's geometry
     using $range_each_side = max(|max-center|, |min-center|)) IS the
     center value's visual location regardless of where center sits in
     the raw [min, max] range. */
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--nfl-tb-text);
  border-radius: 1px;
  z-index: 2;
}

.nfl-tb-ds-delta__val {
  font-size: var(--nfl-tb-font-xs, 0.8125rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  color: var(--nfl-tb-text);
  min-width: 44px;
  text-align: right;
}

/* ================================================================
 * 5. Sticky header — tighter padding
 * ================================================================ */
.nfl-tb-ds-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nfl-tb-card-bg);
  border-bottom: 1px solid var(--nfl-tb-card-border);
  /* v0.36.5.11.4.1 — tighter padding + margin so sticky header occupies
   * less viewport when scrolled. */
  padding: 0.5rem 1rem;
  margin-bottom: 0.55rem;
}

.nfl-tb-ds-header--team {
  border-left: 4px solid var(--nfl-tb-ds-team-color, var(--nfl-tb-accent));
  padding-left: calc(1rem - 4px);
}

.nfl-tb-ds-header__row {
  display: flex;
  /* v0.36.5.11.4.1 — center-align so breadcrumb + h1 + switcher read
   * as a single horizontal line instead of stacking visually. */
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.nfl-tb-ds-header__left h1 {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.15;
  color: var(--nfl-tb-text);
}

.nfl-tb-ds-header__left .nfl-tb-meta,
.nfl-tb-ds-header__left p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--nfl-tb-text-muted);
}

.nfl-tb-ds-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nfl-tb-ds-header__kpi {
  /* v0.36.5.11.4.1 — tighter top margin */
  margin-top: 0.4rem;
}

/* ================================================================
 * 6. Section card — tighter padding per DistroKid reference
 * ================================================================ */
.nfl-tb-ds-card {
  background: var(--nfl-tb-card-bg);
  border: 1px solid var(--nfl-tb-card-border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
}

.nfl-tb-ds-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--nfl-tb-card-border);
}

.nfl-tb-ds-card__titles {
  flex: 1;
  min-width: 0;
}

.nfl-tb-ds-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nfl-tb-text);
  line-height: 1.3;
}

.nfl-tb-ds-card__subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--nfl-tb-text-muted);
  line-height: 1.4;
}

.nfl-tb-ds-card__body {
  font-size: var(--nfl-tb-font-base, 1rem);
  color: var(--nfl-tb-text);
}

/* ================================================================
 * 7. Chart/table toggle buttons
 * ================================================================ */
.nfl-tb-ds-card__toggle {
  display: inline-flex;
  border: 1px solid var(--nfl-tb-card-border);
  border-radius: var(--nfl-tb-radius-sm, 4px);
  overflow: hidden;
  flex-shrink: 0;
}

.nfl-tb-ds-toggle {
  background: var(--nfl-tb-card-bg);
  color: var(--nfl-tb-text-muted);
  border: 0;
  padding: 4px 10px;
  font-size: var(--nfl-tb-font-sm, 0.9375rem);
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out;
  min-height: 32px;
}
.nfl-tb-ds-toggle:hover {
  background: var(--nfl-tb-mid-bg);
  color: var(--nfl-tb-text);
}
.nfl-tb-ds-toggle.is-active,
.nfl-tb-ds-toggle[aria-pressed="true"] {
  background: var(--nfl-tb-accent-bg);
  color: var(--nfl-tb-accent);
}
.nfl-tb-ds-toggle:focus-visible {
  outline: 2px solid var(--nfl-tb-accent);
  outline-offset: -2px;
}

/* ================================================================
 * 8. Sortable table
 * ================================================================ */
.nfl-tb-ds-table-wrap {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--nfl-tb-space-5, 1.5rem));
  padding: 0 var(--nfl-tb-space-5, 1.5rem);
}

.nfl-tb-ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nfl-tb-font-sm, 0.9375rem);
}

.nfl-tb-ds-table__caption {
  caption-side: top;
  text-align: left;
  padding: var(--nfl-tb-space-2, 0.5rem) 0;
  color: var(--nfl-tb-text-muted);
  font-size: var(--nfl-tb-font-sm, 0.9375rem);
}

.nfl-tb-ds-th {
  text-align: left;
  padding: 0;
  background: var(--nfl-tb-page-bg);
  border-bottom: 2px solid var(--nfl-tb-card-border);
  font-weight: 600;
  color: var(--nfl-tb-text);
  white-space: nowrap;
  position: relative;
}
.nfl-tb-ds-th--numeric { text-align: right; }

.nfl-tb-ds-th__btn {
  background: transparent;
  border: 0;
  padding: var(--nfl-tb-space-2, 0.5rem) var(--nfl-tb-space-3, 0.75rem);
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-start;
  min-height: 36px;
}
.nfl-tb-ds-th--numeric .nfl-tb-ds-th__btn {
  justify-content: flex-end;
}

.nfl-tb-ds-th__btn:hover {
  background: var(--nfl-tb-mid-bg);
}
.nfl-tb-ds-th__btn:focus-visible {
  outline: 2px solid var(--nfl-tb-accent);
  outline-offset: -2px;
}

.nfl-tb-ds-th__indicator {
  display: inline-block;
  width: 10px;
  opacity: 0.4;
  font-size: 0.75em;
}
.nfl-tb-ds-th.is-sorted .nfl-tb-ds-th__indicator { opacity: 1; }
.nfl-tb-ds-th.is-sorted-asc  .nfl-tb-ds-th__indicator::before { content: '▲'; }
.nfl-tb-ds-th.is-sorted-desc .nfl-tb-ds-th__indicator::before { content: '▼'; }

.nfl-tb-ds-td {
  padding: var(--nfl-tb-space-2, 0.5rem) var(--nfl-tb-space-3, 0.75rem);
  border-bottom: 1px solid var(--nfl-tb-card-border);
  color: var(--nfl-tb-text);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.nfl-tb-ds-td--numeric { text-align: right; }
.nfl-tb-ds-td--empty {
  text-align: center;
  color: var(--nfl-tb-text-muted);
  font-style: italic;
  padding: var(--nfl-tb-space-4, 1rem);
}

.nfl-tb-ds-td__dash { color: var(--nfl-tb-text-faint); }

.nfl-tb-ds-tr[data-nfl-tb-row-href] {
  cursor: pointer;
  transition: background 0.12s ease-out;
}
.nfl-tb-ds-tr[data-nfl-tb-row-href]:hover {
  background: var(--nfl-tb-mid-bg);
}

.nfl-tb-ds-td__link {
  color: var(--nfl-tb-accent);
  text-decoration: none;
}
.nfl-tb-ds-td__link:hover { text-decoration: underline; }


.nfl-tb-ds-empty {
  padding: var(--nfl-tb-space-5, 1.5rem);
  text-align: center;
  color: var(--nfl-tb-text-muted);
  font-style: italic;
  margin: 0;
}

/* ================================================================
 * 11. Responsive breakpoints (DistroKid-style progressive collapse)
 * ================================================================ */
/* v0.36.5.11.4.1 — clean 12-tile factorizations at every level.
 * Desktop: 6×2 (rule above at 112). Tablet portrait + large phone:
 * 4×3. Standard phone (down to 320px): 3×4. The old 2-col / 1-col
 * fallback for KPI strip was absurd for a 12-tile strip — scrapped. */
@media (max-width: 959px) {
  .nfl-tb-ds-kpi-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 479px) {
  .nfl-tb-ds-kpi-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nfl-tb-ds-header__row {
    flex-direction: column;
    align-items: stretch;
  }
  .nfl-tb-ds-card {
    padding: 0.55rem 0.65rem;
  }
  .nfl-tb-ds-table-wrap {
    margin: 0 -0.65rem;
    padding: 0 0.65rem;
  }
}