/* Extension palette (Sidekick default) */
:root {
  --panel-bg: #1b1b1b;
  --button-bg: #212121;
  --topbar-bg: #393939;
  --border: #6b6b6b;
  --warning-bg: #6b5a3a;
  --lite-bar-bg: #423a2e;
  --nav-height: 4.5rem;
  --sidebar-width: 200px;
  --shell-gap: 1.5rem;
  --page-padding-inline: 2.5rem;
  /* Single desktop floor (Player Exposure / Contest Breakdown / Lineups).
     Narrower viewport → page scrolls horizontally. Sized to the widest
     fixed-width row rather than the tables: the Player Exposure toolbar on
     the Draft Board tab (slate + view toggle + positions + metric toggle +
     Export/search) measures 75.4rem and must not overflow, since it is
     nowrap and would otherwise be cut off at full width. */
  --tabular-min-width: 76rem;
  --page-min-width: calc(
    var(--sidebar-width) + var(--shell-gap) + var(--tabular-min-width) +
      (2 * var(--page-padding-inline))
  );
  /* Site colors: fixed — DK RB for DraftKings, UD WR for Underdog
     (main.js re-applies the same values on load) */
  --site-draftkings: #91de80;
  --site-underdog: #e67e22;
  --site-draftkings-fill: rgba(145, 222, 128, 0.55);
  --site-underdog-fill: rgba(230, 126, 34, 0.55);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Roboto, Arial, Helvetica, "Segoe UI", sans-serif;
  background: var(--panel-bg);
}

/* --- chrome --- */

.top-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--nav-height);
  min-width: var(--page-min-width);
  padding: 0.75rem 1.25rem;
  background: var(--topbar-bg);
}

.nav-start {
  flex-shrink: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.nav-logo {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 14rem;
  object-fit: contain;
}

.page {
  min-width: var(--page-min-width);
  max-width: 100%;
  margin-inline: auto;
  padding: 2.5rem var(--page-padding-inline);
}

.page-section {
  width: 100%;
}

.page-section.hidden {
  display: none;
}

.home-shell {
  display: flex;
  align-items: flex-start;
  gap: var(--shell-gap);
  width: 100%;
  min-width: calc(var(--sidebar-width) + var(--shell-gap) + var(--tabular-min-width));
}

.home-sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-dashboard {
  display: block;
  width: var(--sidebar-width);
  height: auto;
  object-fit: contain;
}

.home-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-menu-item {
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #c8c8c8;
  text-align: left;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
}

.home-menu-item:hover {
  color: #ffffff;
}

.home-menu-item.active {
  color: #ffffff;
  background: var(--topbar-bg);
}

.home-menu-action {
  font-weight: 500;
  color: #9ecbff;
}

.home-menu-action:hover {
  color: #cce4ff;
}

.home-menu-action:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Progress block under the upload button. Hidden entirely when idle, so it
   takes no space until an upload is actually running. */
.home-upload-status {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: -0.5rem;
  padding: 0 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #b9c4d0;
}

.home-upload-status .home-spinner {
  margin-top: 0.15rem;
}

.home-upload-status-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.home-upload-status-phase {
  color: #dbe4ee;
}

.home-upload-status-hint {
  color: #8b97a5;
}

/* Shared upload / lazy-ADP spinner (status block + table cells). */
.home-spinner {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: #9ecbff;
  border-radius: 50%;
  animation: home-spin 0.7s linear infinite;
  vertical-align: middle;
}

.home-spinner-sm {
  width: 0.7rem;
  height: 0.7rem;
  border-width: 1.5px;
}

td.cell-loading {
  text-align: center;
  vertical-align: middle;
}

@keyframes home-spin {
  to {
    transform: rotate(360deg);
  }
}

.home-main {
  flex: 1;
  min-width: 0;
}

.home-view.hidden {
  display: none;
}

.overview-chart-wrap {
  position: relative;
  width: 100%;
  max-width: none;
  height: 24rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.overview-chart-wrap.hidden {
  display: none;
}

.overview-chart-wrap > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.chart-metric-tabs {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.chart-metric-tabs.hidden {
  display: none;
}

/* Binary either/or control: one capsule, active side filled. */
.segmented-toggle {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--button-bg) 72%, #000);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.chart-metric-tabs.segmented-toggle {
  gap: 0;
}

.segmented-toggle .pill-tab {
  border: none;
  border-radius: 0.3rem;
  background: transparent;
  color: #9a9a9a;
  font-weight: 500;
  box-shadow: none;
  margin: 0;
}

.segmented-toggle .pill-tab + .pill-tab {
  margin-left: 1px;
}

.segmented-toggle .pill-tab:hover:not(.active) {
  color: #d0d0d0;
  background: rgba(255, 255, 255, 0.05);
}

.segmented-toggle .pill-tab.active {
  background: var(--topbar-bg);
  color: #f2f2f2;
  font-weight: 650;
}

.chart-metric-tabs.segmented-toggle .pill-tab {
  border-radius: 0.3rem;
  padding: 0.28rem 0.6rem;
  background: transparent;
  backdrop-filter: none;
}

.chart-metric-tabs.segmented-toggle .pill-tab.active {
  background: var(--topbar-bg);
}

.overview-site-summary {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.overview-site-summary.hidden {
  display: none;
}

.overview-jaccard-section {
  width: 100%;
  margin-top: 0;
}

.overview-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  margin-top: 0;
  align-items: start;
}

.overview-top-grid {
  margin-top: 0;
  align-items: stretch;
}

.overview-top-grid + .overview-charts-grid {
  margin-top: 1.5rem;
}

.overview-top-grid > .overview-chart-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Stretch the site table card to the Jaccard chart height. */
.overview-top-grid .overview-site-summary:not(.hidden) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
}

.overview-panel-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.overview-panel-meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #9a9a9a;
}

