/* =========================
   NFL Rankings — Clean CSS
   ========================= */

/* Namespace root */
.nflrk{
  /* layout vars */
  --page-max: 1680px;
  --numcol: 18ch;            /* desktop default */

  /* base colors */
  --bg: #f7f7f9;
  --text: #18181b;
  --muted: #6b7280;
  --card-bg: #fff;
  --border: #e5e7eb;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.06);

  /* rank colors */
  --rank-green:#0b7a07;
  --rank-gray:#5b5b5b;
  --rank-yellow:#e3b300;
  --rank-red:#c40000;

  background: var(--bg);
  color: var(--text);
}

/* --- Responsive knobs (consolidated) --- */
@media (max-width: 1024px){ .nflrk { --numcol: 12ch; } }
@media (max-width: 768px){  .nflrk { --numcol: 8ch; } }
@media (min-width: 1720px){ .nflrk .nflrk-grid3{ grid-template-columns: repeat(3, minmax(560px, 1fr)); } }

/* Page container */
.nflrk .nflrk-page{
  width: 100%;
  max-width: var(--page-max);
  margin: 20px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Header / legend */
.nflrk .nflrk-header{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:0 0 12px}
.nflrk h1{font-size:22px;margin:0}
.nflrk .nflrk-sub{color:var(--muted);margin:0 0 14px;font-size:.95em}
.nflrk .nflrk-legend{display:flex;gap:16px;align-items:center;margin:8px 0 18px;color:var(--muted);font-size:.9em}
.nflrk .nflrk-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}

/* Simple grid (legacy keep) */
.nflrk .nflrk-grid{display:grid;grid-template-columns:1fr;gap:18px}

/* Sections & card grid */
.nflrk .nflrk-sections{ display:grid; gap:22px; }
/* 2-up by default; 1-up on mobile; 3-up only when very wide (via min-width rule above) */
.nflrk .nflrk-grid3{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(2, minmax(560px, 1fr));
}
@media (max-width: 768px){
  .nflrk .nflrk-grid3{ grid-template-columns: 1fr; }
}

/* Section headers */
.nflrk .nflrk-section-hdr{
  margin: 2px 2px 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  display:flex; align-items:center; gap:10px;
}

