/* ===== NFL Team Rankings – responsive, polished ===== */
:root{
  --surface:#ffffff;
  --ink:#1b1f2a;
  --muted:#6b7280;
  --border:#e6e8ef;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

/* Page wrapper uses team colors from inline CSS vars */
.nflrank{ color: var(--ink); }

/* === HERO === */
.rank-hero{
  background:
    radial-gradient(1000px 240px at 50% -20%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--secondary) 35%, #0b1220), color-mix(in oklab, var(--primary) 55%, #0b1220));
  color:#fff;
  margin-top:8px;
}
.rank-hero__inner{ display:flex; align-items:center; justify-content:space-between; padding:22px 12px; }
.rank-hero__id{ display:flex; align-items:center; gap:14px; }
.rank-hero__logo{ width:60px; height:auto; background:#fff; border-radius:12px; padding:6px; box-shadow: var(--shadow); }
.rank-hero__title{ margin:0; font-weight:800; letter-spacing:.2px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.rank-hero__meta{ margin:2px 0 0; opacity:.9; }

.rank-hero__links{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.28);
}
.chip:hover{ background:rgba(255,255,255,.24); }

/* === GRID === */
.rank-grid{
  display:grid; gap:18px; margin:16px 0 8px;
}
@media (min-width: 992px){
  .rank-grid{ grid-template-columns: 1fr 1fr; }
}

/* === CARDS === */
.rank-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow: var(--shadow);
  padding:16px;
}
.rank-card__title{
  margin:0 0 10px; font-weight:800; color: color-mix(in oklab, var(--primary) 70%, #000);
}

/* === TABLES === */
.table-wrap{
  width:100%; overflow:auto; -webkit-overflow-scrolling: touch;
  border-radius:10px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
}
.team-rankings-table{
  width:100%; border-collapse: separate; border-spacing: 0; min-width: 560px;
}
.team-rankings-table thead th{
  position: sticky; top: 0; z-index: 2; /* sticky inside scroll */
  background: color-mix(in oklab, var(--primary) 85%, #0b1220);
  color:#fff; padding:12px; font-size:13px; text-transform:uppercase; letter-spacing:.3px;
}
.team-rankings-table th:first-child{ border-top-left-radius:10px; }
.team-rankings-table th:last-child{ border-top-right-radius:10px; }

.team-rankings-table tbody td{
  background:#fff; color:#444; padding:12px; font-size:14px; text-align:center; border-bottom:1px solid var(--border);
}
.team-rankings-table tbody tr:last-child td{ border-bottom:0; }
.team-rankings-table td.stat{ text-align:left; font-weight:600; color:#111827; }

/* Row hover (desktop) */
@media (hover:hover){
  .team-rankings-table tbody tr:hover td{ background:#f8fafc; }
}

/* === RANK COLORING === */
.rank-best   { background: #16a34a !important; color:#fff !important; font-weight:700; }
.rank-good   { background: #64748b !important; color:#fff !important; font-weight:700; }
.rank-average{ background: #f59e0b !important; color:#1f2937 !important; font-weight:700; }
.rank-worst  { background: #dc2626 !important; color:#fff !important; font-weight:700; }

/* === LEGEND === */
.rank-legend{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end;
  margin:10px 0 20px;
  color:#6b7280; font-size:13px;
}
.rank-legend .swatch{ display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:6px; vertical-align:-2px; }
.rank-legend .best{ background:#16a34a; }
.rank-legend .good{ background:#64748b; }
.rank-legend .avg { background:#f59e0b; }
.rank-legend .worst{background:#dc2626; }

/* === MOBILE TWEAKS === */
@media (max-width: 768px){
  .rank-hero__inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .rank-hero__logo{ width:52px; }
  .rank-hero__links{ width:100%; }
  .chip{ width:auto; }

  .rank-card{ padding:14px; }
  .team-rankings-table{ min-width: 520px; } /* allow gentle horizontal scroll if needed */
}

/* Make sure body text is readable on any background */
body{ color: var(--text, #111); }

/* === Mobile/Small: both-axis scroll per table, sticky header + sticky first column === */

/* Each table scrolls independently */
.table-wrap{
  position: relative;
  overflow: auto;                 /* horizontal + vertical scroll */
  -webkit-overflow-scrolling: touch;
  max-height: 58vh;               /* vertical window; tweak as needed */
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border, #e6e8ef);
}

/* Keep tables reasonable on phones */
.team-rankings-table{
  width: 100%;
  min-width: 480px;               /* tighter than before so it fits better */
  table-layout: fixed;            /* stable column widths */
  border-collapse: separate;
  border-spacing: 0;
}

/* Column widths (sum to ~100%) */
.team-rankings-table thead th:nth-child(1),
.team-rankings-table td.stat{ width: 40%; }
.team-rankings-table thead th:nth-child(2),
.team-rankings-table td:nth-child(2){ width: 12%; }
.team-rankings-table thead th:nth-child(3),
.team-rankings-table td:nth-child(3),
.team-rankings-table thead th:nth-child(4),
.team-rankings-table td:nth-child(4),
.team-rankings-table thead th:nth-child(5),
.team-rankings-table td:nth-child(5){ width: 16%; }

/* Sticky header inside the scroll container */
.table-wrap .team-rankings-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;                     /* above body cells */
  background: color-mix(in oklab, var(--primary, #0b1220) 85%, #0b1220);
  color: #fff;
}

/* Sticky first column (header + body) */
.table-wrap .team-rankings-table thead th:first-child,
.table-wrap .team-rankings-table td.stat{
  position: sticky;
  left: 0;
  z-index: 4;                     /* above other cells */
  background: #fff;               /* solid so it doesn't smear while scrolling */
  box-shadow: 2px 0 0 rgba(0,0,0,0.06); /* right divider */
}

/* Ensure the very first header cell sits on top when overlapping */
.table-wrap .team-rankings-table thead th:first-child{ z-index: 5; }

/* Tighten further on extra-small phones */
@media (max-width: 400px){
  .team-rankings-table{ min-width: 440px; }  /* even narrower */
}

/* Desktop hover polish without breaking sticky layers */
@media (hover:hover){
  .team-rankings-table tbody tr:hover td{ background:#f8fafc; }
}


/* --- Force contrast + readable hero on any banner --- */
.rank-hero{ position: relative; overflow: hidden; }
.rank-hero::after{
  content:"";
  position:absolute; inset:0;
  /* subtle dark overlay so white text always pops */
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.32));
  pointer-events:none;
  z-index: 0;
}
.rank-hero__inner{ position: relative; z-index: 1; }

.rank-hero__title,
.rank-hero__meta,
.rank-hero .chip{
  color:#fff !important;
}
.rank-hero__title{ text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.rank-hero__meta{ opacity:.95; }

/* Logo: keep readable on any bg */
.rank-hero__logo{
  background:#fff; border-radius:12px; padding:6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}