/* Full-width tabular panels (player exposure, lineups, contest/jaccard tables) */
.panel-card {
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.panel-card.hidden {
  display: none;
}

/* Lives at the bottom of the Overview view (was its own nav view). */
.overview-contest-breakdown {
  margin-top: 1.5rem;
}

.contest-breakdown-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.contest-breakdown-table {
  width: max(100%, var(--tabular-min-width));
  min-width: var(--tabular-min-width);
  table-layout: fixed;
  border-collapse: collapse;
}

.contest-breakdown-table th,
.contest-breakdown-table td {
  padding: 0.55rem 0.45rem;
  white-space: nowrap;
}

.contest-breakdown-table .contest-name-cell {
  /* Fixed layout + max-width:0 lets this column absorb leftover width and
     truncate instead of overflowing into Entry Fee. */
  width: 28%;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.contest-breakdown-table .contest-name-cell .truncate-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-exposure-toolbar,
.lineups-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.pos-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pos-filter-btn {
  min-width: 2.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--button-bg);
  color: #ddd;
  font-weight: 700;
  cursor: pointer;
}

.pos-filter-btn[data-pos="QB"].active {
  background: #9647b8;
  border-color: #9647b8;
  color: #fff;
}

.pos-filter-btn[data-pos="RB"].active {
  background: #15997e;
  border-color: #15997e;
  color: #fff;
}

.pos-filter-btn[data-pos="WR"].active {
  background: #e67e22;
  border-color: #e67e22;
  color: #fff;
}

.pos-filter-btn[data-pos="TE"].active {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
}

.player-exposure-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-toolbar {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
}

.player-exposure-search input {
  min-width: 12rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: #161616;
  color: #eee;
}

.player-exposure-table-wrap,
.lineups-table-wrap {
  width: 100%;
  overflow-x: auto;
}

/* Scroll inside the card so sticky column headers stay visible. Padding must
   stay 0: the card is the scrollport, and any padding is a band the sticky
   headers don't cover, so rows show through it while scrolling.
   The max-height here is only a first-paint fallback — syncPlayerExposureLayout
   measures the card's actual top edge and overrides it inline so the card runs
   to the bottom of the viewport with no dead space beneath it. */
.player-exposure-table-wrap {
  max-height: calc(100vh - var(--nav-height) - 14rem);
  overflow: auto;
  padding: 0;
}

.player-exposure-table,
.lineups-table {
  width: max(100%, var(--tabular-min-width));
  min-width: var(--tabular-min-width);
  table-layout: auto;
}

.lineups-table {
  /* Fixed layout so Title can take leftover width and ellipsize instead of
     painting over Date / Type. */
  table-layout: fixed;
}

/* Lineup count in the table card's top-left corner. */
.lineups-table-meta {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #b9b9b9;
}

.player-exposure-table th,
.player-exposure-table td,
.lineups-table th,
.lineups-table td {
  padding: 0.55rem 0.45rem;
  white-space: nowrap;
}

.player-exposure-table thead th,
.lineups-table thead th,
.lineup-picks-table thead th {
  white-space: normal;
  line-height: 1.2;
  vertical-align: bottom;
  hyphens: none;
  word-break: normal;
}

.player-exposure-table thead th.group-head,
.lineups-table thead th.group-head,
.lineup-picks-table thead th.group-head {
  text-align: center;
  vertical-align: bottom;
  border-bottom: 1px solid var(--border);
}

.player-exposure-table thead th.group-spacer,
.lineups-table thead th.group-spacer,
.lineup-picks-table thead th.group-spacer {
  border-bottom: none;
}

.th-sortable {
  cursor: pointer;
  user-select: none;
}

.th-sortable:hover {
  color: #e8e8e8;
}

.th-sortable.sorted-asc::after,
.th-sortable.sorted-desc::after {
  margin-left: 0.35rem;
  font-size: 0.7em;
  color: #cfcfcf;
}

.th-sortable.sorted-asc::after {
  content: "▲";
}

.th-sortable.sorted-desc::after {
  content: "▼";
}

.lineup-expand-col {
  width: 1.75rem;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
  text-align: center;
}

.lineup-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: transparent;
  color: #cfcfcf;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.lineup-expand-btn:hover {
  border-color: var(--border);
  background: #2a2a2a;
  color: #fff;
}