/* Themes */
.nflrk .theme-off{ --theme:#0b6cff; --theme-ink:#0b3c8c; --theme-soft:#edf3ff; }
.nflrk .theme-def{ --theme:#0a7a43; --theme-ink:#084e2c; --theme-soft:#eaf7f1; }

/* Subtype accents */
.nflrk .mod-pass{ --sub:#1f7aec; --sub-soft:#e8f1fe; }
.nflrk .mod-rush{ --sub:#0aa04a; --sub-soft:#e7f8ee; }
.nflrk .mod-eff { --sub:#b98100; --sub-soft:#fff6e6; }

/* Card */
.nflrk .nflrk-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Card header */
.nflrk .nflrk-card-hdr{
  padding: 12px 14px;
  background: var(--theme-soft, #f4f6fa);
  border-bottom: 2px solid var(--theme, var(--border));
  font-weight: 700;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Badges */
.nflrk .nflrk-badges{ display:flex; gap:8px; align-items:center; }
.nflrk .nflrk-badge{
  font-size:.72rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; line-height:1.4;
  background: var(--sub-soft, var(--theme-soft));
  color: var(--theme-ink, #0b3c8c);
  border: 1px solid var(--sub, var(--theme));
}

/* Two-table shell */
.nflrk .nflrk-shell{
  position: relative;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  border-radius: 0 0 14px 14px;
}
@media (max-width: 768px){
  .nflrk .nflrk-shell{ grid-template-columns: 128px minmax(0,1fr); }
}

/* Bottom cap */
.nflrk .nflrk-shell::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--theme, var(--border)) 0%, var(--theme, var(--border)) 36%, transparent 100%);
  border-top: 1px solid var(--border);
  pointer-events: none;
}

/* LEFT (labels) */
.nflrk .nflrk-left{
  background: var(--card-bg);
  border-right: 1px solid var(--border);
}
.nflrk .nflrk-left .tbl{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.nflrk .nflrk-left th,
.nflrk .nflrk-left td{
  padding: 9px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  border-bottom: 1px solid var(--border);
  text-align: left;
  line-height: 1.25;
  font-size: .95em;
}

/* RIGHT (values) */
.nflrk .nflrk-right{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
  scrollbar-gutter: stable; /* fine pointer desktop; mobile overridden below */
  background: var(--card-bg);
}
.nflrk .nflrk-right .tbl{
  table-layout: fixed;
  width: auto;
  min-width: calc((var(--numcol) * 2) + 72px); /* 2 numeric cols + padding/separator */
  border-collapse: separate;
  border-spacing: 0;
}

/* Column sizing */
.nflrk .nflrk-right .tbl col.col-away { width: var(--numcol); }
.nflrk .nflrk-right .tbl col.col-home { width: var(--numcol); }

/* Base cell styles */
.nflrk .nflrk-right th,
.nflrk .nflrk-right td{
  padding: 9px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  text-align: right;
  line-height: 1.25;
}

/* Separator between Away/Home */
.nflrk .nflrk-right th + th,
.nflrk .nflrk-right td + td{ border-left: 1px solid var(--border); }

/* Sticky header */
.nflrk .nflrk-right thead th{
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 2;
  text-align: right;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* fixed typo */
  max-width: 1%;
}

/* Zebra + stronger last row */
.nflrk .stripe tbody tr:nth-child(odd) { background: #fafafa; }
.nflrk .stripe tbody tr:nth-child(even){ background: #ffffff; }
.nflrk .stripe tbody tr:hover{ background:#f3f4f6; }
.nflrk .stripe tbody tr:last-child th,
.nflrk .stripe tbody tr:last-child td{ border-bottom: 2px solid var(--border); }

/* Numbers/rank display */
.nflrk .nflrk-val, .nflrk .nflrk-rank{ font-variant-numeric: tabular-nums; }
.nflrk .nflrk-rank{ font-weight:700; font-size:.8em; margin-left:4px; }
.nflrk .rank-green{color:var(--rank-green)}
.nflrk .rank-gray{color:var(--rank-gray)}
.nflrk .rank-yellow{color:var(--rank-yellow)}
.nflrk .rank-red{color:var(--rank-red)}
.nflrk .nflrk-team{ font-weight:700; font-size:.95em; }
.nflrk .nflrk-note{ color:var(--muted); font-size:.9em; margin:8px 0 2px; }

/* Mobile compaction */
@media (max-width: 768px){
  .nflrk .nflrk-left th, .nflrk .nflrk-left td,
  .nflrk .nflrk-right th, .nflrk .nflrk-right td{ padding: 7px 8px; line-height: 1.2; }

  /* Right table floor smaller on phones */
  .nflrk .nflrk-right .tbl{ min-width: calc((var(--numcol) * 2) + 30px); }

  /* Vertical anywhere, horizontal inside values; no extra gutter */
  .nflrk .nflrk-card{ touch-action: pan-y; }
  .nflrk .nflrk-right{
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: auto;
    position: relative;
  }

  /* Edge fades hint horizontal scroll */
  .nflrk .nflrk-right::before,
  .nflrk .nflrk-right::after{
    content:""; position:absolute; top:0; bottom:0; width:12px; pointer-events:none;
  }
  .nflrk .nflrk-right::before{ left:0;  background:linear-gradient(to right,#fff,transparent); }
  .nflrk .nflrk-right::after{  right:0; background:linear-gradient(to left,#fff,transparent); }

  /* Hide "(Away)/(Home)" suffix to save space */
  .nflrk .nflrk-team .nflrk-sfx{ display:none; }

  /* Force wide-nums cards to compact widths on phones */
  .nflrk .nflrk-card.wide-nums{ --numcol: 8ch !important; }
}

/* Per-card override hook */
.nflrk .wide-nums { --numcol: 18ch; }

/* Back-to-preview pill */
.nflrk .nflrk-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background: var(--card-bg); color: var(--text);
  text-decoration:none; font-weight:600; font-size:.9rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s ease, border-color .15s ease, transform .04s ease;
}
.nflrk .nflrk-back:hover{ background: var(--theme-soft, #f4f6fa); border-color: var(--theme, var(--border)); }
.nflrk .nflrk-back:active{ transform: translateY(1px); }
.nflrk .nflrk-back:focus-visible{ outline:2px solid var(--theme, #0b6cff); outline-offset:2px; border-color: transparent; }
.nflrk .nflrk-back svg{ flex:0 0 16px; color: var(--theme, #0b6cff); }

@media (max-width: 360px){
  .nflrk .nflrk-back{ padding:5px 8px; gap:6px; font-size:.86rem; }
}

/* Force 3-up on desktop/tablet; allow horizontal scroll if cramped */
.nflrk .nflrk-grid3{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(560px, 1fr));
  overflow-x: auto;                 /* enable horizontal scroll when needed */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;              /* breathing room above scrollbar */
  scrollbar-gutter: stable;         /* keeps layout from shifting with scrollbar */
}

/* Mobile still stacks to 1-up */
@media (max-width: 768px){
  .nflrk .nflrk-grid3{
    grid-template-columns: 1fr;
    overflow-x: visible;
    scrollbar-gutter: auto;
  }
}