/* ==========================================================================
   FFToolbox report pages (UI sweep group C4, 2026-09-30)
   Pages: depth charts, NFL schedule grid, bye weeks, quality games,
   snap count report, targets report, points allowed, consistency.
   Linked from each page right after /includes/header.cfm so it cascades
   after responsive.css. Shared primitives (.fft-table, .fft-headshot,
   .fft-chip, .fft-card, tokens) live in css/fft-ui.css; this file only holds
   page-level layout for the pages above.
   Breakpoints: 390 / 560 / 768 / 1024 / 1280 only.
   Ad containers (.rectangle_center and the ad includes) are not styled here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wide report tables: the wrapper scrolls on both axes so the header row
   can stick (U0.5). Rank/first column stickiness comes from
   .inseason-sticky-first in responsive.css.
   -------------------------------------------------------------------------- */
.fft-report-scroll {
  max-height: min(80vh, 1100px);
  overflow: auto;
  overscroll-behavior: contain;
}

.fft-report-scroll > table > thead th {
  position: sticky;
  top: 0;
  z-index: 4;
}

.fft-report-scroll > table th,
.fft-report-scroll > table td {
  font-variant-numeric: tabular-nums;
}

/* These tables also carry .fft-table (css/fft-ui.css). Keep each report's own
   cell rhythm and alignment where fft-ui's generic base would flatten it. */
.fft-report-scroll > table.fft-table thead th {
  text-align: center;
}

.quality-games-table.fft-table td,
.quality-games-table.fft-table th {
  padding: 11px 12px;
  text-align: center;
}

.quality-games-table.fft-table tbody th[scope="row"] {
  text-align: left;
}

.snap-report-table.fft-table td,
.snap-report-table.fft-table th {
  padding: 10px 8px;
}

.snap-report-table.fft-table tbody tr:not(.snap-report-team) th[scope="row"] {
  color: #075d99 !important;
  text-align: left;
}

/* Only the first header row owns the sticky first column. */
.fft-pa-table.fft-table > thead > tr.fft-pa-head-2 > th:first-child {
  left: auto;
  box-shadow: none;
}

/* Rank + player both stay visible while scrolling sideways. */
.fft-report-sticky-two.quality-games-table { --fft-sticky-left: 62px; }
.fft-report-sticky-two.snap-report-table { --fft-sticky-left: 42px; }

.fft-report-sticky-two > thead > tr > th:nth-child(2),
.fft-report-sticky-two > tbody > tr > th[scope="row"] {
  position: sticky;
  left: var(--fft-sticky-left, 0);
  box-shadow: 2px 0 4px rgba(19, 48, 75, 0.12);
}

.fft-report-sticky-two > thead > tr > th:nth-child(2) {
  z-index: 5;
}

.fft-report-sticky-two > tbody > tr > th[scope="row"] {
  z-index: 3;
  background: #ffffff !important;
}

.fft-report-sticky-two > tbody > tr:nth-child(even) > th[scope="row"] {
  background: #f2f7fb !important;
}

/* Player cell: headshot + name */
.fft-player-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.fft-player-cell > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fft-player-cell > img,
.fft-player-cell > .fft-headshot {
  flex: 0 0 auto;
}

/* Inline bars (snap %, target share) */
.fft-bar-cell__value {
  display: block;
}

.fft-bar {
  display: block;
  height: 4px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: #e3ecf4;
}

.fft-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0a78aa;
}

.fft-bar--alt > i {
  background: #08734c;
}

/* "All weeks" toggle: phones show the last four weeks; the checkbox reveals
   the rest. inseason-table-scroll.js moves the scroll region into an
   .inseason-scroll-group wrapper, so both sibling shapes are covered. */
.fft-weeks-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

label.fft-weeks-toggle {
  display: none;
}

.fft-weeks-toggle__on {
  display: none;
}

.fft-weeks-toggle__input:checked + .fft-weeks-toggle .fft-weeks-toggle__off {
  display: none;
}