.lineup-row {
  cursor: pointer;
}

.lineup-row.is-expanded {
  background: rgba(255, 255, 255, 0.03);
}

.lineup-detail-row td {
  padding: 0.35rem 0.75rem 0.9rem !important;
  background: rgba(0, 0, 0, 0.22);
  white-space: normal;
}

.lineup-picks-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  overflow: hidden;
  max-width: 100%;
}

.lineup-tournament-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.78rem;
}

.lineup-tournament-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.lineup-tournament-label {
  flex: none;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #d0d0d0;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.lineup-tournament-payouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  min-width: 0;
}

.lineup-tournament-payout-chip {
  white-space: nowrap;
  color: #c8c8c8;
}

.lineup-tournament-payout-chip strong {
  color: #e8e8e8;
  font-weight: 650;
}

.lineup-picks-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.lineup-chart-panel {
  position: relative;
  min-width: 0;
  max-width: 100%;
  padding: 0.45rem 0.55rem 0.55rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.lineup-chart-panel-wide {
  grid-column: 1 / -1;
}

.lineup-chart-title {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #d0d0d0;
}

.lineup-chart-toolbar {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  max-width: calc(100% - 0.6rem);
  pointer-events: none;
}

.lineup-chart-toolbar .pill-tabs {
  position: static;
  margin: 0;
  pointer-events: auto;
}

.lineup-chart-toolbar .segmented-toggle {
  position: static;
}

.lineup-chart-toolbar .pill-tab {
  padding: 0.2rem 0.45rem;
  font-size: 0.68rem;
}

.lineup-chart-toolbar .segmented-toggle .pill-tab {
  padding: 0.2rem 0.5rem;
}

.lineup-chart-value-toolbar {
  max-width: min(36rem, calc(100% - 0.6rem));
  row-gap: 0.2rem;
}

.lineup-chart-wrap {
  position: relative;
  width: 100%;
  height: 11.5rem;
}

.lineup-chart-panel-wide .lineup-chart-wrap {
  height: 13rem;
}

.lineup-chart-wrap > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.player-exposure-row {
  cursor: pointer;
}

.player-exposure-row.is-expanded {
  background: rgba(255, 255, 255, 0.03);
}

.player-adp-detail-row td {
  padding: 0.35rem 0.75rem 0.9rem !important;
  background: rgba(0, 0, 0, 0.22);
  white-space: normal;
}

.player-adp-detail {
  max-width: 100%;
  overflow: hidden;
}

.player-adp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.15rem 0 0.5rem;
}

.player-adp-meta {
  margin: 0;
}

