/* Skeez CFB design system — shared tokens + shared components for every public page.
   Load order in <head>: page <style>  ->  site.css  ->  mobile.css (phones only).
   Rules here intentionally override the per-page copies of the same component so the four
   pages look like one product. Desktop is the target here; mobile.css adapts it under 769px.
   Hard rule (Jeff): NO grey text anywhere. Dim text is near-white #e2e5f0, never #8b8fa8-ish. */

:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #242836;
  --surface3: #2c3142;
  --border: #2e3348;
  --text: #f3f5fb;
  --text-dim: #e2e5f0;          /* the dimmest text allowed on the site */
  --accent: #4f8cff;
  --accent-strong: #2f6fec;
  --accent-glow: rgba(79, 140, 255, 0.15);
  --up: #34d399;
  --down: #f87171;
  --gold: #fbbf24;
  --purple: #c4a5ff;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.25);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font) !important; background: var(--bg) !important; color: var(--text) !important; }

/* Numbers line up in every table and stat (tabular figures) */
td, th, .val, .value, .vs-score, .composite, .points, .record, .badge, .summary-card { font-variant-numeric: tabular-nums; }

/* ── One header for every page (desktop) ── */
.header {
  display: block !important; text-align: center;
  background: linear-gradient(135deg, #1a1d27 0%, #0f1117 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1.6rem 1.5rem 1.1rem !important;
  position: relative; overflow: hidden;
}
.header::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 80%, var(--accent-glow) 0%, transparent 50%);
  pointer-events: none;
}
.header h1 {
  font-size: 2rem; font-weight: 900 !important; letter-spacing: -0.03em; line-height: 1.15;
  color: var(--text) !important; position: relative; display: block !important;
}
.header h1 span:not(.source-badge) { color: var(--accent); }
.header .subtitle { color: var(--text-dim) !important; position: relative; }
.header .week-badge { position: relative; }

/* ── One nav for every page (desktop): centered pills, separators hidden ── */
.header nav {
  position: relative; display: flex !important; flex-wrap: wrap; justify-content: center;
  gap: .4rem !important; margin-top: 1rem !important;
}
.header nav > span { display: none !important; }
.header nav a {
  color: var(--text-dim) !important; text-decoration: none !important;
  font-size: .88rem !important; font-weight: 600 !important;
  padding: .45rem 1rem !important; border-radius: 999px !important;
  border: 1px solid transparent; background: transparent !important;
  transition: background .15s, color .15s, border-color .15s;
}
.header nav a:hover { color: var(--text) !important; background: rgba(255,255,255,.06) !important; }
.header nav a.active, .header nav a[aria-current="page"] {
  color: #fff !important; background: var(--accent-glow) !important; border-color: rgba(79,140,255,.45);
}

/* ── Shared controls ── */
.search-box { font-family: var(--font); color: var(--text) !important; }
.search-box::placeholder { color: #c9d1d9 !important; opacity: 1; }
.filter-btn, .refresh-btn, .tab-btn { font-family: var(--font); }
.filter-btn { color: var(--text-dim); }

/* Keyboard focus that is actually visible */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Footer ── */
.footer { color: var(--text-dim) !important; }

/* ── Team colours (preview flag ?teamcolors=1 adds body.team-colors) ── */
body.team-colors .rankings-table tbody tr[style*="--team"] td:first-child { box-shadow: inset 4px 0 0 var(--team); }
body.team-colors .rankings-table tbody tr[style*="--team"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--team) 16%, transparent) 0%, transparent 42%);
}
body.team-colors .rankings-table tbody tr[style*="--team"] .team-logo { border-color: color-mix(in srgb, var(--team) 60%, transparent); }

/* ── Skeleton loaders (replaced the "Loading..." text) ── */
.skel { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, #232838 25%, #2f3548 37%, #232838 63%);
  background-size: 400% 100%; animation: skel-shimmer 1.3s ease infinite; }
.skel-line { width: 70%; height: .8rem; vertical-align: middle; }
.skel-line.short { width: 45%; }
.skel-row td { padding: .75rem .5rem; }
.skel-row td:first-child .skel-line { width: 1.4rem; }
.skel-pane { padding: 0 !important; text-align: left !important; }
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.skel-card { height: 74px; width: 100%; border-radius: var(--radius); }
.skel-table { width: 100%; border-collapse: collapse; }
.skel-card-wrap { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.1rem; margin-bottom: 1rem; }
.skel-logo { width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; }
.skel-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
@keyframes skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Motion with restraint: content rises in once, nothing loops ── */
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rankings-table tbody tr:not(.skel-row), #wtBody > tr:not(.skel-row), .matchup-card, .metric-section.active table, .summary-card {
  animation: rise-in .28s ease-out both;
}
button, .filter-btn, .tab-btn, .header nav a { transition: transform .08s ease, background .15s, color .15s, border-color .15s; }
button:active, .filter-btn:active, .tab-btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Team names link to their team page; look like text, act like links */
a.team-link { color: inherit; text-decoration: none; }
a.team-link:hover { text-decoration: underline; text-underline-offset: 3px; }