.fft-weeks-toggle__input:checked + .fft-weeks-toggle .fft-weeks-toggle__on {
  display: inline;
}

.fft-weeks-toggle__input:focus-visible + .fft-weeks-toggle {
  outline: 2px solid #0a78aa;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  label.fft-weeks-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 10px;
    padding: 0 16px;
    border: 1px solid #b9cedf;
    border-radius: 999px;
    background: #ffffff;
    color: #174f78;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
  }

  .fft-weeks-toggle__input:checked + label.fft-weeks-toggle {
    border-color: #0a78aa;
    background: #0a78aa;
    color: #ffffff;
  }

  th.fft-wk-old,
  td.fft-wk-old,
  col.fft-wk-old {
    display: none;
  }

  .fft-weeks-toggle__input:checked ~ .fft-table-scroll th.fft-wk-old,
  .fft-weeks-toggle__input:checked ~ .fft-table-scroll td.fft-wk-old,
  .fft-weeks-toggle__input:checked ~ .inseason-scroll-group th.fft-wk-old,
  .fft-weeks-toggle__input:checked ~ .inseason-scroll-group td.fft-wk-old {
    display: table-cell;
  }

  .fft-weeks-toggle__input:checked ~ .fft-table-scroll col.fft-wk-old,
  .fft-weeks-toggle__input:checked ~ .inseason-scroll-group col.fft-wk-old {
    display: table-column;
  }

  .fft-report-scroll > table td,
  .fft-report-scroll > table tbody th {
    height: 44px;
  }
}