.player-adp-chart-wrap {
  position: relative;
  width: 100%;
  height: 20rem;
  padding: 0.45rem 0.55rem 0.55rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.player-adp-chart-wrap > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.playoff-stacks-panel {
  min-height: 0;
}

.playoff-stacks-empty {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
}

.playoff-stacks-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.15rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.playoff-stacks-week {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

.playoff-stacks-week-head {
  margin-bottom: 0.2rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c8c8c8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playoff-stacks-week-empty {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
}

.playoff-stacks-sides-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.15rem;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #a8a8a8;
  font-weight: 600;
  text-align: center;
}

.playoff-stacks-sides-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playoff-stacks-game {
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.playoff-stacks-game:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.playoff-stacks-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.25rem;
  min-width: 0;
}

.playoff-stacks-side {
  min-width: 0;
  overflow: hidden;
}

.playoff-stacks-pill-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0.2rem;
  min-width: 0;
}

.playoff-stacks-team-pill {
  flex: 0 0 auto;
  color: #f5f5f5;
  min-width: 1.75rem;
  padding: 0.08rem 0.28rem;
  font-size: 0.62rem;
}

.playoff-stacks-players {
  min-width: 0;
  overflow: hidden;
  text-align: center;
}

.playoff-stacks-player {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  font-size: 0.7rem;
}

.playoff-stacks-player + .playoff-stacks-player {
  margin-top: 0.08rem;
}

.lineup-picks-table-col {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.lineup-picks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.lineup-picks-table th,
.lineup-picks-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.lineup-picks-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a8a8a8;
  font-weight: 600;
  white-space: normal;
}

.lineup-picks-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lineup-picks-table .heat-cell {
  font-weight: 600;
}

.lineup-picks-table tbody tr:last-child td {
  border-bottom: none;
}

.player-name-cell {
  white-space: normal;
  line-height: 1.25;
  min-width: 5.5rem;
  max-width: 10rem;
  vertical-align: middle;
}

.player-exposure-table td.player-name-cell,
.lineup-picks-table td.player-name-cell {
  white-space: normal;
}

.player-name-first,
.player-name-last {
  display: block;
}

.player-exposure-table td:nth-child(2),
.lineups-table td.contest-name-cell {
  white-space: normal;
  min-width: 8rem;
  max-width: 18rem;
}

.lineups-table td.contest-name-cell {
  /* Fixed layout + max-width:0 lets Title absorb leftover width and truncate. */
  width: 28%;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.lineups-table td.contest-name-cell .truncate-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-build-cell {
  font-variant-numeric: tabular-nums;
}

.team-build-count {
  font-weight: 700;
}

.team-build-sep {
  font-weight: 400;
  color: #fff;
}

.team-pill,
.pos-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.team-pill {
  background: #2f2f2f;
  color: #f0f0f0;
}

.pos-pill.pos-QB {
  background: rgba(150, 71, 184, 0.35);
  color: #e7c5f7;
}

.pos-pill.pos-RB {
  background: rgba(21, 153, 126, 0.35);
  color: #b6f0e2;
}

.pos-pill.pos-WR {
  background: rgba(230, 126, 34, 0.35);
  color: #ffd7b0;
}

.pos-pill.pos-TE {
  background: rgba(41, 128, 185, 0.35);
  color: #b7ddf7;
}

.pos-pill.pos-UNK {
  background: #333;
  color: #bbb;
}

.heat-cell {
  font-weight: 600;
}

/* Centered on ~8.33% (1/12): yellow mid, red below, green above */
.heat-cell.heat-mid {
  background: rgba(234, 179, 8, 0.42);
  color: #f5e6a8;
}

.heat-cell.heat-lo-1 {
  background: rgba(239, 128, 68, 0.38);
  color: #ffd4b8;
}

.heat-cell.heat-lo-2 {
  background: rgba(220, 70, 55, 0.42);
  color: #ffc4bc;
}

.heat-cell.heat-lo-3 {
  background: rgba(185, 28, 28, 0.55);
  color: #ffb4b4;
}

.heat-cell.heat-hi-1 {
  background: rgba(132, 204, 22, 0.32);
  color: #d8f5a6;
}

.heat-cell.heat-hi-2 {
  background: rgba(34, 197, 94, 0.4);
  color: #b7f0c8;
}

.heat-cell.heat-hi-3 {
  background: rgba(21, 128, 61, 0.55);
  color: #a7efc0;
}

.lineups-slate-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #c8c8c8;
  font-size: 0.9rem;
}

.lineups-slate-select {
  min-width: 14rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: #161616;
  color: #eee;
}

#lineups-filter-toggle.has-filters {
  border-color: #9ab6ff;
  color: #cfe0ff;
}

.lineups-filter-panel {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem 0.9rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.lineups-facets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.9rem 1.1rem;
  align-items: start;
}

.lineups-facet-group {
  min-width: 0;
}

.lineups-facet-group-wide {
  grid-column: span 2;
}

.lineups-facet-title {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b9b9b9;
}

.lineups-facet-options {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 11rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.lineups-facet-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: #ddd;
  cursor: pointer;
  padding: 0.1rem 0.15rem;
  border-radius: 0.25rem;
}

.lineups-facet-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.lineups-facet-option input[type="checkbox"] {
  accent-color: #9ab6ff;
  flex: none;
}

.lineups-facet-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineups-facet-count {
  flex: none;
  color: #8a8a8a;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.lineups-facet-range {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.lineups-facet-range-sep {
  color: #8a8a8a;
}

.lineups-facet-date {
  width: 9.5rem;
}

.lineups-facet-player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.lineups-facet-clear-all {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.25rem;
}

/* Player Exposure: what the numbers below are actually of, kept visible while
   the filter panel is collapsed. Dashed so it reads as annotation, not data. */
.exposure-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
  font-size: 0.8rem;
}

.exposure-filter-summary-title {
  font-weight: 650;
  color: #b9b9b9;
}

.exposure-filter-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.exposure-filter-summary-list li {
  min-width: 0;
}

.exposure-filter-summary-label {
  color: #b9b9b9;
}

.exposure-filter-summary-value {
  font-weight: 600;
}

.exposure-filter-summary-clear {
  margin-left: auto;
}

.lineups-advanced {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.lineups-advanced-label {
  display: block;
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b9b9b9;
}

.lineups-filter-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.lineups-filter-fields {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.lineups-filter-fields.hidden {
  display: none;
}

.lineups-filter-input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: #161616;
  color: #eee;
}

.lineups-filter-num {
  width: 4.5rem;
}

.lineups-filter-text {
  min-width: 12rem;
}

.lineups-filter-before-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #c8c8c8;
  font-size: 0.85rem;
  white-space: nowrap;
}

.lineups-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.lineup-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--button-bg);
  color: #ddd;
  font-size: 0.85rem;
}

.lineup-filter-chip-remove {
  border: 0;
  background: none;
  color: #aaa;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.lineup-filter-chip-remove:hover {
  color: #fff;
}

.lineup-filter-clear {
  border: 0;
  background: none;
  color: #9ab6ff;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0.2rem 0.3rem;
}

.clv-cell {
  background: rgba(234, 179, 8, 0.12);
  font-weight: 700;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.overview-site-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.overview-site-table th,
.overview-site-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.overview-site-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a8a8a8;
  border-bottom-color: var(--border);
}

.overview-site-table tbody tr:last-child th,
.overview-site-table tbody tr:last-child td {
  border-bottom: none;
}

.overview-site-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.overview-site-table th.site-col {
  text-align: left;
  font-weight: 600;
}

.overview-site-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.overview-site-cell-icon-only {
  justify-content: center;
}

.contest-breakdown-table th.site-col,
.contest-breakdown-table td.site-col {
  width: 3.5rem;
  text-align: center;
}

.overview-site-mark {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #2a2a2a;
}

/* Underdog's cached favicon is a navy dog on transparency, so it needs a
   light backdrop to be visible against the dark UI. */
.overview-site-mark.site-underdog {
  background: var(--site-underdog);
}

.overview-site-mark.is-fallback.site-draftkings {
  background: var(--site-draftkings);
}

.overview-site-favicon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-site-name {
  font-weight: 600;
}

.overview-site-primary {
  font-weight: 700;
  color: #f0f0f0;
}

.overview-site-pct {
  margin-left: 0.35rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: #9a9a9a;
}

.overview-chart-heading.hidden {
  display: none;
}

.overview-chart-panel {
  min-width: 0;
  width: 100%;
}

.overview-position-section {
  max-width: none;
  margin: 0;
}

.overview-position-section.hidden {
  display: none;
}

.jaccard-chart-wrap {
  height: 24rem;
  max-width: none;
  margin-top: 0;
  /* Reserve the left strip for the absolute metadata card; radar draws in the rest. */
  padding: 0.75rem 0.75rem 0.75rem clamp(10.75rem, 36%, 15.5rem);
}

.jaccard-summary {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  max-width: 14.5rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: rgba(20, 20, 20, 0.72);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  backdrop-filter: blur(4px);
}

.jaccard-summary.hidden {
  display: none;
}

.jaccard-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.jaccard-summary-table th,
.jaccard-summary-table td {
  padding: 0.35rem 0.35rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.jaccard-summary-table tr:last-child th,
.jaccard-summary-table tr:last-child td {
  border-bottom: none;
}

.jaccard-summary-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding-left: 0.75rem;
}

.page-status {
  margin: 0 0 1.5rem;
  max-width: 40rem;
}

.page-status.hidden {
  display: none;
}

.user-profile {
  max-width: 40rem;
}

.user-profile .field dd {
  white-space: nowrap;
}

.user-profile .mono {
  word-break: normal;
}

.unified-section .section-heading {
  margin-top: 0;
}