@media print {
  .fft-report-scroll {
    max-height: none;
    overflow: visible;
  }

  label.fft-weeks-toggle {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   #14 Snap count report: weekly snap % columns
   -------------------------------------------------------------------------- */
.snap-report-table col.snap-col-week { width: 58px; }
.snap-report-table th.snap-wk,
.snap-report-table td.snap-wk { text-align: center; }
.snap-report-table thead th.snap-wk { background: #2c5282 !important; }

/* --------------------------------------------------------------------------
   #15 Targets report (replaces the page-local nth-child alignment rules)
   -------------------------------------------------------------------------- */
.fft-targets-table td { text-align: right; }
.fft-targets-table td.fft-player-td { text-align: left; }
.fft-targets-table td.fft-center { text-align: center; }

/* --------------------------------------------------------------------------
   #16 Points allowed (moved from the page <style>) + heat shading
   -------------------------------------------------------------------------- */
.fft-pa-table td { text-align: right; }
.fft-pa-table td:nth-child(1),
.fft-pa-table td:nth-child(2) { text-align: left; }
.fft-pa-table td.fft-pa-games,
.fft-pa-table td.fft-pa-ppg { text-align: center; }
.fft-pa-table td.fft-pa-ppg { font-weight: 800; }

@media (max-width: 560px) {
  .fft-pa-table.inseason-sticky-two > thead > tr:first-child > th:nth-child(2),
  .fft-pa-table.inseason-sticky-two > tbody > tr > td:nth-child(2) {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    padding-right: 6px !important;
    padding-left: 6px !important;
    line-height: 1.15;
    white-space: normal;
  }

  .fft-pa-table .fft-pa-ppg {
    min-width: 58px;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }
}

/* Two header rows: the second row sticks under the first. */
.fft-pa-table > thead > tr.fft-pa-head-1 > th {
  box-sizing: border-box;
  height: 36px;
}

.fft-report-scroll > table.fft-pa-table > thead > tr.fft-pa-head-2 > th {
  top: 36px;
}

.fft-heat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0 10px;
}

.fft-heat-legend__label {
  color: #374151;
  font-size: 12px;
  font-weight: 700;
}

.fft-heat-legend__scale {
  display: inline-flex;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.fft-heat-legend__scale i {
  display: block;
  width: 16px;
  height: 10px;
}

/* 1 = most points allowed (best matchup, green) .. 8 = fewest (red).
   Same scale as the SoS heat legend in responsive.css. */
.fft-heat-legend__scale .fft-heat-1,
table.fft-pa-table > tbody > tr > td.fft-heat-1 { background-color: #b9f0cb !important; }
.fft-heat-legend__scale .fft-heat-2,
table.fft-pa-table > tbody > tr > td.fft-heat-2 { background-color: #d3f5de !important; }
.fft-heat-legend__scale .fft-heat-3,
table.fft-pa-table > tbody > tr > td.fft-heat-3 { background-color: #e7f9ed !important; }
.fft-heat-legend__scale .fft-heat-4,
table.fft-pa-table > tbody > tr > td.fft-heat-4 { background-color: #f6fbf8 !important; }
.fft-heat-legend__scale .fft-heat-5,
table.fft-pa-table > tbody > tr > td.fft-heat-5 { background-color: #fdf6f6 !important; }
.fft-heat-legend__scale .fft-heat-6,
table.fft-pa-table > tbody > tr > td.fft-heat-6 { background-color: #fdeaea !important; }
.fft-heat-legend__scale .fft-heat-7,
table.fft-pa-table > tbody > tr > td.fft-heat-7 { background-color: #fddcdc !important; }
.fft-heat-legend__scale .fft-heat-8,
table.fft-pa-table > tbody > tr > td.fft-heat-8 { background-color: #fbcaca !important; }

/* --------------------------------------------------------------------------
   #17 Consistency report (moved from the page <style>) + sparkline
   -------------------------------------------------------------------------- */
.fft-consistency-table .c { text-align: center; }
.fft-consistency-table .r { text-align: right; }
.fft-consistency-table thead th a { color: #ffffff !important; }
.fft-consistency-table thead th.highlight { background: #0a78aa !important; }

.fft-consistency-table td.fft-consistency-trend {
  padding-top: 2px;
  padding-bottom: 2px;
  color: #0a78aa;
  text-align: center;
}

.fft-sparkline {
  display: block;
  margin: 0 auto;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   #9 Depth charts: details/summary accordion (phone), 2-column grid (tablet).
   Mirrors the card rules in responsive.css for the summary > h3 nesting.
   -------------------------------------------------------------------------- */
.depth-chart-details > summary {
  display: block;
  list-style: none;
  cursor: default;
}

.depth-chart-details > summary::-webkit-details-marker {
  display: none;
}

.depth-chart-details > summary::marker {
  content: "";
}

.depth-chart-grid > div.team .depth-chart-details > summary > h3 {
  position: relative;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px 8px 82px !important;
  margin: 0 0 6px !important;
  border: 0 !important;
  font-size: 19px !important;
  line-height: 1.2;
  text-align: left;
}

.depth-chart-grid > div.team .depth-chart-details > summary > h3 img {
  position: absolute;
  left: 14px;
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  float: none !important;
  padding-left: 0 !important;
}

.depth-chart-grid > div.team .depth-chart-details > summary > h3 a {
  overflow-wrap: anywhere;
  font-size: inherit;
  font-weight: 800;
  text-decoration: none;
}

.depth-chart-grid > div.team .depth-chart-details > ul {
  display: grid;
  gap: 0;
  margin: 0 !important;
  padding: 0 14px !important;
  list-style: none;
}

.depth-chart-grid > div.team .depth-chart-details > ul > li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 2px !important;
  border-bottom: 1px solid #edf1f5;
  font-size: 16px !important;
  line-height: 1.35;
  text-align: left;
}

.depth-chart-grid > div.team .depth-chart-details > ul > li:last-child {
  border-bottom: 0;
}

.depth-chart-player > img,
.depth-chart-player > .fft-headshot {
  margin-right: 6px;
  vertical-align: middle;
}

@media (min-width: 561px) and (max-width: 768px) {
  .depth-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .depth-chart-grid > div.team .depth-chart-details > summary > h3 {
    min-height: 62px;
    padding-left: 70px !important;
    font-size: 17px !important;
  }

  .depth-chart-grid > div.team .depth-chart-details > summary > h3 img {
    left: 10px;
    width: 48px !important;
    height: 48px !important;
  }

  .depth-chart-grid > div.team .depth-chart-details > ul {
    padding: 0 10px !important;
  }

  .depth-chart-grid > div.team .depth-chart-details > ul > li {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 8px;
    font-size: 15px !important;
  }
}

@media (max-width: 560px) {
  .depth-chart-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .depth-chart-details > summary {
    cursor: pointer;
  }

  .depth-chart-grid > div.team .depth-chart-details > summary > h3 {
    min-height: 62px;
    padding: 8px 48px 8px 74px !important;
    font-size: 18px !important;
  }

  .depth-chart-grid > div.team .depth-chart-details > summary > h3 img {
    left: 12px;
    width: 50px !important;
    height: 50px !important;
  }

  /* Open/closed chevron */
  .depth-chart-grid > div.team .depth-chart-details > summary > h3::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }

  .depth-chart-grid > div.team .depth-chart-details[open] > summary > h3::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  .depth-chart-grid > div.team:has(> .depth-chart-details:not([open])) {
    padding-bottom: 0 !important;
  }

  .depth-chart-grid > div.team .depth-chart-details:not([open]) > summary > h3 {
    margin-bottom: 0 !important;
  }

  .depth-chart-details > summary:focus-visible {
    outline: 2px solid #0a78aa;
    outline-offset: -2px;
  }

  .depth-chart-grid > div.team .depth-chart-details > ul > li {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 44px;
    padding: 10px 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .depth-chart-grid > div.team .depth-chart-details > summary > h3::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   #11 NFL schedule: phone week-selector card view (the grid stays >560px)
   -------------------------------------------------------------------------- */
.nfl-sched-weeks {
  display: none;
}

.nfl-sched-weeks__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .schedule-grid-wrap {
    display: none !important;
  }

  .nfl-sched-weeks {
    display: block;
    margin: 12px 0 20px;
  }

  .nfl-sched-weeks .nfl-sched-weeks__chips {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 2px 10px;
    background: #ffffff;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .nfl-sched-weeks .nfl-sched-weeks__chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #b9cedf;
    border-radius: 999px;
    background: #ffffff;
    color: #174f78;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    scroll-snap-align: start;
  }

  .nfl-sched-weeks .nfl-sched-weeks__chip.is-playoff {
    border-color: #1a365d;
  }

  #nfl-sched-week-1:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-1"],
  #nfl-sched-week-2:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-2"],
  #nfl-sched-week-3:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-3"],
  #nfl-sched-week-4:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-4"],
  #nfl-sched-week-5:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-5"],
  #nfl-sched-week-6:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-6"],
  #nfl-sched-week-7:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-7"],
  #nfl-sched-week-8:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-8"],
  #nfl-sched-week-9:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-9"],
  #nfl-sched-week-10:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-10"],
  #nfl-sched-week-11:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-11"],
  #nfl-sched-week-12:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-12"],
  #nfl-sched-week-13:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-13"],
  #nfl-sched-week-14:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-14"],
  #nfl-sched-week-15:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-15"],
  #nfl-sched-week-16:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-16"],
  #nfl-sched-week-17:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-17"],
  #nfl-sched-week-18:checked ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-18"] {
    border-color: #143d6b;
    background: #143d6b;
    color: #ffffff;
  }

  #nfl-sched-week-1:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-1"],
  #nfl-sched-week-2:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-2"],
  #nfl-sched-week-3:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-3"],
  #nfl-sched-week-4:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-4"],
  #nfl-sched-week-5:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-5"],
  #nfl-sched-week-6:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-6"],
  #nfl-sched-week-7:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-7"],
  #nfl-sched-week-8:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-8"],
  #nfl-sched-week-9:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-9"],
  #nfl-sched-week-10:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-10"],
  #nfl-sched-week-11:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-11"],
  #nfl-sched-week-12:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-12"],
  #nfl-sched-week-13:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-13"],
  #nfl-sched-week-14:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-14"],
  #nfl-sched-week-15:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-15"],
  #nfl-sched-week-16:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-16"],
  #nfl-sched-week-17:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-17"],
  #nfl-sched-week-18:focus-visible ~ .nfl-sched-weeks__chips label[for="nfl-sched-week-18"] {
    outline: 2px solid #0a78aa;
    outline-offset: 2px;
  }

  .nfl-sched-weeks__panel {
    display: none;
  }

  #nfl-sched-week-1:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--1,
  #nfl-sched-week-2:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--2,
  #nfl-sched-week-3:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--3,
  #nfl-sched-week-4:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--4,
  #nfl-sched-week-5:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--5,
  #nfl-sched-week-6:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--6,
  #nfl-sched-week-7:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--7,
  #nfl-sched-week-8:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--8,
  #nfl-sched-week-9:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--9,
  #nfl-sched-week-10:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--10,
  #nfl-sched-week-11:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--11,
  #nfl-sched-week-12:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--12,
  #nfl-sched-week-13:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--13,
  #nfl-sched-week-14:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--14,
  #nfl-sched-week-15:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--15,
  #nfl-sched-week-16:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--16,
  #nfl-sched-week-17:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--17,
  #nfl-sched-week-18:checked ~ .nfl-sched-weeks__panels .nfl-sched-weeks__panel--18 {
    display: block;
  }

  .nfl-sched-weeks .nfl-sched-weeks__title {
    margin: 6px 0 10px;
    color: #102f4d;
    font-size: 18px;
    font-weight: 800;
  }

  .nfl-sched-weeks .nfl-sched-weeks__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nfl-sched-weeks .nfl-sched-weeks__game {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #d6e0eb;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.3;
  }

  .nfl-sched-weeks__team {
    color: #102f4d;
    font-weight: 800;
  }

  .nfl-sched-weeks__opp {
    color: #1f2937;
    white-space: nowrap;
  }

  .nfl-sched-weeks .is-away .nfl-sched-weeks__opp {
    color: #4b5563;
  }

  .nfl-sched-weeks .nfl-sched-weeks__game.is-bye {
    border-color: #fecaca;
    background: #fef2f2;
  }

  .nfl-sched-weeks .is-bye .nfl-sched-weeks__opp {
    color: #dc2626;
    font-weight: 800;
  }
}

@media print {
  .nfl-sched-weeks {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   #12 Bye weeks: week cards with team-logo chips
   -------------------------------------------------------------------------- */
.bye-weeks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}

.bye-weeks-grid .bye-week-card {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #d6e0eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(20, 61, 107, 0.06);
}

.bye-weeks-grid .bye-week-card.is-empty {
  background: #f8fafc;
  box-shadow: none;
}

.bye-weeks-grid .bye-week-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: #102f4d;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.bye-week-card__count {
  color: #526477;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bye-week-card__none {
  margin: 0;
  color: #68798b;
  font-size: 14px;
}

.bye-weeks-grid .bye-week-card__teams {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bye-weeks-grid .bye-week-card__teams > li {
  margin: 0;
  padding: 0;
}

.bye-weeks-grid .bye-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px 4px 6px;
  border: 1px solid #cfd8e3;
  border-radius: 999px;
  background: #f6f9fc;
  color: #172b43;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.bye-weeks-grid .bye-team-chip:hover,
.bye-weeks-grid .bye-team-chip:focus {
  border-color: #0a78aa;
  background: #eaf4fb;
  text-decoration: none;
}

.bye-weeks-grid .bye-team-chip img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .bye-weeks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .bye-weeks-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bye-weeks-grid .bye-team-chip {
    min-height: 44px;
  }
}

@media print {
  .bye-weeks-grid {
    display: block;
  }

  .bye-weeks-grid .bye-week-card {
    margin-bottom: 8px;
    box-shadow: none;
    break-inside: avoid;
  }
}