.field {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.field:last-child {
  margin-bottom: 0;
}

.field dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field dd {
  margin: 0;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.dock-tab,
.pill-tab,
.btn {
  font: inherit;
  color: inherit;
  background: var(--button-bg);
  border: 1px solid var(--border);
  cursor: pointer;
}

.pill-tab {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 999px;
}

.chart-metric-tabs .pill-tab {
  border-radius: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: color-mix(in srgb, var(--button-bg) 88%, transparent);
  backdrop-filter: blur(4px);
}

.chart-metric-tabs .pill-tab.active {
  background: var(--topbar-bg);
}

.btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0.5rem;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-danger {
  color: #ffb4b4;
  border-color: rgba(220, 80, 80, 0.55);
}

.btn-danger:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(140, 40, 40, 0.55);
}

.dock-tab.active,
.pill-tab.active {
  background: var(--topbar-bg);
}

.dock-meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.dock-scroll {
  max-height: 22rem;
  overflow: auto;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.dock-scroll.table-panel {
  max-height: min(70vh, 48rem);
}

.pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.section-heading {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.section-heading.overview-chart-heading {
  margin: 1.5rem 0 0.35rem;
}

.dump-heading {
  margin: 1rem 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.dump-raw {
  margin: 0;
  padding: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.dump-inline {
  max-height: 10rem;
  margin-bottom: 0.75rem;
}

/* --- warnings (extension warm tone) --- */

/* Upload failure banner. Sits above the view panels so a failure started from
   the nav-bar button is visible from any view, not just Debug. */

.upload-error {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.45;
  background: var(--warning-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.upload-error-danger {
  border-color: var(--danger, #b4423a);
}

/* Account -> Delete stored data */

.account-danger-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.account-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.upload-error-dismiss {
  flex: 0 0 auto;
  padding: 0 0.35rem;
  font-size: 1.1rem;
  line-height: 1.2;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  cursor: pointer;
  opacity: 0.7;
}

.upload-error-dismiss:hover {
  opacity: 1;
}

.upload-banner-action {
  flex: 0 0 auto;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 0.35rem;
  cursor: pointer;
  opacity: 0.85;
}

.upload-banner-action:hover:not(:disabled) {
  opacity: 1;
}

.upload-banner-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.dock-warning {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  line-height: 1.45;
  background: var(--warning-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.dock-warning strong {
  font-weight: 600;
}

.contest-group-mismatch {
  border-color: var(--warning-bg);
}

/* --- tables --- */

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.data-table th,
.data-table td {
  padding: 0.45rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.data-table td.num,
.data-table th.num {
  text-align: right;
  white-space: nowrap;
}

.data-table.rollup-table th.num,
.data-table.rollup-table td.num {
  font-variant-numeric: tabular-nums;
}

.data-table th {
  position: sticky;
  top: 0;
  background: var(--button-bg);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  white-space: normal;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Homepage tabular views: keep the old 56rem floor (override .data-table fixed layout). */
.player-exposure-table.data-table,
.lineups-table.data-table {
  width: max(100%, var(--tabular-min-width));
  min-width: var(--tabular-min-width);
  table-layout: auto;
}

.lineups-table.data-table {
  table-layout: fixed;
}

.player-exposure-table.data-table th,
.player-exposure-table.data-table td,
.lineups-table.data-table th,
.lineups-table.data-table td {
  overflow-wrap: normal;
  word-break: normal;
}

/* Two-row header: keep group labels + column titles stacked while scrolling.
   Separate border model so each sticky cell carries its own border-bottom —
   collapsed borders are painted by the table and scroll out from under the
   pinned cells, leaving a see-through seam. */
.player-exposure-table.data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.player-exposure-table.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--button-bg);
}

.player-exposure-table.data-table thead tr:first-child th {
  z-index: 3;
}

.contest-group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.contest-group-table th,
.contest-group-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.contest-group-table th {
  font-weight: 500;
  font-size: 0.78rem;
}

.contest-group-table td.num {
  text-align: right;
  white-space: nowrap;
}

.contest-name-cell {
  max-width: 0;
  width: 100%;
}

/* --- accordions --- */

.accordion-tree {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.accordion-nested {
  margin-top: 0.25rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border);
}

.accordion-item {
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}

.accordion-header::before {
  content: "\25B6";
  flex-shrink: 0;
  margin-right: 0.35rem;
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.accordion-item.open > .accordion-header::before {
  transform: rotate(90deg);
}

.accordion-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.truncate-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.accordion-meta {
  flex-shrink: 0;
  font-size: 0.78rem;
  white-space: nowrap;
}

.accordion-body {
  padding: 0.5rem 0.85rem 0.85rem 1.5rem;
}

.level-entry .accordion-header {
  font-size: 0.85rem;
}

.level-entry .accordion-title {
  font-weight: 500;
}

.entry-picks-panel {
  overflow-x: auto;
  max-height: 24rem;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

/* --- custom rankings --- */

.custom-rankings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
  min-width: var(--tabular-min-width);
}

.custom-rankings-pane {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 1rem 1.15rem;
  background: var(--button-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.custom-rankings-pane-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.custom-rankings-pane-title {
  margin: 0;
  font-size: 1.05rem;
}

.custom-rankings-pane-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.rankings-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-rankings-panel {
  flex: 1;
  min-height: 18rem;
  max-height: calc(100vh - var(--nav-height) - 16rem);
  overflow: auto;
  padding: 0.35rem 0.5rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}

.custom-rankings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-rankings-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 0.9rem;
  cursor: grab;
  user-select: none;
}

.custom-rankings-list li:last-child {
  border-bottom: none;
}

.custom-rankings-list li.dragging {
  opacity: 0.45;
}

.custom-rankings-list li.drag-over {
  border-top: 2px solid var(--site-underdog);
}

.custom-rankings-list .rank-num {
  flex: 0 0 2.25rem;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.custom-rankings-list .rank-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-rankings-list .rank-handle {
  flex: 0 0 auto;
  color: #777;
  letter-spacing: -0.1em;
  font-size: 0.85rem;
}

.custom-rankings-list li.empty-rankings {
  cursor: default;
  color: #999;
  border-bottom: none;
}

.custom-rankings-status:empty {
  display: none;
}

/* --- visibility --- */

.hidden {
  display: none;
}

/* --- responsive (Overview only) --- */

/* Player Exposure sizes its table card to the bottom of the viewport, so the
   page's own bottom padding would just re-open the gap (and make the page
   scrollable past it). */
body.view-player-exposure .page {
  padding-bottom: 0;
}

/* The wide page min-width exists for the tabular views (72rem tables). While
   the Overview view is active the page tracks the viewport instead, so the
   chart grids below can actually collapse at their breakpoint. */
body.view-overview .top-nav,
body.view-overview .page,
body.view-overview .home-shell {
  min-width: 0;
}

@media (max-width: 1100px) {
  .overview-charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body.view-overview .home-shell {
    flex-direction: column;
  }

  body.view-overview .home-sidebar {
    flex: none;
    width: 100%;
  }
}

/* --- Player Exposure: Draft Board sub-tab --- */

/* Anchored layout: groups pack from the left and the actions pin right, so
   showing or hiding the board's metric toggle cannot reflow the position
   filters or the search box. `space-between` (the shared toolbar default)
   redistributes every gap when an item appears, which is what made the whole
   row jump when switching tabs. */
.player-exposure-toolbar {
  justify-content: flex-start;
  /* One row, always. The shared toolbar wraps, which sent Export and the
     search box to a second line at widths above the page's horizontal-scroll
     floor — the row rearranging itself mid-resize. Overflow is handled by the
     page scroll the tabular views already rely on. */
  flex-wrap: nowrap;
}

/* Nothing in the row shrinks or wraps: the groups keep their measured size and
   the row is simply cut off at narrow widths. */
.player-exposure-toolbar > * {
  flex: none;
}

.player-exposure-toolbar .player-exposure-search input {
  white-space: nowrap;
}

.player-exposure-toolbar .player-exposure-actions {
  margin-left: auto;
}

.player-exposure-tabs,
.draft-board-metric {
  flex: none;
}

/* The active pill renders at font-weight 650, so its label measures wider than
   the inactive one and the group's total width changes with the selection —
   nudging the position filters by a fraction of a pixel on every switch. Equal
   fixed widths (sized for the bolder label) keep the group constant. */
.player-exposure-tabs .pill-tab,
.draft-board-metric .pill-tab {
  width: 6.25rem;
  text-align: center;
}

.draft-board-wrap {
  padding: 0.75rem;
  overflow-x: auto;
}

.draft-board-legend {
  display: grid;
  grid-template-columns: auto minmax(12rem, 22rem);
  grid-template-areas:
    "label ramp"
    "label scale";
  align-items: center;
  gap: 0.15rem 0.75rem;
  justify-content: end;
  margin-bottom: 0.75rem;
}

.draft-board-legend-label {
  grid-area: label;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ddd;
}

.draft-board-legend-ramp {
  grid-area: ramp;
  height: 0.6rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border);
}

.draft-board-legend-scale {
  grid-area: scale;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #9a9a9a;
}

/* Seat column + one column per team. Cells are fixed-width so the board keeps
   its grid shape and scrolls horizontally rather than reflowing — a reflowed
   snake board would put the wrong pick numbers under the wrong seats. */
.draft-board-grid {
  /* Fixed columns, not minmax(...,1fr): with `min-width: max-content` a
     flexible track resolves to the widest player name on the board, so one
     "Jaxon Smith-Njigba" stretched all twelve columns. Names are
     middle-truncated in JS to fit this width instead. */
  --board-col: 5.75rem;
  display: grid;
  grid-template-columns: 4.75rem repeat(var(--board-teams, 12), var(--board-col));
  gap: 2px;
  min-width: max-content;
}

.draft-board-corner {
  min-height: 1.25rem;
}

.draft-board-seat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #9a9a9a;
}

.draft-board-round-label {
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ddd;
  white-space: nowrap;
}

.draft-board-cell {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-height: 3.9rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--button-bg);
  overflow: hidden;
}

.draft-board-cell.is-blank {
  background: transparent;
  border: 1px dashed var(--border);
  opacity: 0.35;
}

/* Filtered-out players keep their slot so the board still reads as a draft:
   compacting would leave the pick numbers describing nothing. */
.draft-board-cell.is-dimmed {
  background: var(--button-bg);
  color: #6b6b6b;
  opacity: 0.4;
}

.draft-board-cell-slot {
  font-size: 0.6rem;
  font-weight: 700;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* No text-overflow: names are fitted to the measured cell width in JS, and a
   CSS ellipsis on top of that produced a second set of dots ("D. W…hingt…"). */
.draft-board-cell-name {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
}

.draft-board-cell-sub {
  font-size: 0.65rem;
  opacity: 0.85;
  white-space: nowrap;
}

.draft-board-cell-value {
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Rostered players with no slot on this slate's board. Desaturated rather than
   dimmed to a flat grey: the heat still encodes how much of them you own, it
   just sits visually behind the drafted board. */
.draft-board-offboard-sep {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0.2rem;
  border-top: 1px solid var(--border);
}

.draft-board-round-label.is-offboard {
  color: #9a9a9a;
}

.draft-board-cell.is-offboard {
  filter: grayscale(0.7);
  opacity: 0.8;
}

.draft-board-cell.is-offboard .draft-board-cell-slot {
  font-style: italic;
  opacity: 0.7;
}

.draft-board-cell.is-blank.is-offboard {
  border: none;
  background: transparent;
}

/* --- Overview: Jaccard radars, one per contest group, behind tabs --- */

/* The toggle rides in the row the Overview panel uses for its subtitle, so it
   costs no vertical space of its own and both panels' content starts on the
   same line. The row takes its height from the gauge span's line box (shared
   .dock-meta type), and the toggle is taken out of flow so its own height can
   never push that row taller — which is what keeps the panels aligned. */
.jaccard-title-row {
  position: relative;
  margin-top: 0;
}

/* Toggle + slate dropdown share the row as one absolutely-placed unit, so the
   row's height still comes from the subtitle line box alone and the two panels
   stay aligned no matter how tall these controls get. */
.jaccard-controls {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  /* stretch, not center: the dropdown takes its height from the segmented
     toggle instead of its own padding, so the two controls always match
     exactly even if the pill padding or font changes. */
  align-items: stretch;
  gap: 0.4rem;
}

.jaccard-tabs {
  display: flex;
  margin: 0;
}

.jaccard-slate-label {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

/* Same font-size, line-height and vertical padding as the pill buttons, so the
   two controls are exactly the same height and nothing shifts. */
.jaccard-slate-select {
  max-width: 11rem;
  /* Height comes from the stretched row; padding only sets the inline inset. */
  height: 100%;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  background: var(--button-bg);
  color: #d0d0d0;
  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1.25;
}

.jaccard-slate-select:disabled {
  opacity: 0.45;
}

/* Compact enough that the few pixels it stands proud of the text line are
   absorbed by the row's margins rather than crowding the chart. */
.jaccard-tabs .pill-tab {
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.25;
}

/* Fills the leftover section height so the chart box's bottom border lands on
   the same line as the Overview panel's. The grid already stretches the two
   sections to equal height; this passes that height down to the box. */
.overview-jaccard-section {
  display: flex;
  flex-direction: column;
}

/* flex-basis 0 (not auto) so this box's height comes from the section's
   leftover space, never from its content. Its cards are taken out of flow
   below, which closes the loop: Chart.js sizes the canvas to the box, so a
   content-derived box height would let each resize feed back and grow the
   panel without bound. */
.jaccard-charts {
  position: relative;
  flex: 1 1 0;
  min-height: 20rem;
}

/* Absolute so the cards contribute no height to .jaccard-charts — all three
   stack in the same space and only the active one is displayed. */
.jaccard-chart-card {
  position: absolute;
  inset: 0;
  min-width: 0;
  /* One width drives both the reserved right strip and the summary card, so
     the card can never overhang the radar and cover an axis label. Kept in
     rem rather than a percentage: the padding resolves against the wrapper's
     width but the summary's max-width against its padding box, so a
     percentage would not mean the same thing in both places. */
  --jaccard-strip: 12rem;
}

/* Each card is its own positioning context for the absolute summary overlay;
   without this all three summaries stack onto the first card. The radar is
   anchored left, so the reserved strip flips to the right edge (the base rule
   reserves it on the left). */
.jaccard-chart-card .jaccard-chart-wrap {
  position: relative;
  height: 100%;
  padding: 0.75rem var(--jaccard-strip) 0.75rem 0.75rem;
}

/* Top-right, opposite the left-anchored radar. */
.jaccard-chart-card .jaccard-summary {
  left: auto;
  right: 0.75rem;
  max-width: calc(var(--jaccard-strip) - 1.5rem);
}

/* Chart.js writes `display: block` as an inline style on the canvas while
   sizing it, and an inline style outranks any selector — so hiding the canvas
   is the rare case where !important is the only tool that works. Without it a
   stale radar stays painted behind the empty-state message. */
.jaccard-chart-wrap > canvas.hidden {
  display: none !important;
}

/* Bottom of the reserved strip, under the summary card — inside the box, so
   it does not add height below the border. */
.jaccard-chart-meta {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  max-width: calc(var(--jaccard-strip) - 1.5rem);
  margin: 0;
  text-align: right;
}

/* Centred across the whole box when a group has nothing to draw. :not(.hidden)
   because this block is later in the file than the global .hidden rule and
   would otherwise win the display fight. */
.jaccard-chart-empty {
  margin: 0;
}

.jaccard-chart-empty:not(.hidden) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  text-align: center;
}

@media (max-width: 900px) {
  .jaccard-charts {
    min-height: 18rem;
  }

  .jaccard-chart-card .jaccard-chart-wrap {
    /* Too narrow for the reserved side strip: let the summary sit inline. */
    padding-right: 0.75rem;
  }

  .jaccard-chart-card .jaccard-chart-meta {
    position: static;
    max-width: none;
    text-align: left;
  }

  .jaccard-chart-card .jaccard-summary {
    position: static;
    max-width: none;
    margin-bottom: 0.5rem;
  }
}

/* --- Contest Breakdown: rows select into the Overview charts --- */

.contest-breakdown-row {
  cursor: pointer;
}

.contest-breakdown-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.contest-breakdown-row:focus-visible {
  outline: 2px solid var(--border);
  outline-offset: -2px;
}

.contest-swatch-cell {
  width: 1.9rem;
  padding-right: 0;
  text-align: center;
}

/* Hollow ring until selected, then filled with the row's chart colour — the
   same colour its band carries in the Volume and Draft Position charts. */
.contest-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.2rem;
  background: transparent;
  vertical-align: middle;
}

.contest-breakdown-row.is-selected .contest-swatch.is-on {
  background: var(--contest-slot-color, var(--border));
  border-color: var(--contest-slot-color, var(--border));
}

.contest-breakdown-row.is-selected {
  background: rgba(255, 255, 255, 0.06);
  /* Colour rail marking which chart band this row owns. */
  box-shadow: inset 3px 0 0 0 var(--contest-slot-color, transparent);
}